/* ============================================================
   Modale d'authentification (Connexion / Inscription)
   Popover API native. Tokens dentaire365 (navy / rouge marque).
   ============================================================ */
.pep-auth{
  --pep-navy:#182747;
  --pep-navy-deep:#11203f;
  --pep-red:var(--wp--preset--color--primary, #DF2318);
  --pep-red-soft:var(--wp--preset--color--accent, #e8392f);
  --pep-ink:#1b2540;
  --pep-meta:#8b909b;
  --pep-line:#e4e6eb;
  --pep-line-2:#d7dae1;
  /* Polices : tokens du thème (tokens.css). Repli sur les presets theme.json
     si la feuille de tokens n'est pas chargée. */
  --pep-sans:var(--font-titre, var(--wp--preset--font-family--sans));
  --pep-serif:var(--font-texte, var(--wp--preset--font-family--serif));

  /* Élargie pour l'inscription, dont les champs s'affichent sur deux colonnes.
     Le panneau de connexion, lui, reste étroit (cf. #pep-panel-login). */
  /* `overflow:hidden` fait suivre l'arrondi aux enfants : sans lui, l'en-tête
     navy déborderait dans les coins. */
  width:100%;max-width:720px;padding:0;border:0;border-radius:10px;overflow:hidden;
  /* Le nombre de champs vient d'Odoo : un pôle exigeant intérêts et profession
     produit un formulaire nettement plus haut. Sans plafond ni défilement, le
     bas du formulaire — bouton de soumission compris — serait inatteignable.
     ATTENTION : ne JAMAIS poser `display` ici. La feuille du navigateur cache
     un popover fermé via `[popover]:not(:popover-open){display:none}` ; toute
     déclaration `display` sur ce sélecteur l'écrase, la modale reste affichée
     en permanence et n'est plus jamais « ouverte » au sens de la Popover API —
     ni la croix ni Escape ne la ferment alors. La mise en page flex est donc
     posée sur `:popover-open` ci-dessous. */
  max-height:92dvh;
  background:#fff;color:var(--pep-ink);
  box-shadow:0 24px 70px rgba(17,32,63,.40);
  font-family:var(--pep-sans);
}
.pep-auth:popover-open{
  /* Colonne flex uniquement à l'ouverture : le corps peut ainsi défiler sous
     l'en-tête fixe sans que le `display` ne fuite sur l'état fermé. */
  display:flex;flex-direction:column;
  animation:pepAuthIn .32s cubic-bezier(.2,.7,.3,1) both;
}
.pep-auth::backdrop{
  background:linear-gradient(180deg, rgba(17,32,63,.55), rgba(17,32,63,.72));
}
@keyframes pepAuthIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.pep-auth:popover-open{animation:none;}}

.pep-auth__close{
  /* `.pep-auth` étant en flex, ses enfants directs se peignent comme des
     éléments positionnés, en ordre DOM. La croix venant en premier, elle
     passerait SOUS l'en-tête navy — visible, mais plus cliquable. Le z-index
     la remet au-dessus. */
  position:absolute;top:14px;right:14px;width:34px;height:34px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;color:#fff;border-radius:3px;
}
.pep-auth__close svg{width:18px;height:18px;}
.pep-auth__close:hover{background:rgba(255,255,255,.14);}

/* en-tête navy */
.pep-auth__head{background:var(--pep-navy);color:#fff;padding:26px 32px 22px;text-align:center;}
.pep-auth__logo{font-family:var(--pep-sans);font-weight:800;font-size:30px;letter-spacing:-.02em;color:#fff;line-height:1;}
.pep-auth__tagline{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#aeb6c6;margin-top:9px;}

/* onglets */
.pep-auth__tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--pep-navy-deep);}
.pep-auth__tab{
  appearance:none;border:0;cursor:pointer;background:transparent;
  font-family:var(--pep-sans);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#9aa4b8;padding:16px 8px;position:relative;transition:color .18s;
}
.pep-auth__tab:hover{color:#cdd4e0;}
.pep-auth__tab[aria-selected="true"]{background:#fff;color:var(--pep-ink);}
.pep-auth__tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--pep-red);}

/* corps + panneaux */
.pep-auth__body{padding:30px 32px 34px;overflow-y:auto;flex:1 1 auto;}
/* La connexion n'a que deux champs : elle garde sa largeur d'origine, centrée,
   plutôt que de s'étirer sur les 720px ouverts pour l'inscription. */
#pep-panel-login{max-width:400px;margin-inline:auto;}
.pep-auth__panel{display:none;}
.pep-auth__panel.is-active{display:block;animation:pepPanelIn .26s ease both;}
@keyframes pepPanelIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.pep-auth__panel.is-active{animation:none;}}

.pep-auth__intro{font-family:var(--pep-serif);font-size:15px;line-height:1.4;color:#3a4254;margin:0 0 22px;}

/* Grille des champs d'inscription — deux colonnes.
   La liste des champs est dictée par Odoo : on pose une règle de flux plutôt
   qu'un découpage en rangées. Les contrôles pleine largeur par nature
   (consentement, centres d'intérêt) traversent les deux colonnes. */
.pep-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;}
.pep-fields > .pep-check,
.pep-fields > .pep-fieldset{grid-column:1 / -1;}

/* champs (inscription + reskin login espace-pro) */
.pep-field{margin-bottom:17px;}
.pep-field label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pep-ink);margin-bottom:7px;}
.pep-field__req{color:var(--pep-red);margin-left:2px;}
.pep-field input,
.pep-field select{
  width:100%;font-family:var(--pep-sans);font-size:14.5px;color:var(--pep-ink);
  border:1px solid var(--pep-line-2);border-radius:3px;background:#fff;
  padding:12px 13px;outline:none;transition:border-color .15s, box-shadow .15s;
}
.pep-field input::placeholder{color:#aab0bc;}
.pep-field input:focus,
.pep-field select:focus{border-color:var(--pep-navy);box-shadow:0 0 0 3px rgba(24,39,71,.10);}
.pep-field select{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23182747' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}

/* civilité segmentée */
.pep-seg{display:flex;gap:8px;}
.pep-seg input{position:absolute;opacity:0;pointer-events:none;}
.pep-seg label{
  flex:1;margin:0;text-align:center;cursor:pointer;text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:600;color:var(--pep-ink);
  border:1px solid var(--pep-line-2);border-radius:3px;padding:11px 6px;transition:.15s;
}
.pep-seg input:checked + label{background:var(--pep-navy);border-color:var(--pep-navy);color:#fff;}
.pep-seg label:hover{border-color:var(--pep-navy);}

/* CGU */
.pep-check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 22px;}
.pep-check input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--pep-navy);}
.pep-check label{font-size:12px;line-height:1.4;color:#3a4254;margin:0;text-transform:none;letter-spacing:0;font-weight:500;}

/* bouton submit (inscription + reskin login) */
.pep-auth__submit,
.pep-auth__panel .parresia-espace-pro-login-form__submit{
  width:100%;border:0;cursor:pointer;
  background:var(--pep-red);color:#fff;
  font-family:var(--pep-sans);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  padding:15px;border-radius:3px;transition:background .15s;
}
.pep-auth__submit:hover,
.pep-auth__panel .parresia-espace-pro-login-form__submit:hover{background:var(--pep-red-soft);}

/* zone de retour du formulaire d'inscription (vide tant qu'aucun statut) */
.pep-auth__alert{font-size:13px;line-height:1.45;margin:0;border-radius:3px;}
.pep-auth__alert:not(:empty){padding:11px 13px;margin:0 0 16px;}
.pep-auth__alert--error:not(:empty){background:#fdecec;color:#8c1c1c;}
.pep-auth__alert--success:not(:empty){background:#eaf6ec;color:#1c5c2a;}

.pep-auth__note{font-size:12px;color:#5b6478;text-align:center;margin:10px 0 0;}

/* bascule bas de carte */
.pep-auth__switch{text-align:center;font-size:13px;color:#3a4254;margin:20px 0 0;}
.pep-auth__switch button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-weight:800;color:var(--pep-red);text-decoration:underline;padding:0;
}

/* ---- reskin du formulaire de connexion espace-pro embarqué ---- */
.pep-auth__panel .parresia-espace-pro-login-form{margin:0;}
.pep-auth__panel .parresia-espace-pro-login-form__field{margin:0 0 17px;}
.pep-auth__panel .parresia-espace-pro-login-form__field label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pep-ink);margin-bottom:7px;
}
.pep-auth__panel .parresia-espace-pro-login-form__field input{
  width:100%;font-family:var(--pep-sans);font-size:14.5px;color:var(--pep-ink);
  border:1px solid var(--pep-line-2);border-radius:3px;background:#fff;
  padding:12px 13px;outline:none;transition:border-color .15s, box-shadow .15s;
}
.pep-auth__panel .parresia-espace-pro-login-form__field input:focus{border-color:var(--pep-navy);box-shadow:0 0 0 3px rgba(24,39,71,.10);}
.pep-auth__panel .parresia-espace-pro-login-form__required{color:var(--pep-red);margin-left:2px;}
/* « se souvenir » masqué dans la modale (conforme maquette) */
.pep-auth__panel .parresia-espace-pro-login-form__remember{display:none;}
.pep-auth__panel .parresia-espace-pro-login-form__reset{font-size:11px;font-weight:700;margin:10px 0 0;}
.pep-auth__panel .parresia-espace-pro-login-form__reset a{color:var(--pep-red);}
.pep-auth__panel .parresia-espace-pro-login-form__actions{margin-top:6px;}
.pep-auth__panel .parresia-espace-pro-login-form__alert{
  font-size:13px;line-height:1.4;color:#8a1f17;background:#fdecea;border:1px solid #f5c6c2;
  border-radius:3px;padding:11px 13px;margin:0 0 18px;
}
/* pas d'erreur → conteneur vide : on le masque (sinon rectangle rose fantôme). */
.pep-auth__panel .parresia-espace-pro-login-form__alert:empty{display:none;}

/* ---- état « déjà connecté » ---- */
.pep-auth__panel .parresia-espace-pro-login-form--logged-in{margin:0;text-align:center;}
.pep-auth__panel .parresia-espace-pro-login-form__badge{
  width:52px;height:52px;margin:4px auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,138,74,.10);color:#1c8a4a;
}
.pep-auth__panel .parresia-espace-pro-login-form__badge svg{width:26px;height:26px;}
.pep-auth__panel .parresia-espace-pro-login-form__notice{
  font-family:var(--pep-serif);font-size:16px;line-height:1.4;color:var(--pep-ink);margin:0 0 18px;
}
.pep-auth__panel .parresia-espace-pro-login-form__user{
  display:flex;align-items:center;gap:12px;text-align:left;
  border:1px solid var(--pep-line-2);border-radius:3px;
  padding:12px 14px;margin:0 0 22px;
}
.pep-auth__panel .parresia-espace-pro-login-form__avatar{
  width:40px;height:40px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--pep-navy);color:#fff;
  font-family:var(--pep-sans);font-weight:800;font-size:15px;letter-spacing:.01em;
}
.pep-auth__panel .parresia-espace-pro-login-form__identity{min-width:0;line-height:1.3;}
.pep-auth__panel .parresia-espace-pro-login-form__name{
  display:block;font-family:var(--pep-sans);font-weight:700;font-size:14px;color:var(--pep-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pep-auth__panel .parresia-espace-pro-login-form__mail{
  display:block;font-size:12.5px;color:var(--pep-meta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pep-auth__panel .parresia-espace-pro-login-form__actions{
  display:flex;flex-direction:column;gap:10px;margin:0;
}
.pep-auth__panel .parresia-espace-pro-login-form__continue{
  display:block;width:100%;box-sizing:border-box;
  background:var(--pep-red);color:#fff;text-decoration:none;
  font-family:var(--pep-sans);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  padding:15px;border-radius:3px;transition:background .15s;
}
.pep-auth__panel .parresia-espace-pro-login-form__continue:hover{background:var(--pep-red-soft);}
.pep-auth__panel .parresia-espace-pro-login-form__logout{
  display:block;width:100%;box-sizing:border-box;
  border:1px solid var(--pep-line-2);background:#fff;color:var(--pep-ink);text-decoration:none;
  font-family:var(--pep-sans);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  padding:13px;border-radius:3px;transition:border-color .15s,color .15s;
}
.pep-auth__panel .parresia-espace-pro-login-form__logout:hover{border-color:var(--pep-red);color:var(--pep-red);}

/* ---- loader de déconnexion (overlay) ---- */
.pep-auth__loader{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:rgba(255,255,255,.96);
}
.pep-auth__loader[hidden]{display:none;}
.pep-auth__spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--pep-line);border-top-color:var(--pep-red);
  animation:pepSpin .7s linear infinite;
}
@keyframes pepSpin{to{transform:rotate(360deg);}}
.pep-auth__loader-text{
  font-family:var(--pep-sans);font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--pep-ink);
}
@media (prefers-reduced-motion:reduce){.pep-auth__spinner{animation-duration:1.6s;}}

/* groupe des centres d'intérêt (nombre de cases dicté par Odoo) */
.pep-fieldset{border:1px solid var(--pep-line);border-radius:4px;padding:14px 16px 6px;margin:0 0 18px;min-width:0;}
.pep-fieldset legend{
  padding:0 6px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--pep-ink);
}
.pep-fieldset .pep-check{margin:0 0 12px;}

/* Sous 640px, la modale repasse en une colonne : deux champs côte à côte y
   seraient trop étroits pour être saisissables. */
@media (max-width:640px){
  .pep-auth{max-width:min(440px, calc(100vw - 24px));}
  .pep-fields{grid-template-columns:1fr;}
  .pep-auth__body{padding:24px 20px 28px;}
  .pep-auth__head{padding:22px 20px 18px;}
}