/* =============================================================
   CALCULATEUR TRÈFLE — V2 du dessin (CALC-01)
   -------------------------------------------------------------
   🔴 CETTE FEUILLE NE SE CHARGE QUE SUR `[mist_trefle variante="v2"]`.
   Elle vient APRÈS `mist-trefle.css` et ne surcharge que l'écran du trèfle.
   Tout le reste du parcours — accueil, thématique, plan d'action — est
   rigoureusement celui de la V1, et doit le rester : le lien envoyé à MIST
   pointe la V1.

   Les sélecteurs sont préfixés `.mist-trefle-v2` : posés sur la seule section
   du trèfle, ils ne peuvent pas atteindre une page qui n'a pas la variante.
   ============================================================= */

/* ---------- La plante ---------- */

.mist-trefle-v2 .mist-trefle__plante {
  position: relative;
  /* La V1 pose `display:flex` sur cet élément : sans cette ligne, la grille
     des folioles devient un enfant flex et cesse de remplir le carré. */
  display: block;
  width: min(100%, 512px);
  /* La tige déborde sous les folioles : on lui réserve la place ici plutôt que
     de la laisser pousser le bouton d'action. */
  margin: 8px auto 86px;
  aspect-ratio: 1 / 1;
}

.mist-trefle-v2 .mist-trefle__feuilles {
  display: grid;
  grid-template-areas: "nw ne" "sw se";
  gap: 0;              /* les folioles se touchent par leur pointe */
  width: 100%;
  height: 100%;
}

/* ---------- Une foliole ---------- */

.mist-trefle-v2 .mist-trefle__feuille {
  grid-area: var(--mt-zone);
  position: relative;
  aspect-ratio: auto;  /* annule le carré de la V1 : la grille suffit */
  display: block;
  padding: 0;
  border: 0;
  background: none;    /* ⚠️ le fond et le contour passent au SVG */
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mist-trefle-v2 .mist-trefle__feuille--nw { --mt-zone: nw; }
.mist-trefle-v2 .mist-trefle__feuille--ne { --mt-zone: ne; }
.mist-trefle-v2 .mist-trefle__feuille--sw { --mt-zone: sw; }
.mist-trefle-v2 .mist-trefle__feuille--se { --mt-zone: se; }

.mist-trefle-v2 .mist-trefle__feuille:hover { transform: none; box-shadow: none; }

.mist-trefle-v2 .mist-trefle__folioles {
  width: 100%;
  height: 100%;
  display: block;
  /* La foliole pivotée sort de son viewBox : sans ça, elle est rognée. */
  overflow: visible;
}

.mist-trefle-v2 .mist-trefle__folio-corps {
  fill: var(--mt-teinte);
  opacity: .14;
  transition: opacity .22s;
}
.mist-trefle-v2 .mist-trefle__folio-contour {
  fill: none;
  stroke: var(--mt-teinte);
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition: stroke-width .22s;
}
/* La nervure : le trait arrondi des icônes du site, posé dans l'aplat des
   illustrations. C'est ce détail qui rattache le trèfle à la charte. */
.mist-trefle-v2 .mist-trefle__folio-nervure {
  fill: none;
  stroke: var(--mt-teinte);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .34;
}

.mist-trefle-v2 .mist-trefle__feuille:hover .mist-trefle__folio-corps { opacity: .24; }
.mist-trefle-v2 .mist-trefle__feuille:hover .mist-trefle__folio-contour { stroke-width: 3.2; }

.mist-trefle-v2 .mist-trefle__feuille[data-remplie="1"] .mist-trefle__folio-corps { opacity: .38; }

/* ⚠️ Le focus se pose sur le DESSIN, pas sur la boîte du bouton : un halo
   rectangulaire autour d'une feuille ronde se lit comme un défaut. */
.mist-trefle-v2 .mist-trefle__feuille:focus-visible { outline: none; }
.mist-trefle-v2 .mist-trefle__feuille:focus-visible .mist-trefle__folio-contour {
  stroke-width: 4;
  stroke-dasharray: 7 5;
}

/* ---------- Le texte, posé sur la foliole ---------- */

.mist-trefle-v2 .mist-trefle__feuille-texte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8%;
  pointer-events: none;
  text-align: center;
}
/* ⚠️ La foliole est décalée VERS LE CENTRE du trèfle : le texte doit suivre,
   sinon il déborde du côté extérieur, là où il n'y a plus de feuille.
   Mesuré à l'atelier — centré dans la case, il sortait de l'aplat. */
.mist-trefle-v2 .mist-trefle__feuille--nw .mist-trefle__feuille-texte { transform: translate(14%, 14%); }
.mist-trefle-v2 .mist-trefle__feuille--ne .mist-trefle__feuille-texte { transform: translate(-14%, 14%); }
.mist-trefle-v2 .mist-trefle__feuille--sw .mist-trefle__feuille-texte { transform: translate(14%, -14%); }
.mist-trefle-v2 .mist-trefle__feuille--se .mist-trefle__feuille-texte { transform: translate(-14%, -14%); }

/* ⚠️ « Gestion des emplois et parcours professionnels (GEPP) » fait 52
   caractères : à 9ch il débordait de l'aplat. Les titres viennent de MIST, on
   ne peut ni les raccourcir ni les tronquer — on élargit et on coupe les mots. */
.mist-trefle-v2 .mist-trefle__feuille-titre {
  font-family: var(--mt-titre);
  font-weight: 800;
  font-size: clamp(12px, 1.35vw, 14px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--mt-encre);
  max-width: 12ch;
  hyphens: auto;
  overflow-wrap: break-word;
}
.mist-trefle-v2 .mist-trefle__feuille-etat {
  font-size: clamp(10.5px, 1.1vw, 11.5px);
  font-weight: 600;
  /* #4A5076 sur l'aplat très clair : 7,4:1, conforme AA. */
  color: var(--mt-encre-douce);
}
/* 🔴 LA COCHE EST UN DESSIN. La V1 la pose en CSS avec `content: "\2713"` :
   aucune police de la pile ne porte le glyphe, et le rendu sort « ǔ » (mesuré
   le 15/09, capture à l'appui). Un `path` ne dépend d'aucun parc de polices.
   ⚠️ La règle `content` de la V1 est neutralisée ici, sinon les deux coches
   s'affichent l'une à côté de l'autre. */
.mist-trefle-v2 .mist-trefle__feuille[data-remplie="1"] .mist-trefle__feuille-etat::before {
  content: none;
}
.mist-trefle-v2 .mist-trefle__coche {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #2F6B47;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .2s;
}
.mist-trefle-v2 .mist-trefle__feuille[data-remplie="1"] .mist-trefle__coche { opacity: 1; }
.mist-trefle-v2 .mist-trefle__feuille[data-remplie="1"] .mist-trefle__feuille-etat {
  color: #2F6B47;   /* 5,6:1 sur l'aplat — le vert de la charte ne passait pas */
}
/* La coche et son libellé sur une même ligne. */
.mist-trefle-v2 .mist-trefle__feuille-ligne {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Le cœur et la tige ---------- */

.mist-trefle-v2 .mist-trefle__noeud {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--mt-fond-doux);
  box-shadow: 0 0 0 2px var(--mt-trait);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mist-trefle-v2 .mist-trefle__noeud span {
  font-family: var(--mt-titre);
  font-weight: 800;
  font-size: 15px;
  color: var(--mt-bleu);
}

/* ⚠️ La tige de la V1 (un <span> en CSS) est masquée ici : les deux
   coexisteraient sinon, l'une sous l'autre. */
.mist-trefle-v2 .mist-trefle__tige { display: none; }

.mist-trefle-v2 .mist-trefle__tige-v2 {
  position: absolute;
  left: 50%;
  top: 86%;
  width: 70px;
  height: 104px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
}

.mist-trefle-v2 .mist-trefle__bravo { margin-top: 0; }

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

@media (max-width: 780px) {
  .mist-trefle-v2 .mist-trefle__plante {
    width: min(100%, 330px);
    margin-bottom: 72px;
  }
  .mist-trefle-v2 .mist-trefle__noeud {
    width: 44px; height: 44px; margin: -22px 0 0 -22px;
  }
  .mist-trefle-v2 .mist-trefle__noeud span { font-size: 13px; }
  .mist-trefle-v2 .mist-trefle__tige-v2 { width: 54px; height: 80px; }
  /* ⚠️ 8ch coupait tous les titres : « Condi-tions », « Res-sources ».
     Quatre cesures sur quatre feuilles, c'est un trefle illisible. On elargit
     et on descend d'un cran en taille — la foliole a la place, pas le mot. */
  .mist-trefle-v2 .mist-trefle__feuille-titre { max-width: 11ch; font-size: 11.5px; }
  .mist-trefle-v2 .mist-trefle__feuille-etat { font-size: 10px; }
  .mist-trefle-v2 .mist-trefle__feuille--nw .mist-trefle__feuille-texte { transform: translate(10%, 10%); }
  .mist-trefle-v2 .mist-trefle__feuille--ne .mist-trefle__feuille-texte { transform: translate(-10%, 10%); }
  .mist-trefle-v2 .mist-trefle__feuille--sw .mist-trefle__feuille-texte { transform: translate(10%, -10%); }
  .mist-trefle-v2 .mist-trefle__feuille--se .mist-trefle__feuille-texte { transform: translate(-10%, -10%); }
}

/* ---------- Mouvement ---------- */

@media (prefers-reduced-motion: reduce) {
  .mist-trefle-v2 .mist-trefle__folio-corps,
  .mist-trefle-v2 .mist-trefle__folio-contour { transition: none; }
}

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

@media print {
  /* Le trèfle ne s'imprime pas : seul le plan d'action part sur le papier.
     La règle de la V1 s'en charge déjà — on ne la contredit pas ici. */
  .mist-trefle-v2 .mist-trefle__tige-v2,
  .mist-trefle-v2 .mist-trefle__noeud { display: none !important; }
}