/* =============================================================
   CALCULATEUR « TRÈFLE À 4 FEUILLES » — styles du module (CALC-01)
   -------------------------------------------------------------
   ⚠️ CE FICHIER EST AUTONOME, ET C'EST VOLONTAIRE.
   Il ne dépend ni de `mist-pages.css`, ni des classes globales du kit
   Elementor. Deux raisons mesurées sur ce projet :
     - `mist-pages.css` est chargée APRÈS les styles locaux et les écrase :
       un rembourrage posé ici depuis une classe du kit serait du CSS mort ;
     - le CSS des classes globales n'est généré QUE pour les classes vues dans
       le `_elementor_data` d'une page. Du balisage produit par un shortcode
       n'y figure jamais : les classes du kit sortiraient SANS AUCUN STYLE.
   Les couleurs et les polices de la charte sont reprises par variable, avec
   une valeur de repli, pour que le module tienne debout même hors du thème.

   CONTRASTE : le fond d'une feuille est un VOILE de sa teinte (14 % sur blanc),
   jamais la teinte pleine. Le texte reste donc en #1F2444 sur un fond très
   clair, et le rapport de contraste tient le AA quelle que soit la couleur
   choisie par MIST au back-office — y compris le jaune et le vert, qui en
   aplat plein ne le tiendraient pas.
   ============================================================= */

.mist-trefle {
  --mt-bleu: var(--blue, #3E4982);
  --mt-orange: var(--orange, #E94E1B);
  --mt-encre: var(--ink, #1F2444);
  --mt-encre-douce: var(--ink-soft, #4A5076);
  --mt-discret: var(--ink-muted, #8B91AE);
  --mt-trait: var(--line, #E7E6F2);
  --mt-fond: var(--bg, #FFFFFF);
  --mt-fond-doux: var(--bg-soft, #FAF7F2);
  --mt-titre: var(--mist-font-display, 'Mulish', 'Century Gothic', sans-serif);
  --mt-texte: var(--body, 'Inter', Arial, sans-serif);
  --mt-r: 18px;
  --mt-teinte: var(--blue, #3E4982);

  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px) clamp(16px, 4vw, 32px);
  font-family: var(--mt-texte);
  color: var(--mt-encre);
  font-size: 16.5px;
  line-height: 1.6;
}

.mist-trefle *,
.mist-trefle *::before,
.mist-trefle *::after { box-sizing: border-box; }

/* Le garde-fou `[hidden]` du thème porte un !important ; on ne s'y fie pas :
   un module autonome doit cacher ses écrans tout seul. */
.mist-trefle [hidden] { display: none !important; }

/* ---------- Titres et textes ---------- */

.mist-trefle__surtitre {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mt-titre); font-weight: 800; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mt-orange);
  margin: 0 0 10px;
}
.mist-trefle__surtitre::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

.mist-trefle__titre {
  font-family: var(--mt-titre); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.12; color: var(--mt-encre);
  font-size: clamp(26px, 3.2vw, 38px);
  margin: 0 0 12px;
}
.mist-trefle__entete { margin: 0 0 22px; }
/* Le titre de l'outil reste a l'ecran tout au long du parcours : il porte le
   seul `h1` de la page, et un `h1` qui disparait au premier clic n'en est pas
   un. Le titre d'ecran, lui, est un cran plus discret. */
.mist-trefle__titre--outil { font-size: clamp(28px, 3.6vw, 44px); }
.mist-trefle__titre--ecran { font-size: clamp(20px, 2.2vw, 26px); color: var(--mt-encre-douce); }
.mist-trefle__chapo { font-size: clamp(16px, 1.4vw, 18px); color: var(--mt-encre-douce); margin: 0 0 26px; max-width: 62ch; }
.mist-trefle__intro-outil { margin: 0 0 26px; max-width: 70ch; }
.mist-trefle__intro-outil p {
  font-size: clamp(15px, 1.3vw, 16.5px);
  line-height: 1.6;
  color: var(--mt-encre-douce);
  margin: 0 0 12px;
}
.mist-trefle__intro-suite summary {
  font-family: var(--mt-titre);
  font-weight: 800;
  font-size: 14px;
  /* #3E4982 sur le fond crème : 8,6:1 — conforme AA, contrairement au gris
     clair employé ailleurs avant le 15/09. */
  color: var(--mt-bleu);
  cursor: pointer;
  padding: 4px 0;
}
.mist-trefle__intro-suite summary:focus-visible {
  outline: 3px solid var(--mt-orange);
  outline-offset: 3px;
}
.mist-trefle__intro-suite[open] summary { margin-bottom: 8px; }

.mist-trefle__aide { font-size: 13.5px; color: var(--mt-discret); margin: 6px 0 0; max-width: 70ch; }

.mist-trefle__avertissement {
  background: #FEF3DF; border: 1px solid #F6A124; border-left-width: 5px;
  border-radius: 10px; padding: 12px 16px; margin: 0 0 24px; font-size: 14.5px; color: var(--mt-encre);
}

/* ---------- Formulaires ---------- */

.mist-trefle__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mist-trefle__champ { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mist-trefle__champ label { font-family: var(--mt-titre); font-weight: 700; font-size: 14.5px; color: var(--mt-encre); }
.mist-trefle__requis { color: var(--mt-orange); }
.mist-trefle__facultatif { font-weight: 400; color: var(--mt-discret); }

.mist-trefle input[type="text"],
.mist-trefle input[type="email"],
.mist-trefle input[type="url"],
.mist-trefle select,
.mist-trefle textarea {
  width: 100%;
  font-family: inherit; font-size: 16px; color: var(--mt-encre);
  background: var(--mt-fond);
  border: 1.5px solid var(--mt-trait); border-radius: 12px;
  padding: 11px 14px;
  transition: border-color .18s, box-shadow .18s;
}
.mist-trefle textarea { resize: vertical; min-height: 78px; }
.mist-trefle input:focus-visible,
.mist-trefle select:focus-visible,
.mist-trefle textarea:focus-visible {
  outline: 3px solid var(--mt-orange); outline-offset: 2px; border-color: var(--mt-orange);
}

.mist-trefle__consentement { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; }
.mist-trefle__consentement input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
.mist-trefle__consentement label { font-size: 14.5px; color: var(--mt-encre-douce); max-width: 78ch; }

.mist-trefle__erreur {
  background: #FDEEE9; border: 1px solid var(--mt-orange); border-radius: 10px;
  padding: 10px 14px; color: #8C2A0C; font-size: 14.5px; margin: 16px 0 0;
}

.mist-trefle__mention { font-size: 12.5px; color: var(--mt-discret); line-height: 1.45; }

/* ---------- Boutons ---------- */

.mist-trefle__bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mt-titre); font-weight: 800; font-size: 15px;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .16s, box-shadow .16s, background .16s;
}
.mist-trefle__bouton--primaire { background: var(--mt-orange); color: #fff; }
.mist-trefle__bouton--primaire:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(233, 78, 27, .6); }
.mist-trefle__bouton--secondaire { background: transparent; color: var(--mt-bleu); border-color: var(--mt-bleu); }
.mist-trefle__bouton--secondaire:hover { background: var(--mt-bleu); color: #fff; }
.mist-trefle__bouton:focus-visible { outline: 3px solid var(--mt-encre); outline-offset: 3px; }

.mist-trefle__lien-retour {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--mt-titre); font-weight: 800; font-size: 14px; color: var(--mt-bleu);
  text-decoration: underline; text-underline-offset: 4px;
}
.mist-trefle__lien-retour:hover { color: var(--mt-orange); }
.mist-trefle__lien-retour:focus-visible { outline: 3px solid var(--mt-orange); outline-offset: 3px; }
.mist-trefle__fil { margin: 0 0 14px; }
.mist-trefle__actions { margin: 28px 0 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- LE TRÈFLE ---------- */

.mist-trefle__plante { position: relative; display: flex; justify-content: center; margin: 8px 0 0; }

.mist-trefle__feuilles {
  display: grid;
  grid-template-areas: "nw ne" "sw se";
  gap: 8px;
  width: min(100%, 540px);
}

.mist-trefle__feuille {
  /* La feuille : un carré dont le coin tourné vers le cœur du trèfle est
     droit, les trois autres arrondis. Quatre feuilles côte à côte forment
     la silhouette sans une seule image. */
  grid-area: var(--mt-zone);
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: clamp(12px, 3vw, 26px); text-align: center;
  background: #F4F4F9;
  background: color-mix(in srgb, var(--mt-teinte) 14%, #fff);
  border: 2px solid var(--mt-teinte);
  color: var(--mt-encre);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.mist-trefle__feuille--nw { --mt-zone: nw; border-radius: 50% 50% 6px 50%; }
.mist-trefle__feuille--ne { --mt-zone: ne; border-radius: 50% 50% 50% 6px; }
.mist-trefle__feuille--se { --mt-zone: se; border-radius: 6px 50% 50% 50%; }
.mist-trefle__feuille--sw { --mt-zone: sw; border-radius: 50% 6px 50% 50%; }

.mist-trefle__feuille:hover { transform: scale(1.03); box-shadow: 0 18px 40px -22px rgba(31, 36, 68, .55); }
.mist-trefle__feuille:focus-visible { outline: 4px solid var(--mt-encre); outline-offset: 3px; }

.mist-trefle__feuille-titre {
  font-family: var(--mt-titre); font-weight: 800; font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.2; letter-spacing: -.01em; max-width: 16ch;
}
.mist-trefle__feuille-etat { font-size: 12.5px; color: var(--mt-encre-douce); font-weight: 600; }

/* Feuille remplie : teinte plus franche, et une coche — jamais la couleur
   seule, qui ne dit rien à qui ne la distingue pas. */
.mist-trefle__feuille[data-remplie="1"] {
  background: #E4E1F2;
  background: color-mix(in srgb, var(--mt-teinte) 32%, #fff);
  box-shadow: inset 0 0 0 3px #fff;
}
.mist-trefle__feuille[data-remplie="1"] .mist-trefle__feuille-etat::before { content: "\2713\00a0"; font-weight: 800; }

.mist-trefle__tige {
  position: absolute; bottom: -46px; left: 50%; width: 4px; height: 52px;
  transform: translateX(-50%) rotate(8deg); transform-origin: top center;
  background: #6FBF8A; border-radius: 4px;
}
.mist-trefle__bravo {
  margin: 66px auto 0; text-align: center; font-family: var(--mt-titre);
  font-weight: 800; font-size: 19px; color: #3F8C5C;
}

/* ---------- Confettis (trèfles qui tombent) ---------- */

.mist-trefle__confettis {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60;
}
.mist-trefle__confetti {
  position: absolute; top: -24px; width: 14px; height: 14px;
  animation: mist-trefle-chute linear forwards;
}
@keyframes mist-trefle-chute {
  from { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  to { transform: translateY(105vh) rotate(540deg); opacity: 0; }
}

/* ⚠️ Deux barrières, pas une : le JS n'en pose aucun si le réglage système
   demande moins d'animation, et le CSS les neutralise si un confetti passait
   quand même (état restauré depuis un onglet ouvert avant le réglage). */
@media (prefers-reduced-motion: reduce) {
  .mist-trefle__confettis { display: none; }
  .mist-trefle__feuille, .mist-trefle__bouton, .mist-trefle input, .mist-trefle textarea { transition: none; }
  .mist-trefle__feuille:hover { transform: none; }
}

/* ---------- Une thématique ---------- */

.mist-trefle__thematique {
  background: #FAFAFD;
  background: color-mix(in srgb, var(--mt-teinte) 6%, #fff);
  border-radius: var(--mt-r);
  padding: clamp(18px, 3vw, 34px);
  border-top: 6px solid var(--mt-teinte);
}
.mist-trefle__intro { color: var(--mt-encre-douce); margin: 0 0 26px; max-width: 70ch; }
.mist-trefle__intro p, .mist-trefle__question-texte p, .mist-trefle__conseils p { margin: 0 0 10px; }

.mist-trefle__questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.mist-trefle__question {
  background: var(--mt-fond); border: 1px solid var(--mt-trait);
  border-radius: var(--mt-r); padding: clamp(16px, 2.4vw, 26px);
}
.mist-trefle__question-titre {
  font-family: var(--mt-titre); font-weight: 800; font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.25; margin: 0 0 10px; color: var(--mt-encre);
}
.mist-trefle__question-texte { color: var(--mt-encre-douce); font-size: 15.5px; margin: 0 0 16px; }

.mist-trefle__reponses { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mist-trefle__legende {
  font-family: var(--mt-titre); font-weight: 800; font-size: 13px; color: var(--mt-discret);
  text-transform: uppercase; letter-spacing: .1em; padding: 0; margin: 0 8px 0 0;
}
.mist-trefle__reponse { position: relative; }
.mist-trefle__reponse input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.mist-trefle__reponse label {
  display: inline-block; padding: 9px 20px; border-radius: 999px;
  border: 2px solid var(--mt-trait); background: var(--mt-fond);
  font-family: var(--mt-titre); font-weight: 700; font-size: 14.5px; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.mist-trefle__reponse input:checked + label {
  background: var(--mt-teinte); border-color: var(--mt-teinte); color: #fff;
}
.mist-trefle__reponse input:focus-visible + label { outline: 3px solid var(--mt-encre); outline-offset: 2px; }

.mist-trefle__ressources { margin: 0 0 16px; }
.mist-trefle__ressources-titre,
.mist-trefle__conseils-titre {
  font-family: var(--mt-titre); font-weight: 800; font-size: 13px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--mt-discret); margin: 0 0 8px;
}
.mist-trefle__liens { margin: 0; padding: 0 0 0 18px; }
.mist-trefle__liens li { margin: 0 0 5px; }
.mist-trefle__liens a {
  color: var(--mt-bleu); text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}
.mist-trefle__liens a:hover { color: var(--mt-orange); }
/* ⚠️ Le thème pose `a { color: inherit }` : sans la règle ci-dessus, un lien
   posé dans un paragraphe serait rigoureusement invisible. Piège déjà payé. */
.mist-trefle__hors-site { font-size: 12px; color: var(--mt-discret); font-weight: 400; }

.mist-trefle__conseils {
  background: #F4F4F9;
  background: color-mix(in srgb, var(--mt-teinte) 10%, #fff);
  border-left: 4px solid var(--mt-teinte);
  border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 0 0 18px;
  font-size: 15px; color: var(--mt-encre-douce);
}
.mist-trefle__champ--libre { margin-top: 4px; }

/* ---------- Le plan d'action ---------- */

.mist-trefle__tableau-cadre { margin: 0 0 24px; }
.mist-trefle__tableau { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--mt-fond); }
.mist-trefle__legende-tableau { caption-side: top; text-align: left; font-size: 13.5px; color: var(--mt-discret); padding: 0 0 10px; }
.mist-trefle__tableau th, .mist-trefle__tableau td {
  border: 1px solid var(--mt-trait); padding: 9px 10px; vertical-align: top; text-align: left;
}
.mist-trefle__tableau thead th {
  background: var(--mt-bleu); color: #fff; font-family: var(--mt-titre); font-weight: 800;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
}
.mist-trefle__tableau tbody tr:nth-child(even) { background: #F7F6FB; }
.mist-trefle__tableau input, .mist-trefle__tableau textarea {
  border-width: 1px; border-radius: 8px; padding: 6px 8px; font-size: 13.5px; min-height: 0;
}
.mist-trefle__tableau .mist-trefle__liens { padding-left: 14px; font-size: 12.5px; }
.mist-trefle__vide { color: var(--mt-discret); font-style: italic; }

.mist-trefle__contact {
  background: #FDEEE9; border: 1px solid var(--mt-orange); border-radius: var(--mt-r);
  padding: 20px 24px; margin: 0 0 24px;
}
.mist-trefle__contact-titre { font-family: var(--mt-titre); font-weight: 800; font-size: 18px; margin: 0 0 8px; color: var(--mt-encre); }

.mist-trefle__collecte {
  border: 1px solid var(--mt-trait); border-radius: var(--mt-r);
  padding: 14px 18px; margin: 0 0 24px; background: var(--mt-fond-doux);
}
.mist-trefle__collecte summary { font-family: var(--mt-titre); font-weight: 800; cursor: pointer; }
.mist-trefle__collecte summary:focus-visible { outline: 3px solid var(--mt-orange); outline-offset: 3px; }
.mist-trefle__collecte .mist-trefle__champ { margin-top: 14px; max-width: 420px; }

.mist-trefle__sorties { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.mist-trefle__etat { margin: 22px 0 0; font-size: 13.5px; color: var(--mt-discret); text-align: center; }

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

@media (max-width: 780px) {
  .mist-trefle__champs { grid-template-columns: 1fr; }
  .mist-trefle__feuilles { width: min(100%, 340px); gap: 6px; }
  .mist-trefle__feuille-titre { max-width: 12ch; }
  .mist-trefle__actions, .mist-trefle__sorties { flex-direction: column; }
  .mist-trefle__actions .mist-trefle__bouton, .mist-trefle__sorties .mist-trefle__bouton { width: 100%; }

  /* Le tableau devient une suite de fiches : dix colonnes ne se lisent pas sur
     390 px, et un défilement horizontal sur un tableau à remplir est
     impraticable au doigt. Chaque cellule porte son intitulé, et chaque champ
     de saisie garde son `aria-label` : la correspondance ne dépend donc pas de
     l'entête, qui n'est plus à l'écran. */
  .mist-trefle__tableau, .mist-trefle__tableau tbody, .mist-trefle__tableau tr, .mist-trefle__tableau td { display: block; width: 100%; }
  .mist-trefle__tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .mist-trefle__tableau tr {
    border: 1px solid var(--mt-trait); border-radius: 14px; margin: 0 0 14px; padding: 6px 4px; background: var(--mt-fond);
  }
  .mist-trefle__tableau tbody tr:nth-child(even) { background: #F7F6FB; }
  .mist-trefle__tableau td { border: 0; border-bottom: 1px solid var(--mt-trait); padding: 8px 10px; }
  .mist-trefle__tableau tr td:last-child { border-bottom: 0; }
  .mist-trefle__tableau td::before {
    content: attr(data-intitule);
    display: block; font-family: var(--mt-titre); font-weight: 800; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .08em; color: var(--mt-discret); margin: 0 0 4px;
  }
}

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

@media print {
  /* 🔴 SORTIR LE SITE DE LA FEUILLE, SANS TOUCHER AU SITE.
     Mesure du 15/09 : l'impression sortait l'entete de MIST, le bandeau
     d'annonce, la pastille d'accessibilite et la bulle de discussion avant
     d'arriver au tableau. Aucun de ces morceaux ne nous appartient — ils
     viennent du Theme Builder et de deux greffons, et ce chantier n'a pas le
     droit d'y toucher.
     On neutralise donc par la VISIBILITE, depuis notre propre feuille : elle
     n'est chargee que sur la page du calculateur, donc l'impression du reste du
     site n'est pas affectee. `visibility` plutot que `display` : on ne veut pas
     recalculer la mise en page de morceaux qu'on ne maitrise pas. */
  body * { visibility: hidden; }
  .mist-trefle, .mist-trefle * { visibility: visible; }
  .mist-trefle { position: absolute; left: 0; top: 0; width: 100%; }

  /* Ce qui part à l'imprimante, c'est LE PLAN D'ACTION, et lui seul. */
  .mist-trefle__ecran { display: none !important; }
  .mist-trefle__ecran[data-ecran="plan"] { display: block !important; }
  .mist-trefle__sorties,
  .mist-trefle__collecte,
  .mist-trefle__fil,
  .mist-trefle__etat,
  .mist-trefle__legende-tableau,
  .mist-trefle__avertissement { display: none !important; }

  .mist-trefle { max-width: none; padding: 0; font-size: 11pt; color: #000; }
  .mist-trefle__tableau { font-size: 9pt; }
  .mist-trefle__tableau thead th { background: #3E4982 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mist-trefle__tableau thead { display: table-header-group; }
  .mist-trefle__tableau tr { page-break-inside: avoid; }
  /* Une saisie dans un champ ne s'imprime pas : on imprime sa valeur, posée
     par le script dans `data-valeur`. Sans cela, le papier sort vide. */
  .mist-trefle__tableau input, .mist-trefle__tableau textarea { display: none; }
  .mist-trefle__tableau td[data-valeur]::after { content: attr(data-valeur); }
  .mist-trefle__contact { border: 1px solid #000; }
}