/* ==========================================================================
   KEYS CONSULTING — Le diagnostic — VERSION 35.0

   Chargé uniquement sur /diagnostic/. Le reste du site n'en porte pas le
   poids.

   LE SENS DE LECTURE DE CE FICHIER

   L'état par défaut est celui SANS JavaScript : les neuf questions sont
   empilées, toutes visibles, toutes accessibles. C'est `.is-pilote` — posé
   par le script — qui bascule en mode « une question à la fois ». Écrire la
   règle dans l'autre sens laisserait une page vide à qui n'exécute pas de
   JavaScript, et aux moteurs.

   Le registre d'animation est celui du site : des filets qui se tracent, des
   choses qui se posent. Aucun rebond, aucune couleur qui n'existe pas dans
   la charte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   L'introduction
   -------------------------------------------------------------------------- */

.diag__intro { max-width: 62ch; }

.diag__mentions {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   La jauge de progression

   Un filet qui se remplit, avec neuf graduations. Décorative : le compteur
   en toutes lettres juste en dessous porte la même information pour qui
   n'accède pas à l'image.
   -------------------------------------------------------------------------- */

.diag__jauge { position: relative; margin-bottom: var(--space-2); }

.diag__jauge-trait {
  display: block;
  height: 2px;
  background: var(--navy-15);
  position: relative;
  overflow: hidden;
}

.diag__jauge-trait i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--prune);
  transition: width var(--duration-slow) var(--ease-editorial);
}

.diag__jauge-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.diag__jauge-ticks b {
  width: 1px;
  height: 8px;
  margin-top: -3px;
  background: var(--navy-15);
  transition: background var(--duration-state) var(--ease-editorial);
}

.diag__jauge-ticks b.is-passe { background: var(--prune); }

.diag__compteur {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Les questions

   Empilées par défaut. Le mode piloté n'en montre qu'une.
   -------------------------------------------------------------------------- */

.diag__questions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.diag__q { padding-block: var(--space-4); border-top: 1px solid var(--hairline); }
.diag__q:first-child { border-top: 0; padding-top: 0; }

.diag__set { border: 0; margin: 0; padding: 0; }

.diag__legende {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: 0;
  margin-bottom: var(--space-1);
}

.diag__num {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-micro);
  color: var(--text-accent);
  flex: none;
  padding-top: 6px;
}

.diag__texte {
  font-family: var(--font-serif);
  font-size: var(--text-h2-standard);
  line-height: var(--leading-standard);
  font-weight: var(--weight-display);
  color: var(--text-primary);
  max-width: 24ch;
}

.diag__aide {
  font-size: var(--text-small);
  color: var(--text-muted);
  max-width: 58ch;
  margin-bottom: var(--space-3);
  padding-left: calc(var(--text-eyebrow) + var(--space-2));
}

/* --------------------------------------------------------------------------
   Les options

   Pas de boîtes : un filet sous chaque ligne, qui se trace de gauche à
   droite quand on choisit. Le bouton radio natif est masqué visuellement
   mais reste la cible du clavier — c'est lui qui porte le focus.
   -------------------------------------------------------------------------- */

.diag__options {
  display: grid;
  gap: 2px;
  padding-left: calc(var(--text-eyebrow) + var(--space-2));
}

.diag__option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
  transition: background var(--duration-state) var(--ease-editorial);
  /* Cible tactile confortable : c'est la ligne entière qui répond. */
  min-height: 56px;
}

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

/* La pastille dessinée, puisque le vrai bouton est masqué. */
.diag__coche {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-full);
  position: relative;
  transition:
    border-color var(--duration-state) var(--ease-editorial),
    background var(--duration-state) var(--ease-editorial);
}

.diag__coche::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-full);
  background: var(--prune);
  transform: scale(0);
  transition: transform var(--duration-base) var(--ease-editorial);
}

.diag__label {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  transition: color var(--duration-state) var(--ease-editorial);
}

/* Le filet qui se trace sous l'option retenue. */
.diag__filet {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--prune);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--duration-base) var(--ease-editorial);
}

@media (hover: hover) {
  .diag__option:hover { background: var(--surface-tint); }
  .diag__option:hover .diag__coche { border-color: var(--prune); }
}

.diag__option:has(input:checked) .diag__coche { border-color: var(--prune); }
.diag__option:has(input:checked) .diag__coche::after { transform: scale(1); }
.diag__option:has(input:checked) .diag__label { color: var(--text-primary); }
.diag__option:has(input:checked) .diag__filet { transform: scaleX(1); }

/* Le focus clavier vit sur le bouton masqué : on le rend visible sur la
   ligne, sinon il serait invisible et la page deviendrait inutilisable au
   clavier. */
.diag__option:has(input:focus-visible) {
  outline: 2px solid var(--prune);
  outline-offset: 3px;
}

/* Repli pour les navigateurs sans :has() — la sélection reste lisible. */
@supports not selector(:has(*)) {
  .diag__option input:checked ~ .diag__label { color: var(--text-primary); font-weight: var(--weight-medium); }
  .diag__option input:focus-visible ~ .diag__label { outline: 2px solid var(--prune); outline-offset: 3px; }
}

/* --------------------------------------------------------------------------
   Les commandes
   -------------------------------------------------------------------------- */

.diag__commandes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.diag__retour {
  background: none;
  border: 0;
  padding: var(--space-1) 0;
  font: inherit;
  font-size: var(--text-small);
  color: var(--text-muted);
  cursor: pointer;
  min-height: 44px;
  transition: color var(--duration-state) var(--ease-editorial);
}

.diag__retour:hover { color: var(--text-primary); }

.diag__envoi[disabled] { opacity: 0.35; pointer-events: none; }

/* ==========================================================================
   LE MODE PILOTÉ — posé par le JavaScript uniquement
   ========================================================================== */

.diag.is-pilote .diag__q {
  display: none;
  border-top: 0;
  padding-top: 0;
}

.diag.is-pilote .diag__q.is-active { display: block; }

@media (prefers-reduced-motion: no-preference) {

  /* L'entrée : la question se lève. */
  .diag.is-pilote .diag__q.is-active {
    animation: diag-entre var(--duration-slow) var(--ease-editorial) both;
  }

  /* La sortie : elle s'efface vers le haut. Le JS maintient l'élément
     affiché le temps de l'animation, puis le retire. */
  .diag.is-pilote .diag__q.is-sortante {
    display: block;
    animation: diag-sort var(--duration-base) var(--ease-editorial) both;
  }

  /* Les options se posent l'une après l'autre. Le décalage est porté par
     une variable écrite en HTML par le script : pas de règle par indice. */
  .diag.is-pilote .diag__q.is-active .diag__option {
    animation: diag-option var(--duration-base) var(--ease-editorial) both;
    animation-delay: calc(var(--i, 0) * 60ms + 140ms);
  }
}

@keyframes diag-entre {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes diag-sort {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-16px); }
}

@keyframes diag-option {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   LA RESTITUTION
   ========================================================================== */

.diag__resultat[hidden] { display: none; }

.diag-res {
  padding-top: var(--space-5);
  border-top: 2px solid var(--navy);
}

.diag-res__eyebrow {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}

.diag-res__niveau {
  font-family: var(--font-serif);
  font-size: var(--text-h2-statement);
  line-height: var(--leading-statement);
  font-weight: var(--weight-display);
  max-width: 20ch;
  text-wrap: balance;
  margin-bottom: var(--space-2);
}

.diag-res__lecture {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--text-secondary);
  max-width: 56ch;
}

/* Le total, en gros chiffre. */
.diag-res__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-block: var(--space-5) var(--space-4);
}

.diag-res__chiffre {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  line-height: 0.9;
  font-weight: var(--weight-display);
  color: var(--prune);
  font-variant-numeric: tabular-nums;
}

.diag-res__sur {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Les trois axes

   Trois barres verticales. La hauteur cible est écrite en style en ligne par
   PHP : sans JavaScript elle est déjà juste, et le script se contente de
   partir de zéro pour y monter.
   -------------------------------------------------------------------------- */

.diag-res__axes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.diag-axe__barre {
  position: relative;
  height: 180px;
  background: var(--navy-08);
  overflow: hidden;
}

.diag-axe__remplissage {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--h, 0%);
  background: var(--navy-40);
  transition: height 1.1s var(--ease-editorial);
}

.diag-axe.is-faible .diag-axe__remplissage { background: var(--prune); }

.diag-axe__nom {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
}

.diag-axe__note {
  font-size: var(--text-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.diag-axe.is-faible .diag-axe__nom { color: var(--text-accent); }

/* --------------------------------------------------------------------------
   L'analyse
   -------------------------------------------------------------------------- */

.diag-res__titre {
  font-family: var(--font-serif);
  font-size: var(--text-h2-standard);
  line-height: var(--leading-standard);
  font-weight: var(--weight-display);
  max-width: 26ch;
  margin-bottom: var(--space-2);
}

.diag-res__manque,
.diag-res__premier {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-bottom: var(--space-2);
}

.diag-res__premier strong { color: var(--text-primary); }

.diag-res__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.diag-res__reprise { margin-top: var(--space-5); }

.diag-res__recommencer {
  background: none;
  border: 0;
  padding: var(--space-1) 0;
  font: inherit;
  font-size: var(--text-small);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
}

.diag-res__recommencer:hover { color: var(--text-primary); }

/* L'apparition de la restitution, par étages. */
@media (prefers-reduced-motion: no-preference) {
  .diag-res[data-anime] > * {
    animation: diag-res-entre var(--duration-slow) var(--ease-editorial) both;
    animation-delay: calc(var(--i, 0) * 110ms);
  }
}

@keyframes diag-res-entre {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .diag__texte { font-size: 24px; max-width: none; }
  .diag__aide,
  .diag__options { padding-left: 0; }
  .diag-res__axes { gap: var(--space-2); }
  .diag-axe__barre { height: 120px; }
  .diag-axe__nom { font-size: var(--text-micro); letter-spacing: 0.08em; }
  .diag-res__actions { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit — les valeurs restent, le trajet disparaît
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .diag__jauge-trait i,
  .diag-axe__remplissage,
  .diag__filet,
  .diag__coche::after { transition: none; }

  .diag.is-pilote .diag__q.is-active,
  .diag.is-pilote .diag__q.is-active .diag__option,
  .diag-res[data-anime] > * { animation: none; }

  /* Une question sortante n'a plus de raison d'exister sans transition. */
  .diag.is-pilote .diag__q.is-sortante { display: none; }
}