/* =========================================================================
   diagnostic.css : l'outil de diagnostic
   Meme registre que le site : filets fins, monospace pour les releves,
   un seul accent. L'ecran de question est volontairement depouille pour
   qu'il ne reste rien a lire d'autre que la question posee.
   ========================================================================= */

.page-outil { background: var(--ink-2); }

.outil {
  min-height: 100svh;
  padding-block: 8.5rem clamp(4rem, 9vh, 7rem);
}

.ecran { max-width: 62rem; margin-inline: auto; }
.ecran > .tag { margin-bottom: 1.5rem; }

/* ---------- Introduction ---------- */
#ecran-intro h1 { margin-bottom: 1.5rem; max-width: 16ch; }
#ecran-intro .lede { max-width: 52ch; margin-bottom: 2.75rem; }

.repere {
  list-style: none;
  margin: 0 0 2.75rem;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
}
.repere li {
  display: grid;
  gap: .25rem 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: .94rem;
  color: var(--mist);
}
@media (min-width: 46rem) {
  .repere li { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
}
.repere__cle {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--glow);
}

/* ---------- Question ---------- */
.jauge {
  height: 2px;
  background: var(--hair-soft);
  margin-bottom: 3rem;
  overflow: hidden;
}
.jauge i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--glow);
  transition: width .5s var(--ease);
}

.q-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem 1.5rem;
  margin-bottom: 1.5rem;
  max-width: none;
}
.q-compteur {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--mist-dim);
  font-variant-numeric: tabular-nums;
}
.q-compteur b { color: var(--glow); font-weight: 500; }
.q-axe {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist-dim);
  padding-left: 1.5rem;
  position: relative;
}
.q-axe::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: .85rem; height: 1px;
  background: var(--hair);
}

#ecran-question h2 {
  max-width: 24ch;
  margin-bottom: 2.5rem;
}

.choix-liste {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: .6rem;
  max-width: 48rem;
}
.choix {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.1rem 1.35rem;
  background: var(--ink);
  border: 1px solid var(--hair-soft);
  border-radius: 2px;
  cursor: pointer;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--snow);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.choix:hover {
  border-color: var(--glow);
  transform: translateX(3px);
}
.choix.is-choisi {
  border-color: var(--glow);
  background: color-mix(in srgb, var(--glow) 7%, var(--ink));
}
.choix__lettre {
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hair);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--mist-dim);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.choix:hover .choix__lettre,
.choix.is-choisi .choix__lettre { color: var(--glow); border-color: var(--glow); }

.q-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair-soft);
}

/* bouton discret, sans remplissage au survol */
.btn--fin {
  border-color: transparent;
  color: var(--mist);
  padding-inline: 0;
  gap: .55rem;
}
.btn--fin::before { display: none; }
.btn--fin:hover { color: var(--glow); border-color: transparent; }
.btn--fin:disabled { opacity: .35; cursor: default; }
.btn--fin:disabled:hover { color: var(--mist); }

/* ---------- Résultat ---------- */
.releve {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 3.5rem;
}
@media (min-width: 58rem) {
  .releve { grid-template-columns: minmax(0, 1fr) 22rem; gap: 4rem; }
}
.releve__chiffre h1 { margin-bottom: 1rem; max-width: 14ch; }
.releve__chiffre p.dim { max-width: 46ch; }

.score {
  font-family: var(--mono);
  margin-bottom: .75rem;
  color: var(--glow);
  font-variant-numeric: tabular-nums;
}
.score b { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); font-weight: 500; line-height: 1; }
.score span { font-size: 1rem; color: var(--mist-dim); margin-left: .35rem; }

.releve__radar svg { width: 100%; height: auto; overflow: visible; }
.radar__etiquette {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--mist-dim);
}

.releve__titre {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  margin-bottom: 1.75rem;
}

.axes { list-style: none; margin: 0 0 3.5rem; padding: 0; display: grid; gap: 0; }
.axe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem 1.5rem;
  align-items: center;
  padding: .9rem 0;
  border-bottom: 1px solid var(--hair-soft);
}
@media (min-width: 46rem) {
  .axe { grid-template-columns: 14rem minmax(0, 1fr) 3rem; }
}
.axe__nom { font-size: .94rem; }
.axe__jauge {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--hair-soft);
  overflow: hidden;
}
@media (min-width: 46rem) { .axe__jauge { grid-column: auto; } }
.axe__jauge i {
  display: block;
  height: 100%;
  background: var(--mist-dim);
}
.axe__val {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--mist-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.axe--faible .axe__nom { color: var(--glow); font-weight: 500; }
.axe--faible .axe__jauge i { background: var(--glow); }
.axe--faible .axe__val { color: var(--glow); }

.leviers {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 4rem;
}
@media (min-width: 52rem) { .leviers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
.levier {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--ink);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--glow);
  border-radius: 2px;
}
.levier h3 { margin-bottom: 1.25rem; }

/* ---------- Suite ---------- */
.suite {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 3rem;
}
@media (min-width: 58rem) { .suite { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
.suite__bloc {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.suite__bloc h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
.suite__bloc--accent { background: color-mix(in srgb, var(--glow) 5%, var(--ink)); }
.suite__bloc .btn { margin-top: auto; }

.form--compact { width: 100%; gap: 1.25rem; }

/* piege a robots : invisible, mais pas via display none que certains ignorent */
.pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.avert {
  font-size: .8125rem;
  max-width: 60ch;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair-soft);
}