/* =====================================================================
   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;
  --bleu:#1257D6;
  --bleu-fonce:#0E49B8;
  --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:#15A06A;
  --mint-fond:#E8F7F0;
  --ambre:#C77A09;
  --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;
    --bleu:#7BA5F5; --bleu-fonce:#9CBCF8;
    --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;
  --bleu:#7BA5F5; --bleu-fonce:#9CBCF8;
  --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} }

.retour{display:inline-flex; align-items:center; gap:7px; font-size:.84rem;
  color:var(--doux); text-decoration:none; font-weight:600; align-self:flex-start}
.retour:hover{color:var(--encre)}
.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}
.sep{display:flex; align-items:center; gap:14px; margin:26px 0 0;
  color:var(--pale); font-size:.8rem}
.sep::before, .sep::after{content:""; height:1px; background:var(--trait); flex:1}
.bas{margin:14px 0 0; text-align:center; font-size:.9rem; color:var(--doux)}
.bas a{font-weight:700; text-decoration:none}
.sous{margin:16px 0 0; font-size:.88rem; color:var(--doux)}
.note{margin:auto 0 0; padding-top:26px; font-size:.78rem; color:var(--pale); line-height:1.5}

/* =====================================================================
   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)}