/* =============================================================
   CALCULATEUR TRÈFLE — V6 : les retours de la visio MIST du 30/09
   -------------------------------------------------------------
   🔴 NE SE CHARGE QUE SUR `[mist_trefle variante="v6"]`, APRÈS la feuille V5
   (que la V6 reprend telle quelle : sa racine porte `mist-trefle-v5` ET
   `mist-trefle-v6`). Toutes les règles ci-dessous sont préfixées
   `.mist-trefle-v6` : posée sur la seule racine V6, la classe ne peut atteindre
   aucune des cinq autres pages.

   CE QUE LA V6 AJOUTE
     R1  le trèfle-médaillon (P1 « Cœur plié » au centre de P6 « Médaillon ») ;
     R2  « Pour aller plus loin » sous la question, dans le plan ;
     R3  la priorité en liste ;
     R4  « Ajouter ce conseil à mes actions ».

   LES COULEURS DES FEUILLES NE SONT PAS ÉCRITES ICI : chaque feuille reçoit
   en style en ligne sa teinte (back-office), la moitié claire de son pli et
   l'encre de son numéro, calculées côté serveur (`mist_trefle_v6_variables()`).
   Aucun `color-mix()` : une déclaration non comprise rendrait la feuille
   transparente.
   ============================================================= */

/* ---------- R1 : le trèfle-médaillon ---------- */

/* 380 px en bureau, 290 px en téléphone : les tailles mesurées du trèfle V5,
   que MIST a vues et jugées lisibles. */
.mist-trefle-v6 .mist-trefle-v6__medaillon {
  width: min(100%, 380px);
  margin: 6px auto 28px;
}
.mist-trefle-v6 .mist-trefle-v6__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--mt-titre);
}

.mist-trefle-v6 .mist-trefle-v6__medaille { fill: #FFFFFF; stroke: #2A3265; stroke-width: 2; }
.mist-trefle-v6 .mist-trefle-v6__tige { fill: none; stroke: #6FBF8A; stroke-width: 8; stroke-linecap: round; }
.mist-trefle-v6 .mist-trefle-v6__tige-trait { fill: none; stroke: #2A3265; stroke-width: 12.4; stroke-linecap: round; }

/* L'anneau : la piste lilas des illustrations, et la jauge dans la couleur de
   la feuille. `pathLength="100"` : le script pose la part répondue comme
   longueur du tiret, sans calcul d'arc. */
.mist-trefle-v6 .mist-trefle-v6__piste { fill: none; stroke: #E4E1F2; stroke-width: 16; stroke-linecap: round; }
.mist-trefle-v6 .mist-trefle-v6__jauge {
  fill: none;
  stroke: var(--mt-teinte);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .5s ease-out;
}
/* ⚠️ Un tiret de longueur nulle aux bouts ARRONDIS dessine un point : une
   feuille non commencée montrerait une pastille de couleur sur la piste. */
.mist-trefle-v6 .mist-trefle-v6__feuille[data-etat="vide"] .mist-trefle-v6__jauge { display: none; }

/* La feuille de P1 : aplat, moitié claire du pli, pli, contour bleu nuit. */
.mist-trefle-v6 .mist-trefle-v6__feuille { cursor: pointer; }
.mist-trefle-v6 .mist-trefle-v6__corps { fill: var(--mt-teinte); transition: filter .2s; }
.mist-trefle-v6 .mist-trefle-v6__clair { fill: var(--mt-clair); transition: filter .2s; }
.mist-trefle-v6 .mist-trefle-v6__pli { fill: none; stroke: #2A3265; stroke-width: 1.5; stroke-linecap: round; opacity: .45; }
.mist-trefle-v6 .mist-trefle-v6__contour { fill: none; stroke: #2A3265; stroke-width: 2.3; stroke-linejoin: round; }
.mist-trefle-v6 .mist-trefle-v6__feuille:hover .mist-trefle-v6__corps,
.mist-trefle-v6 .mist-trefle-v6__feuille:hover .mist-trefle-v6__clair { filter: brightness(1.07) saturate(1.05); }

/* Le numéro : GRAND texte (27 unités, gras — 21,8 px à 290 px), encre choisie
   contre les DEUX tons de la feuille. */
.mist-trefle-v6 .mist-trefle-v6__numero {
  fill: var(--mt-num);
  font-size: 27px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* La coche d'une thématique terminée : la pastille blanche de P1, posée dans
   l'échancrure du cœur. Le numéro reste : c'est lui que les étiquettes citent. */
.mist-trefle-v6 .mist-trefle-v6__coche { display: none; pointer-events: none; }
.mist-trefle-v6 .mist-trefle-v6__feuille[data-etat="fait"] .mist-trefle-v6__coche { display: inline; }
.mist-trefle-v6 .mist-trefle-v6__coche circle { fill: #FFFFFF; stroke: #2A3265; stroke-width: 2; }
.mist-trefle-v6 .mist-trefle-v6__coche path { fill: none; stroke: #2A3265; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* 🔴 LE FOCUS SE VOIT SUR LA FEUILLE ELLE-MÊME. Le contour du navigateur se
   poserait sur la boîte englobante du groupe (feuille + arc) : un rectangle
   sans rapport avec la forme. On trace donc un halo — blanc, puis bleu nuit —
   sur le contour du cœur. `outline` transparent et non nul : invisible
   d'ordinaire, il redevient visible en mode de contraste forcé. */
.mist-trefle-v6 .mist-trefle-v6__feuille:focus { outline: 2px solid transparent; }
.mist-trefle-v6 .mist-trefle-v6__focus-fond,
.mist-trefle-v6 .mist-trefle-v6__focus { display: none; fill: none; stroke-linejoin: round; pointer-events: none; }
.mist-trefle-v6 .mist-trefle-v6__focus-fond { stroke: #FFFFFF; stroke-width: 9; }
.mist-trefle-v6 .mist-trefle-v6__focus { stroke: #1F2444; stroke-width: 4; }
.mist-trefle-v6 .mist-trefle-v6__feuille:focus-visible .mist-trefle-v6__focus-fond,
.mist-trefle-v6 .mist-trefle-v6__feuille:focus-visible .mist-trefle-v6__focus { display: inline; }

.mist-trefle-v6 .mist-trefle-v6__centre circle { fill: #FFFFFF; stroke: #2A3265; stroke-width: 2.4; }
.mist-trefle-v6 .mist-trefle-v6__centre text {
  fill: #1F2444; font-size: 17px; font-weight: 800;
  text-anchor: middle; dominant-baseline: central;
}

/* Les étiquettes : celles de la V5, un peu plus près du médaillon. */
.mist-trefle-v6 .mist-trefle-v6__trefle .mist-trefle__legende { margin-top: 0; }

/* ---------- R4 : « Ajouter ce conseil à mes actions » ---------- */

.mist-trefle-v6 .mist-trefle-v6__conseil .mist-trefle__conseils { margin-bottom: 6px; }
.mist-trefle-v6 .mist-trefle-v6__ajout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin: 0 0 18px;
}
/* Un bouton, habillé en lien : discret, mais souligné et dans le bleu des
   liens du module (8,6:1 sur blanc). */
.mist-trefle-v6 .mist-trefle-v6__ajouter {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px;
  margin: 0; padding: 4px 2px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--mt-bleu);
  font-family: var(--mt-titre); font-weight: 700; font-size: 14.5px; line-height: 1.3;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  cursor: pointer;
}
.mist-trefle-v6 .mist-trefle-v6__ajouter:hover { color: #2A3265; text-decoration-thickness: 2px; }
.mist-trefle-v6 .mist-trefle-v6__ajouter:focus-visible { outline: 3px solid var(--mt-orange-texte); outline-offset: 2px; }
.mist-trefle-v6 .mist-trefle-v6__icone-copie { flex: 0 0 auto; display: block; }
/* La confirmation : discrète, en vert foncé (5,9:1 sur blanc), précédée
   d'une coche dessinée — aucun glyphe qu'une police pourrait ne pas porter. */
.mist-trefle-v6 .mist-trefle-v6__ajoute {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #2F6B47;
}
.mist-trefle-v6 .mist-trefle-v6__ajoute.est-ajoute::before {
  content: ""; flex: 0 0 auto; width: 5px; height: 10px; margin: 0 3px 3px 2px;
  border-right: 2.5px solid #2F6B47; border-bottom: 2.5px solid #2F6B47;
  transform: rotate(45deg);
}
.mist-trefle-v6 .mist-trefle-v6__ajoute.est-deja { color: var(--mt-encre-douce); }

/* ---------- R2 et R3 : le plan d'action ---------- */

.mist-trefle-v6 .mist-trefle-v6__intitule { display: block; }
/* R4 : un conseil ajouté arrive « sur une nouvelle ligne » — le plan garde
   les retours à la ligne de la saisie, au lieu de tout mettre bout à bout. */
.mist-trefle-v6 .mist-trefle-v6__plan td[data-colonne="action"] { white-space: pre-line; }
/* « Pour aller plus loin » : le même bloc qu'à l'étape de la question, à
   l'échelle du tableau. */
.mist-trefle-v6 .mist-trefle-v6__plan .mist-trefle__ressources {
  margin: 10px 0 0;
  padding: 9px 0 0;
  border-top: 1px dashed #D5D3E6;
}
.mist-trefle-v6 .mist-trefle-v6__plan .mist-trefle__ressources-titre { font-size: 11.5px; margin: 0 0 5px; }
.mist-trefle-v6 .mist-trefle-v6__plan .mist-trefle__liens { font-size: 13.5px; padding-left: 16px; list-style: circle; }
.mist-trefle-v6 .mist-trefle-v6__plan .mist-trefle__liens li { margin: 0 0 3px; }
.mist-trefle-v6 .mist-trefle-v6__plan .mist-trefle__hors-site { font-size: 11.5px; }

/* R3 : la priorité, une liste. Sa flèche est dessinée : celle du système
   change d'un navigateur à l'autre et disparaît sur iOS.
   ⚠️ UNE LARGEUR MINIMALE : sans elle, la colonne se resserre et « Priorité 2 »
   sort tronqué en « Priorité ; » (capture du 30/09). */
.mist-trefle-v6 .mist-trefle-v6__priorite {
  appearance: none; -webkit-appearance: none;
  min-width: 8.8em;
  min-height: 40px;
  padding: 7px 30px 7px 10px;
  border: 1px solid #C9CBDD; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--mt-encre);
  background-color: #FFFFFF;
  background-image: linear-gradient(45deg, transparent 50%, #4A5076 50%), linear-gradient(135deg, #4A5076 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ⚠️ DES LARGEURS POSÉES, EN BUREAU. « Pour aller plus loin » élargit la
   colonne Question, et un tableau en largeur automatique se paie ailleurs :
   le Délai tombait à 60 px et « 1er trimestre » se coupait (capture du
   30/09). Les parts suivent celles du Word et du PDF (question et action à
   la moitié). En 390, le tableau passe en fiches : ces largeurs ne jouent pas. */
@media (min-width: 781px) {
  .mist-trefle-v6 .mist-trefle-v6__plan th[data-colonne="thematique"] { width: 10%; }
  .mist-trefle-v6 .mist-trefle-v6__plan th[data-colonne="question"] { width: 25%; }
  .mist-trefle-v6 .mist-trefle-v6__plan th[data-colonne="reponse"] { width: 9%; }
  .mist-trefle-v6 .mist-trefle-v6__plan th[data-colonne="action"] { width: 23%; }
  .mist-trefle-v6 .mist-trefle-v6__plan th[data-colonne="priorisation"] { width: 12%; }
  .mist-trefle-v6 .mist-trefle-v6__plan th[data-colonne="qui"] { width: 10%; }
  .mist-trefle-v6 .mist-trefle-v6__plan th[data-colonne="quand"] { width: 11%; }
}

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

@media (max-width: 780px) {
  .mist-trefle-v6 .mist-trefle-v6__medaillon { width: min(100%, 290px); margin-bottom: 22px; }
  .mist-trefle-v6 .mist-trefle-v6__ajouter { min-height: 44px; }
  .mist-trefle-v6 .mist-trefle-v6__priorite { min-height: 44px; width: 100%; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mist-trefle-v6 .mist-trefle-v6__jauge,
  .mist-trefle-v6 .mist-trefle-v6__corps,
  .mist-trefle-v6 .mist-trefle-v6__clair { transition: none; }
}

/* ---------- Impression ---------- */

@media print {
  /* Une liste ne s'imprime pas : sa valeur, posée dans `data-valeur`, sort à
     sa place (règle du module). */
  .mist-trefle-v6 .mist-trefle__tableau select { display: none !important; }
  /* Sur papier, un lien n'est plus qu'un mot souligné : l'adresse suit. */
  .mist-trefle-v6 .mist-trefle-v6__plan .mist-trefle__liens a::after { content: " — " attr(href); font-weight: 400; word-break: break-all; }
  .mist-trefle-v6 .mist-trefle-v6__plan .mist-trefle__hors-site { display: none; }
}