/* Page de connexion : palette et typographies du cockpit (Fraunces pour les titres, Inter pour le texte). */
:root{
  --bg:#faf8f5;--surface:#fff;--fg:#32373c;--fg2:#5b6168;--line:rgba(50,55,60,.24);
  --accent:#3866B5;--accent-ink:#274a86;--accent-fg:#fff;--bad:#a8382c;--bad-bg:#f8e3df;
  --side:#16233F;--side-fg:#c9d6ea;--side-dim:#8ea3c4;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;--f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1626;--surface:#16233F;--fg:#ece6dc;--fg2:#b3bccb;--line:rgba(255,255,255,.24);
  --accent:#7FA3D8;--accent-ink:#A9C4EC;--accent-fg:#0e1626;--bad:#f0968a;--bad-bg:#46231f;--side:#0a1120;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1626;--surface:#16233F;--fg:#ece6dc;--fg2:#b3bccb;--line:rgba(255,255,255,.24);
  --accent:#7FA3D8;--accent-ink:#A9C4EC;--accent-fg:#0e1626;--bad:#f0968a;--bad-bg:#46231f;--side:#0a1120;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.cadre{min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.marque{background:var(--side);color:var(--side-fg);padding:clamp(32px,6vw,80px);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;position:relative;overflow:hidden}
.marque::after{content:"";position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(127,163,216,.22),transparent 65%)}
.marque svg{width:64px;height:64px;margin-bottom:auto}
.nom{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,1.4rem + 2vw,3rem);letter-spacing:.02em;color:#fff;margin:0}
.role{margin:0;color:var(--side-dim);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.devise{margin:18px 0 0;max-width:28ch;font-family:var(--f-display);font-size:1.2rem;line-height:1.4}
.carte{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,6vw,96px);max-width:560px;width:100%;justify-self:center}
h1{font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,1.4rem + 1.2vw,2.4rem);margin:0 0 8px;line-height:1.15}
.intro{color:var(--fg2);margin:0 0 28px}
.champ{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
label{font-weight:600;font-size:.92rem}
input{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;width:100%;min-height:48px}
input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[aria-invalid="true"]{border-color:var(--bad)}
#code{font-variant-numeric:tabular-nums;letter-spacing:.3em;font-size:1.2rem}
.avec-bouton{display:flex;gap:8px}
.voir{font:inherit;font-size:.9rem;background:transparent;color:var(--accent-ink);border:1px solid var(--line);border-radius:var(--r);padding:0 14px;cursor:pointer;min-height:48px}
.voir:hover{border-color:var(--accent)}
.aide{margin:0;color:var(--fg2);font-size:.86rem}
.message{min-height:1.5em;margin:4px 0 14px;font-size:.95rem}
.message:not(:empty){background:var(--bad-bg);color:var(--bad);padding:10px 12px;border-radius:var(--r)}
.principal{font:inherit;font-weight:600;width:100%;min-height:50px;border:0;border-radius:var(--r);background:var(--accent);color:var(--accent-fg);cursor:pointer;transition:transform .15s ease,opacity .15s ease}
.principal:hover{transform:translateY(-1px)}
.principal:active{transform:translateY(0)}
.principal[aria-busy="true"]{opacity:.7;cursor:progress}
.pied{margin:28px 0 0;color:var(--fg2);font-size:.85rem;max-width:46ch}
@media (max-width:760px){
  .cadre{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .marque{padding:24px 16px;flex-direction:row;align-items:center;gap:12px;justify-content:flex-start}
  .marque svg{width:40px;height:40px;margin:0}
  .role,.devise{display:none}
  .nom{font-size:1.4rem}
  .carte{padding:28px 16px 40px;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.principal{transition:none}.principal:hover{transform:none}}