/* =====================================================================
   DYS.MA — Couche « Authentification »
   S'ajoute a shell-public.css. Aucune redefinition du socle.
   Progression par la forme (contour -> plein -> coche), jamais par la couleur.
   ===================================================================== */

/* ---------- 1. Coquille scindee ---------- */
.auth-shell { min-height:100dvh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }

.auth-aside {
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; gap:var(--s7);
  padding:clamp(28px,4vw,56px);
  background:radial-gradient(130% 120% at 88% -10%, var(--c-1b3a57) 0%, var(--ink-900) 58%);
  color:var(--c-fbfaf6);
}
.auth-aside .trace { position:absolute; inset-block:0; inset-inline-end:-6%; width:78%; opacity:.55; pointer-events:none; }
.auth-aside-body { position:relative; max-width:38ch; }
.auth-aside .kicker { color:var(--em-300); }
.auth-aside .kicker .bar { background:var(--em-400); }
.auth-aside h2 { color:var(--c-fbfaf6); font-size:clamp(26px,2.6vw,40px); line-height:1.08; margin:var(--s4) 0 var(--s3); }
.auth-aside p { color:var(--ink-200); font-size:16px; line-height:1.6; }

.auth-proof { position:relative; display:flex; flex-direction:column; gap:var(--s3); }
.auth-proof-item { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-200); }
.auth-proof-item svg { width:18px; height:18px; flex:none; color:var(--em-400); margin-top:1px; }

/* ---------- 2. Colonne formulaire ---------- */
.auth-main { display:flex; flex-direction:column; background:var(--paper); }
.auth-topline {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:18px clamp(20px,4vw,48px); border-bottom:1px solid var(--line);
}
.auth-back { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-500); }
.auth-back:hover { color:var(--em-700); }
.auth-back svg { width:15px; height:15px; }
[dir="rtl"] .auth-back svg { transform:scaleX(-1); }

.auth-body { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,64px) clamp(20px,4vw,48px); }
.auth-card { width:100%; max-width:432px; }

.auth-head { margin-bottom:var(--s6); }
.auth-head h1 { font-size:clamp(26px,3vw,34px); margin-bottom:var(--s3); }
.auth-head p { font-size:15px; line-height:1.6; color:var(--ink-500); }

/* ---------- 3. Formulaire ---------- */
.auth-form { display:flex; flex-direction:column; gap:var(--s5); }
.auth-form .field { display:flex; flex-direction:column; }
.auth-form .field label { font-size:13px; font-weight:700; color:var(--ink-600); margin-bottom:6px; }
.auth-form .input { min-height:46px; }
.field-hint { font-size:12.5px; color:var(--ink-400); margin-top:6px; }
.field-error { display:flex; align-items:flex-start; gap:6px; font-size:12.5px; font-weight:600; color:var(--danger); margin-top:6px; }
.field-error svg { width:14px; height:14px; flex:none; margin-top:2px; }
.input[aria-invalid="true"] { border-color:var(--danger); }

.field-row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.field-row a { font-size:12.5px; font-weight:600; }

.auth-check { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-600); line-height:1.5; }
.auth-check input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--em-600); flex:none; }

.auth-actions { display:flex; flex-direction:column; gap:var(--s3); }
.auth-actions .btn { justify-content:center; width:100%; min-height:48px; }

.auth-alt { margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line); font-size:14px; color:var(--ink-500); text-align:center; }
.auth-alt a { font-weight:700; }
.auth-legal { margin-top:var(--s5); font-size:12px; line-height:1.55; color:var(--ink-400); }

/* ---------- 4. Separateur ---------- */
.auth-sep { display:flex; align-items:center; gap:var(--s3); color:var(--ink-400); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.auth-sep::before, .auth-sep::after { content:""; flex:1 1 auto; height:1px; background:var(--line); }

/* ---------- 5. Messages ---------- */
.notice { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:var(--r-sm); border:1px solid; font-size:14px; line-height:1.55; }
.notice svg { width:18px; height:18px; flex:none; margin-top:1px; }
.notice strong { display:block; font-weight:700; margin-bottom:2px; }
.notice-info { background:var(--ink-100); border-color:var(--ink-200); color:var(--ink-700); }
.notice-success { background:var(--em-100); border-color:var(--em-200); color:var(--em-800); }
.notice-warning { background:var(--am-100); border-color:var(--am-300); color:var(--am-700); }
.notice-danger { background:var(--danger-100); border-color:var(--c-e3b4af); color:var(--c-9a2f29); }

/* ---------- 6. Progression par la forme (jamais la couleur seule) ---------- */
.steps { display:flex; align-items:center; gap:8px; margin-bottom:var(--s5); }
.step { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-400); }
.step-mark {
  width:22px; height:22px; border-radius:var(--r-pill); border:2px solid var(--ink-200);
  display:inline-flex; align-items:center; justify-content:center; background:transparent;
}
.step-mark svg { width:12px; height:12px; }
.step-link { flex:1 1 auto; height:2px; background:var(--line); border-radius:var(--r-pill); }
.step.is-current { color:var(--ink-700); }
.step.is-current .step-mark { border-color:var(--em-600); background:var(--em-600); color:var(--c-06231a); }
.step.is-done { color:var(--em-800); }
.step.is-done .step-mark { border-color:var(--em-600); background:var(--em-100); color:var(--em-800); }

/* ---------- 7. Choix du role ---------- */
.role-grid { display:grid; gap:var(--s3); }
.role-card {
  display:flex; align-items:center; gap:var(--s4); padding:18px 20px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-md);
  color:inherit; transition:border-color .18s, transform .18s, box-shadow .18s;
}
.role-card:hover { color:inherit; border-color:var(--em-600); transform:translateY(-2px); box-shadow:var(--sh-md); }
.role-ico { width:44px; height:44px; flex:none; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:var(--em-100); color:var(--em-700); }
.role-ico svg { width:22px; height:22px; }
.role-txt { flex:1 1 auto; min-width:0; }
.role-txt .lbl { display:block; font-weight:700; font-size:15.5px; color:var(--ink-700); }
.role-txt .hint { display:block; font-size:13px; color:var(--ink-400); margin-top:2px; }
.role-card .arw { flex:none; color:var(--em-600); }
.role-card .arw svg { width:20px; height:20px; }
[dir="rtl"] .role-card .arw svg { transform:scaleX(-1); }

/* ---------- 8. Jeton / code de verification ---------- */
.token-field { display:flex; flex-direction:column; align-items:stretch; }
.token-field .input {
  font-family:var(--font-head); font-size:22px; font-weight:600;
  letter-spacing:.28em; text-align:center; padding-block:14px;
  font-variant-numeric:tabular-nums;
}

/* ---------- 9. Robustesse du mot de passe (forme + libelle, pas la couleur seule) ---------- */
.pw-meter { margin-top:10px; }
.pw-bars { display:flex; gap:5px; }
.pw-bars span { flex:1 1 0; height:5px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line); }
.pw-meter[data-level="1"] .pw-bars span:nth-child(-n+1),
.pw-meter[data-level="2"] .pw-bars span:nth-child(-n+2),
.pw-meter[data-level="3"] .pw-bars span:nth-child(-n+3),
.pw-meter[data-level="4"] .pw-bars span:nth-child(-n+4) { background:var(--em-600); border-color:var(--em-700); }
.pw-label { display:block; font-size:12.5px; font-weight:600; color:var(--ink-500); margin-top:6px; }
.pw-rules { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.pw-rules li { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-400); }
.pw-rules li svg { width:14px; height:14px; flex:none; }
.pw-rules li.is-ok { color:var(--em-800); font-weight:600; }

/* ---------- 10. Etat terminal (verification envoyee, succes) ---------- */
.auth-state-ico {
  width:56px; height:56px; border-radius:var(--r-pill); margin-bottom:var(--s5);
  display:flex; align-items:center; justify-content:center;
  background:var(--em-100); color:var(--em-700); border:1.5px solid var(--em-200);
}
.auth-state-ico svg { width:26px; height:26px; }

/* ---------- 11. Responsive ---------- */
@media (max-width:1024px) {
  .auth-shell { grid-template-columns:1fr; }
  .auth-aside { order:2; gap:var(--s5); padding:clamp(24px,5vw,40px); }
  .auth-aside .trace { opacity:.3; }
  .auth-aside h2 { font-size:clamp(22px,4vw,28px); }
  .auth-main { order:1; min-height:auto; }
}
@media (max-width:640px) {
  .auth-body { padding:var(--s6) var(--s5) var(--s8); }
  .auth-topline { padding-inline:var(--s5); }
  .steps .step span:not(.step-mark) { display:none; }
}

/* ---------- 12. TopBar publique simplifiee (ecrans d'authentification) ---------- */
.auth-topbar {
  position:sticky; top:0; z-index:60;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.auth-topbar-inner {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:64px; padding-block:10px;
}
.auth-topbar-actions { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; justify-content:flex-end; }
.auth-topbar-link {
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-size:14px; font-weight:600; color:var(--ink-500);
}
.auth-topbar-link:hover { color:var(--em-700); }
.auth-topbar-link svg { width:16px; height:16px; flex:none; }
[dir="rtl"] .auth-topbar-link svg.is-directional { transform:scaleX(-1); }

/* La coquille occupe le reste de la hauteur sous la topbar. */
.auth-shell { min-height:calc(100dvh - 64px); }

/* ---------- 13. Champs rendus par le formulaire Django ---------- */
.auth-form input[type="text"], .auth-form input[type="email"],
.auth-form input[type="password"], .auth-form input[type="tel"],
.auth-form input[type="search"], .auth-form select, .auth-form textarea {
  width:100%; min-height:46px; font-family:var(--font-body); font-size:15px;
  color:var(--ink-700); background:var(--paper);
  border:1.5px solid var(--line-strong); border-radius:var(--r-sm);
  padding:11px 14px; transition:border-color .2s, background .2s;
}
.auth-form input::placeholder { color:var(--ink-400); }
.auth-form input:hover, .auth-form select:hover { border-color:var(--ink-300); }
.auth-form input:focus-visible, .auth-form select:focus-visible, .auth-form textarea:focus-visible {
  border-color:var(--em-600); background:var(--surface); outline-offset:0;
}
.auth-form input[aria-invalid="true"] { border-color:var(--danger); }
.auth-form select { appearance:none; -webkit-appearance:none; background-color:var(--paper); }
.auth-form .helptext { display:block; font-size:12.5px; color:var(--ink-400); margin-top:6px; }
.errorlist { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.errorlist li { font-size:12.5px; font-weight:600; color:var(--danger); }
.auth-check .helptext { margin-top:2px; }

@media (max-width:640px) {
  .auth-topbar-actions { gap:var(--s3); }
  .auth-topbar-link span { display:none; }
  .auth-topbar-link svg { width:18px; height:18px; }
}

/* ---------- 14. Depot de fichier ---------- */
.auth-form input[type="file"] {
  width:100%; font-family:var(--font-body); font-size:14px; color:var(--ink-600);
  background:var(--surface); border:1.5px dashed var(--line-strong);
  border-radius:var(--r-sm); padding:14px; cursor:pointer;
}
.auth-form input[type="file"]:hover { border-color:var(--em-600); background:var(--em-100); }
.auth-form input[type="file"]:focus-visible { border-color:var(--em-600); outline-offset:2px; }
.auth-form input[type="file"]::file-selector-button {
  font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--ink-700);
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--r-xs); padding:7px 12px; margin-inline-end:12px; cursor:pointer;
}
.auth-form input[type="file"]::file-selector-button:hover { border-color:var(--ink-400); }

/* Origine de transformation du noeud terminal du trace : elle etait posee en
   attribut style=, ce qui la rendait invisible au gate et impossible a
   surcharger. Elle appartient a la feuille, comme toute regle de forme. */
.auth-aside .trace-node-end { transform-origin: 540px 240px; }