/*
  Pages connexion/inscription : carte centree sur fond clair, coherente avec
  la landing (cf. base.css pour les tokens/boutons/carte partages).
*/

.auth-shell{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* Barre de marque minimale (parcours de formulaire : pas de navigation qui
   detourne), alignee sur l'en-tete public : meme hauteur, meme logo. */
.auth-topbar{
  width:100%; max-width:1200px; margin:0 auto;
  min-height:64px; padding:0 28px;
  display:flex; align-items:center;
}
.auth-back{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  text-decoration:none;
  font-family:var(--font-display); font-weight:650; font-size:21px; letter-spacing:-0.02em;
  color:var(--ink);
}
.auth-back .logo-mark-large{width:34px; height:34px;}
.auth-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px 72px;
}

.auth-card{
  width:100%;
  max-width:480px;
  padding:40px;
  box-shadow:var(--ombre-flottante);
}
.auth-card.wide{max-width:600px;}

.auth-card h1{
  font-size:clamp(28px, 3.2vw, 34px);
  letter-spacing:-0.03em;
  margin-bottom:10px;
}
.auth-sub{
  color:var(--ink-soft);
  font-size:16.5px;
  line-height:1.55;
  margin-bottom:28px;
}

.field{margin-bottom:20px;}
.field label{
  display:block;
  font-weight:600;
  font-size:15.5px;
  margin-bottom:8px;
  color:var(--ink);
}

@media (max-width:640px){
  .auth-topbar{padding:0 16px; min-height:60px;}
  .auth-main{align-items:flex-start; padding:12px 12px 48px;}
  .auth-card{padding:28px 20px; box-shadow:none;}
}

fieldset{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 22px 8px;
  margin:32px 0 28px;
}
legend{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15.5px;
  color:var(--blue-deep);
  padding:0 8px;
}

.auth-submit{
  width:100%;
  margin-top:8px;
  font-size:17px;
}

.auth-switch{
  margin-top:24px;
  text-align:center;
  font-size:15.5px;
  color:var(--ink-soft);
}
.auth-switch a{
  color:var(--blue);
  font-weight:700;
  text-decoration:none;
}
.auth-switch a:hover{text-decoration:underline;}

/* ---------- Formulaire pro : selection d'homonymes ---------- */
.homonymes-liste{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:24px;
}
.homonyme-item{margin:0;}
.homonyme-bouton{
  width:100%;
  text-align:left;
  display:flex; flex-direction:column; gap:4px;
  padding:14px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--surface);
  cursor:pointer;
  font-family:var(--font-body);
  transition:border-color .15s, box-shadow .15s;
}
.homonyme-bouton:hover,
.homonyme-bouton:focus-visible{
  border-color:var(--blue);
  box-shadow:var(--anneau);
}
.homonyme-nom{font-weight:700; font-size:16px; color:var(--ink);}
.homonyme-detail{font-size:14px; color:var(--ink-soft);}

/* ---------- Formulaire pro : questions d'accessibilite ---------- */
.question{margin-bottom:20px;}
.question-texte{
  display:block;
  font-weight:600;
  font-size:15.5px;
  color:var(--ink);
  margin-bottom:10px;
}
.question-options{
  display:flex; flex-wrap:wrap; gap:10px;
}
.question-options label{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  font-size:15px;
  color:var(--ink);
  cursor:pointer;
  background:var(--surface);
}
.question-options input{width:auto; margin:0;}
.question-options label:has(input:checked){
  border-color:var(--blue);
  background:rgba(43,92,173,0.06);
}

/* ---------- Formulaire pro : approfondissement optionnel par profil ---------- */
.approfondissement-intro{
  font-size:14px;
  color:var(--ink-soft);
  margin:0 0 16px;
}
.approfondissement-profil{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 16px;
  margin-bottom:12px;
}
.approfondissement-profil:last-child{margin-bottom:0;}
.approfondissement-profil summary{
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  color:var(--blue);
  list-style:none;
}
.approfondissement-profil summary::-webkit-details-marker{display:none;}
.approfondissement-profil summary::before{
  content:"▸";
  display:inline-block;
  width:14px;
  transition:transform .15s;
}
.approfondissement-profil[open] summary::before{transform:rotate(90deg);}
.approfondissement-contenu{margin-top:16px;}
.approfondissement-contenu .question:last-child{margin-bottom:0;}

/* ---------- Partage QR : generation de QR code en libre-service ---------- */

.qr-resultat{
  margin-top:32px;
  padding-top:28px;
  border-top:1.5px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.qr-image{
  width:240px; height:240px;
  padding:16px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
}
.qr-lien-bloc{
  width:100%;
  margin-top:22px;
  text-align:left;
}
.qr-lien-label{
  display:block;
  font-weight:700;
  font-size:14.5px;
  color:var(--ink);
  margin-bottom:8px;
}
.qr-lien-ligne{
  display:flex;
  gap:10px;
}
.qr-lien-champ{
  flex:1;
  min-width:0;
  font-family:var(--font-mono);
  font-size:14px;
}
.qr-btn-copier{
  flex-shrink:0;
  white-space:nowrap;
}
.qr-btn-telecharger{
  display:inline-block;
  width:100%;
  margin-top:16px;
  text-align:center;
  text-decoration:none;
}
.qr-note{
  margin-top:18px;
  font-size:14px;
  color:var(--ink-soft);
}

/* Resultat affiche immediatement (identifiant par defaut du compte, cf.
   partage_qr.py) : pas de formulaire au-dessus, donc pas de separateur. */
.qr-resultat-immediat{
  margin-top:24px;
  padding-top:0;
  border-top:none;
}

.qr-option-avancee{
  margin-top:28px;
  padding-top:20px;
  border-top:1.5px solid var(--line);
  text-align:left;
}
.qr-option-avancee summary{
  cursor:pointer;
  font-weight:700;
  font-size:14.5px;
  color:var(--blue);
  list-style:none;
}
.qr-option-avancee summary::-webkit-details-marker{display:none;}
.qr-option-avancee summary::before{
  content:"▸";
  display:inline-block;
  width:14px;
  transition:transform .15s;
}
.qr-option-avancee[open] summary::before{transform:rotate(90deg);}
.qr-option-avancee-aide{
  margin:10px 0 16px;
  font-size:14px;
  color:var(--ink-soft);
}

/* ---------- Choix du type de compte (/inscription/choix) ---------- */
.auth-card.auth-card-choix{max-width:720px;}
.choix-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0 20px;}
.choix-option{
  position:relative; display:flex; flex-direction:column; gap:8px; padding:24px 24px 56px;
  border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--surface);
  color:var(--ink); text-decoration:none;
  transition:border-color var(--duree) var(--ease), background var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.choix-option:active{transform:scale(.99);}
.choix-option strong{font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.015em; line-height:1.3;}
.choix-icone{
  width:48px; height:48px; border-radius:var(--r-md); margin-bottom:6px;
  display:flex; align-items:center; justify-content:center; background:var(--sky); color:var(--blue);
}
.choix-fleche{position:absolute; left:24px; bottom:20px; color:var(--blue); transition:transform var(--duree) var(--ease);}
.choix-option:hover .choix-fleche{transform:translateX(4px);}
.choix-option span{color:var(--ink-soft); font-size:14.5px; line-height:1.5;}
.choix-option:hover, .choix-option:focus-visible{border-color:var(--blue); background:var(--sky);}
@media (max-width: 620px){ .choix-grid{grid-template-columns:1fr;} }

/* ---------- Parcours aidant ---------- */
.auth-etape{font-size:15px; font-weight:600; color:var(--blue); margin-bottom:8px;}
.proches-liste{display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
.proches-liste form{margin:0;}
.proche-option{
  width:100%; text-align:left; display:flex; flex-direction:column; gap:4px; padding:16px 18px;
  border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); cursor:pointer;
  font-family:var(--font-body); color:var(--ink);
}
.proche-option strong{font-family:var(--font-display); font-size:16px;}
.proche-option span{color:var(--ink-soft); font-size:14px;}
.proche-option:hover, .proche-option:focus-visible{border-color:var(--blue); background:var(--sky);}
.proche-option.actif{border-color:var(--blue);}
a.btn-secondary.auth-submit{display:block; text-align:center; text-decoration:none;}

/* ---------- Besoins d'accessibilite (profil, inscription, proche) ---------- */
.aide-champ{font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin:6px 0 14px;}
fieldset > .aide-champ{margin-top:0;}
.precisions{margin:0 0 24px; border:1px solid var(--line); border-radius:var(--r-lg); padding:4px 22px;}
.precisions > summary{
  cursor:pointer; min-height:48px; display:flex; align-items:center;
  font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--blue-deep);
}
.precisions[open] > summary{margin-bottom:8px;}
.precisions .facultatif, legend .facultatif{font-family:var(--font-body); font-weight:400; font-size:14px; color:var(--ink-soft); margin-left:6px;}
.profils-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
.profil-option{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 14px;
  border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); cursor:pointer;
  font-size:15px; font-weight:600; color:var(--ink); line-height:1.3;
}
.profil-option input{flex:0 0 20px; width:20px; height:20px; margin:0; accent-color:var(--blue);}
.profil-option:hover{border-color:var(--blue);}
.profil-option:has(input:checked){border-color:var(--blue); background:var(--sky);}
.profil-option:has(input:focus-visible){outline:3px solid var(--blue); outline-offset:2px;}
.type-appareillage{margin:0 0 18px;}
.type-appareillage[hidden]{display:none;}
.type-appareillage-titre{font-weight:700; font-size:15px; margin:0 0 8px;}
.type-appareillage-titre .facultatif{font-weight:400; color:var(--ink-soft);}
.type-appareillage-choix{display:flex; flex-wrap:wrap; gap:8px 18px;}
.type-appareillage-choix label{display:flex; align-items:center; gap:8px; min-height:44px; font-size:15px; font-weight:500;}
.type-appareillage-choix input{width:20px; height:20px; accent-color:var(--blue);}
@media (max-width: 620px){ .profils-grid{grid-template-columns:1fr;} }

/* ---------- Consentement (inscriptions) ---------- */
.consentement{display:flex; gap:12px; align-items:flex-start; margin:8px 0 20px;}
.consentement input[type="checkbox"]{flex:0 0 22px; width:22px; height:22px; margin-top:2px; accent-color:var(--blue);}
.consentement label{font-size:14.5px; line-height:1.55; color:var(--ink); font-weight:400;}
.consentement label a{color:var(--blue); font-weight:600;}

/* ---------- Mes donnees / suppression (profil, proches) ---------- */
.mes-donnees{margin-top:36px; padding-top:28px; border-top:1.5px solid var(--line);}
.mes-donnees h2{font-size:18px; margin-bottom:8px;}
.mes-donnees > p{font-size:15px; color:var(--ink-soft); margin-bottom:16px;}
.mes-donnees > p a{color:var(--blue); font-weight:600;}
.suppression{margin-top:20px;}
.suppression summary{cursor:pointer; font-weight:700; font-size:15px; color:var(--error);}
.suppression p{font-size:15px; color:var(--ink-soft); margin:12px 0 16px;}
.suppression-compte{margin:24px 0 8px; padding-top:20px; border-top:1.5px solid var(--line);}

.field-aide{margin-top:6px; font-size:14px; color:var(--ink-soft);}
.oubli{margin-top:14px; text-align:center; font-size:14.5px;}
.oubli a{color:var(--blue); font-weight:600; text-decoration:none;}
.oubli a:hover{text-decoration:underline;}

/* ---------- Inscription en etapes + affichage du mot de passe ---------- */
.auth-sub-etape{color:var(--ink-soft); font-size:15px; margin:0 0 20px;}
.mdp-champ{position:relative;}
.mdp-champ input{padding-right:96px;}
.mdp-afficher{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  min-height:40px; padding:0 12px; border-radius:var(--r-sm);
  border:none; background:transparent; cursor:pointer;
  font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--blue);
}
.mdp-afficher:hover{background:var(--sky);}

/* ---------- Double authentification (equipe/securite.html, connexion_code.html) ---------- */
.champ-code{font-size:22px; letter-spacing:.2em; text-align:center; font-variant-numeric:tabular-nums;}
.etapes-securite{margin:20px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:22px; font-size:15.5px; line-height:1.55;}
.etapes-securite li{display:block;}
.qr-securite{display:block; margin:12px 0 8px; border:1px solid var(--line); border-radius:var(--r-md); padding:8px; background:var(--surface);}
.etapes-securite .aide-champ{display:block;}
.secret-lisible{display:inline-block; margin-top:4px; font-size:15px; letter-spacing:.05em; word-break:break-all;}
.securite-form{margin-top:12px;}
.securite-form h2{font-size:18px; margin:24px 0 4px;}
.statut-securite{font-weight:700; padding:12px 16px; border-radius:var(--r-md);}
.statut-actif{background:var(--green-bg); color:var(--green-ink);}
.codes-secours{margin-top:16px;}
.codes-secours h2{font-size:19px; margin-bottom:8px;}
.codes-secours-liste{list-style:none; padding:0; margin:16px 0 20px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.codes-secours-liste code{display:block; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:17px; text-align:center; background:var(--paper);}

.choix-compte{display:flex; flex-direction:column; gap:12px; margin:8px 0 4px;}
.choix-compte-option{display:flex; flex-direction:column; gap:4px; text-align:left; padding:16px 18px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; min-height:44px;}
.choix-compte-option strong{font-size:17px;}
.choix-compte-option span{font-size:15px; color:var(--ink-soft);}
.choix-compte-option:hover, .choix-compte-option:focus-visible{border-color:var(--blue); background:var(--sky);}

.compte-section{border-top:1px solid var(--line); padding-top:18px; margin-top:18px;}
.compte-section h2{font-size:20px; margin:0 0 8px;}

.pro-interet{margin-top:28px; padding-top:20px; border-top:1px solid var(--line);}
.pro-interet h2{font-size:20px; margin:0 0 10px;}
.pro-interet ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:16px; line-height:1.5;}
select{min-height:52px; appearance:auto; cursor:pointer;}

/* ---------- Connexion : formulaire + panneau de marque ---------- */
.auth-split{width:100%; max-width:960px; display:grid; grid-template-columns:minmax(0, 480px) minmax(0, 1fr); gap:0; align-items:stretch;}
.auth-split .auth-card{max-width:none; border-radius:var(--r-lg) 0 0 var(--r-lg); position:relative; z-index:1;}
.auth-panneau{
  display:flex; flex-direction:column; gap:22px; padding:40px;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  background:#10264A; color:#DCE7F7;
}
@media (prefers-color-scheme: dark){ .auth-panneau{border:1px solid #2A4470; border-left:none;} }
.auth-panneau-titre{font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-0.025em; line-height:1.15; color:#FFFFFF;}
.auth-panneau ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;}
.auth-panneau li{display:flex; gap:14px; align-items:flex-start; font-size:16px; line-height:1.5;}
.auth-panneau li .icone{flex-shrink:0; margin-top:1px; color:#B8CFF7;}
.auth-panneau strong{color:#FFFFFF; font-weight:600;}
.auth-panneau-pied{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; border-top:1px solid #2A4470; font-size:14.5px; color:#C9D7EC;}
@media (max-width:860px){
  .auth-split{grid-template-columns:minmax(0,1fr); max-width:480px;}
  .auth-split .auth-card{border-radius:var(--r-lg);}
  .auth-panneau{display:none;}
}

/* Choix du type de compte : options a hauteur egale, fleche alignee en bas. */
.choix-grid{align-items:stretch;}