/* ==========================================================================
   zone-kids.css - page de PRESENTATION de Magic Kids (slug 'zone-kids',
   template-zone-kids.php). Chargé via is_page_template('template-zone-kids.php'),
   EN PLUS de assets/css/activite.css (kit visuel « détail » partagé pour le
   HAUT de page : hero diaporama sombre + barre d'actions sticky, voir
   fp_is_detail_template et fun_planet_enqueue_per_template).
   Tout ce qui suit ce haut de page est BESPOKE : univers enfants coloré et
   ludique, distinct des autres pages de détail (carte blanche demandée par
   Marino). Couleurs : tokens var(--fp-*) UNIQUEMENT (jamais de hex en dur,
   jamais d'orange). Bebas Neue / Thoge : toujours en graisse 400 sur les
   classes propres à ce fichier (aucun font-weight 600/700 ajouté ici).
   ========================================================================== */

/* --------------------------------------------------------------------------
   INTRO SCENE (.fp-kids-scene) : texte a gauche, scene ronde (blob texture +
   mascotte + confettis) a droite. Reinterpretation coloree (accent/sable) de
   la scene-arche du modele activite standard (qui reste en teal primary).
   -------------------------------------------------------------------------- */
.fp-kids-scene {
  position: relative;
  overflow: hidden;
}
/* Grand halo decoratif en fond de section, purement visuel (aria-hidden). */
.fp-kids-scene-arch {
  position: absolute;
  top: -18%;
  right: -12%;
  z-index: 0;
  width: min(60vw, 620px);
  height: min(60vw, 620px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--fp-accent), transparent 70%);
  opacity: .3;
  pointer-events: none;
}
.fp-kids-scene-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}
/* Colonne de texte (eyebrow + titre + texte + badges) : min-width 0 pour que
   la grille n'impose jamais sa largeur de contenu (evite tout debordement
   avec un titre/texte long sur les petites largeurs de la colonne). */
.fp-kids-scene-text {
  min-width: 0;
}
.fp-kids-scene-title {
  margin: 0 0 16px;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  color: var(--fp-primary);
}
.fp-kids-scene-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent));
}
.fp-kids-scene-badges {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fp-kids-scene-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 7px;
  border-radius: var(--fp-pill);
  background: var(--fp-paper);
  border: 1px solid var(--fp-line);
  box-shadow: var(--fp-shadow);
}
.fp-kids-scene-badge-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fp-accent);
  color: var(--fp-white);
}
.fp-kids-scene-badge-ic img { width: 18px; height: 18px; object-fit: contain; }
.fp-kids-scene-badge-ic svg { width: 16px; height: 16px; }
.fp-kids-scene-badge-label { font-size: .86rem; font-weight: 600; color: var(--fp-ink); }

.fp-kids-scene-figure {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
/* Blob organique (forme irregulière, pas une arche pleine largeur comme le
   modele activite standard) teinte accent + texture du plan du parc, ton sur
   ton. Morph tres lent, purement decoratif. */
.fp-kids-scene-blob {
  position: absolute;
  inset: 6% 4%;
  z-index: 0;
  border-radius: 63% 37% 54% 46% / 43% 47% 53% 57%;
  background-color: var(--fp-accent);
  background-image: url('../img/em-plan.svg');
  background-size: 170%;
  background-position: center;
  box-shadow: var(--fp-shadow-lg);
}
@media (prefers-reduced-motion: no-preference) {
  .fp-kids-scene-blob { animation: fp-kids-blob-morph 16s ease-in-out infinite; }
}
@keyframes fp-kids-blob-morph {
  0%, 100% { border-radius: 63% 37% 54% 46% / 43% 47% 53% 57%; }
  50% { border-radius: 46% 54% 37% 63% / 57% 53% 47% 43%; }
}
.fp-kids-scene-mascotte {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  max-width: 68%;
  height: auto;
  filter: drop-shadow(0 16px 20px color-mix(in srgb, var(--fp-secondary-dark) 35%, transparent));
}
.fp-kids-scene-dot {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
}
.fp-kids-scene-dot--1 { width: 26px; height: 26px; top: 4%; left: 0; background: var(--fp-sand); }
.fp-kids-scene-dot--2 { width: 16px; height: 16px; bottom: 14%; right: 2%; background: var(--fp-primary); }
.fp-kids-scene-dot--3 { width: 20px; height: 20px; bottom: 2%; left: 20%; background: var(--fp-cream); border: 2px solid var(--fp-accent); }
@media (prefers-reduced-motion: no-preference) {
  .fp-kids-scene-dot--1 { animation: fp-float 5s ease-in-out infinite; }
  .fp-kids-scene-dot--2 { animation: fp-float 4.4s ease-in-out .4s infinite; }
  .fp-kids-scene-dot--3 { animation: fp-float 6s ease-in-out .8s infinite; }
}

@media (max-width: 980px) {
  .fp-kids-scene-grid { grid-template-columns: 1fr; }
  .fp-kids-scene-figure { max-width: 300px; }
}

/* --------------------------------------------------------------------------
   PHOTOS (.fp-kids-photos) : bandeau de photos encadrees facon « tirage »,
   legere rotation alternee, effet Ken Burns discret (reprend le keyframe
   fp-kenburns deja utilise par le hero, assets/css/main.css).
   -------------------------------------------------------------------------- */
.fp-kids-photos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 40px;
}
.fp-kids-photo-frame {
  width: 220px;
  padding: 10px 10px 26px;
  background: var(--fp-paper);
  border-radius: var(--fp-radius-sm);
  box-shadow: var(--fp-shadow);
  transform: rotate(-3deg);
  transition: transform .3s var(--fp-anim-ease);
}
.fp-kids-photo-frame--b { transform: rotate(2deg); }
.fp-kids-photo-frame:hover { transform: rotate(0deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .fp-kids-photo-frame { transition: none; }
  .fp-kids-photo-frame:hover { transform: rotate(-3deg); }
  .fp-kids-photo-frame--b:hover { transform: rotate(2deg); }
}
.fp-kids-photo-window {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
}
.fp-kids-photo-media {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: fp-kenburns 20s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .fp-kids-photo-media { animation: none; }
}
@media (max-width: 720px) {
  .fp-kids-photo-frame { width: 44vw; max-width: 200px; }
}

/* --------------------------------------------------------------------------
   FORMULES (.fp-kids-formules) : acces payant, douceurs, anniversaires.

   FOND DE SECTION A MOTIF (demande client : « le plan du parc ou le motif
   topographique, comme ailleurs sur le site ») : aplat vert fonce (.fp-s-accent
   pose cote PHP) plus le PLAN DU PARC en filigrane.
   Pourquoi em-plan.svg et surtout PAS em-topo.svg : em-topo porte son propre
   aplat vert (un <rect> plein dans le fichier), il couvrirait la section d'un
   rectangle uni au lieu d'un filigrane ; em-plan est en traits seuls, c'est
   celui qu'utilisent deja les filigranes du site (.fp-carte-plan dans
   restaurant.css, .fp-formules-plan dans activite.css). Il reste en revanche le
   bon fichier pour le bandeau en tete de carte, juste plus bas, qui veut
   justement une surface pleine.
   TAILLE EN COUVERTURE (background-size: cover) : une taille figee du type
   min(1400px, 140%) laisse des bandes nues des que la section depasse ~1500px
   de large.

   CARTES EN BLANC (meme demande : « changer la couleur de fond des cases pour
   qu'elles soient en blanc, donc changer aussi la couleur du texte... sinon on
   sera tout en vert sur vert »). Seul le HAUT de carte garde son motif.
   -------------------------------------------------------------------------- */
.fp-kids-formules {
  position: relative;
  overflow: hidden;
}
.fp-kids-formules-plan {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/em-plan.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .28;
  pointer-events: none;
}
.fp-kids-formules .fp-wrap {
  position: relative;
  z-index: 1;
}
.fp-kids-formules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.fp-kids-formule {
  position: relative;
  padding: 38px 26px 28px;
  border-radius: var(--fp-radius-lg);
  background: var(--fp-paper);
  color: var(--fp-ink);
  overflow: hidden;
  box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--fp-secondary-dark) 80%, transparent);
  transition: transform .35s var(--fp-anim-ease), box-shadow .3s ease;
}
.fp-kids-formule:hover {
  transform: translateY(-8px);
  box-shadow: 8px 10px 0 0 color-mix(in srgb, var(--fp-accent) 55%, transparent), 0 20px 40px -24px color-mix(in srgb, var(--fp-secondary-dark) 80%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .fp-kids-formule { transition: none; }
  .fp-kids-formule:hover { transform: none; }
}
/* HAUT DE CARTE : inchange a l'oeil (demande client, « le haut des cartes garde
   son motif »). Il portait jusqu'ici le motif a 55 % PAR-DESSUS le degrade de la
   carte ; la carte etant devenue blanche, le bandeau reprend ce degrade a son
   compte et garde le motif au-dessus, dans les memes proportions.
   em-topo.svg est ici a sa place : son aplat integre fait justement la surface
   pleine que ce bandeau demande. */
.fp-kids-formule-topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: 96px;
  background: linear-gradient(160deg, var(--fp-primary), var(--fp-secondary-dark));
}
.fp-kids-formule-topo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/em-topo.svg');
  background-size: cover;
  background-position: center 30%;
  opacity: .55;
}
.fp-kids-formule-ic {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--fp-white);
  color: var(--fp-primary);
  box-shadow: var(--fp-shadow);
}
.fp-kids-formule-ic svg { width: 24px; height: 24px; }
/* Textes recolores pour le corps de carte devenu blanc : le titre en vert
   fonce (10,6:1), la description dans l'encre attenuee du site (7:1). Aucune
   opacite : elle delaverait le texte sur blanc. */
.fp-kids-formule-title {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.32rem;
  color: var(--fp-secondary);
}
.fp-kids-formule-desc {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  line-height: 1.5;
  color: var(--fp-ink-soft);
}
.fp-kids-formule-cta { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   ACCÈS & TARIF (.fp-kids-tarifs) : DÉPLACÉE dans assets/css/tarifs-kids.css
   le 2026-09-05 (habillage partagé avec les fiches d'activité Magic Kids,
   voir l'en-tête de ce nouveau fichier). Seule reste ici la partie
   ANNIVERSAIRE ci-dessous (.fp-kids-anniv), propre à cette page vitrine.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ANNIVERSAIRE MAGIC KIDS (.fp-kids-anniv) : bande CRÈME distincte de la
   section tarifs ci-dessus (fond --fp-cream, coupure nette), widget fp-tk du
   plugin fp-tarifs-manager (fp_render_kids_tarifs, partie="anniversaire") :
   le forfait à gauche (carte blanche, compteur d'enfants supplémentaires et
   interrupteurs d'options), le récapitulatif à droite (carte photo vert
   foncé, prix géant, bouton de réservation). Rendue UNIQUEMENT si le plugin
   renvoie quelque chose pour cette partie (cf. fp_render_kids_tarifs) : pas
   de garde CSS nécessaire ici pour un widget absent.

   REFONTE « BENTO » (2026-09-06, refonte v2 des tarifs Magic Kids). La photo
   facultative (fp-zone-anniv-photo, attribut de shortcode « photo », voir
   fp_render_kids_tarifs) occupe la colonne 2, rangée 1 (grid-template-rows
   1fr auto), le récapitulatif la colonne 2 rangée 2 : la colonne 1 (le
   forfait) s'étend sur les deux rangées (grid-row:1/-1) et grandit (flex:1
   sur la carte, .fp-tk-col reste un flex column) pour occuper toute la
   hauteur ainsi obtenue, ce qui fait tenir les DEUX colonnes à la même
   hauteur (bento) puisque la rangée « 1fr » de la photo absorbe l'écart.
   Sans photo (élément absent du markup, jamais seulement masqué), la grille
   redevient une seule rangée et le récapitulatif garde EXACTEMENT son
   alignement d'avant ce chantier (align-self:end, plus bas dans ce fichier),
   rien n'est ajouté pour ce cas. Le récapitulatif est rendu volontairement
   MOINS HAUT (padding vertical réduit, prix un cran plus petit, paragraphe
   compact) pour laisser respirer la photo au-dessus. Colonne du forfait
   allégée (ombre légère, bordure fine) : c'est le récap qui doit rester la
   carte la plus marquée visuellement.
   -------------------------------------------------------------------------- */
.fp-kids-anniv {
  position: relative;
  overflow: hidden; /* les confettis ci-dessous débordent volontairement du cadre visuel */
  text-align: left;
}
.fp-kids-anniv > .fp-wrap {
  position: relative;
  z-index: 1;
}
/* Sur-titre « Anniversaire enfant » (fp_icon_box) CENTRÉ au-dessus du titre
   du widget, contrairement au reste de la section restée alignée à gauche
   (2026-09-10, demande Marino). .fp-ibox est en display:inline-flex : un
   text-align:center sur ce conteneur bloc suffit à le centrer. */
.fp-kids-anniv-eyebrow {
  text-align: center;
}
/* MÊME COLONNE QUE LE TITRE (2026-09-10, retouche Marino : la pilule
   ressortait alignée à droite du titre, pas centrée dessus). Le titre du
   widget (.fp-tk-h, plus bas dans ce fichier) est centré dans .fp-tk-col,
   qui n'occupe que la colonne 1 de la grille .fp-tk-anniv dès 861px
   (minmax(0, 1.15fr) minmax(0, .85fr), gap 20px, plus haut dans ce fichier) :
   un centrage sur toute la largeur de .fp-wrap tombait donc plus à droite
   que le centre réel du titre. Sous 861px, .fp-tk-anniv repasse à une seule
   colonne pleine largeur (media query plus bas) et le centrage de base
   ci-dessus suffit déjà, d'où la restriction à ce media query. Même
   fractions que la grille pour que les deux centrages tombent exactement au
   même endroit. */
@media (min-width: 861px) {
  .fp-kids-anniv-eyebrow {
    width: calc((100% - 20px) * 1.15 / 2);
  }
}

/* --------------------------------------------------------------------------
   VERSION « DEMANDE D'OFFRE » DE LA BANDE (Marino, 2026-09-10)

   Remplace la grille interactive du plugin (forfait, options, total) par un
   duo texte plus galerie : voir fp_kids_tarifs_anniv_offre_html() dans
   inc/sections.php pour le pourquoi. Le parc ne vend plus de formule toute
   faite, il compose chaque offre au cas par cas.

   MÊMES PROPORTIONS QUE L'ANCIENNE GRILLE, et ce n'est pas un détail : la
   pilule de la section (.fp-kids-anniv-eyebrow, juste au-dessus) est centrée
   par un calcul qui reprend ces fractions et ce gap. Les changer ici
   décalerait la pilule par rapport au titre, exactement le défaut corrigé le
   même jour.
   -------------------------------------------------------------------------- */
/* GALERIE À LA HAUTEUR DE LA COLONNE DE TEXTE (Marino, 2026-09-10 : « rends la
   galerie plus haute visuellement, qu'elle fasse à peu près la même hauteur
   que la colonne de gauche »). Elle plafonnait à sa hauteur minimale de 200 px
   pendant que le texte en occupait 249, ce qui la faisait paraître posée trop
   petite à côté. « stretch » laisse la grille égaliser les deux colonnes
   d'elle-même, plutôt qu'une hauteur fixe qui se serait décalée au premier
   texte plus long. */
.fp-kids-anniv-duo {
  display: grid;
  gap: 20px;
  align-items: stretch;
}
@media (min-width: 861px) {
  .fp-kids-anniv-duo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}
/* Colonne de texte centrée, comme l'était le titre du widget qu'elle remplace.
   Le centrage VERTICAL est repris ici en flex : « stretch » ci-dessus étire
   désormais les deux colonnes, le texte retomberait sinon en haut de la sienne
   le jour où la galerie serait la plus haute des deux. */
.fp-kids-anniv-col {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fp-kids-anniv-titre {
  font-family: var(--fp-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  color: var(--fp-secondary);
  margin: 0 0 14px;
}
.fp-kids-anniv-texte {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--fp-ink);
  margin: 0 auto 22px;
  max-width: 46ch;
}
.fp-kids-anniv-actions {
  margin: 0 0 14px;
}
/* Mention de la formule à venir : lisible mais clairement secondaire, elle ne
   doit pas concurrencer le bouton juste au-dessus. */
.fp-kids-anniv-note {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--fp-ink-soft);
  margin: 0;
}
/* La figure doit REMPLIR la colonne étirée : sans cette reprise, elle garderait
   sa hauteur de contenu et le « stretch » de la grille n'aurait aucun effet
   visible. Sélecteur assez spécifique pour passer devant la règle générale de
   .fp-tk-anniv-photo plus bas dans ce fichier (0,3,0), qui pose le min-height
   de 200 px conservé ici comme plancher pour l'affichage en une colonne. */
.fp-kids-anniv-media {
  min-width: 0;
  display: flex;
}
.fp-detail .fp-kids-anniv .fp-kids-anniv-media .fp-tk-anniv-photo {
  flex: 1 1 auto;
  width: 100%;
}
/*
 * Marquage réel du widget (render_offres_anniversaire, plugin) : TROIS
 * enfants DIRECTS de .fp-tk-anniv, jamais une colonne de droite qui
 * regrouperait la photo et le récap (le contrat de markup ne pose pas ce
 * conteneur) : .fp-tk-col (forfait), figure.fp-tk-anniv-photo (FACULTATIVE,
 * absente du markup si l'attribut « photo » du shortcode est vide, jamais
 * seulement masquée), puis .fp-tk-card.fp-tk-recap. Le bento (colonne 1 =
 * forfait, colonne 2 = photo puis récap empilés) se fait donc par
 * PLACEMENT GRILLE explicite plutôt que par un wrapper flex qui n'existe pas
 * dans le HTML.
 */
.fp-detail .fp-kids-anniv .fp-tk-anniv {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 20px;
}
.fp-detail .fp-kids-anniv .fp-tk-anniv > .fp-tk-col {
  grid-column: 1;
}
.fp-detail .fp-kids-anniv .fp-tk-anniv > .fp-tk-anniv-photo,
.fp-detail .fp-kids-anniv .fp-tk-anniv > .fp-tk-card.fp-tk-recap {
  grid-column: 2;
}
/* Colonne du forfait : carte MOINS appuyée que le récapitulatif (voir plus
   bas), c'est la photo + le récap qui doivent ressortir dans ce bento.
   flex:1 : dès 861px, .fp-tk-col (grid-row:1/-1, voir le media query plus
   bas) s'étend en HAUTEUR sur toute la zone couverte par les deux rangées,
   mais un flex column ne grandit ses enfants QUE si on le leur demande (flex
   ne stretch pas sur l'axe principal) : sans cette ligne, la carte blanche
   garderait sa hauteur naturelle et laisserait un vide crème en dessous
   d'elle. Sélecteur à CINQ classes (.fp-tarifs-widget en plus) : le
   box-shadow ci-dessous doit battre la règle générique .fp-tk-card (même
   spécificité à quatre classes sans ce complément, déclarée plus bas dans ce
   fichier). */
.fp-detail .fp-kids-anniv .fp-tarifs-widget .fp-tk-card.fp-tk-forfait {
  flex: 1;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--fp-dark) 10%, transparent);
  border: 1px solid var(--fp-line);
}
.fp-detail .fp-kids-anniv .fp-tk-anniv-photo {
  position: relative;
  margin: 0;
  min-height: 200px;
  border-radius: var(--fp-radius);
  overflow: hidden;
  box-shadow: var(--fp-shadow);
}
.fp-detail .fp-kids-anniv .fp-tk-anniv-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* LUEUR QUI TRAVERSE (2026-09-07, demande Marino) : même reflet diagonal que
   les cartes de l'accueil (voir home.css, bloc « LUEUR QUI TRAVERSE AU
   SURVOL », .fp-intro-blob .fp-cluster-photo::before, mêmes valeurs),
   reproduite ici sur la photo de l'anniversaire. Elle passe UNE FOIS à
   l'arrivée de la section dans l'écran (classe is-in posée par main.js sur
   l'ancêtre .fp-reveal qui enveloppe tout le widget, voir
   fp_render_kids_tarifs), puis à CHAQUE survol. .fp-tk-anniv-photo est déjà
   overflow:hidden : le reflet ne déborde jamais du cadre arrondi. */
.fp-detail .fp-kids-anniv .fp-tk-anniv-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--fp-white) 55%, transparent) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
/*
 * Relecture Opus 2026-09-07 (deux passes). 1re passe : le survol ne se
 * déclenchait JAMAIS (.is-in permanent gagnait toujours). 2e passe : une
 * fois la spécificité égalisée, c'est le RETRAIT du pointeur qui rejouait le
 * balayage d'arrivée (.is-in reste posé pour toujours par main.js ; dès que
 * :hover cesse de matcher, la règle .is-in, toujours vraie, reprend la main
 * et reformule la MÊME valeur d'animation, ce qui la relance).
 *
 * Fix définitif : .is-in n'est plus ciblé directement. tarifs-kids.js
 * (initLueurArrivee) pose une classe TEMPORAIRE, is-lueur-arrivee, sur la
 * figure elle-même au premier .is-in observé sur l'ancêtre .fp-reveal, puis
 * la retire à la fin de CETTE animation précise (animationend). La règle
 * ci-dessous ne matche donc plus qu'UNE fois, le temps du balayage
 * d'arrivée ; ensuite plus aucune règle ne s'applique en dehors du survol
 * (qui reste géré en CSS pur, sans JS, comme demandé). Spécificités
 * distinctes (0,4,0 pour l'arrivée, 0,5,0 pour le survol via l'ancêtre
 * .fp-reveal) : sans effet ici puisque les deux ne se chevauchent plus dans
 * le temps, mais gardées cohérentes avec la note ci-dessus.
 */
.fp-detail .fp-kids-anniv .fp-tk-anniv-photo.is-lueur-arrivee::before {
  animation: fp-tk-anniv-photo-lueur-arrivee .9s ease .2s;
}
.fp-detail .fp-kids-anniv .fp-reveal .fp-tk-anniv-photo:hover::before {
  animation: fp-tk-anniv-photo-lueur-survol .7s ease;
}
@keyframes fp-tk-anniv-photo-lueur-arrivee {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}
@keyframes fp-tk-anniv-photo-lueur-survol {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-anniv .fp-tk-anniv-photo::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   CARROUSEL DE LA PHOTO D'ANNIVERSAIRE (2026-09-10, demande de Marino : le
   bloc fp-zone-anniv-photo accepte désormais une galerie, fixup 152). Deux
   photos ou plus : fp_render_kids_tarifs() (inc/sections.php) substitue la
   figure unique du plugin par le markup de fp_kids_tarifs_anniv_carousel_html(),
   MÊME CLASSE fp-tk-anniv-photo en racine (plus le modificateur is-carousel) :
   tout le placement du bento ci-dessus (grid-column, grid-row, coins arrondis,
   ombre, lueur au survol) continue de s'appliquer sans rien dupliquer, seul le
   CONTENU de la figure change. Même patron que le carrousel des lieux de
   restauration (.fp-rlieu-carousel-frame, restauration.css), câblé ici par
   assets/js/tarifs-kids.js (initAnnivPhotoCarousel), PAS par setupCarousels()
   (main.js, hors périmètre de ce chantier).
   -------------------------------------------------------------------------- */
.fp-detail .fp-kids-anniv .fp-tk-anniv-photo.is-carousel .fp-tk-anniv-carousel-frame {
  position: absolute;
  inset: 0;
}
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel::-webkit-scrollbar { display: none; }
/* Chaque photo est un LIEN vers son fichier (visionneuse existante,
   setupLightbox dans main.js ; sans JavaScript la photo reste consultable). */
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-slide {
  display: block;
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  cursor: zoom-in;
  transition: transform .6s ease;
}
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-slide:hover {
  transform: scale(1.04);
}
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-slide:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: -4px;
}
/* Flèches : display:contents, chaque bouton se positionne par rapport au
   cadre (position: relative, hérité de .fp-tk-anniv-photo). */
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-nav {
  display: contents;
}
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-nav .fp-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: var(--fp-white);
  color: var(--fp-primary);
}
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-nav .fp-carousel-arrow:first-child { left: 10px; }
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-nav .fp-carousel-arrow:last-child { right: 10px; }
.fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-nav .fp-carousel-arrow:hover {
  background: var(--fp-dark);
  color: var(--fp-white);
  transform: translateY(-50%) scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .fp-detail .fp-kids-anniv .fp-tk-anniv-carousel { scroll-behavior: auto; }
  .fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-slide { transition: none; }
  .fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-slide:hover { transform: none; }
  .fp-detail .fp-kids-anniv .fp-tk-anniv-carousel-nav .fp-carousel-arrow:hover { transform: translateY(-50%); }
}

/*
 * Bento AVEC photo, dès 861px SEULEMENT (gate déplacée dans le media query
 * plus bas, piège documenté : un sélecteur :has() est plus spécifique que
 * .fp-tk-anniv seul, un simple @media (max-width) n'aurait donc jamais pu
 * regagner la main sur grid-row en dessous de 861px, quel que soit l'ordre
 * de déclaration ; les règles de rangée qui suivent sont donc RESTREINTES au
 * media query desktop, elles n'existent tout simplement pas sur mobile,
 * aucune bataille de spécificité n'est plus nécessaire pour les neutraliser).
 *
 * RETOUCHE 2026-09-07 (Marino, « plus de récap plus bas que la colonne ») :
 * la colonne du forfait s'étend sur les deux rangées (grid-row:1/-1) et
 * align-items:stretch (posé explicitement, ne plus compter sur le stretch
 * par défaut du grid) l'étire à la hauteur EXACTE de la pile de droite, quel
 * que soit le sens de l'écart (forfait plus haut -> les deux rangées de
 * droite s'étirent ; forfait plus bas -> lui seul s'étire, via flex:1 sur
 * .fp-tk-forfait ci-dessus). Rangées toutes les DEUX « auto » (photo comme
 * récap gardent leur hauteur naturelle) plutôt que « 1fr auto » : l'ancienne
 * répartition ne faisait grandir QUE la photo, jamais le récap, laissant ce
 * dernier plus bas que le bas de la colonne du forfait quand l'écart devait
 * se répartir des deux côtés. .fp-tk-recap doit lui-même s'étirer pour
 * remplir sa rangée : la règle générale plus bas (align-self:end, pensée
 * pour le cas SANS photo, une seule rangée partagée avec le forfait) est
 * BATTUE ici par une sélectivité supérieure (six classes contre quatre).
 */
@media (min-width: 861px) {
  .fp-detail .fp-kids-anniv .fp-tk-anniv {
    align-items: stretch;
  }
  .fp-detail .fp-kids-anniv .fp-tk-anniv > .fp-tk-col {
    grid-row: 1 / -1;
  }
  .fp-detail .fp-kids-anniv .fp-tk-anniv:has(.fp-tk-anniv-photo) {
    grid-template-rows: auto auto;
  }
  .fp-detail .fp-kids-anniv .fp-tk-anniv:has(.fp-tk-anniv-photo) > .fp-tk-anniv-photo {
    grid-row: 1;
  }
  .fp-detail .fp-kids-anniv .fp-tk-anniv:has(.fp-tk-anniv-photo) > .fp-tk-card.fp-tk-recap {
    grid-row: 2;
    align-self: stretch;
  }
}
/* SANS photo (attribut de shortcode vide, cf. fp_render_kids_tarifs) : le
   plugin ne rend PAS du tout la figure, aucune règle à ajouter ici. La
   grille redevient une seule rangée, le récap reste seul dans la colonne 2
   et garde l'alignement qu'il avait déjà avant ce chantier
   (.fp-tk-recap { align-self: end; }, plus bas dans ce fichier). */

/* Colonne du forfait : même défaut que la partie « accès » ci-dessus
   (.fp-tk-col non stylée, cartes soudées les unes aux autres). */
.fp-detail .fp-kids-anniv .fp-tk-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fp-detail .fp-kids-anniv .fp-tk-head {
  /* 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;
}
/* Sur-titre et taille agrandis d'environ 25 % (2026-09-07, demande Marino :
   1,8/3,4vw/2,4rem -> 2,25/4,25vw/3rem), centrés dans la colonne du forfait
   avec le texte d'intro juste en dessous. */
.fp-detail .fp-kids-anniv .fp-tk-h {
  margin: 0 0 4px;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.25vw, 3rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fp-secondary);
}
.fp-detail .fp-kids-anniv .fp-tk-sub {
  max-width: 60ch;
  margin: 0 auto 18px;
  text-align: center;
  color: var(--fp-ink-soft);
}
.fp-detail .fp-kids-anniv .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);
}
.fp-detail .fp-kids-anniv .fp-tk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.fp-detail .fp-kids-anniv .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-anniv .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-anniv .fp-tk-gift svg {
  width: 16px;
  height: 16px;
}
.fp-detail .fp-kids-anniv .fp-tk-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--fp-font-heading);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--fp-secondary);
  font-variant-numeric: tabular-nums;
}
.fp-detail .fp-kids-anniv .fp-tk-price--xl {
  font-size: 4.4rem;
  color: var(--fp-white);
}
.fp-detail .fp-kids-anniv .fp-tk-unit {
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
}
.fp-detail .fp-kids-anniv .fp-tk-recap .fp-tk-unit {
  color: color-mix(in srgb, var(--fp-white) 85%, transparent);
}

.fp-detail .fp-kids-anniv .fp-tk-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .92rem;
}
.fp-detail .fp-kids-anniv .fp-tk-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp-detail .fp-kids-anniv .fp-tk-checks svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--fp-primary);
}

.fp-detail .fp-kids-anniv .fp-tk-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--fp-line);
}
.fp-detail .fp-kids-anniv .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-anniv .fp-tk-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fp-detail .fp-kids-anniv .fp-tk-stepper .fp-tk-txt {
  font-weight: 600;
  font-size: .95rem;
}
.fp-detail .fp-kids-anniv .fp-tk-stepper-ctl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 2px solid var(--fp-accent);
  border-radius: var(--fp-pill);
}
.fp-detail .fp-kids-anniv .fp-tk-stepper-ctl button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fp-secondary);
  font-family: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.fp-detail .fp-kids-anniv .fp-tk-stepper-ctl button:hover {
  background: color-mix(in srgb, var(--fp-accent) 25%, transparent);
}
.fp-detail .fp-kids-anniv .fp-tk-stepper-ctl button:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 1px;
}
.fp-detail .fp-kids-anniv .fp-tk-stepper-ctl output {
  min-width: 28px;
  font-family: var(--fp-font-heading);
  font-size: 1.3rem;
  color: var(--fp-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fp-detail .fp-kids-anniv .fp-tk-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.fp-detail .fp-kids-anniv .fp-tk-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.fp-detail .fp-kids-anniv .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-secondary) 18%, transparent);
  transition: background .2s;
}
.fp-detail .fp-kids-anniv .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-anniv .fp-tk-switch input:checked ~ .fp-tk-knob {
  background: var(--fp-primary);
}
.fp-detail .fp-kids-anniv .fp-tk-switch input:checked ~ .fp-tk-knob::after {
  transform: translateX(20px);
}
.fp-detail .fp-kids-anniv .fp-tk-switch input:focus-visible ~ .fp-tk-knob {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}
.fp-detail .fp-kids-anniv .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-anniv .fp-tk-knob,
  .fp-detail .fp-kids-anniv .fp-tk-knob::after {
    transition: none;
  }
}
.fp-detail .fp-kids-anniv .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-anniv .fp-tk-info:hover {
  background: color-mix(in srgb, var(--fp-accent) 18%, transparent);
}
.fp-detail .fp-kids-anniv .fp-tk-info:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}
.fp-detail .fp-kids-anniv .fp-tk-i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
}
.fp-detail .fp-kids-anniv .fp-tk-i span {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: .8rem;
  line-height: 1;
  color: var(--fp-white);
}

/* Récapitulatif : carte vert foncé, photo de la cliente en fond sous un
   voile (.has-photo), sinon aplat secondary plein. Rendue MOINS HAUTE
   (2026-09-06, refonte bento) : padding vertical réduit, prix un cran plus
   petit (voir la règle .fp-tk-price--xl juste en dessous), pour laisser
   respirer la photo au-dessus dans la même colonne. */
.fp-detail .fp-kids-anniv .fp-tarifs-widget .fp-tk-recap {
  align-self: end;
  gap: 10px;
  padding: 18px 22px 16px;
  background: var(--fp-secondary);
  color: var(--fp-white);
}
.fp-detail .fp-kids-anniv .fp-tarifs-widget .fp-tk-recap .fp-tk-price--xl {
  font-size: 3.6rem;
}
.fp-detail .fp-kids-anniv .fp-tk-recap.has-photo {
  background-color: var(--fp-secondary);
  background-image:
    linear-gradient(160deg, color-mix(in srgb, var(--fp-secondary) 55%, transparent), color-mix(in srgb, var(--fp-secondary) 94%, transparent)),
    var(--fp-tk-photo);
  background-size: cover;
  background-position: center;
}
.fp-detail .fp-kids-anniv .fp-tk-recap .fp-tk-card-title {
  color: var(--fp-white);
}
.fp-detail .fp-kids-anniv .fp-tk-recap .fp-tk-detail {
  margin: 0;
  font-size: .88rem;
  color: color-mix(in srgb, var(--fp-white) 88%, transparent);
}
.fp-detail .fp-kids-anniv .fp-tk-btn {
  align-self: flex-start;
}

@media (max-width: 860px) {
  .fp-detail .fp-kids-anniv .fp-tk-anniv {
    /* Une seule colonne : les rangées explicites du bento (1fr auto) ne
       sont posées QUE dès 861px (voir le media query dédié plus haut), donc
       rien à défaire ici. Ordre naturel du document (forfait, puis photo si
       présente, puis récap), une zone par ligne. */
    grid-template-columns: 1fr;
  }
  .fp-detail .fp-kids-anniv .fp-tk-anniv > .fp-tk-col,
  .fp-detail .fp-kids-anniv .fp-tk-anniv > .fp-tk-anniv-photo,
  .fp-detail .fp-kids-anniv .fp-tk-anniv > .fp-tk-card.fp-tk-recap {
    grid-column: 1;
  }
  /* Photo empilée : cadrage 4/3 (demande spec mobile), plus de hauteur
     minimale desktop. */
  .fp-detail .fp-kids-anniv .fp-tk-anniv-photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .fp-detail .fp-kids-anniv .fp-tk-price--xl {
    font-size: 3.4rem;
  }
  /* Même spécificité à CINQ classes que .fp-tk-recap .fp-tk-price--xl
     (3,6rem, non gardée par media query) : sans ce doublon, cette règle
     mobile (3 classes) perdait contre elle et le prix du récap restait à
     3,6rem sous 860px (relecture Opus 2026-09-06). */
  .fp-detail .fp-kids-anniv .fp-tarifs-widget .fp-tk-recap .fp-tk-price--xl {
    font-size: 3.4rem;
  }
  .fp-detail .fp-kids-anniv .fp-tarifs-widget .fp-tk-recap {
    align-self: stretch;
  }
}
@media (max-width: 520px) {
  .fp-detail .fp-kids-anniv .fp-tk-checks {
    grid-template-columns: 1fr;
  }
  .fp-detail .fp-kids-anniv .fp-tarifs-widget .fp-tk-card {
    padding: 20px 18px 18px;
  }
}

/* --------------------------------------------------------------------------
   CONFETTIS ANIMÉS (2026-09-06, réduits à DEUX le 2026-09-10 sur demande de
   Marino) : deux « éclats » en fond de la section .fp-kids-anniv, un en haut
   à gauche, un au milieu à droite, PLUS GRANDS qu'avant et d'opacité réduite.
   Le troisième éclat (bas gauche, porté par un span PHP dans
   fp_render_kids_tarifs) a été retiré, avec l'élément lui même : deux
   pseudo-éléments de la section suffisent désormais (::before, ::after).
   Image RAPATRIÉE en local (assets/img/confettis-rp-1.webp) : elle vivait
   jusqu'ici sur le bac à sable emedias-bacasable.ch, une dépendance qu'un
   site en production ne doit pas garder. TRANSFORM SEUL (scale + opacity,
   jamais background-position, cf. piège de repaint déjà documenté sur le
   motif du pied de page) : cycle « comme une petite explosion » (opacité et
   échelle montent puis retombent), durées et délais déphasés pour que les
   deux éclats ne soient jamais synchronisés. .fp-kids-anniv passe déjà en
   overflow:hidden plus haut : aucun débordement horizontal possible malgré
   les décalages négatifs ci-dessous. Contenu de la section (.fp-wrap) en
   z-index 1, ces calques restent en z-index 0.
   -------------------------------------------------------------------------- */
.fp-kids-anniv::before,
.fp-kids-anniv::after {
  content: '';
  position: absolute;
  z-index: 0;
  background: url('../img/confettis-rp-1.webp') center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: fp-kids-anniv-eclat ease-in-out infinite;
}
/* Haut gauche (600px, contre 480px avant ce chantier). */
.fp-kids-anniv::before {
  top: -140px;
  left: -110px;
  width: 600px;
  height: 600px;
  animation-duration: 12s;
  animation-delay: 0s;
}
/* Milieu droite (750px, contre 600px avant ce chantier). */
.fp-kids-anniv::after {
  top: 10%;
  right: -160px;
  width: 750px;
  height: 750px;
  animation-duration: 14s;
  animation-delay: 3.5s;
}
/* Opacité de pointe réduite (.55 -> .3) : les éclats restent un décor discret
   même agrandis. */
@keyframes fp-kids-anniv-eclat {
  0%   { transform: scale(.6); opacity: 0; }
  50%  { transform: scale(1.05); opacity: .3; }
  100% { transform: scale(.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-kids-anniv::before,
  .fp-kids-anniv::after {
    animation: none;
    opacity: 0;
    will-change: auto;
  }
}

/* Ancre de la barre d'actions : le titre visé ne doit pas se caler sous la
   barre de navigation collante. La règle jumelle de .fp-kids-tarifs a
   déménagé dans tarifs-kids.css le 2026-09-05 (section déplacée). */
.fp-kids-activites {
  scroll-margin-top: calc(var(--fp-nav-h) + 12px);
}

/* ==========================================================================
   INTRO DE LA VITRINE, RETOURS DE MARINO DU 2026-09-07 (composant .fp-kids-scene,
   rendu par fp_render_kids_scene, inc/sections.php) :
   1. fond de section BLANC (la section porte fp-s-cream, main.css : on la
      repeint ici, deux classes contre une) et titre en encre noire ;
   2. la photo de l'emplacement portrait n'est plus posée comme une mascotte
      (silhouette centrée en largeur seulement) mais comme un CADRE à coins
      arrondis, centré dans le blob, qui remplit ~60 % de la figure ;
   3. cadre orange en traitillés « À discuter en entretien mardi » autour du
      titre et du texte, mêmes règles que l'intro des fiches (activite.css),
      reprises ici parce que cette feuille est la seule garantie sur ce
      gabarit. Couleur de chantier --fp-chantier, hors charte, voir main.css.
   ========================================================================== */
.fp-kids-scene.fp-s-cream {
  background: var(--fp-white);
}
.fp-kids-scene-title {
  color: var(--fp-ink);
}
.fp-kids-scene-mascotte {
  position: absolute;
  /* Plus large, au ratio d'origine (Marino, 2026-09-07) : largeur seule,
     hauteur automatique, centrée par translation. Dimensions EXPLICITES :
     sur une image en position absolue, width: auto ignore right et bottom. */
  top: 50%;
  left: 50%;
  width: 82%;
  height: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-lg);
  transform: translate(-50%, -50%);
  filter: none;
}
@media (prefers-reduced-motion: no-preference) {
  .fp-kids-scene-mascotte {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 24px));
    transition: opacity .8s var(--fp-anim-ease) .25s, transform .8s var(--fp-anim-ease) .25s;
  }
  .fp-kids-scene-figure.is-in .fp-kids-scene-mascotte {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.fp-kids-scene .fp-intro-note-zone {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 12px 0 18px -16px;
  padding: 22px 16px 4px;
  border: 2px dashed var(--fp-chantier);
  border-radius: 16px;
}
.fp-kids-scene .fp-intro-note-entretien {
  position: absolute;
  top: 0;
  left: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fp-chantier);
  color: var(--fp-white);
  font-family: var(--fp-font-heading);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.fp-kids-scene .fp-intro-note-entretien::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fp-white);
}

/* ==========================================================================
   SECTION 2 FUSIONNÉE (2026-09-09, arbitrage de Marino)
   --------------------------------------------------------------------------
   La section verte « Ce qu'il faut savoir » a disparu : ses trois cases
   remontent dans la section qui suit le héro. Mise en page demandée : une
   ligne du haut qui écarte {titre + trait} d'un côté et {les trois pilules}
   de l'autre, puis les trois cases en dessous. Fond blanc.

   Tout est scopé sous .fp-kids-scene--fusion : la variante historique à deux
   colonnes reste intacte et revient d'un filtre
   (add_filter( 'fp_kids_scene_fusion', '__return_false' )).
   ========================================================================== */
.fp-kids-scene--fusion .fp-kids-scene-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}
/* Le bloc titre est BORNÉ en largeur, sinon il occupe toute la ligne et
   repousse les pilules en dessous : un titre un peu long suffit à casser le
   space-between. Avec ce plafond, le titre revient à la ligne à l'intérieur de
   son bloc et les pilules restent à droite, quelle que soit sa longueur. */
.fp-kids-scene--fusion .fp-kids-scene-head {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 40%;
}
/* Le trait sous le titre est le « séparateur » : il ferme le bloc titre, donc
   plus de marge basse sur le titre lui-meme. */
.fp-kids-scene--fusion .fp-kids-scene-title {
  margin-bottom: 0;
}
/* Les trois pilules sur une seule ligne, alignées sur le bas du bloc titre.
   nowrap pour tenir la demande « l'une à côté de l'autre » ; elles repassent
   sous le titre quand la place manque (voir la requête média plus bas). */
.fp-kids-scene--fusion .fp-kids-scene-badges {
  flex: 0 0 auto;
  margin: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
/* Les cases arrivent sur du BLANC, plus sur l'aplat teal clair : leur ombre
   portée seule ne suffit plus à les détacher du fond, d'où ce filet. */
.fp-kids-scene--fusion .fp-kids-formules-grid {
  margin-top: 48px;
}
.fp-kids-scene--fusion .fp-kids-formule {
  border: 1px solid color-mix(in srgb, var(--fp-primary) 16%, transparent);
}

/* Point de bascule calculé, pas choisi au hasard : les trois pilules mesurent
   630 px à elles seules (leur texte fixe leur largeur), il faut donc environ
   1360 px de fenêtre pour qu'il reste au titre une largeur qui ait du sens à
   côté d'elles. En dessous, elles passent SOUS le titre, sur toute la largeur,
   et retrouvent le droit de revenir à la ligne. */
@media (max-width: 1360px) {
  .fp-kids-scene--fusion .fp-kids-scene-top {
    display: block;
  }
  .fp-kids-scene--fusion .fp-kids-scene-badges {
    margin-top: 24px;
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   LES ACTIVITÉS DE LA ZONE : GRILLE, plus carrousel (2026-09-09, Marino).
   Les cartes .fp-card sont autonomes (colonne flex, main.css) : elles n'ont
   besoin d'aucune retouche pour passer d'une piste de défilement à une grille.
   Le carrousel des fiches d'activité reste intact, tout son code vivant sous
   .fp-detail .fp-related-track, sélecteur qui ne s'applique plus ici.
   -------------------------------------------------------------------------- */
.fp-kids-activites .fp-kids-activites-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 34px;
}
/* Mêmes paliers et mêmes écarts que la grille de la page Activités
   (.fp-hub-grille-cartes, activites.css) : 1 colonne, 2 dès 620px, 3 dès
   1024px, pour que les deux listings respirent pareil et rompent au même
   endroit d'un écran à l'autre. Repris à l'identique le 2026-09-09, sur
   demande de Marino (« comme sur la page activités pour le design »). */
@media (min-width: 620px) {
  .fp-kids-activites .fp-kids-activites-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}
@media (min-width: 1024px) {
  .fp-kids-activites .fp-kids-activites-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: 44px;
  }
}
/* Le survol des cartes penche et décale : sans cette réserve, la carte du haut
   de grille se ferait rogner par le bord de la section. */
.fp-kids-activites .fp-kids-activites-grille .fp-card {
  height: 100%;
}

/* PASSE MOBILE DE LA VITRINE MAGIC KIDS (Marino, 2026-09-10) : « même
   remarque que sur les fiches, on centre tout dans la section qui suit le
   héro : la pilule, le titre, le séparateur, les puces ». Borné sous 720px,
   le bureau et la tablette ne bougent pas. */
@media (max-width: 720px) {
  .fp-kids-scene .fp-kids-scene-head { max-width: none; text-align: center; }
  .fp-kids-scene .fp-kids-scene-head .fp-ibox,
  .fp-kids-scene .fp-kids-scene-head > * { margin-left: auto; margin-right: auto; }
  .fp-kids-scene .fp-kids-scene-head .fp-ibox { justify-self: center; width: fit-content; }
  .fp-kids-scene .fp-kids-scene-title { text-align: center; margin-left: auto; margin-right: auto; }
  .fp-kids-scene .fp-kids-scene-title::after { margin-left: auto; margin-right: auto; }
  .fp-kids-scene .fp-kids-scene-badges { justify-content: center; }
  .fp-kids-scene .fp-kids-scene-top { align-items: center; }
}