/* ==========================================================================
   activites.css - le HUB des activites (/activites/).
   Charge via is_page_template('template-activites.php'), APRES activite.css
   (voir fun_planet_enqueue_per_template, functions.php).

   Deux sections propres a cette page, rendues par inc/hub-activites.php :
     1. le HAUT DE PAGE (.fp-hub-hero) : aplat teal + motif em-topo en
        filigrane, pastille sombre, tres grand titre, accroche centree, et la
        bande de bowling (boule a gauche, quille a droite) animee au scroll ;
     2. la GRILLE (.fp-hub-grille) : le listing de toutes les activites, qui
        REUTILISE la carte immersive du carrousel « Decouvrez nos autres
        activites ». Tout son habillage vient d'activite.css (scope
        « .fp-detail .fp-related ») : ici on ne pose QUE la mise en grille et
        la pastille Magic Kids. Aucune regle de carte n'est recopiee : une
        seule carte dans le theme, un seul endroit ou la faire evoluer.

   Couleurs : tokens var(--fp-*) UNIQUEMENT (aucun #hex tolere par
   check-zones). Scope systematique : .page-template-template-activites
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HAUT DE PAGE

   Meme recette de fond que le bandeau de la page Anniversaire et que la page
   404 (les deux seules autres sections du theme qui posent un aplat teal
   pleine largeur avec le motif em-topo) : on ne la reinvente pas. Le teal est
   assombri vers secondary-dark (82 % / 18 %) pour garder de la marge de
   contraste au texte blanc : blanc sur --fp-primary pur tombe a 4,84:1, sur ce
   fond-ci le contraste mesure 5,87:1 (seuil AA texte courant : 4,5:1).

   Retrait sous la barre de navigation : la page est en fp-has-dark-hero
   (header.php), la barre flotte donc par-dessus le haut de la section, il faut
   lui reserver sa hauteur. Le padding du bas, lui, reserve la place de la
   bande de bowling posee tout en bas.
   -------------------------------------------------------------------------- */
.page-template-template-activites .fp-hub-hero {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--fp-primary) 82%, var(--fp-secondary-dark) 18%);
  color: var(--fp-white);
  padding: calc(var(--fp-nav-h) + clamp(40px, 6vw, 72px)) 0 clamp(140px, 15vw, 200px);
}
/* Motif en COUVERTURE (jamais de bande d'aplat nu sur les cotes, quelle que
   soit la largeur de fenetre : le fichier em-topo.svg porte son propre aplat,
   un peu plus clair que le fond de la section, et cela se verrait). */
/* MOTIF EN MOUVEMENT (Marino, 10.09.2026 : « remets du mouvement animé sur
   l'em-topo »). Même recette que l'accueil et les zones Tarifs : débord de
   14 %, zoom 1,12, dérive lente en alternance, transform seul, coupée sous
   prefers-reduced-motion. La section est déjà en overflow: hidden. */
.page-template-template-activites .fp-hub-hero-motif {
  position: absolute;
  inset: -14%;
  z-index: 0;
  background-image: url('../img/em-topo.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: .3;
  pointer-events: none;
  transform: scale(1.12);
}
@media (prefers-reduced-motion: no-preference) {
  .page-template-template-activites .fp-hub-hero-motif {
    animation: fp-hub-hero-motif-derive 20s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes fp-hub-hero-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-activites .fp-hub-hero-motif { animation: none; will-change: auto; }
}
.page-template-template-activites .fp-hub-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vw, 26px);
  text-align: center;
}
/* Pastille : aplat vert tres fonce, texte blanc (contraste 15,6:1), icone
   eclair. Elle n'est pas cliquable : aucune contrainte de cible tactile. */
/* La pastille est désormais l'iconbox commune du site (fp_icon_box, .fp-ibox,
   variante fp-fond-sombre de main.css) : plus d'habillage maison ici, seule
   l'enveloppe reste pour l'espacement. */
.page-template-template-activites .fp-hub-hero-pastille {
  display: inline-flex;
  margin: 0;
}
/* Titre : la police de titre en capitales, aussi grand que la largeur le
   permet. Le plafond de 5.2rem tient la composition sur trois lignes maxi a
   1920 px ; le plancher de 2.15rem tient « ACTIVITES, » sur une ligne des
   320 px (mesure au banc). */
.page-template-template-activites .fp-hub-hero-titre {
  margin: 0;
  max-width: 18ch;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  font-size: clamp(2.15rem, 6vw, 5.2rem);
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--fp-white);
  text-wrap: balance;
}
/* SAUT DE LIGNES AU CHARGEMENT MOBILE (Marino, 10.09.2026, iPhone reel). Cause
   racine PROUVEE par mesure (bloquer le fichier Bebas Neue et comparer) : ce
   n'est PAS le decoupage caractere par caractere du titre (le meme ecart de
   lignes se reproduit texte plein, sans aucun split JS), c'est le repli
   metrique lui-meme, qui reste en moyenne a 100% mais a un ecart residuel
   documente plus haut (REPLI METRIQUE DE BEBAS NEUE, main.css : jusqu'a 2,8%
   sur Arial, la police repli reelle sur iOS). Sur ce titre precis, edite par
   la cliente (« 50 activites indoor a Magic Parc ! »), le plafond de 18ch
   place la composition juste au bord du passage a la ligne : le repli (un
   peu plus large que Bebas) bascule sur TROIS lignes le temps que la vraie
   police arrive, puis le texte se rabat sur DEUX lignes des que Bebas Neue
   est prete, ce qui deplace tout le contenu sous le titre. Corrige en donnant
   un peu plus de largeur au titre SOUS 720px SEULEMENT (le plafond desktop
   18ch reste inchange, demande explicite du client) : les deux polices
   composent alors « 50 ACTIVITES INDOOR » sur la meme premiere ligne, plus
   aucun ecart entre le repli et Bebas Neue, donc plus de saut. Mesure au banc
   (Playwright, Bebas bloquee vs chargee) : lignes identiques a 360, 390 et
   430px avec cette largeur, contre un ecart de 3 vs 2 lignes avant correctif. */
@media (max-width: 720px) {
  .page-template-template-activites .fp-hub-hero-titre {
    max-width: 20ch;
  }
}
/* Accroche : deux lignes centrees sous le titre. Blanc a 92 %, contraste
   mesure 5,12:1 (texte courant, seuil 4,5:1). */
.page-template-template-activites .fp-hub-hero-accroche {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--fp-white) 92%, transparent);
}

/* --------------------------------------------------------------------------
   Bande de bowling (markup commun a l'accueil, fp_render_bowling_strip,
   inc/sections.php). L'accueil la place a sa maniere dans home.css ; ici elle
   est calee sur le bas du haut de page, avec des tailles propres a une
   banniere : la boule DEBORDE volontairement du cadre a gauche (elle est
   rognee par l'overflow: hidden de la section, comme sur le modele fourni), la
   quille reste entiere a droite.

   Le mouvement (la boule roule et renverse la quille) est porte par
   GSAP/ScrollTrigger (setupBowling, assets/js/main.js). Sans GSAP (CDN
   injoignable) ou en mouvement reduit, aucune transformation n'est appliquee :
   les deux visuels restent exactement ou ce bloc les pose, ce qui est un etat
   fini et propre, jamais un milieu de course.
   -------------------------------------------------------------------------- */
.page-template-template-activites .fp-hub-hero .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-right: clamp(16px, 5vw, 90px);
  pointer-events: none;
}
.page-template-template-activites .fp-hub-hero .fp-bowling-ball {
  width: clamp(58px, 7vw, 96px);
  height: auto;
  /* Sortie partielle a gauche : environ un tiers de la boule hors cadre. */
  margin-left: clamp(-32px, -2.4vw, -18px);
}
.page-template-template-activites .fp-hub-hero .fp-bowling-pin {
  width: auto;
  height: clamp(104px, 13vw, 190px);
}

/* --------------------------------------------------------------------------
   2. GRILLE DE TOUTES LES ACTIVITES

   La section reprend .fp-related (donc tout l'habillage d'activite.css, plan
   du parc en filigrane compris). Deux reglages seulement :
    - une respiration un peu moins haute que sur les pages de detail, ou le
      carrousel debordait sous la section ;
    - la mise en grille elle-meme.
   -------------------------------------------------------------------------- */
.page-template-template-activites .fp-hub-grille {
  padding: var(--fp-section-y) 0;
}
/* Mobile d'abord : une carte par ligne. Puis 2 des 620px (grand telephone en
   paysage, petite tablette), 3 des 1024px (tablette en paysage et ordinateur).
   Memes paliers que le carrousel des pages d'activite, pour que le site garde
   le meme rythme de rupture d'un ecran a l'autre. */
.page-template-template-activites .fp-hub-grille-cartes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 34px;
}
@media (min-width: 620px) {
  .page-template-template-activites .fp-hub-grille-cartes {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}
@media (min-width: 1024px) {
  .page-template-template-activites .fp-hub-grille-cartes {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: 44px;
  }
}
/* Le repere de focus au clavier est celui du site (:focus-visible global,
   main.css) : il se dessine EN DEHORS de la carte, l'overflow: hidden de
   celle-ci ne peut donc pas le rogner. On ne le redefinit pas, on verifie
   juste qu'il ne passe pas sous la carte voisine. */
.page-template-template-activites .fp-hub-grille .fp-card:focus-visible {
  z-index: 2;
}

/* Pastille MAGIC KIDS : le seul ecart entre une carte de la zone enfants et les
   autres. Une pastille plutot qu'une teinte de carte : la carte est une photo,
   toute teinte generale y serait soit invisible, soit une seconde charte ; la
   pastille, elle, reprend le vocabulaire deja utilise partout sur le site
   (pastilles de sur-titre, badges) et se lit du premier coup d'oeil. Teal
   clair de la palette sur texte vert tres fonce : contraste mesure 7,46:1,
   lisible quelle que soit la photo dessous. Posee a gauche, en face de la chip
   fleche qui occupe deja le coin droit. */
.page-template-template-activites .fp-hub-grille .fp-card-kids {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--fp-pill);
  background: var(--fp-accent);
  color: var(--fp-secondary-dark);
  font-family: var(--fp-font-body);
  font-weight: 700;
  font-size: .74rem;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.page-template-template-activites .fp-hub-grille .fp-card-kids .fp-i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   3. LE RESTE DE LA PAGE (sections communes, inchangees)

   Motif de « pattes » en bas de l'introduction, facon RParc : fond decoratif
   pose en fallback editable derriere la section.
   -------------------------------------------------------------------------- */
.page-template-template-activites .fp-intro {
  position: relative;
}
.page-template-template-activites .fp-intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background-image: url(../img/rp-bg-pattes-color-100-1024x320.webp);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  opacity: 0.5;
  pointer-events: none;
}
.page-template-template-activites .fp-intro .fp-inner {
  position: relative;
  z-index: 1;
}
/* Intro : titre large, prose centree, respiration genereuse facon RParc. */
.page-template-template-activites .fp-intro .fp-lead {
  max-width: 26ch;
}
.page-template-template-activites .fp-intro-body {
  margin-top: 22px;
}

/* CTA de cloture : un cran plus genereux, fond image avec overlay marque. */
.page-template-template-activites .fp-cta-section {
  padding: calc(var(--fp-section-y) + 8px) 0;
}
.page-template-template-activites .fp-cta-photo {
  opacity: 0.4;
}