/* ==========================================================================
   tarifs-kids.css - habillage PARTAGÉ de la section Accès & Tarif Magic Kids
   (widget fp-tk du plugin fp-tarifs-manager, grille de type « offres »).
   Rendue par DEUX renderers PHP (inc/sections.php) qui produisent le MÊME
   markup .fp-kids-tarifs / .fp-tarifs-body-tk / .fp-tk-* : fp_render_kids_tarifs
   sur la page vitrine Magic Kids (template-zone-kids.php, contexte « acces »
   du shortcode) et, depuis le 2026-09-05, fp_render_tarifs sur les fiches
   d'activité Magic Kids (template-activite.php, contexte="activite") dès que
   la grille résolue pour la page est de type « offres ». Extraite le
   2026-09-05 de zone-kids.css (qui portait seule ces règles jusque-là) pour
   être chargée sur les deux gabarits sans dupliquer les règles. Chargée APRÈS
   zone-kids.css sur la vitrine et APRÈS activite.css sur les fiches (voir
   fun_planet_enqueue_per_template, functions.php).
   Couleurs : tokens var(--fp-*) UNIQUEMENT (jamais de hex en dur, jamais
   d'orange). Spécificité : préfixe .fp-detail .fp-kids-tarifs partout, pour
   rester STRICTEMENT au-dessus de la feuille du plugin (assets/fp-tarifs.css
   de fp-tarifs-manager), chargée APRÈS celle-ci depuis le rendu du shortcode.
   La partie ANNIVERSAIRE Magic Kids (.fp-kids-anniv) N'EST PAS ici : propre à
   la vitrine, elle reste dans zone-kids.css.
   2026-09-10 (Marino, mise en avant de l'entrée famille) : la carte « Entrée
   famille » de la bande « Pour aller plus loin » (offres.blocs, plugin) porte
   désormais un badge et un prix de référence (semis v8 côté plugin, DONNÉES
   seulement) ; tout l'habillage « best-seller » (bordure/lueur accent, badge
   recentré, prix agrandi, carte recentrée quand elle est seule) vit ICI,
   ciblé par la présence du badge (:has), jamais par le titre de la carte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ACCES & TARIF (.fp-kids-tarifs) : bandeau « fronton » colore (fond primary
   via .fp-s-primary deja global, id="tarifs" cible de la barre sticky),
   plan du parc en filigrane tres discret.
   -------------------------------------------------------------------------- */
.fp-kids-tarifs {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.fp-kids-tarifs-plan {
  position: absolute;
  inset: -12% -10%;
  z-index: 0;
  background-image: url('../img/em-plan.svg');
  background-size: min(1200px, 140%);
  background-position: center;
  background-repeat: no-repeat;
  opacity: .18;
  pointer-events: none;
}
/* Motif TOPOGRAPHIQUE (2026-09-06, refonte v2) : remplace .fp-kids-tarifs-plan
   ci-dessus SUR LA VITRINE SEULEMENT (fp_render_kids_tarifs), la section qui
   précède (Présentation, .fp-kids-scene) porte déjà le plan du parc, un
   second plan aurait fait doublon. Sur les fiches d'activité (fp_render_tarifs,
   inc/sections.php), la zone continue d'émettre .fp-kids-tarifs-plan ci-dessus,
   inchangé : les deux motifs coexistent dans cette feuille selon la page.
   Mêmes traits seuls (assets/img/em-topo-traits.svg) et même opacité de
   filigrane que le pied de page (voir le bloc « Footer » de main.css),
   jamais em-topo.svg qui porte son propre aplat vert. ANIMÉ depuis le
   2026-09-10, voir le bloc juste en dessous. */
.fp-kids-tarifs-topo {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background: url('../img/em-topo-traits.svg') center center / cover no-repeat;
  opacity: .1;
  pointer-events: none;
}

/* MOTIF DE FOND ANIMÉ (Marino, 2026-09-10 : « si pas de vidéo, j'aimerais
   quand même que le em-topo soit animé comme ailleurs »). Même mouvement que
   le pied de page (@keyframes fp-footer-motif-derive, main.css) et que les
   autres motifs du site : un va-et-vient horizontal lent, en TRANSFORM SEUL,
   jamais background-position qui forcerait un repaint à chaque image.

   LES DEUX MOTIFS, ET POURQUOI. La « section tarifs Magic Kids » est rendue à
   deux endroits : la vitrine porte .fp-kids-tarifs-topo (traits
   topographiques), les fiches d'activité portent .fp-kids-tarifs-plan (plan
   du parc). C'est la même section aux yeux du visiteur, elle doit donc bouger
   pareil des deux côtés.

   AUCUN ZOOM ICI, contrairement au pied de page : les deux motifs débordent
   déjà d'au moins 10 % (inset négatif ci-dessus), et le va-et-vient ne
   dépasse pas 3 %, donc aucun bord ne peut se découvrir. Le scale n'aurait
   fait qu'agrandir le filigrane sans raison. .fp-kids-tarifs est en overflow
   hidden, rien ne déborde de la section.

   IMMOBILE SOUS UN MÉDIA DE FOND, c'est la réserve posée par Marino avec sa
   demande. Quand la section porte .has-fond-media, une image ou une vidéo
   couvre le fond : le motif y est de toute façon recouvert, et un motif en
   mouvement sous un média déjà animé produirait du moiré plutôt que de la
   matière. Même raison que la texture volontairement immobile de
   .fp-tarifs-fond-voile::after (activite.css). La vitrine, elle, ne porte
   jamais de média : elle est donc toujours animée. */
@media (prefers-reduced-motion: no-preference) {
  .fp-kids-tarifs:not(.has-fond-media) .fp-kids-tarifs-topo,
  .fp-kids-tarifs:not(.has-fond-media) .fp-kids-tarifs-plan {
    animation: fp-kids-tarifs-motif-derive 26s ease-in-out infinite alternate;
    will-change: transform;
  }
}
/* Déclarée HORS média-requête : une @keyframes ne se cascade pas. Même durée
   et même amplitude que le pied de page, pour que les deux motifs du site
   respirent au même rythme. */
@keyframes fp-kids-tarifs-motif-derive {
  from { transform: translateX(-3%); }
  to   { transform: translateX(3%); }
}
@media (prefers-reduced-motion: reduce) {
  .fp-kids-tarifs-topo,
  .fp-kids-tarifs-plan {
    animation: none;
    will-change: auto;
  }
}
/* Fond de section sur une FICHE D'ACTIVITÉ (2026-09-05) : la même zone
   « tarifs » y porte AUSSI la classe historique .fp-tarifs (id="tarifs",
   même ancre que les autres branches du renderer, cf. fp_render_tarifs).
   Or .fp-detail .fp-tarifs (activite.css) pose son propre fond clair
   (--fp-accent, spécificité 0,2,0) qui l'emportait sur .fp-s-primary posé
   par PHP (0,1,0) : la section s'affichait en teal CLAIR au lieu du teal
   FONCÉ de la vitrine, texte blanc alors sous 2:1 de contraste. Cette règle
   (0,3,0) rétablit le même fond que la vitrine, et retire le motif « pattes »
   de .fp-tarifs::before (pensé pour le fond clair, aurait sinon doublé le
   plan du parc de .fp-kids-tarifs-plan ci-dessus) : sans effet sur les
   fiches à grille "table" ou "visual", qui ne portent jamais .fp-kids-tarifs. */
.fp-detail .fp-tarifs.fp-kids-tarifs {
  background: var(--fp-primary);
}
.fp-detail .fp-tarifs.fp-kids-tarifs::before {
  content: none;
}
/* MÉDIA DE FOND SUR LES FICHES MAGIC KIDS (2026-09-10, Marino : « c'est Magic
   Kids mais il faudrait le même principe avoir une vidéo en fond si possible »).
   Le fond image/vidéo partagé (.fp-tarifs-fond, markup et voile communs, voir
   activite.css) est un enfant de la section : il se peint déjà au-dessus de
   l'aplat --fp-primary plein ci-dessus, qui reste donc invisible dès qu'un
   média est actif. Cette règle le rend EXPLICITEMENT transparent dans ce cas
   (has-fond-media, posée côté PHP) pour que l'aplat teal et le voile partagé
   ne s'additionnent jamais et n'éteignent pas la vidéo, exactement le même
   reproche que sur les fiches classiques (activite.css, voile et carte
   allégés le même jour). Les cartes de la grille (fp-tk-mini, fp-tk-plan,
   fp-tk-card--compact, déjà en voile --fp-dark à 30 %) et la carte Entrée
   opaque ne bougent pas : les prix doivent rester nets. */
.fp-detail .fp-tarifs.fp-kids-tarifs.has-fond-media {
  background: transparent;
}
.fp-kids-tarifs .fp-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* Titre RESSERRE depuis l'arrivee du prix en fronton juste dessous : c'est le
   montant qui doit dominer la section, pas son titre.
   POLICE (2026-09-07, complément Marino) : Bebas (--fp-font-heading) au lieu
   de Thoge (--fp-font-display), seul usage de Thoge retiré de la section
   (les autres restent ailleurs sur le site) ; taille agrandie d'environ
   20 % (1,9/4vw/3rem -> 2,3/4,8vw/3,6rem). */
.fp-kids-tarifs-title {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2.3rem, 4.8vw, 3.6rem);
  color: var(--fp-white);
}
.fp-kids-tarifs-lead {
  max-width: 60ch;
  margin: 0;
  opacity: .92;
}

/* FRONTON DE PRIX : tout l'habillage (.fp-tarif-solo, ellipse, etincelles,
   mention, bouton) vient d'activite.css sous le scope .fp-detail, que ce modele
   porte aussi. Rien n'est recopie ici, on ne recale que la boite dans la
   colonne centree de cette section, et on retire la carte blanche que
   .fp-tarifs-body porte par defaut : cette section n'affiche jamais de tableau,
   le fronton vit directement sur le fond de section. */
.fp-detail .fp-kids-tarifs .fp-tarifs-body {
  align-self: stretch;
  width: 100%;
  max-width: 900px;
  margin: 8px auto 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.fp-detail .fp-kids-tarifs .fp-tarif-solo { margin-top: 8px; }

/* GRILLE « OFFRES », WIDGET fp-tk (fp_render_kids_tarifs, partie="acces") :
   carte Entrée à gauche (carte blanche, prix géant) et carnets/abonnement à
   droite (cartes compactes en voile sombre), rendus DIRECTEMENT sur le fond
   teal de la section, PAS de carte vert foncé, contrairement aux pages
   d'activité où le même widget est embarqué dans .fp-tarifs-body-table
   (contexte="activite", cf. activite.css). Remplace l'ancien markup
   .fp-tarifs-offres* (contrat de classes changé le 2026-09-05, cartes de
   prix Magic Kids/jetons). La règle .fp-tarifs-body ci-dessus neutralise déjà
   la carte générale (fond transparent, aucun rayon ni ombre) et convient donc
   telle quelle à ce rendu : elle vise le fronton ET les offres, ne pas la
   dupliquer ici. On ne surcharge que la largeur ci-dessous (une grille de
   cartes respire plus qu'un fronton), puis on habille chaque classe du
   widget en scope PLUS SPÉCIFIQUE (.fp-kids-tarifs en préfixe) que la feuille
   du plugin, chargée APRÈS celle-ci depuis le shortcode : le sélecteur
   `.fp-tarifs-widget` sert de complément de spécificité pour rester
   STRICTEMENT au-dessus d'elle, même motif que dans activite.css. */
.fp-detail .fp-kids-tarifs .fp-tarifs-body-tk {
  max-width: 1080px;
  text-align: left;
}
/* Duo (2026-09-06, refonte v2) : deux colonnes 1.35fr / .85fr (colonne
   Entrée / colonne de côté, classes .fp-tk-col--entree et .fp-tk-col--cote
   du contrat de markup) dès 900px, une seule colonne en dessous (voir le
   media query plus bas). */
.fp-detail .fp-kids-tarifs .fp-tk-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: 28px;
  align-items: start;
}
/*
 * DEUX GRANDES CASES ALIGNÉES (2026-09-07, demande Marino ; le « plan des
 * activités » qu'un tiers occupait ici a été RETIRÉ du rendu par le plugin le
 * 2026-09-10, et la tuile « Réserver » est depuis la même date injectée sur
 * la vitrine COMME sur une fiche, voir plus bas) : la carte Entrée (colonne 1)
 * s'étend sur DEUX rangées ; la colonne de côté empile l'Accompagnant
 * (rangée 1) puis la tuile « Réserver » (rangée 2), identiquement partout. Le
 * haut de l'Entrée s'aligne donc sur le haut de l'Accompagnant, son bas sur
 * le bas de la tuile, quelle que soit la carte la plus haute
 * (align-items:stretch : si l'Entrée est plus haute, la rangée 2 s'étire ;
 * si elle est plus basse, l'Entrée s'étire).
 *
 * .fp-tk-col--cote est un CONTENEUR du markup (flex column, cf. .fp-tk-col
 * plus bas) : display:contents l'efface de la boîte tout en gardant ses
 * enfants dans le DOM, pour qu'ils participent DIRECTEMENT à cette grille
 * (un enfant de grille ne peut être placé que par un enfant DIRECT du
 * conteneur ; sans ce contents, impossible de donner à l'Accompagnant et à la
 * tuile des rangées indépendantes). Restreint à 900px et plus, comme le duo
 * lui-même : en dessous, .fp-tk-col--cote reste un flex column normal
 * (empilement propre, voir le media query de collapse plus bas).
 */
@media (min-width: 900px) {
  .fp-detail .fp-kids-tarifs .fp-tk-duo {
    /* DEUX rangées explicites (auto/auto) : sans elles, la grille n'en
       détecte qu'UNE seule (rien ne demandait la seconde), l'Accompagnant et
       le plan/la tuile restaient alors empilés DANS la seule rangée 1,
       laissant un vide sous le plan quand l'Entrée est plus haute que les
       deux réunis (bug constaté : le bas du plan ne touchait pas le bas de
       l'Entrée). */
    grid-template-rows: auto auto;
    align-items: stretch;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-col--entree {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-col--entree > .fp-tk-card.fp-tk-entree {
    /* .fp-tk-col--entree (flex column) ne grandit ses enfants QUE si on le
       leur demande : sans flex:1, la carte blanche garderait sa hauteur
       naturelle même si la colonne, elle, est étirée par la grille. */
    flex: 1;
  }
  /* Sélecteur à QUATRE classes (.fp-tk-col en plus) : bat sans ambiguïté la
     règle générique .fp-tk-col (trois classes, display:flex) déclarée plus
     bas dans ce fichier, quel que soit l'ordre de déclaration (constaté :
     à spécificité égale, .fp-tk-col l'emportait en venant après dans la
     cascade, et display:contents ne s'appliquait jamais). */
  .fp-detail .fp-kids-tarifs .fp-tk-col.fp-tk-col--cote {
    display: contents;
  }
  /* Colonne 2 par défaut pour TOUT enfant de .fp-tk-col--cote (relecture
     Opus 2026-09-07) : couvre aussi ce que le filtre fp_tarifs_offres_cote_html
     pourrait injecter au-delà de .fp-tk-mini/.fp-tk-plan/.fp-tk-reserver, sans
     avoir à lister chaque nouvelle classe ici. Les règles spécifiques
     ci-dessous ne posent alors plus que grid-row. */
  .fp-detail .fp-kids-tarifs .fp-tk-col--cote > * {
    grid-column: 2;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-col--cote > .fp-tk-mini {
    grid-row: 1;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-col--cote > .fp-tk-reserver {
    grid-row: 2;
  }
}
/* Colonnes de la partie « accès » (entrée à gauche, carnets/abonnement à
   droite) : .fp-tk-col n'était stylée nulle part, les cartes qu'elle
   empile (entrée + accompagnant, ou plusieurs cartes compactes) se
   touchaient donc directement (aucune marge posée sur .fp-tk-card). */
.fp-detail .fp-kids-tarifs .fp-tk-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fp-detail .fp-kids-tarifs .fp-tk-head {
  display: flex;
  align-items: flex-end;
  min-height: 2.9rem;
  /* Plus de marge propre : l'espacement avec l'élément suivant vient déjà
     du gap de .fp-tk-col, une marge ici l'aurait doublé. */
  margin-bottom: 0;
}
/* « L'entrée » (section_titre du plugin, .fp-tk-head de la colonne Entrée)
   RETIRÉ DU RENDU (demande Marino, 2026-09-06 puis étendu aux fiches le
   2026-09-07) : la carte porte déjà son propre titre « Entrée Kids », ce
   sur-titre était redondant. Repli visuel identique à .screen-reader-text
   (main.css) plutôt qu'un display:none : le texte reste annoncé aux
   lecteurs d'écran. position:absolute (et non le display:flex hérité de la
   règle ci-dessus) retire aussi le bloc du flux normal, condition
   nécessaire pour que le haut de la carte Entrée s'aligne exactement sur le
   haut de l'Accompagnant (voir .fp-tk-duo plus bas). */
.fp-detail .fp-kids-tarifs .fp-tk-col--entree > .fp-tk-head {
  position: absolute;
  width: 1px;
  height: 1px;
  /* min-height:2.9rem de la règle ci-dessus l'emporterait sinon sur
     height:1px (un min-height gagne toujours sur une hauteur explicite plus
     petite) : sans cette ligne, le bloc restait haut de 2,9rem malgré
     l'overflow masqué, faussant l'alignement avec l'Accompagnant. */
  min-height: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}
.fp-detail .fp-kids-tarifs .fp-tk-h {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--fp-white);
}
.fp-detail .fp-kids-tarifs .fp-tk-h--side {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  /* Contraste AA sur fond --fp-primary (3,24:1 avec l'ancien mélange à
     l'accent, insuffisant) : blanc à 88 %. */
  color: color-mix(in srgb, var(--fp-white) 88%, transparent);
}

/* Cartes : anatomie commune (carte Entrée blanche ET cartes compactes,
   recolorées plus bas). */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 22px;
  border-radius: var(--fp-radius);
  background: var(--fp-paper);
  color: var(--fp-ink);
  box-shadow: var(--fp-shadow);
}
/* Carte Entrée (2026-09-06, refonte v2) : c'est le PREMIER élément visuel de
   la section, ombre nettement plus forte que ses voisines (cartes compactes,
   mini accompagnant) et légère surélévation. Sélecteur à SIX classes : bat
   sans ambiguïté la règle générique .fp-tk-card ci-dessus (quatre classes),
   quel que soit l'ordre de déclaration dans la feuille. */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-card.fp-tk-entree.is-vedette {
  box-shadow: 0 30px 60px -12px color-mix(in srgb, var(--fp-dark) 45%, transparent);
  transform: translateY(-4px);
}

/* CARTE « ENTRÉE » LÉGÈREMENT TRANSPARENTE (Marino, 2026-09-11 : « qu'on voit
   un peu la vidéo en fond mais reste assez opaque, genre 75 % »). Sur mobile
   comme sur ordinateur, d'où l'absence de requête de média.

   Portée sur .has-fond-media À DESSEIN : cette classe n'est posée que lorsque
   l'image ou la vidéo de fond est réellement chargée (setupVideosFond, main.js).
   Sans elle, la carte reste PLEINEMENT opaque, ce qui évite deux ennuis : une
   carte translucide sur le simple aplat teal quand il n'y a pas de média, et
   une carte affaiblie chez un visiteur en économie de données ou en mouvement
   réduit, pour qui la vidéo ne se charge pas.

   Sélecteur à CINQ classes : il bat la règle générique .fp-tk-card (quatre
   classes) déclarée plus haut, quel que soit l'ordre dans la feuille. */
.fp-detail .fp-kids-tarifs.has-fond-media .fp-tarifs-widget .fp-tk-card.fp-tk-entree {
  background: color-mix(in srgb, var(--fp-paper) 75%, transparent);
}
.fp-detail .fp-kids-tarifs .fp-tk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}
.fp-detail .fp-kids-tarifs .fp-tk-card-title {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.fp-detail .fp-kids-tarifs .fp-tk-gift {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 11px 5px 7px;
  border-radius: var(--fp-pill);
  background: color-mix(in srgb, var(--fp-accent) 55%, var(--fp-white));
  color: var(--fp-secondary);
  font-weight: 600;
  font-size: .82rem;
  white-space: nowrap;
}
.fp-detail .fp-kids-tarifs .fp-tk-gift svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
/* Ligne « compris dans l'entrée »/« jetons nécessaires », juste APRÈS le
   card-head (contrat de markup du plugin, 2026-09-05) : précise que le tarif
   de CETTE fiche est déjà inclus dans l'entrée, ou nécessite des jetons en
   plus, avec un lien « Magic Kids » vers la grille complète (le plugin a
   retiré le lien dédié « Tous les tarifs Magic Kids » et sa classe
   .fp-tk-current-lien : le lien courant, quel que soit son libellé, est
   désormais stylé génériquement via le sélecteur d'élément ci-dessous).
   Contrastes AA vérifiés sur la carte blanche : --fp-secondary et
   --fp-primary sur blanc dépassent tous deux 4,5:1. */
.fp-detail .fp-kids-tarifs .fp-tk-current {
  margin: 0 0 10px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--fp-secondary);
}
.fp-detail .fp-kids-tarifs .fp-tk-current strong {
  font-weight: 700;
}
.fp-detail .fp-kids-tarifs .fp-tk-current-note {
  color: var(--fp-ink-soft);
}
.fp-detail .fp-kids-tarifs .fp-tk-entree .fp-tk-current a {
  color: var(--fp-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fp-detail .fp-kids-tarifs .fp-tk-entree .fp-tk-current a:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}
/* Variante « à jetons » : petit fond teinté pour distinguer la mention d'une
   simple ligne de texte, sans reprendre le plein --fp-accent (trop appuyé
   pour une ligne d'accompagnement). */
.fp-detail .fp-kids-tarifs .fp-tk-current.is-jetons {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fp-accent) 18%, var(--fp-white));
}
.fp-detail .fp-kids-tarifs .fp-tk-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* GOUTTIÈRE ÉLARGIE, 8 à 14 px (Marino, 2026-09-10 : « on lit 5550 CHF au
     lieu de 55.00 barré puis 50.00 »). Sur la carte « Entrée famille », le
     prix de référence barré et le prix réel se suivent sur la même ligne de
     base : à cette taille de caractères, huit pixels ne suffisaient pas à les
     séparer et l'œil lisait un seul nombre. L'essentiel du gain vient des
     décimales, désormais rendues par le plugin (tk_affiche_prix), mais la
     gouttière y contribue et profite aussi au « CHF » qui suit. */
  gap: 14px;
  font-family: var(--fp-font-heading);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--fp-secondary);
  font-variant-numeric: tabular-nums;
}
.fp-detail .fp-kids-tarifs .fp-tk-price--xl {
  font-size: 4.4rem;
}
.fp-detail .fp-kids-tarifs .fp-tk-unit {
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
}

/* Compris / avec jetons. */
.fp-detail .fp-kids-tarifs .fp-tk-inclus {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fp-detail .fp-kids-tarifs .fp-tk-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* Pilules « Compris »/« Avec jetons » de la carte Entrée (2026-09-10,
   Marino : « la liste devrait afficher toutes les activités kids de la
   zone kids, idéalement sous forme de pills teal avec icône + nom de
   l'activité »), à la place des deux paragraphes de texte de la refonte v2
   du 2026-09-06 : SUR LA VITRINE ET dans le dépliant « Sont compris » des
   fiches (voir plus bas), même composant. Icône réelle de l'activité
   (fp_icon(), couleur héritée via currentColor) + nom, sur fond teal clair
   pour ressortir sur la carte blanche. */
.fp-detail .fp-kids-tarifs .fp-tk-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fp-detail .fp-kids-tarifs .fp-tk-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--fp-pill);
  background: color-mix(in srgb, var(--fp-primary) 12%, var(--fp-white));
  color: var(--fp-secondary);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
}
.fp-detail .fp-kids-tarifs .fp-tk-pill-ico {
  display: inline-flex;
  flex: 0 0 auto;
}
.fp-detail .fp-kids-tarifs .fp-tk-pill-ico svg {
  width: 16px;
  height: 16px;
}
/* Variante « avec jetons » (repli si le parc recoche une activité à
   jetons un jour) : teinte accent au lieu du teal clair, même esprit que
   l'ancienne .fp-tk-liste.is-jetons qu'elle remplace. */
.fp-detail .fp-kids-tarifs .fp-tk-pills.is-jetons .fp-tk-pill {
  background: color-mix(in srgb, var(--fp-accent) 30%, var(--fp-white));
}
/* Pilule de l'ACTIVITÉ COURANTE de la fiche (contexte="activite", première
   pilule de sa liste) : fond plein --fp-primary, texte blanc (4,85:1, AA),
   remplace l'ancien tag .fp-tk-tag.is-current. */
.fp-detail .fp-kids-tarifs .fp-tk-pill.is-current {
  background: var(--fp-primary);
  color: var(--fp-white);
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--fp-secondary-dark) 55%, transparent);
}
/* Pilules CLIQUABLES (2026-09-10, Marino, second retour) : toute pilule qui
   résout une page publiée est un vrai lien (voir tk_pilules() côté plugin),
   sauf l'activité courante (.is-current, fiches), qui reste un <span>. Fond
   qui monte en teal plein au survol/focus, légère élévation, transition
   courte ; rien sous prefers-reduced-motion hormis le changement de couleur. */
.fp-detail .fp-kids-tarifs a.fp-tk-pill {
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fp-detail .fp-kids-tarifs a.fp-tk-pill:hover,
.fp-detail .fp-kids-tarifs a.fp-tk-pill:focus-visible {
  background: var(--fp-primary);
  color: var(--fp-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--fp-secondary-dark) 55%, transparent);
}
.fp-detail .fp-kids-tarifs a.fp-tk-pill:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-tarifs a.fp-tk-pill {
    transition: background-color .18s ease, color .18s ease;
  }
  .fp-detail .fp-kids-tarifs a.fp-tk-pill:hover,
  .fp-detail .fp-kids-tarifs a.fp-tk-pill:focus-visible {
    transform: none;
    box-shadow: none;
  }
}
/* .fp-tk-tag reste utilisé par la fenêtre d'information sur les jetons
   (render_offres_dialog(), sans icône, sans variante is-current : cette
   fenêtre secondaire n'est pas concernée par les pilules ci-dessus). */
.fp-detail .fp-kids-tarifs .fp-tk-tag {
  padding: 3px 9px;
  border-radius: var(--fp-pill);
  border: 1px solid var(--fp-line);
  background: var(--fp-cream);
  color: var(--fp-ink);
  font-size: .85rem;
}
.fp-detail .fp-kids-tarifs .fp-tk-tag.is-jeton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: transparent;
  background: color-mix(in srgb, var(--fp-accent) 55%, var(--fp-white));
  color: var(--fp-secondary);
  font-weight: 600;
}
.fp-detail .fp-kids-tarifs .fp-tk-tag.is-jeton svg {
  width: 13px;
  height: 13px;
}

/* Liste « Sont compris » (carte Entrée en CONTEXTE ACTIVITÉ, fiches,
   2026-09-05, pilules depuis le 2026-09-10) : remplace la liste « Compris »
   de la vitrine, placée juste après le prix (les pilules .fp-tk-pills à
   l'intérieur sont les MÊMES qu'ailleurs dans le widget, is-current comprise).
   Pour une activité comprise, plus de .fp-tk-options ni de .fp-tk-total après
   cette liste (rien à ajouter au prix affiché) ; pour une activité à jetons,
   ils suivent toujours (chips réduits aux seuls packs, premier coché).
   TOUJOURS OUVERTE (2026-09-10, retour de Marino) : le plugin ne rend plus un
   <details>/<summary> repliable mais un simple <div class="fp-tk-compris">
   avec un titre <p class="fp-tk-compris-titre">, la liste restant visible en
   permanence. Même habillage de titre que l'ancien <summary> (petites
   capitales espacées), sans chevron ni état ouvert/fermé. */
.fp-detail .fp-kids-tarifs .fp-tk-entree .fp-tk-compris {
  margin-top: 14px;
}
.fp-detail .fp-kids-tarifs .fp-tk-entree .fp-tk-compris-titre {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
}
.fp-detail .fp-kids-tarifs .fp-tk-entree .fp-tk-compris .fp-tk-pills {
  margin-top: 10px;
}

/* Options : chips radio (jetons) sur la carte Entrée. */
.fp-detail .fp-kids-tarifs .fp-tk-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--fp-line);
}
/* [hidden] doit battre le display:flex ci-dessus (relecture Opus 2026-09-07,
   même patron que .fp-horaires-status[hidden] dans main.css) : sans cette
   règle, basculeOptions.hidden = true posé par initPaliers() (tarifs-kids.js)
   ne masquait rien, l'attribut restant neutralisé par le flex explicite. */
.fp-detail .fp-kids-tarifs .fp-tk-options[hidden] {
  display: none;
}
.fp-detail .fp-kids-tarifs .fp-tk-options-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
}
.fp-detail .fp-kids-tarifs .fp-tk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fp-detail .fp-kids-tarifs .fp-tk-chip {
  position: relative;
}
.fp-detail .fp-kids-tarifs .fp-tk-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.fp-detail .fp-kids-tarifs .fp-tk-chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--fp-accent);
  border-radius: var(--fp-pill);
  color: var(--fp-secondary);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.fp-detail .fp-kids-tarifs .fp-tk-chip span svg {
  width: 15px;
  height: 15px;
}
.fp-detail .fp-kids-tarifs .fp-tk-chip input:checked + span {
  background: var(--fp-secondary);
  border-color: var(--fp-secondary);
  color: var(--fp-white);
}
.fp-detail .fp-kids-tarifs .fp-tk-chip input:focus-visible + span {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-tarifs .fp-tk-chip span {
    transition: none;
  }
}

/* Barre « Votre entrée » (2026-09-10 : le plugin ne la rend plus que si des
   chips de jetons existent réellement à additionner, voir
   FP_Tarifs_Shortcode::render_offres_entree_card()). Pas de règle
   :not(:has(...)) nécessaire ici : l'élément est simplement ABSENT du
   markup quand il n'a rien à totaliser, cette feuille n'a rien à masquer. */
.fp-detail .fp-kids-tarifs .fp-tk-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 14px 18px;
  border-radius: var(--fp-radius-sm);
  background: var(--fp-secondary);
  color: var(--fp-white);
}
.fp-detail .fp-kids-tarifs .fp-tk-total-lbl {
  font-family: var(--fp-font-heading);
  font-size: 1.1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fp-accent) 55%, var(--fp-white));
}
.fp-detail .fp-kids-tarifs .fp-tk-total-val {
  font-family: var(--fp-font-heading);
  font-size: 2.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Accompagnant : une VRAIE petite carte (2026-09-06, refonte v2 : fond
   translucide comme les cartes compactes, coins, bordure fine), directement
   sur le fond teal de la section. */
.fp-detail .fp-kids-tarifs .fp-tk-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 18px 20px;
  border-radius: var(--fp-radius);
  border: 1px solid color-mix(in srgb, var(--fp-white) 8%, transparent);
  /* Voile blanc 14 % (3,74:1) insuffisant en AA sur fond --fp-primary :
     même voile sombre que les cartes compactes (6,7:1). */
  background: color-mix(in srgb, var(--fp-dark) 30%, transparent);
  color: var(--fp-white);
  font-size: .92rem;
}
/* Titre à gauche, prix tout à droite, MÊME LIGNE (2026-09-07, complément
   Marino) : .fp-tk-mini-t (déjà le seul enfant texte de la carte, à côté du
   cadeau facultatif) devient lui-même un flex row en space-between, plutôt
   que de laisser le prix collé au titre par une simple marge. */
.fp-detail .fp-kids-tarifs .fp-tk-mini-t {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.fp-detail .fp-kids-tarifs .fp-tk-mini-t b {
  font-family: var(--fp-font-heading);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Sur les FICHES Magic Kids (racine .fp-tk--activite), la carte Accompagnant
   occupe toute la colonne de côté : son titre a la place pour être plus grand
   (Marino, 2026-09-07). La vitrine garde 1,1rem. */
.fp-detail .fp-kids-tarifs .fp-tk--activite .fp-tk-mini-t b {
  font-size: 1.55rem;
}
/* Prix ~15 % plus grand (1,4rem -> 1,6rem). */
.fp-detail .fp-kids-tarifs .fp-tk-mini-p {
  margin-left: 0;
  font-family: var(--fp-font-heading);
  font-size: 1.6rem;
  line-height: 1;
}
.fp-detail .fp-kids-tarifs .fp-tk-mini .fp-tk-gift {
  background: color-mix(in srgb, var(--fp-white) 18%, transparent);
  color: var(--fp-white);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   TUILE « RÉSERVER » (.fp-tk-reserver, 2026-09-07, complément Marino) :
   injectée par le plugin (filtre fp_tarifs_offres_cote_html, voir
   fp_render_tarifs()) sous l'Accompagnant, SUR LES FICHES SEULEMENT (jamais
   sur la vitrine, qui n'appelle pas ce filtre). Remplit la hauteur restante
   de la colonne de côté (grid-row:2 posé plus haut, align-items:stretch du
   duo) : son bas s'aligne donc sur le bas de la carte Entrée, même principe
   que le plan de la vitrine.
   -------------------------------------------------------------------------- */
/* Dégradé INVERSÉ (relecture Opus 2026-09-07) : secondary -> dark avec texte
   blanc, jamais accent -> secondary avec texte dark (3,32:1 à mi-hauteur du
   dégradé et 1,47:1 en bas, tous deux sous le seuil AA). Blanc sur
   secondary/dark mesure au minimum 9,9:1 sur toute la hauteur du dégradé. La
   flèche et l'icône calendrier héritent de ce blanc via currentColor. */
/* Grille à deux colonnes centrée (Marino, 2026-09-07) : l'icône calendrier
   seule sur la première rangée, le mot « Réserver » et son chevron côte à
   côte sur la seconde (le chevron à DROITE du texte, plus en dessous). */
.fp-detail .fp-kids-tarifs .fp-tk-reserver {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 10px 10px;
  min-height: 110px;
  padding: 20px;
  border-radius: var(--fp-radius);
  background: linear-gradient(155deg, var(--fp-secondary), var(--fp-dark));
  color: var(--fp-white);
  text-decoration: none;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fp-detail .fp-kids-tarifs .fp-tk-reserver svg {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.fp-detail .fp-kids-tarifs .fp-tk-reserver > svg {
  grid-column: 1 / -1;
  justify-self: center;
}
.fp-detail .fp-kids-tarifs .fp-tk-reserver > .fp-tk-reserver-fleche {
  display: inline-flex;
  align-items: center;
  grid-column: 2;
}
.fp-detail .fp-kids-tarifs .fp-tk-reserver > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
.fp-detail .fp-kids-tarifs .fp-tk-reserver-fleche svg {
  width: 18px;
  height: 18px;
  transform: translateX(0);
  transition: transform .2s ease;
}
.fp-detail .fp-kids-tarifs .fp-tk-reserver:hover,
.fp-detail .fp-kids-tarifs .fp-tk-reserver:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--fp-dark) 45%, transparent);
}
.fp-detail .fp-kids-tarifs .fp-tk-reserver:hover .fp-tk-reserver-fleche svg,
.fp-detail .fp-kids-tarifs .fp-tk-reserver:focus-visible .fp-tk-reserver-fleche svg {
  transform: translateX(4px);
}
.fp-detail .fp-kids-tarifs .fp-tk-reserver:focus-visible {
  outline: 3px solid var(--fp-white);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-tarifs .fp-tk-reserver,
  .fp-detail .fp-kids-tarifs .fp-tk-reserver-fleche svg {
    transition: none;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-reserver:hover,
  .fp-detail .fp-kids-tarifs .fp-tk-reserver:focus-visible {
    transform: none;
  }
}

/* Plan des activités à icônes seules (.fp-tk-plan) RETIRÉ DU RENDU le
   2026-09-10 (Marino : « la zone avec les icônes uniquement disparait »),
   voir FP_Tarifs_Shortcode::render_offres_plan() et tk_plan_item(),
   supprimés côté plugin (leur résolution d'icône, tk_icone_pour(), reste
   utilisée par les pilules « Compris »/« Avec jetons » ci-dessus). Tout
   l'habillage qui vivait ici (pastilles flottantes, bulle au survol,
   légende) est retiré avec lui : plus aucun sélecteur ne le cible. */

/* --------------------------------------------------------------------------
   BANDE « POUR ALLER PLUS LOIN » (.fp-tk-bande, 2026-09-06, refonte v2) :
   pleine largeur, sous le duo Entrée / colonne de côté, page ET fiches
   (voir le contrat de markup côté plugin). Titre repris du style .fp-tk-h
   déjà déclaré plus haut (classes cumulées fp-tk-h + fp-tk-h--bande), grille
   de cartes compactes ci-dessous. CE RENDU (bande pleine largeur SOUS le
   duo) reste le comportement par défaut, mais NE S'APPLIQUE PLUS quand la
   bande ne porte qu'UNE SEULE carte compacte (cas réel depuis le semis v7,
   « Entrée famille ») : voir le bloc « CARTE ENTRÉE FAMILLE RELOCALISÉE »
   plus bas, qui neutralise ce bloc-ci dans ce cas précis et replace la
   carte dans la colonne de gauche, sous la carte Enfant.
   -------------------------------------------------------------------------- */
/* Séparateur en dégradé (2026-09-10) : marque la bascule entre le duo
   Entrée/Accompagnant ci-dessus et la bande, sans texte ajouté. Un trait qui
   s'estompe aux bords plutôt qu'un filet plein, dans le même esprit
   filigrane que le reste de la section. Marge augmentée (28px -> 40px) pour
   laisser respirer la carte mise en avant ci-dessous (voir plus bas). Sans
   effet quand la bande est relocalisée (display:contents plus bas) : un
   élément display:contents ne peint ni bordure ni marge propres. */
.fp-detail .fp-kids-tarifs .fp-tk-bande {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fp-white) 25%, transparent) 50%, transparent) 1;
}
.fp-detail .fp-kids-tarifs .fp-tk-bande .fp-tk-head {
  margin-bottom: 14px;
}
.fp-detail .fp-kids-tarifs .fp-tk-bande-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* --------------------------------------------------------------------------
   CARTE « ENTRÉE FAMILLE » RELOCALISÉE (2026-09-10, Marino, second retour :
   « à droite on retrouve sur la même colonne accompagnant et entrée
   famille » ; remplace la version du matin, qui la plaçait sous la carte
   Enfant). Uniquement quand la bande ne porte qu'UNE SEULE carte compacte
   (:only-child, même garde-fou que la carte vedette plus haut) : une bande
   à plusieurs cartes retombe sur son ancien comportement pleine largeur
   SOUS le duo, ci-dessus, INCHANGÉ.

   La carte Enfant (.fp-tk-col--entree) reste À SA PLACE, colonne de gauche.
   .fp-tarifs-widget.fp-tk--v2 devient le conteneur de grille ; .fp-tk-duo,
   ses deux colonnes et .fp-tk-bande/.fp-tk-bande-grille passent en
   display:contents pour que la carte Famille rejoigne la colonne de droite
   comme un item DIRECT de cette grille, SOUS l'Accompagnant. Actif à TOUTES
   les largeurs, pas seulement à partir de 900px : l'ordre de lecture
   Entrée/Accompagnant/Famille doit rester correct même empilé en une seule
   colonne sous 900px (demande explicite de Marino, valable aussi sous
   720px).

   Deux variantes de hauteur de colonne de droite : DEUX rangées sur la
   vitrine (Accompagnant, Famille), TROIS sur une fiche (.fp-tk--activite,
   qui ajoute la tuile Réserver sous la Famille).

   La fenêtre <dialog> des jetons n'est jamais un item de cette grille :
   position:fixed en mode modal, display:none fermée (feuille du
   navigateur), donc hors du flux normal dans les deux cas, quel que soit
   le display de ses ancêtres.

   Limite connue : le focus clavier suit l'ordre du DOCUMENT (Entrée,
   Accompagnant, Réserver, Famille), pas l'ordre VISUEL réorganisé
   ci-dessous ; même compromis que la réorganisation display:contents déjà
   en place sur .fp-tk-col--cote (voir plus haut).

   Règle à :has() SEULE dans sa liste : toutes les déclarations qui suivent
   partagent la MÊME garde :has(), aucun repli sans :has() n'est mélangé
   dans leurs listes de sélecteurs. */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) > .fp-tk-duo,
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-col--entree,
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-col--cote,
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) > .fp-tk-bande,
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-bande-grille {
  display: contents;
}
/* Ordre de lecture en une seule colonne (sous 900px, valable aussi sous
   720px) : Entrée (1), Accompagnant (2), Famille (3), tuile Réserver (4,
   vitrine et fiches depuis le 2026-09-10). */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-col--entree > .fp-tk-card.fp-tk-entree {
  order: 1;
}
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-col--cote > .fp-tk-mini {
  order: 2;
}
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-bande-grille > .fp-tk-card--compact {
  order: 3;
  /* Neutralise le centrage qu'aurait la grille auto-fit ci-dessus pour une
     carte seule (usage générique de .fp-tk-bande-grille) : ici la carte
     occupe toute la largeur de sa cellule, la colonne de droite, comme les
     autres cartes qui l'entourent, plutôt qu'une largeur de carte réduite. */
  max-width: none;
  margin-inline: 0;
}
.fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-col--cote > .fp-tk-reserver {
  order: 4;
}
@media (min-width: 900px) {
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
    /* Trois rangées (Accompagnant, Famille, tuile Réserver) : la tuile
       (.fp-tk-reserver, filtre fp_tarifs_offres_cote_html côté thème) est
       désormais injectée SUR LA VITRINE COMME SUR LES FICHES (2026-09-10,
       régression signalée par Marino : la vitrine n'avait plus aucun bouton
       de réservation dans sa zone Tarifs). Plus de distinction .fp-tk--activite
       ici : les deux contextes ont la même colonne de côté. */
    grid-template-rows: auto auto auto;
    align-items: stretch;
    gap: 20px 28px;
  }
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-col--entree > .fp-tk-card.fp-tk-entree {
    grid-column: 1;
    /* Toute la hauteur de la colonne de droite, qu'elle porte deux ou trois
       rangées (voir grid-template-rows ci-dessus, vitrine et fiche). */
    grid-row: 1 / -1;
    flex: 1;
  }
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-col--cote > .fp-tk-mini {
    grid-column: 2;
    grid-row: 1;
  }
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-bande-grille > .fp-tk-card--compact {
    grid-column: 2;
    grid-row: 2;
  }
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget.fp-tk--v2:has(.fp-tk-bande-grille > .fp-tk-card--compact:only-child) .fp-tk-col--cote > .fp-tk-reserver {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Colonne droite : cartes compactes en voile sombre, sans ombre portée, pour
   rester en retrait de la carte Entrée. */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-card--compact {
  gap: 10px;
  padding: 20px 18px 16px;
  background: color-mix(in srgb, var(--fp-dark) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--fp-white) 8%, transparent);
  box-shadow: none;
  color: var(--fp-white);
}
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-card-head {
  align-items: baseline;
}
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-card-title {
  font-size: 1.25rem;
}
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-price {
  font-size: 1.9rem;
  color: var(--fp-white);
}
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-unit {
  font-size: .9rem;
  color: color-mix(in srgb, var(--fp-white) 80%, transparent);
}
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-options {
  padding-top: 10px;
  border-top-color: color-mix(in srgb, var(--fp-white) 20%, transparent);
}
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-line {
  margin: 0;
  font-size: .95rem;
  color: color-mix(in srgb, var(--fp-white) 82%, transparent);
}
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-line strong {
  color: var(--fp-white);
}

/* --------------------------------------------------------------------------
   CARTE À PALIERS (.fp-tk-card--compact.fp-tk-palier, 2026-09-06, retouchée
   le 2026-09-07 PUIS le 2026-09-07 relecture Opus) : même anatomie qu'une
   carte compacte, légèrement mise en avant (bordure accent). Titre et
   contrôle − / + sur la MÊME LIGNE (demande Marino), en FLEX RÉEL, JAMAIS en
   position:absolute (l'ancrage en coin débordait de sa gouttière de 82px et
   recouvrait le titre dès qu'un palier affichait un libellé long, ex.
   « 12 entrées », ou qu'un titre de groupe long comme « Pack d'entrées » y
   était accolé) : .fp-tk-card-head et .fp-tk-palier-ctl sont des SIBLINGS du
   markup (jamais imbricables en CSS seul sans wrapper commun côté plugin),
   tarifs-kids.js (initPaliers) déplace donc RÉELLEMENT le contrôle DANS
   .fp-tk-card-head (déjà display:flex; justify-content:space-between, prévu
   à l'origine pour le titre et une pastille cadeau) : le contrôle en devient
   le second enfant flex, poussé à droite naturellement, sans jamais pouvoir
   chevaucher le titre quelle que soit la longueur des deux. SANS JS : le
   contrôle reste à sa place d'origine dans le markup, bloc pleine largeur
   sous le titre, toujours utilisable (boutons inertes). Bouton réduit
   (32px -> 24px) : la carte ne doit plus être PLUS HAUTE que ses voisines de
   la bande (toutes stretch à la même hauteur par la grille
   .fp-tk-bande-grille, déjà en place), sans que ce soit non plus un but en
   soi de la rendre plus basse qu'elles.
   -------------------------------------------------------------------------- */
.fp-detail .fp-kids-tarifs .fp-tk-card--compact.fp-tk-palier {
  border-color: var(--fp-accent);
}
/* Une fois déplacé par le JS, le contrôle est un enfant flex de
   .fp-tk-card-head : il ne doit ni s'étirer ni prendre toute la largeur
   restante, juste occuper la place que ses boutons+libellé demandent. */
.fp-detail .fp-kids-tarifs .fp-tk-card-head > .fp-tk-palier-ctl {
  flex: 0 0 auto;
}
/* Sans margin (relecture Opus 2026-09-07) : le contrôle est désormais un
   enfant flex de .fp-tk-card-head (déplacé par tarifs-kids.js), une marge
   verticale n'a plus aucun effet sur son alignement dans cette rangée. */
.fp-detail .fp-kids-tarifs .fp-tk-palier-ctl {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Bordure à 55 % (pas 40 %, relecture Opus 2026-09-06) : 40 % ne mesurait que
   2,42:1 sur le fond de la carte (color-mix dark 30% sur --fp-primary, soit
   environ RVB 29/102/94), sous le seuil 3:1 des composants d'interface.
   55 % mesure 3,23:1 sur ce même fond (inchangé à la taille réduite
   ci-dessous, seule la couleur compte pour ce calcul). */
.fp-detail .fp-kids-tarifs .fp-tk-palier-ctl button {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--fp-white) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fp-white) 14%, transparent);
  color: var(--fp-white);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.fp-detail .fp-kids-tarifs .fp-tk-palier-ctl button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fp-white) 26%, transparent);
}
.fp-detail .fp-kids-tarifs .fp-tk-palier-ctl button:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}
.fp-detail .fp-kids-tarifs .fp-tk-palier-ctl button:disabled {
  opacity: .35;
  cursor: default;
}
.fp-detail .fp-kids-tarifs .fp-tk-palier-ctl output {
  min-width: 2.4em;
  text-align: center;
  font-family: var(--fp-font-heading);
  /* .9rem (retour Marino 2026-09-07, un peu plus grand que le .75rem
     précédent, lui-même déjà remonté depuis .66rem trop petit). */
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--fp-white) 92%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-tarifs .fp-tk-palier-ctl button {
    transition: none;
  }
}

/* Pastille « Nouveau » : à cheval sur le bord haut de la carte. */
.fp-detail .fp-kids-tarifs .fp-tk-badge {
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 3px 11px;
  border-radius: var(--fp-pill);
  background: var(--fp-accent);
  color: var(--fp-dark);
  font-family: var(--fp-font-heading);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* Ancien prix : trait fin, atténué, juste avant le prix courant. */
.fp-detail .fp-kids-tarifs .fp-tk-was {
  margin-right: 2px;
  font-family: var(--fp-font-heading);
  font-size: 1.2rem;
  letter-spacing: .03em;
  /* Blanc 55 % (3,23:1) insuffisant en AA sur fond --fp-primary : 80 %. */
  color: color-mix(in srgb, var(--fp-white) 80%, transparent);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--fp-white) 70%, transparent);
}

/* --------------------------------------------------------------------------
   CARTE VEDETTE DE LA BANDE (2026-09-10, Marino : « l'entrée famille doit
   être vue comme un best-seller carrément »). Ciblée par la PRÉSENCE d'un
   badge sur une carte compacte de la bande, JAMAIS par son titre : demain,
   si le parc met en avant une autre carte (badge posé dans Magic Parc >
   Tarifs), elle hérite du même traitement sans une ligne de code. Règle à
   :has() SEULE dans sa liste de sélecteurs (une règle de repli combinée dans
   la même liste invaliderait tout le groupe sur les navigateurs sans :has,
   convention du projet).
   -------------------------------------------------------------------------- */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--fp-accent) 30%, var(--fp-secondary)) 0%, color-mix(in srgb, var(--fp-dark) 55%, var(--fp-secondary)) 100%);
  border: 2px solid var(--fp-accent);
  padding: 26px 22px 22px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fp-accent) 45%, transparent),
    0 28px 48px -20px color-mix(in srgb, var(--fp-dark) 70%, transparent),
    0 0 32px -6px color-mix(in srgb, var(--fp-accent) 60%, transparent);
}
/* Badge recentré en chapeau de carte (au lieu du coin haut-gauche générique
   des autres cartes de la bande) : lecture immédiate « meilleure offre » au
   sommet, léger relief pour porter le regard. Couleurs héritées de
   .fp-tk-badge (fond accent, texte foncé), non redéclarées ici. */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) .fp-tk-badge {
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  padding: 5px 16px;
  font-size: .84rem;
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--fp-dark) 60%, transparent);
}
/* Prix agrandi : une offre vedette se lit d'abord par son montant. */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) .fp-tk-card-title {
  font-size: 1.4rem;
}
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) .fp-tk-price {
  font-size: 2.3rem;
}
/* Prix de référence barré (.fp-tk-was) : retour de Marino du 2026-09-10, « le
   55.- tracé n'est pas assez visible ». Il ressort désormais nettement (plus
   grand, pleine opacité, trait bien marqué, teinte accent qui reprend celle
   du badge « meilleure offre » juste au-dessus), tout en restant clairement
   secondaire : la taille reste inférieure à celle du prix courant
   (.fp-tk-price, 2.3rem ci-dessus). */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) .fp-tk-was {
  font-size: 1.55rem;
  color: var(--fp-accent);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--fp-accent);
}
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) .fp-tk-line {
  color: color-mix(in srgb, var(--fp-white) 92%, transparent);
}

/* Interrupteurs : le rond DEVANT le texte, le « i » au bout de la ligne. */
.fp-detail .fp-kids-tarifs .fp-tk-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.fp-detail .fp-kids-tarifs .fp-tk-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.fp-detail .fp-kids-tarifs .fp-tk-knob {
  order: -1;
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--fp-pill);
  background: color-mix(in srgb, var(--fp-white) 28%, transparent);
  transition: background .2s;
}
.fp-detail .fp-kids-tarifs .fp-tk-knob::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fp-white);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--fp-dark) 25%, transparent);
  transition: transform .2s;
}
.fp-detail .fp-kids-tarifs .fp-tk-switch input:checked ~ .fp-tk-knob {
  background: var(--fp-accent);
}
.fp-detail .fp-kids-tarifs .fp-tk-switch input:checked ~ .fp-tk-knob::after {
  transform: translateX(20px);
}
.fp-detail .fp-kids-tarifs .fp-tk-switch input:focus-visible ~ .fp-tk-knob {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}
.fp-detail .fp-kids-tarifs .fp-tk-txt {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  font-size: .95rem;
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-tarifs .fp-tk-knob,
  .fp-detail .fp-kids-tarifs .fp-tk-knob::after {
    transition: none;
  }
}

/* Bouton « i » : ouvre la fenêtre d'information sur les jetons (partagée
   avec la partie anniversaire, cf. plus bas). */
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border: 1.5px solid currentColor;
  border-radius: var(--fp-pill);
  background: transparent;
  color: var(--fp-secondary);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-card--compact .fp-tk-info {
  color: color-mix(in srgb, var(--fp-accent) 55%, var(--fp-white));
}
.fp-detail .fp-kids-tarifs .fp-tk-i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
}
.fp-detail .fp-kids-tarifs .fp-tk-i span {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: .8rem;
  line-height: 1;
  color: var(--fp-white);
}
.fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-card--compact .fp-tk-i span {
  color: var(--fp-secondary);
}
.fp-detail .fp-kids-tarifs .fp-tk-info:hover {
  background: color-mix(in srgb, var(--fp-accent) 18%, transparent);
}
.fp-detail .fp-kids-tarifs .fp-tk-info:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}

/* Fenêtre d'information sur les jetons : rendue par la partie « accès »
   uniquement (cf. contrat de markup), son bouton « i » peut aussi vivre dans
   la partie anniversaire un peu plus bas sur la page. */
.fp-detail .fp-kids-tarifs .fp-tk-dialog {
  width: calc(100% - 32px);
  max-width: 460px;
  padding: 0;
  border: 0;
  border-radius: var(--fp-radius);
  color: var(--fp-ink);
  background: var(--fp-paper);
  box-shadow: var(--fp-shadow-lg);
}
.fp-detail .fp-kids-tarifs .fp-tk-dialog::backdrop {
  background: color-mix(in srgb, var(--fp-dark) 60%, transparent);
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 24px 22px;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg-head h3 {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fp-secondary);
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--fp-cream);
  color: var(--fp-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg-close:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg p {
  margin: 0;
  font-size: .95rem;
  color: var(--fp-ink-soft);
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg .fp-tk-row {
  gap: 6px;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg details {
  padding-top: 12px;
  border-top: 1px solid var(--fp-line);
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--fp-secondary);
  list-style: none;
  cursor: pointer;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg summary::-webkit-details-marker {
  display: none;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg details[open] summary::before {
  transform: rotate(45deg);
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg details .fp-tk-row {
  margin-top: 10px;
}
.fp-detail .fp-kids-tarifs .fp-tk-dlg summary:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-tarifs .fp-tk-dlg summary::before {
    transition: none;
  }
}

/* Une seule colonne SOUS 900px (2026-09-06, refonte v2 : deux colonnes
   1.35fr/.85fr à partir de 900px, voir .fp-tk-duo plus haut). */
@media (max-width: 899px) {
  .fp-detail .fp-kids-tarifs .fp-tk-duo {
    grid-template-columns: 1fr;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-price--xl {
    font-size: 3.4rem;
  }
}
@media (max-width: 520px) {
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-card {
    padding: 20px 18px 18px;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-card-head {
    flex-direction: column;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-card-head {
    flex-direction: row;
  }
  /* Carte vedette (2026-09-10) : padding et prix resserrés comme les autres
     cartes à cette largeur, la mise en avant (bordure, lueur, badge) reste
     inchangée. Spécificité identique à la déclaration de base (6 classes) :
     l'emporte par ordre de cascade, cette règle vient après. */
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) {
    padding: 22px 18px 18px;
  }
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) .fp-tk-price {
    font-size: 2rem;
  }
  .fp-detail .fp-kids-tarifs .fp-tarifs-widget .fp-tk-bande-grille .fp-tk-card--compact:has(.fp-tk-badge) .fp-tk-was {
    font-size: 1.35rem;
  }
}

/* --------------------------------------------------------------------------
   COMPTEUR ANIMÉ (2026-09-06) : signal visuel discret posé par tarifs-kids.js
   (classe .is-tick, voir animerNombre()) sur les TROIS montants qui peuvent
   changer en direct : la barre « Votre entrée », le total du récapitulatif
   d'anniversaire (.fp-kids-anniv, propre à la vitrine et normalement absent
   de cette feuille, exception assumée ici car ce fichier CSS est le seul
   ouvert à ce chantier) et le prix/prix barré des cartes compactes à
   bascule. Écart documenté par rapport à la demande initiale (qui prévoyait
   var(--fp-primary) sur un « fond blanc » du récap et des cartes) : les TROIS
   emplacements vivent en réalité sur un fond sombre de la famille teal/vert
   (--fp-secondary pour la barre et le récap, voile sombre sur --fp-primary
   pour les cartes compactes), où --fp-primary en texte tomberait sous 3:1 de
   contraste (mesuré ~2:1). --fp-accent (déjà utilisé partout ailleurs dans
   ce fichier pour du texte d'emphase sur fond sombre) dépasse 4,5:1 partout
   ici et reste dans la même famille de couleurs.
   -------------------------------------------------------------------------- */
.fp-detail .fp-kids-tarifs .fp-tk-total-val,
.fp-detail .fp-kids-anniv .fp-tk-recap .fp-tk-price-val[data-tk-total],
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-price-val[data-tk-prix],
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-was[data-tk-ref] {
  transition: transform .18s ease, color .18s ease;
}
.fp-detail .fp-kids-tarifs .fp-tk-total-val.is-tick,
.fp-detail .fp-kids-anniv .fp-tk-recap .fp-tk-price-val[data-tk-total].is-tick,
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-price-val[data-tk-prix].is-tick,
.fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-was[data-tk-ref].is-tick {
  display: inline-block;
  transform: scale(1.06);
  color: var(--fp-accent);
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-tarifs .fp-tk-total-val,
  .fp-detail .fp-kids-anniv .fp-tk-recap .fp-tk-price-val[data-tk-total],
  .fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-price-val[data-tk-prix],
  .fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-was[data-tk-ref] {
    transition: color .18s ease;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-total-val.is-tick,
  .fp-detail .fp-kids-anniv .fp-tk-recap .fp-tk-price-val[data-tk-total].is-tick,
  .fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-price-val[data-tk-prix].is-tick,
  .fp-detail .fp-kids-tarifs .fp-tk-card--compact .fp-tk-was[data-tk-ref].is-tick {
    transform: none;
  }
}

/* Ancre de la barre d'actions (fiches d'activité) : le titre visé ne doit pas
   se caler sous la barre de navigation collante. Règle jumelle de celle de
   .fp-kids-activites, restée dans zone-kids.css (elle ne concerne que la
   vitrine) : même déclaration, deux fichiers, aucun conflit de cascade
   puisque .fp-kids-tarifs n'existe plus du tout dans zone-kids.css. */
.fp-kids-tarifs {
  scroll-margin-top: calc(var(--fp-nav-h) + 12px);
}

/* VOILE PLUS VERT SUR LES FICHES MAGIC KIDS (Marino, 10.09.2026, fiche Mur de
   grimpe : « l'overlay vert sur la vidéo est trop faible »). Sur les fiches
   classiques, le voile partagé (activite.css) est léger à dessein, la carte des
   prix étant un bloc à part. Ici la section EST teal, avec ses cartes posées
   directement dessus : quand une vidéo remplace l'aplat, il faut un voile bien
   plus présent pour que la grille reste dans son univers vert. */
.fp-detail .fp-tarifs.fp-kids-tarifs.has-fond-media .fp-tarifs-fond-voile {
  background: color-mix(in srgb, var(--fp-secondary) 55%, transparent);
}
/* CASE ACCOMPAGNANT SUR FOND VIDÉO (Marino, 2026-09-10 : « la case
   accompagnant n'est pas très visible quand on a une vidéo en fond »).

   Son fond est un voile --fp-dark à 30 % (bloc .fp-tk-mini plus haut) : posé
   sur l'aplat teal de la section il se détache bien, mais dès qu'une vidéo
   passe derrière, l'image en mouvement le traverse et la carte cesse d'avoir
   des bords lisibles. Le voile de section renforcé juste au-dessus n'y suffit
   pas : il assombrit l'ensemble uniformément, donc la carte et son fond dans
   la même proportion, sans jamais recreuser l'écart entre les deux.

   On rend donc SON fond nettement plus opaque et sa bordure un peu plus
   franche, uniquement quand un média est réellement actif : has-fond-media
   n'est posée qu'à ce moment, côté PHP dès qu'une image existe et par
   setupVideosFond() (main.js) quand une vidéo démarre vraiment. Un fond vidéo
   jamais activé (téléphone, mouvement réduit, économie de données, sans
   JavaScript) ne pose pas la classe : sur l'aplat teal, la carte garde alors
   exactement son réglage d'origine. */
.fp-detail .fp-tarifs.fp-kids-tarifs.has-fond-media .fp-tk-mini {
  background: color-mix(in srgb, var(--fp-dark) 62%, transparent);
  border-color: color-mix(in srgb, var(--fp-white) 16%, transparent);
}

/* « RÉSERVER MON ACCÈS MAGIC KIDS » SUR UNE SEULE LIGNE SUR TÉLÉPHONE
   (Marino, 2026-09-10) : à 24px de police d'affichage, le libellé passait
   sur deux lignes dans une tuile de 311px. Réduit à 19px sous 720px, avec
   des marges internes un peu plus serrées : il tient sur une ligne. */
@media (max-width: 720px) {
  .fp-detail .fp-kids-tarifs .fp-tk-reserver > span:not(.fp-tk-reserver-fleche) {
    font-size: 19px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .fp-detail .fp-kids-tarifs .fp-tk-reserver { padding-left: 16px; padding-right: 16px; gap: 10px; }
}