/* Sonco Pay : pages de compte (/login, /signup). S'appuie sur les jetons d'app.css ; aucune couleur en dur.
   Mobile : une colonne (formulaire). Bureau (>= 960 px) : formulaire + panneau de marque sobre. */

.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);background:var(--card)}

/* ------------------------------------------------------------------ colonne du formulaire */
.auth-main{display:flex;flex-direction:column;align-items:center;min-width:0;padding:var(--s4) clamp(16px,4vw,64px) var(--s6)}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;min-height:44px}
.auth-top .lang-sel{min-height:36px}
.auth-tools{display:flex;align-items:center;gap:var(--s2);min-width:0}
.auth-top .theme-sel{min-height:36px}
.auth-top .theme-sel button{height:30px}
.auth-box{width:100%;max-width:420px;margin:auto 0;padding:var(--s8) 0 var(--s6)}
.auth-box h1{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.02em;margin:0 0 6px}
.auth-box .sub{color:var(--mute);margin:0 0 var(--s6);font-size:var(--fs-md)}
.auth-box .input{min-height:44px;font-size:16px}          /* 16 px : pas de zoom automatique sur iOS */
.auth-box .btn.lg{width:100%;min-height:46px;margin-top:var(--s2)}
.auth-box .field-err:empty{display:none}
.auth-box .form-err{margin:0 0 var(--s4)}
.auth-box .form-err[hidden]{display:none}
.auth-box .alt{margin:var(--s6) 0 0;padding-top:var(--s5);border-top:1px solid var(--line);text-align:center;color:var(--mute);font-size:var(--fs)}
.auth-box .alt a{font-weight:600}
.opt-l{font-weight:400;color:var(--mute)}

/* mot de passe + bouton Afficher (cible tactile de 44 px) */
.pw{position:relative}
.pw .input{padding-inline-end:76px}
.pw-tg{position:absolute;inset-block:0;inset-inline-end:2px;min-width:44px;padding:0 12px;border:0;background:transparent;
  color:var(--acc);font-weight:600;font-size:var(--fs-sm);cursor:pointer;border-radius:var(--r)}
.pw-tg:hover{color:var(--acc-h)}

/* jauge de solidité */
.strength{height:4px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden;margin-top:2px}
.strength i{display:block;height:100%;width:0;background:var(--bad);transition:width var(--t-slow) var(--ease),background-color var(--t-slow) var(--ease)}

/* acceptation des conditions */
.terms{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5;cursor:pointer;
  padding:var(--s2) 0;margin:0 0 var(--s2)}
.terms input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--acc);cursor:pointer}
.terms-f{margin-bottom:var(--s3)}
.terms-f .field-err{display:block;margin-inline-start:30px}

.auth-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s4);width:100%;font-size:var(--fs-xs);color:var(--mute)}
.auth-foot a{color:var(--mute)}
.auth-foot a:hover{color:var(--ink-2)}

/* ------------------------------------------------------------------ panneau de marque (bureau) */
.auth-side{display:none}
@media (min-width:960px){
  .auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .auth-foot{justify-content:flex-start}
  .auth-main{padding:var(--s6) clamp(32px,4vw,64px) var(--s6)}
  .auth-side{display:flex;align-items:center;justify-content:center;padding:var(--s10);background:var(--bg-2);
    border-inline-start:1px solid var(--line)}
  .side-in{width:100%;max-width:clamp(420px,30vw,620px)}
  .auth-side h2{font-size:clamp(30px,2.2vw,44px);font-weight:650;letter-spacing:-.025em;line-height:1.15;margin:0 0 var(--s6);color:var(--ink)}
  .side-pts{list-style:none;padding:0;margin:0 0 var(--s10);display:grid;gap:var(--s4);font-size:var(--fs-md);color:var(--ink-2)}
  .side-pts li{display:flex;gap:var(--s3);align-items:flex-start}
  .pt-ic{width:28px;height:28px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);color:var(--acc);
    display:grid;place-items:center;flex:none;margin-top:-2px}
  .pt-ic svg{width:16px;height:16px}
}

/* illustration : couleurs entièrement pilotées par les jetons (suit le mode sombre) */
.side-art{display:block;width:100%;height:auto;overflow:visible}
.side-art text{font-family:var(--font)}
.a-card{fill:var(--card);stroke:var(--line);stroke-width:1}
.a-av{fill:var(--acc-soft)}
.a-av-t{fill:var(--acc);font-size:12px;font-weight:700}
.a-t{fill:var(--ink);font-size:14px;font-weight:650}
.a-mute{fill:var(--mute);font-size:12px}
.a-big{fill:var(--ink);font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.a-pill{fill:var(--ok-soft);stroke:var(--ok-line)}
.a-ok{fill:var(--ok)}
.a-pill-t{fill:var(--ok);font-size:11px;font-weight:600}
.a-row{stroke:var(--line);stroke-width:6;stroke-linecap:round}
.a-flow{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-dasharray:4 5}
.a-node{fill:var(--acc)}
.a-spark{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.a-check{fill:var(--ok-soft);stroke:var(--ok-line)}
.a-check-m{fill:none;stroke:var(--ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .a-flow{animation:a-dash 1.6s linear infinite}
  @keyframes a-dash{to{stroke-dashoffset:-18}}
}

/* arabe : les adresses e-mail et web se saisissent de gauche à droite */
[dir=rtl] .auth-box input[type=email],[dir=rtl] .auth-box input[type=url]{direction:ltr;text-align:right}

/* écrans larges : le panneau de marque prend plus de place, le formulaire garde sa largeur (420 px) */
@media (min-width:1600px){.auth{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.side-pts{font-size:var(--fs-lg)}}
/* e-mails : lien « Mot de passe oublié ? » sous le mot de passe, bouton dans le pied des pages de lien */
.auth-box .forgot-l{margin:calc(var(--s2) * -1) 0 var(--s4);text-align:end;font-size:var(--fs-sm, .875rem)}
.auth-box .forgot-l a{font-weight:600}
.auth-box .alt .btn{display:inline-flex;width:100%;justify-content:center}