/* app.css : mise en page du questionnaire (US-3.2).
   Les noms de classes suivent le contrat DOM D7 (docs/design/inc-2.md §8) :
   une retouche cosmétique est libre tant que ces noms ne changent pas.

   Refonte cosmétique 2026-07-28 (demande Yacine) : alignement STRICT sur le
   design system du site flowt.fr (src/styles/global.css du site) — bordures
   grises fines (#E4E4E0), AUCUNE ombre au repos, paddings généreux, micro-
   interactions au survol uniquement (lift translateY + ombre décalée douce,
   transitions cubic-bezier(0.22, 1, 0.36, 1)), inputs sur fond #FAFAF8 avec
   focus en anneau bleu doux, titres Inter 900 uppercase. */

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

:root {
  /* Tokens du site (global.css flowt.fr), locaux à cette feuille. */
  --gris-100: #f5f5f0;
  --gris-200: #e4e4e0;
  --gris-400: #a1a1a9;
  --gris-600: #6b6b73;
  --fond-input: #fafaf8;
  --bleu-soft: #ebf1ff;
  --ombre-hover: 6px 6px 0 #f0f0ec;
  --transition-site: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  margin: 0;
  font-family: var(--police-corps);
  color: var(--flowt-noir);
  background: var(--gris-100);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

/* ---------------------------------------------------------------- intro */
/* Bandeau A3 « carte-manifeste » (R7 tranchée, inc-2.md §9). Refonte : carte
   blanche à bordure grise fine, sans ombre (patron .flowt-card du site), la
   bande des 5 couleurs reste l'identité du questionnaire. Container query :
   le logo repasse dans le flux sous ~520 px de largeur de carte. */
#intro {
  container-type: inline-size;
  container-name: intro;
  margin-bottom: 3.5rem;
}

.intro-carte {
  --intro-pad: clamp(1.4rem, 6cqi, 3rem);
  position: relative;
  background: #fff;
  border: 2px solid var(--gris-200);
  padding: var(--intro-pad);
}

/* Bande des 5 couleurs d'accent, en bord supérieur de la carte : les
   couleurs viennent EXCLUSIVEMENT des custom properties --rot-couleur-i
   (D3/D7), jamais en dur ici. */
.intro-accents {
  display: flex;
  height: 8px;
  margin: calc(-1 * var(--intro-pad)) calc(-1 * var(--intro-pad)) var(--intro-pad);
}

.intro-accents-barre {
  flex: 1;
}

.intro-accents-barre--rot-0 { background: var(--rot-couleur-0); }
.intro-accents-barre--rot-1 { background: var(--rot-couleur-1); }
.intro-accents-barre--rot-2 { background: var(--rot-couleur-2); }
.intro-accents-barre--rot-3 { background: var(--rot-couleur-3); }
.intro-accents-barre--rot-4 { background: var(--rot-couleur-4); }

/* Logo Flowt (R7, amendé R15/R16) : constante de l'organisme, affiché
   d'office, en timbre haut-droit. R15 : AUCUN cadre/carte CSS (le PNG porte
   sa propre identité). R19 : logo droit, sans inclinaison. */
.intro-logo-flowt {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: clamp(56px, 10cqi, 80px);
  height: auto;
}

/* Logo client (R16, optionnel) : dans le flux, en tête de contenu
   au-dessus du kicker, droit, AUCUN cadre/carte CSS (R15). */
.intro-logo-client {
  display: block;
  height: clamp(56px, 10cqi, 88px);
  width: auto;
  margin: 0 0 1.25rem;
}

/* Kicker = .flowt-label du site : mono, 12px, uppercase, tracking large,
   bleu. */
.intro-kicker {
  margin: 0 0 0.9rem;
  font-family: var(--police-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--flowt-bleu);
}

/* Titre = grammaire .flowt-h2 du site : Inter 900, uppercase, tracking
   resserré, interligne compact. */
.intro-titre {
  margin: 0 0 1.1rem;
  max-width: 20ch;
  font-size: clamp(1.75rem, 6.5cqi, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-transform: uppercase;
}

/* Chip formation = .flowt-tag du site : mono 11px uppercase, bordure grise
   fine, plus d'ombre. */
.intro-formation {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
  padding: 5px 12px;
  font-family: var(--police-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid var(--gris-200);
  background: #fff;
}

.intro-formation-puce {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  flex: none;
  background: var(--flowt-bleu);
}

.intro-texte {
  margin: 0;
  max-width: 58ch;
  font-size: 1.02rem;
  color: var(--gris-600);
}

/* Bande d'anonymat : bleue, texte blanc, ferme la carte pleine largeur
   (R7 tranché, D7). */
.intro-anonymat {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 2rem calc(-1 * var(--intro-pad)) calc(-1 * var(--intro-pad));
  padding: 0.8rem var(--intro-pad);
  background: var(--flowt-bleu);
  color: #fff;
  font-family: var(--police-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Responsive (maquette de référence, aperçu mobile ~380 px) : sous
   520 px de largeur de carte, le logo repasse dans le flux. */
@container intro (max-width: 520px) {
  .intro-logo-flowt {
    position: static;
    display: block;
    margin: 0 0 1.25rem;
  }

  .intro-titre {
    max-width: none;
  }

  .intro-anonymat {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }
}

/* ---------------------------------------------------------------- blocs */
.bloc {
  margin-bottom: 3.5rem;
}

/* Titre de bloc = .flowt-h2 du site (Inter 900 uppercase, tracking serré),
   plus de liseré : la hiérarchie vient de la typo, comme sur le site. */
.bloc-titre {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Trait d'accent bleu sous le titre de bloc : rappel de la charte sans
   revenir au soulignement pleine largeur. */
.bloc-titre::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 0.55rem;
  background: var(--flowt-bleu);
}

.bloc-description {
  margin: 0 0 1.5rem;
  font-size: 0.98rem;
  color: var(--gris-600);
}

/* ------------------------------------------------------------ questions */
/* Carte question = .flowt-card du site : bordure grise fine, AUCUNE ombre au
   repos, padding généreux ; au survol la bordure passe au noir, la carte se
   soulève et une ombre décalée douce apparaît. */
.question {
  margin: 0 0 1.5rem;
  padding: 1.75rem 1.75rem 2rem;
  border: 2px solid var(--gris-200);
  border-radius: 0; /* angles nets, charte Flowt */
  background: #fff;
  transition: border-color var(--transition-site),
    transform var(--transition-site), box-shadow var(--transition-site);
}

@media (hover: hover) {
  .question:hover {
    border-color: var(--flowt-noir);
    transform: translateY(-3px);
    box-shadow: var(--ombre-hover);
  }
}

/* Couleur par rotation (D7) : chaque carte question porte la couleur de son
   numéro — liseré gauche au repos, bordure et ombre décalée assorties au
   survol (patron .hover-shadow / --hover-shadow-color du site). Les teintes
   douces dérivent de la couleur réelle via color-mix : les --rot-couleur-i
   restent surchargeables par campagne (D3) sans désynchroniser les ombres. */
.question:has(.q-num--rot-0) { border-left: 5px solid var(--rot-couleur-0); }
.question:has(.q-num--rot-1) { border-left: 5px solid var(--rot-couleur-1); }
.question:has(.q-num--rot-2) { border-left: 5px solid var(--rot-couleur-2); }
.question:has(.q-num--rot-3) { border-left: 5px solid var(--rot-couleur-3); }
.question:has(.q-num--rot-4) { border-left: 5px solid var(--rot-couleur-4); }

@media (hover: hover) {
  .question:has(.q-num--rot-0):hover { border-color: var(--rot-couleur-0); box-shadow: 6px 6px 0 color-mix(in srgb, var(--rot-couleur-0) 16%, #fff); }
  .question:has(.q-num--rot-1):hover { border-color: var(--rot-couleur-1); box-shadow: 6px 6px 0 color-mix(in srgb, var(--rot-couleur-1) 16%, #fff); }
  .question:has(.q-num--rot-2):hover { border-color: var(--rot-couleur-2); box-shadow: 6px 6px 0 color-mix(in srgb, var(--rot-couleur-2) 10%, #fff); }
  .question:has(.q-num--rot-3):hover { border-color: var(--rot-couleur-3); box-shadow: 6px 6px 0 color-mix(in srgb, var(--rot-couleur-3) 16%, #fff); }
  .question:has(.q-num--rot-4):hover { border-color: var(--rot-couleur-4); box-shadow: 6px 6px 0 color-mix(in srgb, var(--rot-couleur-4) 16%, #fff); }
}

/* La question marquée manquante garde son liseré rouge, prioritaire sur la
   rotation. */
.question--manquante,
.question--manquante:hover {
  border-color: #c0392b !important;
}

.question-legende {
  padding: 0;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.35;
}

/* Numéro de question : JetBrains Mono (D5), couleur par rotation (D7). */
.q-num {
  margin-right: 0.6rem;
  font-family: var(--police-mono);
  font-weight: 700;
}

.q-num--rot-0 { color: var(--rot-couleur-0); }
.q-num--rot-1 { color: var(--rot-couleur-1); }
.q-num--rot-2 { color: var(--rot-couleur-2); }
.q-num--rot-3 { color: var(--rot-couleur-3); }
.q-num--rot-4 { color: var(--rot-couleur-4); }

.q-requis {
  margin-left: 0.25rem;
  font-weight: 700;
  color: var(--flowt-orange);
}

/* R17 : mention facultative en JetBrains Mono (extension de D5). */
.q-facultatif {
  margin-left: 0.5rem;
  font-family: var(--police-mono);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  color: var(--gris-600);
}

.question--manquante {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

.question--manquante .question-legende {
  color: #c0392b;
}

/* ---------------------------------------------------------- choix unique */
.choix {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

/* Cibles de choix unique : patron .flowt-input du site (fond #FAFAF8,
   bordure grise fine), radio natif masqué visuellement mais conservé dans le
   label (contrat D7), état sélectionné en CSS pur via :has(:checked) — fond
   bleu doux + bordure bleue. La case témoin carrée (::before) se remplit en
   bleu à la sélection. */
.choix-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 14px 18px;
  background: var(--fond-input);
  border: 2px solid var(--gris-200);
  cursor: pointer;
  transition: border-color var(--transition-site),
    background-color var(--transition-site), box-shadow var(--transition-site);
}

.choix-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.choix-option::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 2px solid var(--gris-400);
  background: #fff;
  transition: border-color var(--transition-site),
    background-color var(--transition-site);
}

@media (hover: hover) {
  .choix-option:hover {
    border-color: var(--flowt-noir);
    background: #fff;
  }
}

.choix-option:has(input:checked) {
  background: var(--bleu-soft);
  border-color: var(--flowt-bleu);
}

.choix-option:has(input:checked)::before {
  background: var(--flowt-bleu);
  border-color: var(--flowt-bleu);
}

.choix-option:has(input:focus-visible) {
  border-color: var(--flowt-bleu);
  box-shadow: 0 0 0 3px rgba(0, 82, 205, 0.15);
}

/* -------------------------------------------------------------- échelles */
.echelle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem; /* R6 : de l'air entre les cases */
  margin-top: 1.25rem;
  /* R12 : la case grossie au clic (transform: scale) ne doit pas être
     rognée par le conteneur. */
  overflow: visible;
  padding: 0.2rem;
}

/* Cases d'échelle : même refonte que les cartes — bordure grise fine sans
   ombre au repos ; survol = bordure noire + lift ; sélection = bordure
   bleue + fond bleu doux + léger grossissement (R12), halo bleu doux. Le
   radio reste dans le label (contrat D7) mais est masqué visuellement :
   cliquer la case le coche. Le chiffre porte la couleur par valeur (R11). */
.echelle-case {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 3.5rem;
  padding: 0.5rem;
  text-align: center;
  background: #fff;
  border: 2px solid var(--gris-200);
  border-radius: 0;
  cursor: pointer;
  transition: border-color var(--transition-site),
    background-color var(--transition-site), transform var(--transition-site),
    box-shadow var(--transition-site);
}

.echelle-case input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .echelle-case:hover {
    border-color: var(--flowt-noir);
    transform: translateY(-2px);
  }

  /* Le survol prend la couleur du chiffre (R11) : bordure + fond doux
     dérivés de la couleur réelle de la valeur. */
  .echelle-case--val-0:hover { border-color: var(--rot-couleur-0); background: color-mix(in srgb, var(--rot-couleur-0) 8%, #fff); }
  .echelle-case--val-1:hover { border-color: var(--rot-couleur-1); background: color-mix(in srgb, var(--rot-couleur-1) 8%, #fff); }
  .echelle-case--val-2:hover { border-color: var(--rot-couleur-2); background: color-mix(in srgb, var(--rot-couleur-2) 5%, #fff); }
  .echelle-case--val-3:hover { border-color: var(--rot-couleur-3); background: color-mix(in srgb, var(--rot-couleur-3) 8%, #fff); }
  .echelle-case--val-4:hover { border-color: var(--rot-couleur-4); background: color-mix(in srgb, var(--rot-couleur-4) 8%, #fff); }
}

/* R5 (S1 validée sur maquette) : état sélectionné en CSS pur via :checked
   (box-sizing: border-box : la bordure ne décale pas la mise en page). */
.echelle-case:has(input:checked) {
  position: relative; /* garde la case au-dessus de ses voisines */
  z-index: 1;
  background: var(--bleu-soft);
  border-color: var(--flowt-bleu);
  transform: scale(1.08); /* R12 : grossissement à la sélection */
  box-shadow: 0 8px 20px rgba(0, 82, 205, 0.18);
}

.echelle-case:has(input:focus-visible) {
  border-color: var(--flowt-bleu);
  box-shadow: 0 0 0 3px rgba(0, 82, 205, 0.15);
}

.echelle-case-valeur {
  font-family: var(--police-mono);
  font-weight: 700;
}

.echelle-case-label {
  max-width: 5.5rem;
  font-size: 0.68rem;
  color: var(--gris-600);
}

/* R14/D7 : échelle LARGE (amplitude > 4, q15 et q16), une seule ligne, quelle
   que soit la largeur de fenêtre : nowrap générique, cases en flex-basis 0
   qui se partagent la largeur (min-width 0), plafonnées à 3.5rem et gardées
   carrées par aspect-ratio ; le chiffre suit en clamp(). Générique à toute
   échelle large (posée par questionnaire.js), pas seulement au layout par
   paires : q16 cumule echelle--large et echelle--paires (D7), q15 ne porte
   que echelle--large. */
.echelle--large {
  flex-wrap: nowrap;
  gap: clamp(0.3rem, 1.2vw, 0.7rem);
}

.echelle--large .echelle-case {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  max-width: 3.5rem;
  aspect-ratio: 1;
  padding: 0;
}

.echelle--large .echelle-case-valeur {
  font-size: clamp(0.75rem, 2.6vw, 1rem);
}

/* Échelle 0-10 par paires (q16, D6) : LAYOUT géométrique par paires
   (regroupement visuel des couleurs, classes echelle-case--paire-<p> posées
   par questionnaire.js) ; le une-seule-ligne (nowrap, rétrécissement) est
   porté par echelle--large (ci-dessus, cumulée sur q16, R14). La coloration
   du chiffre vient des classes echelle-case--val-<i> (R11, ci-dessous). La
   paire-4 (8, 9 et 10) reste verte : décision Clara, pas de rebouclage. */

/* R11 : coloration des chiffres par VALEUR, sur TOUTES les échelles (q3 à
   q16), indépendamment du layout par paires (propre à q16). */
.echelle-case--val-0 .echelle-case-valeur { color: var(--rot-couleur-0); }
.echelle-case--val-1 .echelle-case-valeur { color: var(--rot-couleur-1); }
.echelle-case--val-2 .echelle-case-valeur { color: var(--rot-couleur-2); }
.echelle-case--val-3 .echelle-case-valeur { color: var(--rot-couleur-3); }
.echelle-case--val-4 .echelle-case-valeur { color: var(--rot-couleur-4); }

/* ------------------------------------------------------------ texte libre */
/* Patron .flowt-input du site : fond #FAFAF8, bordure grise fine, focus
   bleu avec anneau doux. */
.texte-libre {
  width: 100%;
  margin-top: 1.25rem;
  padding: 16px 20px;
  font-family: var(--police-corps);
  font-size: 1rem;
  color: var(--flowt-noir);
  background: var(--fond-input);
  border: 2px solid var(--gris-200);
  border-radius: 0;
  resize: vertical;
  transition: border-color var(--transition-site),
    box-shadow var(--transition-site);
}

.texte-libre::placeholder {
  color: var(--gris-600);
}

.texte-libre:focus,
#champ-code:focus,
#champ-mdp:focus {
  outline: none;
  border-color: var(--flowt-bleu);
  box-shadow: 0 0 0 3px rgba(0, 82, 205, 0.1);
}

/* --------------------------------------------------------- bouton d'envoi */
/* Patron .flowt-btn du site, à l'identique : noir, uppercase, padding
   généreux, AUCUNE ombre au repos ; survol = bascule bleue + lift + ombre
   décalée noire ; :active repose le bouton. Décliné sur les 4 boutons
   d'action (envoi, code, mdp, export). */
.bouton-envoi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 18px 36px;
  font-family: var(--police-corps);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--flowt-noir);
  border: 2px solid var(--flowt-noir);
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-site);
}

.bouton-envoi:hover,
#formulaire-code button[type="submit"]:hover,
#bouton-mdp:hover,
#bouton-export:hover {
  background: var(--flowt-bleu);
  border-color: var(--flowt-bleu);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--flowt-noir);
}

.bouton-envoi:active,
#formulaire-code button[type="submit"]:active,
#bouton-mdp:active,
#bouton-export:active {
  transform: translateY(0);
  box-shadow: none;
}

.bouton-envoi:focus-visible,
#formulaire-code button[type="submit"]:focus-visible,
#bouton-mdp:focus-visible,
#bouton-export:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 82, 205, 0.35);
}

/* Message de validation (R9) : près du bouton d'envoi, visible seulement
   quand des obligatoires manquent ([hidden] le masque sinon). */
#message-validation {
  margin: 1.5rem 0 0.25rem;
  font-weight: 600;
  color: #c0392b;
}

/* ---------------------------------------------------------- écran d'erreur */
#ecran-erreur {
  padding: 2rem;
  background: #fff;
  border: 2px solid var(--flowt-orange);
}

#ecran-erreur h1 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------- écrans-cartes Inc 3/4
   Gabarit commun aux écrans-cartes (#ecran-code, #ecran-fin,
   #ecran-deja-repondu, inc-3.md §2/§6 ; #ecran-cloture, inc-4.md §2 D10) :
   patron .flowt-card du site (fond blanc, bordure grise fine, padding
   généreux, pas d'ombre), cosmétique, revue humaine. */
#ecran-code,
#ecran-fin,
#ecran-deja-repondu,
#ecran-cloture {
  max-width: 32rem;
  margin: 0 auto;
  padding: 40px 32px;
  background: #fff;
  border: 2px solid var(--gris-200);
}

#ecran-code h1,
#ecran-fin h1,
#ecran-deja-repondu h1,
#ecran-cloture h1 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Retouche cosmétique (relecture Clara RF1, Inc 4) : quand un écran-carte
   unique est affiché (code, fin, déjà-répondu, clôture), la carte est centrée
   VERTICALEMENT dans la fenêtre (elle reste centrée horizontalement via son
   margin: 0 auto). Le questionnaire (#intro + #formulaire), long et défilant,
   n'est pas visé et garde son alignement en haut. */
#app:has(> #ecran-code:not([hidden])),
#app:has(> #ecran-fin:not([hidden])),
#app:has(> #ecran-deja-repondu:not([hidden])),
#app:has(> #ecran-cloture:not([hidden])) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

/* ------------------------------------------------------ porte de code (D9) */
#formulaire-code {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Label = .flowt-label du site : mono, uppercase, bleu. */
#formulaire-code label {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--flowt-bleu);
}

#champ-code {
  width: 100%;
  padding: 16px 20px;
  font-family: var(--police-mono);
  font-size: 1rem;
  color: var(--flowt-noir);
  background: var(--fond-input);
  border: 2px solid var(--gris-200);
  border-radius: 0;
  transition: border-color var(--transition-site),
    box-shadow var(--transition-site);
}

#formulaire-code button[type="submit"] {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: var(--police-corps);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--flowt-noir);
  border: 2px solid var(--flowt-noir);
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-site);
}

#code-erreur {
  margin: 0;
  font-weight: 600;
  color: #c0392b;
}

/* ------------------------------------------------- page résultats (US-4.1)
   Contrat DOM D11 (docs/design/inc-5.md §2/§8 Z22) : page SÉPARÉE du
   parcours répondant (S7), même grammaire que les écrans-cartes ci-dessus,
   cosmétique, revue humaine. Version sobre du tableau de bord (Z22) : pas de
   lib de graphiques, rendu enrichi en US-4.2. */
#app-resultats {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

#ecran-mdp,
#ecran-erreur-resultats {
  max-width: 32rem;
  margin: 0 auto;
  padding: 40px 32px;
  background: #fff;
  border: 2px solid var(--gris-200);
}

#ecran-mdp h1 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#app-resultats:has(> #ecran-mdp:not([hidden])),
#app-resultats:has(> #ecran-erreur-resultats:not([hidden])) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

#form-mdp {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#form-mdp label {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--flowt-bleu);
}

#champ-mdp {
  width: 100%;
  padding: 16px 20px;
  font-family: var(--police-mono);
  font-size: 1rem;
  color: var(--flowt-noir);
  background: var(--fond-input);
  border: 2px solid var(--gris-200);
  border-radius: 0;
  transition: border-color var(--transition-site),
    box-shadow var(--transition-site);
}

#bouton-mdp {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: var(--police-corps);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--flowt-noir);
  border: 2px solid var(--flowt-noir);
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-site);
}

#mdp-erreur {
  margin: 0;
  font-weight: 600;
  color: #c0392b;
}

/* Tableau de bord (US-4.2, Z21/Z22, docs/design/inc-5.md §2) : version sobre
   à la charte, mêmes gabarits que les écrans-cartes ci-dessus ; AUCUNE lib de
   graphiques, répartitions en barres horizontales CSS PURES (Z22). */
#tableau-bord {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ---------------------------------------------------- cartes chiffres-clés */
.resultats-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}

.carte-chiffre {
  margin: 0;
  padding: 1.5rem 1.5rem;
  background: #fff;
  border: 2px solid var(--gris-200);
  transition: border-color var(--transition-site),
    transform var(--transition-site), box-shadow var(--transition-site);
}

@media (hover: hover) {
  .carte-chiffre:hover {
    border-color: var(--flowt-noir);
    transform: translateY(-3px);
    box-shadow: var(--ombre-hover);
  }
}

.carte-chiffre-libelle {
  margin: 0 0 0.5rem;
  font-family: var(--police-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-600);
}

.carte-chiffre-valeur {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  font-family: var(--police-mono);
  color: var(--flowt-bleu);
}

/* ----------------------------------------------------- critères et titres */
.resultats-criteres h2,
.resultats-repartition h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.resultats-criteres-liste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resultats-critere {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  background: #fff;
  border: 1.5px solid var(--gris-200);
}

.resultats-critere-label {
  color: var(--flowt-noir);
}

.resultats-critere-valeur {
  font-family: var(--police-mono);
  font-weight: 700;
  white-space: nowrap;
  color: var(--flowt-bleu);
}

/* --------------------------------------------------------- répartitions */
.resultats-repartition-liste {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resultats-repartition-ligne {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.resultats-repartition-entete {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

/* Barre de répartition en CSS PUR (Z22) : la largeur vient de la variable
   `--largeur` posée par resultats.js via `style.setProperty` (valeur
   numérique inerte), jamais d'une lib de graphiques ni d'une requête tierce. */
.resultats-barre {
  height: 0.85rem;
  background: var(--gris-100);
  border: 1.5px solid var(--gris-200);
}

.resultats-barre-remplissage {
  height: 100%;
  width: var(--largeur, 0%);
  background: var(--flowt-bleu);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#ecran-erreur-resultats {
  border-color: var(--flowt-orange);
}

/* ------------------------------------ réponses ouvertes + export (Inc 6)
   Contrat DOM D12 (docs/design/inc-6.md §2) : `#reponses-ouvertes` (verbatims)
   et `#bouton-export`, cosmétique, revue humaine. */
#reponses-ouvertes h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.reponses-ouvertes-question {
  margin: 0 0 1.5rem;
}

.reponses-ouvertes-question h3 {
  margin: 0 0 0.6rem;
  font-family: var(--police-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-600);
}

.reponses-ouvertes-liste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reponses-ouvertes-liste li {
  padding: 0.8rem 1.1rem;
  background: #fff;
  border: 1.5px solid var(--gris-200);
  white-space: pre-wrap;
}

.reponses-ouvertes-vide {
  margin: 0;
  font-style: italic;
  color: var(--gris-600);
}

#bouton-export {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: var(--police-corps);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--flowt-noir);
  border: 2px solid var(--flowt-noir);
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-site);
}