/* =============================================================================
   VanillaMilk - Page Tarifs (/css/tarifs.css)
   Refonte du 01/10/2026. Dépend de vm-tokens.css et custom.css.

   - Chargé par $donneesSupplementairesHeader, donc AVANT custom.css (B1) :
     les règles qui doivent gagner sont préfixées #main-tarifs.
   - Jetons seuls, aucun :root, aucun repli dans un var().
     #ffffff et #000000 uniquement en second terme d'un color-mix().
   - Mobile-first, une seule bascule : 577 px (A5). Garanties et chiffres :
     grille auto-fit, sans media query.
   - Aucun !important : #main-tarifs (spécificité 1,x,x) passe devant les
     règles de lien du thème et de custom.css sans les forcer.
   - Mouvement réduit : bloc global de custom.css.

   Blocs : base, en-têtes, bandeau pros, bascule mensuel/annuel, cartes,
   détails repliables, antériorité, confiance, comparatif, accompagnement, FAQ.
   ============================================================================= */

#main-tarifs { font-family: var(--vm-font-base); color: var(--vm-bleu); }
#main-tarifs *, #main-tarifs *::before, #main-tarifs *::after { box-sizing: border-box; }

/* Ancres : le header sticky ne recouvre pas la cible. */
#main-tarifs [id] { scroll-margin-top: var(--vm-header-offset); }


/* --- EN-TÊTES DE SECTION ------------------------------------------------------ */
.tarifs-section-header { text-align: center; margin-bottom: var(--vm-space-4); }
.tarifs-section-header .policeTitre { margin-top: .1rem; }


/* --- BANDEAU « professionnels déjà inscrits » ---------------------------------- */
.tarifs-bandeau-pros {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 620px; margin: 0 auto var(--vm-space-4); padding: 10px 16px;
  background: color-mix(in srgb, var(--vm-cyan) 12%, #ffffff);
  border-radius: var(--vm-radius-md);
  font-size: var(--vm-fs-sm); line-height: 1.45; color: var(--vm-bleu); text-align: center;
}
.tarifs-bandeau-pros i { flex-shrink: 0; font-size: 1.15rem; color: var(--vm-cyan); }
.tarifs-bandeau-pros__appel { color: var(--vm-bleu); }


/* --- BASCULE MENSUEL / ANNUEL ------------------------------------------------- */
.tarifs-toggle { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: var(--vm-space-6); }
.tarifs-toggle__row { display: flex; align-items: center; gap: 12px; }
.tarifs-toggle__label {
  min-width: 66px; text-align: center; user-select: none;
  font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-semi); color: var(--vm-text-muted);
  transition: color var(--vm-transition-fast);
}
.tarifs-toggle__label--actif { color: var(--vm-bleu); }
.tarifs-toggle__bouton {
  position: relative; flex-shrink: 0; width: 54px; height: 26px; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--vm-bleu) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--vm-bleu) 20%, #ffffff);
  border-radius: var(--vm-radius-pill);
  transition: background-color var(--vm-transition);
}
/* Zone tactile de 48 px autour de l'interrupteur. */
.tarifs-toggle__bouton::after { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); }
.tarifs-toggle__bouton:focus-visible { outline: 2px solid var(--vm-bleu); outline-offset: 3px; }
.tarifs-toggle__knob {
  position: absolute; top: 2px; left: 2px; display: block; width: 20px; height: 20px;
  background: var(--vm-bleu); border-radius: 50%; pointer-events: none;
  box-shadow: 0 1px 2px rgb(var(--vm-ombre-rgb) / .2);
  transition: transform var(--vm-transition);
}
.tarifs-toggle__bouton--actif .tarifs-toggle__knob { transform: translateX(28px); }
.tarifs-toggle__badge {
  min-height: 20px; padding: 3px 12px; border-radius: var(--vm-radius-sm);
  font-size: var(--vm-fs-xs); font-weight: var(--vm-fw-bold);
  color: color-mix(in srgb, var(--vm-rose) 82%, #000000);
  background: color-mix(in srgb, var(--vm-rose) 15%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--vm-rose) 38%, #ffffff);
}


/* --- CARTES DES FORMULES ------------------------------------------------------ */
.tarifs-grille {
  display: grid; grid-template-columns: 1fr; gap: var(--vm-space-5);
  align-items: stretch; max-width: 1040px; margin: 0 auto var(--vm-space-4);
}
@media (min-width: 577px) {
  .tarifs-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vm-space-3); }
}

.tarifs-carte {
  position: relative; display: flex; flex-direction: column;
  padding: var(--vm-space-4) var(--vm-space-3); background: var(--vm-blanc);
  border: 1px solid var(--vm-border); border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-sm); transition: box-shadow var(--vm-transition);
}
.tarifs-carte:hover { box-shadow: var(--vm-shadow-md); }
.tarifs-carte--vedette { border: 2px solid var(--vm-bleu); box-shadow: var(--vm-shadow-lg); }
.tarifs-carte__badge-slot { min-height: 0; margin: 0; }
/* Badge sur fond bleu (6,8:1). L'ancien fond cyan donnait 2,5:1, sous AA. */
#main-tarifs .tarifs-carte__badge {
  position: absolute; top: 0; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: max-content; max-width: calc(100% - 16px); padding: 4px 12px; border-radius: var(--vm-radius-pill);
  text-align: center; line-height: 1.3;
  background: var(--vm-bleu); color: var(--vm-blanc);
  font-size: var(--vm-fs-xs); font-weight: var(--vm-fw-bold); letter-spacing: .4px;
  box-shadow: var(--vm-shadow-sm);
}
.tarifs-carte__nom {
  display: flex; align-items: center; justify-content: center; margin: 0 0 4px;
  font-size: var(--vm-fs-lg); font-weight: var(--vm-fw-bold); line-height: 1.25;
  color: var(--vm-bleu); text-align: center;
}
.tarifs-carte__accroche {
  margin: 0 0 var(--vm-space-3); text-align: center;
  font-size: var(--vm-fs-sm); line-height: 1.5; color: var(--vm-text-muted);
}
/* Hauteurs égales des en-têtes seulement quand les cartes sont côte à côte. */
@media (min-width: 577px) {
  .tarifs-carte__nom { min-height: 2.5em; }
  .tarifs-carte__accroche { min-height: 4.5em; }
}
.tarifs-carte__prix { margin-bottom: var(--vm-space-3); text-align: center; }
.tarifs-carte__montant { display: block; font-size: 2rem; font-weight: var(--vm-fw-bold); line-height: 1.05; color: var(--vm-bleu); }
.tarifs-carte__montant--gratuit { color: var(--vm-bleu-clair); }
.tarifs-carte__periode { display: block; margin-top: 5px; font-size: var(--vm-fs-xs); line-height: 1.45; color: var(--vm-text-muted); }
/* Intertitre de la liste (« Tout le … , et : ») : texte, jamais une pastille,
   pour ne pas ressembler au bouton « En savoir plus ». */
.tarifs-carte__inclus {
  margin: 0 0 4px; padding: 10px 0 0;
  border-top: 1px solid var(--vm-border);
  font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-bold); line-height: 1.4; color: var(--vm-bleu);
}
/* Quatre points clés par carte, le reste est replié dans .tarifs-plus. */
#main-tarifs .tarifs-carte__benefices { list-style: none; padding: 0; margin: 0 0 var(--vm-space-3); flex: 1; }
.tarifs-carte__benefices li {
  position: relative; padding: 7px 0 7px 22px; line-height: 1.45;
  font-size: var(--vm-fs-sm); color: var(--vm-bleu);
  border-bottom: 1px solid color-mix(in srgb, var(--vm-border) 55%, #ffffff);
}
.tarifs-carte__benefices li:last-child { border-bottom: none; }
.tarifs-carte__benefices li::before {
  content: "\2713"; position: absolute; left: 0; top: 7px;
  font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-bold); color: var(--vm-turquoise);
}

/* Boutons des cartes. */
.tarifs-carte__cta {
  display: block; width: 100%; min-height: 44px; margin-top: var(--vm-space-3); padding: 12px 8px;
  text-align: center; border-radius: var(--vm-radius-sm);
  font-family: var(--vm-font-base); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-bold); line-height: 1.3;
  cursor: pointer; transition: opacity var(--vm-transition-fast), transform var(--vm-transition-fast);
}
.tarifs-carte__cta:hover { opacity: .9; }
.tarifs-carte__cta:active { transform: scale(.98); }
.tarifs-carte__cta:focus-visible { outline: 2px solid var(--vm-bleu); outline-offset: 3px; }
#main-tarifs .tarifs-carte__cta { text-decoration: none; }
#main-tarifs .tarifs-carte__cta--principal { background: var(--vm-bleu); color: var(--vm-blanc); border: 2px solid var(--vm-bleu); }
#main-tarifs .tarifs-carte__cta--secondaire { background: transparent; color: var(--vm-bleu); border: 2px solid var(--vm-bleu); }
#main-tarifs .tarifs-carte__cta--secondaire:hover { background: var(--vm-bleu-pale); opacity: 1; }

/* Formule pas encore souscriptible : une mention, pas un bouton. */
#main-tarifs .tarifs-cta--attente,
#main-tarifs .tarifs-cta--attente:hover {
  display: inline-block; cursor: default; opacity: 1; transform: none; box-shadow: none;
  background: var(--vm-gris-fond); color: var(--vm-text-muted);
  border: 2px dashed var(--vm-gris-bord);
}
#main-tarifs .tarifs-carte__cta.tarifs-cta--attente { display: block; }

.tarifs-carte__reassurance { margin: 8px 0 0; text-align: center; font-size: var(--vm-fs-xs); color: var(--vm-text-muted); }

/* Mention « Bientôt » (cartes et comparatif). */
.tarifs-bientot {
  display: inline-block; margin-left: 4px; padding: 1px 8px; vertical-align: 1px;
  border-radius: var(--vm-radius-pill); white-space: nowrap;
  background: var(--vm-jaune-pale); color: var(--vm-bleu-fonce);
  border: 1px solid color-mix(in srgb, var(--vm-jaune) 60%, #ffffff);
  font-size: .7rem; font-weight: var(--vm-fw-bold); line-height: 1.5;
}

.tarifs-comparer { margin: var(--vm-space-4) 0 0; text-align: center; }
#main-tarifs .tarifs-comparer a { font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-bold); color: var(--vm-bleu); }


/* --- DÉTAILS REPLIABLES (cartes, antériorité) --------------------------------- */
.tarifs-plus { margin: 0 0 var(--vm-space-2); }
/* Bouton à déplier : contour, chevron, fond plein au survol. */
.tarifs-plus > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px;
  list-style: none; cursor: pointer; border-radius: var(--vm-radius-pill);
  background: var(--vm-blanc); color: var(--vm-bleu); border: 1.5px solid var(--vm-bleu);
  font-size: var(--vm-fs-xs); font-weight: var(--vm-fw-bold); line-height: 1.3;
  transition: background-color var(--vm-transition-fast), color var(--vm-transition-fast);
}
.tarifs-plus > summary::-webkit-details-marker { display: none; }
.tarifs-plus > summary::after { content: "\25BE"; flex-shrink: 0; transition: rotate var(--vm-transition-fast); }
.tarifs-plus[open] > summary::after { rotate: 180deg; }
.tarifs-plus > summary:hover { background: var(--vm-bleu); color: var(--vm-blanc); }
.tarifs-plus > summary:focus-visible { outline: 2px solid var(--vm-bleu); outline-offset: 2px; }
.tarifs-plus__liste {
  margin: var(--vm-space-2) 0 0; padding: 10px 12px;
  background: color-mix(in srgb, var(--vm-bleu) 4%, #ffffff); border-radius: var(--vm-radius-sm);
  font-size: var(--vm-fs-xs); line-height: 1.55;
}
.tarifs-plus__liste dt { margin: 0; font-weight: var(--vm-fw-bold); color: var(--vm-bleu); }
.tarifs-plus__liste dd { margin: 2px 0 var(--vm-space-2); color: var(--vm-text); }
.tarifs-plus__liste dd:last-child { margin-bottom: 0; }

/* Variante dans un encadré coloré : fond blanc, texte normal. */
.tarifs-plus--callout { margin: var(--vm-space-3) 0; }
.tarifs-plus--callout > summary { background: var(--vm-blanc); font-size: var(--vm-fs-sm); }
.tarifs-plus--callout .tarifs-plus__liste { background: var(--vm-blanc); font-size: var(--vm-fs-sm); }


/* --- DÉJÀ RÉFÉRENCÉ(E) (jusqu'au 15/11) ---------------------------------------- */
#main-tarifs .tarifs-anteriorite__titre {
  margin: 0 0 var(--vm-space-2);
  font-size: var(--vm-fs-lg); font-weight: var(--vm-fw-bold); line-height: 1.3; color: var(--vm-bleu);
}
.tarifs-anteriorite__pourquoi { margin: 0; font-size: var(--vm-fs-sm); color: var(--vm-text-muted); }
.tarifs-accent { color: color-mix(in srgb, var(--vm-rose) 85%, #000000); }


/* --- CONFIANCE : garanties et chiffres ---------------------------------------- */
.tarifs-garantie__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--vm-space-4);
  max-width: 960px; margin: 0 auto var(--vm-space-6);
}
.tarifs-garantie__pilier { padding: var(--vm-space-4); text-align: center; background: var(--vm-blanc); border-radius: var(--vm-radius-lg); }
.tarifs-garantie__icone {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 8px;
  border-radius: 50%; background: var(--vm-bleu); color: var(--vm-blanc); font-weight: var(--vm-fw-bold);
}
.tarifs-garantie__titre { margin: 0 0 4px; font-size: var(--vm-fs-base); font-weight: var(--vm-fw-bold); color: var(--vm-bleu); }
.tarifs-garantie__pilier p { margin: 0; font-size: var(--vm-fs-sm); line-height: 1.5; color: var(--vm-bleu); }

#main-tarifs .tarifs-trust__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tarifs-trust__cta { margin-top: var(--vm-space-5); text-align: center; }
.tarifs-trust__cta > p { max-width: 620px; margin: 0 auto var(--vm-space-3); font-size: var(--vm-fs-base); line-height: 1.5; color: var(--vm-bleu); }


/* =============================================================================
   COMPARATIF - module #parcours
   -----------------------------------------------------------------------------
   100 % CSS. Trois radios natifs pilotent la colonne mise en avant (combinateur
   ~ depuis l'input coché). Chaque rubrique est un <details> ; la première est
   ouverte. Pastilles : pleine = inclus, demi = en partie, vide = non inclus.
   Valeur chiffrée (quota) : .parcours-valeur à la place de la pastille.

   Code couleur : Référencement simple = bleu clair, Profil enrichi = bleu,
   Mise en relation = turquoise.
   ============================================================================= */
.parcours {
  --parc-n1:     var(--vm-bleu-clair);
  --parc-n2:     var(--vm-bleu);
  --parc-n3:     var(--vm-turquoise);
  --parc-n1-txt: color-mix(in srgb, var(--vm-bleu-clair) 74%, #000000);
  --parc-n2-txt: var(--vm-bleu);
  --parc-n3-txt: color-mix(in srgb, var(--vm-turquoise) 62%, #000000);
  --parc-n1-bg:  color-mix(in srgb, var(--vm-bleu-clair) 12%, #ffffff);
  --parc-n2-bg:  color-mix(in srgb, var(--vm-bleu) 10%, #ffffff);
  --parc-n3-bg:  color-mix(in srgb, var(--vm-turquoise) 13%, #ffffff);

  max-width: 900px; margin: 0 auto; padding: var(--vm-space-3) var(--vm-space-2);
  background: color-mix(in srgb, var(--vm-bleu) 4%, #ffffff);
  border: 1px solid var(--vm-border); border-radius: var(--vm-radius-lg);
}
@media (min-width: 577px) { .parcours { padding: var(--vm-space-6); } }

/* position: fixed volontaire. Un <label for> donne le focus à son input : dans
   le flux, le navigateur ramènerait la page vers lui à chaque clic. */
.parcours-input {
  position: fixed; top: 0; left: 0; z-index: -1;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0;
}

.parcours-legende {
  margin: 0 0 var(--vm-space-2); text-align: center;
  font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-semi); color: var(--vm-bleu);
}
.parcours-cle {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px;
  margin: 0 0 var(--vm-space-3); font-size: var(--vm-fs-xs); color: var(--vm-text-muted);
}
.parcours-cle > span { display: inline-flex; align-items: center; gap: 6px; }
.parcours-cle .parcours-pastille--on { background: var(--vm-bleu); border-color: var(--vm-bleu); }
.parcours-cle .parcours-pastille--part { background: linear-gradient(90deg, var(--vm-bleu) 50%, transparent 50%); border-color: var(--vm-bleu); }

/* En-tête et <summary> partagent le même gabarit de colonnes. */
.parcours-syn__head,
.parcours-syn__sum,
.parcours-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 22%);
  align-items: center; gap: 4px;
}
@media (min-width: 577px) {
  .parcours-syn__head,
  .parcours-syn__sum,
  .parcours-ligne { grid-template-columns: minmax(0, 1fr) repeat(3, 20%); gap: 8px; }
}
.parcours-syn__head { align-items: end; padding-bottom: 8px; }
.parcours-syn__cell { display: block; min-width: 0; text-align: center; }

.parcours-col {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  min-width: 0; min-height: 64px; margin: 0; padding: 8px 2px;
  background: var(--vm-blanc); border: 2px solid var(--vm-border); border-radius: var(--vm-radius-md);
  cursor: pointer; text-align: center; line-height: 1.2; color: var(--vm-text-muted);
  overflow-wrap: break-word; hyphens: auto;
  transition: border-color var(--vm-transition-fast), color var(--vm-transition-fast), background-color var(--vm-transition-fast);
}
.parcours-col:hover { border-color: color-mix(in srgb, var(--vm-bleu) 35%, #ffffff); }
/* 0,62rem en mobile : « Référencement » tient dans une colonne de 70 px. */
.parcours-col__nom  { font-size: .62rem; font-weight: var(--vm-fw-bold); }
/* Le prix ne se coupe jamais : la période passe à la ligne en mobile. */
.parcours-col__prix { font-size: .68rem; font-weight: var(--vm-fw-semi); white-space: nowrap; }
.parcours-col__per  { display: block; }
@media (min-width: 577px) {
  .parcours-col { padding: 10px 8px; }
  .parcours-col__nom  { font-size: var(--vm-fs-sm); }
  .parcours-col__prix { font-size: var(--vm-fs-xs); }
  .parcours-col__per  { display: inline; }
}

/* Rubriques dépliables */
.parcours-syn__row { border-top: 1px solid var(--vm-border); }
.parcours-syn__sum { list-style: none; cursor: pointer; padding: 10px 0; }
.parcours-syn__sum::-webkit-details-marker { display: none; }
.parcours-syn__sum:focus-visible { outline: 2px solid var(--vm-bleu); outline-offset: 2px; border-radius: var(--vm-radius-sm); }
.parcours-syn__lib {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: .78rem; font-weight: var(--vm-fw-bold); line-height: 1.3; color: var(--vm-bleu);
  text-align: left; overflow-wrap: break-word; hyphens: auto;
}
@media (min-width: 577px) { .parcours-syn__lib { font-size: var(--vm-fs-sm); } }
.parcours-syn__row .parcours-syn__lib::before {
  content: "\25B8"; flex-shrink: 0; display: inline-block; color: var(--vm-bleu);
  transition: rotate var(--vm-transition-fast);
}
.parcours-syn__row[open] .parcours-syn__lib::before { rotate: 90deg; }

/* Lignes détaillées */
#main-tarifs .parcours-syn__detail { list-style: none; margin: 0 0 12px; padding: 0; }
.parcours-ligne {
  margin: 0; padding: 7px 0;
  border-top: 1px dashed color-mix(in srgb, var(--vm-border) 70%, #ffffff);
  font-size: .78rem; line-height: 1.45; color: var(--vm-bleu);
}
@media (min-width: 577px) { .parcours-ligne { font-size: var(--vm-fs-sm); } }
.parcours-ligne__txt { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* Pastilles. Hors colonne active : gris. */
.parcours-pastille {
  display: inline-block; width: 14px; height: 14px; vertical-align: middle;
  border-radius: 50%; border: 2px solid var(--vm-border);
  transition: background-color var(--vm-transition-fast), border-color var(--vm-transition-fast);
}
.parcours-pastille--on   { background: var(--vm-gris-bord); border-color: var(--vm-gris-bord); }
.parcours-pastille--part { background: linear-gradient(90deg, var(--vm-gris-bord) 50%, transparent 50%); border-color: var(--vm-gris-bord); }
.parcours-pastille--off  { background: transparent; }

/* Valeur chiffrée (nombre de prestations) */
.parcours-valeur { font-size: var(--vm-fs-xs); font-weight: var(--vm-fw-bold); color: var(--vm-text-muted); }

/* Colonne active : en-tête */
#vm-parc-1:checked ~ .parcours-syn [for="vm-parc-1"] { border-color: var(--parc-n1); color: var(--parc-n1-txt); background: var(--parc-n1-bg); }
#vm-parc-2:checked ~ .parcours-syn [for="vm-parc-2"] { border-color: var(--parc-n2); color: var(--parc-n2-txt); background: var(--parc-n2-bg); }
#vm-parc-3:checked ~ .parcours-syn [for="vm-parc-3"] { border-color: var(--parc-n3); color: var(--parc-n3-txt); background: var(--parc-n3-bg); }

/* Colonne active : pastilles et valeurs (synthèse et lignes). La cellule 1 est
   le libellé, les formules sont en 2, 3 et 4. */
#vm-parc-1:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(2) .parcours-pastille--on { background: var(--parc-n1); border-color: var(--parc-n1); }
#vm-parc-2:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(3) .parcours-pastille--on { background: var(--parc-n2); border-color: var(--parc-n2); }
#vm-parc-3:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(4) .parcours-pastille--on { background: var(--parc-n3); border-color: var(--parc-n3); }
#vm-parc-1:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(2) .parcours-pastille--part { background: linear-gradient(90deg, var(--parc-n1) 50%, transparent 50%); border-color: var(--parc-n1); }
#vm-parc-2:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(3) .parcours-pastille--part { background: linear-gradient(90deg, var(--parc-n2) 50%, transparent 50%); border-color: var(--parc-n2); }
#vm-parc-3:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(4) .parcours-pastille--part { background: linear-gradient(90deg, var(--parc-n3) 50%, transparent 50%); border-color: var(--parc-n3); }
#vm-parc-1:checked ~ .parcours-syn .parcours-ligne > .parcours-syn__cell:nth-child(2) .parcours-valeur { color: var(--parc-n1-txt); }
#vm-parc-2:checked ~ .parcours-syn .parcours-ligne > .parcours-syn__cell:nth-child(3) .parcours-valeur { color: var(--parc-n2-txt); }
#vm-parc-3:checked ~ .parcours-syn .parcours-ligne > .parcours-syn__cell:nth-child(4) .parcours-valeur { color: var(--parc-n3-txt); }

/* Colonne active : léger fond de cellule */
#vm-parc-1:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(2),
#vm-parc-2:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(3),
#vm-parc-3:checked ~ .parcours-syn :is(.parcours-syn__sum, .parcours-ligne) > .parcours-syn__cell:nth-child(4) {
  padding: 2px 0; background: color-mix(in srgb, var(--vm-bleu) 5%, #ffffff); border-radius: var(--vm-radius-sm);
}

/* Focus clavier reporté du radio masqué vers son en-tête de colonne */
#vm-parc-1:focus-visible ~ .parcours-syn [for="vm-parc-1"],
#vm-parc-2:focus-visible ~ .parcours-syn [for="vm-parc-2"],
#vm-parc-3:focus-visible ~ .parcours-syn [for="vm-parc-3"] { outline: 2px solid var(--vm-bleu); outline-offset: 3px; }

/* Bouton de la formule mise en avant */
.parcours-cta { display: none; margin: var(--vm-space-4) 0 0; text-align: center; }
#vm-parc-1:checked ~ .parcours-cta[data-cible="1"],
#vm-parc-2:checked ~ .parcours-cta[data-cible="2"],
#vm-parc-3:checked ~ .parcours-cta[data-cible="3"] { display: block; }


/* --- ACCOMPAGNEMENT INDIVIDUEL (affiché quand il est vendu) -------------------- */
/* .vm-emergency n'est jamais stylé seul dans custom.css : conteneur sans effet de bord. */
.tarifs-accompagnement { margin-top: var(--vm-space-6); }


/* --- FAQ (details / summary natifs) ------------------------------------------- */
.tarifs-faq { max-width: 720px; margin: var(--vm-space-5) auto 0; }
#main-tarifs .tarifs-faq__theme {
  margin: var(--vm-space-5) 0 var(--vm-space-2);
  font-size: var(--vm-fs-base); font-weight: var(--vm-fw-bold); letter-spacing: .5px;
  text-transform: uppercase; text-align: left; color: var(--vm-cyan);
}
#main-tarifs .tarifs-faq__theme:first-child { margin-top: 0; }
.tarifs-faq__item { border-bottom: 1px solid color-mix(in srgb, var(--vm-bleu) 15%, transparent); }
.tarifs-faq__question {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 14px 0; list-style: none; cursor: pointer;
  font-size: var(--vm-fs-base); font-weight: var(--vm-fw-bold); line-height: 1.45; color: var(--vm-bleu);
}
.tarifs-faq__question::-webkit-details-marker { display: none; }
.tarifs-faq__question::after {
  content: "\25BE"; flex-shrink: 0; margin-top: 2px; color: var(--vm-bleu);
  transition: rotate var(--vm-transition);
}
.tarifs-faq__item[open] > .tarifs-faq__question::after { rotate: 180deg; }
.tarifs-faq__question:focus-visible { outline: 2px solid var(--vm-bleu); outline-offset: 2px; border-radius: 2px; }
.tarifs-faq__reponse { padding-bottom: 14px; font-size: var(--vm-fs-sm); line-height: 1.7; color: var(--vm-text); }
.tarifs-faq__reponse p { margin: 0; }
#main-tarifs .tarifs-faq__reponse a { color: var(--vm-bleu); font-weight: var(--vm-fw-semi); }

/* Liens dans le texte. La page n'a pas la classe .main : la règle de
   soulignement de custom.css ne s'y applique pas. Boutons exclus. */
#main-tarifs :is(.vm-callout, .tarifs-faq__reponse, .tarifs-plus__liste, .tarifs-comparer) a:not(.btn) {
  text-decoration: underline; text-underline-offset: 2px;
}
#main-tarifs :is(.vm-callout, .tarifs-faq__reponse, .tarifs-plus__liste, .tarifs-comparer) a:not(.btn):hover {
  text-decoration-thickness: 2px;
}

/* Liens vers l'exemple de profil (07/10/2026) */
#main-tarifs .tarifs-exemple {
    margin:     0 0 var(--vm-space-3);
    font-size:  var(--vm-fs-sm);
    text-align: center;
}

#main-tarifs .tarifs-exemple a {
    color:           var(--vm-bleu);
    font-weight:     600;
    text-decoration: underline;
}