/* Le front, en une feuille. Mobile d'abord : tout se lit à 375 px, sans
   défilement horizontal et avec 16 px de marge de chaque côté. Le desktop
   n'est qu'une largeur plafonnée — pas une deuxième mise en page à tenir. */

/* --- Charte DataTrail ------------------------------------------------------
   La palette « Deep Purple » du guide de marque du site public
   (`Site Web/datatrail-nextjs/branding/branding-guide.md`), décidée par le
   propriétaire le 2026-09-24. Les anciennes valeurs (`#1a4a5e`/`#2d7a4f`)
   venaient par erreur de `datatrail-frontend`, une appli interne.

   Le violet s'emploie AVEC PARCIMONIE (le guide) : titres de marque, boutons,
   liens, l'écran courant. Jamais en aplat sur une grande surface — aucune
   carte, aucun bandeau, aucun fond de page n'est violet.

   Le vert de succès, le rouge de refus et l'ambre d'attention ne sont PAS la
   marque : ce sont des couleurs SÉMANTIQUES, gardées telles quelles (leurs
   contrastes ont été remesurés sur les nouveaux fonds).

   Chaque paire ci-dessous a été MESURÉE (WCAG 2.1, luminance relative), pas
   estimée. La plus serrée est le vert de succès sur son fond clair, à
   4,73:1. Toutes passent AA en texte courant (≥ 4,5:1). Si tu changes une
   valeur, recalcule — un accent qui « a l'air lisible » sur un écran de
   bureau ne l'est pas au soleil.
   -------------------------------------------------------------------------- */

:root {
  --fond: hsl(210, 40%, 98%);     /* guide « background » (#f8fafc) */
  --encre: hsl(224, 71%, 4%);     /* guide « foreground » (#030711) — 19,26:1 sur
                                     --fond, 20,15:1 sur --carte, 18,31:1 sur --attenue */
  --carte: hsl(0, 0%, 100%);      /* guide « card » */
  --trait: hsl(220, 13%, 91%);    /* guide « border » (#e5e7eb) — un filet, pas du texte */
  --attenue: hsl(220, 14%, 96%);  /* guide « muted » (#f3f4f6) : code, pastilles, encadrés
                                     neutres */
  --gris: hsl(220, 9%, 42%);      /* #616875, dérivé : le guide n'a pas de texte
                                     secondaire. 5,36:1 sur --fond, 5,61:1 sur --carte,
                                     5,09:1 sur --attenue ; ≥ 5,06:1 sur les trois fonds
                                     sémantiques */
  --accent: hsl(263, 70%, 50%);   /* guide « primary » (#6b26d9) — 7,23:1 sur --carte,
                                     6,91:1 sur --fond, 6,57:1 sur --attenue */
  --accent-encre: hsl(0, 0%, 100%); /* 7,23:1 sur --accent : le blanc tient sur le
                                     bouton violet */
  --neutre-trait: hsl(220, 9%, 70%); /* un liseré « neutre » (dépôt), pas du texte */
  --refus-fond: #fdf2ef;
  --refus-trait: #a33a22;   /* 6,00:1 sur --refus-fond, 6,59:1 sur --carte */
  --refus-encre: #ffffff;   /* 6,59:1 sur --refus-trait, quand il fait fond */
  --succes-fond: #eef5f1;
  --succes-trait: #2d7a4f;  /* 4,73:1 sur --succes-fond, 5,24:1 sur --carte */
  /* Lot I2 — « à revalider » : ni un refus, ni un succès. Un ambre, mesuré :
     5,49:1 sur --attention-fond, 5,93:1 sur --carte. */
  --attention-fond: #fdf6e3;
  --attention-trait: #8a5a00;
  --gouttiere: 16px;
}

/* Le sombre : le guide n'en a pas, il est DÉRIVÉ.

   Le fond est `hsl(224, 71%, 4%)` — l'encre du guide — et pas le violet
   sombre `hsl(260, 25%, 12%)` de ses sections d'appel. Trois raisons :
   (1) un fond teinté de violet sur toute la page, c'est le violet en aplat
   sur une grande surface, ce que le guide interdit ; (2) sur un fond de même
   teinte que lui, l'accent violet perd son relief (7,05:1 ici, il ne ferait
   que 6,13:1 sur le fond violet) ; (3) le sombre devient l'exact miroir du
   clair : fond et encre échangés, les deux pôles du guide.

   L'accent monte en clarté AU MÊME ENDROIT du cercle (teinte 263, saturation
   70 % gardées, luminosité 50 → 72 %) : c'est la marque, pas sa négation. Le
   bouton violet clair porte donc une encre FONCÉE (l'encre du guide), pas du
   blanc — du blanc y tomberait à 2,86:1. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: hsl(224, 71%, 4%);    /* #030711 */
    --encre: hsl(210, 40%, 98%);  /* #f8fafc — 19,26:1 sur --fond, 17,83:1 sur
                                     --carte, 15,72:1 sur --attenue */
    --carte: hsl(224, 45%, 9%);   /* #0d1221 : un cran au-dessus du fond */
    --trait: hsl(224, 20%, 20%);  /* #292e3d */
    --attenue: hsl(224, 30%, 14%); /* #191f2e */
    --gris: hsl(220, 12%, 64%);   /* #98a0ae — 7,65:1 sur --fond, 7,08:1 sur --carte,
                                     6,25:1 sur --attenue ; ≥ 5,92:1 sur les fonds
                                     sémantiques */
    --accent: hsl(263, 70%, 72%); /* #ac86ea — 7,05:1 sur --fond, 6,53:1 sur --carte,
                                     5,76:1 sur --attenue */
    --accent-encre: hsl(224, 71%, 4%); /* 7,05:1 sur --accent */
    --neutre-trait: hsl(224, 12%, 34%);
    --refus-fond: #2a1a15;
    --refus-trait: #e99277;   /* 7,03:1 sur --refus-fond, 7,86:1 sur --carte */
    --refus-encre: #2a1a15;   /* 7,03:1 — en sombre le refus ÉCLAIRCIT, donc
                                 l'encre qu'il porte doit foncer. Du blanc ici
                                 tombait à 2,37:1 : le bouton « arrêter » était
                                 illisible. */
    --succes-fond: #17251d;
    --succes-trait: #6fc294;  /* 7,45:1 sur --succes-fond, 8,72:1 sur --carte */
    --attention-fond: #2a2312;
    --attention-trait: #e3b35e; /* 8,07:1 sur --attention-fond, 9,66:1 sur --carte */
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Rien ne doit jamais déborder en largeur : c'est le seul défaut de mise en
     page qu'un utilisateur de téléphone ne pardonne pas. */
  overflow-x: hidden;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 24px var(--gouttiere) 64px;
}

h1 { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 0 0 6px; font-weight: 600; }

.chapeau { color: var(--gris); margin: 0 0 20px; }

.tete {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* --- le bandeau : ce que le Cerveau vient de dire ------------------------ */

.bandeau {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--succes-trait);
  background: var(--succes-fond);
  border-radius: 0 8px 8px 0;
  /* Le Cerveau compose ses confirmations sur plusieurs lignes. On les garde
     telles quelles plutôt que de les aplatir. */
  white-space: pre-wrap;
}
.bandeau.refus { border-left-color: var(--refus-trait); background: var(--refus-fond); }

/* --- une carte de réglage ------------------------------------------------ */

.reglage {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.cle, .origine { margin: 0 0 12px; color: var(--gris); font-size: 0.85rem; }
.origine { margin-top: -8px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--attenue);
  border: 1px solid var(--trait);
  border-radius: 5px;
  padding: 1px 5px;
  /* Une sphère longue ou un nom composé ne doit pas pousser la carte hors de
     l'écran : on coupe le mot plutôt que la page. */
  overflow-wrap: anywhere;
}

.vide { color: var(--gris); font-style: italic; }

.choix {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--trait);
  cursor: pointer;
}
.choix:first-of-type { border-top: none; }
.choix input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--accent); }

.defaut {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  white-space: nowrap;
}

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

label { display: block; font-weight: 500; margin-bottom: 6px; }
label.choix { font-weight: 400; margin-bottom: 0; }

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
}
input[type="text"]:focus, input[type="password"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.gestes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

button {
  font: inherit;
  font-weight: 500;
  /* 44 px de haut : la cible tactile minimale. En dessous, on rate le bouton
     un coup sur trois sur un téléphone. */
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-encre);
  cursor: pointer;
}
button.discret { background: transparent; color: var(--gris); border-color: var(--trait); }

form + form { margin: 0; }
.tete form { margin: 0; }

a { color: var(--accent); }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

form[action="/entrer"] button { margin-top: 12px; }

/* Le seul ajustement desktop : le bouton d'entrée passe à côté du champ. */
@media (min-width: 480px) {
  form[action="/entrer"] { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  form[action="/entrer"] label { grid-column: 1 / -1; margin-bottom: 0; }
  form[action="/entrer"] button { margin-top: 0; }
}