/* Pages publiques (connexion, création de compte, compte en attente) — même palette que
   assets/styles.css (couleurs du logo AIA). Accessible sans session : voir le "matcher" de
   middleware.mjs. */
:root{
  /* palette AIA (logo), voir assets/styles.css */
  --navy-950:#071E57; --navy-900:#0A2A78; --navy-800:#1E6AC6; --navy:#1E6AC6;
  --blue:#1E6AC6; --sky:#5A9BE6; --gold:#FA8C0A; --bronze:#C47B2C;
  --bg:#F3F5F9; --border:#C9D3E3; --text:#14213D; --muted:#667691;
  --danger:#C2412D; --danger-soft:#FCEFEC; --success:#1E8A5A; --success-soft:#E8F5EE;
  --font:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; min-height:100vh; display:flex;
  font-family:var(--font); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* Panneau de marque (gauche sur grand écran, bandeau en haut sur mobile) */
.auth-brand{
  position:relative; overflow:hidden;
  flex:0 0 44%; max-width:620px;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px 56px;
  color:#fff;
  background:
    radial-gradient(900px 500px at 110% 110%, rgba(90,155,230,.45), transparent 60%),
    radial-gradient(600px 400px at -20% -10%, rgba(250,140,10,.16), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
}
.auth-brand::after{
  /* trame discrète en arrière-plan */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.auth-brand > *{ position:relative; z-index:1; }
.auth-brand-logo{ height:48px; width:auto; align-self:flex-start; }
.auth-brand-body h2{
  margin:0 0 14px; font-size:30px; line-height:1.2; font-weight:700; letter-spacing:-.02em;
}
.auth-brand-body h2 span{ color:#F6C10F; }
.auth-brand-body p{ margin:0 0 28px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.68); max-width:420px; }
.auth-features{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.auth-features li{ display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(255,255,255,.85); }
.auth-features svg{
  flex-shrink:0; width:34px; height:34px; padding:8px; border-radius:9px;
  color:#F6C10F; background:rgba(246,193,15,.12); border:1px solid rgba(246,193,15,.3);
}
.auth-brand-foot{ font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.4); }

/* Zone formulaire */
.auth-main{
  flex:1; background:#F2F3FA; display:flex; align-items:center; justify-content:center; padding:40px 24px;
}
.auth-card{ width:100%; max-width:420px; padding:36px 32px; background:#fff; border-radius:28px; box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); }
.auth-card-logo{ display:none; height:44px; width:auto; margin:0 0 28px; }
.auth-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze);
}
.auth-eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:var(--gold); }
.auth-card h1{ margin:0 0 8px; font-size:30px; font-weight:400; letter-spacing:-.02em; color:var(--navy-900); }
.auth-card .auth-lead{ margin:0 0 28px; font-size:14px; line-height:1.6; color:var(--muted); }

.auth-field{ margin-bottom:16px; }
.auth-field label{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--text); }
.auth-card input, .auth-card select{
  width:100%; height:46px; padding:0 14px; font-size:15px; font-family:inherit;
  color:var(--text); background:#fff;
  border:1px solid #757780; border-radius:4px;
  transition:border-color .12s, box-shadow .12s;
}
.auth-card select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:40px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23667691' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.auth-card input:hover, .auth-card select:hover{ border-color:var(--sky); }
.auth-card input:focus, .auth-card select:focus{
  outline:none; border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy);
}
.auth-card input::placeholder{ color:#98A4B8; }

.auth-submit{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:48px; margin-top:8px;
  font-size:15px; font-weight:600; font-family:inherit; letter-spacing:.01em;
  color:#fff; background:var(--navy); border:none; border-radius:24px; cursor:pointer;
  box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
  transition:background .15s, transform .05s;
}
.auth-submit:hover{ background:#144EA0; box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.3); }
.auth-submit:active{ transform:translateY(1px); }
.auth-submit:disabled{ opacity:.65; cursor:default; }
.auth-submit svg{ width:18px; height:18px; }
.auth-submit.is-loading svg{ display:none; }
.auth-submit.is-loading::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:auth-spin .7s linear infinite;
}
@keyframes auth-spin{ to{ transform:rotate(360deg); } }

.auth-alert{
  display:none; margin-top:16px; padding:11px 14px; border-radius:10px;
  font-size:13px; line-height:1.5;
}
.auth-alert.error{ color:var(--danger); background:var(--danger-soft); border:1px solid rgba(194,65,45,.25); }
.auth-alert.success{ color:var(--success); background:var(--success-soft); border:1px solid rgba(30,138,90,.25); }

.auth-switch{
  margin:28px 0 0; padding-top:20px; border-top:1px solid #E1E6EF;
  font-size:13.5px; color:var(--muted); text-align:center;
}
.auth-switch a{ color:var(--navy); font-weight:600; text-decoration:none; }
.auth-switch a:hover{ color:var(--bronze); }

.auth-status-icon{
  width:56px; height:56px; margin:0 0 22px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--bronze); background:#FBF3E4; border:1px solid #F0DDB8;
}
.auth-status-icon svg{ width:26px; height:26px; }
.auth-secondary-btn{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px;
  font-size:14px; font-weight:600; color:var(--navy); text-decoration:none;
  border:1px solid #757780; border-radius:22px; background:#fff;
  transition:background .12s, border-color .12s;
}
.auth-secondary-btn:hover{ background:#EDF2FA; border-color:var(--sky); }
.auth-secondary-btn svg{ width:16px; height:16px; }

/* Version de l'application (api/version) : pied du panneau de marque, et sous la carte sur mobile */
.auth-version-sep::before{ content:"· "; }
/* Aide (assets/auth-help.js) : bouton « ? » dans le coin de la carte, fenêtre à fond flouté */
.auth-card{ position:relative; }
.auth-help-btn{ position:absolute; top:14px; right:14px; width:38px; height:38px; padding:7px; border:0; border-radius:50%;
  background:transparent; color:var(--muted); cursor:pointer; transition:background .12s, color .12s; }
.auth-help-btn:hover, .auth-help-btn:focus-visible{ background:#EDF2FA; color:var(--navy); outline:none; }
.auth-help-btn svg{ width:100%; height:100%; display:block; }
.auth-help-bg{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(7,30,87,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.auth-help-bg[hidden]{ display:none; }
.auth-help-box{ width:100%; max-width:640px; max-height:calc(100% - 16px); display:flex; flex-direction:column; background:#fff;
  border-radius:24px; box-shadow:0 24px 60px -20px rgba(7,30,87,.55); overflow:hidden; }
.auth-help-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 14px 26px; border-bottom:1px solid #E1E6EF; }
.auth-help-head h2{ margin:0; font-size:20px; font-weight:500; color:var(--navy-900); }
.auth-help-close{ width:36px; height:36px; padding:8px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; flex-shrink:0; }
.auth-help-close:hover, .auth-help-close:focus-visible{ background:#EDF2FA; color:var(--navy); outline:none; }
.auth-help-close svg{ width:100%; height:100%; display:block; }
.auth-help-body{ overflow-y:auto; padding:6px 26px 24px; font-size:14px; line-height:1.55; color:var(--text); }
.auth-help-body section{ padding-top:16px; }
.auth-help-body h3{ margin:0 0 6px; font-size:15.5px; font-weight:600; color:var(--navy-900); }
.auth-help-body ol{ margin:0; padding-left:20px; }
.auth-help-body li{ margin:3px 0; }
.auth-help-body p{ margin:0; }
.auth-help-body img{ display:block; width:100%; height:auto; margin-top:10px; border-radius:12px; border:1px solid #E1E6EF; }
.auth-help-faq dl{ margin:0; display:grid; gap:4px; }
.auth-help-faq dt{ font-weight:600; margin-top:6px; }
.auth-help-faq dd{ margin:0; color:var(--muted); }

.auth-version{ display:none; margin:14px 0 0; font-size:11.5px; letter-spacing:.04em; color:#98A4B8; text-align:center; }

/* Transition entre connexion, inscription et attente (View Transitions entre pages : Chrome, Edge,
   Safari 18.2+). La carte glisse dans le sens de la navigation, le panneau de marque reste en place. */
@view-transition{ navigation:auto; }
.auth-card{ view-transition-name:auth-card; }
.auth-brand{ view-transition-name:auth-brand; }
::view-transition-old(root), ::view-transition-new(root){ animation:none; }
::view-transition-group(auth-card){ animation-duration:.45s; animation-timing-function:cubic-bezier(.3,0,.2,1);
  overflow:clip; border-radius:28px; } /* les deux cartes glissent dans le cadre de la carte (pas sur le panneau de marque) */
/* « En pousse » : l'ancienne carte sort d'un côté pendant que la nouvelle entre de l'autre, au même rythme. */
::view-transition-old(auth-card){ animation:auth-out .45s cubic-bezier(.3,0,.2,1) both; }
::view-transition-new(auth-card){ animation:auth-in .45s cubic-bezier(.3,0,.2,1) both; }
html:active-view-transition-type(back)::view-transition-old(auth-card){ animation-name:auth-out-back; }
html:active-view-transition-type(back)::view-transition-new(auth-card){ animation-name:auth-in-back; }
@keyframes auth-out{ to{ transform:translateX(calc(-100% - 40px)); opacity:.4; } }
@keyframes auth-in{ from{ transform:translateX(calc(100% + 40px)); opacity:.4; } }
@keyframes auth-out-back{ to{ transform:translateX(calc(100% + 40px)); opacity:.4; } }
@keyframes auth-in-back{ from{ transform:translateX(calc(-100% - 40px)); opacity:.4; } }
/* Repli : la carte qui arrive de côté ne crée pas de défilement horizontal (le vertical reste libre). */
.auth-main{ overflow-x:clip; }
/* Repli (navigateur sans View Transitions) : animation d'arrivée de la carte */
html.auth-anim .auth-card{ animation:auth-in .45s cubic-bezier(.3,0,.2,1) both; }
html.auth-anim-back .auth-card{ animation:auth-in-back .45s cubic-bezier(.3,0,.2,1) both; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(auth-card), ::view-transition-old(auth-card), ::view-transition-new(auth-card){ animation:none; }
  html.auth-anim .auth-card, html.auth-anim-back .auth-card{ animation:none; }
}

/* Application Android « AIA Scan » (html.aia-app, posée par le script de tête) : écran du PDA fixe,
   sans défilement — carte resserrée pour tenir en entier sur 360 x 568. */
html.aia-app, html.aia-app body{ height:100%; overflow:hidden; overscroll-behavior:none; }
html.aia-app ::-webkit-scrollbar{ display:none; }
html.aia-app .auth-main{ align-items:center; padding:10px 12px; }
html.aia-app .auth-card{ padding:16px 18px; border-radius:20px; }
html.aia-app .auth-card-logo{ height:26px; margin:0 0 10px; }
html.aia-app .auth-eyebrow{ display:none; }
html.aia-app .auth-card h1{ font-size:22px; margin:0 0 4px; }
html.aia-app .auth-card .auth-lead{ font-size:12.5px; line-height:1.4; margin:0 0 12px; }
html.aia-app .auth-field{ margin-bottom:9px; }
html.aia-app .auth-field label{ margin-bottom:4px; font-size:12px; }
html.aia-app .auth-card input, html.aia-app .auth-card select{ height:40px; }
html.aia-app .auth-submit{ height:44px; margin-top:4px; }
html.aia-app .auth-alert{ margin-top:10px; padding:8px 12px; }
html.aia-app .auth-switch{ margin:12px 0 0; padding-top:10px; font-size:13px; }
html.aia-app .auth-status-icon{ width:44px; height:44px; margin:0 0 12px; }
html.aia-app .auth-version{ margin:6px 0 0; }

@media (max-width: 900px){
  .auth-version{ display:block; }
  body{ flex-direction:column; }
  .auth-brand{ display:none; }
  .auth-main{
    align-items:flex-start; padding:48px 22px;
    padding-top:calc(48px + env(safe-area-inset-top));
    background:
      radial-gradient(600px 300px at 50% -80px, rgba(63,107,184,.12), transparent 70%),
      var(--bg);
  }
  .auth-card-logo{ display:block; }
  html.aia-app .auth-main{ align-items:center; padding:10px 12px; }
}
.auth-optional{ font-weight:400; color:var(--muted, #6b7280); }