/* HÆVEN Flow — écrans d'authentification
   Mobile-first. Mêmes variables que le cockpit : aucune identité parallèle. */

:root{
  --ink:#212833; --muted:#6b7480; --navy:#253b55; --navy-2:#314b6b;
  --line:#eaedf0; --line-2:#f0f2f5; --gold:#d1bb74; --green:#5eaf87; --red:#d36b57;
  --amber:#c79632;
  --bg:#f6f7f9; --card:#ffffff; --soft:#fafbfc;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:14px;
  --shadow:0 1px 2px rgba(37,59,85,.035), 0 4px 14px rgba(37,59,85,.04);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}

*,*::before,*::after{box-sizing:border-box}

/* L'attribut `hidden` doit l'emporter sur toute règle de `display` de cette
   feuille. Sans cette ligne, une règle plus spécifique (ex. `.auth-msg .retry`)
   gagne sur `[hidden]{display:none}` de la feuille du navigateur et l'élément
   reste affiché alors que le code le croit masqué. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.5;
  /* L'axe horizontal est fermé au niveau du document : aucune vue d'authentification
     ne doit pouvoir être déplacée latéralement (règle 06). */
  overflow-x:hidden;
}

/* ------------------------------------------------------------------ ossature */

.auth-shell{min-height:100dvh;display:flex;flex-direction:column}

.auth-aside{
  background:var(--navy);color:#fff;
  padding:calc(22px + var(--safe-t)) 22px 22px;
}
.auth-brand{display:flex;align-items:center;gap:11px}
.auth-brand svg{flex-shrink:0}
.auth-brand-name{font-size:17px;font-weight:700;letter-spacing:-.01em}
.auth-baseline{
  margin:14px 0 0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.72);max-width:34ch;
}

.auth-main{
  flex:1;display:flex;align-items:flex-start;justify-content:center;
  padding:26px 18px calc(30px + var(--safe-b));
}
.auth-card{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 20px;
}

/* --------------------------------------------------------------- typographie */

.auth-title{margin:0 0 6px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.auth-sub{margin:0 0 20px;font-size:13.5px;color:var(--muted);line-height:1.55}
.auth-sub strong{color:var(--ink);font-weight:600;overflow-wrap:anywhere}

/* -------------------------------------------------------------- formulaires */

.auth-field{margin-bottom:15px}
.auth-field label{
  display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--ink);
}
.auth-field .hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}

.auth-input{
  width:100%;max-width:100%;min-height:46px;padding:11px 13px;
  border:1px solid var(--line);border-radius:11px;background:var(--soft);
  color:var(--ink);font-family:inherit;font-size:16px; /* 16px : pas de zoom iOS à la saisie */
  transition:border-color .15s, background .15s;
}
.auth-input::placeholder{color:#9aa2ad}
.auth-input:hover{border-color:#dfe3e8}
.auth-input:focus{outline:none;border-color:var(--navy-2);background:#fff}
.auth-input[aria-invalid="true"]{border-color:var(--red);background:#fdf7f5}
.auth-input:disabled{opacity:.55;cursor:not-allowed}

/* Champ mot de passe + bascule de visibilité. */
.auth-pwd{position:relative}
.auth-pwd .auth-input{padding-right:52px}
.auth-pwd-toggle{
  position:absolute;top:0;right:0;height:46px;width:46px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--muted);border-radius:11px;
}
.auth-pwd-toggle svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none}
.auth-pwd-toggle:focus-visible{outline:2px solid var(--navy-2);outline-offset:-2px}

/* ------------------------------------------------------------------ boutons */

.auth-btn{
  width:100%;min-height:48px;padding:13px 18px;border:0;border-radius:11px;
  background:var(--navy);color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:background .15s;
}
@media (hover:hover){ .auth-btn:hover:not(:disabled){background:var(--navy-2)} }
.auth-btn:active:not(:disabled){background:var(--navy-2)}
.auth-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-btn:focus-visible{outline:2px solid var(--navy-2);outline-offset:2px}

.auth-btn-ghost{
  background:none;color:var(--navy);border:1px solid var(--line);
}
@media (hover:hover){ .auth-btn-ghost:hover:not(:disabled){background:var(--soft)} }

.auth-link{
  background:none;border:0;padding:11px 4px;min-height:44px;
  color:var(--navy);font-family:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
@media (hover:hover){ .auth-link:hover{color:var(--navy-2)} }
.auth-link:focus-visible{outline:2px solid var(--navy-2);outline-offset:2px;border-radius:6px}

.auth-actions{margin-top:20px}
.auth-alt{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 8px;
  font-size:13.5px;color:var(--muted);text-align:center;
}

/* Indicateur de chargement du bouton. */
.auth-spin{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:auth-spin .7s linear infinite;
}
.auth-btn-ghost .auth-spin{border-color:rgba(37,59,85,.25);border-top-color:var(--navy)}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .auth-spin{animation-duration:2s} }

/* ------------------------------------------------------------------- états */

.auth-msg{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 16px;padding:12px 13px;border-radius:11px;
  font-size:13px;line-height:1.5;
}
.auth-msg svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;stroke-width:2;fill:none}
.auth-msg[hidden]{display:none}
.auth-msg.err{background:#fdf7f5;color:#a8492f;border:1px solid #f2ded7}
.auth-msg.err svg{stroke:#c0563c}
.auth-msg.ok{background:#f4faf7;color:#2f6b4f;border:1px solid #dcefe5}
.auth-msg.ok svg{stroke:var(--green)}
.auth-msg.warn{background:#fdfaf2;color:#8a6a1f;border:1px solid #f0e6cd}
.auth-msg.warn svg{stroke:var(--amber)}
.auth-msg .retry{
  margin-top:8px;display:inline-block;background:none;border:0;padding:6px 0;min-height:32px;
  color:inherit;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}

/* Écran de bascule (chargement initial de la garde). */
.auth-gate{
  position:fixed;inset:0;z-index:99999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--muted);font-family:var(--font);font-size:13.5px;
}
.auth-gate .auth-spin{border-color:rgba(37,59,85,.2);border-top-color:var(--navy);width:22px;height:22px}

.auth-illus{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#eef1f5;margin-bottom:14px;
}
.auth-illus svg{width:23px;height:23px;stroke:var(--navy);stroke-width:1.8;fill:none}

.auth-foot{
  padding:0 18px calc(22px + var(--safe-b));text-align:center;
  font-size:12px;color:var(--muted);
}

.auth-view[hidden]{display:none}

/* ------------------------------------------------------------- ≥ 768 px */

@media (min-width:768px){
  .auth-main{align-items:center;padding:40px}
  .auth-card{padding:32px 30px}
  .auth-aside{padding:calc(26px + var(--safe-t)) 34px 26px}
  .auth-title{font-size:23px}
}

/* ------------------------------------------------------------ ≥ 1024 px */

@media (min-width:1024px){
  .auth-shell{flex-direction:row;min-height:100dvh}
  .auth-aside{
    width:42%;max-width:520px;display:flex;flex-direction:column;justify-content:space-between;
    padding:44px 46px;
  }
  .auth-baseline{font-size:15px;max-width:30ch;margin-top:auto;padding-top:40px}
  .auth-side-foot{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:26px}
  .auth-body{flex:1;display:flex;flex-direction:column;min-width:0}
  .auth-main{padding:48px}
  .auth-card{max-width:440px}
}

/* ------------------------------------------------------------------- thème
   Le cockpit HÆVEN Flow n'implémente aujourd'hui AUCUN thème sombre : ni
   `haeven-flow-cockpit-dashboard-v2.html`, ni `styles.css`, ni
   `finances-obligations.css` ne déclarent `prefers-color-scheme`.

   Ces écrans restent donc volontairement sur la palette claire du produit. Un
   thème sombre appliqué à la seule authentification produirait une rupture
   visible à chaque connexion : écran sombre, puis cockpit clair.

   Le thème sombre relève d'un chantier design à part entière, sur l'ensemble du
   produit (règle 03 : « le thème sombre = vrai thème HÆVEN, pas une inversion »).
   Il n'est pas décidé et n'est pas du ressort de ce chantier. */
:root{ color-scheme:light }