/*
 * LA FEUILLE DE STYLE DE « RELECTURE » — connexion (tâche 734) et écran de
 * relecture (tâche 735, composition de la maquette validée par Kevin,
 * orchestration/maquettes/relecture-2026-10-26/). Écran dérivé : champs, boutons,
 * bandeaux reprennent annexes/demandes/styles.css. Jetons recopiés de
 * app/globals.css ; jetons.garde.test.ts les compare. Aucune valeur visuelle
 * en clair hors de :root : là où la maquette écrivait des pixels, un jeton ou
 * une combinaison de jetons (déclarée au rapport) les remplace.
 */
:root {
  --fond: oklch(95% 0.02 222);
  --surface: oklch(99% 0.004 220);
  --surface-desactivee: oklch(91% 0.014 220);
  --survol: oklch(92.5% 0.028 220);
  --bordure: oklch(87% 0.025 220);
  --texte: oklch(27% 0.035 245);
  --texte-attenue: oklch(46% 0.03 240);
  --texte-tres-attenue: oklch(65% 0.02 235);

  --accent: oklch(52% 0.105 224);
  --accent-fort: oklch(44% 0.095 230);
  --accent-subtil: oklch(89% 0.05 205);
  --accent-fond: oklch(96.5% 0.02 205);
  --accent-bordure: oklch(85% 0.06 210);

  --danger: oklch(52.5% 0.13 28);
  --danger-fond: oklch(93% 0.03 25);
  --succes: oklch(62% 0.06 150);
  --succes-fond: oklch(92% 0.03 150);
  --succes-texte: oklch(32% 0.05 150);
  --avertissement: oklch(48% 0.08 60);
  --avertissement-fond: oklch(93% 0.04 70);

  --police-affichage: serif;
  --police-texte: sans-serif;

  --taille-2: 12.5px;
  --taille-3: 13.5px;
  --taille-4: 14.5px;
  --taille-5: 16px;
  --taille-6: 19px;
  --taille-8: 27px;

  --graisse-corps: 400;
  --graisse-titre: 600;
  --graisse-forte: 700;
  --interligne-titre: 1.15;
  --interligne-corps: 1.5;
  --interlettrage-surtitre: 0.5px;

  --espace-2: 2px;
  --espace-4: 4px;
  --espace-6: 6px;
  --espace-8: 8px;
  --espace-10: 10px;
  --espace-12: 12px;
  --espace-14: 14px;
  --espace-16: 16px;
  --espace-20: 20px;
  --espace-24: 24px;
  --espace-32: 32px;
  --espace-48: 48px;
  --padding-champ: 12px 14px;
  --padding-bouton: 14px 24px;
  --padding-section: 32px;

  --largeur-page: 1180px;
  --largeur-lecture: 640px;
  --largeur-carte-auth: 440px;

  --rayon-8: 8px;
  --rayon-12: 12px;
  --rayon-16: 16px;
  --rayon-24: 24px;
  --rayon-pilule: 999px;

  --epaisseur-bordure: 1px;
  --epaisseur-bordure-controle: 1.5px;

  --ombre-1: 0 2px 12px -6px oklch(27% 0.035 245 / 0.1);
  --ombre-2: 0 12px 30px -10px oklch(27% 0.035 245 / 0.3);
  --ombre-accent: 0 8px 18px -8px oklch(52% 0.105 224 / 0.55);

  --focus-contour: 2px solid var(--accent);
  --focus-decalage: 2px;

  --bp-poche: 640px;

  --duree-courte: 150ms;
  --courbe-entree: ease-out;

  --cible-tactile: 34px;
  --cible-tactile-principale: 44px;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-4);
  line-height: var(--interligne-corps);
}

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

.titre {
  margin: 0;
  font-family: var(--police-affichage);
  font-size: var(--taille-8);
  font-weight: var(--graisse-titre);
  line-height: var(--interligne-titre);
}

.connexion {
  display: flex;
  justify-content: center;
  padding: var(--espace-24) var(--espace-16) var(--espace-48);
}

.carte-auth {
  display: flex;
  flex-direction: column;
  gap: var(--espace-14);
  width: 100%;
  max-width: var(--largeur-carte-auth);
  padding: var(--padding-section);
  border-radius: var(--rayon-24);
  background: var(--surface);
  box-shadow: var(--ombre-2);
}

.carte-auth .titre {
  text-align: center;
}

.verification {
  display: flex;
  flex-direction: column;
  gap: var(--espace-16);
  max-width: var(--largeur-carte-auth);
  margin: 0 auto;
  padding: var(--espace-24) var(--espace-16);
}

.verification table {
  border-collapse: collapse;
  background: var(--surface);
}

.verification th,
.verification td {
  padding: var(--espace-6) var(--espace-12);
  border-bottom: var(--epaisseur-bordure) solid var(--bordure);
  text-align: left;
}

.label {
  display: block;
  margin-bottom: var(--espace-6);
  color: var(--texte-attenue);
  font-size: var(--taille-3);
  font-weight: var(--graisse-titre);
}

.champ {
  display: block;
  width: 100%;
  min-height: var(--cible-tactile-principale);
  padding: var(--padding-champ);
  border: var(--epaisseur-bordure-controle) solid var(--bordure);
  border-radius: var(--rayon-12);
  background: var(--surface);
  color: var(--texte);
  font-family: inherit;
  font-size: var(--taille-5);
}

.bouton-principal,
.bouton-sobre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible-tactile-principale);
  font-family: inherit;
  font-size: var(--taille-4);
  cursor: pointer;
}

.bouton-principal {
  padding: var(--padding-bouton);
  border: none;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--surface);
  font-weight: var(--graisse-forte);
  box-shadow: var(--ombre-accent);
}

.bouton-sobre {
  padding: var(--espace-8) var(--espace-16);
  border: var(--epaisseur-bordure-controle) solid var(--bordure);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--texte);
  font-weight: var(--graisse-titre);
}

.erreur-bandeau {
  margin: 0;
  padding: var(--espace-8) var(--espace-12);
  border-radius: var(--rayon-12);
  background: var(--danger-fond);
  color: var(--danger);
}

.avertissement-bandeau {
  margin: 0;
  padding: var(--espace-8) var(--espace-12);
  border-radius: var(--rayon-12);
  background: var(--avertissement-fond);
  color: var(--avertissement);
}

/* ---- L'écran de relecture (tâche 735) : toute la largeur, pas `--largeur-page`. ---- */

.page {
  padding: var(--espace-16) var(--espace-24) var(--espace-32);
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-12);
  margin-bottom: var(--espace-16);
}

.compte {
  display: flex;
  align-items: center;
  gap: var(--espace-6);
  margin: 0;
  color: var(--texte-attenue);
  font-size: var(--taille-3);
}

.bouton-lien {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.bandeau {
  margin: 0 0 var(--espace-16);
  padding: var(--espace-10) var(--espace-16);
  border: var(--epaisseur-bordure) solid var(--avertissement);
  border-radius: var(--rayon-12);
  background: var(--avertissement-fond);
  font-size: var(--taille-3);
}

.bandeau[hidden] {
  display: none;
}

.aide {
  margin-bottom: var(--espace-16);
  padding: var(--espace-16) var(--espace-20);
  border: var(--epaisseur-bordure) solid var(--accent-bordure);
  border-radius: var(--rayon-16);
  background: var(--accent-fond);
}

.aide summary {
  cursor: pointer;
  font-size: var(--taille-5);
  font-weight: var(--graisse-titre);
}

.aide-grille {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--espace-16);
  margin-top: var(--espace-12);
  font-size: var(--taille-3);
}

.aide-grille h3 {
  margin: 0 0 var(--espace-4);
  font-size: var(--taille-3);
}

.aide-grille p {
  margin: 0 0 var(--espace-6);
}

.aide-grille ul {
  margin: 0;
  padding-left: var(--espace-16);
}

.onglets {
  display: flex;
  gap: var(--espace-4);
  margin-bottom: var(--espace-12);
  border-bottom: var(--epaisseur-bordure-controle) solid var(--bordure);
}

.onglet {
  padding: var(--espace-8) var(--espace-16);
  border: none;
  border-bottom: var(--espace-4) solid transparent;
  background: none;
  color: var(--texte-attenue);
  font: inherit;
  cursor: pointer;
}

.onglet[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--texte);
  font-weight: var(--graisse-titre);
}

.compteur {
  margin-left: var(--espace-6);
  padding: 0 var(--espace-8);
  border-radius: var(--rayon-pilule);
  background: var(--avertissement-fond);
  color: var(--avertissement);
  font-size: var(--taille-2);
  font-weight: var(--graisse-titre);
}

.compteur.zero {
  background: var(--succes-fond);
  color: var(--succes-texte);
}

.barre {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-16);
  padding: var(--espace-10) 0;
  background: var(--fond);
}

.barre .champ {
  display: inline-block;
  width: auto;
  min-height: var(--cible-tactile);
  padding: var(--espace-6) var(--espace-14);
  font-size: var(--taille-3);
}

.barre .recherche {
  flex: 0 1 40ch;
}

.choix {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-8);
  color: var(--texte-attenue);
  font-size: var(--taille-3);
}

.bilan {
  margin-left: auto;
  color: var(--texte-attenue);
  font-size: var(--taille-3);
}

.liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ligne {
  display: grid;
  grid-template-columns: 21ch repeat(3, minmax(0, 1fr));
  gap: var(--espace-12);
  padding: var(--espace-12);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-left-width: var(--espace-6);
  border-radius: var(--rayon-12);
  background: var(--surface);
  box-shadow: var(--ombre-1);
  scroll-margin-top: calc(var(--cible-tactile-principale) + var(--espace-24));
}

/* Une carte du contenu du test : un seul bloc, à la place des trois langues. */
.ligne.contenu .langue {
  grid-column: 2 / -1;
}

.ligne.a-revoir {
  border-left-color: var(--avertissement);
}

.ligne.en-attente {
  border-left-color: var(--accent);
}

.ligne.validee {
  border-left-color: var(--succes);
}

.ligne.cible {
  outline: var(--espace-4) solid var(--accent);
  outline-offset: var(--espace-2);
}

.tete {
  display: flex;
  flex-direction: column;
  gap: var(--espace-6);
  min-width: 0;
  font-size: var(--taille-3);
}

.numero {
  color: var(--accent);
  font-size: var(--taille-5);
  font-weight: var(--graisse-forte);
  text-decoration: none;
}

.numero:hover {
  text-decoration: underline;
}

.numero.sans {
  color: var(--texte-attenue);
  font-size: var(--taille-3);
  font-weight: var(--graisse-titre);
}

.lieu {
  color: var(--texte-attenue);
  overflow-wrap: anywhere;
}

.cas {
  color: var(--texte-tres-attenue);
  font-size: var(--taille-2);
}

.lien-memo {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--taille-2);
  cursor: pointer;
  text-decoration: underline;
}

.langue {
  display: flex;
  flex-direction: column;
  gap: var(--espace-6);
  min-width: 0;
  padding: var(--espace-8) var(--espace-10);
  border-radius: var(--rayon-8);
}

.langue.etat-nouveau,
.langue.etat-modifie {
  background: var(--avertissement-fond);
}

.langue.etat-corrige {
  background: var(--accent-fond);
}

.langue-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-8);
}

.code {
  color: var(--texte-attenue);
  font-size: var(--taille-2);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettrage-surtitre);
}

.badge {
  padding: 0 var(--espace-8);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  font-size: var(--taille-2);
  font-weight: var(--graisse-titre);
  white-space: nowrap;
}

.badge.nouveau,
.badge.modifie {
  border-color: var(--avertissement);
  color: var(--avertissement);
}

.badge.corrige {
  border-color: var(--accent);
  color: var(--accent-fort);
}

.badge.valide {
  border-color: var(--succes);
  color: var(--succes-texte);
}

.texte {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ancien {
  margin: 0;
  white-space: pre-wrap;
  color: var(--texte-attenue);
  font-size: var(--taille-2);
  overflow-wrap: anywhere;
}

del {
  background: var(--danger-fond);
  color: var(--danger);
}

ins {
  background: var(--succes-fond);
  color: var(--succes-texte);
  font-weight: var(--graisse-titre);
  text-decoration: none;
}

.ligne textarea.champ {
  display: block;
  width: 100%;
  min-height: calc(var(--cible-tactile) + var(--espace-20));
  padding: var(--espace-6) var(--espace-14);
  font-size: var(--taille-3);
  resize: vertical;
}

.ligne textarea.champ.erreur {
  border-color: var(--danger);
}

.erreur-champ {
  margin: 0;
  color: var(--danger);
  font-size: var(--taille-2);
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-6);
}

.bouton {
  min-height: var(--cible-tactile);
  padding: var(--espace-4) var(--espace-12);
  border: var(--epaisseur-bordure-controle) solid var(--bordure);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: var(--taille-2);
  font-weight: var(--graisse-titre);
  cursor: pointer;
}

.bouton:hover {
  background: var(--survol);
}

.bouton:disabled {
  background: var(--surface-desactivee);
  color: var(--texte-tres-attenue);
  cursor: default;
}

.bouton.principal {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
  box-shadow: var(--ombre-accent);
}

.bouton.principal:hover {
  background: var(--accent-fort);
}

.bouton.principal:disabled {
  border-color: var(--bordure);
  background: var(--surface-desactivee);
  box-shadow: none;
}

.bouton.valider {
  border-color: var(--succes);
  color: var(--succes-texte);
}

.memo {
  grid-column: 2 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--espace-8);
}

.memo .champ {
  flex: 1;
  min-height: var(--cible-tactile-principale);
}

.memo-lu {
  grid-column: 2 / -1;
  margin: 0;
  padding: var(--espace-6) var(--espace-10);
  border-left: var(--espace-4) solid var(--accent-bordure);
  color: var(--texte-attenue);
  font-size: var(--taille-3);
  font-style: italic;
}

.vide {
  padding: var(--espace-24);
  border-radius: var(--rayon-12);
  background: var(--surface);
  color: var(--texte-attenue);
  text-align: center;
}

.suite {
  display: flex;
  justify-content: center;
  padding: var(--espace-16) 0;
}

.toast {
  position: fixed;
  bottom: var(--espace-20);
  left: 50%;
  max-width: var(--largeur-lecture);
  padding: var(--espace-10) var(--espace-16);
  border-radius: var(--rayon-12);
  background: var(--texte);
  box-shadow: var(--ombre-1);
  color: var(--surface);
  font-size: var(--taille-3);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity var(--duree-courte) var(--courbe-entree);
}

.toast.visible {
  opacity: 1;
}