/* =====================================================================
   LE SOCLE adioudev — la feuille de style des écrans de compte

   Les jetons et les classes sont ceux de la maquette validée le
   1er octobre 2026 (maquette-connexion.html) : une maquette validée est un
   engagement, on la reproduit, on ne s'en inspire pas.

   DEUX VOLETS. À gauche la maison — le logo, une phrase, trois engagements ;
   à droite le formulaire, seul, sans rien autour. C'est ce qui fait qu'on sait
   chez qui l'on tape son mot de passe.

   LE VOLET SOMBRE EST UN CÔTÉ, PAS LA MOITIÉ DE L'ÉCRAN. Repris de sa
   correction du 1er octobre sur la vitrine : à 1 400 pixels, un volet qui
   prend la moitié de la page se lit comme un trou. Il est donc borné à 32 %,
   et le formulaire est rangé à gauche de ce qui reste.

   AUCUNE POLICE DISTANTE, AUCUNE IMAGE DISTANTE, AUCUN SCRIPT DISTANT —
   règle numéro quatre. Les polices sont celles de l'appareil, le logo est
   servi par notre propre serveur, les icônes sont dessinées dans la page.
   ===================================================================== */
:root{
  /* les jetons de la maquette */
  --marine:#16244F;
  --marine2:#0E1733;
  --rose:#DD2E70;       /* l'aplat : le filet de la barre, les marques */
  --rose-encre:#B01E54; /* le trait et le texte : 6,31 de contraste sur le
                           fond de page, quand le rose de l'aplat n'en donne
                           que 4,25. Deux usages, deux valeurs. */
  --rose-fond:#FDECF2;
  --bleu:#1257D6;
  --bleu-fonce:#0E49B8;
  --bleu-fond:#EAF1FD;
  --encre:#1E2A44;
  --doux:#5A6480;
  --pale:#68728D;        /* mesure : 4,85 de contraste sur blanc. #8A94AC,
                            la valeur de la maquette, n'en donnait que 2,88 —
                            un texte se lit a partir de 4,5. */
  --fond:#F7F9FD;
  --carte:#FFFFFF;
  --trait:#E3E8F2;
  --filet:#EFF3FA;
  --champ:#FFFFFF;
  --mint:#0D7A50;       /* mesure : 4,88 de contraste sur son propre fond.
                           #15A06A n'en donnait que 3,05 — la pastille
                           « utilisable » et le bandeau de reussite etaient
                           donc sous le seuil. Releve le 1er octobre 2026,
                           par la meme mesure que l'ambre. */
  --mint-fond:#E8F7F0;
  --ambre:#A05C05;      /* mesure : 4,82 de contraste sur son propre fond.
                           #C77A09, la valeur d'avant, n'en donnait que 3,15 —
                           la pastille « en essai » et le bandeau d'attente
                           etaient donc sous le seuil d'un texte, et personne
                           ne l'avait vu. Releve le 1er octobre 2026. */
  --ambre-fond:#FFF6E7;
  --crit:#B3261E;
  --crit-fond:#FDECEA;
  --prune:#6B3F87;
  --prune-fond:#F2ECF7;
  /* les deux noms que le programme emploie encore pour les bandeaux */
  --ok:var(--mint);
  --ok-fond:var(--mint-fond);
  --attente:var(--ambre);
  --attente-fond:var(--ambre-fond);
  --police:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --relief:inset 0 1px 0 rgba(255,255,255,.95);
  --sur-bleu:#FFFFFF;
  --focus:0 0 0 3px rgba(18,87,214,.16);
}

/* LE THÈME SE DÉCLINE DANS LES TROIS ÉTATS : la préférence du système quand
   rien n'est demandé, et les deux choix explicites. En oublier un laisse une
   couleur qui n'existe pas dans un thème. Le volet de gauche, lui, ne change
   pas : il est sombre dans les deux cas, c'est son rôle. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --encre:#E9EDF7; --doux:#A9B3CC; --pale:#7E88A3;
    --rose:#F08FB3; --rose-encre:#F5A3C0; --rose-fond:#331726;
    --bleu:#7BA5F5; --bleu-fonce:#9CBCF8; --bleu-fond:#16213C;
    --fond:#0B1020; --carte:#141B2E; --trait:#28324E; --filet:#1B2338;
    --champ:#1A2238;
    --mint:#6FD8A6; --mint-fond:#10342A;
    --ambre:#F0C46A; --ambre-fond:#36290F;
    --crit:#F2938C; --crit-fond:#3A1A17;
    --prune:#C9A6E0; --prune-fond:#271C34;
    --relief:inset 0 1px 0 rgba(255,255,255,.08);
    --sur-bleu:#0B1020;
    --focus:0 0 0 3px rgba(123,165,245,.24);
  }
}
:root[data-theme="dark"]{
  --encre:#E9EDF7; --doux:#A9B3CC; --pale:#7E88A3;
  --rose:#F08FB3; --rose-encre:#F5A3C0; --rose-fond:#331726;
  --bleu:#7BA5F5; --bleu-fonce:#9CBCF8; --bleu-fond:#16213C;
  --fond:#0B1020; --carte:#141B2E; --trait:#28324E; --filet:#1B2338;
  --champ:#1A2238;
  --mint:#6FD8A6; --mint-fond:#10342A;
  --ambre:#F0C46A; --ambre-fond:#36290F;
  --crit:#F2938C; --crit-fond:#3A1A17;
  --prune:#C9A6E0; --prune-fond:#271C34;
  --relief:inset 0 1px 0 rgba(255,255,255,.08);
  --sur-bleu:#0B1020;
  --focus:0 0 0 3px rgba(123,165,245,.24);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:var(--police); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2{margin:0; letter-spacing:-.02em; line-height:1.18; text-wrap:balance}
p{margin:0}
a{color:var(--bleu)}
:focus-visible{outline:2px solid var(--bleu); outline-offset:2px}

/* =====================================================================
   LES DEUX VOLETS
   ===================================================================== */
.cx{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(300px,32%) minmax(0,1fr);
  align-items:stretch;
  background:var(--carte);
}
@media (max-width:860px){
  .cx{grid-template-columns:1fr; min-height:0}
  .cx-d{order:1}
  .cx-g{order:2; border-right:0; border-top:1px solid rgba(255,255,255,.10)}
  .cx-g .slogan{margin:30px 0 0}
  .pts{margin:26px 0 0}
  .cx-g .pied{margin:30px 0 0; padding-top:0}
}

/* --- le volet de gauche : la maison --- */
.cx-g{
  position:relative; overflow:hidden; color:#fff;
  border-right:1px solid rgba(255,255,255,.10);
  padding:44px 34px 32px;
  background:linear-gradient(160deg,var(--marine),var(--marine2));
  display:flex; flex-direction:column;
}
.cx-g::before{content:""; position:absolute; right:-22%; bottom:-42%;
  width:420px; height:420px; z-index:0;
  background:radial-gradient(circle,rgba(221,46,112,.30),transparent 66%); filter:blur(70px)}
.cx-g::after{content:""; position:absolute; left:-26%; top:-36%;
  width:380px; height:380px; z-index:0;
  background:radial-gradient(circle,rgba(18,87,214,.34),transparent 66%); filter:blur(70px)}
.cx-g > *{position:relative; z-index:1}

.marque{display:flex; align-items:center; gap:13px; text-decoration:none; color:#fff}
.marque img{width:74px; height:74px; border-radius:17px; display:block;
  box-shadow:0 6px 20px -5px rgba(0,0,0,.6)}
.marque b{display:block; font-size:1.24rem; letter-spacing:-.02em; line-height:1.15}
.marque i{display:block; font-style:normal; font-size:.8rem; color:#A8B6D8; letter-spacing:.05em}

.cx-g .slogan{margin:auto 0 0; padding-top:30px; font-size:1.62rem; font-weight:700;
  letter-spacing:-.02em; line-height:1.18; text-wrap:balance}
.cx-g .slogan em{font-style:normal; color:#FF9CBE}
.cx-g .ss{color:#AEBCDB; margin:13px 0 0; font-size:.96rem; max-width:34ch}

.pts{list-style:none; margin:26px 0 auto; padding:0; display:grid; gap:11px}
.pts li{display:flex; gap:11px; align-items:flex-start; font-size:.89rem; color:#D6DEF0}
.pts u{text-decoration:none; flex:0 0 auto; width:23px; height:23px; border-radius:7px;
  background:rgba(255,255,255,.13); display:grid; place-items:center;
  font-size:.68rem; color:#8FE3BE; box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.pts b{color:#fff; font-weight:650}
.cx-g .pied{margin:auto 0 0; padding-top:30px; font-size:.78rem; color:#8C9CC0}
.cx-g .pied a{color:#A8B6D8}

/* --- le volet de droite : le formulaire, et rien d'autre --- */
.cx-d{
  background:var(--carte);
  padding:clamp(26px,11vh,110px) 52px 48px 46px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.cx-d > .dedans{width:min(440px,100%); display:flex; flex-direction:column; flex:1}
@media (max-width:860px){ .cx-d{padding:30px 26px 36px} }
@media (max-width:520px){ .cx-d{padding:24px 20px 30px} }

/* LE RETOUR AU SITE SE VOIT. Il était à .84rem dans l'encre douce : c'est le
   seul chemin pour ressortir de l'écran de connexion, il n'a pas à se
   chercher. Il garde une encre plus sage que les liens d'action — on ne vient
   pas ici pour repartir — mais il se lit du premier coup d'œil. */
.retour{display:inline-flex; align-items:center; gap:8px; font-size:1rem;
  color:var(--doux); text-decoration:none; font-weight:650; align-self:flex-start;
  padding:4px 0}
.retour:hover{color:var(--encre); text-decoration:underline}
.cx-d h1{margin:22px 0 0; font-size:1.5rem; color:var(--encre)}
.cx-d .ss{color:var(--doux); margin:9px 0 0; font-size:.95rem}
.cx-d .ss b{color:var(--encre)}

/* =====================================================================
   LES CHAMPS
   ===================================================================== */
form{margin:24px 0 0; display:grid; gap:15px}
label.lab{display:block; font-size:.8rem; font-weight:700; color:var(--doux); margin:0 0 6px}

.ch{position:relative}
.ch input, .ch select{
  width:100%; font:inherit; font-size:1rem; color:var(--encre);
  border:1px solid var(--trait); border-radius:11px;
  padding:12px 14px 12px 42px; background:var(--champ);
  box-shadow:inset 0 1px 2px rgba(22,36,79,.05);
}
.ch select{padding-left:42px; padding-right:36px; appearance:none; cursor:pointer;
  background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235A6480%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E);
  background-repeat:no-repeat; background-position:right 11px center; background-size:17px 17px}
.ch input::placeholder{color:var(--pale)}
.ch input:focus, .ch select:focus{border-color:var(--bleu); box-shadow:var(--focus); outline:none}
.ch u{position:absolute; left:13px; top:50%; transform:translateY(-50%);
  text-decoration:none; color:var(--pale); pointer-events:none;
  display:grid; place-items:center}
.ch u svg{width:18px; height:18px; display:block}
/* L'ŒIL EST UN BOUTON, PAS UNE DÉCORATION : il se tabule et il s'annonce. */
.ch button.oeil{position:absolute; right:7px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--doux); cursor:pointer;
  padding:7px; border-radius:9px; display:grid; place-items:center; line-height:0}
.ch button.oeil:hover{background:var(--filet); color:var(--encre)}
.ch button.oeil svg{width:18px; height:18px; display:block}
.ch.avec-oeil input{padding-right:46px}

.duo{display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:0 12px}
@media (max-width:420px){ .duo{grid-template-columns:1fr} }
.aide{font-size:.79rem; color:var(--pale); margin:6px 0 0}

/* LE CODE EST UN SEUL CHAMP, et c'est mesuré : six cases séparées empêchent de
   coller les six chiffres d'un geste et de laisser le téléphone les remplir
   tout seul. Il en garde l'allure — grand, centré, chiffres tabulaires. */
input.code{
  width:100%; font:inherit; font-size:1.7rem; font-weight:750; text-align:center;
  letter-spacing:.44em; text-indent:.44em; font-variant-numeric:tabular-nums;
  color:var(--encre); background:var(--champ);
  border:1px solid var(--trait); border-radius:13px; padding:14px 0;
  box-shadow:inset 0 1px 2px rgba(22,36,79,.05);
}
input.code:focus{border-color:var(--bleu); box-shadow:var(--focus); outline:none}

.enveloppe{display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:12px; background:linear-gradient(180deg,var(--filet),var(--carte));
  border:1px solid var(--trait); font-size:.88rem; color:var(--encre)}
.enveloppe u{text-decoration:none; width:34px; height:34px; border-radius:10px;
  background:var(--carte); display:grid; place-items:center; flex:0 0 auto;
  color:var(--bleu); box-shadow:0 1px 3px rgba(22,36,79,.10)}
.enveloppe u svg{width:18px; height:18px; display:block}
.enveloppe b{color:var(--encre)}

/* la coche — une vraie case, pas un dessin : elle se tabule et s'annonce */
.coche{display:inline-flex; align-items:flex-start; gap:9px; font-size:.86rem;
  color:var(--doux); cursor:pointer}
.coche input{margin:3px 0 0; flex:0 0 auto; width:17px; height:17px; accent-color:var(--bleu)}
.ligne{display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap}

/* =====================================================================
   LES BOUTONS — un bouton a la largeur de son texte.
   Pleine largeur il se lit comme une bande ; dans une grille il faut le dire
   par justify-self, sinon la cellule l'étire d'elle-même.
   ===================================================================== */
button.bt, a.bt{
  display:inline-flex; align-items:center; justify-content:center;
  justify-self:start; align-self:flex-start;
  border:1px solid transparent; border-radius:12px; padding:14px 26px;
  font-family:inherit; font-size:1.02rem; font-weight:700;
  text-decoration:none; cursor:pointer;
  background:var(--bleu); color:var(--sur-bleu);
  box-shadow:0 2px 4px rgba(18,87,214,.22),0 12px 26px -12px rgba(18,87,214,.55);
}
button.bt:hover, a.bt:hover{background:var(--bleu-fonce)}
button.bt.pale, a.bt.pale{
  background:var(--carte); color:var(--encre); border-color:var(--trait);
  box-shadow:var(--relief),0 2px 6px rgba(22,36,79,.07);
}
button.bt.pale:hover, a.bt.pale:hover{background:var(--filet)}
.acts{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.acts button.bt, .acts a.bt{justify-self:auto}

a.lien{font-size:.86rem; font-weight:650; color:var(--bleu); text-decoration:none}
a.lien:hover{text-decoration:underline}
/* LA LIGNE DE BASCULE SE LIT. Elle était à .8rem dans une encre pâle : c'est
   pourtant elle qui dit à une personne déjà inscrite qu'elle n'est pas au bon
   endroit — la question doit se voir, pas se deviner. Elle passe à .92rem et
   prend l'encre douce ; le lien qui la suit grossit d'autant, sinon le couple
   se lirait de travers. */
.sep{display:flex; align-items:center; gap:14px; margin:26px 0 0;
  color:var(--doux); font-size:1rem}
.sep::before, .sep::after{content:""; height:1px; background:var(--trait); flex:1}
.bas{margin:16px 0 0; text-align:center; font-size:1.12rem; color:var(--doux)}
/* LE LIEN DE BASCULE PREND LA TAILLE DE SA LIGNE, PAS CELLE DES LIENS
   ORDINAIRES. `a.lien` est à .86rem et l'emportait par sa spécificité : la
   ligne grossissait, le lien restait petit — et c'est lui qu'on clique.
   Mesuré : 17,92 px annoncés, 13,76 px rendus. */
.bas a.lien{font-size:inherit}
.bas a{font-weight:700; text-decoration:none}
.sous{margin:16px 0 0; font-size:.88rem; color:var(--doux)}
/* LA NOTE SUIT LE FORMULAIRE, ELLE NE TOMBE PLUS AU BAS DE L'ÉCRAN. Elle
   portait `margin:auto 0 0`, qui la poussait tout en bas de la colonne : sur
   un grand écran, « un code de connexion vous sera envoyé » se retrouvait à
   sept cents pixels sous le bouton, donc invisible au moment où elle sert.
   Elle se range maintenant sous ce qu'elle explique, dans un encadré discret
   qui la distingue du formulaire sans crier. */
.note{margin:24px 0 0; padding:13px 15px; font-size:.88rem; color:var(--doux);
  line-height:1.55; background:var(--filet); border-radius:10px;
  border-left:3px solid var(--trait)}

/* =====================================================================
   LA JAUGE DE SOLIDITÉ — un confort, pas un contrôle : le même calcul
   tourne à l'arrivée, et la page reste utilisable sans script.
   ===================================================================== */
.jauge{height:5px; border-radius:3px; background:var(--filet); overflow:hidden; margin:8px 0 0}
.jauge i{display:block; height:100%; width:0; background:var(--pale);
  transition:width .18s linear, background .18s linear}
.force{font-size:.79rem; color:var(--pale); margin:6px 0 0; min-height:1.3em}
.force.ok{color:var(--mint); font-weight:650}
.force.moyen{color:var(--ambre); font-weight:650}
.force.faible{color:var(--crit); font-weight:650}

/* =====================================================================
   LES BANDEAUX
   ===================================================================== */
.mot{border-radius:12px; padding:12px 14px; font-size:.9rem; margin:20px 0 0;
  border:1px solid transparent}
.mot.ko{background:var(--crit-fond); border-color:var(--crit); color:var(--crit)}
.mot.ok{background:var(--mint-fond); border-color:var(--mint); color:var(--mint)}
.mot.info{background:var(--filet); border-color:var(--trait); color:var(--doux)}
.mot.attente{background:var(--ambre-fond); border-color:var(--ambre); color:var(--ambre)}
.mot b{color:inherit}
.mot p{margin:0 0 8px}
.mot p:last-child{margin:0}

/* =====================================================================
   UNE FOIS CONNECTÉE — cet écran n'a pas de volet de présentation :
   on est entrée, il n'y a plus rien à présenter.
   ===================================================================== */
.dedans-large{max-width:860px; margin:0 auto; padding:34px 24px 60px}
.tete{display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin:0 0 28px}
.tete .marque{color:var(--encre)}
.tete .marque img{width:52px; height:52px; border-radius:13px;
  box-shadow:0 3px 10px -3px rgba(22,36,79,.35)}
.tete .marque i{color:var(--pale)}
.bienvenue h1{font-size:1.6rem; margin:0 0 10px}
.bienvenue .accroche{color:var(--doux); margin:0 0 22px; font-size:.98rem}

.appli{display:flex; gap:14px; align-items:center; background:var(--filet);
  border:1px solid var(--trait); border-radius:13px; padding:16px; margin:0 0 14px}
.appli .nom{font-weight:700; font-size:1rem; color:var(--encre)}
.appli .etat{font-size:.84rem; color:var(--doux)}

.regl{margin:22px 0 0; padding:20px 22px; background:var(--carte);
  border:1px solid var(--trait); border-radius:14px; box-shadow:var(--relief)}
.regl h2{font-size:1rem; margin:0 0 12px; color:var(--encre)}
.regl ul{margin:0; padding-left:20px; font-size:.91rem; color:var(--doux)}
.regl li{margin:0 0 6px}
.regl .sous{color:var(--pale); font-size:.82rem}

.pied-page{margin:30px 0 0; text-align:center; font-size:.78rem; color:var(--pale)}
.pied-page a{color:var(--pale)}

/* --- VOTRE ACCÈS, ET LA CASE DU CODE OFFERT -------------------------
   Les trois teintes de `.acc-etat` sont celles de `.mot` : un même état ne
   se peint pas de deux façons selon l'écran qui le montre. */
.acc-etat{margin:0 0 16px; padding:10px 14px; border-radius:11px;
  border:1px solid transparent; font-size:.93rem; font-weight:600}
.acc-etat.ok{background:var(--mint-fond); border-color:var(--mint); color:var(--mint)}
.acc-etat.attente{background:var(--ambre-fond); border-color:var(--ambre); color:var(--ambre)}
.acc-etat.ko{background:var(--crit-fond); border-color:var(--crit); color:var(--crit)}

.acc-form label{display:block; font-size:.86rem; font-weight:700;
  color:var(--encre); margin:0 0 8px}
/* La rangée se replie d'elle-même sur un téléphone : la case garde sa
   largeur de contenu, le bouton la sienne, et rien ne s'étire. */
.acc-rang{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.acc-rang input{flex:0 1 240px; min-width:0; padding:11px 13px;
  border:1px solid var(--trait); border-radius:11px; background:var(--carte);
  color:var(--encre); font:inherit; font-size:.95rem; letter-spacing:.06em;
  text-transform:uppercase}
.acc-rang input::placeholder{letter-spacing:normal; text-transform:none;
  color:var(--pale)}
.acc-rang input:focus-visible{outline:2px solid var(--bleu); outline-offset:2px}
.acc-rang .bt{flex:0 0 auto}

/* =====================================================================
   LE CHOIX D'UNE FORMULE — 6 octobre 2026

   La vitrine transporte désormais la formule et le chemin jusqu'ici : le
   formulaire d'inscription la NOMME, la RAPPELLE, et laisse en changer.
   Avant ce jour, les neuf liens de la vitrine partaient nus et la formule
   était perdue en route — mesuré le 6 octobre.

   CE SONT DE VRAIS BOUTONS RADIO, MASQUÉS SOUS LEUR ÉTIQUETTE. Trois
   raisons, et chacune suffirait : sans script la page reste utilisable, le
   clavier les parcourt comme n'importe quel choix, et un lecteur d'écran
   les annonce comme un choix unique parmi trois. Une rangée de `<div>`
   habillée en boutons n'aurait rien de tout cela.

   LA COULEUR DE CHAQUE FORMULE EST CELLE DE LA VITRINE, posée par un jeton
   sur l'étiquette : une seule écriture par formule, et le crescendo se lit
   ici comme là-bas.
   ===================================================================== */
.fml{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  margin:0 0 4px}
@media (max-width:520px){ .fml{grid-template-columns:1fr} }
/* LES TROIS PASTILLES ONT LA MEME HAUTEUR, quelle que soit la longueur de
   leur phrase : des cases cote a cote qui ne finissent pas au meme trait se
   lisent comme trois objets differents. La grille etire l'etiquette ; c'est
   la BOITE qu'il faut etirer avec, sinon elle garde sa hauteur naturelle. */
.fml label{display:flex; cursor:pointer}
.fml label > .fb{flex:1}
/* LE BOUTON RADIO EST DANS L'ETIQUETTE, ET LA BOITE EST SON FRERE SUIVANT.
   C'est ce qui permet de peindre l'etat choisi par `input:checked + .fb`,
   sans `:has()` : la regle marche dans tous les navigateurs, et pas
   seulement dans les recents. Le radio reste focalisable — on ne le cache
   pas par `display:none`, qui le retirerait du parcours au clavier. */
.fml input{position:absolute; opacity:0; width:1px; height:1px; margin:0;
  pointer-events:none}
.fml .fb{display:block; border:1.5px solid var(--trait); border-radius:12px;
  background:var(--champ); padding:12px 13px 11px;
  transition:border-color .15s, background .15s, box-shadow .15s}
.fml label:hover .fb{border-color:var(--fc)}
.fml b{display:block; font-size:.98rem; color:var(--encre); font-weight:700}
.fml s{display:block; text-decoration:none; font-size:.84rem; color:var(--doux);
  margin:2px 0 0}
.fml em{display:block; font-style:normal; font-size:1.18rem; font-weight:750;
  color:var(--fc); letter-spacing:-.02em; margin:5px 0 0}
.fml em small{font-size:.62em; font-weight:700; color:var(--doux)}
/* L'ETAT CHOISI SE VOIT PAR DEUX SIGNES, ET PAS UN SEUL : le cadre epais ET
   le fond. Un seul se confondrait avec le survol, et la couleur seule ne se
   voit pas d'un oeil qui ne distingue pas les teintes. */
.fml input:checked + .fb{border-color:var(--fc); background:var(--fcf);
  box-shadow:0 0 0 1px var(--fc) inset}
.fml input:focus-visible + .fb{box-shadow:var(--focus)}
.fml .f-essentiel{--fc:#3B475E; --fcf:#F2F4F8}
.fml .f-serenite{--fc:#094890; --fcf:#EAF2FD}
.fml .f-complicite{--fc:#175933; --fcf:#E9F8F0}
/* ET LES TROIS PAIRES ONT LEUR VERSION SOMBRE, parce qu'un fond PALE pose en
   theme sombre laisse l'encre claire dessus : la pastille choisie devenait
   illisible — 1,04 de contraste, mesure le 6 octobre 2026. C'est exactement
   le defaut de `--sur-violet` et de `.adm-bt.pru`, paye une troisieme fois :
   une couleur ecrite en dur pour un fond clair ne survit pas au theme
   sombre. L'accent s'eclaircit, le fond s'assombrit, et l'encre ne bouge
   pas. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fml .f-essentiel{--fc:#AEB9D0; --fcf:#1C2438}
  :root:not([data-theme="light"]) .fml .f-serenite{--fc:#7BA5F5; --fcf:#16213C}
  :root:not([data-theme="light"]) .fml .f-complicite{--fc:#6FD8A6; --fcf:#10342A}
}
:root[data-theme="dark"] .fml .f-essentiel{--fc:#AEB9D0; --fcf:#1C2438}
:root[data-theme="dark"] .fml .f-serenite{--fc:#7BA5F5; --fcf:#16213C}
:root[data-theme="dark"] .fml .f-complicite{--fc:#6FD8A6; --fcf:#10342A}

/* =====================================================================
   L'ÉCRAN « MON ABONNEMENT »
   ===================================================================== */
/* LA RÉFÉRENCE DE RAPPROCHEMENT EST CE QU'ON VIENT CHERCHER : c'est elle qui
   dit QUI a payé, et elle se recopie dans le libellé du virement. Elle est
   donc la plus grosse chose de l'écran, en chasse fixe, sélectionnable d'un
   geste — et jamais coupée : `overflow-wrap` plutôt que `nowrap`, le piège
   mesuré le 6 octobre sur un écran de 390 pixels. */
.vir{margin:0 0 18px; padding:18px 20px; border-radius:14px;
  background:var(--bleu-fond); border:1.5px solid var(--bleu)}
.vir h2{margin:0 0 4px; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--bleu); font-weight:800}
.vir .ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.7rem; font-weight:700; color:var(--encre); letter-spacing:.04em;
  margin:2px 0 6px; overflow-wrap:anywhere}
.vir p{margin:0 0 8px; font-size:.9rem; color:var(--doux); line-height:1.55}
.vir p:last-child{margin:0}
.vir b{color:var(--encre)}
.vir dl{margin:12px 0 0; display:grid; grid-template-columns:auto 1fr;
  gap:4px 14px; font-size:.9rem}
.vir dt{color:var(--doux)}
.vir dd{margin:0; color:var(--encre); font-weight:650; overflow-wrap:anywhere}
/* LE DETAIL DU MONTANT PASSE A LA LIGNE, ET IL LE FAUT.

   « Montant  42 € 34 € de formule + 8 € de complement » d'un seul tenant se
   lit comme DEUX montants au premier coup d'oeil — et c'est le chiffre
   qu'elle recopie dans son virement. Mesure le 7 octobre 2026 : le detail
   sortait en ligne, a 12 px contre 14,4, et de la meme couleur que le
   total. Vu a la capture, jamais par un controle. */
.vir dd small{display:block; font-weight:600; font-size:.82em;
  color:var(--doux); margin:2px 0 0; letter-spacing:.01em}

/* LE RÉCAPITULATIF DES TROIS FORMULES — une ligne par formule, et pas les
   huit lignes de la vitrine. Elle les a lues là-bas, et un écran de reprise
   qui redemande de tout relire décourage exactement le geste qu'il doit
   faciliter. */
.abo-l{display:grid; grid-template-columns:1fr auto auto; gap:12px 16px;
  align-items:center; padding:13px 0; border-bottom:1px solid var(--trait)}
.abo-l:last-of-type{border-bottom:none}
.abo-l .n{font-size:1rem; font-weight:700; color:var(--fc)}
.abo-l .q{grid-column:1; font-size:.86rem; color:var(--doux); margin:2px 0 0}
.abo-l .p{font-size:1.25rem; font-weight:750; color:var(--encre);
  letter-spacing:-.02em; white-space:nowrap}
/* LE DÉTAIL SOUS LE MONTANT PASSE À LA LIGNE, ET IL LE FAUT.

   `.abo-l .p` porte `white-space:nowrap` — c'est juste pour « 24 € /an »,
   qui ne doit pas se couper — mais le calcul d'une montée fait quarante
   signes : « 10 € × 306 j ÷ 365, arrondi en votre faveur ». Mesuré avant
   correction : 466 pixels de page dans un écran de 390, et deux lignes de
   formule qui débordaient de leur colonne. Il redevient donc un bloc, avec
   son blanc rendu, et il reprend l'alignement de la colonne. */
.abo-l .p small{font-size:.6em; font-weight:700; color:var(--doux)}
.abo-l .p small.det{display:block; white-space:normal; font-size:.52em;
  font-weight:600; line-height:1.4; max-width:17ch; margin:3px 0 0;
  text-align:right; margin-left:auto}
.abo-l form{margin:0}
.abo-l .bt{padding:10px 18px; font-size:.95rem}
/* LE MOT QUI REMPLACE UN BOUTON, en cours d'annee. Classe verifiee libre
   dans les deux feuilles avant d'etre posee — la lecon `.f-tot`, treizieme
   fois. Il garde la colonne du bouton pour que les trois lignes restent
   alignees : un mot cale a droite sous deux boutons ferait sauter la
   rangee. */
.abo-l .ren{font-size:.8rem; font-weight:650; color:var(--doux);
  text-align:right; max-width:13ch; line-height:1.35}
.abo-l.tenue{opacity:.62}
/* LA CLASSE DE COULEUR EST SUR `.abo-l` LUI-MÊME, PAS SUR UN ENFANT.

   Ces trois règles s'écrivaient `.abo-l .f-essentiel`, avec une espace :
   un sélecteur DESCENDANT, alors que le balisage pose les deux classes sur
   le même élément — `<div class="abo-l f-essentiel">`. Elles ne matchaient
   donc rien, `--fc` n'était jamais posé, et les trois noms de formule
   sortaient tous à l'encre ordinaire. Mesuré le 7 octobre 2026 : les trois
   rendaient `rgb(30,42,68)`.

   C'EST LE DÉFAUT DU MENU DE L'ADMINISTRATION DU 2 OCTOBRE, à l'identique :
   une règle écrite dans la feuille et jamais appliquée. On ne relit pas le
   CSS, on mesure ce qui s'applique — `getComputedStyle` est le seul endroit
   où cela se voit. */
.abo-l.f-essentiel{--fc:#3B475E}
.abo-l.f-serenite{--fc:#094890}
.abo-l.f-complicite{--fc:#175933}
/* ET LEUR VERSION SOMBRE, qui manquait — mesuree le 7 octobre 2026 dans la
   minute qui a suivi la correction du selecteur : 1,83 · 1,91 · 2,05 de
   contraste, les trois noms illisibles. Le defaut dormait DERRIERE le
   premier : tant que `--fc` ne s'appliquait pas, l'encre etait celle du
   theme, qui elle est juste. Reparer la cause a revele ce qu'elle cachait.

   LES TROIS VALEURS SONT CELLES DES CARTES DE `.fml`, et c'est voulu : deux
   jeux d'encres pour les trois memes formules finiraient par en donner deux
   — regle numero trois. Le jour ou une teinte change, les deux ecrans la
   suivent parce qu'elles sont les memes. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .abo-l.f-essentiel{--fc:#AEB9D0}
  :root:not([data-theme="light"]) .abo-l.f-serenite{--fc:#7BA5F5}
  :root:not([data-theme="light"]) .abo-l.f-complicite{--fc:#6FD8A6}
}
:root[data-theme="dark"] .abo-l.f-essentiel{--fc:#AEB9D0}
:root[data-theme="dark"] .abo-l.f-serenite{--fc:#7BA5F5}
:root[data-theme="dark"] .abo-l.f-complicite{--fc:#6FD8A6}
@media (max-width:560px){
  .abo-l{grid-template-columns:1fr auto}
  .abo-l form{grid-column:1 / -1}
  .abo-l .bt{width:100%}
  /* LE MOT QUI REMPLACE UN BOUTON SUIT LE BOUTON. Sans cette ligne il reste
     dans la troisieme colonne, qui n'existe plus a cette largeur : il
     tombait seul sur une ligne, borne a treize signes et cale a droite.
     Vu a la capture a 390 px, pas par un controle. */
  .abo-l .ren{grid-column:1 / -1; text-align:left; max-width:none;
    margin:2px 0 0}
}

/* LA CARTE DE L'APPLICATION — elle mène au carnet, et elle disait « en
   construction » jusqu'au 6 octobre 2026 alors que le carnet est en ligne
   depuis le 3. Règle numéro cinq : un texte qui décrit un état disparu est
   un piège. */
.appli .bt{margin-left:auto; flex:0 0 auto}
.appli-l{display:block; text-decoration:none; color:inherit}