/* AVE Console — direction « institutionnelle » (2026-10-24).
   Interlocuteurs : banques, centres d'appels, éditeurs d'applications. La console doit inspirer confiance : un
   cadre bleu nuit de la marque (#010A29) qui tient la navigation, un espace de travail clair et sobre, et la couleur
   vive de la marque (dégradé magenta → cyan) réservée à UN seul usage : le filet « spectre », sous le logo et en tête
   de page, comme la ligne d'un enregistrement de voix. Tout le reste est neutre ; l'ambre de la marque signale ce qui
   ne s'affiche qu'une fois (clé, lien, codes de secours).
   Aucune ressource externe (CSP « self ») : polices du système, logos en SVG servis par la console. */

:root {
  --nuit: #010A29;          /* fond de marque */
  --nuit-2: #0A1640;        /* survol dans le cadre */
  --nuit-texte: #C9D1EA;    /* texte secondaire sur nuit */
  --papier: #F4F6FB;        /* fond de travail, froid */
  --surface: #FFFFFF;
  --encre: #0E1838;         /* texte principal */
  --encre-2: #4A5677;       /* texte secondaire (contraste AA sur papier) */
  --filet: #D8DDEA;
  --action: #2442C8;        /* bleu de la marque assombri : contraste AA du texte blanc */
  --action-texte: #FFFFFF;
  --ambre: #FFB020;
  --ambre-fond: #FFF4DC;
  --ambre-texte: #6B4300;
  --danger: #B42318;
  --danger-fond: #FDECEA;
  --ok: #17703A;
  --spectre: linear-gradient(90deg, #E11DF5 0%, #7C3AED 35%, #3B5BFF 55%, #14B4FF 80%, #00E5FF 100%);
  --rayon: 8px;
  --ombre: 0 1px 2px rgba(1, 10, 41, .06), 0 4px 16px rgba(1, 10, 41, .05);
  --titre: "Segoe UI Variable Display", "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --texte: "Segoe UI Variable Text", "SF Pro Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --donnees: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, monospace;
  font-family: var(--texte);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #050E2E; --surface: #0B1740; --encre: #E8ECF8; --encre-2: #A3AECB; --filet: #1F2C5C;
    --action: #6F8BFF; --action-texte: #050E2E; --ambre-fond: #2D2410; --ambre-texte: #FFCF70;
    --danger: #FF8A7D; --danger-fond: #3A1512; --ok: #7FD69A;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--papier); color: var(--encre); line-height: 1.5; font-size: 15px; }
a { color: var(--action); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
img { max-width: 100%; }

/* ---------- Cadre de l'application : rail bleu nuit + page de travail */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--nuit); color: #fff; display: flex; flex-direction: column; padding: 24px 16px;
        position: sticky; top: 0; height: 100vh; }
.rail-brand { display: grid; gap: 10px; padding: 4px 8px 20px; text-decoration: none; position: relative; }
.rail-brand img { width: 108px; height: auto; }
.rail-brand::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px;
                     background: var(--spectre); border-radius: 2px; }
.rail-product { font: 600 11px/1 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--nuit-texte); }
.rail-nav { display: grid; gap: 2px; margin-top: 20px; }
.rail-nav a { color: #fff; text-decoration: none; padding: 9px 10px; border-radius: 6px; font-weight: 500; }
.rail-nav a:hover { background: var(--nuit-2); }
.rail-nav a[aria-current="page"] { background: var(--nuit-2); font-weight: 650; }
.rail-foot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 8px 0; display: grid; gap: 10px; }
.rail-who { margin: 0; display: grid; gap: 2px; font-size: 13px; overflow-wrap: anywhere; }
.rail-role { color: var(--nuit-texte); font-size: 12px; }
.rail-logout { background: none; border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 6px;
               padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; justify-self: start; }
.rail-logout:hover { border-color: #fff; filter: none; }

.page { padding: 40px 48px 80px; max-width: 1080px; width: 100%; }

/* ---------- Portail d'entrée (connexion, invitation, second facteur) */
.gate { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
/* Grand écran : le portail tient dans la hauteur de la fenêtre, sans défilement (demande du propriétaire,
   2026-10-25) ; chaque panneau ne défile que si la fenêtre est vraiment basse. */
@media (min-width: 861px) {
  .gate { height: 100vh; height: 100dvh; min-height: 0; }
  .gate-brand, .gate-panel { overflow-y: auto; }
}
.gate-brand { background: var(--nuit); color: #fff; display: grid; align-content: center; justify-items: center;
              gap: clamp(14px, 4vh, 40px); padding: clamp(24px, 5vh, 48px) 48px; position: relative; overflow: hidden; }
/* Le symbole suit la hauteur de la fenêtre autant que sa largeur : c'est lui qui faisait défiler la page. */
.gate-symbol { width: min(420px, 76%, 44vh); height: auto; overflow: visible; }
.gate-words { display: grid; gap: 14px; justify-items: center; text-align: center; }
/* Le mot AVE, agrandi (demande du propriétaire, 2026-10-25) : son sous-titre « AFRICAN VOICE ENGINE » devient lisible. */
.gate-words img { width: clamp(170px, 27vh, 240px); height: auto; }
.gate-tagline { margin: 0; max-width: 30ch; color: var(--nuit-texte); font-size: 15px; }
.gate-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--spectre); }
.gate-panel { display: grid; align-content: center; padding: clamp(24px, 5vh, 48px) 48px; background: var(--surface); }
.gate-inner { width: 100%; max-width: 420px; justify-self: center; display: grid; gap: 4px; }
.gate-inner .narrow { max-width: none; }
.gate-legal { margin-top: clamp(16px, 4vh, 32px); font-size: 12px; color: var(--encre-2); }

/* Ouverture : les barres montent d'ouest en est comme un signal de voix, l'ambre s'allume, l'onde se trace
   (≈ 1,8 s). Ensuite, une vague de son très lente et très faible traverse les barres (5 s par passage, 6 % de leur
   hauteur) : le symbole vit sans attirer l'œil. L'onde et les deux barres ambrées restent immobiles, point fixe du
   symbole. La vague se met en pause pendant la saisie (classe « saisie » posée par /static/connexion.js) : rien ne
   doit distraire au moment de taper un mot de passe ou un code. Rien ne bouge si l'appareil demande moins de
   mouvement ; le symbole est complet par défaut, les animations ne font que l'amener. */
.gate-symbol .barres rect, .gate-symbol .coeur rect { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .gate-symbol .barres rect { animation: monte .8s cubic-bezier(.22, 1, .36, 1) backwards,
                                         vague 5s cubic-bezier(.45, 0, .55, 1) infinite; }
  .gate-symbol .barres rect:nth-child(1) { animation-delay: 0.00s, 1.90s; }
  .gate-symbol .barres rect:nth-child(2) { animation-delay: 0.04s, 2.08s; }
  .gate-symbol .barres rect:nth-child(3) { animation-delay: 0.08s, 2.26s; }
  .gate-symbol .barres rect:nth-child(4) { animation-delay: 0.12s, 2.44s; }
  .gate-symbol .barres rect:nth-child(5) { animation-delay: 0.16s, 2.62s; }
  .gate-symbol .barres rect:nth-child(6) { animation-delay: 0.20s, 2.80s; }
  .gate-symbol .barres rect:nth-child(7) { animation-delay: 0.24s, 2.98s; }
  .gate-symbol .barres rect:nth-child(8) { animation-delay: 0.28s, 3.16s; }
  .gate-symbol .barres rect:nth-child(9) { animation-delay: 0.32s, 3.34s; }
  .gate-symbol .barres rect:nth-child(10) { animation-delay: 0.36s, 3.52s; }
  .gate-symbol .barres rect:nth-child(11) { animation-delay: 0.40s, 3.70s; }
  .gate-symbol .barres rect:nth-child(12) { animation-delay: 0.44s, 3.88s; }
  .gate-symbol .barres rect:nth-child(13) { animation-delay: 0.48s, 4.06s; }
  .gate-symbol .barres rect:nth-child(14) { animation-delay: 0.52s, 4.24s; }
  .gate-symbol .barres rect:nth-child(15) { animation-delay: 0.56s, 4.42s; }
  .gate-symbol .barres rect:nth-child(16) { animation-delay: 0.60s, 4.60s; }
  .gate-symbol .barres rect:nth-child(17) { animation-delay: 0.64s, 4.78s; }
  .gate-symbol .barres rect:nth-child(18) { animation-delay: 0.68s, 4.96s; }
  .gate-symbol .barres rect:nth-child(19) { animation-delay: 0.72s, 5.14s; }
  .gate-symbol .barres rect:nth-child(20) { animation-delay: 0.76s, 5.32s; }
  .gate-symbol .barres rect:nth-child(21) { animation-delay: 0.80s, 5.50s; }
  .gate-symbol .barres rect:nth-child(22) { animation-delay: 0.84s, 5.68s; }
  .gate.saisie .gate-symbol .barres rect { animation-play-state: running, paused; }
  .gate-symbol .coeur rect { animation: monte .9s cubic-bezier(.22, 1, .36, 1) .55s backwards; }
  .gate-symbol .onde path { stroke-dasharray: 900; stroke-dashoffset: 0; animation: trace 1s cubic-bezier(.22, 1, .36, 1) .8s backwards; }
}
@keyframes monte { from { transform: scaleY(.12); opacity: .25; } to { transform: none; opacity: 1; } }
@keyframes vague { 0%, 100% { transform: none; } 50% { transform: scaleY(.94); } }
@keyframes trace { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }

/* ---------- Typographie */
h1, h2, h3 { font-family: var(--titre); color: var(--encre); letter-spacing: -.01em; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 6px; font-weight: 650; }
/* Les intertitres reprennent la graphie du sous-titre de la marque (« AFRICAN VOICE ENGINE ») : capitales espacées. */
h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); font-weight: 650;
     margin: 40px 0 12px; font-family: var(--texte); }
.eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); }
.muted { color: var(--encre-2); }
.small { font-size: 13px; }
.mono { font-family: var(--donnees); font-size: .92em; }
.center { text-align: center; }

/* En-tête de page : eyebrow, titre, identifiant ; le filet spectre court dessous. */
.head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between;
        padding-bottom: 20px; margin-bottom: 8px; position: relative; }
.head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; background: var(--spectre); border-radius: 2px; }
.head .meta { margin: 0; color: var(--encre-2); font-size: 14px; }
.back { display: inline-block; margin-bottom: 16px; font-size: 14px; text-decoration: none; color: var(--encre-2); }
.back:hover { color: var(--action); }
nav.sub { display: flex; gap: 6px; flex-wrap: wrap; }
nav.sub a { text-decoration: none; padding: 7px 12px; border: 1px solid var(--filet); border-radius: 999px;
            background: var(--surface); color: var(--encre); font-size: 14px; }
nav.sub a:hover { border-color: var(--action); color: var(--action); }

/* ---------- Mise en page */
.narrow { max-width: 520px; }
.stack { display: grid; gap: 16px; }
.row { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.row-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px; background: var(--surface);
            border: 1px solid var(--filet); border-radius: var(--rayon); }

/* ---------- Formulaires */
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
input, select, textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--filet);
  border-radius: 6px; background: var(--surface); color: var(--encre); min-width: 0; }
input:hover, select:hover, textarea:hover { border-color: var(--encre-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ambre); outline-offset: 1px; border-color: var(--action); }
input[readonly] { background: var(--papier); }
fieldset { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 12px 16px 14px; margin: 0; display: grid; gap: 8px; background: var(--surface); }
fieldset.plain { border: none; padding: 0; background: none; }
legend { font-weight: 650; font-size: 14px; padding: 0 6px; }
label.check { display: flex; gap: 10px; align-items: center; font-weight: 400; }
label.check input { width: 16px; height: 16px; accent-color: var(--action); }

button, .button { font: inherit; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 6px;
  border: 1px solid var(--action); background: var(--action); color: var(--action-texte); cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.2; }
button:hover, .button:hover { filter: brightness(1.08); }
button.secondary { background: var(--surface); color: var(--action); }
button.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
button.danger:hover { background: var(--danger-fond); filter: none; }
button.small { padding: 5px 12px; font-size: 13px; }
button.link { background: none; border: none; color: var(--action); padding: 0; font-weight: 500; text-decoration: underline; }
form.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.wide { width: 100%; }

/* ---------- Tableaux */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface);
        border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); font-weight: 650; background: var(--papier); }
td a { font-weight: 600; }

/* ---------- Messages */
.alert { background: var(--danger-fond); color: var(--encre); border: 1px solid var(--filet);
         padding: 12px 14px; border-radius: var(--rayon); margin: 0 0 16px; }
/* Ce qui ne s'affiche qu'une fois (clé, lien, codes) : l'ambre de la marque. */
.once { background: var(--ambre-fond); color: var(--ambre-texte); border: 1px solid var(--ambre);
        padding: 12px 14px; border-radius: var(--rayon); }
.secret { font-family: var(--donnees); font-size: 15px; padding: 14px; width: 100%; border: 1px dashed var(--ambre); }
.ok { color: var(--ok); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
       border: 1px solid var(--filet); color: var(--encre-2); background: var(--papier); white-space: nowrap; }
.tag.off { border-color: var(--danger); color: var(--danger); background: var(--danger-fond); }
.tag.live { border-color: var(--ok); color: var(--ok); background: var(--surface); }

/* ---------- Divers */
.qr { display: flex; justify-content: center; padding: 16px; background: #fff; border-radius: var(--rayon); border: 1px solid var(--filet); }
.qr svg { max-width: 220px; height: auto; }
.codes { columns: 2; padding-left: 1.2em; font-size: 16px; margin: 16px 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 16px 0 24px; }
.facts dt { color: var(--encre-2); }
.facts dd { margin: 0; }
.empty { padding: 32px; text-align: center; background: var(--surface); border: 1px dashed var(--filet); border-radius: var(--rayon); color: var(--encre-2); }

/* ---------- Petits écrans : le rail devient une barre en haut, le portail réduit son panneau de marque */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; padding: 14px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  .rail-brand { padding: 0 0 8px; }
  .rail-brand img { width: 72px; }
  .rail-product { display: none; }
  .rail-nav { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
  .rail-nav a { padding: 6px 10px; font-size: 14px; }
  .rail-foot { margin: 0; border: none; padding: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; }
  .page { padding: 24px 16px 64px; }
  .gate { grid-template-columns: 1fr; }
  .gate-brand { padding: 20px 16px; gap: 12px; }
  .gate-tagline { display: none; }  /* téléphone : le formulaire tient sans défiler */
  .gate-symbol { width: 140px; }
  .gate-words img { width: 130px; }
  .gate-panel { padding: 28px 16px 48px; }
  table { display: block; overflow-x: auto; }
  .codes { columns: 1; }
}