/* ==========================================================================
   home.css - affinages specifiques a l'accueil (charge via is_page_template).
   Couleurs : tokens var(--fp-*) uniquement (discipline verifiee par check-zones).
   La structure reprend fidelement l'accueil RParc : nav en pilule + mega-menu,
   hero photo + voile leger + mascotte, intro a forme arrondie debordante avec
   badges flottants, carrousel d'offres auto, grille d'activités coloree a pattes
   animees, horaires (mascotte + table), ravitaillement sur fond topo, anniversaire,
   auberge, newsletter, widget mascotte (bulle typing).
   ========================================================================== */

/* ==========================================================================
   2. HERO : fond MOINS vert (photo + voile leger), mascotte sur le cote.
   ========================================================================== */
/* overflow visible : les pieds de la mascotte debordent sur la section suivante.
   Le fond (Ken Burns) reste clippe via .fp-hero-bg pour ne pas deborder lui-meme. */
/* Hero raccourci (96vh -> 82vh) : la barre de réservation est ancree au BAS du
   hero, donc plus le hero est haut, plus elle tombe bas dans l'ecran. En le
   raccourcissant, la barre remonte sans toucher a son ancrage (qui garantit
   déjà le chevauchement moitie/moitie sur la separation). */
/* padding-bottom : le hero centre son contenu verticalement (align-items:
   center). Reserver de la place en BAS remonte donc tout le contenu (texte et
   image) sans le decaler par un transform, qui creerait un contexte
   d'empilement et casserait le chevauchement de la barre de réservation. */
.page-template-template-home .fp-hero { min-height: 82vh; padding-bottom: 110px; overflow: visible; }
.page-template-template-home .fp-hero-bg { overflow: hidden; }
/* Voile : teal (--fp-primary) en haut, quasi noir des le premier tiers (180deg).
   Un aplat vert tres leger (16%) en première couche ajoute une teinte uniforme
   subtile sans alourdir l'ensemble.
   OPACITE remontee de 0.48 a 0.56 puis a 0.64 (deux demandes client successives),
   puis a 0.70 (retour Marino du 10.09.2026 : « un tout petit peu plus d'overlay
   vert, sans abuser », +6 points) : le titre et le logo se detachaient mal sur
   les photos claires du diaporama. Le voile reste plus leger que l'aplat teal
   du reste du site, la photo continue de se lire. */
.page-template-template-home .fp-hero-overlay {
  background:
    linear-gradient(color-mix(in srgb, var(--fp-primary) 16%, transparent), color-mix(in srgb, var(--fp-primary) 16%, transparent)),
    linear-gradient(180deg, var(--fp-primary) 0%, rgba(0,0,0,.72) 34%);
  opacity: .7;
}
/* Le contenu du hero (dont la mascotte) passe AU-DESSUS de .fp-intro (z-index 3).
   align-self:stretch : l'inner occupe TOUTE la hauteur du hero (au lieu d'etre
   centre par le flex parent), donc la colonne mascotte s'aligne en bas et ses
   pieds reposent toujours sur la section blanche suivante, quelle que soit la
   hauteur d'ecran (sans ca, sur grand ecran la mascotte flotte au centre).
   NB IMPORTANT : ne JAMAIS donner a .fp-hero un contexte d'empilement (opacity<1,
   transform, filter, isolation, backdrop-filter, z-index non-auto), sinon l'inner
   serait re-emprisonne sous .fp-intro et les pieds repasseraient dessous. */
.page-template-template-home .fp-hero-inner { z-index: 4; align-self: stretch; }
/* Logo dominant, titre (tagline) plus discret en dessous. */
.page-template-template-home .fp-hero-col { display: flex; flex-direction: column; justify-content: center; }
/* Mini-logo texte 2 lignes (« Magic » petit au-dessus, « Parc » gros dessous),
   facon logo typographique. Temporaire : sera remplace par le vrai logo. */
/* Logo du hero réduit (demande client : trop grand). Borne ici plutôt que dans
   main.css, pour ne toucher qu'a l'accueil.
   RÉDUIT D'ENVIRON 10 POUR CENT (revue client du 2026-08-24 : sur ordinateur, le
   titre manque d'air à droite, le logo et le titre cèdent donc un peu de place).
   Cette règle ne concerne QUE l'ordinateur : sous 980 px, le plafond du logo est
   reposé plus bas dans ce fichier (min(200px, 46%)), la version téléphone ne
   bouge donc pas d'un pixel. */
.page-template-template-home .fp-hero-logo img { max-width: min(270px, 56%); }
.page-template-template-home .fp-hero-logo-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: .82;
  /* Bebas (font-heading) plutôt que Thoge (display) : lettres bien lisibles,
     moins epaisses (le display etait trop gras, on ne distinguait plus le mot). */
  font-family: var(--fp-font-heading);
  font-weight: 400;
  color: var(--fp-white);
  text-transform: uppercase;
}
/* Réduit dans les mêmes proportions que le logo image ci-dessus : le hero
   affiche l'un OU l'autre selon qu'un logo est defini, les deux cas doivent
   donc suivre la même demande de reduction. */
.page-template-template-home .fp-hero-logo-text .fp-logo-l1 {
  font-size: clamp(1.25rem, 2.3vw, 1.95rem);
  letter-spacing: .14em;
  padding-left: .14em;
}
.page-template-template-home .fp-hero-logo-text .fp-logo-l2 {
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  letter-spacing: .02em;
}
/* MOT-LOGO RÉDUIT D'ENVIRON 10 POUR CENT SUR ORDINATEUR SEULEMENT (revue client
   du 2026-08-24, même demande que pour le logo image ci-dessus : le héro affiche
   l'un OU l'autre selon qu'un logo est défini dans le personnalisateur, les deux
   cas doivent donc suivre la même réduction).
   POURQUOI UNE REQUÊTE min-width ET PAS UNE SIMPLE BAISSE DES VALEURS. Ces deux
   tailles n'ont AUCUNE reprise sous 980 px, contrairement au logo image et au
   titre : leur terme fluide en vw commande dès 870 px environ (au delà, il passe
   au dessus du plancher du clamp). Baisser ce terme en place aurait donc rapetissé
   le mot-logo sur les grandes tablettes, alors que la version mobile est validée
   et ne doit pas bouger. Le palier 981 px est celui de la bascule mobile du héro
   (bloc @media max-width: 980px plus bas) : les deux ne se recouvrent jamais.
   Terme fluide et plafond sont multipliés par 0,9, le plancher reste intact. */
@media (min-width: 981px) {
  .page-template-template-home .fp-hero-logo-text .fp-logo-l1 { font-size: clamp(1.25rem, 2.07vw, 1.75rem); }
  .page-template-template-home .fp-hero-logo-text .fp-logo-l2 { font-size: clamp(2.6rem, 5.04vw, 4.3rem); }
}
/* Titre hero mesure RParc : Bebas ~70px desktop (4.375rem), clamp conserve
   pour le responsive (avant : max 2.9rem = 46.4px, trop petit).
   REDUIT (barre de réservation) : le titre/l'accroche/la mascotte cedent de la
   place a la barre qui chevauche le bas du hero (cf. .fp-resbar-wrap). */
/* Titre agrandi (demande client du 2026-08-13 : le texte du titre a été
   raccourci dans Gutenberg, la taille remonte pour que le titre s'étale sur
   deux lignes au lieu d'une ligne et un débord). */
/* TITRE RÉDUIT D'ENVIRON 10 POUR CENT SUR ORDINATEUR (revue client du
   2026-08-24 : « le titre manque d'air à droite »). Le texte du titre n'est pas
   touché, c'est un contenu de la cliente : seule sa taille cède.
   Seuls le terme fluide (5.8vw vers 5.2vw) et le plafond (4.9rem vers 4.4rem)
   baissent, tous deux multipliés par 0,9. Le plancher de 2.35rem reste intact,
   et de toute façon cette règle entière est reprise sous 980 px par le bloc
   mobile plus bas (clamp(1.95rem, 8.6vw, 3.6rem)) : le téléphone et la tablette
   ne bougent pas d'un pixel.
   MESURES AU BANC (texte de titre actuel, air entre la fin de la ligne la plus
   longue et le bord droit de la colonne) : 3,8 px vers 66,4 px à 1440 px de
   large, 17,9 px vers 20,8 px à 1280 px. L'air gagné n'est pas proportionnel à
   la réduction, et c'est normal : il dépend d'abord de l'endroit où la ligne se
   coupe, donc il varie en dents de scie avec la largeur. Ne pas chercher à
   l'optimiser en calant la taille sur un texte donné, ce serait faux dès que la
   cliente réécrit son titre.
   TITRE RÉAUGMENTÉ D'ENVIRON 15 % (retour Marino 2026-09-06). Le terme fluide
   (5.2vw -> 6vw) ET le plafond (4.4rem -> 5.05rem) montent tous deux du même
   facteur : à 1280px de large le terme fluide reste la valeur qui commande
   (5.2vw y valait déjà moins que le plafond de 4.4rem), le relever seul est
   donc nécessaire pour un effet réellement visible à cette largeur, pas
   seulement sur les très grands écrans où le plafond prend le relais. Le
   plancher (2.35rem) n'est pas touché : cette règle ne s'applique de toute
   façon qu'à partir de 981px (reprise entière sous 980px par le bloc mobile
   plus bas, clamp(1.95rem, 8.6vw, 3.6rem), lui-même inchangé). Vérifié au banc
   (Playwright) : le titre réel actuel (« Votre nouveau spot de loisirs 360° à
   Rennaz (VD) ! ») tient toujours sur deux lignes à 1280px avec cette taille. */
/* Ombre portee AJOUTEE (retour Marino du 10.09.2026 : « le titre et le texte du
   hero avec un peu plus d'ombre »). Aucune ombre n'existait jusque-la sur ce
   H1/accroche : flou modeste, une seule couche (jamais un halo), pour gagner
   en lisibilite sur les photos claires du diaporama sans alourdir le rendu. */
.page-template-template-home .fp-hero-title {
  font-size: clamp(2.35rem, 6vw, 5.05rem);
  margin-bottom: 16px;
  text-shadow: 0 2px 8px color-mix(in srgb, var(--fp-dark) 55%, transparent);
}
.page-template-template-home .fp-hero-lead {
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  max-width: 40ch;
  text-shadow: 0 1px 5px color-mix(in srgb, var(--fp-dark) 45%, transparent);
}
/* Grande mascotte « bowling » alignee en bas (les pieds plongent vers la section
   blanche qui mord la hero). */
.page-template-template-home .fp-hero-grid { align-items: stretch; }
/* Colonnes du hero plaquees sur les bords du contenu (demande client) : le
   texte colle au bord GAUCHE, l'image au bord DROIT, pour tomber exactement sur
   les extremites de la barre de réservation qui les rejoint juste en dessous.
   L'image etait auparavant centree dans sa colonne, ce qui laissait un vide a
   droite et cassait cet alignement. */
.page-template-template-home .fp-hero-mascotte { align-items: flex-end; justify-content: flex-end; min-height: 0; }
.page-template-template-home .fp-hero-col { margin-left: 0; margin-right: auto; }
/* PLUS D'AIR HORIZONTAL AU TEXTE DU HÉRO (retour client du 2026-08-24, après
   la réduction de 10 % : le point d'exclamation du H1 retombait encore seul à
   la ligne). La colonne texte gagne du plafond (620 px du socle vers 680) et
   une part de grille plus large, la mascotte cède l'équivalent. Sous 980 px,
   le bloc mobile repasse la grille en une colonne et le plafond à none : ces
   trois règles n'y ont aucun effet. */
.page-template-template-home .fp-hero-grid { grid-template-columns: 1.14fr .86fr; }
.page-template-template-home .fp-hero-col { max-width: 680px; }
.page-template-template-home .fp-hero-mascotte-img { align-self: flex-end; display: flex; }
/* Mascotte remontee : les pieds/pattes reposent VISIBLEMENT sur la section
   blanche (intro) au lieu de plonger dessous (avant -34px, trop bas : le bas de
   la mascotte etait mange par le raccord blanc). Reduite (voir commentaire
   titre ci-dessus) : la barre de réservation a besoin d'air au centre du hero. */
.page-template-template-home .fp-hero-mascotte-img img { max-width: min(400px, 35vw); margin-bottom: 4px; }
/* Mobile : mascotte repositionnee en haut (order -1), pas de debordement bas. */
@media (max-width: 980px) {
  .page-template-template-home .fp-hero-mascotte-img img { margin-bottom: 0; }
  /* DÉFAUT CORRIGÉ (banc d'essai visuel, 2026-08-05) : PIÈGE DE SPÉCIFICITÉ.
     main.css passe le héro à une seule colonne sous 980 px avec le sélecteur
     .fp-hero-grid (0,1,0), alors que la grille à deux colonnes de l'accueil
     est posée sur .page-template-template-home .fp-hero-grid (0,2,0). Une
     media query n'ajoute AUCUNE spécificité : la règle à deux colonnes
     gagnait donc à TOUTES les largeurs, et l'empilement mobile n'a jamais eu
     lieu. Mesures au banc : à 390 px la colonne de texte partait à x=228 et
     débordait de 99 px hors du viewport (139 px à 320 px), titre et accroche
     coupés en plein mot ; le double filet overflow:hidden (héro + body)
     masquait le débordement mais pas la perte de texte.
     Même piège sur la taille de la mascotte et sa hauteur mini : on repose
     les trois valeurs au niveau de spécificité de l'accueil. */
  .page-template-template-home .fp-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-template-template-home .fp-hero-mascotte { min-height: 0; align-items: center; justify-content: center; }
  .page-template-template-home .fp-hero-mascotte-img { align-self: center; }
  .page-template-template-home .fp-hero-mascotte-img img { max-width: min(320px, 80%); }
  .page-template-template-home .fp-hero-col { max-width: none; }

  /* HÉRO ENTIÈREMENT CENTRÉ SUR L'AXE (retour client du 2026-08-16). Dès que la
     bannière passe sur UNE colonne, plus rien ne justifie l'alignement à gauche
     hérité de la composition deux colonnes : il ne reste qu'un bord ragged qui
     déséquilibre l'écran. Tout se recentre donc d'un bloc, dans l'ordre voulu
     par le client : mascotte, logo, titre, accroche.

     ORDRE VERTICAL : la mascotte est déjà remontée AU-DESSUS du texte par
     l'ordre -1 posé dans main.css (.fp-hero-mascotte) ; on ne le redéclare pas,
     on resserre seulement la gouttière pour qu'elle se lise franchement comme
     coiffant le titre plutôt que comme un bloc détaché.

     TAILLES : la mascotte et le logo cèdent de la place (demande client), le
     titre en récupère. Le gain de hauteur profite directement à la carte de
     réservation ancrée au bas de la bannière. */
  .page-template-template-home .fp-hero-grid { gap: 14px; }
  /* MASCOTTE RÉELLEMENT CENTRÉE (retour client du 2026-08-17 : « la mascotte et
     le logo paraissent décalés »).

     DIAGNOSTIC. Le plafond de largeur était posé sur l'IMAGE, en POURCENTAGE
     (min(210px, 52%)), alors que son cadre .fp-hero-mascotte-img est un
     conteneur flex dont la largeur se DÉDUIT de son contenu. Le pourcentage se
     résolvait donc deux fois de suite : pendant le calcul de la taille
     intrinsèque du cadre, un pourcentage sans base définie est ignoré, le cadre
     prenait donc 210px ; puis, la largeur du cadre devenue connue, l'image
     reprenait 52 pour cent de ces 210px, soit 109px, calée contre le bord
     GAUCHE de son cadre (justify-content vaut flex-start par défaut). D'où une
     mascotte décalée d'une cinquantaine de pixels vers la gauche, et deux fois
     plus petite que la valeur demandée. Le même piège n'existe pas sur écran
     large : la valeur y est exprimée en vw, donc toujours définie.

     CORRECTION. Le plafond passe de l'image à SON CADRE, dont la largeur de
     référence (la colonne de la grille) est parfaitement définie : le cadre
     épouse alors exactement l'image, et le centrage porté par le parent
     (justify-content: center, plus haut) tombe juste au pixel. Les valeurs de
     la passe précédente sont conservées telles quelles, seule leur base de
     résolution change. */
  .page-template-template-home .fp-hero-mascotte-img { max-width: min(210px, 52%); }
  .page-template-template-home .fp-hero-mascotte-img img { max-width: 100%; }
  /* CENTRAGE PAR text-align, PAS par align-items. La colonne est une pile flex :
     un align-items: center y ferait rétrécir chaque enfant à la largeur de son
     contenu, et les largeurs maximales exprimées en POURCENTAGE (celle du logo
     juste en dessous) se résoudraient alors contre une largeur elle-même
     déduite du contenu, donc instable. Les enfants gardent leur pleine largeur
     et c'est leur contenu en ligne qui se centre : logo, titre et accroche
     tombent sur le même axe, sans effet de bord. */
  .page-template-template-home .fp-hero-col {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .page-template-template-home .fp-hero-logo { margin-bottom: 12px; }
  /* LOGO RÉELLEMENT CENTRÉ (même retour client du 2026-08-17). Autre cause que
     pour la mascotte ci-dessus, même symptôme : main.css pose « img { display:
     block } » pour tout le site. Une image de niveau BLOC ne se centre PAS par
     text-align (qui n'agit que sur le contenu en ligne) : le logo, plafonné à
     46 pour cent de la colonne, restait donc collé au bord gauche malgré le
     text-align: center posé juste au-dessus sur .fp-hero-col. Les marges
     automatiques sont le seul moyen de centrer une boîte de bloc. Aucune
     taille n'est touchée. */
  .page-template-template-home .fp-hero-logo img {
    max-width: min(200px, 46%);
    margin-left: auto;
    margin-right: auto;
  }
  /* Mot-logo typographique de repli : ses deux lignes s'empilent centrées, au
     lieu du fer à gauche de la version large. */
  .page-template-template-home .fp-hero-logo-text { align-items: center; }
  .page-template-template-home .fp-hero-logo-text .fp-logo-l1 { padding-left: 0; }
  /* Titre agrandi (le plancher du clamp passe de 2.35rem à 2.8rem) : c'est lui
     qui porte le message, il ne doit plus paraître secondaire face au logo.
     PLANCHER RABAISSÉ À 1.95rem (retour client du 2026-08-20 : sur téléphone,
     le titre partait sur quatre lignes, la quatrième ne portant que le point
     d'exclamation). Le plancher de 2.8rem, soit 44,8 px, s'appliquait à TOUS
     les téléphones : sous environ 520 px de large, la valeur fluide 8.6vw
     passait en dessous et n'avait plus aucun effet. Seul ce plancher est
     touché : au-dessus de 375 px, c'est toujours 8.6vw qui commande, la
     tablette ne bouge donc pas d'un pixel. Le TEXTE du titre n'est pas
     touché, c'est un contenu de la cliente.
     text-wrap: balance répartit en plus les mots entre les lignes, ce qui
     évite un dernier mot (ou une ponctuation) esseulé si le texte change
     encore. Sans effet sur les navigateurs qui l'ignorent, où la seule
     réduction de taille suffit déjà. */
  .page-template-template-home .fp-hero-title {
    font-size: clamp(1.95rem, 8.6vw, 3.6rem);
    text-align: center;
    text-wrap: balance;
  }
  .page-template-template-home .fp-hero-lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 34ch;
  }
  /* La bannière de l'accueil n'affiche pas de bouton (sa barre de réservation
     tient ce rôle) : la règle ne sert qu'aux autres pages qui partagent ce
     gabarit, pour qu'aucune ne reste alignée à gauche par accident. */
  .page-template-template-home .fp-hero-actions { justify-content: center; }
}

/* TITRE PLUS GRAND SUR TÉLÉPHONE (Marino, 2026-09-10, passe mobile). La
   taille ci-dessus (8.6vw) avait été calée quand la carte de réservation,
   haute de 506px, laissait à peine trente pixels entre l'accroche et elle : il
   n'y avait pas la place d'agrandir quoi que ce soit. Depuis que les champs
   ont quitté le héro pour une feuille qui monte du bas
   (reservation-ui.css, .js), la rangée d'onglets seule y reste et l'espace
   sous l'accroche est passé de 33 à 167px à 390px de large. Le titre peut
   donc grandir : 41px à 390px, 46px à 430px, 38px à 360px, sur trois lignes
   que text-wrap: balance répartit (posé plus haut, et qui gardait déjà la
   ponctuation finale de passer seule à la ligne). L'espace avant le module
   reste à 137px à 390px, quatre fois ce qu'il était.

   BORNÉ À 720PX : entre 721 et 980px, la tablette garde 8.6vw, validée le
   matin même. Le bureau, lui, n'a jamais été concerné par ce bloc. */
@media (max-width: 720px) {
  .page-template-template-home .fp-hero-title {
    font-size: clamp(2.1rem, 10.6vw, 3.6rem);
    /* Ombre presque effacée (Marino, 2026-09-10 : « une ombre un peu bizarre
       sur le titre du héro sur mobile, réduis-la, quasiment l'enlever ») :
       à cette taille, l'ombre floue de chaque lettre débordait sur ses
       voisines pendant la cascade. Un trait très court et léger suffit. */
    text-shadow: 0 1px 2px color-mix(in srgb, var(--fp-dark) 30%, transparent);
  }
}

/* ==========================================================================
   HÉRO ACCUEIL, COLONNE UNIQUE CENTRÉE (demande cliente, 2026-09-03). Bloc
   INSÉRÉ ICI, entre la section « 2. HERO » et la section « 2bis » ci-dessous
   (pas de nouveau numéro pour ne pas décaler la numérotation existante du
   fichier) : voir la justification de son emplacement dans le commentaire.
   Deux éléments ne sont plus rendus par fp_render_hero() (inc/sections.php,
   garde $is_home) : l'image de mascotte à droite (.fp-hero-mascotte, qui
   affichait l'image d'attente depuis inc/mascottes-attente.php) et le logo
   affiché DANS le héro (.fp-hero-logo, jugé redondant avec celui du menu).
   Rien n'est modifié en base : les blocs Gutenberg d'origine (mascotte,
   éventuel logo du Customizer) restent intacts, simplement plus lus par ce
   renderer sur ce modèle.

   La mise en page à deux colonnes (texte à gauche, image à droite) n'a donc
   plus de raison d'être : ce qui reste au-dessus de la barre de réservation
   (sur-titre, titre, texte, boutons ou pastilles éventuels) se centre, À
   TOUTES LES LARGEURS.

   PLACÉE APRÈS TOUTE LA SECTION « 2. HERO » CI-DESSUS (base ET @media
   max-width: 980px) : à spécificité égale, ces règles hors media query
   l'emportent donc partout dans la cascade, y compris sur les
   grid-template-columns / max-width / margins qui y posaient la disposition
   à deux colonnes. Les anciennes règles ci-dessus qui ne visaient QUE le
   logo ou la mascotte (.fp-hero-logo*, .fp-hero-mascotte*) deviennent
   inertes : ces éléments n'existent plus dans le DOM de l'accueil, elles ne
   correspondent donc plus à rien. Elles restent en place (aucune suppression
   de code non demandée), au cas où cette disposition serait redemandée.

   MÊME TECHNIQUE DE CENTRAGE que celle déjà choisie pour le mobile ci-dessus
   (text-align + margin auto sur les boîtes à largeur bornée), PAS
   align-items: center sur la colonne flex : cette dernière technique est
   documentée plus haut comme instable pour une largeur en POURCENTAGE
   (l'ancien piège du logo). On ne réintroduit pas ce risque même si le logo
   ne s'affiche plus ici. */
.page-template-template-home .fp-hero-grid { grid-template-columns: 1fr; }
.page-template-template-home .fp-hero-col {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* TITRE SUR DEUX LIGNES (retour client 2026-09-03) : centré et sans plafond
   de colonne, le H1 s'étalait sur une seule ligne. Largeur bornée en « ch »
   (unité de la police de titre, donc stable quelle que soit la taille), calée
   pour que le titre semé (33 caractères) se coupe en deux, avec de la marge
   si la cliente l'allonge un peu ; text-wrap: balance répartit les mots entre
   les deux lignes plutôt que de laisser un mot seul en bas. Aucune coupure
   intra-mot, posée explicitement (règle dure du projet). */
.page-template-template-home .fp-hero-title {
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
}
.page-template-template-home .fp-hero-lead {
  margin-left: auto;
  margin-right: auto;
}
/* Défensif : si un sur-titre ou une pastille rejoignaient un jour ce héro
   (aucun des deux n'y est semé aujourd'hui), ils se centreraient d'office au
   lieu de retomber au fer à gauche hérité de main.css. */
.page-template-template-home .fp-hero-eyebrow,
.page-template-template-home .fp-hero-pastille {
  text-align: center;
  justify-content: center;
}
/* CENTRAGE VERTICAL AFFINÉ (retour Marino 2026-09-06), ORDINATEUR SEULEMENT.
   DIAGNOSTIC (mesuré au banc, Playwright, 1280px) : .fp-hero-col se centre
   (justify-content:center) dans TOUTE la hauteur de .fp-hero-inner, laquelle
   s'étire (align-self:stretch) sur la hauteur utile du hero, c'est à dire
   entre son padding-top (calc(--fp-nav-h + 56px), posé par main.css pour
   TOUTES les pages) et son padding-bottom (110px, réservé ici pour la carte
   de réservation). Ces deux réserves ne valent pas la même chose : 204px en
   haut (148 + 56) contre 110px en bas, alors que l'espace RÉELLEMENT VISIBLE
   va du bas de la barre flottante (148px) jusqu'au haut de la carte (mesuré à
   571px à 1280px de large, donc plus bas que les 110px réservés). Résultat
   mesuré : le milieu du bloc titre + accroche tombe 48px sous le milieu de cet
   espace visible à 1280px. Sous 980px, l'écart mesuré (17px) reste déjà sous
   la tolérance de ±40px : cette règle ne s'applique donc qu'à partir de 981px,
   pour ne rien changer sur téléphone/tablette.
   CORRECTION SANS toucher à la hauteur du hero ni à la position de la carte
   (aucune des deux valeurs ci-dessus n'est modifiée) : un padding-bottom
   supplémentaire sur la colonne de texte réduit seulement SON espace de
   centrage par le bas, ce qui fait remonter le milieu du bloc sans déplacer
   aucun autre élément. Valeur calée au banc pour ramener l'écart proche de
   0px (marge confortable sous la tolérance de ±40px), et non pas seulement
   sous la barre des 40px. */
@media (min-width: 981px) {
  .page-template-template-home .fp-hero-col { padding-bottom: 96px; }
}
/* AJUSTE (retour Marino du 10.09.2026, point 2) : le module de reservation
   descend de 10px (voir .fp-resbar-wrap, section 2bis). L'ecart residuel
   introduit reste tres inferieur a la tolerance de +/-40px documentee
   ci-dessus, ce padding-bottom n'a donc pas besoin d'etre retouche. */

/* ==========================================================================
   2bis. BARRE DE RESERVATION DU HERO : bloc clair qui chevauche a moitie le
   bas du hero et a moitie la section suivante (intro), centre horizontalement,
   facon Raiffeisen Parc. Positionnee en absolu DANS .fp-hero (le hero ne cree
   jamais de contexte d'empilement, cf. commentaire plus haut sur
   .fp-hero-inner) : bottom:0 + translateY(50%) place mecaniquement pile la
   moitie du bloc de chaque côté de la ligne de jonction, quelle que soit sa
   hauteur reelle (pas de calcul en dur). z-index superieur a .fp-hero-inner
   (4) et .fp-intro (3) : la barre reste TOUJOURS peinte au-dessus des deux.
   4 onglets (systeme generique .fp-tabs/.fp-tab/.fp-tab-panel, setupTabs()
   déjà cable dans main.js, INCHANGE) : seul le 1er ("activité") a un panneau
   actif par defaut au chargement (sans JavaScript, le formulaire qu'il
   contient reste donc visible et soumettable ; les 3 autres panneaux restent
   simplement inatteignables sans JS, ils n'ont de toute facon pas encore de
   contenu). */
/* DÉFAUT CORRIGÉ (banc d'essai visuel, 2026-08-05) : le héro porte
   overflow:hidden (main.css, pour contenir le zoom Ken Burns du fond). La
   carte de réservation, positionnée en absolu DANS le héro, était donc
   TRANCHÉE NET à la ligne de jonction, ce qui annulait le chevauchement
   recherché. Mesures : 9 px coupés à 1440, 8 à 1024, 49 à 768 et 56 à 390 et
   320 px, largeurs où le bouton « C'est parti » disparaissait entièrement,
   rendant le formulaire inutilisable sur téléphone.
   Correction : le débordement redevient visible sur l'accueil, et la découpe
   est rendue au SEUL calque qui en a besoin, le fond animé. Celui-ci est calé
   en inset:0, la découpe tombe donc exactement sur la boîte du héro. */
.page-template-template-home .fp-hero { overflow: visible; }
.page-template-template-home .fp-hero-bg { overflow: hidden; }
.fp-resbar-wrap {
  position: absolute; left: 50%; bottom: 0; z-index: 6;
  /* translateY(50%) placerait le MILIEU de la carte pile sur la separation.
     On remonte de 40px (demande client), REDUIT a 30px (retour Marino du
     10.09.2026 : « descendre de quelques pixels l'outil de reservation »,
     -10px) : la coupure tombe donc un peu moins haut, la carte descend d'autant
     sans changer de hauteur. Ecrit en calc pour rester relatif a la hauteur
     reelle de la carte, quel que soit l'onglet actif. */
  transform: translate(-50%, calc(50% - 70px));
  pointer-events: none; /* seul le contenu (carte) recoit les interactions */
  /* ALIGNEMENT SUR LE CONTENU DU HERO : on reprend exactement la mecanique de
     .fp-wrap (largeur var(--fp-wrap) + gouttiere laterale), au lieu d'une
     largeur propre (min(1040px, 92vw)) qui ne tombait pas sur les mêmes bords.
     La carte occupe donc pile la colonne de contenu du hero, du bord gauche du
     texte au bord droit de l'image. */
  width: var(--fp-wrap);
  padding: 0 var(--fp-gutter);
  box-sizing: border-box;
}
@media (max-width: 720px) {
  /* Meme gouttière réduite que .fp-wrap en mobile, pour rester aligne. */
  .fp-resbar-wrap { padding: 0 var(--fp-gutter-mobile); }
}
.fp-resbar-wrap * { pointer-events: auto; }
/* Fond VERT + motif topo (demande client), même recette que la section
   ravitaillement : aplat --fp-primary et topo en surimpression legere. Le
   motif est pose sur un ::before (et non en background de la carte) pour
   rester sous le contenu et garder une opacite propre. Chemin relatif au
   site, comme dans activité.css : pas de dependance a un domaine externe. */
.fp-resbar {
  position: relative; isolation: isolate;
  background: var(--fp-primary);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-lg);
  overflow: hidden;
}
.fp-resbar::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Motif fourni par le client, desormais heberge par le theme (em-plan :
     lignes seules, sans fond, donc pose sur l'aplat vert de la carte).
     Opacite renforcee (.18 -> .34) a la demande du client. */
  background-image: url('../img/em-plan.svg');
  background-size: 760px; background-repeat: repeat; opacity: .34;
}
.fp-resbar > * { position: relative; z-index: 1; }
.fp-resbar-tabs {
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  border-bottom: 1px solid color-mix(in srgb, var(--fp-white) 28%, transparent);
  padding: 0 12px;
  scrollbar-width: thin;
}
/* Onglets sur fond vert : texte clair (l'ancien gris fonce n'aurait plus
   assez de contraste), onglet actif en blanc plein souligne d'accent. */
.fp-resbar-tab {
  flex: 0 0 auto;
  font-family: var(--fp-font-body); font-weight: 600; font-size: .92rem;
  color: color-mix(in srgb, var(--fp-white) 78%, transparent);
  background: transparent; border: 0;
  padding: 16px 14px 14px; margin: 0; cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.fp-resbar-tab:hover { color: var(--fp-white); }
.fp-resbar-tab.is-active { color: var(--fp-white); border-bottom-color: var(--fp-accent); }
.fp-resbar-tab:focus-visible { outline: 2px solid var(--fp-white); outline-offset: -2px; }
/* Onglets vides (pas encore de contenu) : masques sans JS via le systeme
   générique .fp-tab-panel (une seule classe is-active visible a la fois). */
/* Hauteur PLANCHER commune a tous les panneaux : sans elle, les onglets encore
   vides (simple phrase d'attente) sont bien plus courts que l'onglet actif, et
   toute la carte se retracte en changeant d'onglet. On fige donc la hauteur
   utile sur celle du formulaire, pour que la barre garde exactement le même
   gabarit d'un onglet a l'autre. Les panneaux vides centrent leur message. */
.fp-resbar-panel { display: none; padding: 26px 28px 28px; min-height: 118px; box-sizing: border-box; }
.fp-resbar-panel.is-active { display: flex; flex-direction: column; justify-content: center; }
.fp-resbar-soon {
  margin: 0; font-family: var(--fp-font-body);
  color: color-mix(in srgb, var(--fp-white) 82%, transparent);
  font-size: .95rem;
}
.fp-resbar-row {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px;
}
.fp-resbar-field {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 180px; min-width: 150px;
}
/* Libelles sur fond vert : blancs pour rester lisibles. */
.fp-resbar-field label {
  font-family: var(--fp-font-body); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: .68rem;
  color: color-mix(in srgb, var(--fp-white) 85%, transparent);
}
/* Champs BLANCS pleins (demande client) : pilules blanches franches sur le
   fond vert, sans bordure grise qui les salirait. */
.fp-resbar-select, .fp-resbar-input {
  font-family: var(--fp-font-body); font-size: .92rem; color: var(--fp-ink);
  background: var(--fp-white); border: 0;
  border-radius: var(--fp-pill); padding: 12px 18px; width: 100%;
  appearance: none; -webkit-appearance: none;
}
/* Placeholder d'exemple (ex. le "8" du champ nombre d'enfants) : couleur
   choisie plutôt que le gris par defaut du navigateur, pour un contraste
   chiffre sur le blanc du champ (--fp-ink-soft = 6,9:1 sur blanc, déjà utilise
   comme placeholder ailleurs dans le theme, cf. main.css). */
.fp-resbar-input::placeholder { color: var(--fp-ink-soft); opacity: 1; }
/* Wrapper autour du <select> : porte le chevron en ::after (les select ne
   supportent pas les pseudo-elements de facon fiable partout). Chevron en
   couleur TOKEN (pas de hex fige dans le SVG) : mask (silhouette neutre) +
   background-color var(--fp-*), même technique déjà en place ailleurs dans le
   theme (cf. assets/css/activité.css, .fp-hero-eyebrow::before). */
.fp-resbar-select-wrap { position: relative; }
.fp-resbar-select { padding-right: 34px; }
.fp-resbar-select-wrap::after {
  content: '';
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 8px; pointer-events: none;
  background-color: var(--fp-secondary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.fp-resbar-select:focus-visible, .fp-resbar-input:focus-visible {
  outline: 2px solid var(--fp-primary); outline-offset: 1px;
}
/* FORMULE IMPOSEE : quand l'activité choisie n'offre QU'UNE formule (le
   bowling et sa seule formule), il n'y a plus de choix a faire. main.js
   (setupResBar) masque alors la liste deroulante et affiche la formule en
   clair ici, pendant qu'un champ cache transmet sa valeur.
   Meme pilule blanche que les champs voisins, pour ne pas casser la rangee,
   mais SANS chevron : rien ne suggere un choix. Hauteur minimale alignee sur
   celle des champs (44px), la rangee reste d'aplomb. */
.fp-resbar-formule-fixe {
  display: flex; align-items: center; box-sizing: border-box;
  width: 100%; min-height: 44px; padding: 12px 18px;
  font-family: var(--fp-font-body); font-size: .92rem; font-weight: 600;
  color: var(--fp-secondary); background: var(--fp-white);
  border-radius: var(--fp-pill);
}
/* (Pas de mention visible sous le champ date : elle ferait monter toute la
   rangee de champs, donc le selecteur de date. La consigne « avec une date,
   choisissez aussi une formule » reste rendue en .screen-reader-text, et le
   message de validation du navigateur suffit a l'usager voyant.) */
/* Le bouton porte desormais les classes standard du site (.fp-btn.fp-btn-light,
   avec la fleche a droite comme les autres appels a l'action). On ne redefinit
   donc NI le fond, NI la couleur, NI la bordure, NI le rayon, NI la
   transition : home.css se chargeant après main.css, toute redeclaration
   ecraserait le composant et casserait son animation de remplissage au survol.
   Il ne reste ici que le calage dans la rangee de champs. */
.fp-resbar-submit {
  flex: 0 0 auto;
  align-self: flex-end;
}
@media (prefers-reduced-motion: reduce) {
  .fp-resbar-tab { transition: none; }
}
/* La barre chevauchant le bas du hero, l'intro (qui suit) a besoin d'un
   padding-top nettement plus genereux pour que son propre titre ne passe
   jamais SOUS la moitie basse de la barre (z-index 6 > 3 : la barre resterait
   visuellement devant, mais illisible si le texte de l'intro venait dessous).
   REDUIT (retour Marino du 10.09.2026, point 3 : « trop-plein d'espace blanc »
   entre l'outil de reservation et la section suivante), sans coller au bord
   bas de la carte : marge de securite conservee sous le point de chevauchement. */
.page-template-template-home .fp-intro { padding-top: 160px; }
@media (max-width: 980px) {
  /* Plus de largeur propre ici : la barre garde var(--fp-wrap) + la gouttière,
     donc elle reste alignee sur le contenu du hero a TOUTES les tailles. */
  .fp-resbar-row { gap: 12px; }
  .fp-resbar-field { flex: 1 1 45%; }
  .page-template-template-home .fp-intro { padding-top: 220px; }
  /* DÉFAUT CORRIGÉ (banc d'essai visuel, 2026-08-05) : sous 980 px le héro
     passe sur une seule colonne, son contenu descend donc de la hauteur de la
     mascotte, et la carte ancrée au bas du héro recouvrait l'accroche
     (mesures : recouvrement complet de .fp-hero-lead à 768 et à 980 px). On
     réserve sous le texte la place que la carte occupe.
     RESPIRATION AJOUTÉE (retour client du 2026-08-17 : « il faut de l'air entre
     le texte de la bannière et le module de réservation »). La réserve passe de
     216 à 248px : la carte reste ancrée au bas de la bannière (elle ne bouge
     pas d'un pixel par rapport à la ligne de jonction, son placement se calcule
     depuis ce bord), c'est le CONTENU centré qui remonte de ces 32px, et l'écart
     entre l'accroche et le haut de la carte s'ouvre d'autant. Le raccord avec la
     section suivante (.fp-intro, padding-top) n'est pas concerné : il dépend de
     la hauteur de la carte, pas de celle de la bannière. */
  .page-template-template-home .fp-hero { padding-bottom: 248px; }
}
/* ONGLETS DE LA BARRE EN GRILLE 2 x 2 (retour client du 2026-08-16).

   DÉFAUT CORRIGÉ : les quatre onglets défilaient horizontalement dans une bande
   en overflow-x: auto, sans le moindre indice de ce défilement (pas de flèche,
   pas de dégradé de bord, barre de défilement masquée sur écran tactile). Deux
   des quatre réservations étaient donc purement et simplement invisibles pour
   qui ne devinait pas le geste, ce que le client juge à raison illogique.
   On abandonne le défilement : les quatre tiennent d'un coup sur deux rangées
   de deux, tous atteignables sans aucun geste caché.

   PALIER À 70.625em (1130px à racine 16px, remonté depuis 860px le
   2026-09-07, décision de Marino en question native) : au delà de 860px la
   rangée tenait certes sans défiler, mais restait acceptable. Marino a
   tranché pour que les quatre onglets soient TOUJOURS visibles d'un coup
   sans le moindre défilement, y compris sur les résolutions d'ordinateur
   portable les plus courantes (1280 et 1024px) : le palier est donc remonté
   nettement au dessus de la largeur réelle de la rangée en une ligne, plutôt
   que de rester calé sur son seuil de débordement mesuré.
   EM DEMANDÉ PAR OPUS (même jour), INTENTION VÉRIFIÉE SANS EFFET MESURÉ EN
   CHROMIUM : l'idée est qu'un palier en em suive la préférence de taille de
   police par défaut du navigateur (contrairement à un palier en px, toujours
   déclenché à la même largeur de viewport), pour laisser plus de place à la
   rangée quand cette préférence est agrandie. Vérifié au banc (CDP
   Page.setFontSizes, qui change réellement la taille de police par défaut,
   confirmé sur le corps de la page) : Chromium résout les em/rem des media
   queries contre une référence FIXE de 16px, quelle que soit cette
   préférence ; 70.625em vaut donc toujours 1130px en pratique dans ce
   moteur. Le palier en em ne dégrade rien mais ne résout pas non plus, dans
   ce navigateur, le débordement mesuré à racine de police agrandie (voir
   reservation-ui.css, réserve du lien compte, pour la mesure précise).

   La cible tactile atteint 44px de haut (WCAG 2.5.5) et le libellé passe à la
   ligne plutôt que d'être tronqué : la bande ne défilant plus, rien n'a besoin
   de tenir sur une seule ligne. */
/* ONGLET ACTIF NETTEMENT DISTINGUÉ, dans cette grille 2 x 2 (retour client du
   2026-08-17 : « on ne voit pas quel onglet est ouvert »).

   DÉFAUT CORRIGÉ. En rangée, l'onglet actif se signalait par un simple filet
   accent sous le libellé ; une fois les onglets passés sur deux rangées, ce
   filet se lit comme une bordure de case parmi quatre, et plus du tout comme
   une sélection. Les quatre onglets paraissaient donc équivalents.

   POURQUOI L'ATTÉNUATION NE PASSE PAS PAR LE TEXTE. Le premier réflexe, baisser
   l'opacité du libellé des onglets au repos, est ici inutilisable : la carte est
   verte (--fp-primary) ET porte un motif de lignes claires (em-plan.svg, un
   teal pâle posé à 34 pour cent d'opacité). Sur une de ces lignes, un blanc à
   78 pour cent tombe à 3,1:1, soit sous le seuil AA de 4,5:1 exigé pour un
   texte courant. Les onglets au repos sont donc atténués par leur SURFACE (une
   pastille creusée, plus sombre que la carte), jamais par la lisibilité de leur
   libellé, qui reste en blanc plein.

   CONTRASTES MESURÉS (sRGB, le pire cas retenu à chaque fois, c'est à dire au
   droit d'une ligne claire du motif) :
   - onglet au repos, blanc plein sur pastille --fp-secondary-dark à 26 pour cent
     posée sur la carte : 5,2:1 (6,4:1 hors motif). AA confortable ;
   - onglet actif, --fp-secondary sur pastille blanche opaque : 9,9:1. Le motif
     ne joue plus, la pastille est pleine ;
   - le contraste de la pastille active contre son voisinage (blanc opaque contre
     vert de la carte) est de 4,8:1, bien au-delà des 3:1 demandés pour un
     élément d'interface.

   TROIS SIGNAUX, DONT DEUX NON COLORÉS : fond plein contre fond creusé, encre
   sombre contre encre claire, et graisse 700 contre 600. L'état est en outre
   porté par aria-selected (setupTabs, main.js, inchangé).

   Ce bloc est la RÉFÉRENCE du même module sur la page Restauration, qui affiche
   la même barre (fp_render_resbar, inc/sections.php) : y reprendre ces valeurs
   telles quelles. */
@media (max-width: 70.625em) {
  .fp-resbar-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Gouttière ouverte de 2 à 6px : des pastilles distinctes ont besoin de se
       détacher les unes des autres, sans quoi les quatre se lisent comme un
       seul pavé découpé. */
    gap: 6px;
    overflow-x: visible;
    padding: 8px 8px 10px;
  }
  .fp-resbar-tab {
    flex: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    font-size: .82rem;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    hyphens: none;
    /* Repos : pastille creusée dans la carte, libellé blanc plein. */
    border-radius: var(--fp-radius-sm);
    border-bottom-color: transparent;
    background: color-mix(in srgb, var(--fp-secondary-dark) 26%, transparent);
    color: var(--fp-white);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  .fp-resbar-tab:hover {
    background: color-mix(in srgb, var(--fp-secondary-dark) 34%, transparent);
    color: var(--fp-white);
  }
  /* Actif : PLUS DE PASTILLE BLANCHE (Marino, 2026-09-11 : « rends pas une case
     en avant ou présélectionnée, en gros pas de case avec fond blanc »). La
     pastille pleine, en graisse 700 et posée en relief par une ombre, se lisait
     comme un bouton mis en avant plutôt que comme l'onglet courant, et attirait
     l'oeil avant le contenu.

     L'onglet courant reste identifiable, et il DOIT l'être : les quatre onglets
     partagent un seul panneau, sans repère visuel personne ne sait lequel est
     ouvert, et aria-selected n'aurait plus aucune traduction à l'écran. On garde
     donc le strict nécessaire : le même fond que les autres, à peine plus dense,
     et un filet d'accent sous le libellé. Aucun aplat clair, aucune ombre,
     aucune graisse supplémentaire. */
  .fp-resbar-tab.is-active {
    background: color-mix(in srgb, var(--fp-secondary-dark) 42%, transparent);
    color: var(--fp-white);
    font-weight: 600;
    border-bottom-color: transparent;
    box-shadow: inset 0 -2px 0 0 var(--fp-accent);
  }
  /* Le liseré de focus reste à l'EXTÉRIEUR de la pastille. Il y était passé du
     temps de la pastille blanche, où un contour blanc devenait invisible ; il y
     reste, un contour posé au ras d'un fond sombre se lisant mieux dehors. */
  .fp-resbar-tab:focus-visible {
    outline: 2px solid var(--fp-white);
    outline-offset: 2px;
  }
}
/* GARDE DE MOUVEMENT RÉDUIT REPOSÉE ICI. Elle existe déjà plus haut dans ce
   fichier, mais le bloc ci-dessus redéclare la transition des onglets À
   SPÉCIFICITÉ ÉGALE et PLUS BAS : une media query n'ajoutant aucune
   spécificité, il l'aurait emporté et les onglets auraient continué de
   s'animer pour qui demande à ne pas voir d'animation. */
@media (prefers-reduced-motion: reduce) {
  .fp-resbar-tab { transition: none; }
}
@media (max-width: 640px) {
  /* Libellés un cran plus serrés : à cette largeur, chaque onglet ne dispose
     plus que de la moitié d'un écran de téléphone. Marge interne redevenue
     SYMÉTRIQUE (le retrait bas plus court datait du filet accent, remplacé
     au palier 1130px par une pastille pleine) : dans une pastille, un libellé
     de deux lignes doit être centré, sinon il paraît collé au bas. */
  .fp-resbar-tab { font-size: .78rem; padding: 10px 6px; }
  /* DÉFAUT CORRIGÉ (banc d'essai visuel, 2026-08-05) : une fois ses champs
     empilés, la carte mesure 375 px de haut. Ancrée au bas du héro, elle
     remontait par-dessus TOUTE l'accroche (.fp-hero-lead recouverte à 100 %
     à 320, 360 et 390 px) et mordait même la dernière ligne du titre à
     320 px. On libère donc le bas du héro, ce qui remonte d'autant son
     contenu centré, et on descend la carte franchement sous le texte. La
     section suivante reçoit la contrepartie en marge haute.
     RESPIRATION AJOUTÉE (retour client du 2026-08-17) : 232 à 268px, même
     raisonnement qu'au palier 980px ci-dessus. À 390px de large, la carte
     empilée mesure environ 375px de haut et 58 pour cent de cette hauteur
     mordent dans la bannière (translate 42 pour cent), soit environ 217px : la
     réserve de 232px ne laissait que 15px entre l'accroche et le haut de la
     carte, ce qui se lisait comme un contact. Elle en laisse désormais une
     cinquantaine. */
  .page-template-template-home .fp-hero { padding-bottom: 268px; }
  .fp-resbar-wrap { transform: translate(-50%, 42%); }
  .fp-resbar-panel { padding: 20px 18px 22px; }
  .fp-resbar-row { flex-direction: column; align-items: stretch; }
  .fp-resbar-field { flex-basis: auto; }
  /* CENTRAGES DU MODULE (retour client du 2026-08-16) : une fois les champs
     empilés en pleine largeur, l'intitulé collé à gauche et la valeur collée à
     gauche cassaient l'axe de la carte, seule au milieu de l'écran. Intitulés
     ET valeurs affichées (listes déroulantes comme champ de date) se centrent
     donc, exactement comme le reste du bloc. */
  .fp-resbar-field label { text-align: center; }
  .fp-resbar-select,
  .fp-resbar-input {
    text-align: center;
    /* 16px pleins : en dessous, iOS zoome de lui-même sur le champ à la mise
       au point, ce qui décadre toute la page. C'est aussi ce qui rendait le
       champ de date « minuscule » à la lecture. */
    font-size: 1rem;
  }
  /* Marge interne symétrique : le chevron occupe 34px à droite, on rend la
     même chose à gauche pour que la valeur soit centrée sur la pilule, et non
     sur l'espace restant. */
  .fp-resbar-select { padding-left: 34px; }
  /* Meme centrage et même corps de texte que les champs voisins une fois la
     rangee empilee (cf. commentaire ci-dessus). */
  .fp-resbar-formule-fixe { justify-content: center; text-align: center; font-size: 1rem; }
  .fp-resbar-soon { text-align: center; }
  /* justify-content : .fp-btn est un inline-flex, sans quoi le libelle et la
     fleche resteraient colles a gauche une fois le bouton en pleine largeur. */
  .fp-resbar-submit { width: 100%; justify-content: center; }
  /* Contrepartie du déplacement de la carte ci-dessus : l'intro doit démarrer
     son contenu SOUS le bas de la carte (mesuré au banc, 320 à 640 px).
     REDUIT a 220px (retour Marino du 10.09.2026, point 3) : la carte empilee
     mord d'environ 157px sous la separation (0,42 x 375px, cf. mesure
     ci-dessus), la marge de securite reste donc confortable. */
  .page-template-template-home .fp-intro { padding-top: 220px; }
}

/* La section suivante (intro) MORD le hero : coins arrondis en haut + remontee,
   fond blanc (facon RParc). */
.page-template-template-home .fp-intro {
  position: relative; z-index: 3;
  margin-top: -54px; border-radius: 50px 50px 0 0;
  background: var(--fp-white);
  /* Rapproche la section offres qui suit (elle etait trop loin de l'intro). */
  padding-bottom: 52px; /* 40 avant : « un tout petit peu plus d'espace bottom » avant la bande d'activités (Marino, 10.09.2026). */
}

/* ==========================================================================
   3. INTRO : 2 colonnes facon RParc - texte gauche, cluster droite.
      Grand cercle clair central avec patte coloree + 7 pastilles reparties
      autour. Pastilles animees au scroll (translateX + rotateZ via GSAP/main.js).
      eyebrow = icon-box (pin Lucide), gros titre majuscules.
   ========================================================================== */
/* DÉBORDEMENT LATÉRAL DE LA PAGE, CORRIGÉ À LA SOURCE (exigence client du
   2026-08-14 : aucun décalage gauche-droite possible, nulle part).
   Les 7 pastilles du cluster sont posées en débordement du blob (jusqu'à
   right: -10 %) PUIS décalées horizontalement par GSAP : setupMotion
   (assets/js/main.js) les fait voyager de +130 px à -130 px pendant la
   traversée de la section, et l'état de DÉPART (le fromTo est appliqué dès
   la mise en place, avant tout défilement) les pousse donc vers la droite.
   Mesure à 360 px de fenêtre : le blob fait 288 px, il reste 36 px entre son
   bord droit et le bord de la fenêtre, et la pastille 4 part à +130 px, soit
   94 px HORS de la fenêtre. Le seul verrou de page masquait la barre de
   défilement sans empêcher le geste de panoramique sur téléphone.
   overflow-x: clip rogne ce débordement AU NIVEAU DE LA SECTION, qui fait
   toute la largeur de la fenêtre : rien ne change à l'oeil (ce qui est rogné
   était déjà invisible), et le décor garde toute sa course.
   overflow-y: visible est CONSERVÉ et doit le rester : la paire clip/visible
   est légale et laisse l'axe vertical intact, là où « hidden » l'aurait
   basculé en « auto » et transformé la section en conteneur de défilement. */
.page-template-template-home .fp-intro {
  overflow-x: clip;
  overflow-y: visible;
}
/* DÉCOR DE L'INTRO SUR TÉLÉPHONE (retour client du 2026-08-16 : « la patte de
   Rafy doit être centrée » et « un élément est coupé, comme si le titre en
   dessous avait un fond blanc qui vient par-dessus, peut-être l'icon-box »).

   DIAGNOSTIC DU CHEVAUCHEMENT, en deux causes distinctes.

   1. ORDRE DE PEINTURE. Sous 900px, main.css remonte la colonne décorative
      au-dessus du texte avec order: -1. Or l'ordre ne change PAS l'ordre de
      peinture au sens du document : les éléments de grille sont peints dans
      l'ordre modifié, donc la colonne de TEXTE, qui suit désormais, est
      peinte APRÈS le décor. Le premier élément qu'elle contient est la pilule
      de sur-titre, dont le fond est blanc plein (--fp-ibox-bg sur fond clair) :
      au moindre recouvrement, c'est elle qui gagne, et la pastille du décor
      apparaît tranchée net. Le décor reprend donc sa place au-dessus, par un
      contexte de position explicite.
   2. COURSE DE LA PARALLAXE. Les pastilles voyagent jusqu'à 130px de chaque
      côté (setupMotion, assets/js/main.js), calibrage d'écran large : sur
      téléphone elles atteignaient le bord de la section et se faisaient
      trancher par son overflow-x: clip. La course y est bridée côté script,
      pas ici : le clip horizontal reste intact, c'est le verrou anti-décalage
      latéral de la page.

   PATTE CENTRÉE : le blob est déjà centré dans sa colonne, mais la patte
   elle-même dérivait de 20px sous l'effet de la parallaxe. Ce mouvement est
   coupé sur téléphone (même fichier JS) ; on verrouillé ici le centrage du
   conteneur pour que rien ne puisse le décaler. */
@media (max-width: 900px) {
  .page-template-template-home .fp-intro-aside {
    position: relative;
    z-index: 1;
    /* Respiration sous le décor : la pilule de sur-titre qui suit ne peut plus
       venir mordre la constellation, même quand une pastille déborde. */
    margin-bottom: 10px;
  }
  .page-template-template-home .fp-intro-blob { margin-left: auto; margin-right: auto; }
  /* La patte reste l'axe visuel de la section : strictement au centre du blob,
     les pastilles s'organisent autour d'elle. */
  .page-template-template-home .fp-intro-blob .fp-cluster-core { left: 50%; }
}
/* Titre mesure RParc : Bebas 56px (3.5rem) weight 600 line-height 1
   (avant : max 4rem/700/1.02, trop gros et trop gras). Max-width elargi
   16ch -> 28ch (trop contraint avant), sans casser la grille 2 colonnes
   (.fp-intro-grid reste 1.1fr/.9fr en main.css, inchangee). */
.fp-intro-title {
  font-family: var(--fp-font-heading); font-weight: 600; text-transform: uppercase;
  line-height: 1; letter-spacing: .005em; margin: 16px 0 18px;
  font-size: clamp(2.2rem, 4vw, 3.5rem); max-width: 28ch; color: var(--fp-ink);
}
.fp-intro-aside { overflow: visible; }
/* SUPPRIME : les trois surcharges .page-template-template-home .fp-ibox /
   .fp-ibox svg / .fp-ibox-title qui redessinaient le sur-titre uniquement pour
   l'accueil (fond accent, radius 20px, icone sans pastille, libelle 18px).
   C'etait exactement la duplication que le client refuse : le composant
   icon-box est desormais defini a UN SEUL endroit, assets/css/main.css, bloc
   ICON-BOX, et la retouche s'applique donc a toutes les pages a la fois. */
/* Corps de texte (accroche) : Aeonik 16px / line-height 29px mesures
   (le body global est 17px/1.6 = 27.2px, ecart mineur corrige ici). Colonne
   elargie a ~60ch (sans casser la grille, la limite vient du .fp-intro-grid
   1.1fr/.9fr en main.css, pas de ce max-width interne), justifie avec
   hyphenation pour eviter les rivieres moches. */
.page-template-template-home .fp-intro-body.fp-prose {
  font-size: 1rem;
  line-height: 1.8125;
  max-width: 60ch;
  /* Texte justifie SANS cesure : la cesure automatique coupait les mots en fin
     de ligne (« divertisse- / ment »), ce que le client refuse sur tout le
     site. Le justifie seul suffit, quitte a laisser des blancs un peu plus
     larges entre les mots. */
  text-align: justify;
}

/* INTRO ENTIÈREMENT CENTRÉE SUR TÉLÉPHONE (retour client du 2026-08-17 :
   « intro, texte centré sur mobile »).

   Le bloc est posé ICI, après la règle de justification ci-dessus, et non dans
   le bloc responsive de l'intro plus haut : à spécificité égale (le même
   sélecteur .page-template-template-home .fp-intro-body.fp-prose), c'est la
   dernière règle écrite qui gagne, et une media query n'ajoute aucune
   spécificité. Écrit plus haut, le centrage aurait perdu la cascade sans le
   moindre signe.

   PALIER À 720px, celui du téléphone dans tout ce fichier (même palier que la
   section activités, et celui où .fp-wrap resserre sa gouttière). Entre 720 et
   900px la mise en page est déjà empilée mais la colonne reste large : le texte
   y garde son fer à gauche justifié, qui s'y lit mieux.

   Le sur-titre suit sans règle propre : la pilule icon-box est un inline-flex,
   elle se centre donc avec le contenu en ligne de sa colonne. */
@media (max-width: 720px) {
  .page-template-template-home .fp-intro-col { text-align: center; }
  .page-template-template-home .fp-intro-title {
    /* Le plafond de 28ch et le fer à gauche n'ont plus d'objet sur une colonne
       unique étroite : le titre occupe la largeur utile et se centre dessus. */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .page-template-template-home .fp-intro-body.fp-prose {
    /* Le justifié laisse des blancs béants dès que la ligne est courte : sur
       téléphone, il cède la place au centrage demandé. */
    text-align: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Conteneur du cluster : large, carre, centre dans la colonne droite. */
.fp-intro-blob {
  position: relative; width: min(440px, 86vw); aspect-ratio: 1 / 1; margin: 0 auto;
}

/* Le cluster occupe tout l'espace du blob. z-index 1 : toujours au-dessus de
   l'anneau décoratif posé sur .fp-intro-blob (voir plus bas), jamais en
   dessous. */
.fp-intro-blob .fp-cluster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }

/* PATTE ET PASTILLES RETIREES (2026-09-01, voir inc/mascottes-attente.php) : la
   colonne de droite montre une seule photo a la place de la patte et des sept
   pictos. Coins arrondis (--fp-radius-lg) plutot qu'un cercle plein (retour
   client) : le blob reste carre, donc rien ne bouge autour. Meme regle pour
   l'ancien marquage fp-cluster-attente (pages pas encore passees par le
   fixup 123, repli historique de fp_activity_cluster) et le nouveau bloc
   editable fp-zone-cluster-photo (fixup 123 et semis fp_pattern_home). */
.fp-intro-blob .fp-cluster-attente img,
.fp-intro-blob .fp-cluster-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CADRE DE LA PHOTO (retour client 2026-09-03) : coins arrondis et ombre
   portés par le CADRE (overflow hidden), pas par l'image, pour que la lueur
   de survol ci-dessous reste dans le contour. Sans bordure : une bordure verte
   avait été posée puis retirée le même jour (« enlève la bordure tout compte
   fait »), l'aperçu Magic Kids plus bas garde la sienne. */
.fp-intro-blob .fp-cluster-attente,
.fp-intro-blob .fp-cluster-photo {
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow-lg);
}
/* Un peu moins haut que large (retour client : « réduis un peu la hauteur »).
   Règle avec :has SEULE dans sa liste (piège 5f du CLAUDE.md) : un navigateur
   qui l'ignore garde le blob carré, rien ne casse. L'ancien cluster patte +
   pastilles, positionné en pourcentages, n'est pas concerné : il ne s'affiche
   que sans photo, donc sans cette règle. */
.fp-intro-blob:has(.fp-cluster-photo) {
  aspect-ratio: 5 / 4;
}
.fp-intro-blob:has(.fp-cluster-attente) {
  aspect-ratio: 5 / 4;
}
/* LUEUR QUI TRAVERSE AU SURVOL : même reflet diagonal que les cartes
   d'activités (.fp-actcard-media::before, plus bas), mêmes valeurs, pour que
   toutes les photos de l'accueil réagissent de la même façon. Purement
   décoratif, sous personne (pas de texte dans ce cadre). */
.fp-intro-blob .fp-cluster-attente::before,
.fp-intro-blob .fp-cluster-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%);
  transition: transform .7s ease;
  pointer-events: none;
}
.fp-intro-blob .fp-cluster-attente:hover::before,
.fp-intro-blob .fp-cluster-photo:hover::before {
  transform: translateX(130%);
}
@media (prefers-reduced-motion: reduce) {
  .fp-intro-blob .fp-cluster-attente::before,
  .fp-intro-blob .fp-cluster-photo::before { display: none; }
}

/* ANNEAU POINTILLÉ DÉCORATIF (2026-09-06, demande Marino ; remonté le
   2026-09-07, retour Marino : « on ne le voit pas dépasser en haut à
   droite ») : même dessin et même vitesse que celui des fiches d'activité
   (activite.css, .fp-detail .fp-intro-figure-galerie::before et @keyframes
   fp-intro-ring-spin), adapté à la photo ronde de la Présentation. Posé sur
   .fp-intro-blob, qui n'a PAS overflow:hidden (contrairement à
   .fp-cluster-photo juste au-dessus, qui le couperait) : seul un ancêtre non
   clippé peut laisser déborder l'anneau, même recette que la fiche.
   .fp-intro-aside (overflow: visible, plus haut dans ce fichier) et .fp-intro
   (overflow-y: visible explicite, plus haut dans ce fichier) confirment
   qu'aucun ancêtre ne rogne l'axe vertical : top négatif fait donc bien
   déborder l'anneau au-dessus du cadre. Scopé à :has(.fp-cluster-photo) en
   règle ISOLEE (jamais groupée avec un repli, piège 5f du CLAUDE.md) : sans
   :has, l'anneau ne s'affiche simplement pas, rien ne casse. z-index: 0
   contre le z-index: 1 du cluster juste au-dessus -> toujours derrière la
   photo, jamais devant. */
.fp-intro-blob:has(.fp-cluster-photo)::before {
  content: '';
  position: absolute;
  top: -26px;
  right: -8%;
  z-index: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 2px dashed var(--fp-primary);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .fp-intro-blob:has(.fp-cluster-photo)::before {
    animation: fp-intro-ring-spin-home 42s linear infinite;
  }
}
@keyframes fp-intro-ring-spin-home { to { transform: rotate(360deg); } }

/* Grand cercle clair central (le « rond » du RParc) : contient la patte coloree.
   Surcharge la version main.css (petit cercle accent) pour la page accueil.
   z-index 2 < pastilles (z-index 6) : la patte passe DERRIERE les pastilles.
   Fond menthe pale SANS bordure (capture RP), ombre douce conservee. */
.fp-intro-blob .fp-cluster-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(230px, 56%);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fp-accent) 22%, var(--fp-cream));
  border: 0;
  box-shadow: var(--fp-shadow);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.fp-intro-blob .fp-cluster-core img {
  width: 72%; height: 72%; object-fit: contain;
}

/* Pastilles d'activités (Element-*.svg) : rondes, positionnees en absolu autour
   du grand cercle. z-index 6 > patte centrale (z-index 2) : les pastilles
   passent DEVANT la patte. Cercles ~64-104px (cf. tailles individuelles
   ci-dessous), icone ~63% du cercle (avant : 52%, trop petite), fin lisere
   teal/sauge translucide (~1.5px) en plus de l'ombre douce. */
.fp-intro-blob .fp-cluster-el {
  position: absolute;
  width: 22%; height: 22%;
  z-index: 6;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--fp-white);
  border: 1.5px solid color-mix(in srgb, var(--fp-accent) 55%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fp-dark) 12%, transparent);
}
.fp-intro-blob .fp-cluster-el img {
  width: 63%; height: 63%; object-fit: contain;
}

/* Positions RParc (capture) : constellation ENCORE PLUS ECARTEE (demande client
   du 2eme retour), chaque pastille rapprochee des bords/coins du blob par
   rapport a la passe precedente. Casque, volant badminton et haltere
   DEBORDENT legerement du cadre (valeurs negatives maitrisees, cf. capture RP
   ou le casque/volant mordent déjà le bord). Tailles VARIEES par pastille
   (~64px a ~104px sur un conteneur desktop typique de 440px), aucune ne
   partage la taille de sa voisine (parallaxe au scroll geree par
   setupMotion, main.js, amplitudes inchangees). Composition verifiee :
   aucun chevauchement entre pastilles voisines malgre l'amplitude accrue.
   Ordre des éléments dans fp_activity_elements() :
   1=Bowling, 2=CasqueF1, 3=Shuffleboard, 4=Haltere, 5=VolantBadminton, 6=Arcades, 7=Tennis */
/* Amplitude verticale RESSERREE (demande client : élément le plus haut et le
   plus bas trop eloignes ; on rapproche tout de la patte centrale de Rafy).
   L'eparpillement HORIZONTAL (left/right) reste inchange (largeur validee). */
/* 1 - Bowling : haut-gauche */
.fp-intro-blob .fp-cluster-el-1 { top: 8%; left: 8%; width: 25%; height: 25%; }
/* 2 - CasqueF1 : bord gauche, leger debordement (suit le mouvement des voisins) */
.fp-intro-blob .fp-cluster-el-2 { top: 32%; left: -4%; width: 18%; height: 18%; }
/* 3 - Shuffleboard (palet) : bas-gauche */
.fp-intro-blob .fp-cluster-el-3 { bottom: 12%; left: 0%; width: 23%; height: 23%; }
/* 4 - Haltere : haut-droite */
.fp-intro-blob .fp-cluster-el-4 { top: 6%; right: 0%; width: 18%; height: 18%; }
/* 5 - VolantBadminton : bord droit, deborde davantage */
.fp-intro-blob .fp-cluster-el-5 { top: 28%; right: -10%; width: 28%; height: 28%; }
/* 6 - Arcades (manette) : bas-droite */
.fp-intro-blob .fp-cluster-el-6 { bottom: 10%; right: -4%; width: 20%; height: 20%; }
/* 7 - Tennis (raquette) : bas-gauche, nettement REMONTEE (etait bottom:-8%, trop
   basse) pour se rapprocher de la patte centrale. */
.fp-intro-blob .fp-cluster-el-7 { bottom: 8%; left: 10%; width: 21%; height: 21%; }

/* Pastilles du cluster : GSAP gere entierement le transform (position x + rotation).
   On ne pose aucun transform CSS ni stagger ici pour eviter le conflit CSS vs GSAP
   qui creait des a-coups. Seule l'opacite initiale est posee (fondu au reveal),
   sans toucher au transform (laisse a GSAP). */
.fp-reveal .fp-cluster-el { opacity: 0; }
.fp-reveal.is-in .fp-cluster-el { opacity: 1; transition: opacity .6s ease; }
/* Stagger d'opacite uniquement (aucun transform CSS). */
.fp-reveal.is-in .fp-cluster-el-1 { transition-delay: .05s; }
.fp-reveal.is-in .fp-cluster-el-2 { transition-delay: .12s; }
.fp-reveal.is-in .fp-cluster-el-3 { transition-delay: .19s; }
.fp-reveal.is-in .fp-cluster-el-4 { transition-delay: .26s; }
.fp-reveal.is-in .fp-cluster-el-5 { transition-delay: .33s; }
.fp-reveal.is-in .fp-cluster-el-6 { transition-delay: .40s; }
.fp-reveal.is-in .fp-cluster-el-7 { transition-delay: .47s; }
/* Reduced-motion : apparition instantanee, GSAP ne tourne pas (cf. setupMotion). */
@media (prefers-reduced-motion: reduce) {
  .fp-reveal .fp-cluster-el,
  .fp-reveal.is-in .fp-cluster-el { opacity: 1; transition: none; }
}

/* ==========================================================================
   4. OFFRES : carrousel auto. 4 cartes desktop / 2 tablette / 1 mobile.
      Deux variantes : fp-offre-card-img (image seule) et fp-offre-card-text
      (fond dedie + voile + titre/desc centres).
   ========================================================================== */
/* Espace réduit entre intro et offres (le gap par defaut etait trop grand). */
.page-template-template-home .fp-offres { padding-top: 32px; }

/* Correction cadrage carrousel (bug live : 1ere carte tronquee a gauche).
   Cause : main.css pose sur .fp-offres-track un padding asymetrique
   (14px 14px 18px 2px), un padding-left quasi nul (2px) qui ne suffit pas a
   contenir le flou de --fp-shadow (0 4px 20px, ~20px de portee) ni a aligner
   la carte 1 pile sur le bord gauche de .fp-wrap comme sur le modele RParc
   (carte 1 au meme x que le titre "Offres en cours au parc"). Correction :
   padding-left ramene a 0, carte 1 collee au bord gauche du contenu, cartes
   suivantes defilant vers la droite (padding vertical et droit inchanges :
   le hover translateY(-8px) rotate(-2deg) + ombre signature restent intacts,
   l'autoplay/scrollBy de main.js n'est pas touche).
   AJUSTEMENT (demande client : au survol de la 1ere carte tout a gauche, la
   rotation -2deg fait deborder son coin haut-gauche, coupe net par le bord du
   track a padding-left:0). On donne au track un petit padding-gauche (16px) pour
   laisser respirer ce debordement, COMPENSE par un margin-left negatif egal :
   la carte 1 reste alignee au bord gauche du contenu au repos, mais son hover
   n'est plus tronque. Le scroll-padding-left aligne aussi le snap sur ce retrait. */
.page-template-template-home .fp-offres-track {
  padding-left: 16px;
  margin-left: -16px;
  scroll-padding-left: 16px;
}

/* Titre de la section offres : police heading (Bebas) majuscule, plus grand et
   plus fonce que la valeur main.css (qui etait grise et petite). */
/* Libelle de section offres (markup : <p>, non semantique, pas anime, cf.
   sections.php) : même VISUEL qu'un titre (Bebas majuscules, encre) mais un tout
   petit peu plus petit (demande client). */
.page-template-template-home .fp-offres-label {
  font-family: var(--fp-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.1vw, 2.4rem);
  color: var(--fp-ink);
  margin: 0;
}

/* Etat de repos des cartes offres : TRANSITION douce (demande client : le survol
   passait d'un état a l'autre sans transition, effet brusque). On anime le lift,
   la rotation et l'ombre. transform-origin centre pour un pivot naturel.
   SPECIFICITE RENFORCEE (data-fp-carousel + .fp-reveal) : les cartes offres sont
   des .fp-reveal dans un carrousel, or main.css pose
   [data-fp-carousel] .fp-reveal { transition:none } (pour figer l'apparition au
   defilement). Sans ce selecteur plus specifique, cette règle ecrasait notre
   transition de hover -> survol brusque. On la restaure ICI uniquement pour le
   hover (l'apparition reste figee, aucun conflit de defilement). */
.page-template-template-home [data-fp-carousel] .fp-offre-card.fp-reveal,
.page-template-template-home .fp-offre-card {
  transition: opacity .5s ease, transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
  transform-origin: center center;
}
/* Hover commun aux deux variantes : lift + ombre signature. z-index : la carte
   survolee passe AU-DESSUS des voisines (sinon la rotation la fait passer derriere
   la suivante, ce qui donne l'impression de pousser les autres vers la droite). */
/* Survol atténué (demande client : « ça descend beaucoup trop bas »).
   Ces cartes avaient gardé l'amplitude d'ORIGINE : les trois passes de
   réduction demandées auparavant n'avaient été appliquées qu'aux cartes
   signature (.fp-actcard). Deux choses les faisaient plonger :
   l'ombre dure était décalée vers le BAS-droite (8px 8px), donc à contresens
   du soulèvement, et la rotation de 2 degrés faisait piquer un coin sous la
   carte voisine.
   Les valeurs sont désormais alignées sur celles déjà validées pour
   .fp-actcard : même soulèvement, même rotation, et ombre réorientée vers le
   HAUT-droite pour qu'elle accompagne le mouvement au lieu de le contredire.
   L'effet reste vivant, il ne déborde plus. */
/* SURVOL MESURE MORT (banc d'essai, tools/bench-visuel/survol.mjs) : au survol,
   l'ombre apparaissait bien mais la carte NE BOUGEAIT PAS d'un pixel. Meme
   cause que pour .fp-actcard plus bas, autre victime : main.css neutralise
   l'apparition avec « .page-template-template-home .fp-reveal:not(.fp-anim-h)
   :not(.fp-actcard) { transform: none } », soit QUATRE classes, alors que ce
   survol n'en portait que TROIS. Les media queries n'ajoutant aucune
   spécificité, la règle perdait la cascade a toutes les largeurs et le
   translateY n'a jamais eu lieu. .fp-actcard etait explicitement exclu de la
   neutralisation, pas .fp-offre-card.
   Correctif : un second selecteur porte a CINQ classes (.fp-offres-track et
   .fp-reveal sont deja sur chaque carte, cf. le balisage rendu), qui repasse
   devant main.css. Le selecteur d'origine est conserve pour les cartes
   eventuelles sans .fp-reveal, que main.css ne touche pas. */
.page-template-template-home .fp-offre-card:hover,
.page-template-template-home .fp-offres-track .fp-offre-card.fp-reveal:hover {
  transform: translateY(-3px) rotate(-.25deg);
  box-shadow: 3px -3px 0 0 var(--fp-secondary-dark);
  position: relative;
  z-index: 3;
}
/* La garde reprend EXACTEMENT les deux selecteurs ci-dessus : sans cela, le
   selecteur a cinq classes gagnerait aussi sous prefers-reduced-motion et
   l'animation continuerait de jouer pour qui demande a ne pas en avoir. */
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-offre-card { transition: none; }
  .page-template-template-home .fp-offre-card:hover,
  .page-template-template-home .fp-offres-track .fp-offre-card.fp-reveal:hover { transform: none; }
}

/* Entree en fondu DECALEE carte par carte (demande client : « de la vie, de
   l'animation »). Le carrousel etant hors du champ de setupReveal (main.js),
   l'apparition individuelle des cartes se pose ici en CSS, pilotee par la
   classe .is-in que setupOffresReveal (main.js, inchange) pose déjà sur
   .fp-offres-track a son entree en viewport. On ne touche volontairement
   JAMAIS a « transform » ici (reserve au hover ci-dessus, cf. transition
   partagee) : uniquement l'opacite, avec un transition-delay CIBLE (liste a
   3 valeurs alignee sur l'ordre opacity/transform/box-shadow de la
   transition partagee ci-dessus) pour que SEUL le fondu soit retarde, jamais
   le survol. */
.page-template-template-home .fp-offres-track .fp-offre-card.fp-reveal { opacity: 0; }
.page-template-template-home .fp-offres-track.is-in .fp-offre-card.fp-reveal { opacity: 1; }
.page-template-template-home .fp-offres-track.is-in .fp-offre-card.fp-reveal:nth-child(1) { transition-delay: 0s, 0s, 0s; }
.page-template-template-home .fp-offres-track.is-in .fp-offre-card.fp-reveal:nth-child(2) { transition-delay: .09s, 0s, 0s; }
.page-template-template-home .fp-offres-track.is-in .fp-offre-card.fp-reveal:nth-child(3) { transition-delay: .18s, 0s, 0s; }
.page-template-template-home .fp-offres-track.is-in .fp-offre-card.fp-reveal:nth-child(4) { transition-delay: .27s, 0s, 0s; }
.page-template-template-home .fp-offres-track.is-in .fp-offre-card.fp-reveal:nth-child(5) { transition-delay: .36s, 0s, 0s; }
.page-template-template-home .fp-offres-track.is-in .fp-offre-card.fp-reveal:nth-child(6) { transition-delay: .45s, 0s, 0s; }
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-offres-track .fp-offre-card.fp-reveal { opacity: 1; transition-delay: 0s; }
}

/* Badge pilule (demande client : « badges, profondeur ») : coin haut-gauche,
   leger devers qui se redresse au survol de la carte, facon etiquette promo. */
.fp-offre-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px 15px;
  background: var(--fp-accent);
  color: var(--fp-white);
  font-family: var(--fp-font-heading);
  /* Taille remontee de 0.72rem a 0.88rem (demande client : « on ne la voit pas
     suffisamment »). Le libelle est court et en capitales, il reste donc lisible
     comme une etiquette ; le rembourrage suit pour garder la proportion de la
     pilule. Le plafond de largeur ci-dessous continue de la proteger du
     detourage de la carte.
     GRAISSE redescendue de 600 a 400 (deuxieme demande : « un peu moins gras,
     je ne sais toujours pas si c'est lisible »). En capitales et interlettre,
     un demi-gras epaissit les traits et ferme les contreformes : a cette
     taille, le poids normal se lit mieux qu'un gras plus petit. */
  font-size: .88rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--fp-pill);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--fp-dark) 30%, transparent);
  transform: rotate(-4deg);
  transition: transform .3s ease;
  /* Le libellé du badge est saisi par la cliente (« Nouveau », mais aussi
     « Offre spéciale de printemps »). Sans plafond, la pilule s'étirait au-delà
     de la carte, qui est en overflow: hidden : la fin du libellé disparaissait
     sans aucun indice, mesure a 320 px. On la borne a la largeur de la carte
     moins ses deux retraits de 14 px ; au-dela, le texte passe a la ligne dans
     la pilule au lieu d'etre tranche. */
  max-width: calc(100% - 28px);
}
.page-template-template-home .fp-offre-card:hover .fp-offre-badge {
  transform: rotate(0deg) scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-offre-card:hover .fp-offre-badge { transform: rotate(-4deg); }
}

/* ------------------------------------------------------------------
   Variante A : IMAGE SEULE (fp-offre-card-img)
   La carte entiere est un <a>, l'image remplit en object-fit cover.
   Langage « carte bordee » commun a la home : fond cream, bordure primary,
   radius-lg (24px). Image zoomee au survol (profondeur), clippee par
   l'overflow:hidden de la carte.
   ------------------------------------------------------------------ */
.fp-offre-card-img {
  aspect-ratio: 1 / 1;
  border-radius: var(--fp-radius-lg);
  box-shadow: none;
  overflow: hidden;
  display: block;
  position: relative;
  border: 1px solid var(--fp-primary);
  background: var(--fp-cream);
  transform-origin: center;
  transition: transform .4s ease, box-shadow .3s ease;
}
.fp-offre-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
/* PROFONDEUR LATERALE (demande client : « survol plus joli, genre GSAP, de
   côté ») : le zoom existant gagne une composante horizontale, l'image glisse
   legerement DANS LA CARTE (calque de fond) pendant que le zoom s'opere. */
.page-template-template-home .fp-offre-card:hover .fp-offre-card-img img {
  transform: scale(1.08) translateX(-3%);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-offre-card:hover .fp-offre-card-img img { transform: none; }
}
/* Balayage lumineux diagonal (::after libre sur cette variante : ni ::before
   ni ::after n'y sont utilises ailleurs). Recette : un large degrade diagonal
   anime en background-position, dont les positions de repos ET de fin de
   survol sont toutes deux HORS-CADRE (rien de visible a l'arret) : seule la
   TRAVERSEE pendant la transition est visible, comme un reflet qui balaie la
   carte a l'entree/sortie du survol. */
.fp-offre-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    115deg,
    transparent 42%,
    color-mix(in srgb, var(--fp-white) 40%, transparent) 50%,
    transparent 58%
  );
  background-size: 260% 260%;
  background-position: -70% -70%;
  background-repeat: no-repeat;
  transition: background-position .7s ease;
}
.page-template-template-home .fp-offre-card:hover .fp-offre-card-img::after {
  background-position: 170% 170%;
}
@media (prefers-reduced-motion: reduce) {
  .fp-offre-card-img::after { transition: none; }
  .page-template-template-home .fp-offre-card:hover .fp-offre-card-img::after { background-position: -70% -70%; }
}

/* ------------------------------------------------------------------
   Variante B : FOND DEDIE (fp-offre-card-text)
   background-image inline (ou fond var(--fp-primary) si absent) +
   voile sombre pour lisibilite + titre/desc centres en blanc.
   Meme langage « carte bordee » (bordure primary, radius-lg) que la
   variante A, la bordure se dessine par-dessus l'image de fond.
   PROFONDEUR (demande client) : le fond est duplique sur un calque ::before
   dedie (background:inherit, même recette que .fp-resto-card::before) pour
   un zoom au survol independant du texte ; le voile sombre (necessaire a la
   lisibilite du texte) passe donc en ::after, peint PAR-DESSUS ce calque.
   ------------------------------------------------------------------ */
.fp-offre-card-text {
  aspect-ratio: 1 / 1;
  border-radius: var(--fp-radius-lg);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--fp-primary);
  background-color: var(--fp-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 24px 20px;
  text-align: center;
  color: var(--fp-white);
  transform-origin: center;
  transition: transform .4s ease, box-shadow .3s ease;
}
/* Calque zoom (duplique le fond de la carte, scale independant au survol). */
.fp-offre-card-text::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  transition: transform .5s ease;
}
/* PROFONDEUR LATERALE (demande client : « survol plus joli, genre GSAP, de
   côté ») : le calque de fond se decale LEGEREMENT VERS LA GAUCHE en zoomant,
   pendant que le contenu (titre/desc, cf. plus bas) glisse vers la DROITE :
   effet de parallaxe, le fond et le texte ne bougent plus comme un seul bloc. */
.page-template-template-home .fp-offre-card:hover .fp-offre-card-text::before {
  transform: scale(1.08) translateX(-3%);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-offre-card:hover .fp-offre-card-text::before { transform: none; }
}
/* Voile sombre pour lisibilite du texte sur l'image (peint au-dessus du
   calque zoom ci-dessus, même z-index, ordre source), COMBINE a un balayage
   lumineux diagonal : 1er calque de fond, un degrade anime en
   background-position (recette identique a fp-offre-card-img::after) ; 2e
   calque : le voile sombre d'origine, INCHANGE. Les positions de repos et de
   fin de survol du balayage sont hors-cadre (0-100%) : le voile reste
   IDENTIQUE au repos et en fin de survol, contraste du titre/desc jamais
   degrade, seule la traversee est visible pendant la transition. */
.fp-offre-card-text::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(
      115deg,
      transparent 42%,
      color-mix(in srgb, var(--fp-white) 35%, transparent) 50%,
      transparent 58%
    ),
    /* Voile vert renforce (demande client) : le titre et la description se
       detachent mieux de la photo. 25/62 -> 40/78. */
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--fp-dark) 40%, transparent) 0%,
      color-mix(in srgb, var(--fp-dark) 78%, transparent) 100%
    );
  background-size: 260% 260%, 100% 100%;
  background-position: -70% -70%, center;
  background-repeat: no-repeat;
  transition: background-position .7s ease;
}
.page-template-template-home .fp-offre-card:hover .fp-offre-card-text::after {
  background-position: 170% 170%, center;
}
@media (prefers-reduced-motion: reduce) {
  .fp-offre-card-text::after { transition: none; }
  .page-template-template-home .fp-offre-card:hover .fp-offre-card-text::after { background-position: -70% -70%, center; }
}
.fp-offre-card-text .fp-offre-title,
.fp-offre-card-text .fp-offre-desc {
  position: relative;
  z-index: 1;
  /* Glissement lateral du contenu au survol (composante « de côté »),
     EN SENS OPPOSE au calque de fond (::before ci-dessus) : parallaxe. */
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.fp-offre-card-text .fp-offre-title,
.fp-offre-card-text .fp-offre-desc {
  color: var(--fp-white);
}
.page-template-template-home .fp-offre-card:hover .fp-offre-card-text .fp-offre-title {
  transform: translateX(7px);
}
/* Leger stagger (description decalee de 50ms) : mouvement plus organique,
   moins « tout d'un bloc », facon animation GSAP en cascade. */
.page-template-template-home .fp-offre-card:hover .fp-offre-card-text .fp-offre-desc {
  transform: translateX(7px);
  transition-delay: .05s;
}
@media (prefers-reduced-motion: reduce) {
  .fp-offre-card-text .fp-offre-title,
  .fp-offre-card-text .fp-offre-desc { transition: none; }
  .page-template-template-home .fp-offre-card:hover .fp-offre-card-text .fp-offre-title,
  .page-template-template-home .fp-offre-card:hover .fp-offre-card-text .fp-offre-desc {
    transform: none;
    transition-delay: 0s;
  }
}
.fp-offre-card-text .fp-offre-title {
  font-family: var(--fp-font-heading);
  font-weight: 700;
  /* Titre agrandi (demande client) : 1.1/2.2/1.5 -> 1.3/2.6/1.8. */
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  text-transform: uppercase;
  margin: 0 0 8px;
  line-height: 1.05;
}
.fp-offre-card-text .fp-offre-desc {
  font-size: clamp(.85rem, 1.3vw, .95rem);
  opacity: .92;
  margin: 0;
  /* CENTRAGE VERTICAL du bloc titre + texte : la carte porte déjà
     justify-content:center, mais la règle de base .fp-offre-desc (main.css)
     pose flex:1. La description absorbait donc tout l'espace libre, si bien
     qu'il ne restait plus rien a repartir et que le contenu restait colle en
     haut. On rend la description a sa hauteur naturelle : le centrage de la
     carte s'applique enfin. */
  flex: 0 0 auto;
}

/* ==========================================================================
   4bis. BANDE D'ACTIVITES DEFILANTE (Marino, 10.09.2026) : pleine largeur,
   fine rangee de pilules (icone + nom) qui defile lateralement en continu, a
   la couture entre la section Presentation et la grille Activites ci-dessous
   (rendue par fp_render_activites_bande, inc/sections.php, hors de tout
   .fp-wrap). Piste dupliquee une fois (deux <ul> identiques cote a cote dans
   .fp-act-bande-track, animation de 0 a -50%) : le bouclage tombe pile sur la
   moitie de la piste totale, sans a-coup. La copie de secours est
   aria-hidden, ses liens sont hors tabulation (tabindex="-1", pose en PHP).
   ========================================================================== */
.fp-act-bande {
  position: relative;
  overflow: hidden;
  background: var(--fp-secondary); /* vert du parc, 004c45 (Marino, 10.09.2026) */
  padding: 14px 0;
}
.fp-act-bande-track {
  display: flex;
  width: max-content;
  gap: 22px;
  animation: fp-act-bande-scroll 75s linear infinite; /* 52 avant : un peu plus lent (Marino) */
}
/* Pause au survol ET au focus clavier, en CSS pur (aucun JavaScript requis) :
   :focus-within se declenche des qu'un lien de la piste recoit le focus, ce
   qui laisse le temps de cliquer ou de lire au clavier avant reprise. */
.fp-act-bande-track:hover,
.fp-act-bande-track:focus-within {
  animation-play-state: paused;
}
.fp-act-bande-list {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0 7px;
}
.fp-act-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--fp-pill);
  background: color-mix(in srgb, var(--fp-white) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fp-white) 22%, transparent);
  color: var(--fp-white);
  font-family: var(--fp-font-body);
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.fp-act-pill-ic {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--fp-accent);
  flex: 0 0 auto;
}
.fp-act-pill-ic svg { width: 100%; height: 100%; display: block; }
.fp-act-pill:hover,
.fp-act-pill:focus-visible {
  background: color-mix(in srgb, var(--fp-white) 20%, transparent);
  border-color: color-mix(in srgb, var(--fp-white) 42%, transparent);
  transform: translateY(-2px);
}
.fp-act-pill:focus-visible { outline: 2px solid var(--fp-white); outline-offset: 2px; }
@keyframes fp-act-bande-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .fp-act-bande { padding: 10px 0; }
  .fp-act-bande-track { gap: 14px; }
  .fp-act-bande-list { gap: 14px; padding: 0 7px; }
  .fp-act-pill { padding: 7px 12px; gap: 6px; font-size: .78rem; }
  .fp-act-pill-ic { width: 16px; height: 16px; }
}
/* Mouvement reduit : plus d'animation, une seule copie (la piste devient une
   rangee fixe, defilable au doigt/a la molette comme n'importe quelle liste
   qui deborde). Sans JavaScript, ce cas se comporte deja ainsi par defaut si
   un navigateur ne supporte pas les animations CSS. */
@media (prefers-reduced-motion: reduce) {
  .fp-act-bande { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .fp-act-bande-track { animation: none; }
  .fp-act-bande-list[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   5. ACTIVITES : plan du parc (em-plan.svg) animé en fond + cartes
      signature duotone teal + bandeau blanc (titre Bebas teal en bas-centre).
   ========================================================================== */
/* Grille plus large que le wrap global (1300px) : rangee de cartes RParc
   occupe davantage de largeur, mesure capture (~1400px). Padding bas 120px
   mesure fiche : la boule/quille sont posees SOUS ce padding, collees au
   bord bas de la section (position absolute, cf. .fp-bowling-strip). */
.page-template-template-home .fp-activites { position: relative; overflow: hidden; --fp-wrap: min(1400px, 92vw); padding-top: 100px; padding-bottom: 120px; }

/* PLAN DU PARC ANIMÉ EN FOND (Marino, 09.09.2026, sur le site en ligne : « le
   listing des activités, j'aimerais bien le fond animé de em-plan comme sur la
   page infos pratiques, ça a du cachet »).

   Deux changements par rapport au calque statique qui était là :

   1. Le motif n'est plus motif-activites-home.svg (repris du parc modèle) mais
      em-plan.svg, le plan du parc déjà utilisé partout ailleurs sur le site :
      l'arche de l'intro des fiches, le filigrane des formules, le fond du
      listing « Autres activités », la section Horaires d'Informations
      pratiques. Ses traits clairs ressortent doucement sur le teal de la
      section, exactement le ton sur ton recherché.

   2. Il DÉRIVE lentement, MÊME RECETTE que .fp-ip-horaires-motif
      (informations.css) et que .fp-footer::before (main.css) : inset négatif
      pour que le zoom et le va-et-vient ne découvrent jamais un bord (la
      section est déjà en overflow: hidden), transform SEUL (jamais
      background-position, qui repeint tout le calque à chaque image), animation
      lente en alternance, et arrêt net sous prefers-reduced-motion.

   L'opacité passe de .12 à .16, la valeur retenue sur Informations pratiques :
   em-plan a des traits plus fins que le motif qu'il remplace, il demande un
   peu plus de présence pour se voir. Le calque reste en z-index 0, sous les
   cartes (elles sont en z-index 2) : rien ne devient moins lisible. */
.page-template-template-home .fp-activites::before,
.page-template-template-home .fp-kap::before {
  content: '';
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  background: url('../img/em-plan.svg') center center / cover no-repeat;
  opacity: .16;
  transform: scale(1.12);
}
/* DÉRIVE PLUS MARQUÉE (Marino, 10.09.2026 : « anime un peu plus sur accueil le
   fond plan »). Trois changements par rapport à la première version : la course
   passe de 3 à 6 % de la largeur du calque, elle prend une composante verticale
   pour ne plus ressembler à un simple glissement latéral, et le cycle descend
   de 26 à 20 secondes.

   La course reste très en deçà de ce que le débordement autorise : le calque
   déborde de 14 % de chaque côté, puis le zoom de 1,12 porte ce débordement à
   près de 22 %. Un déplacement de 6 % ne peut donc jamais découvrir un bord,
   et la section est de toute façon en overflow: hidden. */
@media (prefers-reduced-motion: no-preference) {
  .page-template-template-home .fp-activites::before,
  .page-template-template-home .fp-kap::before {
    animation: fp-home-motif-derive 20s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes fp-home-motif-derive {
  from { transform: scale(1.12) translate(-6%, -1.5%); }
  to   { transform: scale(1.12) translate(6%, 1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-activites::before,
  .page-template-template-home .fp-kap::before { animation: none; will-change: auto; }
}
/* Mobile : opacite réduite pour allegement visuel. La dérive, elle, continue :
   c'est un transform, la carte graphique s'en charge, et Informations pratiques
   fait déjà tourner la sienne sur mobile sans que cela coûte quoi que ce soit. */
@media (max-width: 768px) {
  .page-template-template-home .fp-activites::before,
  .page-template-template-home .fp-kap::before { opacity: .13; }
}
/* Le contenu de la section Magic Kids repasse au-dessus du calque. La section
   des activités le fait déjà plus bas pour son .fp-wrap et sa grille de cartes,
   celle-ci n'avait jamais eu de calque de fond à contourner. */
.page-template-template-home .fp-kap > .fp-wrap { position: relative; z-index: 1; }
.page-template-template-home .fp-kap .fp-bowling-strip { z-index: 1; }

/* Pattes animees remplacees par le motif de fond : masquage. */
.page-template-template-home .fp-activites .fp-paws { display: none; }

/* Regles de pattes conservees pour les contextes hors-accueil (non-home). */
.fp-paws { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fp-paw { position: absolute; width: 88px; opacity: .12; animation: fp-paw-float 7s ease-in-out infinite; }
.fp-paw img { width: 100%; height: auto; filter: brightness(0) invert(1); }
.fp-paw-1 { top: 6%; left: 4%; animation-delay: 0s; }
.fp-paw-2 { top: 18%; right: 8%; width: 64px; animation-delay: .8s; }
.fp-paw-3 { top: 48%; left: 10%; width: 56px; animation-delay: 1.6s; }
.fp-paw-4 { bottom: 12%; right: 6%; animation-delay: 2.4s; }
.fp-paw-5 { bottom: 6%; left: 30%; width: 72px; animation-delay: 3.2s; }
.fp-paw-6 { top: 30%; right: 28%; width: 48px; animation-delay: 1.2s; }
.fp-paw-7 { top: 70%; right: 18%; width: 60px; animation-delay: 2s; }
.fp-paw-8 { top: 60%; left: 44%; width: 44px; animation-delay: .4s; }
@keyframes fp-paw-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) { .fp-paw { animation: none; } }

/* En-tete, grille de cartes signature et bouton au-dessus du motif de fond. */
.page-template-template-home .fp-activites .fp-wrap { position: relative; z-index: 2; }
/* Rythme horizontal mesure RParc : ~25px (main.css etait a 24px, ecart mineur). */
/* Listing ELARGI (demande client) : la grille ne retrecit plus a 82% du wrap
   local de section (1400px, trop etroit au rendu final ~1148px). Elle est
   desormais calee sur la MEME largeur que le hero et le carrousel d'offres
   (--fp-wrap GLOBAL de main.css, min(1300px, 90vw)), independamment du wrap
   local elargi de .fp-activites qui reste utile au motif de fond. Le gap
   entre cartes est inchange (22px) ; la grille reste en 4 colonnes fixes
   (repeat(4,1fr), main.css -> 2 sous 1000px -> 1 sous 520px), donc chaque
   carte grandit proportionnellement avec l'enveloppe (~+13%), sans devenir
   demesuree. */
/* row-gap agrandi (34px) SANS toucher le column-gap calibre (22px, rythme
   horizontal RParc) : marge de securite verticale supplementaire pour le
   survol releve (translateY -8px), qui ne doit jamais chevaucher la rangee
   du dessous (cf. correctif .fp-actcard:hover ci-dessous). */
.page-template-template-home .fp-activites .fp-actcard-grid { position: relative; z-index: 2; gap: 22px; row-gap: 34px; max-width: min(1300px, 90vw); margin-left: auto; margin-right: auto; }
.page-template-template-home .fp-activites-more { margin-top: 40px; text-align: center; }

/* Cartes signature (.fp-actcard) : effet « languette » demande par le client -
   une pilule blanc casse CHEVAUCHE le bas de l'image (fond cream, bordure
   pointillee blanche, tres arrondie), le nom de l'activité s'affiche dessus
   en display majuscules. Hover-carte signature CONSERVE (valide client) :
   lift + legere rotation + ombre dure decalee ; la section a un fond primary,
   l'ombre reste en secondary-dark pour un contraste net sur ce fond.
   Note PHP : le markup fp_render_signature_cards() (.fp-actcard-grid >
   .fp-actcard > .fp-actcard-media[>img] + .fp-actcard-label) supporte deja
   cet effet integralement en CSS pur, aucun changement de markup requis. */
.page-template-template-home .fp-actcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 0;
  background: var(--fp-cream);
  border: 1px solid var(--fp-primary);
  border-radius: 24px;
  box-shadow: none;
  transform-origin: center;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
/* CORRECTIF (retour client : « l'effet de survol descend un peu trop, ca
   passe par-dessus les éléments de la ligne du dessous ») : l'ombre dure ETAIT
   decalee vers le BAS-droite (8px 8px) et le halo doux etait lui aussi
   decale vers le bas (offset 18px, flou 30px) -> combines a la rotation, ils
   debordaient sous la carte relevee et chevauchaient la rangee suivante,
   d'autant plus visible que la carte survolee passe en z-index:3 (au-dessus
   de tout). Les DEUX ombres sont desormais reorientees dans le MEME sens que
   le lift (vers le HAUT-droite, comme translateY(-8px)) : elles accompagnent
   la carte qui se souleve au lieu de rester ancrees vers le bas, l'effet
   reste vivant (ombre dure decalee + halo) sans jamais deborder sur la ligne
   du dessous. */
/* Survol attenue (demande client : il descendait encore un peu trop bas). Meme
   principe conserve (souleve + leger devers + ombre dure), amplitudes reduites :
   c'est surtout la ROTATION qui faisait plonger un coin sous la carte voisine,
   elle passe de 2 a 1.2 degre, et l'ombre dure de 8 a 6px. */
/* Survol encore attenue (2e passe) : la rotation faisait toujours plonger un
   coin sous la rangee suivante. Elle tombe a 0.6 degre et l'ombre dure a 4px,
   le souleve etant conserve pour garder l'effet vivant. */
/* Survol attenue (3e passe, demande client : « garde tous les effets, mais
   le deplacement vertical doit etre tres leger ») : SEULE l'amplitude du
   mouvement bouge - le souleve passe de 8 a 3px et la rotation de 0.6 a
   0.25 degre. Les deux ombres sont recalees sur cette nouvelle amplitude
   (elles accompagnent le lift, cf. commentaire ci-dessus) pour rester
   coherentes ; registre visuel, couleurs et z-index inchanges. */
/* CAUSE REELLE DU DEBORDEMENT (4e passe, mesuree avec Playwright, pas de
   nouvelle reduction cosmetique) : ce n'etait PAS l'amplitude ci-dessus qui
   descendait. La règle d'entree en scene ( .fp-activites .fp-actcard.fp-reveal
   plus bas, transform: translateY(36px) scale(.94) rotate(-4deg) ) a QUATRE
   classes dans son selecteur contre TROIS ici : sa spécificité est donc
   SUPERIEURE et elle gagnait la cascade des que la souris entrait, sauf
   pendant le court instant couvert par « .fp-reveal.is-in:not(:hover) », qui
   cesse justement de s'appliquer en survol. Resultat mesure : la carte
   survolee ne se soulevait pas de 3px, elle DESCENDAIT d'environ 35px tout en
   retrecissant a 94% et en tournant de 4 degres, ce qui la faisait plonger
   dans la rangee du dessous. Le selecteur est complete avec .fp-activites et
   .fp-reveal (deja presents sur chaque carte) pour porter sa specificite a
   CINQ classes, superieure a la règle d'entree en toute circonstance. */
.page-template-template-home .fp-activites .fp-actcard.fp-reveal:hover {
  transform: translateY(-3px) rotate(-.25deg);
  box-shadow: 3px -3px 0 0 var(--fp-secondary-dark), 0 -4px 14px -12px color-mix(in srgb, var(--fp-dark) 45%, transparent);
  position: relative;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-activites .fp-actcard.fp-reveal:hover { transform: none; box-shadow: none; }
}
/* Entree en scene PLUS TRAVAILLEE (demande client) : la carte arrive en
   fondu avec un leger repli (translateY + scale + rotation), en vague
   DIAGONALE (delai calcule en PHP, fp_render_signature_cards). La
   « colonisation » du survol (:hover) est preservee via :not(:hover), mais
   ATTENTION : ce n'est PAS suffisant a soi seul. Cette règle porte QUATRE
   classes dans son selecteur ; tant que la règle de survol ci-dessus en
   portait TROIS, sa spécificité plus faible la faisait perdre la cascade des
   que la souris entrait (le :not(:hover) cessant justement de s'appliquer a
   ce moment-la) : la carte retombait sur CE transform d'entree au lieu de se
   soulever. La règle de survol a donc ete portee a CINQ classes pour rester
   strictement prioritaire en toute circonstance, peu importe l'ordre des
   règles dans la feuille. */
.page-template-template-home .fp-activites .fp-actcard.fp-reveal {
  opacity: 0;
  transform: translateY(36px) scale(.94) rotate(-4deg);
}
/* CORRECTIF (carte qui disparaissait au survol) : l'opacite ne doit JAMAIS
   dependre de :hover. Elle etait auparavant portee par une règle
   « .is-in:not(:hover) » : des que la souris entrait sur la carte, la règle
   cessait de s'appliquer et la carte retombait sur opacity:0, donc
   s'effacait. On separe donc les deux responsabilites : l'opacite est
   pilotee par .is-in seul, et seul le transform garde :not(:hover) pour
   laisser la main a la règle de survol. */
.page-template-template-home .fp-activites .fp-actcard.fp-reveal.is-in {
  opacity: 1;
}
.page-template-template-home .fp-activites .fp-actcard.fp-reveal.is-in:not(:hover) {
  transform: none;
}
/* Le delai d'apparition ne doit pas non plus retarder le survol : il est
   remis a zero des que la carte est en place (et sur :hover). */
.page-template-template-home .fp-activites .fp-actcard.fp-reveal.is-in:hover {
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-activites .fp-actcard.fp-reveal,
  .page-template-template-home .fp-activites .fp-actcard.fp-reveal.is-in,
  .page-template-template-home .fp-activites .fp-actcard.fp-reveal.is-in:not(:hover) {
    opacity: 1;
    transform: none;
  }
}
/* Image : bordure blanche, radius 20, wrapper qui clippe le zoom au survol.
   position:relative : repere pour le fond topo (inset:0), le ruban Bientot
   (absolute) et le voile brillant ci-dessous ; overflow:hidden les clippe
   déjà dans les bords arrondis. */
.page-template-template-home .fp-actcard-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--fp-white);
  border-radius: 20px;
  overflow: hidden;
}
.page-template-template-home .fp-actcard-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: none;
  transition: transform .5s ease;
}
.page-template-template-home .fp-actcard:hover .fp-actcard-media img {
  transform: scale(1.08);
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-actcard:hover .fp-actcard-media img { transform: none; }
}
.page-template-template-home .fp-actcard-media::after {
  content: none;
}
/* Voile brillant (demande client : « hover plus riche ») : un reflet diagonal
   balaie l'image au survol, comme un effet de lumiere. Purement decoratif
   (aria-hidden via le parent), n'affecte jamais le texte (au-dessus, cf.
   .fp-actcard-ribbon/.fp-actcard-label deja a z-index >= 1). */
.page-template-template-home .fp-actcard-media::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%);
  transition: transform .7s ease;
  pointer-events: none;
}
.page-template-template-home .fp-actcard:hover .fp-actcard-media::before {
  transform: translateX(130%);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-actcard-media::before { display: none; }
}
/* Repli fond « em-topo » (activité sans image, ni sur la page ni dans le
   catalogue) : aplat teal + motif topographique en LEGER overlay (::after a
   20% d'opacite), JAMAIS d'icone/mascotte isolee. Remplit .fp-actcard-media
   (position:relative ci-dessus). */
.page-template-template-home .fp-actcard-topo {
  position: absolute;
  inset: 0;
  background-color: var(--fp-primary);
}
.page-template-template-home .fp-actcard-topo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Motif topographique local du thème, même fichier que la page Événements
     (assets/img/em-topo-traits.svg) : plus de dépendance à un domaine tiers. */
  background-image: url('../img/em-topo-traits.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .2;
}
/* Pastille "Bientot" (activité verrouillée publiquement) : pilule blanche en
   coin haut-droit de la carte, lisible sur image comme sur fond topo.
   Rattachee a .fp-actcard-media (position:relative, overflow:hidden) donc
   reste dans le cadre arrondi de la carte. */
.page-template-template-home .fp-actcard-ribbon {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 14px;
  border-radius: var(--fp-pill);
  background: var(--fp-white);
  color: var(--fp-primary);
  font-family: var(--fp-font-heading);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Languette : pilule fond cream, bordure pointillee blanche, remonte de 25px
   sur le bas de l'image et deborde legerement dessous (25px/30px negatifs). */
.page-template-template-home .fp-actcard-label {
  position: relative;
  left: 0;
  bottom: auto;
  transform: none;
  z-index: 1;
  display: block;
  align-self: center;
  width: fit-content;
  max-width: calc(100% - 20px);
  margin: -22px 0 -26px;
  padding: 4px 24px;
  background: var(--fp-cream);
  border: 1px dotted var(--fp-white);
  border-radius: 50px;
  box-shadow: none;
  white-space: normal;
  font-family: var(--fp-font-display);
  font-weight: 400;
  font-size: 2.2em;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--fp-primary);
  text-align: center;
  transition: background .3s ease, border-color .3s ease;
}
/* Meilleure hierarchie au survol (demande client) : la languette blanchit et
   sa bordure pointillee vire a l'accent, en echo au reflet de l'image. */
.page-template-template-home .fp-actcard:hover .fp-actcard-label {
  background: var(--fp-white);
  border-color: var(--fp-accent);
}
@media (max-width: 640px) {
  .page-template-template-home .fp-actcard-label { font-size: 40px; padding: 5px 20px; }
}

/* Titre de la section activités : Bebas tres grand, blanc, facon RParc.
   Max-width retire (au lieu des 24ch heritees du composant générique) :
   le titre tient sur une ligne a taille RP au lieu de retomber a la ligne. */
.page-template-template-home .fp-activites .fp-lead-light {
  font-family: var(--fp-font-heading);
  font-weight: 700;
  color: var(--fp-white);
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  max-width: none;
}
/* Pilule badge -> titre : ecart genereux mesure RParc (~28px, au lieu de 0
   herite du flex column sans gap). */
.page-template-template-home .fp-activites .fp-section-eyebrow {
  margin-bottom: 28px;
}
/* Titre -> texte support : ecart resserre mesure RParc (~12px, au lieu de
   20px). Le composant generique .fp-section-sub est a 10px globalement,
   surcharge locale pour la section activités, sans impact sur les autres
   pages. NB : .fp-ravito .fp-section-sub est redefini plus bas (nouvel
   en-tete 2 colonnes de la section restauration, margin:0). */
.page-template-template-home .fp-activites .fp-section-sub {
  margin-top: 12px;
}

/* CENTRAGE COMPLET SUR TÉLÉPHONE (retour client du 2026-08-16 : « section
   activités, tout centrer sur mobile, icon-box comprise »). L'en-tête est déjà
   centré par le composant partagé .fp-section-head-center, mais rien ne le
   garantissait à ce niveau de portée : la moindre règle de placement ajoutée
   plus tard pour l'écran large (c'est exactement ce qui est arrivé à la section
   restauration, dont le sur-titre restait calé à gauche en mobile) suffisait à
   décrocher un élément. On pose donc le centrage explicitement, sur chaque
   pièce de l'en-tête et sur le bouton. */
@media (max-width: 720px) {
  .page-template-template-home .fp-activites .fp-section-head-center {
    text-align: center;
    align-items: center;
    justify-items: center;
  }
  .page-template-template-home .fp-activites .fp-section-eyebrow {
    align-self: center;
    justify-self: center;
  }
  .page-template-template-home .fp-activites .fp-lead-light,
  .page-template-template-home .fp-activites .fp-section-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .page-template-template-home .fp-activites-more { text-align: center; }
}

/* ÉTAT D'ATTENTE du bouton « Voir toutes les activités » pendant le chargement
   AJAX du reste de la grille (main.js, setupActivitesPlus). Aucun texte
   supplémentaire à l'écran : l'annonce part dans une région polie réservée aux
   lecteurs d'écran, et l'usager voyant lit l'attente dans l'état du bouton. */
.fp-activites-more.is-chargement { cursor: progress; }
.fp-activites-more.is-chargement .fp-btn {
  opacity: .62;
  pointer-events: none;
}

/* Animation « bowling » signature : la boule (a gauche) roule vers la quille (a
   droite) et la renverse au scroll. Le mouvement est porte par GSAP/ScrollTrigger
   (main.js, cible les ids #rolling-bowl/#quille-rp, insensible au conteneur) ;
   ici on pose juste les positions au repos.
   Conteneur POSE AU RAS DU BORD BAS de la section activités (position absolute
   bottom:0, pleine largeur, PAR RAPPORT A .fp-activites qui a déjà
   position:relative plus haut) : passe SOUS le padding-bottom de 120px de la
   section, aucun padding propre qui les decollerait du bord. Tailles reduites
   (fiche) : boule et quille 80px desktop, 60px mobile, alignees en bas
   (flex-end) aux deux extremites (space-between), leger retrait a droite
   (padding-right 20px) pour ne pas coller la quille au bord de viewport. */
.fp-bowling-strip {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* Padding droit plus large : decale la quille un peu vers la gauche (demande). */
  padding-right: 80px;
  pointer-events: none;
}
.fp-bowling-strip .fp-bowling-ball { width: 80px; height: auto; }
/* Quille réduite (demande client : divisee par ~1.75, la boule reste
   inchangee) : 320px -> 183px desktop. */
/* Quille agrandie (demande client) : le SVG officiel est tres elance (ratio
   0.31), a 183px de haut il ne faisait que ~57px de large, ce qui la rendait
   maigre face a la boule de 80px. 183 -> 225px (~70px de large). */
.fp-bowling-strip .fp-bowling-pin { width: auto; height: 225px; }
/* Mobile : reduction proportionnelle (200px -> 114px, même facteur ~1.75). */
@media (max-width: 720px) {
  .fp-bowling-strip .fp-bowling-ball { width: 60px; }
  .fp-bowling-strip .fp-bowling-pin { height: 140px; }
  .fp-bowling-strip { padding-right: 40px; }
}

/* Badge decoratif « orbit » (boule de bowling en rond pointille) : RETIRE a la
   demande du client. Markup, script de parallaxe et styles supprimes. */

/* ==========================================================================
   5bis. APERÇU MAGIC KIDS : grand encart CTA posé juste sous la grille
   d'activités, DANS LE PROLONGEMENT de la même bande teal (même classe
   .fp-s-primary que .fp-activites juste au-dessus, section 5 ci-dessus) :
   aucune bordure ni changement de fond entre les deux sections, la bande se
   lit comme UNE SEULE zone continue (demande client 2026-08-12 : « un big
   encart type CTA dans la section des activités »). padding-top ramené à 0
   (au lieu du padding-y standard de .fp-s-primary) pour rester « juste sous »
   la grille, qui a déjà son propre padding-bottom généreux (120px, section 5).

   MAQUETTE CLIENTE (2026-08-12, second passage, fixup 109) : la carte
   (.fp-kap-carte) devient BLANCHE (au lieu du fond --fp-secondary + filigrane
   em-plan d'origine, retirés), posée SUR le fond teal de la section, coins
   arrondis généreux (--fp-radius-lg), ombre douce teal (--fp-shadow-lg,
   même token que l'ancienne carte). Deux colonnes en grille :
   - .fp-kap-col-texte (gauche) : pilule de sur-titre à contour teal
     (fp_icon_box variante 'contour'), titre en encre --fp-secondary, accroche
     en encre --fp-ink normale, rangée de pilules d'activités (.fp-kap-chips),
     bouton primaire sombre du thème (fp_btn variante 'primary').
   - .fp-kap-visuel (droite) : emplacement d'image dédié. Sans photo déposée,
     filigrane dessiné en CSS (état .is-vide sur .fp-kap-col-image, même
     recette que .fp-ip-panneau-photo.is-vide, inc/informations.php /
     assets/css/informations.css).

   CONTRASTES AA MESURÉS :
   - Titre --fp-secondary sur carte blanche (--fp-paper)   : 9,91:1.
   - Accroche/chips --fp-ink sur carte blanche              : > 15:1.
   - Bouton blanc sur --fp-primary (.fp-btn-primary)        : 4,85:1 (AA texte courant).
   - Pilule de sur-titre (.fp-ibox--contour, texte --fp-primary sur blanc) :
     même recette déjà en usage ailleurs sur le site.

   FINITIONS CLIENTE (2026-08-12, troisième passage, fixup 110), après dépôt
   d'une vraie photo dans l'emplacement dédié : « bordure verte de la photo,
   border radius photo + bordure, effet haut-bas qui bouge, ajout d'une 2e
   image qui va lui passer légèrement dessus dans un coin ».
   - .fp-kap-col-image : bordure pleine --fp-primary (teal du parc, 5px,
     discrète), border-radius --fp-radius qui ÉPOUSE la bordure nativement
     (border + border-radius sur le MÊME élément, aucun calcul nécessaire).
     object-fit PASSE DE contain À cover (une vraie photo rectangulaire est
     désormais déposée, le cadre bordé doit être rempli bord à bord ; l'ancien
     repli « fond transparent, jamais recadrée » ne s'appliquait qu'à une
     mascotte détourée).
   - .fp-kap-visuel (le NOUVEAU parent, remplace .fp-kap-col-image comme
     cellule de grille) porte SEUL le flottement (@keyframes fp-kap-flotte,
     amplitude et durée calquées sur .fp-r-flotte, assets/css/restauration.css :
     -6px, 6.4s ease-in-out infinite). Animer cet ANCÊTRE plutôt que le cadre
     arrondi lui-même évite la couture sous-pixel documentée sur .fp-rlieu-photo
     (même fichier). Coupé net sous prefers-reduced-motion.

   RETRAIT AU RENDU DU 2026-09-03 (demande cliente, cf. inc/kids-apercu.php) :
   la grande image (ex .fp-kap-col-image alimentée par fp-zone-portrait)
   n'est plus rendue. C'est désormais la PETITE image (fp-zone-macaron) qui
   est injectée dans .fp-kap-col-image, à la place et à la taille de
   l'ancienne grande image (colonne et cadre bordé légèrement agrandis
   ci-dessous), et qui hérite donc du flottement de .fp-kap-visuel comme
   avant elle. L'ancien badge séparé .fp-kap-macaron (petit cadre qui mordait
   sur le coin bas-gauche de la grande photo) n'a donc plus lieu d'être : ses
   règles CSS sont retirées, il n'existe plus qu'une seule image dans cette
   colonne. Le bloc de la grande image reste intact en base (RÈGLE CAPITALE),
   simplement plus lu par le rendu.
   ========================================================================== */
.page-template-template-home .fp-kap {
  /* La section accueille désormais la bande de bowling à son bord bas
     (retour client du 2026-08-12 : la boule doit rester collée au fond de la
     section visuelle activités + encart) : position relative pour ancrer la
     bande absolue, overflow hidden comme la section activités (le roulé de
     la boule ne déborde jamais), et un padding bas explicite qui réserve la
     place de la boule (80px) sous la carte, même recette que le 120px de la
     grille. */
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 140px;
}
@media (max-width: 720px) {
  /* PLACE RENDUE À L'ANIMATION DU BOWLING (retour client du 2026-08-16 : « la
     boule passe derrière le CTA Magic Kids, on ne voit pas l'animation »).
     La bande de bowling est posée au ras du bord bas de CETTE section
     (position: absolute, bottom: 0) : elle vit donc entièrement dans le padding
     bas. Or ce padding valait 110px alors que la quille en mesure 140 à cette
     largeur : la quille remontait mécaniquement derrière la carte blanche, qui
     est opaque, et la course de la boule se jouait à l'abri des regards.
     On ouvre la bande à 220px, soit la quille (140px) plus une vraie marge :
     boule et quille se lisent entièrement, sous la carte et non plus derrière.
     LA BOULE GARDE SA TAILLE (60px, réglée plus haut) : c'est bien la section
     qui s'ouvre, jamais l'animation qui rétrécit. */
  .page-template-template-home .fp-kap { padding-bottom: 220px; }
}
.page-template-template-home .fp-kap-carte {
  position: relative;
  display: grid;
  /* Colonne image : troisième dosage (retours client du 2026-08-12 : « trop
     carré » puis « elle est immense ») : la largeur revient à 400px et c'est
     le CADRE en 4/3 centré (plus bas) qui donne le format paysage compact,
     au lieu d'un étirement sur toute la hauteur de la carte. RETRAIT DE LA
     GRANDE IMAGE (2026-09-03) : la petite image occupe désormais seule cette
     colonne, à la place et à la taille de l'ancienne grande image, un peu
     agrandie (400px -> 440px) puisqu'elle n'a plus à composer avec un
     second visuel qui la chevauchait. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(32px, 4.5vw, 52px) clamp(28px, 5vw, 60px);
  border-radius: var(--fp-radius-lg);
  background-color: var(--fp-paper);
  box-shadow: var(--fp-shadow-lg);
}
.page-template-template-home .fp-kap-col-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.page-template-template-home .fp-kap-titre {
  margin: 0;
  color: var(--fp-secondary);
  font-family: var(--fp-font-heading);
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}
.page-template-template-home .fp-kap-lead {
  margin: 0;
  max-width: 46ch;
  color: var(--fp-ink);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
}
/* Rangée de pilules d'activités (fixup 109) : chips à contour léger, encre
   normale, sur la carte blanche. */
.page-template-template-home .fp-kap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.page-template-template-home .fp-kap-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fp-paper);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-pill);
  padding: 8px 16px 8px 12px;
  color: var(--fp-ink);
  font-size: .92rem;
  line-height: 1.2;
}
/* Icône de l'activité dans la pilule (Marino, 10.09.2026), résolue en PHP
   depuis le catalogue (inc/kids-apercu.php). */
.page-template-template-home .fp-kap-chip-ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--fp-primary);
  flex: 0 0 auto;
}
.page-template-template-home .fp-kap-chip-ico svg { width: 100%; height: 100%; }
.page-template-template-home .fp-kap-actions { margin-top: 4px; }

/* --- Colonne visuelle (fixup 109 + finitions fixup 110) ------------------ */

/* Cellule de grille : occupe toute la hauteur de la carte, porte SEULE le
   flottement (voir @keyframes fp-kap-flotte plus bas). Pas de border-radius
   ni d'overflow ici : c'est .fp-kap-col-image, enfant STATIQUE, qui les porte
   (cf. note « couture sous-pixel » de l'en-tête de section). */
.page-template-template-home .fp-kap-visuel {
  position: relative;
  /* Cadre paysage COMPACT (retour client : « elle est immense ») : ratio 4/3
     centré dans la colonne, plus aucun étirement sur toute la hauteur de la
     carte. */
  align-self: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  animation: fp-kap-flotte 6.4s ease-in-out infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes fp-kap-flotte {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50%      { transform: translateY(-6px) translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-kap-visuel { animation: none; will-change: auto; }
}

/* Cadre de la photo principale : bordure pleine teal (5px, discrète),
   border-radius qui ÉPOUSE nativement la bordure (même élément, le
   navigateur calcule seul le rayon intérieur). object-fit: cover, une vraie
   photo est déposée (fixup 110) : le cadre bordé doit être rempli bord à
   bord, sans laisser deviner le fond derrière. */
.page-template-template-home .fp-kap-col-image {
  position: absolute;
  inset: 0;
  border: 5px solid var(--fp-primary);
  border-radius: var(--fp-radius);
  overflow: hidden;
}
.page-template-template-home .fp-kap-col-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* DEUX IMAGES (Marino, 10.09.2026) : la grande occupe le cadre SANS bordure,
   la petite se pose devant, en bas à gauche, cerclée de blanc, et déborde un
   peu du cadre : la composition d'origine du modèle, remise en place. */
.page-template-template-home .fp-kap-visuel.has-deux-images .fp-kap-col-image--grande {
  border: 0;
}
.page-template-template-home .fp-kap-visuel.has-deux-images .fp-kap-col-image--petite {
  inset: auto auto -8% -8%;
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 5px solid var(--fp-white);
  box-shadow: var(--fp-shadow-lg);
  z-index: 1;
}
@media (max-width: 900px) {
  .page-template-template-home .fp-kap-visuel.has-deux-images .fp-kap-col-image--petite { inset: auto auto -6% 4%; width: 42%; }
}
/* DEUX IMAGES EN 40 / 60 SUR TÉLÉPHONE (Marino, 2026-09-10, passe mobile :
   « les rapprocher en taille, la grande un peu plus petite, la petite un peu
   plus grande, du 40 / 60, une calée à gauche, l'autre à droite, elles se
   chevauchent encore »). La grande occupait toute la largeur avec la petite
   posée dessus en bas à gauche à 42 % : un rapport de 100 / 42 et deux images
   empilées sur le même bord. La grande passe à 62 % et reste calée à gauche,
   la petite à 44 % se cale à droite, à partir du tiers inférieur de la grande,
   et déborde un peu sous elle ; la marge basse du bloc absorbe ce débord pour
   que le bouton ou le bord de la carte ne soient pas touchés. Sans seconde
   image (pas de has-deux-images), rien ne change : la seule image garde toute
   la largeur. */
@media (max-width: 720px) {
  .page-template-template-home .fp-kap-visuel.has-deux-images { margin-bottom: 8%; }
  /* LA GRANDE IMAGE GARDE SON PROPRE RAPPORT (Marino, 2026-09-10 au soir :
     « l'image la plus grande de la section Magic Kids est trop haute
     verticalement, respecte son ratio »). Le cadre .fp-kap-visuel impose un
     4/3 sur TOUTE la largeur, et la photo, posée en inset: 0, remplissait
     cette hauteur entière sur 62 % de large seulement : une boîte nettement
     plus haute que large, dans laquelle object-fit: cover recadrait la photo
     de force. On l'ancre donc en haut à gauche et on lui rend sa hauteur
     naturelle : c'est l'image qui dicte, plus le cadre. La place laissée en
     bas est justement celle qu'occupe la petite. */
  .page-template-template-home .fp-kap-visuel.has-deux-images .fp-kap-col-image--grande {
    inset: 0 auto auto 0;
    width: 62%;
    height: auto;
  }
  .page-template-template-home .fp-kap-visuel.has-deux-images .fp-kap-col-image--grande img {
    height: auto;
    object-fit: contain;
  }
  .page-template-template-home .fp-kap-visuel.has-deux-images .fp-kap-col-image--petite {
    inset: 38% -2% auto auto;
    width: 44%;
  }
}
/* Sans photo déposée, un filigrane dessiné en CSS (même recette que
   .fp-ip-panneau-photo.is-vide, inc/informations.php) : jamais une image
   cassée. */
.page-template-template-home .fp-kap-col-image.is-vide {
  background-color: color-mix(in srgb, var(--fp-accent) 14%, var(--fp-cream));
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--fp-primary) 10%, transparent) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--fp-primary) 10%, transparent) 0 1px, transparent 1px 34px);
}

/* L'ancien badge .fp-kap-macaron (petit cadre sibling qui mordait sur le
   coin bas-gauche de la grande photo) est RETIRÉ (2026-09-03) : cette même
   petite image est désormais injectée directement dans .fp-kap-col-image
   ci-dessus, seule image de la colonne. Voir la note en tête de section. */

@media (max-width: 980px) {
  .page-template-template-home .fp-kap-carte { grid-template-columns: minmax(0, 1fr) minmax(0, 385px); }
  .page-template-template-home .fp-kap-visuel { min-height: 200px; }
}
@media (max-width: 720px) {
  /* STRUCTURE MOBILE REPRISE (retour client du 2026-08-16 : « pas fan de la
     carte Magic Kids sur téléphone »). Trois défauts traités d'un coup, sans
     toucher ni aux contenus ni à l'ordre des blocs en base.

     a) LA CARTE PREND TOUTE LA LARGEUR DISPONIBLE, comme une bande. La
        gouttière de section tombe de 20 à 10px pour CETTE section seulement
        (le rythme des autres sections n'est pas concerné), et la marge interne
        de la carte se resserre à 22px : la carte gagne près de 40px de large
        et son texte respire enfin de chaque côté au lieu de coller au bord.
     b) TEXTE CENTRÉ, avec une vraie marge interne gauche et droite. La colonne
        de texte était calée à gauche (align-items: flex-start), ce qui, sur
        une pile étroite, laissait un bord irrégulier peu soigné.
     c) PLUS AUCUN DÉBORDEMENT POSSIBLE. La colonne unique était déclarée en
        « 1fr », dont le minimum implicite est le contenu minimum : un mot long
        (« Autos tamponneuses », « Trampoline interactif ») pouvait pousser la
        piste au-delà de la carte, et le texte sortait de la zone. minmax(0,1fr)
        rend ce débordement structurellement impossible, et overflow-wrap prend
        le relais pour le cas d'un mot plus large que la carte entière. */
  /* CARTE ENCORE ÉLARGIE (retour client du 2026-08-17 : « la carte Magic Kids
     doit être plus large sur téléphone »). Deux gains cumulés, toujours sans
     jamais coller le texte au bord : la gouttière de section passe de 10 à 6px
     et la marge interne de la carte de 22 à 18px, soit 16px de contenu utile
     de plus. Marge basse REVENUE À 28px (symétrique du haut) depuis le
     2026-09-03 : elle n'a plus à accueillir la descente d'une seconde image
     qui chevauchait la première, cf. le retrait de .fp-kap-macaron. */
  .page-template-template-home .fp-kap .fp-wrap { padding-left: 6px; padding-right: 6px; }
  .page-template-template-home .fp-kap-carte {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 18px;
    gap: 26px;
  }
  .page-template-template-home .fp-kap-col-texte {
    align-items: center;
    text-align: center;
  }
  .page-template-template-home .fp-kap-titre,
  .page-template-template-home .fp-kap-lead {
    overflow-wrap: anywhere;
  }
  .page-template-template-home .fp-kap-lead {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  /* PILULES D'ACTIVITÉS COMPACTÉES (arbitrage client du 2026-08-18, à la suite
     de la review du 2026-08-17 : les puces occupaient quatre lignes sur
     téléphone, on vise trois lignes propres, et non un nombre de lignes imposé).

     POURQUOI ON NE FORCE PAS DEUX LIGNES. Ces pilules viennent de la liste à
     puces de la zone, que la cliente modifie dans Gutenberg
     (fp_zone_list_items, inc/kids-apercu.php) : leur nombre et leur longueur
     changent. Imposer deux lignes demanderait soit des règles nth-child liées
     aux cinq libellés d'aujourd'hui, fausses au premier ajout, soit une coupure
     des mots en plein milieu, interdite sur tout le site. La rangée reste donc
     en retour à la ligne naturel, simplement compactée : à 320 et 360px elle
     tient sur trois lignes, à partir d'environ 390px sur deux, et sur une seule
     dès qu'une tablette approche du palier de 720px.

     RÉGLAGES : corps de 0,92 à 0,78rem, marge interne de 9/18 à 6/12px,
     gouttière de 10 à 6px. Le contraste ne bouge pas (--fp-ink sur la carte
     blanche, au-delà de 15:1) et la pilule garde environ 30px de haut, donc
     une vraie assise ; ce n'est pas une cible tactile, la puce n'est pas un
     élément interactif.

     ANTI-DÉBORDEMENT : la pilule est bornée à la largeur de la carte, et
     overflow-wrap ne sert que de DERNIER RECOURS, pour le seul cas d'un mot
     unique plus large que la pilule entière (exactement la règle déjà posée
     deux crans plus haut sur le titre et l'accroche de cette carte). Aucun
     libellé réaliste ne le déclenche : le plus long d'aujourd'hui,
     « Trampoline interactif », mesure environ 157px pour 272px utiles à 320px
     de fenêtre. */
  .page-template-template-home .fp-kap-chips {
    justify-content: center;
    gap: 6px;
  }
  .page-template-template-home .fp-kap-chip {
    padding: 6px 12px;
    font-size: .78rem;
    line-height: 1.25;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .page-template-template-home .fp-kap-actions { align-self: center; }
  /* IMAGE UNIQUE PLEINE LARGEUR (2026-09-03). L'ancienne réduction à 80 pour
     cent (retour client du 2026-08-17) libérait de la place pour une seconde
     image qui chevauchait la première : cette seconde image a disparu, la
     colonne reprend donc toute la largeur disponible de la carte (hérite du
     width: 100% posé plus haut, hors media query), à la place et à la taille
     de l'ancienne grande image. Le flottement et le cadre bordé ne sont pas
     touchés. */
  .page-template-template-home .fp-kap-visuel { min-height: 200px; }
}
/* Mouvement réduit (texte, bouton, apparition de la carte) : .fp-reveal
   (main.css) neutralise déjà l'entrée en scène de .fp-kap-carte
   (opacity/transform figés). Le flottement du visuel (fixup 110) a sa PROPRE
   règle prefers-reduced-motion juste au-dessus (@keyframes fp-kap-flotte). */

/* ==========================================================================
   6. HORAIRES : section fond BLANC, mascotte en colonne de gauche qui déborde
      en bas, MODULE D'HORAIRES à droite.

      CE QUE CETTE SECTION DE FEUILLE CONTIENT, DEPUIS LE 2026-08-24 : la POSE
      et rien d'autre. Le module lui-même (barre d'onglets des jeux, carte,
      liste des prochains jours, pilules, mention, note) est un COMPOSANT
      PARTAGÉ avec la page Informations pratiques : tout son habillage vit dans
      le bloc « MODULE D'HORAIRES PARTAGÉ » de main.css, scopé
      .fp-horaires-module. Le markup est rendu par fp_render_horaires_module
      (inc/sections.php), la pose de l'accueil ajoute la classe
      .fp-horaires-module--accueil.

      Repli conservé (.fp-horaires-body) : sans l'extension d'horaires, la
      section retombe sur le shortcode ou les paragraphes de la zone.
   ========================================================================== */
/* padding-bottom augmente : un peu de blanc entre la carte horaires et la
   section suivante (demande). overflow visible pour laisser la mascotte
   agrandie deborder proprement. */
.page-template-template-home .fp-horaires { background: var(--fp-white); padding: 60px 0 80px; }

/* Grille principale : mascotte 40% + contenu 58%, espace restant en gouttière
   (~2%), alignement en fin de ligne pour laisser deborder la mascotte. */
.page-template-template-home .fp-horaires-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 32px);
}

/* Colonne mascotte : 40% de largeur, image pleine largeur de colonne qui
   deborde en bas de section (marges negatives). */
/* Mascotte tennis réduite de ~15% (demande client, colonne aside ramenee de
   44% a 37% : methode la plus simple, l'image remplit toujours sa colonne a
   100% donc l'alignement et le debordement bas restent inchanges). Laisse
   toujours assez de place a la colonne horaires : le titre « Horaires
   d'ouverture du centre » tient sur une seule ligne. */
.page-template-template-home .fp-horaires-aside {
  flex: 0 0 37%;
  max-width: 37%;
  margin: 20px 0 -64px;
}
.page-template-template-home .fp-horaires-mascotte { max-width: 100%; width: 100%; }
/* Surcharge le plafond global .fp-mascotte-figure img { max-width: 220px } de
   main.css : ici la mascotte doit etre GRANDE et remplir sa colonne (demande). */
.page-template-template-home .fp-horaires-mascotte img { width: 100%; max-width: 100%; height: auto; display: block; }

/* Colonne contenu : min-width 0 pour eviter que la carte deborde la grille. */
.page-template-template-home .fp-horaires-main { flex: 1 1 56%; min-width: 0; }

/* Titre : Bebas sombre CENTRE (~3.3rem) + accroche Aeonik centree.
   Max-width retire (au lieu des 22ch heritees du composant générique) :
   le titre tient sur une ligne a taille RP au lieu de retomber a la ligne. */
.page-template-template-home .fp-horaires-main .fp-lead {
  color: var(--fp-ink);
  text-align: center;
  font-family: var(--fp-font-heading);
  font-weight: 600;
  /* Un peu plus grand (demande client). */
  font-size: clamp(2.5rem, 3.4vw, 3.5rem);
  line-height: 1.15;
  max-width: none;
  /* PLUS DE white-space: nowrap (revue client du 2026-08-24, texte long qui sort
     du cadre par la droite sur ordinateur alors qu'il se replie correctement sur
     téléphone).

     DIAGNOSTIC, mesuré au banc (rendu PHP réel, feuilles réelles, Chromium et
     WebKit). Balayage de TOUTE la section : le seul élément dont le contenu
     dépasse sa propre boîte est ce titre, et il ne dépasse QUE sur ordinateur.
     Avec un titre rallongé, scrollWidth moins clientWidth valait 532 px à
     1280 px de large et 588 px à 1440 px, contre 0 à 700 px et à 390 px. La
     cause est exactement ce couple : le titre était en white-space: nowrap, donc
     insécable, avec max-width: none, donc sans plafond ; la colonne, elle, porte
     min-width: 0 et ne s'élargit pas. Le texte n'avait donc aucun point de
     coupure et sortait par la droite. Sous 860 px, une reprise le repassait en
     white-space: normal : d'où un mobile parfaitement replié, et c'est cet écart
     exact que décrit la cliente.

     CORRECTION À LA RACINE : le repli redevient le comportement par défaut, à
     toutes les largeurs. Le nowrap avait été posé quand le composant générique
     imposait encore max-width: 22ch, ce qui coupait le titre beaucoup trop tôt ;
     ce plafond est retiré juste au-dessus (max-width: none), le nowrap n'avait
     donc plus de raison d'être. Un titre qui tient dans la colonne reste sur une
     seule ligne, exactement comme avant (vérifié au banc à 1440, 1280, 1100, 980
     et 900 px : une ligne, mêmes bords) ; un titre plus long se replie au lieu de
     déborder. Le texte de la cliente n'est jamais touché : c'est le contenant qui
     accepte désormais n'importe quelle longueur.

     La reprise sous 860 px qui suivait ce bloc est devenue sans objet, elle est
     retirée avec le nowrap. */
}
/* Accroche : classe reelle du markup PHP (fp_render_horaires) est
   .fp-horaires-lead, pas .fp-section-sub (selecteur mort corrige ici). */
.page-template-template-home .fp-horaires-main .fp-horaires-lead {
  text-align: center;
  margin-top: 12px;
}

/* HABILLAGE DU MODULE D'HORAIRES : PLUS ICI (2026-08-24). Onglets des jeux,
   carte, listes, pilules « Aujourd'hui » et jour spécial, mention du prochain
   horaire spécial et note vivent désormais dans le BLOC DE COMPOSANT
   « MODULE D'HORAIRES PARTAGÉ » de main.css, scopé .fp-horaires-module, parce
   que la page Informations pratiques affiche exactement le même module. Cette
   feuille ne garde que la POSE de la section d'accueil (grille à deux colonnes,
   mascotte, titre, accroche, repli sans extension), ci-dessus et ci-dessous.
   Toute retouche d'habillage se fait dans main.css ; une divergence voulue pour
   l'accueil seul se surcharge ici, sous .page-template-template-home
   .fp-horaires-module (cette feuille est chargée après main.css). */

/* GROUPES DE VACANCES PAR CAMPAGNE (Marino, 2026-09-10 : « affiche aussi le
   nom, avec un slider en 2 par 2 pour une période prolongée »). Cette
   nouveauté du composant vit ICI et dans informations.css EN DOUBLE
   (duplication assumée) : main.css, qui porte normalement tout l'habillage
   du module partagé, est hors périmètre de ce chantier, un autre agent y
   travaille. Annule la ligne générique .fp-horaires-prochain-liste li
   (main.css, display: flex, pensée pour une simple ligne jour + heures) pour
   l'enveloppe de groupe, qui empile à la place en-tête, dates et navigation.
   Spécificité volontairement large (3 classes + 1 élément) pour battre à
   coup sûr cette règle du composant, peu importe l'ordre de chargement des
   feuilles. */
.page-template-template-home .fp-horaires-prochain-liste li.fp-horaires-prochain-groupe {
  display: block;
  padding: 4px 0;
}
/* NOËL S'AFFICHAIT MALGRÉ LE PLAFOND (Marino, 10.09.2026). La règle juste
   au-dessus pose display: block avec trois classes et un élément : elle
   battait l'attribut hidden que traiterFuturs() pose sur les groupes
   au-delà du plafond, et le troisième groupe restait visible. Même poids,
   déclaré après, l'attribut reprend la main. */
.page-template-template-home .fp-horaires-prochain-liste li.fp-horaires-prochain-groupe[hidden] {
  display: none;
}
/* UNE SEULE PÉRIODE À VENIR : pas de deuxième colonne vide à côté. Le script
   écrit le nombre de groupes gardés dans data-fp-visibles ; à un, la grille
   repasse en une colonne et le groupe se centre. */
.page-template-template-home .fp-horaires-prochain-liste[data-fp-visibles="1"] {
  grid-template-columns: minmax(0, 1fr);
}
/* DEUX GROUPES CÔTE À CÔTE (Marino, 10.09.2026 : « affiche deux l'un à côté
   de l'autre et affiche max 2 »). La liste devient une grille à deux colonnes
   dès qu'il y a la place : le Lundi du Jeûne fédéral à gauche, les Vacances
   d'automne et leur défilement à droite, Noël attendra son tour (le plafond de
   deux périodes est posé côté PHP par fp_horaires_futurs_attrs( 2 ) et
   appliqué par traiterFuturs()). Le séparateur passe d'un filet horizontal
   entre lignes à un filet vertical entre colonnes. Sous 640 px, on retombe sur
   l'empilement et le filet horizontal, il n'y a pas la place pour deux. */
.page-template-template-home .fp-horaires-prochain-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 0;
}
/* Un display explicite battrait l'attribut hidden que traiterFuturs() pose
   sur la liste quand plus rien ne vient : on le remet a plat. */
.page-template-template-home .fp-horaires-prochain-liste[hidden] { display: none; }
.page-template-template-home .fp-horaires-prochain-groupe:not([hidden]) ~ .fp-horaires-prochain-groupe:not([hidden]) {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--fp-ink) 16%, transparent);
}
@media (min-width: 640px) {
  .page-template-template-home .fp-horaires-prochain-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    align-items: start;
  }
  .page-template-template-home .fp-horaires-prochain-groupe:not([hidden]) ~ .fp-horaires-prochain-groupe:not([hidden]) {
    padding-top: 0;
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--fp-ink) 16%, transparent);
  }
}
/* JOURS EN GRAISSE NORMALE ET TÊTE RESSERRÉE (Marino, 10.09.2026 : « que les
   jours ne soient plus en gras si le titre l'est, et moins d'espace entre un
   titre et ses jours liés »). Le nom de la campagne porte déjà le gras : deux
   niveaux en gras se disputaient l'oeil. Les dates redescendent à la graisse
   courante, et l'air entre la tête du groupe et sa première date se réduit. */
.page-template-template-home .fp-horaires-prochain-groupe-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 3px 8px;
  margin: 0 0 1px;
}
.page-template-template-home .fp-horaires-prochain-groupe .fp-horaires-prochain-jour {
  font-weight: 400;
}
.page-template-template-home .fp-horaires-prochain-groupe-nom {
  font-weight: 700;
  color: var(--fp-ink);
}
.page-template-template-home .fp-horaires-prochain-groupe-periode {
  opacity: .8;
}
.page-template-template-home .fp-horaires-prochain-groupe-dates {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-template-template-home .fp-horaires-prochain-groupe-dates li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  padding: 1px 0;
}
.page-template-template-home .fp-horaires-prochain-groupe-dates li[hidden] { display: none; }
/* Navigation deux par deux : masquée par défaut (posée hidden côté PHP),
   révélée par traiterFuturs() (assets/js/main.js) seulement si le groupe a
   plus de deux dates à venir. De vrais <button>, une petite région
   aria-live pour l'état (« Page 1 sur 3 ») : voir le contrat data-fp-groupe-*
   partagé avec informations.css, activite.css et restauration.css. */
.page-template-template-home .fp-horaires-prochain-groupe-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.page-template-template-home .fp-horaires-prochain-groupe-nav[hidden] { display: none; }
.page-template-template-home .fp-horaires-prochain-groupe-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fp-ink) 32%, transparent);
  background: transparent;
  color: var(--fp-ink);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.page-template-template-home .fp-horaires-prochain-groupe-arrow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fp-primary) 14%, transparent);
  color: var(--fp-primary);
}
.page-template-template-home .fp-horaires-prochain-groupe-arrow:disabled {
  opacity: .35;
  cursor: default;
}
/* CIBLE TACTILE (passe tablette du 2026-09-10). La flèche mesure 22 px de
   côté : petite dans les DEUX dimensions, donc difficile à viser au doigt,
   contrairement aux liens de liste qui restent larges. Au pointeur grossier,
   un pseudo-élément transparent porte la zone à 40 px sans rien changer au
   dessin ni à la mise en page. Débord de 9 px pour une gouttière de 8 px : la
   zone mord d'un pixel sur le libellé « Page n sur m », qui n'est pas
   interactif. Au pointeur fin, rien ne change. */
@media (pointer: coarse) {
  .page-template-template-home .fp-horaires-prochain-groupe-arrow { position: relative; }
  .page-template-template-home .fp-horaires-prochain-groupe-arrow::after {
    content: '';
    position: absolute;
    inset: -9px;
  }
}
.page-template-template-home .fp-horaires-prochain-groupe-statut {
  min-width: 3.5em;
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}
/* Pas de défilement animé : la pagination bascule par [hidden], un
   changement instantané à toutes les préférences de mouvement. Seule la
   micro-transition de survol des flèches est coupée ici. */
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-horaires-prochain-groupe-arrow { transition: none; }
}

/* Responsive <=900px : empilement vertical, mascotte réduite APRES le
   contenu (pas de debordement bas genant), carte pleine largeur, liste
   lisible (padding lignes resserre). */
@media (max-width: 900px) {
  .page-template-template-home .fp-horaires-grid { flex-direction: column; align-items: stretch; }
  .page-template-template-home .fp-horaires-aside {
    order: 1;
    flex: none;
    max-width: none;
    width: 254px;
    margin: -44px 0 -136px auto;
    z-index: -1;
  }
  .page-template-template-home .fp-horaires-main { order: 0; flex: none; }
}
/* HORLOGE EN TÊTE DE SECTION ET BIEN PLUS GRANDE SUR TÉLÉPHONE (Marino,
   2026-09-10, passe mobile : « on descend, boum, on a direct l'horloge, en
   plus grand, facile deux fois, même deux fois et demie, et en dessous il y a
   écrit Nos différents horaires »). Le bloc juste au-dessus la reléguait sous
   le module, en petit (254px de colonne, cadran d'environ 130px), décalée à
   droite et derrière (z-index -1), en simple décor de fin de section. Sous
   720px elle passe en premier (order -1), centrée, à 190px de large : le
   cadran fait deux fois et demie sa taille d'avant et annonce la section
   avant même son titre. La marge négative du bloc précédent est annulée, elle
   n'a plus de sens en tête. */
@media (max-width: 720px) {
  .page-template-template-home .fp-horaires-aside {
    order: -1;
    width: min(100%, 190px);
    margin: 0 auto 8px;
    z-index: auto;
  }
  .page-template-template-home .fp-horaires-aside .fp-horloge {
    max-width: 190px;
  }
  /* La colonne est aussi plafonnée à 31 % par horloge.css, chargée APRÈS
     cette feuille : la levée de ce plafond vit donc là-bas, bloc « SUR
     TÉLÉPHONE » en fin de fichier. */
  /* EN-TÊTE ENTIÈREMENT CENTRÉ (retour client du 2026-08-17 : « centrer les
     en-têtes des sections restantes sur mobile »). Le titre et l'accroche
     l'étaient déjà, mais PAS la pilule de sur-titre : rien ne la centrait, elle
     restait donc seule contre le bord gauche au-dessus d'un bloc centré. C'est
     exactement le défaut déjà corrigé sur la section restauration. Le conteneur
     se centre par text-align, la pilule icon-box étant un inline-flex : on ne
     touche jamais au composant lui-même, seulement à son placement. */
  .page-template-template-home .fp-horaires-main .fp-section-eyebrow { text-align: center; }
}

/* Fallback paragraphes (si le module horaires est absent). */
.page-template-template-home .fp-horaires-body p {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 18px; margin: 0; border-bottom: 1px solid var(--fp-line);
  background: var(--fp-paper);
}
.page-template-template-home .fp-horaires-body p:nth-child(even) { background: var(--fp-cream); }
.page-template-template-home .fp-horaires-body p:first-child { border-top-left-radius: var(--fp-radius); border-top-right-radius: var(--fp-radius); }
.page-template-template-home .fp-horaires-body p:last-child { border-bottom: 0; border-bottom-left-radius: var(--fp-radius); border-bottom-right-radius: var(--fp-radius); }
.page-template-template-home .fp-horaires-body {
  border-radius: var(--fp-radius); overflow: hidden; box-shadow: var(--fp-shadow);
}

/* ==========================================================================
   7. RAVITAILLEMENT : fond --fp-primary + motif topo, BORDURE TOP 32px ACCENT
      (mobile 24px) + radius 60px 60px 0 0 (mobile 40px) : la section
      "monte" arrondie sur la precedente en chevauchant nettement plus que
      l'ancien bord fin. En-tete capture RP : badge sombre + h2 blanc a
      GAUCHE + accroche blanche a barre verticale a DROITE + 2 boutons blancs.
   ========================================================================== */
.fp-ravito {
  position: relative; overflow: hidden;
  border-top-left-radius: 60px; border-top-right-radius: 60px;
  border-top: 32px solid var(--fp-accent);
  margin-top: -32px; background: var(--fp-primary);
}
/* Topo de fond zoome (600px), opacite intermediaire (un peu moins que .32 qui
   etait trop marque, un peu plus que .14 d'origine). */
.fp-ravito-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: 600px; background-repeat: repeat; opacity: .22;
}
/* Voile « verre » decoratif (élément PHP jusque-la sans CSS, sections.php) :
   sheen glassmorphisme discret pres de l'en-tete, en echo a la pastille glass
   des cartes restauration ci-dessous. Purement decoratif (aria-hidden),
   au-dessus du topo (z-index 0) et sous le contenu (.fp-inner, z-index 2). */
.fp-ravito-glass {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 12% 0%, color-mix(in srgb, var(--fp-white) 16%, transparent), transparent 70%);
}
@media (max-width: 640px) {
  .fp-ravito {
    border-top-left-radius: 40px; border-top-right-radius: 40px;
    border-top-width: 24px;
    margin-top: -24px;
  }
}
.fp-ravito .fp-inner { position: relative; z-index: 2; }
/* Rangee haute 40/58 (fiche) : colonne gauche 40% (chip + titre + boutons),
   colonne droite 58% (paragraphe justifie a bordure gauche blanche). */
.page-template-template-home .fp-ravito .fp-section-head-center {
  display: grid;
  grid-template-columns: 40% 58%;
  justify-content: space-between;
  align-items: start;
  gap: 32px;
  text-align: left;
  max-width: none;
}
/* Placement du sur-titre dans l'en-tete 2 colonnes. On ne cible plus la pilule
   elle-meme (.fp-ibox) mais son CONTENEUR : le composant est intouchable hors
   de main.css, et la garantie « la pilule ne s'etire pas » est desormais portee
   par le composant lui-meme (width: fit-content / justify-self: start). Il ne
   reste donc ici que du placement en grille. */
.page-template-template-home .fp-ravito .fp-section-eyebrow {
  grid-column: 1;
  justify-self: start;
}
/* Titre : Bebas 3.2rem/600 lh 1.1 blanc (fiche). */
.page-template-template-home .fp-ravito .fp-lead {
  grid-column: 1;
  color: var(--fp-white);
  text-align: left;
  margin: 0;
  font-family: var(--fp-font-heading);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1.1;
}
/* Paragraphe justifie, bordure gauche blanche fine. Aligne sur la ROW DU TITRE
   (grid-row 2, ou se trouve le .fp-lead) au lieu de span 1/2 centre : le
   paragraphe demarrait au-dessus du titre (au niveau de l'eyebrow row 1) et
   flottait, effet peu soigne. Sur la même row que le titre, aligne en haut, il
   part exactement au niveau du titre « Besoin d'un ravitaillement » (demande
   client : descendre le texte pour l'aligner au titre). */
.page-template-template-home .fp-ravito .fp-section-sub {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  max-width: none;
  text-align: justify;
  color: var(--fp-white);
  border-left: 1px solid var(--fp-white);
  padding-left: 20px;
}
.fp-ravito-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 20px; grid-column: 1; }
/* Boutons blancs (plein blanc texte primary + outline blanc), surcharge
   directe des variantes fp_btn() existantes sans besoin de changement PHP. */
.page-template-template-home .fp-ravito-actions .fp-btn-primary {
  background: var(--fp-white);
  color: var(--fp-primary);
  border-color: var(--fp-white);
}
.page-template-template-home .fp-ravito-actions .fp-btn-primary::before { background: var(--fp-primary); }
.page-template-template-home .fp-ravito-actions .fp-btn-primary:hover { color: var(--fp-white); }
.page-template-template-home .fp-ravito-actions .fp-btn-ghost {
  color: var(--fp-white);
  border-color: var(--fp-line-light);
}
.page-template-template-home .fp-ravito-actions .fp-btn-ghost::before { background: var(--fp-white); }
.page-template-template-home .fp-ravito-actions .fp-btn-ghost:hover { color: var(--fp-primary); }
.fp-ravito-iboxes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin-top: 16px; grid-column: 1; }
/* SEUIL PORTÉ DE 860 À 950 PX (passe tablette du 2026-09-10). En deux
   colonnes 40 / 58, la colonne de gauche ne mesure que 350 px à 900 px de
   fenêtre : les deux boutons, 386 px à eux deux, y passaient l'un sous
   l'autre et de largeurs différentes, pendant que le paragraphe de droite se
   justifiait sur 336 px. L'en-tête d'une seule colonne, déjà écrit ici pour
   le téléphone, tient bien mieux cette bande. Le titre ne bouge pas au
   passage : son clamp plafonne à 3.2rem tant que la fenêtre dépasse 826 px,
   la valeur d'avant est donc conservée sur tout le domaine ajouté. */
@media (max-width: 950px) {
  .page-template-template-home .fp-ravito .fp-section-head-center {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  /* DÉFAUT CORRIGÉ (retour client du 2026-08-16 : « section restauration, tout
     centrer sur mobile, icon-box comprise »). Le titre, l'accroche et les
     boutons étaient bien recentrés ici, mais PAS le sur-titre : sa règle
     d'écran large lui pose justify-self: start pour le caler dans la première
     colonne de l'en-tête à deux colonnes, et rien ne l'annulait une fois
     l'en-tête passé sur une seule colonne. La pilule restait donc seule contre
     le bord gauche, au-dessus d'un bloc entièrement centré. */
  .page-template-template-home .fp-ravito .fp-section-eyebrow { justify-self: center; }
  /* TAILLE RÉDUITE SUR PETIT ÉCRAN (retour client du 2026-08-20 : le point
     d'interrogation du titre passait seul à la ligne). Le titre gardait ses
     3.2rem, soit 51,2 px, jusque sur un téléphone de 375 px : quarante et
     quelques signes en capitales condensées ne peuvent pas y tenir en deux
     lignes. La valeur devient fluide entre 860 px et 480 px environ, avec un
     plancher qui laisse de la marge si le texte s'allonge encore ; au seuil de
     860 px la taille est exactement celle d'avant, la transition est donc
     invisible. Le TEXTE n'est pas touché, c'est un contenu de la cliente.
     text-wrap: balance équilibre en plus les lignes pour éviter tout signe
     esseulé. */
  /* RELEVÉ LE 2026-09-11 (Marino : « le titre de la section restauration avec
     Manger, se désaltérer avant ou après en plus grand sur mobile, il est trop
     petit »). La valeur d'août plafonnait dans son PLANCHER sur tout téléphone :
     le terme fluide, 6,2vw, ne dépassait 1,95rem qu'au-delà de 503 px, si bien
     que tous les écrans de 320 à 500 px affichaient exactement la même taille,
     31 px, quelle que soit la place disponible. C'est le terme fluide qui
     commande désormais sur cette plage : 30,7 px à 320 px, 37,4 px à 390 px,
     41 px à 430 px. Le plafond et le seuil haut ne bougent pas, l'affichage au
     delà de 503 px est donc rigoureusement identique à avant.
     text-wrap: balance reste la garde contre le signe esseulé qui avait motivé
     la réduction d'août. Le TEXTE n'est pas touché, c'est un contenu de la
     cliente. */
  .page-template-template-home .fp-ravito .fp-lead {
    grid-column: 1;
    text-align: center;
    font-size: clamp(2rem, 9.6vw, 3.2rem);
    text-wrap: balance;
  }
  .page-template-template-home .fp-ravito .fp-section-sub {
    grid-column: 1;
    grid-row: auto;
    border-left: 0;
    padding-left: 0;
    text-align: center;
  }
  .fp-ravito-actions { justify-content: center; }
  .fp-ravito-iboxes { justify-content: center; }
}

/* ==========================================================================
   8. RESTAURATION : contrat PHP INCHANGE (.fp-resto-grid > .fp-resto-card,
      image de fond + degrade bas + .fp-resto-pill haut-gauche + .fp-resto-title
      + .fp-resto-more ; carte verrouillee = .fp-resto-ribbon ruban diagonal
      "Bientot..."), MISE EN PAGE REPENSEE (demande client : « il n'y aura QUE
      4 elements, propose une autre structure ») :
      COMPOSITION EDITORIALE « 1 vedette + 3 secondaires » plutôt qu'une simple
      rangee de N cartes egales, tres plate a seulement 4 éléments. Choix :
      une mosaique asymetrique en L (carte 1 en grande colonne verticale a
      gauche + 2 carres en haut a droite + 1 carte large en bas a droite),
      qui cree une hierarchie visuelle claire (le 1er point de restauration
      -> Restaurant -> devient la carte vedette) et remplit mieux la largeur
      de section qu'une grille uniforme. Cible via :nth-child (positions
      fixes 1 a 4) plutôt qu'un wrapper dedie : AUCUN changement PHP requis.
      Robustesse a un nombre variable de cartes (3 ou 5, hub /restauration/
      pas encore complet ou futur point ajoute) :
       - 1 seule carte : occupe toute la mosaique (:only-child).
       - 2 cartes : la 2e comble tout le bloc de droite (:nth-child(2):last-child).
       - 3 cartes : la 3e s'etire sur la bande du bas (:nth-child(3):last-child)
         plutôt que de laisser un vide.
       - 5+ cartes : la 5e (et suivantes) tombent en flux normal de grille
         SOUS la mosaique (grid-auto-rows), sans jamais chevaucher ni casser
         la mise en page.
      Desktop uniquement (la mosaique demande de la largeur) : <=1024px et
      <=640px degradent vers des grilles plus simples (cf. media queries plus
      bas), empilement complet en <=640px.
   ========================================================================== */
.page-template-template-home .fp-resto-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-auto-rows: minmax(210px, auto);
  gap: 25px;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}
/* Carte vedette (1er point de restauration) : occupe toute la hauteur de la
   mosaique sur la colonne de gauche, plus large que les 3 autres. */
.page-template-template-home .fp-resto-card:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.page-template-template-home .fp-resto-card:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.page-template-template-home .fp-resto-card:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.page-template-template-home .fp-resto-card:nth-child(4) {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
/* Secours si le hub /restauration/ n'a pas (encore) 4 pages enfants : la
   dernière carte comble le vide plutôt que de laisser un trou dans la
   mosaique (spécificité egale a la règle nth-child ci-dessus + :last-child en
   plus -> l'emporte naturellement, sans dependre de l'ordre des règles). */
.page-template-template-home .fp-resto-card:only-child {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}
.page-template-template-home .fp-resto-card:nth-child(2):last-child {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.page-template-template-home .fp-resto-card:nth-child(3):last-child {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
/* Vedette : titre plus grand, pour marquer la hierarchie de la composition
   (carte vedette + 3 secondaires). */
.page-template-template-home .fp-resto-card:nth-child(1) .fp-resto-title {
  font-size: clamp(2.6rem, 4.4vw, 3.8rem);
}
/* Cadrage par lieu (classe modificatrice posee par le renderer). Le
   RESTAURANT montre le bas de sa photo : en cadrage centre, la carte large
   du bas zoomait sur le haut de l'image et on ne voyait pas la salle
   (demande client du 2026-08-12). Les autres lieux gardent le centre. */
.page-template-template-home .fp-resto-card--restaurant {
  background-position: center bottom;
  /* Plus haute que les autres cartes : moins de zoom de recadrage, on voit
     davantage de la salle (retour client : les tables sont au fond de la
     photo et restaient hors cadre). */
  min-height: 300px;
  /* ZOOM SUR LA BANDE BASSE (retour client du 2026-08-12 : « les tables sont
     tout en bas de l'image, il faut vraiment qu'on puisse voir le fond, fond,
     fond de l'image ») : même leçon que la photo du restaurant sur la page
     Restauration : l'ancrage en bas ne suffit pas, il faut GROSSIR le bas.
     Le zoom se fait PAR LA LARGEUR (160 pour cent de la carte), jamais par la
     hauteur : cette carte est la large du bas de la mosaïque, bien plus large
     que haute, un zoom par la hauteur laisserait des vides latéraux. À 160
     pour cent de large, calée en bas, la fenêtre montre le quart inférieur de
     la photo, les tables, nettement plus grandes, et la largeur est couverte
     par construction à toutes les tailles de carte. */
  background-size: 160% auto;
}
/* Voile allégé sur cette carte : le voile standard passe à l'encre PLEINE sur
   toute la moitié basse, exactement là où vivent les tables du restaurant.
   Ici il démarre plus bas et plafonne à 82 pour cent : le texte garde son
   assise sombre, la salle redevient visible. */
.page-template-template-home .fp-resto-card--restaurant::after {
  background: linear-gradient(
    180deg,
    transparent 42%,
    color-mix(in srgb, var(--fp-ink) 55%, transparent) 72%,
    color-mix(in srgb, var(--fp-ink) 82%, transparent) 100%
  );
}
.page-template-template-home .fp-resto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  border-left: 4px solid var(--fp-accent);
  border-radius: var(--fp-radius);
  overflow: hidden;
  box-shadow: none;
  padding: 16px;
  background-size: cover;
  background-position: center;
  color: var(--fp-white);
  text-decoration: none;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
/* Survol avec plus de peps (demande client) : lift plus marque + leger
   devers (coherent avec l'identite du site), et une bordure lumineuse
   accent en plus de l'ombre portee. */
/* SPÉCIFICITÉ RENFORCÉE (.fp-resto-grid ajouté, quatre classes) : depuis que
   la carte a retrouvé une vraie apparition (voir plus bas), sa règle d'entrée
   en scène porte trois classes et pose un transform. Avec seulement deux
   classes ici, le survol perdait la cascade au moment précis où la souris
   entre, et la carte serait retombée sur son transform d'entrée au lieu de se
   soulever : c'est le piège déjà documenté sur .fp-actcard, section 5. */
.page-template-template-home .fp-resto-grid .fp-resto-card.fp-reveal:hover {
  transform: translateY(-8px) rotate(-1.5deg);
  box-shadow: var(--fp-shadow-lg), 0 0 0 3px color-mix(in srgb, var(--fp-accent) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-resto-grid .fp-resto-card.fp-reveal:hover { transform: none; box-shadow: none; }
}
/* SURVOL FLUIDE (2026-09-06, demande Marino) : le décalage/dévers de la carte
   ci-dessus arrivait D'UN COUP. Cause : la neutralisation .fp-reveal de
   main.css (.page-template-template-home .fp-reveal:not(.fp-anim-h):not(.fp-actcard),
   4 classes) pose "transition: none" sur toute carte .fp-reveal, ce qui
   l'emporte sur la transition de base ci-dessus (.page-template-template-home
   .fp-resto-card, seulement 2 classes) et sur celle de la règle d'entrée
   (.fp-resto-card.fp-reveal, 3 classes) : la VALEUR du survol passait bien
   (règle à 5 classes juste au-dessus), jamais sa durée. Même recette qu'ailleurs
   sur cette page (voir .fp-evenement-card) : règle à quatre classes réelles
   (.fp-resto-grid en plus), qui l'emporte sur celle de main.css par ordre de
   feuille (home.css chargée APRÈS main.css, même spécificité -> la dernière
   gagne). Durée et courbe identiques au zoom de l'image (::before plus bas,
   .6s ease) pour que tous les effets de la carte avancent au même rythme,
   dans les deux sens (entrée ET sortie du survol). */
.page-template-template-home .fp-resto-grid .fp-resto-card.fp-reveal {
  transition: transform .6s ease, box-shadow .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-resto-grid .fp-resto-card.fp-reveal { transition: none; }
}
/* Duplique le fond de la carte sur un ::before dedie : le zoom au survol
   n'affecte que l'image, jamais le texte pose par-dessus. Zoom + leger gain
   de luminosite/saturation au survol pour un effet plus vivant. */
.page-template-template-home .fp-resto-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  transition: transform .6s ease, filter .6s ease;
}
.page-template-template-home .fp-resto-card:hover::before {
  transform: scale(1.1);
  filter: brightness(1.06) saturate(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-resto-card:hover::before { transform: none; filter: none; }
}
/* Overlay vers le sombre : renforce (etait transparent 26% -> encre 100%,
   trop leger : sur une photo claire, le titre blanc tombait sous 3.2:1 de
   contraste au niveau ou vit le texte). Nouveau palier intermediaire a 48%
   (encre 70%) : le contraste du titre blanc reste >= 4.5:1 (AA texte normal)
   des le haut du bloc de titre, même sur fond blanc pur (pire cas verifie).
   Le haut de carte (0-20%) reste transparent, la photo respire toujours. */
.page-template-template-home .fp-resto-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 20%,
    color-mix(in srgb, var(--fp-ink) 70%, transparent) 48%,
    var(--fp-ink) 100%
  );
  pointer-events: none;
}
.page-template-template-home .fp-resto-card > * {
  position: relative;
  z-index: 2;
}
/* Chip accroche en HAUT de carte : GLASS EFFECT (verre depoli) + icone info « i »,
   texte blanc (demande). Recette « laisse deviner l'image derriere » : opacite
   de fond ABAISSEE (22% -> 16%) et backdrop-filter enrichi d'un saturate (les
   couleurs de la photo transparaissent plus nettement a travers le verre) ;
   un text-shadow discret compense pour garder le texte lisible quel que soit
   le fond photo (le contraste du TITRE, lui, reste sur le voile ::after non
   modifie, cf. plus haut). */
.page-template-template-home .fp-resto-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Padding BAS réduit de 3px (6 -> 3) : la police des titres est une capitale
     condensee, dont la boite de ligne reserve de la place pour les jambages
     alors qu'aucune lettre ne descend. Le vide paraissait donc plus grand en
     bas qu'en haut, alors que le padding etait bien symetrique. On compense ce
     vide typographique plutôt que de deplacer la puce. */
  padding: 6px 12px 3px;
  background: color-mix(in srgb, var(--fp-white) 16%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--fp-white) 40%, transparent);
  color: var(--fp-white);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--fp-ink) 55%, transparent);
  border-radius: 20px;
  font-family: var(--fp-font-heading);
  /* Texte agrandi (demande client : pas assez lisible sur les photos). */
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(-10px) scale(.85);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), background .3s ease, border-color .3s ease;
}
/* CORRECTIF (puce qui disparaissait au survol) : l'opacite etait portee par
   une règle « .is-in:not(:hover) ». Des que la souris entrait sur la CARTE,
   la règle cessait de s'appliquer et la puce retombait sur opacity:0, donc
   s'effacait. On separe les responsabilites : l'opacite depend de .is-in
   seul, et seul le transform garde :not(:hover) pour laisser la main a la
   règle de survol ci-dessous. */
.page-template-template-home .fp-resto-card.is-in .fp-resto-pill {
  opacity: 1;
}
.page-template-template-home .fp-resto-card.is-in:not(:hover) .fp-resto-pill {
  transform: none;
}
/* Survol : le verre « s'allume » (plus opaque, bordure plus vive) et se souleve
   legerement, laissant toujours deviner l'image grace au saturate ci-dessus. */
.page-template-template-home .fp-resto-card:hover .fp-resto-pill {
  background: color-mix(in srgb, var(--fp-white) 30%, transparent);
  border-color: color-mix(in srgb, var(--fp-white) 65%, transparent);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-resto-pill,
  .page-template-template-home .fp-resto-card.is-in:not(:hover) .fp-resto-pill,
  .page-template-template-home .fp-resto-card:hover .fp-resto-pill {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.page-template-template-home .fp-resto-pill svg { width: 17px; height: 17px; }
/* Titre bas de carte : display tres grand blanc, agrandi (demande : nom plus grand). */
.page-template-template-home .fp-resto-title {
  font-family: var(--fp-font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 3.8vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fp-white);
  margin: 0;
}
/* Note : la carte n'affiche volontairement aucun descriptif (pastille + titre
   + lien uniquement, cf. docblock fp_render_resto_cards) : pas de regle
   .fp-resto-desc ici, elle n'a jamais correspondu a un element du markup. */
/* Lien "plus d'infos" sous le titre : soulignement anime au hover (largeur
   0 -> 100%), meme langage que les liens de contenu de la home. */
/* APPARITION DES CARTES, RÉTABLIE (retour client du 2026-08-16 : « les cartes
   arrivent sans trop d'animation »).

   DIAGNOSTIC. Il n'y avait pas de conflit entre deux moteurs d'animation : ni
   GSAP ni la cascade de conteneur ne touchent cette grille. Il y avait un
   système d'apparition VOLONTAIREMENT NEUTRALISÉ. Chaque carte est bien
   marquée .fp-reveal en PHP (fp_render_resto_cards) avec son propre décalage
   data-fp-delay, main.js lui pose bien .is-in à son entrée à l'écran, mais une
   règle locale remettait opacity: 1, transform: none et transition: none dès
   le départ : il ne restait donc à voir que le fondu du TITRE, seul rescapé.
   D'où l'impression, exacte, d'une grille qui se pose sans rien raconter.
   Effet de bord de cette même règle : son « transition: none » supprimait
   aussi la transition du SURVOL (elle porte trois classes contre deux à la
   règle de base), qui basculait donc d'un coup sec.

   CORRECTION. La carte retrouve une vraie entrée en scène, calquée sur le
   langage déjà en place ailleurs sur l'accueil (fondu, léger relevé, courbe
   .16/1/.3/1). La cascade vient du décalage déjà émis en PHP (60ms par carte)
   et, en pile mobile, de l'entrée à l'écran de chaque carte. Le titre garde
   son fondu propre, désormais joué en SECOND TEMPS (léger retard) : la carte
   se pose, puis le nom s'inscrit dessus.
   Le :not(:hover) rend la main au survol, dont la règle a été portée à quatre
   classes plus haut pour rester prioritaire en toute circonstance. */
.page-template-template-home .fp-resto-card.fp-reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1),
    transform .7s cubic-bezier(.16, 1, .3, 1),
    box-shadow .35s ease;
}
/* L'opacité ne dépend JAMAIS de :hover (même correctif que la pastille de
   verre juste au-dessus : sinon la carte s'efface au passage de la souris). */
.page-template-template-home .fp-resto-card.fp-reveal.is-in { opacity: 1; }
.page-template-template-home .fp-resto-card.fp-reveal.is-in:not(:hover) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-resto-card.fp-reveal {
    opacity: 1;
    transform: none;
    transition: box-shadow .35s ease;
  }
}
/* Le titre de la carte, lui, apparait en fondu doux a l'entree en vue (comme les
   titres du site). L'animation est declenchee par la classe .is-in que main.js
   pose sur la carte a l'entree en vue. */
.page-template-template-home .fp-resto-card .fp-resto-title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.page-template-template-home .fp-resto-card.is-in .fp-resto-title {
  opacity: 1;
  transform: none;
  /* Second temps : la carte se pose d'abord, le nom s'inscrit ensuite. */
  transition-delay: .16s;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-resto-card .fp-resto-title { opacity: 1; transform: none; transition: none; }
  .page-template-template-home .fp-resto-card.is-in .fp-resto-title { transition-delay: 0s; }
}
.page-template-template-home .fp-resto-more {
  position: relative;
  display: inline-block;
  /* Largeur du texte seulement : le soulignement anime ne prend pas toute la
     carte, il reste sous « Plus d'informations ». */
  width: fit-content;
  margin-top: 8px;
  font-size: .85rem;
  color: var(--fp-white);
  text-decoration: none;
  transition: transform .3s ease, letter-spacing .3s ease;
}
/* Petit « nudge » au survol (demande client : plus de peps), en plus du
   soulignement anime déjà en place. */
.page-template-template-home .fp-resto-card:hover .fp-resto-more {
  transform: translateX(4px);
  letter-spacing: .02em;
}
.page-template-template-home .fp-resto-more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--fp-white);
  transition: width .3s ease;
}
.page-template-template-home .fp-resto-card:hover .fp-resto-more::after {
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-resto-more::after { transition: none; }
  .page-template-template-home .fp-resto-card:hover .fp-resto-more { transform: none; }
}
/* Ruban "Bientot..." (fiche) : voile linear-gradient(200deg, primary 57%,
   gris 66%) par-dessus TOUTE la carte, bande blanche en diagonale 45deg dans
   le coin haut-droit, texte 18px/600 tres fonce, large padding. */
.page-template-template-home .fp-resto-card:has(.fp-resto-ribbon)::before {
  background: linear-gradient(200deg, var(--fp-primary) 57%, color-mix(in srgb, var(--fp-ink) 45%, transparent) 66%);
}
.page-template-template-home .fp-resto-ribbon {
  position: absolute;
  top: 24px;
  right: -32px;
  z-index: 3;
  width: 160px;
  padding: 10px 0;
  background: var(--fp-white);
  color: var(--fp-ink);
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--fp-ink) 12%, transparent);
  overflow: hidden;
}
/* Reflet anime (demande client : « soigne le ruban Bientot ») : un leger
   reflet balaie le ruban toutes les quelques secondes, pour lui donner un peu
   de vie même sans interaction (la carte verrouillée n'est pas cliquable). */
.page-template-template-home .fp-resto-ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--fp-primary) 30%, transparent) 45%, transparent 60%);
  transform: translateX(-120%);
  animation: fp-resto-ribbon-sheen 3.2s ease-in-out infinite;
}
@keyframes fp-resto-ribbon-sheen {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-resto-ribbon::after { animation: none; display: none; }
}
/* Tablette : la mosaique en L manque de largeur pour respirer. Repli plus
   simple mais toujours hierarchise : 2 colonnes, la vedette (carte 1) etale
   sur toute la largeur en tete, les secondaires en dessous. */
@media (max-width: 1024px) {
  .page-template-template-home .fp-resto-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(230px, auto);
  }
  .page-template-template-home .fp-resto-card:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .page-template-template-home .fp-resto-card:nth-child(2),
  .page-template-template-home .fp-resto-card:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
  /* 4e carte (secondaire) etalee sur toute la largeur : termine la mise en
     page proprement plutôt que de rester seule dans une demi-colonne a côté
     d'une case vide. */
  .page-template-template-home .fp-resto-card:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: auto;
  }
  /* Secours 3 cartes en tablette : la 3e etale le reste de la largeur au lieu
     de laisser une case vide a côté d'elle. */
  .page-template-template-home .fp-resto-card:nth-child(3):last-child { grid-column: 1 / 3; }
  .page-template-template-home .fp-resto-card:only-child,
  .page-template-template-home .fp-resto-card:nth-child(2):last-child { grid-column: 1 / 3; grid-row: auto; }
}
/* Mobile : empilement complet lisible, une carte par ligne, hierarchie
   remise a plat (spans de la mosaique desktop/tablette tous reinitialises). */
@media (max-width: 640px) {
  .page-template-template-home .fp-resto-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .page-template-template-home .fp-resto-card,
  .page-template-template-home .fp-resto-card:nth-child(1),
  .page-template-template-home .fp-resto-card:nth-child(2),
  .page-template-template-home .fp-resto-card:nth-child(3),
  .page-template-template-home .fp-resto-card:nth-child(4),
  .page-template-template-home .fp-resto-card:only-child,
  .page-template-template-home .fp-resto-card:nth-child(2):last-child,
  .page-template-template-home .fp-resto-card:nth-child(3):last-child {
    grid-column: 1 / 2;
    grid-row: auto;
    min-height: 260px;
  }
  /* TITRES PRESQUE DOUBLÉS (retour client du 2026-08-16). À 1.8rem, le nom du
     lieu (Bar, Espace Lounge...) se perdait sur une photo plein cadre de 260px
     de haut : c'est pourtant la seule information que porte la carte. Il passe
     à ~2.8-3.4rem, soit le poids d'un titre de section, tout en restant
     largement contenu par la largeur utile de la carte (police d'affichage
     condensée, marge interne de 16px de chaque côté).
     La hiérarchie « carte vedette » de l'écran large n'a plus d'objet ici :
     toutes les cartes sont empilées à égalité, elles partagent donc la même
     taille (le sélecteur nth-child(1) est repris pour l'aplanir). */
  .page-template-template-home .fp-resto-card:nth-child(1) .fp-resto-title,
  .page-template-template-home .fp-resto-title { font-size: clamp(2.8rem, 11vw, 3.4rem); }
  .page-template-template-home .fp-resto-pill { font-size: 13px; padding: 5px 10px 3px; }
}

/* ==========================================================================
   10. ANNIVERSAIRE : grande carte coloree arrondie + mascotte Rafy. Fond
   accent + motif + fond confettis (choix assume de la reference : titre et
   texte BLANCS sur ce fond clair). La carte n'a PAS overflow:hidden : le
   motif (::before-like, inset:0) ne peut par definition pas deborder de son
   parent, et la mascotte (colonne a part) doit deborder LIBREMENT en bas
   sans etre clippee (fiche). Debordement UNIQUEMENT vertical (marges
   negatives), aucune largeur qui depasse la carte : pas de risque de scroll
   horizontal. z-index sur la section (position:relative implicite via ce
   contexte d'empilement) : la mascotte qui deborde reste peinte AU-DESSUS du
   fond de la section suivante (même logique que .fp-hero-inner plus haut). */
.fp-anniv { position: relative; z-index: 1; background: var(--fp-paper); padding: 120px 0 80px; }
.fp-anniv-card {
  position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center;
  gap: 24px; min-height: 393px; background: var(--fp-accent); color: var(--fp-white);
  border-radius: 40px; padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--fp-shadow-lg);
  /* La carte masque les debordements : la mascotte Rafy qui deborde parait
     "posee dans" la section, encadree par les coins arrondis. */
  overflow: hidden;
  /* Amplitude horizontale du calque de confettis animé (::before plus bas) :
     reprise par ses keyframes en repli ordinateur, redéfinie dans le media
     <=860px pour la carte empilée (plus étroite). Voir le commentaire
     détaillé au-dessus de la règle ::before. Second calque (::after) retiré
     le 2026-09-06 (retour Marino : trop d'éléments se chevauchaient) : plus
     aucune variable --fp-confetti2-*. */
  --fp-confetti1-tx: -36px;
}
/* Ancien motif pattes en repeat : désactivé (Marino ne veut PAS de repetition). */
.fp-anniv-pattern { display: none; }
/* Fond confettis : une seule image (pas de répétition), grande, cadrée encore
   plus à DROITE (~92%, demande client) et MOINS OPAQUE (opacity .7) pour rester
   discrète derrière la mascotte Rafy anniversaire.
   CONFETTIS ANIMÉS (demande Marino 2026-09-06, MOUVEMENT ACCENTUÉ le même jour
   après retour « le mouvement doit se voir »), en TRANSFORM SEUL (jamais
   background-position, qui force un recalcul de mise en page à chaque frame
   et saccade). Reste SOUS le texte (z-index 1) et le gâteau (z-index 2), et ne
   capture aucun clic (pointer-events:none) : pur décor.
   SECOND CALQUE RETIRÉ (même jour, retour Marino : « trop d'éléments se
   chevauchent ») : la carte ne porte plus qu'un seul calque animé (::before),
   à son opacité actuelle inchangée. Ce commentaire ne parle donc plus que
   d'UN calque.
   ÉCHELLE ET AMPLITUDE VÉRIFIÉES AU BANC (calcul géométrique sur la largeur ET
   la hauteur RÉELLES de la carte à chaque palier, 1280 à 320px, cf. rapport) :
   le calque scale(S) centré déborde de (S-1)/2 * dimension de chaque côté ; une
   translation qui dépasse cette marge découvre un bord (la couleur pleine de la
   carte, --fp-accent, sous le calque). Deux zones à risque distinctes,
   corrigées différemment :
   - la carte 2 colonnes (ordinateur, hauteur mini fixe 393px) est BASSE : c'est
     la translation VERTICALE qui menace d'y découvrir un bord. Échelle relevée
     par rapport à la demande initiale (1.04 -> plancher 1.06, plafond 1.14)
     pour dégager une marge verticale confortable (>= 5,5px mesurés) sans
     changer l'amplitude demandée.
   - la carte empilée (téléphone/tablette, <=860px, même palier que le passage
     en une colonne un peu plus bas) devient nettement plus ÉTROITE que ses
     809-1072px habituels (jusqu'à 268px à 320px) : c'est la translation
     HORIZONTALE qui menacerait d'y découvrir un bord, et aucune échelle
     raisonnable n'aurait suffi à elle seule (aurait fallu dépasser 1.25, un
     zoom trop voyant). Son amplitude horizontale est donc réduite via la
     propriété personnalisée --fp-confetti1-tx, lue en repli par les keyframes
     pour l'ordinateur et redéfinie dans le media ci-dessous. L'amplitude
     verticale n'a pas besoin d'y changer, la carte empilée étant toujours
     assez haute. */
.fp-anniv-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('../img/confettis-rp-1.webp') 92% center / auto 115% no-repeat;
  opacity: .7;
  pointer-events: none;
  will-change: transform;
  transform-origin: center;
  animation: fp-anniv-confettis 14s ease-in-out infinite alternate;
}
@keyframes fp-anniv-confettis {
  from { transform: translate3d(0, 0, 0) scale(1.06) rotate(0deg); }
  to   { transform: translate3d(var(--fp-confetti1-tx), 22px, 0) scale(1.14) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* will-change: auto (retour relecture, 2026-09-06) : sans animation, plus
     aucune raison de garder ce calque promu sur son propre calque composite
     en permanence. */
  .fp-anniv-card::before { animation: none; will-change: auto; }
}
.fp-anniv-text { position: relative; z-index: 1; grid-column: 1; padding-left: 40px; }
.fp-anniv-title {
  margin: 14px 0 12px; font-family: var(--fp-font-heading); font-weight: 600;
  font-size: clamp(2.7rem, 4vw, 4rem); max-width: 18ch; color: var(--fp-white);
}
.fp-anniv-body { color: var(--fp-white); max-width: 48ch; }
.fp-anniv-body p { color: var(--fp-white); }
.fp-anniv-actions { margin-top: 22px; }
.fp-anniv-media {
  position: relative; z-index: 2; grid-column: 2; text-align: center;
  align-self: end;
}
.fp-anniv-media img {
  /* GATEAU REMONTE (retour Marino 2026-09-06) : l'image deposee par la cliente
     est desormais un GATEAU, plus une mascotte. Les marges negatives d'avant
     (-40px en haut, -120px en bas) le rognaient trop bas dans la carte a
     overflow:hidden : les bougies touchaient presque le titre et le bas du
     gateau disparaissait. Marges resserrees et symetriques : il remonte et
     reste pose dans la carte, SANS la faire grandir (align-self:end conserve). */
  max-width: min(440px, 100%); height: auto; margin: -56px 0 -56px;
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--fp-ink) 30%, transparent));
}
/* ENTREE PLUS MARQUEE DU GATEAU SEUL (demande Marino 2026-09-06). Piege local :
   .page-template-template-home .fp-reveal:not(.fp-anim-h):not(.fp-actcard)
   (main.css) fige DEJA tout .fp-reveal de l'accueil hors titres/cartes
   activites a opacite 1, transform none, transition none, avec 4 classes de
   specificite : sans contre-mesure ici, aucune animation n'apparaitrait. On la
   bat volontairement avec un selecteur a 5 classes (jamais touche a main.css,
   hors perimetre), sur le modele deja utilise plus haut dans ce fichier pour
   les cartes resto/evenements. La duree de transition s'applique QUELLE QUE
   SOIT l'etape (avant/apres reveal) ; opacite et translation, elles, ne
   valent qu'AVANT le reveal (:not(.is-in)) : une fois .is-in pose par main.js,
   c'est la regle generique .fp-reveal.is-in de main.css (opacite 1, transform
   none) qui reprend la main seule, sans etre redefinie ici.
   BUG CORRIGE (retour Marino, verifie en production le 2026-09-06) : la
   neutralisation de main.css pose la forme RACCOURCIE "transition: none",
   qui reinitialise TOUS les longhands, dont transition-property (a "none").
   Cette regle ne redefinissait que transition-duration : la propriete a
   transitionner restait donc "none" (verifie par getComputedStyle en direct
   sur le site : transitionProperty valait "none" avant ET apres le reveal),
   et le gateau passait d'un coup de 0 a 1 au lieu de fondre. Il faut
   redeclarer explicitement transition-property (et la courbe, qui subit le
   meme sort) en plus de la duree. */
.page-template-template-home .fp-anniv .fp-anniv-card .fp-anniv-media.fp-reveal {
  transition-property: opacity, transform;
  transition-timing-function: var(--fp-anim-ease);
  transition-duration: calc(var(--fp-anim-dur) * 1.6);
}
.page-template-template-home .fp-anniv .fp-anniv-card .fp-anniv-media.fp-reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(72px);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-anniv .fp-anniv-card .fp-anniv-media.fp-reveal,
  .page-template-template-home .fp-anniv .fp-anniv-card .fp-anniv-media.fp-reveal:not(.is-in) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Une fois revele, tres leger flottement du gateau (mouvement pose sur l'IMG,
   jamais sur .fp-anniv-media qui porte deja la transition d'entree : deux
   transforms sur le meme element se marcheraient dessus). */
.page-template-template-home .fp-anniv-media.is-in img {
  animation: fp-anniv-gateau-flotte 6s ease-in-out infinite alternate;
}
@keyframes fp-anniv-gateau-flotte {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-anniv-media.is-in img { animation: none; }
}
@media (max-width: 860px) {
  .fp-anniv-card {
    grid-template-columns: 1fr; text-align: center; padding-bottom: 0;
    /* AMPLITUDE HORIZONTALE DES CONFETTIS RÉDUITE (vérifié au banc) : sous ce
       palier la carte passe en une colonne et perd sa largeur 2 colonnes
       (809-1072px habituels) pour une largeur qui suit désormais le seul
       wrap mobile (jusqu'à 268px à 320px). L'amplitude demandée (36px)
       y dépasserait largement la marge que l'échelle peut dégager sans un
       zoom disproportionné (aurait fallu dépasser 1.25). L'amplitude
       verticale n'a pas besoin de changer : la carte empilée reste assez
       haute pour l'absorber. */
    --fp-confetti1-tx: -12px;
  }
  .fp-anniv-text { grid-column: 1; padding-left: 0; }
  .fp-anniv-title { margin-left: auto; margin-right: auto; }
  /* Accroche recentrée elle aussi (retour client du 2026-08-17, centrage des
     en-têtes restants). Son texte était bien centré, mais sa BOÎTE, plafonnée
     à 48ch, restait calée à gauche de la carte : entre 720 et 860px, une
     largeur de carte supérieure à ce plafond faisait donc apparaître tout le
     paragraphe décalé vers la gauche, malgré son texte centré. */
  .fp-anniv-body { margin-left: auto; margin-right: auto; }
  .fp-anniv-actions { display: flex; justify-content: center; }
  .fp-anniv-card::before { background-position: bottom center; }
  .fp-anniv-media { grid-column: 1; }
  /* Meme resserrement qu'au-dessus (retour Marino 2026-09-06), proportionnel a
     la pile mobile : le gateau reste pose dans la carte sans etre rogne trop
     bas. */
  .fp-anniv-media img { margin: 0 0 -36px; }
}
@media (max-width: 720px) {
  /* ZONE CTA ÉLARGIE (retour client du 2026-08-16 : « la zone CTA un peu plus
     large »). La carte est bornée par la gouttière de section (20px de chaque
     côté) puis par sa propre marge interne (28px) : sur un écran de 390px, il
     ne restait que 294px de contenu utile pour un titre en capitales. On rend
     20px de largeur en resserrant la gouttière de CETTE section seulement, et
     20px de plus en resserrant la marge interne, sans jamais coller le texte
     au bord. */
  .fp-anniv .fp-wrap { padding-left: 10px; padding-right: 10px; }
  .fp-anniv-card { padding-left: 22px; padding-right: 22px; }
  /* CONFETTIS ADOUCIS (même retour). Ce fond décoratif passe désormais SOUS un
     texte centré (la pile mobile le ramène derrière le titre et l'accroche) au
     lieu de rester cantonné à droite de la composition large. À 70 pour cent
     d'opacité, ses aplats colorés venaient bruiter la lecture ; à 38 pour cent
     il tient son rôle d'ambiance sans jamais disputer le premier plan. */
  .fp-anniv-card::before { opacity: .38; }
}

/* ==========================================================================
   10bis. EVENEMENTS : bandeau « prochains evenements » (section MANQUANTE de
   notre implementation, ajoutee ici, cf. ecart MAJEUR 1 de la spec), placee
   ENTRE Anniversaire et Auberge (ordre source). Contrat PHP reel (sections.php,
   fp_render_evenements) : <section class="fp-evenements fp-s-light"> - le
   fond clair et le padding vertical viennent DEJA de l'utilitaire fp-s-light
   (main.css), aucune surcharge necessaire ici. En-tete centre (classes
   generiques partagees avec les autres sections : fp-section-head-center >
   fp_icon_box eyebrow + h2 .fp-lead + p .fp-section-sub) puis grille de 3
   cartes .fp-evenement-card (image a la une en haut, titre, ligne de dates,
   toute la carte est le lien). Carte verrouillée publiquement = ruban
   .fp-evenement-ribbon + classe .is-soon (meme traitement que fp-resto-card).
   Bouton "Voir tous les evenements" centre sous la grille (.fp-evenements-more).
   ========================================================================== */

/* Grille 3 colonnes desktop -> 2 (<=1024px) -> 1 (<=640px), rythme aligne
   sur les autres grilles de cartes de la home (gap 25px). */
.fp-evenements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .fp-evenements-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fp-evenements-grid { grid-template-columns: 1fr; }
}

/* Fond de section EVENEMENTS : coupure NETTE (pas un vrai fondu) blanc en haut,
   vert fonce en bas. Les 2 stops au même pourcentage -> transition franche,
   placee un peu au-dessus du milieu des cartes. Le bas (cartes + bouton) est
   donc sur du vert fonce. Surcharge le fond blanc de .fp-s-light. */
.page-template-template-home .fp-evenements.fp-s-light {
  background: linear-gradient(180deg, var(--fp-paper) 58%, var(--fp-secondary) 58%);
}
/* Titre « Prochains evenements a Magic Parc » nettement plus grand, sur une
   seule ligne, avec plus d'espace sous l'icon-box eyebrow. */
.page-template-template-home .fp-evenements .fp-section-eyebrow { margin-bottom: 26px; }
.page-template-template-home .fp-evenements .fp-lead {
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  white-space: nowrap;
  line-height: 1.02;
  /* Centrage explicite : le titre nowrap etait decale a droite. */
  text-align: center;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  .page-template-template-home .fp-evenements .fp-lead { white-space: normal; font-size: clamp(2rem, 8vw, 3rem); }
}
/* Bouton « Voir tous les evenements » : version fond BLANC (il est sur le vert
   fonce du bas de section). */
.page-template-template-home .fp-evenements-more .fp-btn-primary {
  background: var(--fp-white);
  color: var(--fp-primary);
  border-color: var(--fp-white);
}
.page-template-template-home .fp-evenements-more .fp-btn-primary::before { background: var(--fp-primary); }
.page-template-template-home .fp-evenements-more .fp-btn-primary:hover { color: var(--fp-white); }

/* Carte evenement (ex. « F1 Masters . Silverstone ») : IMAGE DE FOND PLEINE
   CARTE (reference 2026) + BORDURE GAUCHE 4px accent (fiche, langage em-card
   commun a la home). Le media occupe tout le cadre en position absolue,
   un voile degrade assure la lisibilite du corps qui vient se poser en bas,
   par-dessus l'image. Hover : lift leger (fiche : -4px) + zoom doux du fond
   (memes recettes que fp-resto-card/fp-actcard). Hauteur mini genereuse pour
   laisser respirer la photo (ratio raisonnable conserve sur mobile via
   aspect-ratio). */
.fp-evenement-card {
  position: relative;
  display: flex;
  min-height: 250px;
  border-left: 4px solid var(--fp-accent);
  border-radius: var(--fp-radius);
  overflow: hidden;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* SURVOL MESURE MORT (banc d'essai, tools/bench-visuel/survol.mjs), même cause
   que pour les cartes offres plus haut : « .fp-evenement-card:hover » ne porte
   que DEUX classes, contre QUATRE pour la neutralisation .fp-reveal de
   main.css. L'ombre apparaissait, la carte ne se soulevait jamais.
   Correctif : second selecteur a CINQ classes (.fp-evenements-grid et
   .fp-reveal sont deja sur chaque carte), le premier restant pour les
   contextes hors accueil, ou main.css ne s'applique pas. */
.fp-evenement-card:hover,
.page-template-template-home .fp-evenements-grid .fp-evenement-card.fp-reveal:hover {
  transform: translateY(-4px);
  box-shadow: var(--fp-shadow-lg);
}
.fp-evenement-card:focus-visible {
  outline: 2px solid var(--fp-white);
  outline-offset: 3px;
}
/* Garde alignee sur les deux selecteurs ci-dessus, sinon le plus specifique
   continuerait d'animer sous prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .fp-evenement-card:hover,
  .page-template-template-home .fp-evenements-grid .fp-evenement-card.fp-reveal:hover { transform: none; }
}
/* Media : plein cadre en fond, l'image (ou le repli) et le voile de lisibilite
   sont tous deux poses en absolute inset:0 dans cette même couche. */
.fp-evenement-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Le fond topo est desormais TOUJOURS pose, y compris sous une image (un PNG a
   fond transparent laissait un vide). Il est en position absolue et vient en
   premier dans le balisage : sans precaution il PEINDRAIT AU-DESSUS de l'image,
   qui n'est pas positionnee. On remonte donc explicitement l'image d'un cran. */
.fp-evenement-media img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.fp-evenement-card:hover .fp-evenement-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .fp-evenement-card:hover .fp-evenement-media img { transform: none; }
}
/* Voile degrade bas : renforce (etait transparent 45% -> encre 65% a 100%,
   trop leger et trop tardif : sur une photo claire, le titre blanc tombait
   sous 2:1 de contraste au niveau ou vit le texte, echec AA net). Nouveau
   palier intermediaire a 58% (encre 72%) : le contraste du titre blanc reste
   >= 4.5:1 (AA texte normal) des le haut du bloc titre/dates, meme sur fond
   blanc pur (pire cas verifie). Transparent jusqu'a 30% : la photo respire
   toujours en haut de carte. */
.fp-evenement-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 30%,
    color-mix(in srgb, var(--fp-ink) 72%, transparent) 58%,
    var(--fp-ink) 100%
  );
  pointer-events: none;
}
/* Repli fond « em-topo » (pas d'image sur l'evenement, ni thumbnail ni meta
   _fp_event_image_url) : aplat teal + motif topographique en LEGER overlay
   (::after a 20% d'opacite), JAMAIS de mascotte. Rempli .fp-evenement-media
   qui est déjà position:absolute; inset:0 (règle ci-dessus). */
.fp-evenement-topo {
  position: absolute;
  inset: 0;
  background-color: var(--fp-primary);
}
.fp-evenement-topo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Motif topographique local du thème, même fichier que la page Événements
     (assets/img/em-topo-traits.svg) : plus de dépendance à un domaine tiers. */
  background-image: url('../img/em-topo-traits.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .2;
}
/* Ruban diagonal "Bientot..." (page verrouillée) : même recette que
   .fp-resto-ribbon, mais rattache a .fp-evenement-media (parent direct dans
   le markup) donc clippe uniquement sur la zone image, et carte entiere
   legerement desaturee via la classe .is-soon déjà posee par le PHP. Passe
   au-dessus du voile degrade (z-index 3) pour rester lisible. */
.fp-evenement-card.is-soon { filter: saturate(.5); }
.fp-evenement-ribbon {
  position: absolute;
  top: 14px;
  right: -34px;
  z-index: 3;
  width: 140px;
  padding: 5px 0;
  background: var(--fp-white);
  color: var(--fp-primary);
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--fp-ink) 12%, transparent);
}
/* Corps : positionne en bas, PAR-DESSUS le voile (z-index 2), texte blanc. */
.fp-evenement-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.fp-evenement-title {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.08;
  color: var(--fp-white);
}
/* Ligne de dates (meta fp_event_dates) : petite, icone horloge + texte, en
   blanc translucide (lisible sur le voile sombre). */
.fp-evenement-dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--fp-white) 88%, transparent);
}
.fp-evenement-dates-icon { display: inline-flex; width: 15px; height: 15px; }
.fp-evenement-dates-icon svg { width: 100%; height: 100%; }
/* Bouton pill PRIMARY (fiche) sous le titre/dates : fond primary, texte
   blanc, Bebas. */
/* Le bouton porte desormais les classes standard du site (.fp-btn), on ne
   redefinit donc NI fond, NI couleur, NI rayon, NI transition : ce sont celles
   du composant. Seuls le calage et une taille un peu plus compacte (le bouton
   vit dans une carte) restent ici. */
.fp-evenement-more {
  margin-top: 4px;
  padding: 10px 18px;
  font-size: .85rem;
}
/* La carte ENTIERE est le lien : le survol se produit donc sur elle, jamais sur
   le bouton. On rejoue ici l'état de survol du composant (remplissage, fleche
   qui se deploie, souleve) pour que le bouton reagisse comme partout ailleurs. */
.fp-evenement-card:hover .fp-evenement-more {
  transform: translateY(-2px);
  box-shadow: var(--fp-shadow-lg);
  color: var(--fp-primary);
  padding-right: 46px;
}
.fp-evenement-card:hover .fp-evenement-more::before { width: 100%; }
.fp-evenement-card:hover .fp-evenement-more .fp-arr {
  width: 15px;
  opacity: 1;
  transform: translateX(0);
  margin-left: 9px;
}
@media (prefers-reduced-motion: reduce) {
  .fp-evenement-card:hover .fp-evenement-more { transform: none; }
}
@media (max-width: 640px) {
  .fp-evenement-card { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Bouton "Voir tous les evenements" centre sous la grille. */
.fp-evenements-more { margin-top: 40px; text-align: center; }

/* 9. WIDGET mascotte flottant : retire du site le 2026-07-25 (le chat passe
   sur Odoo). Rendu PHP, JS et CSS de base supprimes ; le style de sa bulle
   « Funny » qui vivait ici n'a donc plus d'élément a habiller. */

/* ==========================================================================
   11. SPLIT (auberge/evenement en zone fp-blk-split, image + texte). Colonnes
   ~59/32 (fiche, au lieu du 1fr/1fr generique) : texte large a gauche,
   colonne image ETROITE a droite (petite vignette, pas une demi-largeur).
   Colonne texte : eyebrow Bebas 24px/400 primary, titre sombre 3.3rem
   (bouton primary deja correct par defaut via .fp-btn-primary). Colonne
   image : photo verticale radius 25px (media mesure RParc ~520x658,
   portrait), min-height rapprochee de cette mesure, margin-bottom -29px.
   ========================================================================== */
.page-template-template-home .fp-split { grid-template-columns: 1.85fr 1fr; }
/* SUPPRIME : la surcharge .fp-split-text .fp-eyebrow (taille/graisse/couleur du
   sur-titre pour la seule section split de l'accueil). Le sur-titre est le
   composant icon-box partage, defini uniquement dans main.css. */
.page-template-template-home .fp-split-text .fp-lead {
  color: var(--fp-ink);
  font-size: 3.3rem;
}
.page-template-template-home .fp-split-media {
  min-height: 560px;
  margin-bottom: -29px;
}
.page-template-template-home .fp-split-photo {
  border-radius: 25px;
}
@media (max-width: 860px) {
  .page-template-template-home .fp-split { grid-template-columns: 1fr; }
  .page-template-template-home .fp-split-media { min-height: 320px; margin-bottom: 0; }
}

/* MACARON anime (mise en avant, ex. « Ouverture . Aout 2026 ») : en avance de
   phase, markup ajoute en parallele dans .fp-split-media (contrat convenu :
   .fp-macaron > .fp-macaron-main + .fp-macaron-sub). Cercle chevauchant la
   photo en BAS-DROITE (fiche : bottom 12% / right 0, pas en haut), fond
   radial derive de la primaire (aucun hex en dur, color-mix uniquement),
   anneau pointille en rotation lente + pulse d'ombre douce. pointer-
   events:none : le macaron est un ornement, jamais un obstacle au clic sur
   la photo/le lien de la carte. */
.page-template-template-home .fp-macaron {
  position: absolute;
  bottom: 12%;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--fp-primary), var(--fp-white) 30%) 0%, var(--fp-primary) 60%);
  animation: fp-macaron-pulse 3s ease-in-out infinite;
}
/* Anneau interieur pointille, en rotation lente continue. */
.page-template-template-home .fp-macaron::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--fp-white) 35%, transparent);
  animation: fp-macaron-spin 20s linear infinite;
}
.page-template-template-home .fp-macaron-main {
  font-family: var(--fp-font-heading);
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fp-white);
}
.page-template-template-home .fp-macaron-sub {
  font-size: 25px;
  line-height: 1;
  color: color-mix(in srgb, var(--fp-white) 90%, transparent);
}
@keyframes fp-macaron-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes fp-macaron-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fp-primary) 45%, transparent); }
  50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--fp-primary) 0%, transparent); }
}
/* Mobile (fiche) : macaron 130px, tailles de texte reduites (main 20px /
   sub 12px), reste en bas-droite de la photo. */
@media (max-width: 860px) {
  .page-template-template-home .fp-macaron {
    width: 130px;
    height: 130px;
    bottom: 12%;
    right: 0;
  }
  .page-template-template-home .fp-macaron-main { font-size: 20px; }
  .page-template-template-home .fp-macaron-sub { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-home .fp-macaron,
  .page-template-template-home .fp-macaron::before {
    animation: none;
  }
}

/* ==========================================================================
   12. FAQ (multi-titres a gauche, 7 h3 accordeon) : rythme vertical ~6px
   mesure RParc entre les items (le composant générique .fp-faq-item est plus
   are, surcharge locale pour ne pas impacter les autres pages avec FAQ).
   ========================================================================== */
.page-template-template-home .fp-faq-item { margin-bottom: 6px; }
.page-template-template-home .fp-faq-item:last-child { margin-bottom: 0; }

/* ==========================================================================
   13. FOOTER : formulaire newsletter ~440px de large mesure RParc (le
   composant générique .fp-newsletter n'a pas de largeur fixe, surcharge
   locale scope accueil).
   ========================================================================== */
.page-template-template-home .fp-footer-newsletter .fp-newsletter { max-width: 440px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .fp-intro-blob { width: min(360px, 80vw); }
}

/* ==========================================================================
   PASSE TABLETTE, CARTE « APERÇU MAGIC KIDS ».

   Première passe (2026-08-24) : la colonne image était plafonnée en valeur
   ABSOLUE (350 px) alors que la carte n'en fait que 611 à 768 px de fenêtre,
   marge interne et gouttière retirées ; il ne restait que 154 px pour le
   texte (titre sur quatre lignes, pastilles empilées). Un PLANCHER de 280 px
   avait été donné à la colonne de texte, l'image cédant la place.

   Seconde passe (2026-09-10), mesures reprises sur le site en ligne : ce
   plancher de 280 px ne suffit pas. À 768 px le texte se hache en lignes de
   trente caractères et les six pastilles s'empilent une par ligne ; à 1024 px
   la colonne tombe même à 258 px, PLUS ÉTROITE qu'à 768 px, puisque la bande
   n'était bornée qu'à 980 px et que l'image reprend 440 px au-dessus. Le
   texte ne redevient confortable qu'au-delà de 1150 px de fenêtre.

   Deux traitements selon la place réellement disponible :
   - 721 à 900 px : une SEULE colonne, texte puis image, comme sous 720 px
     mais sans le centrage ni le compactage des pastilles réservés au
     téléphone. Le texte passe de 280 à 534 px, l'image de 224 à 534 px.
   - 901 à 1100 px : deux colonnes conservées (la tablette en paysage a la
     largeur pour), image resserrée de 440 à 320 px. À 1024 px, le texte passe
     de 258 à 387 px.
   Au-delà de 1100 px, la mise en page d'origine reprend, inchangée. Rien sous
   721 px n'est évalué : le mobile validé reste intact.
   ========================================================================== */
@media (min-width: 721px) and (max-width: 900px) {
  .page-template-template-home .fp-kap-carte {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  /* Le plancher de 200 px servait à tenir la colonne image quand elle était
     étroite ; en pleine largeur, le cadre 4/3 donne lui-même la hauteur. */
  .page-template-template-home .fp-kap-visuel { min-height: 0; }
  .page-template-template-home .fp-kap-lead { max-width: none; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .page-template-template-home .fp-kap-carte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 32px;
  }
}

/* ==========================================================================
   PASSE TABLETTE (2026-09-10), SECTION PRÉSENTATION.

   Mesures reprises sur le site en ligne, deux défauts distincts selon la
   largeur :

   a) 721 à 900 px, la grille est déjà passée en une colonne (main.css), mais
      la photo garde sa largeur de colonne étroite, min(360px, 80vw), soit
      360 px au milieu d'un bloc de 611 px : elle flotte centrée avec 125 px
      de vide de chaque côté pendant que le titre et le texte, eux, vont d'un
      bord à l'autre. La photo prend donc toute la largeur, comme le texte.
      Règle scopée :has(.fp-cluster-photo), SEULE dans sa liste (piège 5f du
      CLAUDE.md) : sans photo déposée, l'ancien cluster décoratif (patte et
      pastilles positionnées en pourcentages) garde ses 360 px.

   b) 901 à 1100 px, la grille 1.1fr / .9fr laisse 354 px au texte à 1024 px.
      Le titre casse alors sur trois lignes avec « ÂGE » seul sur la dernière,
      et le paragraphe justifié (choix assumé plus haut dans cette feuille, la
      cliente refuse la césure) ouvre de larges rivières blanches. La colonne
      image passe en valeur absolue, 340 px : le texte remonte à 462 px, le
      titre tient sur deux lignes et le justifié redevient propre.
   ========================================================================== */
@media (min-width: 721px) and (max-width: 900px) {
  .page-template-template-home .fp-intro-blob:has(.fp-cluster-photo) { width: 100%; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .page-template-template-home .fp-intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 40px;
  }
}

/* ==========================================================================
   PASSE TABLETTE (2026-09-10), SECTION RESTAURATION (.fp-ravito).

   Sous 950 px l'en-tête passe sur une seule colonne (bloc plus haut dans
   cette feuille, seuil relevé le même jour). Reste la bande 951 à 1100 px,
   où les colonnes 40 / 58 ne donnent que 404 px à gauche à 1024 px : les
   deux boutons, « Réserver une table » (171 px) et « Commander à
   l'emporter » (203 px), passaient l'un sous l'autre avec des largeurs
   inégales, alors qu'ils tiennent côte à côte dès 386 px. Les colonnes
   passent à 48 / 46 : la gauche gagne de quoi les aligner sur une ligne avec
   de la marge si un libellé s'allonge, la droite garde 387 px pour le
   paragraphe justifié.
   ========================================================================== */
@media (min-width: 951px) and (max-width: 1100px) {
  .page-template-template-home .fp-ravito .fp-section-head-center {
    grid-template-columns: 48% 46%;
  }
}

/* TITRE DU HÉRO : JAMAIS PEINT AVANT SON ANIMATION (Marino, 2026-09-11 :
   « pas le h1 de la home, j'ai encore, ça switch rapidement »).

   main.js pose .fp-anim-h sur les titres pour les masquer puis les révéler,
   mais il vit en pied de page : le navigateur a déjà peint le titre quand la
   classe arrive. Un correctif précédent avait supprimé le fondu de
   DISPARITION ; restait l'apparition fugace, bien visible sur téléphone.

   La classe html.fp-h-anim est posée depuis le <head>, donc avant tout rendu
   (voir fun_planet_hero_titre_anti_flash, functions.php). Même mécanique que
   html.fp-r-anim sur la page Restauration.

   :not(.fp-anim-h) est le filet qui compte : dès que main.js a pris la main,
   cette règle cesse de s'appliquer et la cascade d'origine reprend. Sans lui,
   sa spécificité aurait battu .fp-anim-h.is-visible et le titre serait resté
   invisible. Le second filet est dans le script lui-même, qui retire la classe
   au bout de deux secondes et demie s'il ne s'est rien passé.

   Opacité SEULE, aucun transform : le titre garde sa place exacte dans la mise
   en page, donc aucun décalage au moment de la révélation. */
html.fp-h-anim .page-template-template-home .fp-hero-title:not(.fp-anim-h) {
  opacity: 0;
}