/* Leçons futées — Page /compte/ au design A « Nuit étoilée » (maquette connexion.html de la cliente).
   Tokens, logo, boutons : vitrine.css. Les écrans (connexion, inscription, oubli, Mon compte…) sont rendus par /js/page-compte.js. */

body{background:var(--night-1)}
.compte-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg, #120F38 0%, #231A5E 60%, #3A2A7E 100%)}
.compte-page .nav{width:100%}
.retour-site{color:var(--on-dark-link);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 0.25rem}
.retour-site:hover{color:#FFFFFF}

.compte-grille{max-width:75rem;width:100%;margin:0 auto;padding:1.5rem var(--gouttiere) 4.5rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;flex:1}

/* ---------- Message de marque ---------- */
.compte-aside{display:flex;flex-direction:column;gap:1.5rem;color:#FFFFFF}
.aside-titre{margin:0;font-size:3.25rem;line-height:1.06;font-weight:700}
.aside-texte{font-size:1.1875rem;line-height:1.55;color:var(--on-dark-text);max-width:30rem}
.aside-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.875rem;font-size:1.0625rem}
.aside-liste li{display:flex;gap:0.75rem;align-items:center}
.puce{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.aside-lien{align-self:flex-start;font-weight:700;color:var(--accent-soft)}
.aside-lien:hover{color:#FFFFFF}

/* ---------- Carte blanche ---------- */
.carte-compte{justify-self:center;width:100%;max-width:28.75rem;background:#FFFFFF;color:var(--ink);border-radius:1.75rem;padding:2rem;box-shadow:0 1.875rem 5rem rgba(0,0,0,0.45);display:flex;flex-direction:column;gap:1.375rem}
.carte-compte a{color:var(--violet)}
.carte-compte a:hover{color:var(--navy)}
.carte-compte h1{margin:0;font-size:1.625rem;font-weight:700;line-height:1.2}
.carte-compte h1:focus{outline:none}
/* Le titre reçoit le focus à chaque changement d’écran (pour les lecteurs d’écran) : pas de cadre, ce n’est pas un bouton. */
.carte-compte h1:focus-visible{outline:none}
.titre-bloc{display:flex;flex-direction:column;gap:0.25rem}
.sous-titre{margin:0;font-size:0.9375rem;color:var(--muted);line-height:1.5}

/* Onglets « Se connecter » / « Créer un compte » */
.onglets{display:flex;gap:0.375rem;background:var(--bg-alt);border-radius:1rem;padding:0.375rem}
.onglet{font-family:var(--texte);font-size:1rem;font-weight:800;padding:0.75rem 0.625rem;min-height:2.75rem;border:0;background:transparent;color:var(--muted);cursor:pointer;flex:1;border-radius:0.75rem}
.onglet[aria-selected="true"]{background:#FFFFFF;color:var(--ink);box-shadow:0 0.125rem 0.5rem rgba(23,26,51,0.12)}
.onglet:focus-visible{outline:3px solid var(--navy);outline-offset:0.0625rem}

/* Formulaires */
.formulaire{display:flex;flex-direction:column;gap:1rem}
.champ{display:flex;flex-direction:column;gap:0.375rem}
.champ-tete{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;flex-wrap:wrap}
.champ label,.lbl{font-weight:700;font-size:0.875rem}
.carte-compte input[type="email"],.carte-compte input.mdp{font-family:var(--texte);font-size:1rem;color:var(--ink);width:100%;min-width:0;padding:0.875rem 1rem;border:1.5px solid #CFCCE6;border-radius:0.875rem;background:#FFFFFF}
.carte-compte input[type="email"]:focus,.carte-compte input.mdp:focus{outline:3px solid var(--accent);outline-offset:0.0625rem;border-color:var(--navy)}
/* Œil « Afficher le mot de passe » (docs/ETAPE-OEIL.md) : bouton de 44 px dans le champ, à droite ; œil barré quand c'est affiché.
   La classe « mdp » garde le style du champ quand il passe en type="text". */
.champ-mdp{position:relative;display:flex;align-items:center}
.carte-compte .champ-mdp input.mdp{padding-right:3.5rem;min-height:2.75rem}
.carte-compte input.mdp::-ms-reveal{display:none}
.oeil{position:absolute;right:0.25rem;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:0.625rem;background:transparent;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.oeil:hover{background:var(--bg-alt)}
.oeil:focus-visible{outline:3px solid var(--navy);outline-offset:0}
.oeil[aria-pressed="false"] .oeil-barre{display:none}
.regle{margin:-0.5rem 0 0;font-size:0.8125rem;color:var(--muted)}
.case{display:flex;gap:0.625rem;align-items:flex-start;font-size:0.875rem;color:var(--muted);line-height:1.4}
.case input{flex:none;width:1.25rem;height:1.25rem;margin:0.0625rem 0 0;padding:0;accent-color:var(--navy)}
.lien-bouton{font-family:var(--texte);background:none;border:0;padding:0;font-size:0.875rem;font-weight:800;color:var(--violet);cursor:pointer;text-decoration:underline;text-underline-offset:0.125rem}
.lien-bouton:hover{color:var(--navy)}
.lien-oubli{font-size:0.8125rem}
.bas{margin:0;text-align:center;font-size:0.875rem;color:var(--muted)}
.liens{display:flex;flex-wrap:wrap;justify-content:center;gap:0.375rem 1.125rem}

/* Boutons de la carte (même forme que la maquette) */
.btn-form{font-family:var(--texte);font-weight:800;font-size:1.0625rem;padding:1rem 1.5rem;border:0;border-radius:999px;cursor:pointer;margin-top:0.25rem;width:100%;min-height:2.75rem;text-align:center;text-decoration:none;display:block}
.btn-form:hover{filter:brightness(1.06)}
.btn-form:disabled{opacity:.6;cursor:wait}
.btn-form.navy{background:var(--navy);color:#FFFFFF}
.btn-form.jaune{background:var(--accent);color:var(--ink)}
.btn-form.contour{background:#FFFFFF;color:var(--navy);border:2px solid var(--navy);padding:0.875rem 1.375rem}
.carte-compte a.btn-form.navy,.carte-compte a.btn-form.navy:hover{color:#FFFFFF}
.carte-compte a.btn-form.contour,.carte-compte a.btn-form.contour:hover{color:var(--navy)}
.btn-petit{font-family:var(--texte);font-weight:800;font-size:0.9375rem;padding:0.625rem 1.125rem;min-height:2.75rem;border-radius:999px;background:#FFFFFF;color:var(--navy);border:2px solid var(--navy);cursor:pointer;align-self:flex-start}
.btn-petit:disabled{opacity:.6;cursor:wait}
.actions{display:flex;flex-direction:column;gap:0.625rem}

/* Messages (mêmes zones qu’avant : role="alert" / role="status") */
.msg{margin:0;padding:0.75rem 0.875rem;border-radius:0.875rem;font-size:0.9375rem;line-height:1.45;background:#FDEEEA;color:#8A2A12;border:1.5px solid #F6C9BD}
.msg.okk{background:#E8F5EC;color:#1E5C38;border-color:#B7DEC4}

/* Mon compte */
.infos{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0.625rem 1rem;font-size:1rem}
.infos dt{font-weight:700;color:var(--muted)}
.infos dd{margin:0;overflow-wrap:anywhere}
/* Étape C2 : les phrases des quotas prennent toute la largeur (une ligne par accès). */
.infos .large{grid-column:1 / -1;overflow-wrap:normal}
.infos dd.large{margin-top:-0.25rem}
.note{margin:0;font-size:0.875rem;color:var(--muted);line-height:1.5}
.texte{margin:0;font-size:1rem;line-height:1.55}

/* Pied de page discret sur le ciel */
.compte-pied{max-width:75rem;width:100%;margin:0 auto;padding:0 var(--gouttiere) 1.75rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.5rem 1.5rem;font-size:0.875rem;color:var(--on-dark-text)}
.compte-pied a{color:var(--on-dark-link);font-weight:700}
.compte-pied a:hover{color:#FFFFFF}
.compte-pied .kipena{color:var(--on-dark-text)}
.compte-pied .kipena img{border-color:rgba(255,255,255,0.35)}

/* Encart caché (compte connecté, suppression…) : une seule colonne, la carte au centre. */
.compte-aside[hidden]{display:none}
.compte-grille.sans-aside{grid-template-columns:1fr}

@media (max-width:900px){
  .compte-grille{grid-template-columns:1fr}
  .compte-aside{display:none}
}
@media (max-width:600px){
  .compte-grille{padding-top:0.5rem;padding-bottom:2.5rem}
  .carte-compte{padding:1.5rem 1.25rem;border-radius:1.5rem}
}

/* ---------- Ordinateur : la carte entière visible dès l’arrivée (demande de Jerem) ----------
   Écran bas (≤ 800 px de haut, ex. 1366×650, 1280×720, 1536×730) : carte et marges resserrées. Rien ne change sous 900 px. */
@media (min-width:901px) and (max-height:800px){
  .compte-grille{padding-top:0;padding-bottom:1.5rem}
  .carte-compte{padding:1.5rem 2rem;gap:0.875rem}
  .formulaire{gap:0.625rem}
  .champ{gap:0.25rem}
  .carte-compte input[type="email"],.carte-compte input.mdp{padding:0.625rem 1rem}
  .onglet{padding:0.5rem 0.625rem}
  .regle{margin-top:-0.375rem}
  .btn-form{padding:0.75rem 1.5rem}
}

/* Formules V3A : choix du paiement au mois ou à l’année (écran « Votre formule »). */
.facturation{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:0.625rem;min-width:0}
.facturation legend{padding:0;margin:0 0 0.5rem;font-size:0.9375rem;font-weight:800;color:var(--ink)}
.choix-facturation{display:flex;gap:0.75rem;align-items:flex-start;padding:0.875rem 1rem;border:1.5px solid #CFCCE6;border-radius:0.875rem;cursor:pointer;min-height:2.75rem}
.choix-facturation input{margin:0.2rem 0 0;width:1.25rem;height:1.25rem;flex:none;accent-color:#171A33}
.choix-facturation span{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.choix-facturation b{font-size:1rem}
.choix-facturation small{font-size:0.875rem;color:var(--muted);line-height:1.4}
.choix-facturation:has(input:checked){border-color:var(--ink);background:#FFF8E1}
.choix-facturation:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
/* Codes promotionnels (écran « Paiement ») : champ + bouton « Appliquer », puis l’effet sur le prix. */
.promo{display:flex;flex-direction:column;gap:0.5rem;min-width:0}
.promo-titre{margin:0;font-size:0.9375rem;font-weight:800;color:var(--ink)}
.promo-ligne{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:stretch}
.carte-compte .promo-ligne input{flex:1 1 9rem;font-family:var(--texte);font-size:1rem;color:var(--ink);min-width:0;padding:0.625rem 1rem;min-height:2.75rem;border:1.5px solid #CFCCE6;border-radius:0.875rem;background:#FFFFFF;text-transform:uppercase;letter-spacing:0.04em}
.carte-compte .promo-ligne input:focus{outline:3px solid var(--accent);outline-offset:0.0625rem;border-color:var(--navy)}
.carte-compte .promo-ligne input[aria-invalid="true"]{border-color:#B42318}
.promo-ligne .btn-petit{align-self:auto}
.promo-effet{margin:0;padding:0.75rem 1rem 0.75rem 2rem;border:1.5px solid var(--ink);border-radius:0.875rem;background:#FFF8E1;display:flex;flex-direction:column;gap:0.375rem;font-size:0.9375rem;line-height:1.45}
.promo-vide:empty{display:none}

/* ---------- Suppression de compte (bloc 3) ----------
   Rouge foncé : texte blanc sur #A3261C et lien #A3261C sur blanc : 7,37:1 mesurés (au moins 4,5:1 demandé). */
.btn-form.danger{background:#A3261C;color:#FFFFFF}
.btn-form.danger:hover{background:#8A1F17;filter:none}
.lien-danger{color:#A3261C}
.lien-danger:hover{color:#8A1F17}
.bloc-effacee{display:flex;flex-direction:column;gap:0.375rem}
.liste-effacee{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:0.25rem;font-size:1rem;line-height:1.5}
.encadre-reprise{display:flex;flex-direction:column;gap:0.5rem;padding:0.875rem 1rem;border-radius:0.875rem;background:#FFF8E1;border:1.5px solid #E8C96A}
.carte-compte input.code{font-family:var(--texte);font-size:1.5rem;letter-spacing:0.25em;font-variant-numeric:tabular-nums;color:var(--ink);width:100%;min-width:0;padding:0.75rem 1rem;border:1.5px solid #CFCCE6;border-radius:0.875rem;background:#FFFFFF}
.carte-compte input.code:focus{outline:3px solid var(--accent);outline-offset:0.0625rem;border-color:var(--navy)}
#sup-renvoi:disabled{color:var(--muted);cursor:default;text-decoration:none}
.progression{position:relative;height:0.625rem;border-radius:999px;background:#E6E4F3;overflow:hidden}
.progression::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:999px;background:var(--navy);animation:lf-progression 1.4s ease-in-out infinite}
@keyframes lf-progression{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.progression::after{animation:none;width:100%;opacity:0.35}}

/* Profil « Parent » / « Enseignant » sur le formulaire d'inscription d'une formule payante (docs/ETAPE-PROFIL.md). */
.profil-inscription{gap:0.5rem}
.profil-inscription legend{margin-bottom:0.25rem}
.regle-profil{margin:0;font-size:0.8125rem;color:var(--muted);line-height:1.4}

/* Mandats administratifs (docs/ETAPE-MANDATS.md) : champs texte, groupes, encadré « collectivité », mentions à compléter. */
.carte-compte input.champ-texte{font-family:var(--texte);font-size:1rem;color:var(--ink);width:100%;min-width:0;padding:0.875rem 1rem;border:1.5px solid #CFCCE6;border-radius:0.875rem;background:#FFFFFF}
.carte-compte input.champ-texte:focus{outline:3px solid var(--accent);outline-offset:0.0625rem;border-color:var(--navy)}
.carte-compte input[aria-invalid="true"]{border-color:#B42318}
.groupe-champs{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:0.75rem;min-width:0}
.groupe-champs legend{padding:0;margin:0 0 0.5rem;font-size:0.9375rem;font-weight:800;color:var(--ink)}
.regle-champ{margin:0;font-size:0.8125rem;color:var(--muted);line-height:1.4}
.facultatif{font-weight:400;color:var(--muted)}
.encadre-mandat{display:flex;flex-direction:column;gap:0.5rem;padding:0.875rem 1rem;border-radius:0.875rem;background:var(--bg-alt);border:1.5px solid #CFCCE6}
.encadre-mandat .btn-petit{align-self:flex-start}
.etapes-mandat{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:0.25rem;font-size:0.9375rem;line-height:1.5}
.mentions{display:flex;flex-direction:column;gap:0.5rem}
.a-completer{background:#FFF1C2;color:#5C4300;padding:0 0.25rem;border-radius:0.25rem}