/* =============================================================================
   Exaprint — Test de positionnement IA
   Feuille de styles

   Direction : la feuille de presse, croisant les deux marques. D'Exaprint le
   système visuel — les quatre encres relevées sur leur logo, les hirondelles
   aux angles, un géométrique courbe dans la lignée de Styrène. D'Opens le
   registre — bas de casse, sans jargon, commandes arrondies plutôt
   qu'administratives.

   Une règle : capitales et chasse fixe pour les marginalia, bas de casse pour
   ce qui s'adresse à une personne.
   Une seule pièce spectaculaire : la gamme de contrôle (grille d'encrage 3×6).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  color-scheme: light;

  /* --------------------------------------------------------------------
     PALETTE

     Les quatre encres sont relevées sur le logo officiel Exaprint
     (logo_exparint.svg) : la quadrichromie retouchée pour l'écran dont parle
     leur charte — cyan saturé, magenta adouci en rose, jaune éclairci en or,
     noir allégé.

     Elles sont pensées pour du flat design, pas pour du texte : sur blanc, le
     cyan tient 1,8:1, le jaune 1,5:1, le rose 3,4:1, là où WCAG AA exige
     4,5:1 pour du texte et 3:1 pour un élément d'interface porteur de sens.
     D'où deux registres, et un seul jeu de teintes : les encres de marque
     servent aux aplats et aux repères, leurs variantes assombries — même
     teinte, luminosité descendue — portent le texte et les commandes.
     -------------------------------------------------------------------- */

  /* Supports */
  --stock: #edeef0;
  --stock-fonce: #dcdee2;
  --feuille: #ffffff;

  /* Les quatre encres de marque — aplats et repères uniquement */
  --cyan: #33d1ff;
  --rose: #ff3d77;
  --jaune: #ffc846;
  --noir: #323232;           /* 12,8:1 sur blanc, lisible tel quel */

  /* Variantes portantes — même teinte, contraste conforme */
  --cyan-encre: #076a8c;     /* 6,1:1 · teinte 195°, celle du cyan */
  --rose-encre: #c4104e;     /* 5,9:1 · teinte 339°, celle du rose */
  --jaune-fonce: #f5b92e;    /* survol du bouton · noir dessus 7,2:1 */
  --noir-doux: #4a4e56;      /* texte secondaire · 8,2:1 */

  /* Filets */
  --filet: #d2d5da;
  --filet-fort: #9ba0a8;

  /* Encre du bloc en cours — surchargée par [data-encre] */
  --encre: var(--cyan);
  --encre-texte: var(--cyan-encre);

  /* --------------------------------------------------------------------
     TYPOGRAPHIE
     Exaprint compose en Styrène (Production Type), sans-serif géométrique et
     courbe, sous licence commerciale. Outfit en est le plus proche parent
     librement diffusable : même géométrie, mêmes courbes ouvertes. À
     remplacer par Styrène si Exaprint fournit la licence web.
     -------------------------------------------------------------------- */
  --f-affiche: 'Outfit', 'Century Gothic', 'Avenir Next', sans-serif;
  --f-corps: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --f-marge: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* Rythme. La feuille reste d'équerre — c'est du papier. Les commandes
     s'arrondissent un peu : c'est l'inflexion Opens, un formulaire d'entreprise
     n'a pas besoin d'être intimidant. */
  --gouttiere: 1.5rem;
  --rayon: 6px;
  --transition: 120ms ease-out;
}

/* Une couleur, un rôle. C'est ce qui rend le code lisible sans légende :
     encre du bloc  →  où vous êtes (gamme, filet d'en-tête, récapitulatif)
     cyan foncé     →  votre choix, les champs actifs, les liens
     rose foncé     →  une erreur, et rien d'autre
     jaune          →  l'action à faire, et rien d'autre
     noir           →  le texte et l'anneau de focus
   L'encre du bloc ne colore donc jamais un état : sinon, sur le bloc B, une
   question sélectionnée et une question en erreur seraient toutes deux roses. */
[data-encre='cyan'] { --encre: var(--cyan); --encre-texte: var(--cyan-encre); }
[data-encre='rose'] { --encre: var(--rose); --encre-texte: var(--rose-encre); }
[data-encre='noir'] { --encre: var(--noir); --encre-texte: var(--noir); }

/* ----------------------------------------------------------------- 2. Base */

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

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

body {
  margin: 0;
  background: var(--stock);
  color: var(--noir);
  font-family: var(--f-corps);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  /* Trame très discrète : la texture d'un papier non couché. */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(43, 46, 51, 0.05) 1px, transparent 0);
  background-size: 4px 4px;
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--cyan-encre);
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}
a:hover { color: var(--rose-encre); }

/* Anneau de focus en noir, et non dans une encre de couleur : le rouge sert
   déjà à signaler les erreurs, et un même signal ne peut pas dire deux choses.
   Le noir tient 13,6:1 sur le fond, y compris par-dessus le bouton bleu. */
:focus-visible {
  outline: 3px solid var(--noir);
  outline-offset: 2px;
  border-radius: 1px;
}

::selection { background: #cdeeff; color: var(--noir); }

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

.lien-evitement {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  background: var(--noir);
  color: var(--feuille);
  font: 500 0.8125rem/1 var(--f-marge);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--transition);
}
.lien-evitement:focus { top: 0.5rem; color: var(--feuille); }

/* Étiquette de marge : les mentions techniques imprimées hors format. */
.marque {
  font: 500 0.6875rem/1.4 var(--f-marge);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--noir-doux);
}

/* ---------------------------------------------------------------- 3. Cadre */

/* En dessous de 60rem, disposition en blocs : un élément sticky placé dans une
   grille est borné à sa zone de grille et n'aurait aucune course de défilement.
   La grille à deux colonnes n'arrive qu'au palier large, où `align-items: start`
   rend la marge collante sur toute la hauteur de la ligne. */
.cadre {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gouttiere) 5rem;
}

/* La marge technique : à gauche sur grand écran, en bandeau collant sinon. */
.marge {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Débord jusqu'aux bords de l'écran : le bandeau collant ne doit pas laisser
     défiler le contenu dans les gouttières. */
  margin: 0 calc(var(--gouttiere) * -1);
  padding: 0.75rem var(--gouttiere);
  background: var(--stock);
  background: color-mix(in srgb, var(--stock) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--filet);
}

.marge__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.625rem;
}

/* Sur l'accueil, la marge n'a rien après l'en-tête : ni filet ni marge basse
   à laisser pendre. Deux classes, donc l'emporte aussi au palier large. */
.marge__entete:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.marge__logo {
  font: 800 0.9375rem/1 var(--f-affiche);
  font-stretch: 118%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.marge__logo span { color: var(--noir-doux); font-weight: 400; }

/* La feuille */
.feuille {
  position: relative;
  background: var(--feuille);
  border: 1px solid var(--filet);
  box-shadow: 0 1px 0 var(--stock-fonce), 0 18px 40px -28px rgba(43, 46, 51, 0.45);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: 2rem;
}

/* Les hirondelles — signature de la charte Exaprint. Ce sont les traits de
   coupe : deux filets par angle, alignés sur les bords de rognage et posés
   dans le fond perdu, jamais jointifs. Huit dégradés d'un pixel, donc aucun
   nœud décoratif dans le DOM et rien à masquer aux lecteurs d'écran. */
.feuille::before {
  content: '';
  position: absolute;
  inset: -1rem;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--filet-fort), var(--filet-fort)),
    linear-gradient(var(--filet-fort), var(--filet-fort)),
    linear-gradient(var(--filet-fort), var(--filet-fort)),
    linear-gradient(var(--filet-fort), var(--filet-fort)),
    linear-gradient(var(--filet-fort), var(--filet-fort)),
    linear-gradient(var(--filet-fort), var(--filet-fort)),
    linear-gradient(var(--filet-fort), var(--filet-fort)),
    linear-gradient(var(--filet-fort), var(--filet-fort));
  background-size:
    1px 0.625rem, 0.625rem 1px,   /* haut gauche : vertical, horizontal */
    1px 0.625rem, 0.625rem 1px,   /* haut droit */
    1px 0.625rem, 0.625rem 1px,   /* bas gauche */
    1px 0.625rem, 0.625rem 1px;   /* bas droit */
  background-position:
    left 1rem top 0,      left 0 top 1rem,
    right 1rem top 0,     right 0 top 1rem,
    left 1rem bottom 0,   left 0 bottom 1rem,
    right 1rem bottom 0,  right 0 bottom 1rem;
}

/* ---------------------------------------- 4. Gamme de contrôle (signature) */

.gamme { display: grid; gap: 0.375rem; }

.gamme__bande {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: center;
  gap: 0.5rem;
}

.gamme__lettre {
  font: 500 0.6875rem/1 var(--f-marge);
  color: var(--noir-doux);
  text-align: center;
}
.gamme__bande[data-actif='oui'] .gamme__lettre {
  color: var(--noir);
  font-weight: 500;
}

.gamme__cases {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gamme__case {
  height: 0.875rem;
  border: 1px solid var(--filet-fort);
  background: var(--feuille);
  /* L'encrage d'une case est le seul mouvement de la page : assez lent pour
     qu'on le perçoive du coin de l'œil en répondant, jamais assez pour attendre. */
  transition: background-color 260ms ease-out, border-color 260ms ease-out;
}
.gamme__case[data-etat='remplie'] {
  background: var(--encre);
  border-color: var(--encre);
}
/* La case en cours reste vierge, cerclée de noir : c'est une cible, pas un
   remplissage. Le jaune est réservé à l'action, il ne peut pas dire ça aussi. */
.gamme__case[data-etat='courante'] {
  background: var(--feuille);
  border: 2px solid var(--noir);
}

.gamme__legende {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.625rem;
}

/* Variante sommaire : chaque ligne porte le titre de son bloc, les cases
   passent à l'échelle de la feuille. Sélecteurs à deux classes, donc ils
   l'emportent sur la version de marge sans avoir à se surenchérir. */
.gamme--sommaire { gap: 0; }

.gamme--sommaire .gamme__bande {
  display: block;
  padding: 1.125rem 0;
  border-top: 1px solid var(--filet);
}
.gamme--sommaire .gamme__bande:last-child { border-bottom: 1px solid var(--filet); }

.gamme--sommaire .gamme__etiquette {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin: 0 0 0.75rem;
}

.gamme--sommaire .gamme__lettre {
  font: 500 0.6875rem/1.4 var(--f-marge);
  letter-spacing: 0.14em;
  color: var(--encre-texte);
  text-align: left;
}

.gamme__titre {
  font-family: var(--f-affiche);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2.6vw, 1.375rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.gamme--sommaire .gamme__case { height: 2.25rem; }

@media (min-width: 45rem) {
  .gamme--sommaire .gamme__bande {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
  }
  .gamme--sommaire .gamme__etiquette { margin-bottom: 0; }
}

/* -------------------------------------------------------------- 5. Accueil */

/* Règle de voix : les marginalia parlent en capitales et en chasse fixe — ce
   qu'on imprime hors format sur une feuille de presse. Le titre, lui, s'adresse
   à une personne : bas de casse, dans la display. Crier « TEST » à quelqu'un
   qu'on veut rassurer serait un contresens. */

.affiche { margin-bottom: 3rem; }

.affiche__sur-titre {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--filet);
}

.affiche__titre {
  font-family: var(--f-affiche);
  font-weight: 800;
  font-size: clamp(2.5rem, 8.5vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.affiche__accroche {
  max-width: 42ch;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  line-height: 1.5;
  color: var(--noir-doux);
}

/* La gamme en grand : sommaire du test autant que jauge. Pas d'encadré —
   elle se pose sur la feuille, elle n'est pas une vignette de démonstration. */
.sommaire { margin-bottom: 3rem; }

.sommaire__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.25rem;
}

.notice {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--encre);
  background: #f4f5f6;
  background: color-mix(in srgb, var(--stock) 55%, var(--feuille));
}
.notice > .marque { display: block; margin-bottom: 0.5rem; }

.details-rgpd {
  margin-top: 1.5rem;
  border-top: 1px solid var(--filet);
  padding-top: 1rem;
  font-size: 0.9375rem;
  color: var(--noir-doux);
}
.details-rgpd > summary {
  cursor: pointer;
  font: 500 0.6875rem/1.4 var(--f-marge);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--noir);
}
.details-rgpd > summary::marker { color: var(--filet-fort); }
.details-rgpd p { margin-top: 0.75rem; }

/* --------------------------------------------------------------- 6. Étapes */

.etape__entete {
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--encre);
}

.etape__titre {
  font-family: var(--f-affiche);
  font-weight: 800;
  font-size: clamp(1.75rem, 4.8vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-top: 0.625rem;
}

.etape__intro {
  margin-top: 0.75rem;
  color: var(--noir-doux);
  max-width: 48ch;
}

/* ------------------------------------------------------------ 7. Questions */

.question {
  border: 0;
  margin: 0 0 3rem;
  padding: 0;
  min-width: 0; /* corrige le débordement des fieldset en grille */
}
.question:last-of-type { margin-bottom: 2rem; }

.question__legende {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 1rem;
}

/* Numéro en gris et non dans l'encre du bloc : la couleur du bloc se lit déjà
   dans la gamme et le filet d'en-tête, la répéter à chaque question ne dirait
   rien de neuf et entrerait en concurrence avec le rose des erreurs. */
.question__numero {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--noir-doux);
}

.question__intitule {
  display: block;
  font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
  font-weight: 650;
  line-height: 1.35;
  text-wrap: pretty;
}

.question__aide {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--noir-doux);
  font-weight: 400;
}

.question__facultatif {
  font: 500 0.6875rem/1 var(--f-marge);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--noir-doux);
  border: 1px solid var(--filet);
  padding: 0.25rem 0.4375rem;
  margin-left: 0.5rem;
  vertical-align: 0.15em;
  white-space: nowrap;
}

.question[data-invalide='oui'] .question__intitule { color: var(--rose-encre); }

.question__erreur {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #fdeef1;
  background: color-mix(in srgb, var(--rose) 10%, var(--feuille));
  border-left: 3px solid var(--rose);
  color: var(--rose-encre);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ---------------------------------------------- 8. Choix uniques/multiples */

.choix { display: grid; gap: 0.375rem; }

.choix__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-height: 2.75rem;          /* cible tactile confortable */
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--feuille);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.choix__item:hover { border-color: var(--filet-fort); background: color-mix(in srgb, var(--stock) 35%, var(--feuille)); }

/* L'état coché/focus est posé par app.js (data-coche / data-focus) plutôt que
   déduit en CSS : une seule source de vérité, et aucun risque que la sélection
   devienne invisible sur un navigateur ancien. */
/* La sélection est identique dans les trois blocs : un état s'apprend une
   fois, il ne change pas de couleur en cours de route. Filet en cyan foncé
   (3:1 exigé pour un élément porteur de sens), fond teinté du cyan de marque. */
.choix__item[data-coche='oui'] {
  border-color: var(--cyan-encre);
  background: #eaf8fe;
  background: color-mix(in srgb, var(--cyan) 16%, var(--feuille));
}
.choix__item[data-focus='oui'] {
  outline: 3px solid var(--noir);
  outline-offset: 2px;
}
.choix__item[data-bloque='oui'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.choix__item input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

/* La marque : mire de repérage (choix unique) ou case d'encrage (multiple). */
.choix__marque {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.0625rem;
  color: var(--filet-fort);
  transition: color var(--transition);
}
.choix__item[data-coche='oui'] .choix__marque { color: var(--cyan-encre); }

.choix__marque .plein { opacity: 0; transition: opacity var(--transition); }
.choix__item[data-coche='oui'] .choix__marque .plein { opacity: 1; }

.choix__texte { flex: 1 1 auto; }
.choix__item[data-coche='oui'] .choix__texte { font-weight: 600; }

/* Champ « Autre : … » */
.autre {
  display: grid;
  gap: 0.375rem;
  margin: 0.375rem 0 0 2.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--filet);
}

/* --------------------------------------------- 9. Échelles 1–5 et matrices */

.echelle { display: grid; gap: 0.625rem; }

.echelle__pistes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.375rem;
}

.echelle__point {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.25rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--feuille);
  font: 600 1.0625rem/1 var(--f-marge);
  color: var(--noir-doux);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}
.echelle__point:hover { border-color: var(--filet-fort); background: color-mix(in srgb, var(--stock) 40%, var(--feuille)); }

.echelle__point input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Fond en --encre-texte et non --encre : le chiffre est du texte de petite
   taille, il lui faut 4,5:1. Le cyan clair n'atteindrait que 3,5:1. */
.echelle__point[data-coche='oui'] {
  background: var(--cyan-encre);
  border-color: var(--cyan-encre);
  color: var(--feuille);
}
.echelle__point[data-focus='oui'] {
  outline: 3px solid var(--noir);
  outline-offset: 2px;
}

/* Densité croissante : la teinte du fond monte de gauche à droite,
   comme une gamme d'encrage 20 → 100 %. Purement décoratif. */
.echelle__point[data-valeur='1']::after,
.echelle__point[data-valeur='2']::after,
.echelle__point[data-valeur='3']::after,
.echelle__point[data-valeur='4']::after,
.echelle__point[data-valeur='5']::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--encre);
}
.echelle__point[data-valeur='1']::after { opacity: 0.2; }
.echelle__point[data-valeur='2']::after { opacity: 0.4; }
.echelle__point[data-valeur='3']::after { opacity: 0.6; }
.echelle__point[data-valeur='4']::after { opacity: 0.8; }
.echelle__point[data-valeur='5']::after { opacity: 1; }
.echelle__point[data-coche='oui']::after { background: var(--feuille); opacity: 1; }

.echelle__ancres {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.echelle__ancres span { max-width: 14ch; }
.echelle__ancres span:last-child { text-align: right; }

/* Matrice : une ligne = un groupe de boutons radio à part entière. */
.matrice { display: grid; gap: 1.25rem; }

.matrice__ligne {
  border: 0;
  margin: 0;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--filet);
  min-width: 0;
}
.matrice__ligne:last-child { border-bottom: 0; padding-bottom: 0; }

.matrice__enonce {
  display: block;
  padding: 0;
  margin-bottom: 0.75rem;
  font-weight: 550;
  line-height: 1.4;
}

/* ------------------------------------------------------ 10. Champs de saisie */

.champ { display: grid; gap: 0.375rem; }

.champ__etiquette { font-weight: 600; font-size: 0.9375rem; }

.champ__aide { font-size: 0.875rem; color: var(--noir-doux); }

.champ input[type='text'],
.champ input[type='email'],
.champ select,
.champ textarea,
.autre input[type='text'] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: var(--noir);
  background: var(--feuille);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.55;
}
.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--noir-doux); }
.champ input:focus,
.champ select:focus,
.champ textarea:focus,
.autre input:focus {
  border-color: var(--cyan-encre);
  box-shadow: inset 0 0 0 1px var(--cyan-encre);
}
.champ [aria-invalid='true'] { border-color: var(--rose); }

.champ__compteur {
  justify-self: end;
  font: 400 0.75rem/1 var(--f-marge);
  color: var(--noir-doux);
}

/* ------------------------------------------------------------- 11. Boutons */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}
.actions__espace { flex: 1 1 auto; }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font: 600 0.9375rem/1 var(--f-corps);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), transform var(--transition);
}
.bouton:active { transform: translateY(1px); }

/* Le jaune de marque en aplat, texte noir dessus : 8,3:1, et c'est la seule
   chose jaune de la page. L'action à faire ne se cherche pas. */
.bouton--primaire {
  background: var(--jaune);
  color: var(--noir);
}
.bouton--primaire:hover { background: var(--jaune-fonce); }

.bouton--secondaire {
  background: var(--feuille);
  border-color: var(--filet-fort);
  color: var(--noir);
}
.bouton--secondaire:hover { border-color: var(--noir); }

.bouton--discret {
  background: transparent;
  color: var(--noir-doux);
  padding: 0 0.5rem;
  min-height: 2.75rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bouton--discret:hover { color: var(--rose-encre); }

.bouton[disabled] { opacity: 0.55; cursor: progress; }

/* -------------------------------------------------------- 12. Récapitulatif */

.recap__bloc { margin-bottom: 2rem; }
.recap__bloc-titre {
  font: 500 0.6875rem/1.4 var(--f-marge);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--noir);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--encre);   /* l'encre du bloc, dans le filet */
  margin-bottom: 0.5rem;
}

.recap__entree {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  align-items: start;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--filet);
}
.recap__question { font-weight: 600; font-size: 0.9375rem; }
.recap__reponse {
  grid-column: 1 / -1;
  color: var(--noir-doux);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.recap__reponse--vide { color: var(--rose-encre); font-style: italic; }
.recap__modifier {
  grid-row: 1;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;      /* cible tactile : ce bouton sert vraiment */
  margin-top: -0.5rem;
  font-size: 0.875rem;
  background: none;
  border: 0;
  padding: 0 0.25rem;
  color: var(--cyan-encre);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recap__modifier:hover { color: var(--rose-encre); }

/* --------------------------------------------------- 13. Erreurs et statuts */

.resume-erreurs {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--rose);
  background: #fdf2f4;
  background: color-mix(in srgb, var(--rose) 7%, var(--feuille));
}
.resume-erreurs__titre {
  font-size: 1.0625rem;
  color: var(--rose-encre);
  margin-bottom: 0.5rem;
}
.resume-erreurs ul { margin: 0; padding-left: 1.25rem; }
.resume-erreurs li { margin-top: 0.25rem; }
.resume-erreurs a { color: var(--rose-encre); }

.annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.bandeau-reprise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--stock);
}

/* ---------------------------------------------------------- 14. Confirmation */

.fin { text-align: left; max-width: 46ch; }
.fin__gamme { margin-bottom: 2rem; }
.fin__gamme .gamme__case { height: 1.5rem; }
.fin__titre {
  font-family: var(--f-affiche);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  margin-bottom: 1rem;
}

.bloc-code {
  max-height: 18rem;
  overflow: auto;
  padding: 1rem;
  background: var(--noir);
  color: #e8eaed;
  font: 400 0.75rem/1.6 var(--f-marge);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ 15. Pied de page */

.pied {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem var(--gouttiere) 3rem;
  border-top: 1px solid var(--filet);
}
.pied__ligne { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* --------------------------------------------------------------- 16. Écrans */

@media (min-width: 60rem) {
  .cadre {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 3.5rem;
    align-items: start;
    padding-top: 3rem;
  }

  .marge {
    position: sticky;
    top: 3rem;
    margin: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border-bottom: 0;
    border-right: 1px solid var(--filet);
    padding-right: 1.75rem;
  }
  .marge__entete {
    display: block;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--filet);
  }
  .marge__logo { font-size: 1.0625rem; margin-bottom: 0.375rem; }

  /* Portée à la marge : à égalité de spécificité, ces règles écraseraient
     sinon .gamme--sommaire, déclarée plus haut dans le fichier. */
  .marge .gamme { gap: 0.5rem; }
  .marge .gamme__case { height: 1.125rem; }
  .marge .gamme__legende { display: block; margin-top: 1rem; }

  .feuille { margin-top: 0; }

  .choix { gap: 0.4375rem; }

  /* Matrice en tableau : énoncé à gauche, cinq cibles à droite. */
  .matrice--large .matrice__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: center;
    gap: 1.5rem;
  }
  .matrice--large .matrice__enonce { margin-bottom: 0; }
  .matrice--large .echelle__ancres { display: none; }
  .matrice__entetes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .matrice__entetes-pistes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.375rem;
    text-align: center;
  }
}

@media (max-width: 59.999rem) {
  .matrice__entetes { display: none; }
}

/* ------------------------------------------- 17. Préférences et modes forcés */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .choix__item,
  .echelle__point,
  .feuille,
  .gamme__case { border: 1px solid CanvasText; }

  .choix__item[data-coche='oui'],
  .echelle__point[data-coche='oui'] {
    border: 3px solid Highlight;
    background: Canvas;
  }
  .echelle__point[data-coche='oui'] { color: CanvasText; }

  .gamme__case[data-etat='remplie'] { background: CanvasText; }
  .gamme__case[data-etat='courante'] { background: Highlight; }

  /* Les hirondelles sont purement décoratives : en contrastes forcés elles ne
     rendraient que du bruit autour de la feuille. */
  .feuille::before { display: none; }

  .choix__marque { forced-color-adjust: auto; }
  .bouton--primaire { border-color: CanvasText; }
  body { background-image: none; }
}

@media print {
  .marge, .actions, .lien-evitement, .bandeau-reprise { display: none; }
  body { background: #fff; }
  .feuille { border: 0; box-shadow: none; padding: 0; }
}