/* =============================================================
   CALCULATEUR TRÈFLE — V5 : les retours de la visio MIST du 15/09
   -------------------------------------------------------------
   🔴 NE SE CHARGE QUE SUR `[mist_trefle variante="v5"]`, après
   `mist-trefle.css`, `mist-trefle-v2.css` et `mist-trefle-v3.css` (dont elle
   reprend le trèfle). Toutes les règles sont préfixées `.mist-trefle-v5` :
   posée sur la seule racine de la V5, la classe ne peut atteindre aucune des
   quatre autres pages.

   LES COULEURS NE SONT PAS ÉCRITES ICI, ELLES SONT CALCULÉES.
   Chaque thématique reçoit en style en ligne (`mist_trefle_v5_variables()`) :
     --mt-teinte      sa couleur pure (les folioles : « des fonds intenses », R6)
     --mt-sur-teinte  l'encre la plus lisible sur cette couleur (grand texte)
     --mt-plein       un fond plein garanti 4,5:1 avec
     --mt-sur-plein   son encre — pour tout texte courant posé sur de la couleur
     --mt-voile       la couleur à 12 % sur blanc, --mt-voile-fort à 24 %
   La teinte se choisit au back-office : le contraste, lui, ne se choisit pas.
   Aucun `color-mix()` : une déclaration non comprise laisse un fond
   transparent (piège documenté dans `mist-trefle.css`).

   🔴 AUCUN TEXTE JUSTIFIÉ (R10). Sur un écran, la largeur varie : un texte
   justifié ouvre des trous entre les mots. Tout est aligné à gauche.
   ============================================================= */

.mist-trefle-v5 {
  /* Les gris clairs de la V1 (#8B91AE, 2,9:1) sortaient de l'audit du 15/09
     comme 21 textes non conformes sur 51 : en V5, le texte « discret » est
     le bleu-gris de la charte, 7,4:1 sur blanc. */
  --mt-discret: #4A5076;
  /* L'orange de la charte fait 3,77:1 sous du blanc : insuffisant pour un
     bouton en 15 px. Cet orange profond tient 5,1:1. */
  --mt-orange-texte: #B73A12;
  --mt-orange-bouton: #C4410F;
  text-align: left;
}
.mist-trefle-v5 p,
.mist-trefle-v5 li,
.mist-trefle-v5 label,
.mist-trefle-v5 td,
.mist-trefle-v5 th,
.mist-trefle-v5 h2,
.mist-trefle-v5 h3 { text-align: left; }

/* Lu par le lecteur d'écran, invisible à l'écran. */
.mist-trefle-v5 .mist-trefle-v5__lecteur {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Ce qui passe au AA, partout ---------- */

.mist-trefle-v5 .mist-trefle__surtitre,
.mist-trefle-v5 .mist-trefle__requis { color: var(--mt-orange-texte); }
.mist-trefle-v5 .mist-trefle__aide,
.mist-trefle-v5 .mist-trefle__mention,
.mist-trefle-v5 .mist-trefle__facultatif,
.mist-trefle-v5 .mist-trefle__hors-site,
.mist-trefle-v5 .mist-trefle__legende,
.mist-trefle-v5 .mist-trefle__ressources-titre,
.mist-trefle-v5 .mist-trefle__legende-tableau,
.mist-trefle-v5 .mist-trefle__etat,
.mist-trefle-v5 .mist-trefle__chapo { color: var(--mt-encre-douce); }
.mist-trefle-v5 .mist-trefle__titre--ecran { color: var(--mt-encre); }

.mist-trefle-v5 .mist-trefle__bouton--primaire { background: var(--mt-orange-bouton); color: #FFFFFF; }
.mist-trefle-v5 .mist-trefle__bouton--primaire:hover { background: #A8370C; }
.mist-trefle-v5 .mist-trefle__bouton--secondaire { background: #FFFFFF; }
.mist-trefle-v5 .mist-trefle__bouton--secondaire:hover { background: var(--mt-bleu); color: #FFFFFF; }
.mist-trefle-v5 .mist-trefle__bouton:focus-visible { outline: 3px solid var(--mt-encre); outline-offset: 3px; }
.mist-trefle-v5 [tabindex="-1"]:focus-visible { outline: 3px solid var(--mt-orange-texte); outline-offset: 4px; border-radius: 6px; }
.mist-trefle-v5 input::placeholder { color: #5E6384; opacity: 1; }

/* ---------- Écran 1 : l'introduction, entière (R3) ---------- */

.mist-trefle-v5__intro { max-width: 74ch; margin: 0 0 30px; }
.mist-trefle-v5__intro p {
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.65;
  color: var(--mt-encre);
  margin: 0 0 14px;
}
/* Le premier paragraphe dit à qui s'adresse l'outil : il porte la page. */
.mist-trefle-v5__intro p:first-child {
  font-size: clamp(17px, 1.55vw, 19.5px);
  line-height: 1.55;
  font-weight: 600;
}

.mist-trefle-v5__dimensions {
  list-style: none;
  margin: 4px 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  max-width: 720px;
}
.mist-trefle-v5__dimensions li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--mt-voile-fort);
  font-family: var(--mt-titre);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--mt-encre);
}
.mist-trefle-v5__pastille {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mt-plein);
  color: var(--mt-sur-plein);
  font-family: var(--mt-titre); font-weight: 800; font-size: 16px;
}
.mist-trefle-v5 .mist-trefle-v5__icone { display: block; width: 20px; height: 20px; }

.mist-trefle-v5__carte-form {
  background: #FFFFFF;
  border: 1px solid var(--mt-trait);
  border-radius: 22px;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 22px 46px -34px rgba(31, 36, 68, .5);
  max-width: 900px;
}

/* ---------- « Votre MIST » : liste de choix avec recherche (R1) ---------- */

.mist-trefle-v5 .mist-trefle-v5__champ-mist { grid-column: 1 / -1; }
.mist-trefle-v5__combo { position: relative; }
.mist-trefle-v5 .mist-trefle-v5__combo input[type="text"] { padding-right: 50px; }
.mist-trefle-v5__combo-ouvrir {
  position: absolute; right: 3px; top: 3px; bottom: 3px; width: 44px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.mist-trefle-v5__combo-ouvrir::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -7px 0 0 -5px;
  border-right: 2.5px solid var(--mt-encre-douce); border-bottom: 2.5px solid var(--mt-encre-douce);
  transform: rotate(45deg);
}
.mist-trefle-v5__combo-liste {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: #FFFFFF;
  border: 1.5px solid var(--mt-trait); border-radius: 14px;
  box-shadow: 0 24px 44px -22px rgba(31, 36, 68, .5);
  max-height: min(330px, 52vh); overflow-y: auto;
}
.mist-trefle-v5__combo-liste [role="option"] {
  min-height: 44px;            /* une cible au doigt, à 390 px */
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 8px 12px; border-radius: 10px;
  cursor: pointer; color: var(--mt-encre); font-size: 15.5px; line-height: 1.3;
}
.mist-trefle-v5__combo-liste [role="option"]:hover,
.mist-trefle-v5__combo-liste [role="option"].est-active { background: #E6E8F3; }
.mist-trefle-v5__combo-liste [role="option"].est-active { box-shadow: inset 3px 0 0 var(--mt-bleu); }
.mist-trefle-v5__combo-liste [role="option"][aria-selected="true"] { font-weight: 700; }
.mist-trefle-v5__combo-liste [role="option"][aria-selected="true"]::after {
  content: ""; flex: 0 0 auto; width: 6px; height: 12px; margin-right: 4px;
  border-right: 2.5px solid var(--mt-bleu); border-bottom: 2.5px solid var(--mt-bleu);
  transform: rotate(45deg) translateY(-2px);
}
.mist-trefle-v5__combo-aucun { margin: 8px 0 0; font-size: 14px; color: var(--mt-encre-douce); }
.mist-trefle-v5__combo.est-invalide input[type="text"] { border-color: var(--mt-orange-texte); }

/* ---------- Écran 2 : le trèfle, aux fonds intenses (R5, R6) ---------- */

.mist-trefle-v5__trefle .mist-trefle__folio-corps { fill: var(--mt-teinte); opacity: 1; }
.mist-trefle-v5__trefle .mist-trefle__feuille[data-remplie="1"] .mist-trefle__folio-corps { opacity: 1; }
/* Un liseré blanc sépare deux folioles pleines qui se touchent. */
.mist-trefle-v5__trefle .mist-trefle__folio-contour { stroke: #FFFFFF; stroke-width: 2.6; }
/* La nervure part du cœur et s'arrête AVANT le chiffre (ou l'icône) : pleine
   longueur, elle les barrait (capture du 24/09). */
.mist-trefle-v5__trefle .mist-trefle__folio-nervure { stroke: var(--mt-sur-teinte); opacity: .35; stroke-dasharray: 16 200; }
.mist-trefle-v5__trefle .mist-trefle__feuille { transition: filter .2s; }
.mist-trefle-v5__trefle .mist-trefle__feuille:hover { filter: saturate(1.15) brightness(1.04); }

.mist-trefle-v5__trefle .mist-trefle__feuille-num,
.mist-trefle-v5__trefle .mist-trefle__feuille[data-remplie="1"] .mist-trefle__feuille-num {
  color: var(--mt-sur-teinte);
  opacity: 1;
  font-size: 26px;
}
.mist-trefle-v5__trefle .mist-trefle__feuille-num .mist-trefle-v5__icone { width: 40px; height: 40px; }

/* La feuille remplie : une coche blanche, et pas seulement une couleur.
   ⚠️ LE CALQUE COUVRE TOUTE LA CASE, comme le chiffre : c'est ce qui permet de
   le décaler de 14 % DE LA CASE vers le cœur du trèfle. Un petit élément
   décalé de 14 % se décalerait de 14 % de LUI-MÊME — trois pixels. */
.mist-trefle-v5__coche { position: absolute; inset: 0; display: none; pointer-events: none; }
.mist-trefle-v5__coche::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -46px 0 0 14px;
  border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 4px 10px -4px rgba(31, 36, 68, .6);
}
.mist-trefle-v5__coche::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 12px; margin: -40px 0 0 24px;
  border-right: 3px solid #2F6B47; border-bottom: 3px solid #2F6B47;
  transform: rotate(45deg);
}
.mist-trefle-v5__trefle .mist-trefle__feuille[data-remplie="1"] .mist-trefle-v5__coche { display: block; }
.mist-trefle-v5__trefle .mist-trefle__feuille--nw .mist-trefle-v5__coche { transform: translate(14%, 14%); }
.mist-trefle-v5__trefle .mist-trefle__feuille--ne .mist-trefle-v5__coche { transform: translate(-14%, 14%); }
.mist-trefle-v5__trefle .mist-trefle__feuille--sw .mist-trefle-v5__coche { transform: translate(14%, -14%); }
.mist-trefle-v5__trefle .mist-trefle__feuille--se .mist-trefle-v5__coche { transform: translate(-14%, -14%); }

.mist-trefle-v5__trefle .mist-trefle__noeud { background: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px -8px rgba(31, 36, 68, .6); }
.mist-trefle-v5__trefle .mist-trefle__noeud span { color: var(--mt-encre); }

.mist-trefle-v5__trefle .mist-trefle__tag {
  background: var(--mt-voile-fort);
  border: 2px solid var(--mt-teinte);
}
.mist-trefle-v5__trefle .mist-trefle__tag:hover { background: var(--mt-voile-fort); border-color: var(--mt-plein); }
.mist-trefle-v5__trefle .mist-trefle__tag-num {
  width: 32px; height: 32px;
  background: var(--mt-plein);
  color: var(--mt-sur-plein);
  font-size: 15px;
}
.mist-trefle-v5__trefle .mist-trefle__tag-num .mist-trefle-v5__icone { width: 19px; height: 19px; }
/* `max-width: none` : la V1 borne ce titre à 16 caractères — « Conditions de /
   travail » se coupait dans une étiquette aux trois quarts vide. */
.mist-trefle-v5__trefle .mist-trefle__feuille-titre { color: var(--mt-encre); font-size: 15px; max-width: none; }
.mist-trefle-v5__trefle .mist-trefle__feuille-etat { color: var(--mt-encre); font-weight: 600; }
.mist-trefle-v5__trefle .mist-trefle__tag[data-remplie="1"] { background: var(--mt-voile-fort); border-color: var(--mt-plein); }
.mist-trefle-v5__trefle .mist-trefle__tag[data-remplie="1"] .mist-trefle__feuille-etat { color: var(--mt-encre); font-weight: 800; }
.mist-trefle-v5__trefle .mist-trefle__tag[data-remplie="1"] .mist-trefle__feuille-etat::before {
  content: ""; display: inline-block; width: 5px; height: 10px; margin: 0 8px 0 2px;
  border-right: 2.5px solid #2F6B47; border-bottom: 2.5px solid #2F6B47;
  transform: rotate(45deg) translateY(-2px);
}
.mist-trefle-v5__trefle .mist-trefle__bravo { color: #2F6B47; text-align: center; }

/* ---------- Écran 3 : une question à la fois (R8, R10, R11) ---------- */

.mist-trefle-v5 .mist-trefle-v5__thematique {
  background: var(--mt-voile);
  border-top: 0;
  border-radius: 24px;
  padding: 0 0 clamp(18px, 3vw, 32px);
  overflow: hidden;
}

.mist-trefle-v5__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 32px);
}
.mist-trefle-v5__barre .mist-trefle__bouton { padding: 10px 20px; font-size: 14.5px; }

/* Le bandeau : la couleur de la thématique, EN PLEIN. */
.mist-trefle-v5__bandeau {
  background: var(--mt-plein);
  padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 32px);
}
.mist-trefle-v5__bandeau .mist-trefle__titre { color: var(--mt-sur-plein); margin: 0; }

.mist-trefle-v5__thematique .mist-trefle__intro { padding: 16px clamp(16px, 3vw, 32px) 0; margin: 0; color: var(--mt-encre); }

.mist-trefle-v5__progres {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 18px clamp(16px, 3vw, 32px) 0;
}
.mist-trefle-v5__compteur {
  margin: 0;
  font-family: var(--mt-titre); font-weight: 800; font-size: 15.5px;
  color: var(--mt-encre);
}
.mist-trefle-v5__pas { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.mist-trefle-v5__pas li {
  width: 13px; height: 13px; margin: 0;
  border-radius: 50%;
  border: 2px solid var(--mt-plein);
  background: #FFFFFF;
}
.mist-trefle-v5__pas li.est-repondue { background: var(--mt-plein); }
.mist-trefle-v5__pas li.est-courante { box-shadow: 0 0 0 3px var(--mt-voile), 0 0 0 5px var(--mt-encre); }

.mist-trefle-v5__thematique .mist-trefle__questions { padding: 14px clamp(16px, 3vw, 32px) 0; gap: 0; }
.mist-trefle-v5__thematique .mist-trefle__question {
  background: #FFFFFF;
  border: 0;
  border-left: 6px solid var(--mt-teinte);
  border-radius: 20px;
  padding: clamp(18px, 2.6vw, 32px);
  box-shadow: 0 18px 40px -32px rgba(31, 36, 68, .55);
}

.mist-trefle-v5__tete { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 14px; }
/* R10 : le repère numéroté, dans un rond plein. */
.mist-trefle-v5__numero {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mt-plein);
  color: var(--mt-sur-plein);
  font-family: var(--mt-titre); font-weight: 800; font-size: 20px;
}
.mist-trefle-v5__tete .mist-trefle__question-titre {
  margin: 7px 0 0;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.32;
  color: var(--mt-encre);
}

/* La colonne de lecture : tout le contenu de la question s'aligne sous son
   intitulé, pas sous le rond — l'œil suit une seule marge gauche. */
.mist-trefle-v5__thematique .mist-trefle__question > :not(.mist-trefle-v5__tete) { margin-left: 62px; }
.mist-trefle-v5__thematique .mist-trefle__question-texte {
  color: var(--mt-encre-douce);
  font-size: 16px;
  line-height: 1.65;
  max-width: 72ch;
  margin-bottom: 20px;
}

.mist-trefle-v5 .mist-trefle__reponses { margin-bottom: 18px; }
.mist-trefle-v5 .mist-trefle__reponse label {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 9px 22px; color: var(--mt-encre); border-color: #C9CBDD;
}
.mist-trefle-v5 .mist-trefle__reponse input:checked + label {
  background: var(--mt-plein);
  border-color: var(--mt-plein);
  color: var(--mt-sur-plein);
}

/* Le conseil n'apparaît qu'après la réponse : il arrive, il ne clignote pas. */
.mist-trefle-v5__thematique .mist-trefle__conseils {
  background: var(--mt-voile-fort);
  border-left: 5px solid var(--mt-plein);
  border-radius: 0 14px 14px 0;
  color: var(--mt-encre);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 76ch;
  animation: mist-trefle-v5-arrivee .28s ease-out;
}
.mist-trefle-v5__thematique .mist-trefle__conseils-titre { color: var(--mt-encre); }
@keyframes mist-trefle-v5-arrivee {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.mist-trefle-v5 .mist-trefle__champ--libre { max-width: 76ch; margin-bottom: 18px; }
.mist-trefle-v5__thematique .mist-trefle__ressources { margin-bottom: 0; }

.mist-trefle-v5__navigation {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 20px clamp(16px, 3vw, 32px) 0;
}
.mist-trefle-v5__navigation .mist-trefle__bouton--primaire { margin-left: auto; }

/* ---------- Écran 4 : le plan d'action (R12, R13, R14) ---------- */

.mist-trefle-v5__plan-vide {
  max-width: 76ch;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 5px solid var(--mt-bleu);
  border-radius: 0 14px 14px 0;
  background: #E6E8F3;
  color: var(--mt-encre);
}
.mist-trefle-v5 .mist-trefle__tableau td.est-vierge { height: 46px; }
.mist-trefle-v5 .mist-trefle__tableau td[data-colonne="thematique"] { font-weight: 700; }
.mist-trefle-v5 .mist-trefle__tableau tbody tr:nth-child(even) { background: #F4F3FA; }

.mist-trefle-v5__sorties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mist-trefle-v5__sorties form { margin: 0; display: flex; }

/* ---------- 390 px ---------- */

@media (max-width: 780px) {
  .mist-trefle-v5__dimensions { grid-template-columns: 1fr; }
  .mist-trefle-v5__barre { padding: 12px 14px; }
  .mist-trefle-v5__barre .mist-trefle-v5__vers-plan { width: 100%; }
  .mist-trefle-v5__thematique .mist-trefle__questions,
  .mist-trefle-v5__progres,
  .mist-trefle-v5__navigation { padding-left: 12px; padding-right: 12px; }
  .mist-trefle-v5__thematique .mist-trefle__question { padding: 18px 16px; border-left-width: 5px; }
  .mist-trefle-v5__numero { width: 40px; height: 40px; font-size: 18px; }
  .mist-trefle-v5__tete { gap: 12px; }
  .mist-trefle-v5__tete .mist-trefle__question-titre { margin-top: 5px; font-size: 18px; }
  .mist-trefle-v5__thematique .mist-trefle__question > :not(.mist-trefle-v5__tete) { margin-left: 0; }
  /* Le bouton principal en premier, sous le pouce ; « Précédent » dessous. */
  .mist-trefle-v5__navigation { flex-direction: column-reverse; align-items: stretch; }
  .mist-trefle-v5__navigation .mist-trefle__bouton { width: 100%; margin-left: 0; }
  .mist-trefle-v5__sorties { flex-direction: column; align-items: stretch; }
  .mist-trefle-v5__sorties form, .mist-trefle-v5__sorties .mist-trefle__bouton { width: 100%; }
  .mist-trefle-v5__trefle .mist-trefle__feuille-num { font-size: 22px; }
  .mist-trefle-v5__trefle .mist-trefle__feuille-num .mist-trefle-v5__icone { width: 32px; height: 32px; }
  /* Le tableau passe en fiches : sa légende n'est plus une légende de
     tableau, sinon elle se tasse dans une colonne de 80 px (capture du 24/09). */
  .mist-trefle-v5 .mist-trefle__legende-tableau { display: block; width: 100%; }
  /* Plan vide : deux fiches vierges suffisent à l'écran d'un téléphone. Les
     huit restent dans le Word, le PDF et l'impression. */
  .mist-trefle-v5 .mist-trefle__tableau tbody tr:has(td.est-vierge):nth-child(n+3) { display: none; }
  .mist-trefle-v5__coche::before { width: 22px; height: 22px; margin: -38px 0 0 10px; }
  .mist-trefle-v5__coche::after { width: 5px; height: 10px; margin: -33px 0 0 18.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mist-trefle-v5__thematique .mist-trefle__conseils { animation: none; }
  .mist-trefle-v5__trefle .mist-trefle__feuille { transition: none; }
}

/* ---------- Impression : le plan d'action, même vide (R14) ---------- */

@media print {
  .mist-trefle-v5 .mist-trefle-v5__plan-vide { display: none !important; }
  .mist-trefle-v5 .mist-trefle__tableau { display: table !important; }
  /* Une ligne vierge se remplit au stylo : elle doit avoir de la hauteur. */
  .mist-trefle-v5 .mist-trefle__tableau td.est-vierge { height: 1.3cm; }
  .mist-trefle-v5 .mist-trefle__tableau tbody tr:has(td.est-vierge) { display: table-row !important; }
  .mist-trefle-v5 .mist-trefle__tableau thead th { background: #3E4982 !important; color: #FFFFFF !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Le halo de focus du titre n'a rien à faire sur le papier. */
  .mist-trefle-v5 [tabindex="-1"] { outline-color: transparent !important; }
}