/* ==========================================================================
   PAGES/OUTILS.CSS — Simulateurs et diagnostics
   --------------------------------------------------------------------------
   S'appuie sur mission.css (en-tête de page, sommaire, contenu).
   Aucune valeur en dur : uniquement les jetons de 01-tokens.css.
   ========================================================================== */

/* === QUESTIONNAIRE ======================================================== */

.diag { margin-top: var(--e-7); border-top: 1px solid var(--noir); }

.diag-question {
  border: 0;
  padding: 0 0 var(--e-7);
  border-bottom: var(--filet);
  min-width: 0;
}
.diag-question[hidden] { display: none; }

.diag-question legend {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--e-2);
  align-items: baseline;
  width: 100%;
  padding: var(--e-7) 0 0;
  font-size: var(--t-l);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.diag-num {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--accent);
}
.contenu .diag-aide {
  margin-top: var(--e-3);
  padding-left: 44px;
  font-size: var(--t-s);
  color: var(--gris-texte);
  max-width: 64ch;
}

/* Options : de vraies cases radio / à cocher, habillées en lignes cliquables. */
.options {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-5);
  padding-left: 44px;
}
@media (min-width: 700px) { .options-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .options, .contenu .diag-aide { padding-left: 0; } }

.option {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-4) var(--e-5);
  border: var(--filet);
  cursor: pointer;
  font-size: var(--t-s);
  line-height: 1.45;
  transition: border-color var(--d-instant) var(--ease),
              background-color var(--d-instant) var(--ease);
}
.option:hover { border-color: var(--noir); }
.option input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.option small { display: block; margin-top: var(--e-1); color: var(--gris-texte); font-size: var(--t-xs); }
.option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-voile);
}

.diag-question .champ { margin: var(--e-5) 0 0; padding-left: 44px; max-width: 360px; }
@media (max-width: 520px) { .diag-question .champ { padding-left: 0; } }

.diag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: center;
  margin-top: var(--e-7);
}
.diag-confid {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}


/* === RESULTAT ============================================================= */

.resultat { margin-top: var(--e-9); }
.resultat[hidden] { display: none; }
.resultat > * + * { margin-top: var(--e-8); }

.verdict {
  padding: var(--e-7) var(--e-6);
  background: var(--inv-fond);
  color: var(--inv-texte);
}
.verdict .libelle { color: var(--accent-clair); }
.contenu .verdict-titre {
  margin-top: var(--e-4);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 22ch;
  color: var(--inv-texte);
}
.contenu .verdict-texte {
  margin-top: var(--e-5);
  font-size: var(--t-m);
  color: var(--inv-secondr);
  max-width: 60ch;
}
.verdict .etiquettes { margin-top: var(--e-5); }
.verdict .etiquette { color: var(--inv-texte); border-color: var(--inv-filet); }

.resultat h3 {
  font-size: var(--t-l);
  margin: 0 0 var(--e-5);
}
.bloc-titre {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--noir);
}
.bloc-titre h3 { margin: 0; }

/* Échéances */
.echeance-statut {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  white-space: nowrap;
}
.statut-actif  { color: var(--accent); font-weight: 500; }
.statut-futur  { color: var(--noir); }
.statut-na     { color: var(--gris-texte); }
.tableau td:first-child { font-weight: 500; }
.tableau .date { font-family: var(--f-mono); font-size: var(--t-xs); white-space: nowrap; }
.tableau-defile { overflow-x: auto; }

/* Jauge de préparation */
.contenu .jauge-chiffre {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--noir);
  max-width: none;
}
.jauge-chiffre small { font-size: var(--t-m); color: var(--gris-texte); letter-spacing: 0; }
.jauge {
  position: relative;
  height: 6px;
  margin-top: var(--e-5);
  background: var(--gris-filet);
}
.jauge-remplie {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  transition: width var(--d-moyen) var(--ease-out);
}
.contenu .jauge-legende { margin-top: var(--e-4); font-size: var(--t-s); color: var(--gris-texte); max-width: 62ch; }

/* Plan d'action numéroté */
.plan { border-top: var(--filet); counter-reset: p; }
.plan li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--e-2);
  padding-block: var(--e-5);
  border-bottom: var(--filet);
}
.plan li::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--accent);
  padding-top: 4px;
}
.plan strong { display: block; font-weight: 500; font-size: var(--t-m); letter-spacing: -0.01em; }
.plan span { display: block; margin-top: var(--e-1); font-size: var(--t-s); color: var(--gris-texte); max-width: 64ch; }
.plan .priorite {
  display: inline-block;
  margin-left: var(--e-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Mentions obligatoires */
.mentions { display: grid; gap: var(--e-2); }
@media (min-width: 700px) { .mentions { grid-template-columns: 1fr 1fr; } }
.mentions li {
  padding: var(--e-4) var(--e-5);
  border: var(--filet);
  font-size: var(--t-s);
}
.mentions li b { display: block; font-weight: 500; }
.mentions li span { color: var(--gris-texte); font-size: var(--t-xs); }

.contenu .avertissement, .avertissement {
  font-size: var(--t-xs);
  color: var(--gris-texte);
  line-height: 1.7;
  max-width: 80ch;
}
.avertissement strong { color: var(--noir); font-weight: 500; }


/* === PAGE INDEX DES OUTILS ================================================ */

.index-ligne.est-a-venir .index-lien { cursor: default; }
.index-ligne.est-a-venir::before { display: none; }
.index-ligne.est-a-venir .index-titre { color: var(--gris-texte); }
.index-statut {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.index-ligne:hover .index-statut,
.index-ligne:focus-within .index-statut { color: var(--accent-clair); }
.est-a-venir .index-statut { color: var(--gris-texte); }


/* === IMPRESSION =========================================================== */
/* « Enregistrer en PDF » : on n'imprime que le résultat. */

@media print {
  .entete, .panneau-menu, .progression, .pied, .sommaire, .page-tete .etiquettes,
  #questionnaire, .diag-actions, .no-print, .appel-mission, .evitement { display: none !important; }
  .page-tete { padding: 0 0 var(--e-5); }
  .corps { padding: 0; }
  .col-4-12 { grid-column: 1 / -1 !important; }
  .resultat { margin-top: var(--e-5); }
  .verdict { background: none; color: var(--noir); border: 1px solid var(--noir); }
  .verdict-texte, .verdict .etiquette { color: var(--noir); }
  .jauge-remplie { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .resultat > * { break-inside: avoid; }
}

/* Colonne de statut à largeur fixe : les descriptions restent alignées. */
@media (min-width: 900px) {
  .index-outils .index-lien { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) 150px; }
  .index-outils .index-statut { text-align: right; }
}