/* ==========================================================================
   Fun Planet Rennaz - main.css
   Tokens centralises (:root) + base + chrome (nav, footer) + composants de
   sections. Tout lit var(--fp-*). Les couleurs/polices se finalisent via les
   tokens ci-dessous ou la section Customizer « Identite visuelle » (surcharge).
   La mise en page reproduit la structure RParc (cases, bordures, grilles).
   ========================================================================== */

:root {
  /* — Palette identique au Raiffeisen Parc (valeurs reelles extraites du site
       source). On reproduit la DA a l'identique ; seul le texte change. — */
  --fp-primary: #2a7e74;        /* teal principal (boutons, accents) */
  --fp-primary-dark: #004c45;   /* teal fonce (secondaire) */
  --fp-secondary: #004c45;      /* teal fonce */
  --fp-secondary-dark: #002f29; /* vert tres fonce (ombres, sections sombres) */
  --fp-accent: #7ebbb5;         /* teal clair / sauge (accent) */
  --fp-ink: #1b1b1b;            /* texte */
  --fp-ink-soft: #5a5a5a;
  --fp-paper: #ffffff;
  --fp-cream: #f7fffe;          /* fond carte / clair (RParc card bg) */
  --fp-sand: #e5dbd0;           /* palette sable secondaire RParc */
  --fp-dark: #002f29;           /* sections sombres / footer */
  --fp-white: #ffffff;
  --fp-danger: #c0392b;         /* rouge (badge "ferme" du popup horaires) */

  /* — Lignes — */
  --fp-line: rgba(27, 27, 27, 0.12);
  --fp-line-strong: rgba(42, 126, 116, 0.4);
  --fp-line-light: rgba(255, 255, 255, 0.2);

  /* — Typo (identique au RParc) — */
  --fp-font-heading: 'Bebas Neue', 'Anton', system-ui, sans-serif;        /* display capitales */
  --fp-font-display: 'Thoge', 'Bebas Neue', system-ui, sans-serif;        /* gros titres (Thoge, fallback Bebas) */
  --fp-font-body: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fp-font-accent: 'Roboto', system-ui, sans-serif;
  --fp-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — Rythme / chrome — */
  /* Largeur globale du site : valeur par defaut RParc (.em-hero / .em-content
     du CSS source, --content-width: min(1300px, 90%)). Source unique pour
     toutes les sections via .fp-wrap ; une section qui doit devier localement
     (ex. tarifs 1500px, intro 1400px sur le source) pose --fp-wrap: <valeur>
     directement sur son propre selecteur de section (la variable est deja
     consommee par .fp-wrap, aucune autre modif necessaire). 90vw (pas 90%) :
     .fp-wrap n'a pas toujours un parent a largeur explicite, vw fiabilise
     le garde-fou responsive quel que soit le contexte d'imbrication. */
  --fp-wrap: min(1300px, 90vw);
  --fp-gutter: 40px;
  --fp-gutter-mobile: 20px;
  --fp-section-y: 96px;
  --fp-section-y-sm: 64px;
  --fp-radius-sm: 12px;
  --fp-radius: 20px;            /* --em-border-radius RParc */
  --fp-radius-lg: 24px;         /* cartes RParc */
  --fp-pill: 30px;             /* boutons pilule RParc */
  --fp-nav-h: 76px;
  /* Hauteur compacte de la nav une fois "collee" au scroll (tache shrink) :
     UNIQUEMENT consommee via .fp-nav.is-stuck, jamais en :root global, pour
     ne jamais changer le calage de .fp-hero/.fp-page-hero/.fp-404/inset mobile
     (tous lisent --fp-nav-h de base, valeur inchangee). */
  --fp-nav-h-stuck: 60px;

  /* — Elevations (teal, identiques au RParc) — */
  --fp-shadow: 0 4px 20px rgba(42, 126, 116, 0.15);
  --fp-shadow-lg: 0 8px 30px rgba(42, 126, 116, 0.25);
  --fp-shadow-strong: 0 12px 40px rgba(42, 126, 116, 0.6);

  /* Apparition (fade-in-up) : duree et courbe de REFERENCE, partagees par toutes
     les animations d'apparition du site (offres, reveal, titres). Un peu plus
     lente que l'ancien 0.9s (demande client : se caler sur les offres, un peu
     plus doux). Ajuster ici change la vitesse partout d'un coup. */
  --fp-anim-dur: 1.1s;
  --fp-anim-ease: cubic-bezier(.16, 1, .3, 1);
}

/* — Reset leger — */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* FIX CAUSE RACINE scroll bloque : le scroll DOIT rester sur le viewport
   (window). html/body ne fixent JAMAIS de height ni d'overflow-y contraint
   (seul overflow-x:hidden est tolere pour eviter le scroll horizontal des
   decors pleine largeur). Aucun wrapper (#fp-content/.fp-site-main) ne doit
   devenir un conteneur de scroll interne (height:100vh + overflow:auto) :
   s'il fallait un jour limiter la hauteur visible d'un composant, cibler ce
   composant precisement, jamais html/body/#fp-content. */
html { scroll-behavior: smooth; height: auto; overflow-y: visible; }
body {
  font-family: var(--fp-font-body);
  background: var(--fp-paper);
  color: var(--fp-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.6;
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
}
/* Wrapper principal (header.php : <main id="fp-content" class="fp-site-main">) :
   jamais de height/overflow qui capturerait le scroll a sa place. */
#fp-content.fp-site-main { height: auto; overflow: visible; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Energie RParc : titres en MAJUSCULES, gras, serres. */
h1, h2, h3, h4 { font-family: var(--fp-font-heading); font-weight: 700; line-height: 1.05; letter-spacing: .005em; text-transform: uppercase; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }
p { margin: 0 0 1em; }
/* Mot accent (dernier mot du titre du hero, facon RParc). */
.fp-accent-word { color: var(--fp-accent); }

/* — Accessibilite — */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}
.fp-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--fp-primary); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; }
.fp-skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--fp-secondary); outline-offset: 2px; }

/* — Conteneur — */
.fp-wrap { max-width: var(--fp-wrap); margin: 0 auto; padding: 0 var(--fp-gutter); }
.fp-inner { position: relative; z-index: 2; }
@media (max-width: 720px) { .fp-wrap { padding: 0 var(--fp-gutter-mobile); } }

/* — Sections : variantes de fond — */
section { position: relative; }
.fp-s-light { background: var(--fp-paper); padding: var(--fp-section-y) 0; }
.fp-s-cream { background: var(--fp-cream); padding: var(--fp-section-y) 0; }
.fp-s-accent { background: var(--fp-secondary); color: #fff; padding: var(--fp-section-y) 0; }
.fp-s-primary { background: var(--fp-primary); color: #fff; padding: var(--fp-section-y) 0; }
.fp-s-dark { background: var(--fp-dark); color: #fff; padding: var(--fp-section-y) 0; }
.fp-s-image { color: #fff; }
@media (max-width: 720px) {
  .fp-s-light, .fp-s-cream, .fp-s-accent, .fp-s-primary, .fp-s-dark { padding: var(--fp-section-y-sm) 0; }
}

/* En-tete de section (centre facon RParc) : eyebrow + titre + sous-titre. */
.fp-section-head { margin-bottom: 8px; }
.fp-section-head-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.fp-section-head-center .fp-lead, .fp-section-head-center .fp-lead-light { max-width: 24ch; }
.fp-section-sub { margin: 10px auto 0; max-width: 64ch; opacity: .92; }
.fp-s-primary .fp-section-sub { color: rgba(255,255,255,.92); }

/* — Eyebrow — */
.fp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fp-font-heading); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fp-primary); margin-bottom: 14px; }
.fp-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fp-accent); }
.fp-eyebrow-light { color: #fff; }
.fp-eyebrow-light .fp-eyebrow-dot { background: var(--fp-accent); }

.fp-lead { font-family: var(--fp-font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.05; font-size: clamp(1.7rem, 3vw, 2.6rem); max-width: 22ch; }
.fp-lead-light { color: #fff; font-family: var(--fp-font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.05; font-size: clamp(1.7rem, 3vw, 2.6rem); max-width: 22ch; }
.fp-prose { max-width: 68ch; }
.fp-prose p { color: var(--fp-ink-soft); }
.fp-prose strong { color: var(--fp-ink); font-weight: 800; }

/* Boutons (systeme transversal, utilise partout : header, hero, sections,
   footer) : pilule, Bebas Neue MAJUSCULE, un fond glisse de gauche a droite
   au survol (::before width 0->100%) et la fleche apparait a droite (elle
   s ouvre, le padding-right se libere). Quatre variantes existantes. */
.fp-btn {
  position: relative; z-index: 1; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0; cursor: pointer;
  font-family: var(--fp-font-heading); font-weight: 400; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 14px 28px; border-radius: var(--fp-pill); border: 1px solid transparent;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  text-decoration: none; line-height: 1; white-space: nowrap;
}
/* Le fond qui glisse (remplissage gauche -> droite). */
.fp-btn::before {
  content: ''; position: absolute; top: 0; left: 0; z-index: -1;
  width: 0; height: 100%; transition: width .4s ease;
}
.fp-btn:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-lg); }
.fp-btn:hover::before { width: 100%; }
/* La fleche : repliee par defaut, s ouvre au survol (direction auto cote
   PHP, .fp-btn-down inverse le sens). Le padding-right supplementaire ne
   s'applique qu'aux boutons qui CONTIENNENT reellement une fleche
   (selecteur :has) : les boutons sans fleche inline (ex. .fp-nav-cta) ne
   subissent aucun agrandissement, donc pas de trou au survol. */
.fp-btn .fp-arr { width: 0; opacity: 0; overflow: hidden; transform: translateX(-6px); transition: width .3s ease, opacity .3s ease, transform .3s ease, margin .3s ease; }
.fp-btn:has(.fp-arr):hover { padding-right: 46px; }
.fp-btn:hover .fp-arr { width: 15px; opacity: 1; transform: translateX(0); margin-left: 9px; }
/* Variante fleche vers le bas (ancre de la meme page, ex. #restauration) :
   la fleche pointe deja vers le bas cote SVG (fp_arrow('down')), aucune
   transformation supplementaire requise ici (repli sans effet si la classe
   est absente du markup). */
.fp-btn-down:hover .fp-arr { transform: translateY(2px); }
/* primary : fond teal, texte blanc -> se remplit en blanc, le texte passe teal. */
.fp-btn-primary { background: var(--fp-primary); color: var(--fp-white); border-color: var(--fp-primary); box-shadow: var(--fp-shadow); }
.fp-btn-primary::before { background: var(--fp-white); }
.fp-btn-primary:hover { color: var(--fp-primary); }
/* light : fond blanc, texte teal -> se remplit en teal, le texte passe blanc. */
.fp-btn-light { background: var(--fp-white); color: var(--fp-primary); border-color: var(--fp-white); box-shadow: var(--fp-shadow); }
.fp-btn-light::before { background: var(--fp-primary); }
.fp-btn-light:hover { color: var(--fp-white); }
/* ghost : transparent bordure teal -> se remplit en teal, le texte passe blanc. */
.fp-btn-ghost { background: transparent; color: var(--fp-primary); border-color: var(--fp-primary); }
.fp-btn-ghost::before { background: var(--fp-primary); }
.fp-btn-ghost:hover { color: var(--fp-white); }
/* ghost-light : transparent bordure blanche -> se remplit en blanc, texte teal. */
.fp-btn-ghost-light { background: transparent; color: var(--fp-white); border-color: var(--fp-line-light); }
.fp-btn-ghost-light::before { background: var(--fp-white); }
.fp-btn-ghost-light:hover { color: var(--fp-primary); border-color: var(--fp-white); }
@media (prefers-reduced-motion: reduce) {
  .fp-btn, .fp-btn::before, .fp-btn .fp-arr { transition: none; }
  .fp-btn:hover { transform: none; }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.fp-nav { position: sticky; top: 0; z-index: 100; height: var(--fp-nav-h); display: flex; align-items: center; background: var(--fp-paper); border-bottom: 1px solid var(--fp-line); transition: background .25s ease, box-shadow .25s ease, height .4s var(--fp-anim-ease); }
/* Contexte hero sombre : la barre EXTERIEURE (.fp-nav) reste un rail
   transparent pleine largeur, position fixed ; c'est .fp-nav-inner qui porte
   la pastille glass detachee (voir plus bas), pour ne pas exiger de markup
   supplementaire. Hauteur EXPLICITEMENT bornee sur --fp-nav-h (jamais "auto") :
   un height:auto laissait la barre gonfler a la taille de son contenu (cause
   du header demesure signale par le client des qu'un element interne, comme
   le logo avant son correctif, depassait sa taille prevue). */
.fp-has-dark-hero .fp-nav { position: fixed; left: 0; right: 0; height: var(--fp-nav-h); background: transparent; border-color: transparent; color: #fff; }
.fp-has-dark-hero .fp-nav.is-stuck { position: fixed; height: var(--fp-nav-h-stuck); background: transparent; color: #fff; border-color: transparent; box-shadow: none; }
.fp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
/* --- Barre glass flottante (hero sombre uniquement) : detachee du bord,
   centree via .fp-wrap (largeur var(--fp-wrap)), radius 15, fond noir
   translucide + flou, marge haute ~6px, padding vertical ~10px. --- */
.fp-has-dark-hero .fp-nav-inner {
  margin: 6px auto 0;
  padding: 10px 20px;
  border-radius: 15px;
  background: rgba(0, 0, 0, .22);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: background-color 1s ease, box-shadow .3s ease, margin .4s var(--fp-anim-ease), padding .4s var(--fp-anim-ease);
}
/* Sticky (des le scroll, classe posee par setupStickyNav, logique JS
   inchangee) : fond secondary OPAQUE + ombre, transition douce sur 1s comme
   demande (le fond glass s'estompe en teal fonce plutot que de disparaitre).
   Marge/padding reduits en meme temps que la hauteur (--fp-nav-h-stuck ci-
   dessus) pour un vrai retrecissement (tache shrink), jamais un simple
   changement de couleur. */
.fp-has-dark-hero .fp-nav.is-stuck .fp-nav-inner {
  margin-top: 0;
  padding: 6px 20px;
  background: var(--fp-secondary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}
.fp-brand { display: inline-flex; align-items: center; font-family: var(--fp-font-heading); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; color: inherit; }
/* Toutes les images de marque (logo par defaut + logo clair alternatif) :
   hauteur maitrisee explicitement sur CHAQUE selecteur (pas un seul point de
   defaillance). Cause racine du bug "logo demesure au scroll" corrigee cote
   markup (header-nav.php ne rend plus the_custom_logo() imbrique dans
   <a class="fp-brand">, qui cassait le HTML et faisait sortir l'image de ce
   perimetre CSS) : cette regle reste le filet de securite visuel, quelle que
   soit la classe posee par WordPress sur l'image. */
.fp-brand img,
.fp-brand .custom-logo,
.fp-brand-light,
.fp-brand-logo {
  max-height: 52px;
  width: auto;
  transition: max-height .4s var(--fp-anim-ease);
}
/* Wrapper logo + texte (nouveau markup) : alignement vertical propre, gap
   regulier entre l'image et le mot-logo, jamais de chevauchement. */
.fp-brand-mark { display: inline-flex; align-items: center; gap: 10px; }
/* Mini-logo texte 2 lignes dans le header (« Magic » / « Parc »), facon logo.
   Temporaire, sera remplace par le vrai logo. */
.fp-brand-text { display: inline-flex; flex-direction: column; line-height: .82; white-space: nowrap; font-family: var(--fp-font-heading); font-weight: 400; text-transform: uppercase; }
.fp-brand-text .fp-brand-l1 { font-size: .8rem; letter-spacing: .12em; }
.fp-brand-text .fp-brand-l2 { font-size: 1.7rem; }
.fp-brand-light { display: none; }
.fp-has-dark-hero .fp-nav:not(.is-stuck) .fp-brand-light { display: block; }
.fp-has-dark-hero .fp-nav:not(.is-stuck) .custom-logo { display: none; }
/* --- Vrai retrecissement au scroll (etat compact), applique desormais sur
   TOUTES les pages : voir main.js setupStickyNav, qui ne s'arrete plus au
   seul hero sombre. --fp-nav-h-stuck ne fuit jamais hors de .fp-nav.is-stuck
   (et ses descendants), donc ne touche jamais le calage de .fp-hero /
   .fp-page-hero / .fp-404 / l'inset du panneau mobile, tous restes sur
   --fp-nav-h de base. --- */
.fp-nav.is-stuck {
  height: var(--fp-nav-h-stuck);
  box-shadow: var(--fp-shadow);
}
.fp-nav.is-stuck .fp-brand img,
.fp-nav.is-stuck .fp-brand .custom-logo,
.fp-nav.is-stuck .fp-brand-light,
.fp-nav.is-stuck .fp-brand-logo {
  max-height: 38px;
}
.fp-nav.is-stuck .fp-menu a { padding-top: 6px; padding-bottom: 6px; }
/* Menu horizontal : pilule centree (flex:1) + actions (compte + Reserver) a droite. */
.fp-nav-menu { display: flex; align-items: center; gap: 18px; flex: 1; justify-content: center; }
.fp-menu { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.fp-menu li { position: relative; }
/* Nav top-level : Bebas 22px blanc(ou encre en solide), gap ~10px, hover
   plus lumineux (blanc pur), item courant teinte accent clair. */
.fp-menu a { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border-radius: var(--fp-pill); font-family: var(--fp-font-heading); font-weight: 500; font-size: 22px; text-transform: none; letter-spacing: normal; color: inherit; transition: color .2s ease, padding .4s var(--fp-anim-ease); }
.fp-menu a:hover { color: var(--fp-white); }
.fp-solid-nav .fp-menu a:hover { color: var(--fp-primary); }
.fp-menu .current-menu-item > a, .fp-menu .current_page_item > a { color: var(--fp-accent); }
/* Caret des entrees a sous-menu : c'est un <button> (voir header-nav.php),
   donc reset complet du style natif (fond/bordure) pour rester discret et
   integre au lien, jamais une boite. Desktop : purement decoratif, l'ouverture
   se fait au survol de l'item (hover/focus-within) ; pivote a l'ouverture
   (aria-expanded mobile, cf. main.js setupNav). */
.fp-menu-caret {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 2px; padding: 0; background: none; border: 0;
  color: currentColor; opacity: .85; cursor: default;
  transition: transform .2s ease, color .2s ease;
}
.fp-menu-caret svg { width: 14px; height: 14px; }
.fp-menu .menu-item-has-children:hover > a > .fp-menu-caret, .fp-menu .menu-item-has-children:hover > .fp-menu-caret { transform: rotate(180deg); color: var(--fp-accent); }
/* Sous-menus deroulants. */
.fp-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; margin: 8px 0 0; padding: 8px; list-style: none; background: var(--fp-paper); color: var(--fp-ink); border-radius: var(--fp-radius); box-shadow: var(--fp-shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 10; }
.fp-menu li:hover > .sub-menu, .fp-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fp-menu .sub-menu a { display: block; width: 100%; border-radius: var(--fp-radius-sm); color: var(--fp-ink); }
.fp-menu .sub-menu a:hover { background: var(--fp-cream); color: var(--fp-primary); }
/* Bouton Reserver du header : pill fond blanc, texte primary, police heading,
   radius pilule. Casse normale (pas de majuscules) et graisse 500, comme
   mesure sur le modele (le bouton Reserver DE LA BARRE differe volontairement
   du standard .fp-btn en majuscules ; ne pas confondre avec le bouton du
   panneau mega, cf. .fp-mega-panel .fp-btn plus bas, qui lui suit .fp-btn).
   Hover : leve + ombre douce (la fleche fp_arrow reste geree par le systeme
   .fp-btn commun, cf. plus haut). */
.fp-nav-cta {
  flex: 0 0 auto;
  padding: 10px 30px;
  background: var(--fp-white);
  color: var(--fp-primary);
  border-color: var(--fp-white);
  font-family: var(--fp-font-heading);
  font-size: 20px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 25px;
}
.fp-nav-cta:hover { color: var(--fp-primary); }
/* Burger blanc ~44px (mecanisme .is-open conserve dans main.js). */
.fp-nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 10px; color: inherit; }

.fp-has-dark-hero .fp-brand { color: var(--fp-white); }
.fp-solid-nav .fp-brand { color: var(--fp-ink); }
/* Compte : couleurs lisibles sur fond clair. */
.fp-solid-nav .fp-nav-account {
  background: color-mix(in srgb, var(--fp-paper) 86%, transparent);
  border-color: var(--fp-line);
  color: var(--fp-primary);
}
.fp-solid-nav .fp-nav-account:hover { background: var(--fp-cream); }

/* --- Compte (commun, variantes dark-hero deja ci-dessus) : icone blanche
   40px sur hero sombre, hover accent. --- */
.fp-nav-account {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--fp-line);
  background: color-mix(in srgb, var(--fp-paper) 86%, transparent);
  color: var(--fp-primary); transition: transform .15s ease, background .2s ease, color .2s ease;
}
.fp-nav-account:hover { transform: translateY(-2px); background: var(--fp-paper); }
.fp-nav-account svg { width: 20px; height: 20px; }
.fp-has-dark-hero .fp-nav-account {
  background: transparent;
  border-color: rgba(255, 255, 255, .3);
  color: var(--fp-white);
}
.fp-has-dark-hero .fp-nav-account:hover { color: var(--fp-accent); border-color: var(--fp-accent); background: transparent; }

/* --- Conteneur actions droite --- */
.fp-nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* --- Pilule interne du menu : neutralisee (fond dans la pastille glass
   unique portee par .fp-nav-inner). --- */
.fp-nav-pill {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; background: transparent; border: 0;
  box-shadow: none; padding: 0; max-width: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* Logo image : hauteur deja maitrisee plus haut (regle groupee .fp-brand img,
   .fp-brand .custom-logo, .fp-brand-light, .fp-brand-logo), rien a redefinir
   ici (le gap avec le texte vient de .fp-brand-mark, plus de margin-right ici
   pour eviter un double espacement). */

@media (prefers-reduced-motion: reduce) {
  .fp-nav { transition: background .25s ease, box-shadow .25s ease; }
  .fp-has-dark-hero .fp-nav-inner { transition: none; }
  .fp-nav-account { transition: none; }
  .fp-brand img, .fp-brand .custom-logo, .fp-brand-light, .fp-brand-logo { transition: none; }
  .fp-menu a { transition: color .2s ease; }
}

/* ==========================================================================
   Mega-menu (fonctionnement conserve : hover desktop / toggle mobile).
   Panneau LARGEUR MOYENNE (756px, fidele au modele mesure : mega2.mjs sur
   raiffeisen-parc.ch/ -> jet-mega-menu-mega-container width:756 top:71
   radius:20), ancre sous l'item de premier niveau survole, COLLE au bas de
   la barre (zero espace qui casse le survol) : 2 col liens + panneau teinte
   lateral.
   ========================================================================== */
/* Desktop (>=1025px) UNIQUEMENT : le referent de positionnement du panneau
   est l'item survole lui-meme (.fp-has-mega), pas la barre de nav, comme
   sur le modele (le panneau y demarre exactement au meme left que le <li>
   survole : mesure, left du <li> = left du panneau). .fp-menu li pose deja
   position:relative en general (regle plus haut) : ancien correctif de
   specificite retire ici, il forcait .fp-has-mega en position:static et
   faisait donc calculer .fp-mega (alors en width:100%) par rapport a
   .fp-nav-inner (pleine largeur), d'ou le bug du panneau a 1296px au lieu
   de 756px. En mobile (<=1024px), .fp-has-mega et .fp-mega restent static,
   dans le flux de l'accordeon (regles dediees plus bas, inchangees). */
@media (min-width: 1025px) {
  .fp-menu li.fp-has-mega { position: relative; }
}
/* Pont de survol anti-fermeture (bug critique corrige) : .fp-mega colle
   SANS AUCUN ESPACE au bord bas de l'item (top:100%, ni margin ni padding-
   top ici) et englobe tout le panneau visuel jusqu'a son radius bas : la
   zone hoverable (.fp-mega, position:absolute) est donc un rectangle
   continu depuis le bas du <li> jusqu'au bas du panneau blanc, sans le
   moindre trou ou la souris pourrait « sortir » du survol en descendant.
   Le leger espace VISUEL entre la barre et le panneau (dixieme de px sur le
   modele, quasi colle) vient uniquement du margin-top de .fp-mega-inner :
   comme .fp-mega-inner est lui-meme dans .fp-mega (deja hoverable), ce
   margin ne casse rien, la survol reste continu. */
.fp-mega {
  position: absolute; top: 100%; left: 0;
  width: 756px; max-width: calc(100vw - 24px); z-index: 30;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Ouverture choregraphiee (tache mega-menu premium) : leger recul (haut +
     echelle reduite) qui revient a sa place au fondu, transform-origin en
     haut a gauche (cote de l'ancrage sur le <li>). Neutralise en mobile
     (regle dediee plus bas, transform:none deja en place). */
  transform: translateY(-10px) scale(.97);
  transform-origin: top left;
  transition: opacity .32s var(--fp-anim-ease), transform .32s var(--fp-anim-ease), visibility 0s linear .32s;
}
/* Garde-fou anti-debordement desktop etroit (1025-1240px, juste au-dessus du
   seuil mobile) : a ces largeurs, un item ancre loin a droite (ex.
   Restauration) peut faire deborder un panneau de 756px hors du viewport (le
   panneau est ancre sur le <li>, pas sur le centre de l'ecran). Aucune donnee
   dynamique de position du <li> n'est disponible en CSS pur : on reduit donc
   la largeur a une valeur mesuree sure pour cette plage (600px passe dans
   tous les cas testes, y compris l'item le plus a droite a 1025px). Au-dessus
   de 1240px, la largeur pleine (756px, fidele au modele) s'applique a
   nouveau, l'espace disponible etant alors toujours suffisant. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .fp-mega { width: 600px; }
}
.fp-has-mega:hover > .fp-mega,
.fp-has-mega:focus-within > .fp-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity .32s var(--fp-anim-ease), transform .32s var(--fp-anim-ease), visibility 0s;
}
/* Fermeture forcee au clavier (Echap, cf. main.js setupMegaMenu) : neutralise
   l'ouverture meme si :hover/:focus-within matchent encore techniquement
   (le focus revient volontairement sur le declencheur, donc :focus-within
   resterait sinon actif). Specificite volontairement plus forte que la regle
   d'ouverture ci-dessus (4 classes + element) pour gagner sans !important. */
.fp-nav .fp-menu li.fp-force-close > .fp-mega {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.97);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Panneau blanc arrondi : 2 pistes de grille (zone claire .fp-mega-cols,
   titre + 2 colonnes de liens ; panneau teinte .fp-mega-panel), ratio ~62/38
   mesure sur le modele. margin-top agrandi (10px) pour laisser respirer le
   mouvement d'ouverture, tout en restant colle au pont de survol (voir note
   ci-dessus : .fp-mega-inner reste dans le rectangle hoverable de .fp-mega).
   Profondeur premium : ombre teal (--fp-shadow-lg, coherente avec les tokens
   du site) + fine ligne neutre pour la nettete du bord, fine bordure claire,
   et un liseret degrade en tete de panneau (teal -> accent) pour la richesse
   visuelle demandee. */
.fp-mega-inner {
  position: relative;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 0;
  margin-top: 10px;
  background: var(--fp-paper); color: var(--fp-ink);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius); overflow: hidden;
  box-shadow: var(--fp-shadow-lg), 0 0 1px rgba(0, 0, 0, .06);
}
.fp-mega-inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent));
}
/* Zone claire : titre eyebrow (flex-basis:100%, force le retour a la ligne)
   PUIS les 2 colonnes de liens cote a cote (flex-wrap, pas de grid : evite
   d'ajouter un conteneur supplementaire autour des 2 <ul>, deja freres
   directs du titre dans le markup). align-self:start pose ici explicitement
   car .fp-mega-cols est un item de la grille .fp-mega-inner (stretch par
   defaut) : sans cette regle, .fp-mega-cols prend toute la hauteur de la
   rangee (etiree par le panneau teal plus haut a cause de la mascotte), et
   son propre contenu (flex-wrap sans align-content explicite) se retrouve
   visuellement centre dans ce grand espace vertical, d'ou le vide constate
   entre le titre et le 1er item. align-content/align-items:flex-start
   colle en plus les 2 lignes du flex (titre, puis colonnes) en haut. */
.fp-mega-cols {
  padding: 22px 24px; display: flex; flex-wrap: wrap;
  align-self: start; align-content: flex-start; align-items: flex-start;
}
/* Titre eyebrow au-dessus des colonnes (« Nos activites », fidele au
   modele) : Bebas Neue (comme les titres de section), capitales, teal,
   affirme (24px+, la casse condensee de Bebas parait plus petite qu'en
   police corps : 26px vise un rendu lisible et marque). Hierarchie renforcee
   (tache mega-menu premium) : petit trait degrade sous le texte (::after
   ci-dessous), marge basse agrandie en consequence pour lui laisser sa place. */
.fp-mega-cols-title {
  position: relative;
  flex: 1 1 100%;
  margin: 0 0 16px; padding-bottom: 10px;
  font-family: var(--fp-font-heading); font-weight: 700;
  font-size: 26px; text-transform: uppercase; letter-spacing: .02em;
  color: var(--fp-primary);
}
/* Petit trait degrade sous l'eyebrow (hierarchie renforcee, tache mega-menu
   premium), meme motif que le liseret de tete du panneau (.fp-mega-inner::before). */
.fp-mega-cols-title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 42px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent));
}
.fp-mega-col { list-style: none; margin: 0; padding: 0 20px 0 0; display: flex; flex-direction: column; flex: 1 1 50%; min-width: 0; }
.fp-mega-col:last-child { padding-right: 0; }
.fp-mega-col li { position: static; }
/* Item de mega-menu : icone-trait teal (pas de pastille de fond, fidele au
   modele : simple icone outline) + libelle police corps encre, separateur
   fin sous chaque item (sauf le dernier de la colonne), hover accent, item
   courant en graisse 600. */
.fp-mega-item { border-bottom: 1px solid var(--fp-line); }
.fp-mega-item:last-child { border-bottom: 0; }
/* Item de mega-menu, survol travaille (tache mega-menu premium) : liseret
   de fond doux qui se revele derriere le libelle (::before, cf. plus bas) +
   petit chevron qui glisse depuis la droite (::after). position:relative +
   overflow:hidden cadre ce liseret (jamais plus large que la ligne). */
.fp-mega-item > a,
.fp-mega-item > span[aria-disabled] {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; margin: 0 -4px; border-radius: var(--fp-radius-sm);
  font-family: var(--fp-font-body); font-weight: 400;
  font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--fp-ink);
  transition: color .18s ease, padding-left .25s var(--fp-anim-ease);
}
/* Liseret de fond (derriere le contenu, z-index negatif dans le contexte
   d'empilement local cree par .fp-mega-item > a en position:relative). */
.fp-mega-item > a::before {
  content: ''; position: absolute; inset: 1px 0; z-index: -1;
  border-radius: var(--fp-radius-sm); background: var(--fp-cream);
  opacity: 0; transform: scale(.94);
  transition: opacity .25s var(--fp-anim-ease), transform .25s var(--fp-anim-ease);
}
/* Petit chevron qui apparait et glisse vers sa place au survol/focus. */
.fp-mega-item > a::after {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px;
  border-top: 2px solid var(--fp-primary); border-right: 2px solid var(--fp-primary);
  transform: rotate(45deg) translateX(-6px); opacity: 0;
  transition: opacity .25s var(--fp-anim-ease), transform .25s var(--fp-anim-ease);
}
.fp-mega-item > a:hover,
.fp-mega-item > a:focus-visible { color: var(--fp-primary); padding-left: 12px; }
.fp-mega-item > a:hover::before,
.fp-mega-item > a:focus-visible::before { opacity: 1; transform: scale(1); }
.fp-mega-item > a:hover::after,
.fp-mega-item > a:focus-visible::after { opacity: 1; transform: rotate(45deg) translateX(0); }
.fp-mega-item.current-menu-item > a { font-weight: 600; }
.fp-mega-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--fp-primary);
  transition: transform .25s var(--fp-anim-ease);
}
.fp-mega-ico svg { width: 20px; height: 20px; }
.fp-mega-item > a:hover .fp-mega-ico,
.fp-mega-item > a:focus-visible .fp-mega-ico { color: var(--fp-primary); transform: scale(1.12); }
.fp-mega-label { flex: 1 1 auto; }
/* Item « bientot disponible » : grise (encre attenuee, pas de gris neutre
   sur fond blanc), pas de hover ni de curseur pointeur, icone/texte assortis,
   opacite d'icone reduite pour marquer davantage l'etat inactif. */
.fp-mega-item.is-soon > span[aria-disabled] { display: flex; align-items: center; gap: 12px; padding: 10px 8px; color: var(--fp-ink-soft); cursor: default; pointer-events: none; }
.fp-mega-item.is-soon .fp-mega-ico { color: var(--fp-accent); opacity: .65; }
.fp-badge-soon {
  /* Contraste AA (texte 9px) : --fp-accent sur blanc ne fait que 2.17:1,
     --fp-ink-soft (deja utilise pour le label attenue juste au-dessus)
     remonte a 6.9:1, largement conforme tout en restant visuellement
     assorti au label grise. Pastille (fond + bordure) pour bien la
     distinguer du libelle, sans jamais paraitre actionnable. */
  flex: 0 0 auto; font-family: var(--fp-font-body); font-weight: 700;
  font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fp-ink-soft);
  background: var(--fp-cream); border: 1px solid var(--fp-line);
  border-radius: var(--fp-pill); padding: 3px 9px;
}
/* Panneau lateral teinte : fond accent (vert clair), texte blanc (choix
   assume de la reference, contenu decoratif en gros corps), liens a petites
   icones blanches, bouton pill blanc lisible (texte primary, cf. .fp-btn),
   mascotte SVG debordante en absolute sous le bouton (voir note overflow
   pres de .fp-mega-mascotte plus bas). Marge interne (~18px, mesuree sur le
   modele : le panneau teal reste visuellement detache dans sa zone).
   Touche « glass » (tache mega-menu premium, coherente avec .fp-ibox-glass) :
   un voile diagonal blanc tres leger EN COUCHE DE FOND (pas un pseudo-element,
   evite tout souci d'empilement avec le bouton/la mascotte deja positionnes),
   plus une ombre propre pour detacher le panneau du reste du mega-menu. */
.fp-mega-panel {
  position: relative; margin: 18px 18px 18px 0; padding: 28px 26px; color: var(--fp-white);
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--fp-accent);
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center; overflow: hidden; border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow);
}
.fp-mega-panel-title { font-family: var(--fp-font-heading); font-weight: 700; text-transform: uppercase; margin: 0; font-size: 1.5rem; color: var(--fp-white); }
.fp-mega-panel-text { margin: 0; font-size: .95rem; opacity: .95; }
.fp-mega-panel ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
/* padding:0 pose ici explicitement (pas seulement par heritage) : ces liens
   sont aussi descendants de .fp-menu (li du menu -> .fp-mega-panel -> ul ->
   a), qui pose un padding 9px 12px pour ses propres items top-level ; sans
   cette redefinition ce padding fuitait ici et decalait les libelles. */
.fp-mega-panel ul a { display: flex; align-items: center; gap: 8px; padding: 0; font-family: var(--fp-font-body); font-weight: 400; color: var(--fp-white); font-size: 18px; }
.fp-mega-panel ul a:hover { color: var(--fp-dark); }
/* Icones du panneau : blanches, pas de pastille (contexte deja teinte), plus
   presentes (~23px) que les 16px d'origine. */
.fp-mega-panel .fp-mega-ico { width: 23px; height: 23px; background: transparent; border-radius: 0; color: var(--fp-white); }
.fp-mega-panel .fp-mega-ico svg { width: 23px; height: 23px; }
/* Bouton pill du panneau : taille alignee sur le standard .fp-btn (16px,
   uppercase, letter-spacing .6px, padding 14/28, radius pilule ; le modele
   mesure exactement ces valeurs pour son bouton « Reserver » de mega-menu).
   Padding/font-size/text-transform/letter-spacing repris EXPLICITEMENT ici
   (pas un simple heritage de .fp-btn) car ce bouton est aussi descendant de
   .fp-menu (bouton dans .fp-mega-panel, lui-meme dans le <li> du menu) :
   sans cette redefinition, la regle generale « .fp-menu a » (padding 9px
   12px, 22px, casse normale) l'emporterait par specificite et ecraserait le
   bouton (racine du bug « bouton trop petit dans le panneau »). Couleur de
   texte fixee explicitement au repos ET au survol (racine du bug « blanc
   sur blanc ») plutot que de compter sur l'heritage de .fp-mega-panel
   (color: var(--fp-white)) qui gagnerait sinon en cas de variante .fp-btn
   autre que light. */
.fp-mega-panel .fp-btn {
  align-self: flex-start; margin-top: 6px; position: relative; z-index: 2;
  padding: 14px 28px; font-size: 1rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--fp-primary);
}
.fp-mega-panel .fp-btn:hover { color: var(--fp-white); }
/* Mascotte : debordement maitrise vers le bas, sous le bouton (z-index 1).
   .fp-mega-panel garde overflow:hidden (son propre radius d'angle bas-droit
   vient de .fp-mega-inner) : la mascotte deborde en bas du panneau mais
   jamais au-dela du rectangle exterieur du mega-menu, donc aucune scrollbar
   ni coupe arbitraire, seul l'angle du panneau la rogne proprement. */
.fp-mega-mascotte { position: absolute; z-index: 1; right: 0; bottom: 93px; margin-bottom: -150px; width: 50%; height: auto; opacity: .9; pointer-events: none; }

/* Widget editable (dynamic_sidebar) : contenu Gutenberg usuel dans le panneau
   teinte, sobre et contenu (~230px de large). Titre en Bebas majuscules comme
   .fp-mega-panel-title, texte blanc herite, marges compactes, bouton clair. */
.fp-mega-panel .fp-mega-panel-widget { position: relative; z-index: 1; color: var(--fp-white); max-width: 100%; }
.fp-mega-panel .fp-mega-panel-widget h2,
.fp-mega-panel .fp-mega-panel-widget h3,
.fp-mega-panel .fp-mega-panel-widget p.fp-mega-panel-title {
  font-family: var(--fp-font-heading); font-weight: 700; text-transform: uppercase;
  color: var(--fp-white); margin: 0 0 6px; font-size: 1.2rem; line-height: 1.1;
}
.fp-mega-panel .fp-mega-panel-widget p { margin: 0 0 8px; font-size: .95rem; opacity: .95; color: var(--fp-white); }
.fp-mega-panel .fp-mega-panel-widget ul,
.fp-mega-panel .fp-mega-panel-widget ol { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fp-mega-panel .fp-mega-panel-widget li { font-size: .92rem; }
.fp-mega-panel .fp-mega-panel-widget a { color: var(--fp-white); }
.fp-mega-panel .fp-mega-panel-widget a:hover { color: var(--fp-dark); }
/* Bouton Gutenberg (core/button) : meme rendu que le bouton clair du panneau. */
.fp-mega-panel .fp-mega-panel-widget .wp-block-button__link {
  display: inline-flex; align-self: flex-start; margin-top: 6px;
  padding: 9px 18px; border-radius: var(--fp-pill);
  background: var(--fp-white); color: var(--fp-primary);
  font-family: var(--fp-font-heading); font-weight: 600; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.fp-mega-panel .fp-mega-panel-widget .wp-block-button__link:hover { background: var(--fp-cream); }
/* Image (mascotte eventuelle) : contenue, jamais plus large que le panneau. */
.fp-mega-panel .fp-mega-panel-widget .wp-block-image,
.fp-mega-panel .fp-mega-panel-widget img { max-width: 140px; height: auto; }

/* Mega-menu responsive : accordeon mobile des 1024px (burger a 1024px,
   meme seuil que tout le reste du header). */
@media (max-width: 1024px) {
  /* Mega-menu en accordeon mobile : dans le flux. */
  .fp-mega { position: static; transform: none; width: 100%; max-width: none; opacity: 1; visibility: visible; pointer-events: auto; padding: 0 0 8px; }
  .fp-mega-inner { grid-template-columns: 1fr; box-shadow: none; border-radius: var(--fp-radius); background: var(--fp-cream); }
  /* 1 seule colonne empilee (plus de cote a cote 50/50, trop serre en
     tactile pour des libelles longs comme « Realite virtuelle »). */
  .fp-mega-cols { padding: 8px 4px; flex-direction: column; flex-wrap: nowrap; }
  .fp-mega-col { flex: 1 1 auto; padding: 0; }
  .fp-mega-panel { display: none; }
  .fp-nav-actions { width: 100%; justify-content: center; margin-top: 10px; }
}
/* Choregraphie d'ouverture desktop UNIQUEMENT (tache mega-menu premium) :
   titre eyebrow, items de colonnes et panneau lateral entrent chacun avec un
   fondu + leger decalage, en cascade (stagger via nth-child, aucun JS).
   Isole a >=1025px expres : en mobile l'accordeon affiche/masque via
   "display" (bloc ci-dessus) sans jamais passer par :hover/:focus-within
   (aucun survol tactile) ; des etats caches par defaut casseraient donc le
   contenu de l'accordeon (jamais revele). */
@media (min-width: 1025px) {
  .fp-mega-cols-title {
    opacity: 0; transform: translateY(-6px);
    transition: opacity .3s var(--fp-anim-ease), transform .3s var(--fp-anim-ease);
  }
  .fp-mega-item > a { transition: color .18s ease, padding-left .25s var(--fp-anim-ease), opacity .35s var(--fp-anim-ease), transform .35s var(--fp-anim-ease); }
  .fp-mega-item > span[aria-disabled] { transition: opacity .35s var(--fp-anim-ease), transform .35s var(--fp-anim-ease); }
  .fp-mega-item > a,
  .fp-mega-item > span[aria-disabled] { opacity: 0; transform: translateY(10px); }
  .fp-mega-panel {
    opacity: 0; transform: translateX(16px) scale(.98);
    transition: opacity .4s var(--fp-anim-ease) .05s, transform .4s var(--fp-anim-ease) .05s;
  }
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-cols-title,
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-item > a,
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-item > span[aria-disabled],
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-panel {
    opacity: 1; transform: none;
  }
  /* Stagger : delai croissant selon la position de l'item DANS SA colonne (les
     2 colonnes progressent donc simultanement, effet de vague coherent). */
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-col .fp-mega-item:nth-child(1) > :is(a, span[aria-disabled]) { transition-delay: .05s; }
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-col .fp-mega-item:nth-child(2) > :is(a, span[aria-disabled]) { transition-delay: .09s; }
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-col .fp-mega-item:nth-child(3) > :is(a, span[aria-disabled]) { transition-delay: .13s; }
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-col .fp-mega-item:nth-child(4) > :is(a, span[aria-disabled]) { transition-delay: .17s; }
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-col .fp-mega-item:nth-child(5) > :is(a, span[aria-disabled]) { transition-delay: .21s; }
  :is(.fp-has-mega:hover, .fp-has-mega:focus-within) > .fp-mega .fp-mega-col .fp-mega-item:nth-child(6) > :is(a, span[aria-disabled]) { transition-delay: .25s; }
  /* Fermeture forcee au clavier (Echap, main.js setupMegaMenu) : neutralise
     aussi cette choregraphie (jamais de residu visible derriere un panneau
     force-ferme). !important assume ici (meme logique que .screen-reader-text
     plus haut dans ce fichier) : la chaine de stagger ci-dessus grimpe vite en
     specificite (selecteurs :is() + nth-child), la battre proprement rang par
     rang serait fragile ; on garantit donc la fermeture sans ambiguite. */
  .fp-nav .fp-menu li.fp-force-close .fp-mega-cols-title,
  .fp-nav .fp-menu li.fp-force-close .fp-mega-item > a,
  .fp-nav .fp-menu li.fp-force-close .fp-mega-item > span[aria-disabled],
  .fp-nav .fp-menu li.fp-force-close .fp-mega-panel {
    opacity: 0 !important; transform: translateY(-6px) !important; transition-delay: 0s !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fp-mega, .fp-has-mega:hover > .fp-mega, .fp-has-mega:focus-within > .fp-mega,
  .fp-nav .fp-menu li.fp-force-close > .fp-mega { transition: none; }
  .fp-mega-inner, .fp-mega-cols-title, .fp-mega-panel,
  .fp-mega-item > a, .fp-mega-item > span[aria-disabled],
  .fp-mega-item > a::before, .fp-mega-item > a::after, .fp-mega-ico {
    transition: none !important;
  }
  .fp-mega-cols-title,
  .fp-mega-item > a, .fp-mega-item > span[aria-disabled],
  .fp-mega-panel {
    opacity: 1 !important; transform: none !important;
  }
}
.fp-burger, .fp-burger::before, .fp-burger::after { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s ease, opacity .2s ease; }
.fp-burger::before, .fp-burger::after { content: ''; position: absolute; left: 0; }
.fp-burger::before { top: -7px; }
.fp-burger::after { top: 7px; }

/* Burger a 1024px (au lieu de 980px). Barre mobile : logo a gauche, bouton
   Reserver visible et centre, burger a droite. HYPOTHESE DE MARKUP (PHP en
   refonte parallele) : pour rester visible hors du menu deroulant ferme
   (position:fixed hors ecran), .fp-nav-actions doit devenir un enfant DIRECT
   de .fp-nav-inner (sortir de .fp-nav-menu) sur ce breakpoint. Le CSS ci-
   dessous suppose cet ordre ; si .fp-nav-actions reste imbrique dans
   .fp-nav-menu, seul le bouton apparaitra une fois le menu ouvert (a
   verifier des que le nouveau markup sera stabilise). */
@media (max-width: 1024px) {
  .fp-nav-inner { flex-wrap: nowrap; }
  .fp-nav-toggle { display: inline-flex; order: 3; }
  .fp-nav-actions { order: 2; width: auto; margin-top: 0; }
  .fp-brand { order: 1; }
  /* Panneau plein ecran fond blanc (mecanisme .is-open conserve) : occupe
     toute la hauteur restante sous la barre, defilement interne autorise si
     le contenu (sous-menus deployes) depasse la hauteur du viewport. */
  .fp-nav-menu {
    position: fixed; inset: var(--fp-nav-h) 0 0 0; flex-direction: column; align-items: stretch;
    background: var(--fp-paper); color: var(--fp-ink); padding: 18px var(--fp-gutter-mobile) 28px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(-120%); transition: transform .25s ease; gap: 8px;
  }
  .fp-nav-menu.is-open { transform: translateY(0); }
  /* Panneau mobile recale sur la hauteur compacte quand la barre est deja
     retrecie (scroll + burger ouvert) : seul "top" est ajuste (pas tout
     l'inset), --fp-nav-h de base reste la reference partout ailleurs. */
  .fp-nav.is-stuck .fp-nav-menu { top: var(--fp-nav-h-stuck); }
  /* Items en Bebas grand format (~27px) avec icones, casse NORMALE. */
  .fp-menu { flex-direction: column; align-items: stretch; margin: 0; width: 100%; }
  .fp-menu li { position: static; }
  .fp-menu a { padding: 14px 8px; border-bottom: 1px solid var(--fp-line); border-radius: 0; justify-content: space-between; font-size: 27px; text-transform: none; }
  /* Le retrecissement .is-stuck (tache shrink) ne doit jamais reduire les
     cibles tactiles du panneau plein ecran mobile : celui-ci n'a rien a voir
     avec la petite barre compacte, on restaure son padding vertical normal
     ici (specificite superieure a .fp-nav.is-stuck .fp-menu a, cf. plus haut). */
  .fp-nav.is-stuck .fp-nav-menu .fp-menu a { padding-top: 14px; padding-bottom: 14px; }
  /* Item avec sous-menu : le lien et le bouton toggle chevron partagent la
     ligne (le lien navigue, le bouton bascule le sous-menu independamment).
     Markup reel : le bouton toggle EST le chevron, button.fp-menu-caret
     [data-fp-submenu-toggle] (pas d'element separe). */
  .fp-menu li.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--fp-line); }
  .fp-menu li.menu-item-has-children > a { flex: 1 1 auto; border-bottom: 0; }
  /* Bouton toggle dedie (fourni par le PHP, aria-expanded) : zone de clic
     confortable, fond neutre, curseur pointeur. */
  .fp-menu-caret[data-fp-submenu-toggle] {
    flex: 0 0 auto; width: 44px; height: 44px; justify-content: center;
    background: none; border: 0; cursor: pointer; color: inherit; margin-left: 0;
  }
  /* Sous-menus (accordeon existant) REPLIES par defaut : toggle via bouton
     chevron [aria-expanded], classe .is-open posee sur le li parent par
     setupNav (main.js, inchange). Chevron pivote a l'ouverture. Items du
     mega-menu mobile stylees comme le reste de l'accordeon (icone + label). */
  .fp-menu .sub-menu, .fp-menu .fp-mega { display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; position: static; margin: 0 0 0 12px; padding: 0; background: transparent; }
  .fp-menu li.is-open > .sub-menu, .fp-menu li.is-open > .fp-mega { display: block; }
  .fp-menu-caret { margin-left: auto; transition: transform .2s ease; }
  .fp-menu li.is-open [data-fp-submenu-toggle],
  .fp-menu li.is-open > a > .fp-menu-caret,
  .fp-menu li.is-open > .fp-menu-caret { transform: rotate(180deg); }
  .fp-menu .sub-menu a { background: transparent; font-size: 18px; }
  .fp-nav-cta { text-align: center; justify-content: center; }
  /* CTA Reserver mobile (place par le PHP dans la barre, entre logo et
     burger) : masque au-dessus de 1024px (regle desktop plus bas), visible
     et centre en dessous, style .fp-nav-cta en plus compact. */
  .fp-nav-cta-bar {
    display: inline-flex;
    padding: 10px 20px;
    background: var(--fp-white);
    color: var(--fp-primary);
    border-color: var(--fp-white);
    font-family: var(--fp-font-heading);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 25px;
    order: 2;
  }
  .fp-nav-cta-bar:hover { color: var(--fp-primary); }
}
@media (min-width: 1025px) {
  /* Masque au-dessus de 1024px : le CTA desktop (.fp-nav-cta) suffit. */
  .fp-nav-cta-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-nav-menu { transition: none; }
  .fp-menu-caret { transition: none; }
}

/* ==========================================================================
   Hero (image / slider de fond)
   ========================================================================== */
.fp-hero { min-height: min(88vh, 800px); display: flex; align-items: center; overflow: hidden; padding: calc(var(--fp-nav-h) + 56px) 0 64px; background: var(--fp-dark); }
.fp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.fp-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; animation: fp-kenburns 20s ease-in-out infinite alternate; }
/* Ken Burns synchronise : toutes les slides animent en meme temps => aucun dezoom au fondu. */
/* .is-active gere uniquement l opacite ; l echelle est deja en cours sur toutes les slides. */
.fp-hero-slide.is-active { opacity: 1; }
.fp-hero:not(.fp-has-slider) .fp-hero-slide { opacity: 1; }
@keyframes fp-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .fp-hero-slide { animation: none; } }
/* Voile colore (teinte primaire Fun Planet) par-dessus la photo sombre. */
.fp-hero-overlay { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(115deg, color-mix(in srgb, var(--fp-dark) 86%, transparent) 0%, color-mix(in srgb, var(--fp-dark) 55%, transparent) 50%, color-mix(in srgb, var(--fp-primary) 38%, transparent) 100%),
  linear-gradient(180deg, rgba(20,22,42,.2) 0%, rgba(20,22,42,.6) 100%); }
/* Hero par defaut (templates a hero texte) : une colonne, mascotte masquee. */
.fp-hero-grid { display: block; width: 100%; }
.fp-hero-col { max-width: 760px; }
.fp-hero-mascotte { display: none; }
/* Grille 2 colonnes (texte + mascotte + badges), facon accueil RParc : activee
   sur l'accueil et tout hero qui pose la classe fp-hero-split. */
.page-template-template-home .fp-hero-grid,
.fp-hero-split .fp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
.page-template-template-home .fp-hero-col,
.fp-hero-split .fp-hero-col { max-width: 620px; }
.page-template-template-home .fp-hero-mascotte,
.fp-hero-split .fp-hero-mascotte { display: flex; }
.fp-hero-eyebrow { font-family: var(--fp-font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; color: var(--fp-accent); margin-bottom: 14px; }
/* Logo blanc du hero (image claire ou mot-logo du nom du site, facon logo typo RParc). */
.fp-hero-logo { margin-bottom: 16px; }
.fp-hero-logo img { max-width: min(420px, 78%); height: auto; }
.fp-hero-logo-text { display: block; font-family: var(--fp-font-heading); font-weight: 700; text-transform: uppercase; line-height: .9; letter-spacing: .01em; color: #fff; font-size: clamp(3rem, 6.5vw, 5.4rem); }
.fp-hero-title { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: 18px; }
.fp-hero-lead { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 52ch; opacity: .95; }
.fp-hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Colonne mascotte + badges flottants. Pas de display ici : la visibilite est
   pilotee plus haut (masquee par defaut .fp-hero-mascotte{display:none}, affichee
   en flex uniquement sur l'accueil / .fp-hero-split). Redefinir display:flex ici
   la reafficherait sur TOUTES les pages a hero (bug corrige). */
.fp-hero-mascotte { position: relative; align-items: center; justify-content: center; min-height: 360px; }
.fp-hero-mascotte-img { position: relative; z-index: 2; }
.fp-hero-mascotte-img img { max-width: min(440px, 100%); height: auto; filter: drop-shadow(0 26px 40px rgba(0,0,0,.4)); }
/* Petits badges circulaires d'activites qui flottent autour de la mascotte. */
.fp-badges { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fp-badge { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--fp-paper); color: var(--fp-primary); box-shadow: var(--fp-shadow); animation: fp-float 5s ease-in-out infinite; }
.fp-badge svg { width: 28px; height: 28px; }
.fp-badge-1 { top: 4%; left: 8%; background: var(--fp-accent); color: var(--fp-dark); animation-delay: 0s; }
.fp-badge-2 { top: 0; right: 14%; color: var(--fp-secondary); animation-delay: .6s; }
.fp-badge-3 { top: 42%; right: 0; color: var(--fp-primary); animation-delay: 1.1s; }
.fp-badge-4 { bottom: 12%; right: 10%; background: var(--fp-secondary); color: #fff; animation-delay: 1.6s; }
.fp-badge-5 { bottom: 6%; left: 6%; color: var(--fp-primary); animation-delay: 2.1s; }
@keyframes fp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .fp-badge { animation: none; } }
@media (max-width: 980px) {
  .fp-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .fp-hero-mascotte { min-height: 280px; order: -1; }
  .fp-hero-mascotte-img img { max-width: min(320px, 80%); }
  .fp-badge { width: 50px; height: 50px; }
  .fp-badge svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   Intro / lead editorial (2 colonnes : texte + cluster decoratif)
   ========================================================================== */
.fp-intro-body { margin-top: 18px; }
.fp-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; }
.fp-intro-aside { display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  .fp-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .fp-intro-aside { order: -1; }
}

/* Cluster circulaire decoratif (grand cercle central patte + icones autour). */
.fp-cluster { position: relative; width: min(360px, 80vw); aspect-ratio: 1 / 1; }
.fp-cluster-ring { position: absolute; inset: 14%; border-radius: 50%; background: color-mix(in srgb, var(--fp-secondary) 14%, var(--fp-paper)); border: 2px dashed color-mix(in srgb, var(--fp-secondary) 45%, transparent); }
.fp-cluster-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46%; height: 46%; border-radius: 50%; background: var(--fp-accent); color: var(--fp-dark); display: flex; align-items: center; justify-content: center; box-shadow: var(--fp-shadow); }
.fp-cluster-core svg { width: 54%; height: 54%; }
.fp-cluster-core img { width: 78%; height: 78%; object-fit: contain; }
.fp-cluster-sat { position: absolute; width: 26%; height: 26%; border-radius: 50%; background: var(--fp-paper); color: var(--fp-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--fp-shadow); border: 1px solid var(--fp-line); }
.fp-cluster-sat svg { width: 52%; height: 52%; }
.fp-cluster-sat-1 { top: -2%; left: 37%; color: var(--fp-primary); }
.fp-cluster-sat-2 { top: 18%; right: 0; color: var(--fp-secondary); }
.fp-cluster-sat-3 { bottom: 18%; right: 0; color: var(--fp-primary); }
.fp-cluster-sat-4 { bottom: -2%; left: 37%; color: var(--fp-secondary); }
.fp-cluster-sat-5 { bottom: 18%; left: 0; color: var(--fp-primary); }
.fp-cluster-sat-6 { top: 18%; left: 0; color: var(--fp-secondary); }

/* ==========================================================================
   Cartes (activites / restauration / CPT)
   ========================================================================== */
.fp-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 36px; }
/* Carte signature RParc « em-card-border » : fond creme, bordure teal, radius
   24px ; au survol elle remonte avec une legere rotation et une ombre dure
   decalee (vert tres fonce). C est LA signature visuelle des activites. */
.fp-card { display: flex; flex-direction: column; background: var(--fp-cream); border: 1px solid var(--fp-primary); border-radius: var(--fp-radius-lg); overflow: hidden; transform-origin: center; transition: transform .4s ease, box-shadow .3s ease, border-color .3s ease; }
.fp-card:hover { transform: translateY(-8px) rotate(-2deg); box-shadow: 8px 8px 0 0 var(--fp-secondary-dark); }
@media (prefers-reduced-motion: reduce) { .fp-card:hover { transform: none; } }
.fp-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--fp-cream) center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.fp-card-icon { color: var(--fp-primary); background: #fff; border-radius: 50%; padding: 12px; box-shadow: var(--fp-shadow); }
.fp-card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; flex: 1; }
.fp-card-title { font-family: var(--fp-font-heading); font-weight: 600; font-size: 1.2rem; }
.fp-card-desc { color: var(--fp-ink-soft); font-size: .96rem; flex: 1; }
.fp-card-go { display: inline-flex; align-items: center; gap: 6px; color: var(--fp-primary); font-weight: 700; font-size: .92rem; margin-top: 8px; }

/* ==========================================================================
   Offres en cours (carrousel horizontal + fleches rondes)
   ========================================================================== */
.fp-offres-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.fp-offres-label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: .04em; color: var(--fp-ink-soft); }
.fp-offres-caret { display: inline-flex; color: var(--fp-primary); }
.fp-offres-caret svg { width: 18px; height: 18px; }
.fp-offres-nav { display: flex; gap: 10px; }
.fp-carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: var(--fp-dark); color: #fff; box-shadow: var(--fp-shadow); transition: transform .15s ease, background .2s ease; }
.fp-carousel-arrow:hover { transform: scale(1.06); background: var(--fp-primary); }
.fp-carousel-arrow:disabled { opacity: .4; cursor: default; transform: none; background: var(--fp-dark); }
.fp-carousel-arrow svg { width: 22px; height: 22px; }
/* Carrousel d offres : 4 cartes visibles desktop, 2 tablette, 1 mobile.
   scroll-snap + overflow-x + autoplay conserves (data-fp-carousel / main.js).
   La largeur de chaque carte est calculee pour que exactement N entrent dans
   le conteneur visible (100% - (N-1)*gap) / N). */
.fp-offres-track {
  display: grid;
  grid-auto-flow: column;
  /* Mobile : ~85% pour laisser deviner la carte suivante. */
  grid-auto-columns: 85%;
  gap: 22px;
  overflow-x: auto;
  /* Pas de scroll-snap : un snap « mandatory » sans cible re-snappait au survol
     (a cause du transform des cartes) et poussait le listing sur le cote. Le
     carrousel est pilote par les fleches (scrollBy), le snap n'est pas necessaire. */
  scroll-behavior: smooth;
  /* Padding vertical : laisse la place au hover (translateY -8px + ombre 8px).
     Padding droite : marge pour l'ombre decalee de la derniere carte.
     Padding gauche minimal : evite de couper l'ombre gauche en debut de liste. */
  padding: 14px 14px 18px 2px;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar masquee : le carrousel est pilote par les fleches, pas la scrollbar. */
  scrollbar-width: none;
}
.fp-offres-track::-webkit-scrollbar { display: none; }
/* Tablette (640-1023px) : 2 colonnes exactes. */
@media (min-width: 640px) {
  .fp-offres-track { grid-auto-columns: calc((100% - 22px) / 2); }
}
/* Desktop (>=1024px) : 4 colonnes exactes. */
@media (min-width: 1024px) {
  .fp-offres-track { grid-auto-columns: calc((100% - 66px) / 4); }
}
/* Apparition douce de la SECTION offres a l'entree en vue : le conteneur de
   piste (.fp-offres-track, qui porte data-fp-carousel) est anime en un seul
   bloc (fondu + leger translateY), PAS les cartes individuelles a l'interieur
   (elles restent figees en opacity:1, cf. regle [data-fp-carousel] .fp-reveal
   plus bas : c'est ce qui evitait le defilement saccade). Classe posee par
   main.js (setupOffresReveal) a l'entree en viewport ; meme courbe douce que
   .fp-reveal/.fp-anim-h pour une coherence visuelle avec le reste du site. */
.fp-offres-track { opacity: 0; transform: translateY(24px); transition: opacity var(--fp-anim-dur) var(--fp-anim-ease), transform var(--fp-anim-dur) var(--fp-anim-ease); will-change: opacity, transform; }
.fp-offres-track.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fp-offres-track { opacity: 1; transform: none; transition: none; } }
.fp-offre-card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--fp-paper); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); overflow: hidden; box-shadow: var(--fp-shadow); transition: transform .18s ease, box-shadow .18s ease; text-decoration: none; color: inherit; }
.fp-offre-card:hover { transform: translateY(-4px); box-shadow: var(--fp-shadow-lg); }
@media (prefers-reduced-motion: reduce) { .fp-offre-card:hover { transform: none; } }
.fp-offre-title { margin: 0; font-size: 1.15rem; }
.fp-offre-desc { color: var(--fp-ink-soft); font-size: .96rem; flex: 1; margin: 0; }

/* ==========================================================================
   Cartes-images « duotone » a label (grilles activites / restauration)
   ========================================================================== */
.fp-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.fp-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--fp-radius); overflow: hidden; box-shadow: var(--fp-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.fp-tile:hover { transform: translateY(-4px); box-shadow: var(--fp-shadow-lg); }
.fp-tile-media { position: absolute; inset: 0; background: var(--fp-dark) center/cover no-repeat; }
.fp-tile-noimg .fp-tile-media { background: var(--fp-dark); }
/* Voile colore (duotone) : teinte secondaire par defaut, accentuee au survol. */
.fp-tile-veil { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--fp-secondary) 35%, transparent) 0%, color-mix(in srgb, var(--fp-dark) 78%, transparent) 100%); mix-blend-mode: multiply; transition: background .25s ease; }
.fp-tile:hover .fp-tile-veil { background: linear-gradient(180deg, color-mix(in srgb, var(--fp-primary) 42%, transparent) 0%, color-mix(in srgb, var(--fp-dark) 82%, transparent) 100%); }
.fp-tile-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 18px 20px; color: #fff; }
.fp-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.18); }
.fp-tile-icon svg { width: 20px; height: 20px; }
.fp-tile-title { font-family: var(--fp-font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; line-height: 1.1; }
@media (max-width: 1000px) { .fp-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .fp-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 420px) { .fp-tile-grid { grid-template-columns: 1fr; } }

/* — Carte signature « em-card-border » (LE listing activites/restauration du
   RParc) : carte blanche arrondie a bordure teal, image en duotone teal avec
   bandeau blanc label en bas-centre (facon capture RParc fournie). — */
.fp-actcard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }

/* Carte : cadre blanc autour de l'image, ombre dure au repos, lift au survol.
   position:relative requis pour le label absolu pose en bas-centre de l'image. */
.fp-actcard {
  display: flex;
  flex-direction: column;
  background: var(--fp-white);
  border: 1px solid var(--fp-primary);
  border-radius: var(--fp-radius-lg);
  overflow: visible;
  text-decoration: none;
  transform-origin: center;
  position: relative;
  padding: 8px;
  box-shadow: 8px 8px 0 0 var(--fp-secondary-dark);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fp-actcard:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .fp-actcard:hover { transform: none; } }

/* Media : arrondi interieur, ratio 4/3, contexte pour le ::after duotone
   et le label absolu. overflow:hidden pour clipper l'image dans l'arrondi. */
.fp-actcard-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--fp-radius);
  background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-white));
}

/* Image en niveaux de gris au repos (grayscale -> duotone teal via ::after). */
.fp-actcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter .4s ease;
}
/* Survol : revele la couleur reelle de l'image. */
.fp-actcard:hover .fp-actcard-media img { filter: grayscale(0); }

/* Calque duotone teal (mix-blend-mode:multiply + teinte primaire). */
.fp-actcard-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fp-primary);
  mix-blend-mode: multiply;
  opacity: .55;
  transition: opacity .4s ease;
  pointer-events: none;
  border-radius: var(--fp-radius);
}
/* Survol : disparition du calque duotone. */
.fp-actcard:hover .fp-actcard-media::after { opacity: 0; }

/* Cas sans image : icone centree, pas de filtre duotone. */
.fp-actcard-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--fp-primary); }
.fp-actcard-noimg svg { width: 46px; height: 46px; }

/* Bandeau blanc en bas-centre, chevauchant le bas de l'image.
   Le label est absolu par rapport a .fp-actcard-media (son parent relatif). */
.fp-actcard-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  background: var(--fp-white);
  color: var(--fp-primary);
  font-family: var(--fp-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1;
  padding: 8px 18px;
  border-radius: var(--fp-radius-sm);
  box-shadow: var(--fp-shadow);
  white-space: nowrap;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  z-index: 2;
}

/* Neutralisation des transitions au survol si reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .fp-actcard-media img,
  .fp-actcard-media::after { transition: none; }
}

@media (max-width: 1000px) { .fp-actcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fp-actcard-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Atouts a icones
   ========================================================================== */
.fp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 36px; }
/* Icon-box RParc : carte creme, bordure teal (em-ibox), petite ombre teal au
   survol et icone qui grandit legerement. */
.fp-feature { background: var(--fp-cream); border: 1px solid var(--fp-primary); border-radius: var(--fp-radius); padding: 28px 26px; text-align: center; transition: transform .3s ease, box-shadow .3s ease; }
.fp-feature:hover { transform: translateY(-4px); box-shadow: var(--fp-shadow); }
.fp-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, var(--fp-primary) 12%, var(--fp-white)); color: var(--fp-primary); margin-bottom: 16px; transition: transform .3s ease; }
.fp-feature:hover .fp-feature-icon { transform: scale(1.1); }
.fp-feature-title { margin-bottom: 8px; }

/* — Icon-box horizontale (pastille icone + titre, em-ibox RParc) : fond teal
   plein, texte blanc, coins pilule, facon RParc. Variante « glass » conservee
   pour les fonds sombres. — */
.fp-ibox { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--fp-pill); border: 1px solid transparent; background: var(--fp-primary); transition: transform .3s ease; }
.fp-ibox:hover { transform: translateY(-2px); }
.fp-ibox .fp-ibox-title { color: var(--fp-white); font-family: var(--fp-font-heading); font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.fp-ibox svg { width: 18px; height: 18px; color: var(--fp-white); }
.fp-ibox-glass { background: rgba(0, 0, 0, .3); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-color: var(--fp-line-light); }
.fp-ibox-glass .fp-ibox-title, .fp-ibox-glass svg { color: var(--fp-white); }
.fp-feature-desc { color: var(--fp-ink-soft); margin: 0; }

/* ==========================================================================
   Galerie
   ========================================================================== */
.fp-galerie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 32px; }
.fp-galerie-item { display: block; aspect-ratio: 1 / 1; border-radius: var(--fp-radius-sm); background: var(--fp-cream) center/cover no-repeat; transition: transform .18s ease; }
.fp-galerie-item:hover { transform: scale(1.02); }

/* ==========================================================================
   Etapes
   ========================================================================== */
.fp-etapes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 36px; }
.fp-etape { background: var(--fp-paper); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); padding: 26px; }
.fp-etape-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fp-primary); color: #fff; font-family: var(--fp-font-heading); font-weight: 700; margin-bottom: 14px; }
.fp-etape-title { margin-bottom: 6px; }
.fp-etape-desc { color: var(--fp-ink-soft); margin: 0; }

/* ==========================================================================
   Formules
   ========================================================================== */
.fp-formules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 36px; }
.fp-formule { display: flex; flex-direction: column; gap: 10px; background: var(--fp-paper); border: 2px solid var(--fp-line); border-radius: var(--fp-radius-lg); padding: 30px 28px; }
.fp-formule:hover { border-color: var(--fp-primary); }
.fp-formule-desc { color: var(--fp-ink-soft); flex: 1; }
.fp-formule .fp-btn { align-self: flex-start; margin-top: 8px; }

/* ==========================================================================
   Tarifs
   ========================================================================== */
.fp-tarifs-table { width: 100%; border-collapse: collapse; margin-top: 28px; background: #fff; border-radius: var(--fp-radius); overflow: hidden; box-shadow: var(--fp-shadow); }
.fp-tarifs-table td, .fp-tarifs-table th { padding: 14px 18px; border-bottom: 1px solid var(--fp-line); text-align: left; }
.fp-tarifs-table tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   FAQ (accordeon)
   ========================================================================== */
.fp-faq-list { margin-top: 32px; border-top: 1px solid var(--fp-line); }
.fp-faq-item { border-bottom: 1px solid var(--fp-line); }
.fp-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; cursor: pointer; padding: 22px 4px; text-align: left; font-family: var(--fp-font-heading); font-weight: 600; font-size: 1.15rem; color: inherit; }
.fp-faq-icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.fp-faq-icon::before, .fp-faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--fp-primary); transform: translate(-50%, -50%); transition: transform .2s ease; }
.fp-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.fp-faq-q[aria-expanded="true"] .fp-faq-icon::after { transform: translate(-50%, -50%) rotate(0); }
.fp-faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.fp-faq-a-inner { padding: 0 4px 22px; color: var(--fp-ink-soft); max-width: 72ch; }

/* ==========================================================================
   Split image + texte
   ========================================================================== */
.fp-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; background: var(--fp-paper); }
.fp-split-media { position: relative; min-height: 460px; }
.fp-split-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.fp-split-text { padding: var(--fp-section-y) clamp(24px, 5vw, 72px); }
.fp-img-credit { position: absolute; bottom: 10px; right: 12px; font-size: .75rem; color: #fff; background: rgba(0,0,0,.4); padding: 3px 8px; border-radius: 4px; }
@media (max-width: 860px) { .fp-split { grid-template-columns: 1fr; } .fp-split-media { min-height: 280px; } .fp-split-text { padding: var(--fp-section-y-sm) var(--fp-gutter-mobile); } }

/* ==========================================================================
   Quote / Stats
   ========================================================================== */
.fp-quote-body { font-family: var(--fp-font-heading); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; border: 0; margin: 0; max-width: 26ch; }
.fp-quote-cite { margin-top: 16px; opacity: .9; }
.fp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-top: 36px; }
.fp-stat-val { font-family: var(--fp-font-heading); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }
.fp-stat-lbl { font-weight: 700; margin-top: 6px; }
.fp-stat-desc { opacity: .85; font-size: .95rem; }

/* ==========================================================================
   Horaires (2 colonnes : mascotte + table a entetes colorees)
   ========================================================================== */
.fp-horaires-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 48px; }
.fp-horaires-aside { display: flex; align-items: center; justify-content: center; }
.fp-horaires-mascotte img { max-width: 300px; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.18)); }
.fp-horaires-body { margin-top: 24px; }
/* Table d'horaires (module fp_horaires) : entetes colorees, lignes alternees. */
.fp-horaires-body table { width: 100%; border-collapse: collapse; background: var(--fp-paper); border-radius: var(--fp-radius); overflow: hidden; box-shadow: var(--fp-shadow); }
.fp-horaires-body thead th, .fp-horaires-body table th { background: var(--fp-secondary); color: #fff; font-family: var(--fp-font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 14px 18px; }
.fp-horaires-body td { padding: 13px 18px; border-bottom: 1px solid var(--fp-line); }
.fp-horaires-body tbody tr:nth-child(even) { background: var(--fp-cream); }
.fp-horaires-body tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) {
  .fp-horaires-grid { grid-template-columns: 1fr; gap: 28px; }
  .fp-horaires-aside { order: -1; }
  .fp-horaires-mascotte img { max-width: 220px; }
}

/* ==========================================================================
   Mascotte
   ========================================================================== */
.fp-mascotte-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.fp-mascotte-figure img { max-width: 220px; height: auto; }
.fp-mascotte-bubble, .fp-mascotte-inline .fp-mascotte-bubble { position: relative; background: var(--fp-accent); color: var(--fp-ink); padding: 20px 26px; border-radius: var(--fp-radius); font-family: var(--fp-font-heading); font-weight: 600; font-size: 1.2rem; max-width: 36ch; box-shadow: var(--fp-shadow); }
.fp-mascotte-inline { display: inline-flex; align-items: center; gap: 16px; }
.fp-mascotte-inline .fp-mascotte-figure img { max-width: 120px; }

/* ==========================================================================
   CTA pleine largeur
   ========================================================================== */
.fp-cta-section { background: var(--fp-primary); color: #fff; padding: var(--fp-section-y) 0; text-align: center; overflow: hidden; }
.fp-cta-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; }
.fp-cta-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--fp-primary) 70%, transparent), color-mix(in srgb, var(--fp-primary-dark) 85%, transparent)); }
.fp-cta-inner { max-width: 760px; margin: 0 auto; }
.fp-cta-lead { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); }
.fp-cta-desc { opacity: .95; max-width: 52ch; margin: 0 auto 12px; }
.fp-cta-actions { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Pages generiques / 404 / prose
   ========================================================================== */
.fp-page-hero { padding-top: calc(var(--fp-nav-h) + 40px); }
.fp-page-title { margin: 0; }
.fp-breadcrumb { font-size: .9rem; color: var(--fp-ink-soft); margin-bottom: 12px; }
.fp-breadcrumb a:hover { color: var(--fp-primary); }
.fp-sep { margin: 0 8px; opacity: .5; }
.fp-prose img { border-radius: var(--fp-radius); }
.fp-prose h2 { margin-top: 1.4em; }
.fp-404 { text-align: center; padding-top: calc(var(--fp-nav-h) + 80px); padding-bottom: 120px; }
.fp-404-title { font-size: clamp(2rem, 5vw, 3.4rem); }
.fp-404-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ==========================================================================
   Footer (bandeau newsletter colore + mascottes + colonnes sombres)
   ========================================================================== */
.fp-footer { background: var(--fp-dark); color: #fff; }

/* Bandeau newsletter : conteneur clair arrondi NON pleine largeur (facon
   RParc). Le fond, le radius et le padding portent sur l'element interne
   (contraint par .fp-wrap) : le fond sombre du footer respire tout autour. */
.fp-footer-newsletter { padding: 40px 0 0; }
.fp-footer-newsletter-inner {
  display: grid; grid-template-columns: 1.1fr auto auto; align-items: center; gap: 28px;
  background: var(--fp-accent); border-radius: 25px; padding: clamp(20px, 3vw, 25px);
}
/* Titre 2x plus grand (demande client) : chaque valeur du clamp est doublee
   par rapport a l'origine (1.1rem/1.5rem -> 2.2rem/3rem), max-width elargi en
   consequence pour ne pas casser la colonne sur 2-3 lignes. */
.fp-newsletter-title { color: #fff; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 14px; max-width: 15ch; }
.fp-newsletter { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-newsletter input[type="email"] { flex: 1 1 240px; min-width: 0; padding: 13px 16px; border: 0; border-radius: var(--fp-pill); background: #fff; color: var(--fp-ink); font: inherit; }
.fp-newsletter input[type="email"]::placeholder { color: var(--fp-ink-soft); }
/* Mascotte posee derriere/entre chaque raccourci (une par bouton, facon RParc).
   Les deux graphismes sont ESPACES (demande client) : plus de chevauchement
   negatif entre les deux, un vrai gap positif les separe nettement.
   z-index bas explicite : les boutons glass (.fp-footer-glass-btn) se posent
   PAR-DESSUS ce bloc (voir chevauchement plus bas). */
.fp-footer-mascottes { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 24px; align-self: end; }
.fp-footer-mascotte { width: 130px; height: auto; }
.fp-footer-shortcuts { display: flex; flex-direction: column; gap: 12px; }
.fp-footer-shortcut { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: var(--fp-pill); background: color-mix(in srgb, var(--fp-dark) 78%, transparent); color: #fff; font-family: var(--fp-font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; box-shadow: var(--fp-shadow); transition: transform .15s ease, background .2s ease; }
.fp-footer-shortcut:hover { transform: translateY(-2px); background: var(--fp-dark); }
.fp-footer-shortcut-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fp-white); color: var(--fp-dark); }
.fp-footer-shortcut-icon svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
  .fp-footer-shortcut { transition: none; }
}
/* Boutons « bons cadeaux » / « reserver » en effet verre (glass), poses PAR-DESSUS
   la mascotte : chevauchement horizontal sur .fp-footer-mascottes (marge negative)
   + z-index superieur. Actif uniquement en desktop (>1000px), la ou les mascottes
   sont visibles (masquees sous 1000px, cf. media query plus bas).
   Base du verre en --fp-dark (pas blanc) : un verre depoli a base blanche pose sur
   le fond teal clair de l'encart (--fp-accent) ne laisse qu'un contraste ~1.9:1
   pour un texte blanc (verifie), tres en dessous du seuil AA (4.5:1). A 55%
   d'opacite de --fp-dark, le verre reste translucide (la mascotte se devine au
   travers) tout en assurant ~5.8:1 pour le texte blanc, largement conforme. */
@media (min-width: 1001px) {
  .fp-footer-shortcuts { margin-left: -110px; }
  .fp-footer-glass-btn {
    position: relative;
    z-index: 2;
    background: color-mix(in srgb, var(--fp-dark) 55%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--fp-white) 35%, transparent);
  }
  .fp-footer-glass-btn:hover { background: color-mix(in srgb, var(--fp-dark) 65%, transparent); }
}
@media (max-width: 1000px) {
  .fp-footer-newsletter-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .fp-footer-mascottes { display: none; }
  .fp-footer-shortcuts { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 520px) {
  .fp-footer-newsletter-inner { border-radius: var(--fp-radius-lg); }
  .fp-footer-shortcuts { flex-direction: column; }
}

.fp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 56px 0 48px; }
.fp-footer-wordmark { display: inline-flex; flex-direction: column; line-height: .88; font-family: var(--fp-font-heading); font-weight: 400; text-transform: uppercase; color: #fff; }
.fp-footer-wordmark-l1 { font-size: 1.2rem; letter-spacing: .12em; }
.fp-footer-wordmark-l2 { font-size: 3rem; letter-spacing: .02em; }
.fp-footer-tag { color: rgba(255,255,255,.7); margin: 14px 0 18px; max-width: 34ch; }
.fp-footer-h { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; color: var(--fp-accent); }
.fp-footer-col ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fp-footer-col a { color: rgba(255,255,255,.8); }
.fp-footer-col a:hover { color: #fff; }
.fp-footer-address, .fp-footer-hours { color: rgba(255,255,255,.7); }

/* Boutons Legal (Connexion / inscription, Espace pro) : outline clair sur
   fond sombre, meme composant .fp-btn que le reste du site. */
.fp-footer-legal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.fp-footer-legal-btn { justify-content: flex-start; gap: 10px; width: fit-content; }
.fp-footer-legal-btn-icon { display: inline-flex; }
.fp-footer-legal-btn-icon svg { width: 18px; height: 18px; }

.fp-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-social { display: inline-block; padding: 7px 14px; border: 1px solid var(--fp-line-light); border-radius: var(--fp-pill); font-size: .9rem; }
.fp-social:hover { background: rgba(255,255,255,.1); }
/* Reseaux en pastilles a icones (facon RParc). */
.fp-socials-icons .fp-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; color: #fff; }
.fp-social-icon svg { width: 22px; height: 22px; }
.fp-social-icon:hover { background: var(--fp-primary); border-color: var(--fp-primary); }

/* Badges stores : stylises (fond noir, sobre), sans image ni lien mort. */
.fp-footer-stores { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fp-store-badge { display: flex; flex-direction: column; gap: 1px; width: fit-content; padding: 8px 16px; border-radius: var(--fp-radius-sm); background: var(--fp-ink); color: #fff; line-height: 1.2; }
.fp-store-badge small { font-size: .68rem; color: rgba(255,255,255,.75); }
.fp-store-badge strong { font-size: .92rem; font-weight: 600; }

.fp-footer-bottom { border-top: 1px solid var(--fp-line-light); }
.fp-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 20px 0; flex-wrap: wrap; }
.fp-copyright { margin: 0; color: rgba(255,255,255,.6); font-size: .9rem; }
.fp-footer-credits { margin: 0; color: rgba(255,255,255,.6); font-size: .85rem; display: flex; gap: 8px; flex-wrap: wrap; }
.fp-footer-credits-sep { color: rgba(255,255,255,.4); }
.fp-footer-legal { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.fp-footer-legal a { color: rgba(255,255,255,.6); font-size: .9rem; }
.fp-footer-legal a:hover { color: #fff; }

@media (max-width: 860px) { .fp-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) {
  .fp-footer-grid { grid-template-columns: 1fr; }
  .fp-footer-legal-actions { align-items: flex-start; }
  .fp-footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ==========================================================================
   Carte + formulaire de contact
   ========================================================================== */
.fp-map iframe { display: block; border-radius: var(--fp-radius); }
.fp-contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.fp-contact-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.fp-contact-form input, .fp-contact-form textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--fp-line-strong); border-radius: var(--fp-radius-sm); background: #fff; }
.fp-contact-form .fp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fp-form-success { background: color-mix(in srgb, var(--fp-secondary) 15%, #fff); border: 1px solid var(--fp-secondary); border-radius: var(--fp-radius-sm); padding: 16px; }
.fp-form-errors { background: #fdecea; border: 1px solid #e0440e; border-radius: var(--fp-radius-sm); padding: 12px 16px; }
@media (max-width: 600px) { .fp-contact-form .fp-form-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Reveal au scroll (progressif, desactive si reduced-motion)
   Timings alignes sur le source RParc (.fade-in-up) : translateY(20px),
   transition all 1s ease-out.
   ========================================================================== */
/* Vitesse d'apparition STANDARD du site (coherente partout) : 1.1s, easing tres
   doux (demarrage franc, arrivee tres douce). Reference unique via les tokens
   --fp-anim-dur / --fp-anim-ease (definis dans :root, main.css) : toute anim
   d'apparition du site s'y cale (offres, reveal, titres). Ajuster la vitesse
   partout = changer --fp-anim-dur. */
.fp-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--fp-anim-dur) var(--fp-anim-ease), transform var(--fp-anim-dur) var(--fp-anim-ease); will-change: opacity, transform; }
.fp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fp-reveal { opacity: 1; transform: none; transition: none; } }

/* Cartes de carrousel (offres, galerie, etapes, related) : TOUJOURS visibles.
   main.js ne leur pose plus .is-in (elles etaient exclues pour supprimer la
   « case blanche » qui apparaissait au defilement horizontal avant l'anim).
   L'apparition de la section offres a l'entree en vue reste assuree par
   .fp-offres-track (fondu du conteneur entier, cf. plus haut) : ce sont deux
   cibles differentes, aucun conflit. */
[data-fp-carousel] .fp-reveal { opacity: 1; transform: none; transition: none; }

/* Apparition automatique de TOUS les titres au scroll (fade-in-up), facon RParc
   (.em-content :is(h1,h2,h3)). La classe est posee par main.js sur chaque titre du
   contenu qui n'est pas deja dans un bloc .fp-reveal, puis revelee a l'entree en vue.
   Timings alignes sur le source : translateY(20px), transition all 1s ease-out. */
.fp-anim-h { opacity: 0; transform: translateY(24px); transition: opacity var(--fp-anim-dur) var(--fp-anim-ease), transform var(--fp-anim-dur) var(--fp-anim-ease); will-change: opacity, transform; }
.fp-anim-h.is-visible { opacity: 1; transform: none; }
/* Etat « arme » (le temps d'un frame quand main.js vient de poser .fp-anim-h) :
   transition coupee pour que le passage a l'etat masque soit INSTANTANE (pas de
   fondu de disparition du titre peint visible au 1er rendu). Voir setupHeadingReveal. */
.fp-anim-h.fp-anim-armed { transition: none; }
@media (prefers-reduced-motion: reduce) { .fp-anim-h { opacity: 1; transform: none; transition: none; } }
/* Un titre qui porte a la fois .fp-reveal ET .fp-anim-h : c'est .fp-anim-h qui
   PILOTE (pas .fp-reveal). Le titre reste CACHE tant que .fp-anim-h n'est pas
   .is-visible, MEME si .fp-reveal.is-in est pose sur lui (sinon il apparaitrait
   deja visible et ne s'animerait jamais). .fp-anim-h.is-visible le revele.
   IMPORTANT : ne PAS forcer opacity:1 ici (bug precedent : le titre etait
   toujours visible, donc jamais anime). */
.fp-anim-h.fp-reveal { opacity: 0; transform: translateY(24px); }
.fp-anim-h.fp-reveal.is-in:not(.is-visible) { opacity: 0; transform: translateY(24px); }
.fp-anim-h.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fp-anim-h.fp-reveal, .fp-anim-h.fp-reveal.is-in:not(.is-visible) { opacity: 1; transform: none; }
}

/* CONSIGNE GLOBALE (demande client) : sur l'ACCUEIL, les SECTIONS / BLOCS de
   contenu ne doivent PLUS apparaitre en fondu (l'effet « section blanche qui se
   remplit au chargement / au scroll » n'est pas voulu). SEULS LES TITRES
   s'animent (.fp-anim-h, gere ci-dessus). On neutralise donc l'apparition
   .fp-reveal de tout element de contenu QUI N'EST PAS un titre (cartes
   offres/evenements/resto, mascottes, tableaux, encarts...) : ils sont visibles
   d'emblee, position finale, sans transition. Les titres gardent leur apparition
   car ils portent .fp-anim-h (exclus ici par :not(.fp-anim-h)).
   EXCEPTION (demande client, retour affine) : les CARTES ACTIVITES (.fp-actcard)
   CONSERVENT leur apparition LIGNE PAR LIGNE (stagger data-fp-delay par rangee,
   pose dans le markup) : c'est la seule grille de contenu qu'on anime encore. On
   l'exclut donc de la neutralisation ci-dessous. */
.page-template-template-home .fp-reveal:not(.fp-anim-h):not(.fp-actcard) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ==========================================================================
   Soulignement anime des liens de contenu editorial (facon RParc).
   Cible : .fp-prose a (et tout lien dans un conteneur editorial).
   Exclusions : .fp-btn (boutons), .fp-actcard a, .fp-offre-card a (cartes).
   ========================================================================== */
/* Trait qui se forme a gauche (scaleX 1 au repos) et se retire au survol
   (scaleX 0), plus legere remontee (translateY). */
.fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"]) {
  position: relative;
  color: var(--fp-primary);
  text-decoration: none;
  transition: transform .3s ease, color .3s ease;
  display: inline;
}
.fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"])::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--fp-primary);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .3s ease;
}
.fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"]):hover {
  transform: translateY(-2px);
  color: var(--fp-primary);
}
.fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"]):hover::after {
  transform: scaleX(0);
}

/* Sur fonds sombres : trait et texte en blanc. */
.fp-s-dark .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"]),
.fp-s-primary .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"]),
.fp-s-accent .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"]) {
  color: var(--fp-white);
}
.fp-s-dark .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"])::after,
.fp-s-primary .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"])::after,
.fp-s-accent .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"])::after {
  background: var(--fp-white);
}

/* Reduced-motion : ni transition ni translateY. */
@media (prefers-reduced-motion: reduce) {
  .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"]),
  .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"])::after {
    transition: none;
  }
  .fp-prose a:not(.fp-btn):not([class*="fp-actcard"]):not([class*="fp-offre"]):hover {
    transform: none;
  }
}

/* ==========================================================================
   Popup horaires (partage, rendu via wp_footer par fp_horaires_popup,
   inc/template-tags.php). Markup reel :
   .fp-horaires-popup[hidden] (racine, role dialog)
     > .fp-horaires-popup-overlay (fond sombre plein ecran, [data-fp-popup-close])
     > .fp-horaires-popup-panel (boite centree arrondie)
         > .fp-horaires-popup-close (bouton x, [data-fp-popup-close])
         > .fp-horaires-popup-title (h2)
         > .fp-horaires-popup-status(.is-open/.is-closed)
             > .fp-horaires-popup-dot (pastille ronde) + .fp-horaires-popup-status-text
         > .fp-popup-tabs > .fp-popup-tab[data-tab](.is-active)
         > .fp-popup-panel[data-panel](.is-active)
             > .fp-horaires-popup-liste > .fp-horaires-popup-ligne
                 > .fp-horaires-popup-jour + .fp-horaires-popup-heures(.is-ferme)
             > .fp-horaires-popup-note
         > .fp-horaires-popup-mascotte (img)
   Ouvert par le bouton "Horaires" de la barre sticky (.fp-open-horaires,
   data-fp-popup-open) ou tout declencheur [data-fp-popup-open]
   (cf. setupHorairesPopup, main.js).
   ========================================================================== */
.fp-horaires-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fp-horaires-popup[hidden] { display: none; }
/* Overlay : fond sombre plein ecran, sous la boite (z-index implicite par
   ordre du DOM), cliquable pour fermer (data-fp-popup-close). */
.fp-horaires-popup-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--fp-dark) 65%, transparent);
  cursor: pointer;
}
.fp-horaires-popup-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--fp-paper);
  border-radius: var(--fp-radius-lg);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--fp-shadow-strong);
}
.fp-horaires-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--fp-cream);
  color: var(--fp-ink);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.fp-horaires-popup-close:hover { background: var(--fp-line); }
.fp-horaires-popup-title {
  margin: 0 40px 14px 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}
/* Badge ouvert/ferme : pastille ronde verte/rouge (.fp-horaires-popup-dot)
   + texte de statut. */
.fp-horaires-popup-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 6px 14px;
  border-radius: var(--fp-pill);
  background: color-mix(in srgb, var(--fp-primary) 10%, var(--fp-paper));
  font-family: var(--fp-font-heading);
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fp-ink);
}
.fp-horaires-popup-status.is-closed {
  background: color-mix(in srgb, var(--fp-danger) 10%, var(--fp-paper));
}
.fp-horaires-popup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fp-primary);
  flex: 0 0 auto;
}
.fp-horaires-popup-status.is-closed .fp-horaires-popup-dot {
  background: var(--fp-danger);
}
.fp-popup-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--fp-line);
  margin-bottom: 18px;
}
.fp-popup-tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 10px 2px;
  font-family: var(--fp-font-heading);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--fp-ink-soft);
  cursor: pointer;
}
.fp-popup-tab.is-active {
  color: var(--fp-primary);
  border-bottom-color: var(--fp-primary);
}
.fp-popup-panel:not(.is-active) { display: none; }
/* Table horaires propre : jour en gras a gauche, heures a droite. */
.fp-horaires-popup-liste {
  display: flex;
  flex-direction: column;
}
.fp-horaires-popup-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--fp-line);
}
.fp-horaires-popup-ligne:last-child { border-bottom: 0; }
.fp-horaires-popup-jour {
  font-weight: 700;
  color: var(--fp-ink);
}
.fp-horaires-popup-heures {
  color: var(--fp-ink-soft);
  text-align: right;
}
.fp-horaires-popup-heures.is-ferme {
  color: var(--fp-danger);
  font-weight: 600;
}
.fp-horaires-popup-note {
  margin: 14px 0 0;
  font-size: .88rem;
  color: var(--fp-ink-soft);
}
.fp-horaires-popup-mascotte {
  display: block;
  max-width: 140px;
  height: auto;
  margin: 20px 0 0 auto;
}
@media (max-width: 640px) {
  .fp-horaires-popup-mascotte { max-width: 100px; margin: 16px auto 0; }
}

/* ==========================================================================
   FAQ 2 colonnes (mascotte + accordeon), facon modele. Reutilise la grille
   mascotte de fp_render_horaires (.fp-horaires-grid / .fp-horaires-aside /
   .fp-horaires-mascotte, memes classes, meme comportement responsive) : la
   zone FAQ de la page Informations (inc/sections.php, fp_render_faq_section)
   compose une <section class="fp-faq-split fp-s-light"> autour de cette
   grille, avec l'accordeon fp_render_faq_markup (markup interne inchange)
   loge dans la colonne de droite (.fp-faq-split-main). Le double wrap/padding
   issu de la <section class="fp-faq"> imbriquee est neutralise ci-dessous
   (fond et espacement verticaux portes par .fp-faq-split, pas par la section
   FAQ interne).
   ========================================================================== */
.fp-faq-split-main .fp-faq {
  background: none;
  padding: 0;
}
.fp-faq-split-main .fp-faq .fp-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}
.fp-faq-split-main .fp-faq-list { margin-top: 24px; }
@media (max-width: 980px) {
  .fp-faq-split .fp-horaires-grid { grid-template-columns: 1fr; gap: 28px; }
  .fp-faq-split .fp-horaires-aside { order: -1; }
  .fp-faq-split .fp-horaires-mascotte img { max-width: 220px; }
}