/*
Theme Name: Le Nido Creche
Theme URI: https://lenidocreche.ma
Author: Le Nido Team
Author URI: https://www.facebook.com/Lenidocreche/
Description: Theme WordPress sur-mesure pour LE NIDO, crèche maternelle à Hay Riad, Rabat. Design chaleureux pensé pour la petite enfance, avec sections dynamiques (programmes, témoignages, galerie) gérables depuis l'administration WordPress.
Version: 1.5.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: lenido
*/

/* ------------------------------------------------------------------
 * Changelog
 * 1.5.2
 *  - Fixed: header CTA buttons (Apparence > Personnaliser > Barre de
 *    navigation > Boutons) were saved but never rendered in the header;
 *    they now appear in both the transparent hero bar and the sticky bar.
 *  - Fixed: "Visite virtuelle" button now also renders in the header and
 *    the mobile menu, matching the README (it was hero-only before).
 *  - Fixed: LENIDO_VERSION (functions.php) now matches the style.css
 *    version again — it had drifted to 1.3.0 while the theme was 1.5.x.
 * 1.5.1
 *  - Footer credit line: "Made with ❤ for early childhood" replaced
 *    with an editable "Made with ❤ by [Name]" credit, where the name
 *    is a separate field that becomes a clickable link to whatever URL
 *    you set — all from Apparence > Personnaliser > Pied de page.
 * 1.5.0
 *  - Language switcher (FR/EN): restyled to match the site's warm
 *    palette instead of a generic grey pill, and now stays visible in
 *    the header bar at every screen size (including phones) instead
 *    of being hidden inside the hamburger menu.
 *  - Gallery honeycomb: each hexagon's frame color is now its own
 *    setting (was hardcoded, including a near-black and a near-white
 *    slot, plus a repeated color), editable from Apparence >
 *    Personnaliser > En-tête section Galerie > Couleurs des hexagones.
 *  - Program pages: page title (browser tab, breadcrumb, heading, image
 *    alt text) now follows the FR/EN switcher instead of always
 *    showing French.
 * ------------------------------------------------------------------ */

:root{
  --nido-cream:#FFF8EF;
  --nido-yellow:#F7C948;
  --nido-coral:#F2846B;
  --nido-mint:#8FCFB0;
  --nido-blue:#6FB7C9;
  --nido-navy:#2E3B4E;
  --nido-text:#3A3A3A;
  --nido-white:#FFFFFF;
  --radius-lg:28px;
  --radius-md:18px;
  --shadow-soft:0 12px 30px rgba(46,59,78,0.08);
  --font-heading:'Nunito', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
  --font-hand:'Caveat', cursive;
  --nido-header-hero-bg:rgba(255,248,239,0.7);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
#hero, #about, #programmes, #galerie, #temoignages, #contact, #contact-form{
  scroll-margin-top:100px;
}
/* Extra offset on programme detail pages only, to clear both the fixed
   site header and the sticky in-page sub-nav sitting just below it. */
#programme-highlights, #programme-gallery, #programme-schedule, #programme-infos{
  scroll-margin-top:160px;
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--nido-text);
  background:var(--nido-cream);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}

/* Ambient background-dots animation removed sitewide (was a fixed,
   infinitely-animating, mix-blend-mode layer behind every page — a steady
   repaint cost on every scroll frame, on every device). See functions.php /
   header.php for the matching markup removal. */

/* Phone-only perf pass: several small decorative animations run forever,
   sitewide, stacking up on top of each other while the page scrolls -
   this is what makes scrolling feel glitchy/janky on phones. Each one is
   harmless alone on a desktop GPU but adds up on a phone. Desktop/tablet
   keep all of these; only phones (≤640px) get them switched off. The
   hero's own animations (title gradient, floating letters) are handled
   separately in the hero's own mobile block below. */
@media (max-width:640px){
  /* Header wave hinge: sways forever, sitewide, on top of the fixed
     header's own backdrop blur. */
  .site-header.has-hero::after{animation:none;}
  /* About section: the blob-morph animates border-radius, which can't be
     GPU-accelerated - it forces a repaint of the whole photo, every
     frame, forever. The sphere's scale-pulse is cheaper but still an
     always-on repaint; off too for consistency. */
  .about-sphere{animation:none;}
  .about-photo-frame{animation:none;}
  /* Program cards: every card floats up/down forever, simultaneously. */
  .program-card{animation:none;}
  /* Virtual-tour button's glow pulse, wherever it appears (header or hero). */
  .btn--tour{animation:none;}
}

h1,h2,h3,h4{font-family:var(--font-heading);color:var(--nido-navy);margin:0 0 .5em;line-height:1.2;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.section{padding:90px 0;position:relative;}
.section--tight{padding:60px 0;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.85rem;
  color:var(--nido-coral);
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:1px;
}
.section-head{text-align:center;max-width:640px;margin:0 auto 50px;}
.section-head h2{
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  font-weight:800;
  letter-spacing:-.01em;
  position:relative;
  display:inline-block;
  padding-bottom:22px;
}
/* Playful gradient underline under every section title (About, Programs,
   Gallery, FAQ, Contact, Testimonials...) so headings feel warm and
   hand-placed rather than plain/minimal. Deliberately NOT applied to the
   hero <h1> (different selector entirely), which keeps its own look. */
.section-head h2::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%) rotate(-1deg);
  width:76px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--nido-coral),var(--nido-yellow),var(--nido-mint));
}
.section-head p{font-size:1.05rem;opacity:.85;}
/* Same fix as hero-content p below: without these, reveal-up's opacity:0
   starting state gets overridden by this rule's own fixed opacity, so the
   fade-in on these section subtitles never actually starts invisible. */
.section-head p.reveal-up{opacity:0;}
.section-head p.reveal-up.is-visible{opacity:.85;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:999px;
  font-family:var(--font-heading);font-weight:600;font-size:1rem;
  transition:transform .25s ease, box-shadow .25s ease, opacity .9s ease, translate .9s ease;
  border:none;cursor:pointer;
}
.btn--primary{background:var(--nido-coral);color:#fff;box-shadow:0 10px 22px rgba(242,132,107,.35);}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(242,132,107,.45);color:#fff;}
.btn--outline{background:transparent;border:2px solid var(--nido-navy);color:var(--nido-navy);}
.btn--outline:hover{background:var(--nido-navy);color:#fff;}
.btn--light{background:#fff;color:var(--nido-navy);}

/* "Visite virtuelle" button: deliberately distinct from the other
   buttons (gradient + a soft pulsing glow) since it's meant to stand
   out in the header and hero. Respects the "Animations au défilement"
   toggle and prefers-reduced-motion — the pulse just becomes a plain
   static glow when either is off. */
.btn--tour{
  background:linear-gradient(135deg, var(--nido-blue), var(--nido-mint));
  color:#fff;
  box-shadow:0 10px 22px rgba(111,183,201,.4);
  animation:nido-tour-pulse 2.6s ease-in-out infinite;
}
.btn--tour:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(111,183,201,.55);color:#fff;}
.btn--tour i{font-size:.95em;}
@keyframes nido-tour-pulse{
  0%, 100%{box-shadow:0 10px 22px rgba(111,183,201,.4);}
  50%{box-shadow:0 10px 30px rgba(111,183,201,.75);}
}
@media (prefers-reduced-motion: reduce){
  .btn--tour{animation:none;}
}
body.lenido-no-animations .btn--tour{animation:none;}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:100;
  background:var(--nido-header-bg, rgba(255,248,239,0.55));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(46,59,78,0.06);
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* On the homepage the bar is a normal, solid block at the top of the
   page - it takes up its own space (like any other element), so the
   hero section (its next sibling) starts right below it instead of
   underneath/behind it. It still scrolls away with the page once you
   pass it, same as before; the separate solid sticky bar further down
   still takes over as the fixed nav once you've scrolled past the hero.
   Its color (and the wave hinged below it) come from
   --nido-header-hero-bg, editable in the Customizer under Barre de
   navigation (header) > Barre au-dessus du hero. */
.site-header.has-hero{
  position:relative;
  background-color:var(--nido-header-hero-bg);
  border-bottom:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
/* The wave itself: one smooth, full-width hump hinged to the bottom edge
   of the hero nav bar (top:100% of the header, i.e. starts exactly where
   the bar ends). Rather than baking a color into the SVG, the shape is
   used as a mask over a plain background-color: var(--nido-header-hero-bg)
   — the same variable the bar above uses — so the two always match
   exactly, including when changed from the Customizer. It's a single
   non-repeating shape (not a tiled pattern) so it reads as one continuous
   curve across the whole bar, like a soft hem. */
.site-header.has-hero::after{
  content:"";
  position:absolute;
  /* Sits 3px *into* the header (instead of exactly flush) so the sway
     animation below only ever animates the wave between "tucked slightly
     under the bar" and "flush with the bar" - it can no longer pull
     away from the header and reveal a gap of the hero photo behind it,
     which is what was happening on phones. */
  top:calc(100% - 3px);
  left:0;
  width:100%;
  height:44px;
  pointer-events:none;
  background-color:var(--nido-header-hero-bg);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 34' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C 20 26, 35 2, 55 14 C 72 24, 88 6, 100 12 L100 0 L0 0 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 34' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C 20 26, 35 2, 55 14 C 72 24, 88 6, 100 12 L100 0 L0 0 Z' fill='%23000'/%3E%3C/svg%3E");
  animation:lenido-header-wave-sway 8s ease-in-out infinite alternate;
}
@keyframes lenido-header-wave-sway{
  from{transform:translateY(0);}
  to{transform:translateY(3px);}
}
@media (prefers-reduced-motion: reduce){
  .site-header.has-hero::after{animation:none;}
}
body.lenido-no-animations .site-header.has-hero::after{animation:none;}

/* Solid sticky bar: hidden above the viewport until you scroll past the
   hero, then it slides down into place and stays fixed for the rest of
   the page (this is what replaces the old "sticky" behavior). */
.site-header--sticky{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease, box-shadow .25s ease;
}
.site-header--sticky.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
  box-shadow:0 4px 18px rgba(46,59,78,.08);
}
/* The bar has three flex children: logo/branding, the nav links, and the
   CTA cluster (lang switcher + social + tour button + custom buttons).
   Previously none of them had a shrink/overflow strategy, so once their
   combined natural width exceeded the container - easy to hit on real
   laptop widths (1024-1300px, still above the 960px hamburger cutoff)
   once a few nav links + a couple of header buttons + the tour button
   were all present at once - the row simply overflowed the viewport
   instead of adapting. Branding and the CTA cluster now hold their
   natural size (flex:0 0 auto) while the nav is the flexible element:
   it shrinks first (flex:1 1 auto + min-width:0) and, if the links
   still don't fit, scrolls horizontally within its own box
   (overflow-x:auto, scrollbar hidden) rather than pushing the CTA
   cluster or the whole page wider than the screen. */
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;padding-top:14px;padding-bottom:14px;}
.site-branding{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.site-branding img{height:52px;width:auto;border-radius:14px;}
.site-branding .name{font-family:var(--font-heading);font-weight:700;font-size:1.35rem;color:var(--nido-navy);white-space:nowrap;}
.site-branding .baseline{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--nido-coral);font-weight:600;white-space:nowrap;}

.main-nav{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.main-nav::-webkit-scrollbar{display:none;}
.main-nav ul{display:flex;gap:clamp(18px, 2.4vw, 34px);align-items:center;white-space:nowrap;width:max-content;margin:0 auto;}
.main-nav a{font-weight:600;font-size:.98rem;position:relative;padding:6px 0;transition:color .2s ease;color:var(--nido-nav-text, var(--nido-navy));}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--nido-nav-active, var(--nido-coral));transition:width .25s ease;}
.main-nav a:hover{color:var(--nido-nav-active, var(--nido-coral));}
.main-nav a:hover::after{width:100%;}
.main-nav a.is-active-section{color:var(--nido-nav-active, var(--nido-coral));}
.main-nav a.is-active-section::after{width:100%;}
#mobileNav a.is-active-section{color:var(--nido-nav-active, var(--nido-coral));}

.header-cta{display:flex;align-items:center;gap:clamp(10px, 1.4vw, 18px);flex:0 0 auto;}
.header-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mobile-nav-buttons .btn{align-self:flex-start;}

/* Belt-and-braces for a heavily-loaded CTA cluster (several header
   buttons + tour button + social + lang switcher) that's already wide
   enough on its own to squeeze the nav right before the 960px hamburger
   cutoff takes over anyway - shrinks the lang switcher a little earlier
   instead of letting the bar get visually cramped just above 960px.
   It stays visible (never display:none) - a language switch is a core
   action, not something to hide behind an extra tap. */
@media (max-width:1100px) and (min-width:961px){
  .header-cta{gap:10px;}
  .header-cta > .lang-switcher{padding:3px;}
  .header-cta > .lang-switcher .lang-switcher-link{min-width:32px;padding:5px 9px;font-size:.76rem;}
}

/* Language switcher - built-in FR/EN toggle, see lenido_language_switcher()
   in functions.php. Styled as a warm, branded pill (not a generic grey
   toggle) so it reads as part of the site rather than a bolted-on plugin
   widget, and stays visible in the header bar at every screen size,
   including phones, instead of being buried inside the hamburger menu. */
.lang-switcher{
  display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:color-mix(in srgb, var(--nido-coral, #f2846b) 12%, #fff);
  border:1.5px solid color-mix(in srgb, var(--nido-coral, #f2846b) 35%, transparent);
  box-shadow:0 1px 3px rgba(46,59,78,.08);
}
.lang-switcher-link{
  display:inline-flex;align-items:center;justify-content:center;
  gap:5px;min-width:38px;padding:6px 12px;border-radius:999px;
  font-family:var(--font-heading);
  font-size:.78rem;font-weight:800;letter-spacing:.03em;
  color:var(--nido-navy, #2e3b4e);text-decoration:none;line-height:1;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.lang-switcher-link:hover{background:rgba(46,59,78,.1);}
.lang-switcher-link:active{transform:scale(.94);}
.lang-switcher-link:focus-visible{outline:2px solid var(--nido-coral, #ff7a59);outline-offset:2px;}
.lang-switcher-link.is-active{
  background:var(--nido-coral, #f2846b);color:#fff;
  box-shadow:0 2px 6px color-mix(in srgb, var(--nido-coral, #f2846b) 55%, transparent);
}
/* On the transparent hero bar the header text is white, so the pill
   background needs to switch to a light-on-dark treatment to stay
   legible until the solid sticky header takes over. */
.site-header.has-hero .lang-switcher{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.6);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.site-header.has-hero .lang-switcher-link{color:#fff;}
.site-header.has-hero .lang-switcher-link:hover{background:rgba(255,255,255,.28);}
.site-header.has-hero .lang-switcher-link.is-active{
  background:#fff;color:var(--nido-coral, #f2846b);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.mobile-nav .lang-switcher{
  margin-top:20px;justify-content:flex-start;
  background:color-mix(in srgb, var(--nido-coral, #f2846b) 12%, #fff);
  border-color:color-mix(in srgb, var(--nido-coral, #f2846b) 35%, transparent);
}

/* Phones: the switcher used to be hidden here and only reachable after
   opening the hamburger drawer, so visitors often never noticed the site
   was bilingual. It now stays put in the bar itself, just sized down a
   touch (and with tighter gap from the hamburger button) so both fit
   comfortably next to the logo on narrow screens. */
@media (max-width:640px){
  .header-cta{gap:8px;}
  .lang-switcher{padding:2px;gap:1px;}
  .lang-switcher-link{min-width:30px;padding:5px 8px;font-size:.72rem;}
}
@media (max-width:380px){
  .lang-switcher-link{min-width:26px;padding:4px 6px;font-size:.68rem;}
}

.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--nido-navy);cursor:pointer;}

/* Since the header is now fixed (floats over the page), every other page's
   content needs to start below it. The homepage hero handles its own
   spacing instead, so its background can extend behind the header. */
#main-content{padding-top:90px;}
body.home #main-content{padding-top:0;}

/* Hero */
.hero{
  position:relative;
  padding:150px 0 120px;
  /* A fixed height (not min-height) means the section can never grow
     taller just because a title wraps onto a 3rd line - the photo/section
     stays exactly this size no matter what. overflow is visible (not
     hidden) so that IF text ever needs more room than this gives it, only
     the text/buttons spill past the edge instead of the whole section
     stretching to fit them. The background photo/slider/floating-letters
     don't need .hero's own overflow:hidden to stay contained - they're
     each absolutely positioned to exactly match this box already, and the
     slider track and floating-letters layer both clip themselves via
     their own overflow:hidden. */
  height:620px;
  overflow:visible;
  display:flex;
  align-items:center;
  isolation:isolate;
  /* Base duration for the whole-hero entrance fade below. Overridden
     inline per-page from Apparence > Personnaliser > Hero > "Vitesse de
     l'animation" (see hero.php) - this value here is only the fallback
     for contexts where that inline custom property isn't present. */
  --nido-hero-anim-speed:1.4s;
}
/* Whole-hero entrance fade: the background media, overlay, floating
   letters, text, buttons and badges all start invisible by DEFAULT here
   in the stylesheet - true from the very first pixel painted - rather
   than depending on main.js (which sits at the very bottom of the page,
   see the in_footer=true enqueue in functions.php) to apply a hidden
   class after the fact. That gap between "HTML/CSS ready" and "JS has
   run" used to let the browser paint everything at full opacity first,
   so the fade either flashed or got skipped entirely. Now the hidden
   state is always true from the start, and main.js's only job (further
   down) is to ADD .is-visible, staggered, once the page is ready - it
   never sets the hidden state itself. If JS is disabled entirely, the
   <noscript> rule in header.php forces everything back to visible so the
   hero isn't stuck permanently blank. */
.hero-media{
  position:absolute;inset:0;z-index:0;background:var(--nido-navy);
  opacity:0;
  transform:scale(1.06);
  transition:opacity calc(var(--nido-hero-anim-speed) * 1.2) cubic-bezier(.22,1,.36,1),
             transform calc(var(--nido-hero-anim-speed) * 1.7) cubic-bezier(.22,1,.36,1);
}
.hero-media.is-visible{opacity:1;transform:scale(1);}
.hero-media-fill{width:100%;height:100%;object-fit:cover;display:block;}

/* Slider: real slide (translate) transition instead of crossfade */
.hero-slider{position:absolute;inset:0;overflow:hidden;}
.hero-slider-track{
  display:flex;width:100%;height:100%;
  transition:transform 1.1s cubic-bezier(.45,0,.15,1);
  will-change:transform;
  backface-visibility:hidden;
}
.hero-slide{
  flex:0 0 100%;width:100%;height:100%;
  background-image:var(--hero-bg-desktop);
  background-size:cover;background-position:center;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.hero-overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(180deg, rgba(20,26,36,.15) 0%, rgba(20,26,36,.55) 100%);
  opacity:0;
  transition:opacity var(--nido-hero-anim-speed) cubic-bezier(.22,1,.36,1) calc(var(--nido-hero-anim-speed) * .09);
}
.hero-overlay.is-visible{opacity:1;}
.hero-slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.32);
  color:var(--nido-hero-arrow-color, #fff);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.95rem;
  transition:background .2s ease, transform .2s ease;
}
.hero-slider-arrow:hover{background:rgba(255,255,255,.3);transform:translateY(-50%) scale(1.06);}
.hero-slider-arrow--prev{left:22px;}
.hero-slider-arrow--next{right:22px;}
@media (max-width:640px){
  .hero-slider-arrow{display:none;}
}

.hero .container{position:relative;z-index:2;}

/* Floating letters: decorative, sit above the photo but behind the text
   (z-index:1, between .hero-media's 0 and .container's 2). Each letter is
   two nested elements so two independent transforms can combine without
   fighting each other: the outer .floating-letter is moved by JS in
   response to the mouse (parallax), while the inner span runs its own
   endless CSS "bob" animation - that's what makes them float AND react
   to the cursor at the same time. */
.hero-floating-letters{
  position:absolute;inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity calc(var(--nido-hero-anim-speed) * 1.1) cubic-bezier(.22,1,.36,1) calc(var(--nido-hero-anim-speed) * .2);
}
.hero-floating-letters.is-visible{opacity:1;}
.floating-letter{
  position:absolute;
  transition:transform .25s ease-out;
  will-change:transform;
}
.floating-letter-inner{
  display:inline-block;
  font-family:var(--font-hand);
  font-weight:700;
  color:rgba(255,255,255,.55);
  text-shadow:0 4px 16px rgba(20,26,36,.25);
  font-size:clamp(34px, 4.6vw, 64px);
  line-height:1;
  animation:lenido-letter-float 6s ease-in-out infinite;
}
/* Held paused until .hero-anim-ready is added (once the hero text/buttons
   fade-in has fully finished), so it never overlaps that entrance animation. */
.hero:not(.hero-anim-ready) .floating-letter-inner{animation-play-state:paused;}
body.lenido-no-animations .floating-letter-inner{animation:none;}
.floating-letter-inner svg{
  display:block;
  width:clamp(32px, 3.6vw, 50px);
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 4px 10px rgba(20,26,36,.25));
}
.floating-letter:nth-child(1) .floating-letter-inner{animation-duration:6.5s;animation-delay:-.5s;}
.floating-letter:nth-child(2) .floating-letter-inner{animation-duration:7.5s;animation-delay:-2.3s;}
.floating-letter:nth-child(3) .floating-letter-inner{animation-duration:5.6s;animation-delay:-1.1s;}
.floating-letter:nth-child(4) .floating-letter-inner{animation-duration:8s;animation-delay:-3.4s;}
.floating-letter:nth-child(5) .floating-letter-inner{animation-duration:6.9s;animation-delay:-4.2s;}
.floating-letter:nth-child(6) .floating-letter-inner{animation-duration:7.2s;animation-delay:-.9s;}
.floating-letter:nth-child(7) .floating-letter-inner{animation-duration:6.1s;animation-delay:-2.8s;}
.floating-letter:nth-child(8) .floating-letter-inner{animation-duration:8.4s;animation-delay:-1.8s;}
.floating-letter:nth-child(9) .floating-letter-inner{animation-duration:7.8s;animation-delay:-3.9s;}
@keyframes lenido-letter-float{
  0%, 100%{transform:translateY(0) rotate(-3deg);}
  50%{transform:translateY(-18px) rotate(6deg);}
}
.floating-plane .floating-letter-inner svg{
  width:clamp(58px, 6.4vw, 92px);
}
.floating-plane .floating-letter-inner{
  animation:lenido-plane-fly 9s ease-in-out infinite;
}
@keyframes lenido-plane-fly{
  0%{transform:translate(0,0) rotate(-6deg);}
  50%{transform:translate(26px,-20px) rotate(-2deg);}
  100%{transform:translate(0,0) rotate(-6deg);}
}
/* Note: the idle bob here is intentionally left on even for
   prefers-reduced-motion, since it's small/slow and decorative - the more
   noticeable mouse-parallax effect (in main.js) is what gets skipped for
   that preference instead. */
/* Shown on mobile too now, just scaled down a touch so the letters stay
   decorative rather than crowding the hero text on small screens. */
@media (max-width:640px){
  .hero-floating-letters{transform:scale(.65);transform-origin:center;opacity:.7;}
  .hero-floating-letters.is-visible{opacity:.7;}
}
.hero-content{
  max-width:660px;
  transition:opacity .4s ease, transform .4s ease;
}
/* Per-slide transition when the slider auto-advances: fade + slight rise
   (or slide/zoom, depending on the per-slide "animation" choice in the
   Customizer). Desktop/tablet only - switched off for phone further down. */
.hero-content.is-transitioning{opacity:0;transform:translateY(14px);}
.hero-content[data-animation="slide"].is-transitioning{opacity:0;transform:translateY(34px);}
.hero-content[data-animation="zoom"].is-transitioning{opacity:0;transform:scale(.94);}
.hero-content[data-animation="none"]{transition:none;}
.hero-content[data-animation="none"].is-transitioning{opacity:1;transform:none;}
.hero-content .eyebrow{
  color:var(--nido-hero-eyebrow-color, #fff);
  font-size:var(--nido-hero-eyebrow-size, 13px);
  background:linear-gradient(120deg, var(--nido-coral), var(--nido-mint));
  backdrop-filter:blur(3px);
  padding:6px 16px;
  border-radius:999px;
}
.hero-content .eyebrow::before{content:none;}
.hero-content h1{
  font-size:clamp(2.2rem, 4.5vw, var(--nido-hero-title-size, 54px));
}
/* Each word of the hero title gets its own solid color from the site's
   active palette - cycling coral, yellow, mint, blue, cream, then
   repeating for longer titles. No gradient, no background-clip, no
   animation; these read the same --nido-* variables as everywhere else
   on the site, so they follow whichever palette is chosen in the
   Customizer. Navy is skipped: too close to the hero's dark photo
   overlay to stay legible. See lenido_hero_colorize_title() in
   functions.php (and formatTitle() in main.js for slides after the
   first) for the word-by-word markup this styles. */
.hero-content h1 .title-word{color:var(--nido-hero-title-color, #fff);}
.hero-content h1 .title-word-1{color:var(--nido-coral);}
.hero-content h1 .title-word-2{color:var(--nido-yellow);}
.hero-content h1 .title-word-3{color:var(--nido-mint);}
.hero-content h1 .title-word-4{color:var(--nido-blue);}
.hero-content h1 .title-word-5{color:var(--nido-cream);}
.hero-content p{
  color:var(--nido-hero-subtitle-color, #fff);
  font-size:var(--nido-hero-subtitle-size, 18px);
  max-width:560px;margin-bottom:28px;
}
/* Text/buttons/badges entrance fade on first load (see the comment above
   .hero-media for the full architecture reasoning). Duration comes from
   the shared --nido-hero-anim-speed variable so the whole cascade can be
   slowed down or sped up from one place (Apparence > Personnaliser >
   Hero > "Vitesse de l'animation" - see hero.php and main.js, which reads
   the same value to scale the stagger gaps between elements to match).
   Each element also enters from a different direction - eyebrow from the
   left, headline from below, subtitle from the right, the two buttons
   from opposite bottom corners, badges alternating left/right - instead
   of everything rising from the same direction, so the reveal feels like
   pieces converging rather than one flat rise. Desktop/tablet only -
   switched off for phone further down. */
.hero-content .eyebrow,
.hero-content h1,
.hero-content p,
.hero-actions .btn,
.hero-badges .badge{
  opacity:0;
  transition:opacity var(--nido-hero-anim-speed) cubic-bezier(.22,1,.36,1),
             translate var(--nido-hero-anim-speed) cubic-bezier(.22,1,.36,1);
}
.hero-content .eyebrow{translate:-38px 0;}      /* slides in from the left */
.hero-content h1{translate:0 42px;}             /* rises up from below */
.hero-content p{translate:38px 0;}              /* slides in from the right */
.hero-actions .btn--primary{translate:-26px 22px;}  /* from the bottom-left */
.hero-actions .btn--outline{translate:26px 22px;}   /* from the bottom-right */
.hero-badges .badge:nth-child(odd){translate:-24px 0;}  /* alternate: left */
.hero-badges .badge:nth-child(even){translate:24px 0;}  /* alternate: right */
.hero-content .eyebrow.is-visible,
.hero-content h1.is-visible,
.hero-actions .btn.is-visible,
.hero-badges .badge.is-visible{
  opacity:1;
  translate:0 0;
}
/* Subtitle's resting look is a translucent .92, not fully opaque - so its
   "revealed" state targets .92 instead of the 1 the others use. */
.hero-content p.is-visible{
  opacity:.92;
  translate:0 0;
}
.hero-actions{display:flex;gap:18px;flex-wrap:nowrap;margin-bottom:34px;}
/* Hero CTAs get a distinct treatment from ordinary .btn elsewhere on the
   site: a round icon "badge" that separates from the label, tighter
   icon-hugging padding instead of the site-wide symmetric padding, and a
   more deliberate lift + shadow-bloom on hover so they read as the page's
   primary action rather than a generic pill link. */
.hero-actions .btn{
  padding:8px 30px 8px 8px;
  font-size:1.02rem;
  letter-spacing:.01em;
  gap:14px;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1),
             background .3s ease, border-color .3s ease, color .3s ease,
             opacity var(--nido-hero-anim-speed) cubic-bezier(.22,1,.36,1),
             translate var(--nido-hero-anim-speed) cubic-bezier(.22,1,.36,1);
}
.hero-actions .btn-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;border-radius:50%;
  transition:transform .4s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.hero-actions .btn-icon i{font-size:.95rem;}
.hero-actions .btn-label{white-space:nowrap;}
.hero-actions .btn:hover{transform:translateY(-4px);}
.hero-actions .btn:active{transform:translateY(-1px) scale(.98);}
.hero-actions .btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}

.hero-actions .btn--primary .btn-icon{background:rgba(255,255,255,.22);}
.hero-actions .btn--primary:hover{box-shadow:0 18px 34px rgba(242,132,107,.5);}
.hero-actions .btn--primary:hover .btn-icon{transform:rotate(-10deg) scale(1.08);background:rgba(255,255,255,.32);}

.hero-actions .btn--outline{
  color:var(--nido-hero-btn2-color, #fff);
  border-color:var(--nido-hero-btn2-border, #fff);
  background:var(--nido-hero-btn2-bg, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero-actions .btn--outline .btn-icon{background:rgba(255,255,255,.16);}
.hero-actions .btn--outline:hover{
  background:var(--nido-hero-btn2-hover-bg, var(--nido-navy));
  color:var(--nido-hero-btn2-hover-color, #fff);
  box-shadow:0 18px 34px rgba(0,0,0,.2);
}
.hero-actions .btn--outline:hover .btn-icon{transform:rotate(10deg) scale(1.08);background:rgba(255,255,255,.22);}

.hero-actions .btn--tour .btn-icon{background:rgba(255,255,255,.24);}
.hero-actions .btn--tour:hover{box-shadow:0 18px 34px rgba(111,183,201,.55);}
.hero-actions .btn--tour:hover .btn-icon{transform:scale(1.12);background:rgba(255,255,255,.34);}

.hero-badges{display:flex;gap:14px;flex-wrap:wrap;}
.hero-badges .badge{
  display:flex;align-items:center;gap:10px;font-weight:600;font-size:.88rem;
  color:var(--nido-hero-badge-color, #fff);
  background:rgba(255,255,255,.14);backdrop-filter:blur(3px);padding:8px 16px 8px 8px;border-radius:999px;
}
.hero-badges .badge .dot{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:var(--nido-hero-badge-color, #fff);font-size:.85rem;}

/* Tablet (641-960px): keep the CTAs on one horizontal row like desktop
   (not the phone's stacked column), but there's less room than desktop
   for 2-3 buttons side by side, so tighten the gap/padding/font-size
   just enough that the row stays on one line instead of the browser
   shrinking/wrapping it unevenly. */
@media (max-width:960px) and (min-width:641px){
  .hero-actions{gap:10px;}
  .hero-actions .btn{
    padding:6px 18px 6px 6px;
    font-size:.86rem;
    gap:8px;
  }
  .hero-actions .btn-icon{width:30px;height:30px;}
  .hero-actions .btn-icon i{font-size:.85em;}
}

@media (max-width:640px){
  .hero{
    padding:130px 0 70px;
    /* A fixed height (not min-height) so the section can never grow
       taller just because a slide's title wraps onto a 3rd line - locking
       it also keeps the background photo cropped consistently across
       slides instead of swinging with however much text is on each one.
       dvh is used with a vh fallback for older iOS versions. If text ever
       needs more room than this, it spills past the edge (overflow is
       visible on .hero) rather than stretching the section. */
    height:100vh;
    height:100dvh;
  }
  /* iOS Safari can render a background-image blurry when the element
     is both inside a transformed (sliding) parent AND has its own
     GPU-layer-promotion hack (transform/backface-visibility) - the
     photo gets rasterized at a lower resolution tile and stretched.
     Only the moving track needs that hack for a smooth transition;
     the individual slide photos don't, so drop it here on phones. */
  .hero-slide{
    transform:none;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
  }
  .hero-slider-track{
    -webkit-transform:translateZ(0);
  }
  /* Keep the important part of the photo (faces, subjects) in frame -
     tune with Apparence > Personnaliser > Hero > "Cadrage sur téléphone". */
  .hero-slide{background-position:var(--nido-hero-mobile-focal, center);}
  /* Use the phone-specific photo if one was uploaded for this slide/hero;
     --hero-bg-mobile is only ever set when that optional field was filled
     in, so this is a no-op (falls back to the desktop photo) otherwise. */
  .hero-slide{background-image:var(--hero-bg-mobile, var(--hero-bg-desktop));}
  .hero-content{
    max-width:100%;
    width:100%;
    position:relative;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* No entrance/slide-change animation on phone - text is visible
       immediately. Desktop/tablet keep the fade-in (see the un-prefixed
       rules above). */
    transition:none;
  }
  .hero-content.is-transitioning,
  .hero-content[data-animation].is-transitioning{
    opacity:1 !important;
    transform:none !important;
  }
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content p,
  .hero-actions .btn,
  .hero-badges .badge{
    opacity:1 !important;
    translate:0 0 !important;
    transition:none;
  }
  /* Static (non-animated) scrim behind the text block so it stays readable
     regardless of what's in the photo behind it - a single paint, not a
     performance cost like the animations below. */
  .hero-content::before{
    content:"";
    position:absolute;
    inset:-16px -6% -8px;
    z-index:-1;
    border-radius:28px;
    background:radial-gradient(ellipse at center, rgba(20,26,36,.38), rgba(20,26,36,0) 72%);
  }
  .hero-content .eyebrow{
    font-size:11px;
    padding:5px 12px;
    margin-bottom:16px;
    /* Blur behind an already-opaque pill does nothing visually but still
       costs a compositing pass on every scroll frame - drop it on phones. */
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .hero-content h1{
    font-size:clamp(1.5rem, 7vw, 1.9rem);
    line-height:1.28;
    margin-bottom:14px;
    text-shadow:0 2px 14px rgba(20,26,36,.45);
  }
  .hero-content p{
    font-size:clamp(.85rem, 3.6vw, .95rem);
    line-height:1.5;
    margin:0 auto 24px;
    max-width:92%;
    text-shadow:0 1px 8px rgba(20,26,36,.4);
  }
  /* Buttons stack full-width below 640px instead of squeezing into an
     auto-flex row - with 2-3 CTAs (primary, secondary, virtual tour) an
     auto-flex row was wrapping unevenly and crowding the labels together.
     One clear column reads better on a phone than a cramped row. */
  .hero-actions{
    margin-bottom:24px;
    gap:12px;
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;text-align:center;
    padding:7px 16px 7px 7px;
    font-size:.9rem;
    gap:10px;
  }
  .hero-actions .btn-icon{width:32px;height:32px;}
  .hero-actions .btn-icon i{font-size:.85em;}
  .hero-actions .btn--outline{backdrop-filter:none;-webkit-backdrop-filter:none;}
  .hero-badges{gap:10px;row-gap:12px;justify-content:center;width:100%;}
  .hero-badges .badge{font-size:.78rem;padding:7px 14px 7px 7px;gap:8px;}
  .hero-badges .badge .dot{width:28px;height:28px;font-size:.74rem;flex-shrink:0;}
  /* The floating letters' idle "bob" animation runs forever, on 9 elements,
     purely decorative - a steady, avoidable repaint cost on phones. Off
     here; desktop keeps it. */
  .floating-letter-inner{animation:none;}
}

/* Marquee strip */
.marquee-strip{background:var(--nido-navy);color:#fff;padding:14px 0;overflow:hidden;white-space:nowrap;}
.marquee-track{display:inline-flex;gap:60px;animation:scroll var(--nido-marquee-speed, 45s) linear infinite;font-family:var(--font-heading);font-weight:600;letter-spacing:.03em;}
.marquee-track span{opacity:.9;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* About */
.about .container{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;}
.about-media{position:relative;}

.about-sphere{
  position:absolute;inset:-7%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.7), var(--nido-mint) 42%, var(--nido-coral) 100%);
  box-shadow:
    0 20px 44px rgba(46,59,78,.2),
    inset -16px -16px 34px rgba(20,26,36,.2),
    inset 12px 12px 22px rgba(255,255,255,.4);
  animation:about-sphere-pulse 14s ease-in-out infinite;
}
@keyframes about-sphere-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.035);}
}

.about-photo-frame{
  display:block;width:100%;aspect-ratio:1/1;position:relative;z-index:1;
  border:0;padding:0;background:none;overflow:hidden;box-shadow:var(--shadow-soft);
  cursor:zoom-in;border-radius:63% 37% 54% 46% / 45% 51% 49% 55%;
  animation:about-blob-morph 14s ease-in-out infinite;transition:transform .3s ease, opacity .9s ease, translate .9s ease;
  /* Force its own GPU compositing layer. Without this, some mobile
     browsers (iOS Safari in particular) mis-clip the img while the
     border-radius keeps animating, which shows up as the photo being
     torn/split across a seam mid-animation. */
  transform:translateZ(0);-webkit-transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(circle, #fff 100%, #fff 100%);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.about-photo-frame:hover,.about-photo-frame:focus-visible{transform:scale(1.015);}
.about-photo-frame:focus-visible{outline:3px solid var(--nido-coral);outline-offset:4px;}
.about-photo-frame img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes about-blob-morph{
  0%,100%{border-radius:58% 62% 55% 65% / 60% 55% 65% 60%;}
  25%{border-radius:65% 55% 60% 60% / 55% 65% 55% 65%;}
  50%{border-radius:55% 65% 65% 55% / 65% 55% 60% 60%;}
  75%{border-radius:62% 58% 55% 65% / 58% 62% 65% 55%;}
}
.about-frame-zoom{
  position:absolute;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;
  background:var(--nido-coral);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.95rem;box-shadow:var(--shadow-soft);opacity:0;transform:scale(.8);
  transition:opacity .25s ease,transform .25s ease;
}
.about-photo-frame:hover .about-frame-zoom,.about-photo-frame:focus-visible .about-frame-zoom{opacity:1;transform:scale(1);}

.about-media .stat-card{
  position:absolute;bottom:-24px;left:-24px;background:var(--nido-yellow);
  border-radius:var(--radius-md);padding:20px 26px;box-shadow:var(--shadow-soft);z-index:2;
}
.stat-card .num{font-family:var(--font-heading);font-size:2rem;color:var(--nido-navy);font-weight:700;}
.stat-card .label{font-size:.8rem;font-weight:600;color:var(--nido-navy);}
.about-content .eyebrow{margin-bottom:14px;}

.about-lightbox{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:40px;
  background:rgba(20,24,33,.92);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.about-lightbox.is-open{opacity:1;visibility:visible;}
.about-lightbox img{max-width:100%;max-height:100%;border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.4);transform:scale(.92);transition:transform .25s ease;}
.about-lightbox.is-open img{transform:scale(1);}
.about-lightbox-close{
  position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.about-lightbox-close:hover{background:rgba(255,255,255,.25);}
.about-features{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.about-features li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:.95rem;}
.about-features .ico{
  flex:none;width:34px;height:34px;border-radius:10px;background:var(--nido-mint);
  display:flex;align-items:center;justify-content:center;color:#fff;
}

/* Programs / services */
.programs{background:var(--nido-programs-bg,var(--nido-cream));}
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:1fr;gap:34px 26px;padding-top:6px;}

/* Jigsaw / picture-puzzle-piece silhouette, applied as a responsive SVG mask
   so it scales cleanly at any tile size (a fixed clip-path can't do that).
   Applied ONLY to the photo tile — the text block below is a plain
   rectangle, so text is never clipped by the puzzle notches. */
:root{
  --puzzle-piece-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M13,8 L42,8 A8,8 0 0,0 58,8 L87,8 Q92,8 92,13 L92,45 A5,5 0 0,1 92,55 L92,87 Q92,92 87,92 L58,92 A8,8 0 0,0 42,92 L13,92 Q8,92 8,87 L8,55 A5,5 0 0,1 8,45 L8,13 Q8,8 13,8 Z' fill='white'/%3E%3C/svg%3E");
}

.program-card{
  display:flex;flex-direction:column;height:100%;position:relative;
  animation:program-card-float 4.6s ease-in-out infinite;
  transition:transform .3s ease, opacity .9s ease, translate .9s ease;
}
.programs-grid .program-card:nth-child(4n+1){animation-delay:0s;}
.programs-grid .program-card:nth-child(4n+2){animation-delay:.3s;}
.programs-grid .program-card:nth-child(4n+3){animation-delay:.6s;}
.programs-grid .program-card:nth-child(4n+4){animation-delay:.9s;}
@keyframes program-card-float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-7px) rotate(-1deg);}
}
.program-card:hover{
  animation-play-state:paused;transform:translateY(-12px) scale(1.03);
}
.program-card:active{
  animation-play-state:paused;transform:translateY(-3px) scale(.98);
  transition:transform .15s ease;
}

/* --- Photo tile: this is the puzzle piece --- */
.program-card-media-wrap{position:relative;}

/* Colored halo a few px behind the photo tile — keeps the piece visible
   even when the page background is pale/white too, and gives the tile a
   friendly "sticker" trim. */
.program-card-media-halo{
  content:"";position:absolute;inset:-8px;z-index:0;
  background-color:var(--card-accent, var(--nido-coral));
  -webkit-mask-image:var(--puzzle-piece-svg);mask-image:var(--puzzle-piece-svg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  filter:drop-shadow(0 14px 22px rgba(46,59,78,.22));
  transition:filter .3s ease;
}
.program-card:hover .program-card-media-halo{filter:drop-shadow(0 22px 34px rgba(46,59,78,.3));}

.program-card-media{
  position:relative;z-index:1;aspect-ratio:4/3;overflow:hidden;background:var(--nido-coral);
  -webkit-mask-image:var(--puzzle-piece-svg);mask-image:var(--puzzle-piece-svg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.program-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.program-card:hover .program-card-media img{transform:scale(1.08);}
.program-card-media-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.1rem;color:rgba(255,255,255,.85);
}
.program-card-age{
  position:absolute;top:22px;left:22px;font-size:.78rem;font-weight:700;
  padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--nido-navy);
}

/* --- Text block: inset by 4% on each side (92% width, centered), so its
   edges sit close to — but slightly inside — the photo's visible straight
   edges above (see --puzzle-piece-svg, whose straight sides sit at x=8/x=92
   in its 0–100 viewBox). Never masked, so text always shows in full — no
   truncation. It's a flex child that fills the row (grid-auto-rows:1fr
   makes every row, and so every card, the same height), and the
   "En savoir plus" link always sits flush at the bottom. */
.program-card-body{
  position:relative;flex:1 1 auto;display:flex;flex-direction:column;
  width:92%;margin:6px auto 0;padding:16px 14px 16px;border-radius:14px;
  background:var(--card-tint, #fff);
  box-shadow:0 10px 24px rgba(46,59,78,.08);
  transition:box-shadow .3s ease;
}
.program-card:hover .program-card-body{box-shadow:0 16px 32px rgba(46,59,78,.14);}
.program-card h3{font-family:var(--font-heading);font-size:1.05rem;line-height:1.25;margin-bottom:5px;}
.program-card p{
  font-size:.86rem;line-height:1.42;opacity:.8;margin:0;
}

.program-card-more{
  display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;
  font-family:var(--font-heading);font-weight:700;font-size:.85rem;color:var(--nido-coral);
  opacity:0;transform:translateX(-6px);transition:opacity .25s ease, transform .25s ease;
}
.program-card:hover .program-card-more{opacity:1;transform:translateX(0);}
.program-card-more i{font-size:.8rem;transition:transform .25s ease;}
.program-card:hover .program-card-more i{transform:translateX(3px);}

/* Color variants — each card picks its own accent from the Customizer.
   --card-accent drives the media halo; --card-tint drives the text block's
   own background, so each card looks distinctly colored top to bottom. */
.program-card--coral{--card-accent:var(--nido-coral);--card-tint:color-mix(in srgb, var(--nido-coral) 14%, #fff);}
.program-card--coral .program-card-media{background-color:var(--nido-coral);}
.program-card--coral .program-card-more{color:var(--nido-coral);}

.program-card--mint{--card-accent:var(--nido-mint);--card-tint:color-mix(in srgb, var(--nido-mint) 14%, #fff);}
.program-card--mint .program-card-media{background-color:var(--nido-mint);}
.program-card--mint .program-card-more{color:color-mix(in srgb, var(--nido-mint) 65%, var(--nido-navy));}

.program-card--yellow{--card-accent:var(--nido-yellow);--card-tint:color-mix(in srgb, var(--nido-yellow) 14%, #fff);}
.program-card--yellow .program-card-media{background-color:var(--nido-yellow);}
.program-card--yellow .program-card-more{color:color-mix(in srgb, var(--nido-yellow) 65%, var(--nido-navy));}

.program-card--blue{--card-accent:var(--nido-blue);--card-tint:color-mix(in srgb, var(--nido-blue) 14%, #fff);}
.program-card--blue .program-card-media{background-color:var(--nido-blue);}
.program-card--blue .program-card-more{color:color-mix(in srgb, var(--nido-blue) 65%, var(--nido-navy));}

@media (max-width:600px){
  .program-card{animation:none;}
  .program-card:hover{transform:translateY(-4px) scale(1.02);}
  .program-card-body{padding:14px 12px 14px;}
}

/* Programme detail page ("Fiche Programme" template) */
.back-link{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;
  color:var(--nido-navy);opacity:.75;transition:opacity .2s ease, gap .2s ease;
}
.back-link:hover{opacity:1;gap:14px;}

/* Breadcrumb - replaces the old lone "back" link with a proper trail,
   the kind a template-builder landing page would ship by default. */
.programme-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.85rem;font-weight:600;
  color:var(--nido-navy);opacity:.7;margin-bottom:22px;
}
.programme-breadcrumb a{opacity:.85;transition:opacity .2s ease;}
.programme-breadcrumb a:hover{opacity:1;text-decoration:underline;}
.programme-breadcrumb i{font-size:.6rem;opacity:.55;}
.programme-breadcrumb span[aria-current]{color:var(--card-text, var(--nido-coral));opacity:1;}

/* Slim scroll-progress bar, fixed just under the header - a small but
   very "pro builder" touch that shows how far through the page you are. */
.programme-progress{
  position:fixed;top:90px;left:0;right:0;height:3px;z-index:99;background:transparent;pointer-events:none;
}
.programme-progress span{
  display:block;height:100%;width:0%;background:var(--nido-coral);
  transition:width .1s linear;
}

.programme-hero-section{
  padding-bottom:50px;position:relative;overflow:hidden;
  background:linear-gradient(180deg, var(--card-tint, var(--nido-cream)) 0%, var(--nido-cream) 78%);
}
/* Soft oversized color blob tucked behind the heading, echoing the
   homepage's about-sphere/blob treatment so the page doesn't read as a
   plain white document dropped in after a colorful homepage. */
.programme-hero-blob{
  position:absolute;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.65), var(--card-accent, var(--nido-coral)) 70%);
  opacity:.35;pointer-events:none;z-index:0;filter:blur(2px);
}
.programme-hero-section .container{position:relative;z-index:1;}
.programme-hero-grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:44px;align-items:center;
  margin-top:6px;
}
.programme-hero-head{max-width:560px;}
.programme-eyebrow{color:var(--card-text, var(--nido-coral));background:var(--card-tint, rgba(242,132,107,0.12));}
.programme-hero-head h1{font-size:clamp(2rem,4vw,2.9rem);}
.programme-hero-intro{margin-top:16px;font-size:1.08rem;color:var(--nido-navy);opacity:.8;}

/* Quick-facts chips (age / journée type range / photo count) - real,
   derived data presented like a template builder's little stat row. */
.programme-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.programme-fact{
  display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;
  background:#fff;color:var(--card-text, var(--nido-navy));padding:7px 18px 7px 14px;border-radius:999px;
  box-shadow:var(--shadow-soft);
}
.programme-fact i{color:var(--card-accent, var(--nido-coral));}

.programme-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.programme-hero-actions .btn--outline{background:#fff;}
.programme-hero-actions .btn--outline:hover{background:var(--nido-navy);color:#fff;}
.programme-hero-media{position:relative;}
.programme-featured-media-wrap{position:relative;}
.programme-featured-media-wrap::before{
  content:'';position:absolute;inset:-10px;z-index:0;border-radius:calc(var(--radius-lg) + 8px);
  background:var(--card-accent, var(--nido-coral));opacity:.28;
}
.programme-featured-media{
  position:relative;z-index:1;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);
  aspect-ratio:4/3.4;
}
.programme-featured-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* Floating stat card + badge over the hero photo, same trick as the
   homepage about-section's .stat-card - it's what keeps a hero photo
   from feeling like a flat, static image on a professionally built page. */
.programme-featured-stat{
  position:absolute;left:-18px;bottom:-18px;z-index:2;background:#fff;
  border-radius:var(--radius-md);padding:14px 20px;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;gap:2px;line-height:1.1;
}
.programme-featured-stat .num{font-family:var(--font-heading);font-size:1.7rem;font-weight:700;color:var(--nido-navy);}
.programme-featured-stat .label{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--nido-navy);opacity:.7;text-transform:uppercase;letter-spacing:.03em;}
.programme-featured-stat .label i{color:var(--card-accent, var(--nido-coral));}
.programme-featured-badge{
  position:absolute;right:-14px;top:22px;z-index:2;max-width:210px;
  display:flex;align-items:center;gap:10px;background:rgba(46,59,78,.88);color:#fff;
  padding:10px 16px 10px 10px;border-radius:999px;box-shadow:0 14px 28px rgba(46,59,78,.28);
  font-size:.78rem;font-weight:700;line-height:1.3;backdrop-filter:blur(6px);
}
.programme-featured-badge .dot{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--card-accent, var(--nido-coral));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.82rem;
}

/* Sticky in-page sub-navigation - lives in its own scroll-wrap so it can
   stay pinned under the header for the whole content-heavy middle of the
   page, the way a professional landing-page builder's anchor nav would,
   instead of a one-off row that scrolls away with the hero. */
.programme-scroll-wrap{position:relative;}
.programme-subnav-outer{position:sticky;top:90px;z-index:20;}
.programme-subnav{
  background:rgba(255,248,239,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(46,59,78,.08);box-shadow:0 8px 22px rgba(46,59,78,.05);
}
.programme-subnav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 24px;flex-wrap:wrap;
}
.programme-subnav-links{display:flex;flex-wrap:wrap;gap:8px;}
.programme-subnav-links a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  font-weight:700;font-size:.85rem;color:var(--nido-navy);opacity:.7;
  transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.programme-subnav-links a i{color:var(--card-accent, var(--nido-coral));font-size:.8rem;}
.programme-subnav-links a:hover{opacity:1;background:rgba(255,255,255,.6);}
.programme-subnav-links a.is-active{opacity:1;background:#fff;box-shadow:var(--shadow-soft);color:var(--card-text, var(--nido-navy));}
.programme-subnav-cta{padding:10px 22px;font-size:.85rem;flex:0 0 auto;}

.programme-content h2{margin-top:1.4em;}
.programme-section-head{text-align:left;max-width:100%;margin:0 0 34px;}
.programme-section-head h2{position:relative;padding-bottom:18px;display:inline-block;}
.programme-section-head h2::after{
  content:'';position:absolute;left:0;bottom:0;width:64px;height:6px;border-radius:999px;
  background:var(--card-accent, var(--nido-coral));
}
/* "Découvrez nos autres programmes" reuses the homepage .programs-grid /
   .program-card system as-is, just without the float animation - it's a
   closing section, not the main event, so it should feel calmer. */
.programme-related .program-card{animation:none;}

@media (max-width:960px){
  .programme-hero-grid{grid-template-columns:1fr;gap:34px;}
  .programme-hero-media{order:-1;margin-top:6px;}
  .programme-featured-media{aspect-ratio:16/10;}
  .programme-featured-badge{max-width:170px;font-size:.72rem;}
  .programme-subnav-cta{display:none;}
}
@media (max-width:640px){
  .programme-featured-stat{left:10px;bottom:-14px;padding:10px 14px;}
  .programme-featured-stat .num{font-size:1.3rem;}
  /* Stays absolute (not static) so it never changes the wrap's height -
     .programme-featured-stat's own "bottom" offset is measured against
     that same wrap, and letting this join the normal flow here used to
     push the stat card down to the wrong spot. */
  .programme-featured-badge{top:14px;right:10px;max-width:150px;font-size:.68rem;padding:8px 12px 8px 8px;}
  .programme-featured-badge .dot{width:26px;height:26px;font-size:.72rem;}
  .programme-subnav-outer{top:66px;}
  .programme-progress{top:66px;}
  .programme-subnav-links{gap:6px;}
  .programme-subnav-links a{padding:8px 12px;font-size:.78rem;}
}

/* Scroll-reveal animation, used across programme pages */
.reveal-up{opacity:0;translate:0 34px;transition:opacity .9s ease, translate .9s ease;}
.reveal-up.is-visible{opacity:1;translate:0 0;}

/* "Animations au défilement" toggle (Réglages avancés): when turned
   off, every .reveal-up-based fade/slide-in effect is neutralized so
   content is simply visible immediately, with no motion at all. */
body.lenido-no-animations .reveal-up,
body.lenido-no-animations .section-head p.reveal-up{
  opacity:1 !important;translate:0 0 !important;transition:none !important;
}
/* .btn already combines its own hover transitions (transform, box-shadow)
   with the opacity/translate ones reveal-up needs - but since .btn and
   .reveal-up share the same specificity, whichever is later in this file
   would otherwise wipe out the other's transition list entirely instead of
   merging them. This higher-specificity rule keeps both intact together. */
.btn.reveal-up{transition:transform .25s ease, box-shadow .25s ease, opacity .9s ease, translate .9s ease;}
/* "Ce que vivra votre enfant" highlight cards */
.programme-highlights-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;
}
.programme-highlight-card{
  position:relative;background:#fff;border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;gap:14px;transition:transform .3s ease, box-shadow .3s ease;
}
.programme-highlight-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(46,59,78,.12);}
.programme-highlight-card .icon-wrap{
  width:52px;height:52px;border-radius:14px;background:var(--card-tint, var(--nido-cream));
  display:flex;align-items:center;justify-content:center;color:var(--card-text, var(--nido-coral));font-size:1.25rem;
}
.programme-highlight-card{border-top:3px solid var(--card-accent, transparent);}
.programme-highlight-card p{margin:0;line-height:1.6;color:var(--nido-navy);opacity:.85;}
/* Numbered badge, top-right corner - the small detail that makes a grid
   of cards read as a deliberately designed sequence, not a random list. */
.programme-highlight-index{
  position:absolute;top:18px;right:22px;font-family:var(--font-heading);font-weight:700;
  font-size:1rem;color:var(--card-accent, var(--nido-coral));opacity:.3;letter-spacing:.02em;
}

/* Photo gallery - bento layout: first photo reads as the "hero" tile
   (2x2) with the rest filling in around it, instead of a flat uniform
   grid of same-size squares. */
.programme-gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;gap:18px;
}
.programme-gallery-item{
  position:relative;border:0;padding:0;cursor:zoom-in;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-soft);background:var(--nido-cream);
  transition:transform .35s ease, box-shadow .35s ease;
  grid-column:span 2;grid-row:span 2;
}
.programme-gallery-item:first-child{grid-column:span 4;grid-row:span 3;}
.programme-gallery-item:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 18px 34px rgba(46,59,78,.16);}
.programme-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.programme-gallery-item:hover img{transform:scale(1.06);}
.programme-gallery-caption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 14px 12px;text-align:left;
  background:linear-gradient(to top, rgba(46,59,78,.75), transparent);color:#fff;
  font-size:.82rem;font-weight:600;opacity:0;transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.programme-gallery-item:hover .programme-gallery-caption{opacity:1;transform:translateY(0);}
/* Small "zoom" affordance in the corner - signals the grid is clickable
   before the visitor even hovers long enough to notice the cursor change. */
.programme-gallery-zoom{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--nido-navy);display:flex;align-items:center;justify-content:center;
  font-size:.8rem;opacity:0;transform:scale(.8);transition:opacity .25s ease, transform .25s ease;
}
.programme-gallery-item:hover .programme-gallery-zoom{opacity:1;transform:scale(1);}

@media (max-width:760px){
  .programme-gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;}
  .programme-gallery-item{grid-column:span 1;grid-row:span 2;}
  .programme-gallery-item:first-child{grid-column:span 2;grid-row:span 3;}
}

/* Lightbox */
.programme-lightbox{
  position:fixed;inset:0;background:rgba(20,24,32,.92);z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:40px;opacity:0;visibility:hidden;transition:opacity .3s ease;
}
.programme-lightbox.is-open{opacity:1;visibility:visible;}
.programme-lightbox img{
  max-width:min(900px,90vw);max-height:78vh;border-radius:var(--radius-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.5);transform:scale(.96);transition:transform .3s ease;
}
.programme-lightbox.is-open img{transform:scale(1);}
.programme-lightbox-caption{color:#fff;font-size:.95rem;opacity:.85;max-width:700px;text-align:center;}
.programme-lightbox-close{
  position:absolute;top:26px;right:26px;width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.programme-lightbox-close:hover{background:rgba(255,255,255,.25);}
.programme-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease, transform .2s ease;
}
.programme-lightbox-nav:hover{background:rgba(255,255,255,.25);transform:translateY(-50%) scale(1.06);}
.programme-lightbox-prev{left:22px;}
.programme-lightbox-next{right:22px;}
.programme-lightbox-counter{color:#fff;opacity:.65;font-size:.82rem;font-weight:700;letter-spacing:.03em;}

/* Daily timeline - alternating card layout either side of a central
   spine on wide screens (the kind of "journey" timeline a professional
   landing-page builder ships as a template block), collapsing to a
   single-column list with a left spine on narrower screens. */
.programme-timeline{display:flex;flex-direction:column;position:relative;}
.programme-timeline::before{
  content:'';position:absolute;left:50%;top:6px;bottom:6px;width:2px;translate:-50% 0;
  background:repeating-linear-gradient(to bottom, var(--card-accent, var(--nido-mint)) 0 6px, transparent 6px 12px);
}
.programme-timeline-item{
  display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;position:relative;padding:12px 0;
}
.programme-timeline-item:nth-child(odd) .programme-timeline-card{grid-column:1;justify-self:end;text-align:right;}
.programme-timeline-item:nth-child(even) .programme-timeline-card{grid-column:3;justify-self:start;text-align:left;}
.programme-timeline-card{
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);
  padding:14px 20px;max-width:320px;transition:transform .25s ease, box-shadow .25s ease;
}
.programme-timeline-item:hover .programme-timeline-card{transform:translateY(-3px);box-shadow:0 16px 28px rgba(46,59,78,.12);}
.programme-timeline-time{
  display:block;font-family:var(--font-heading);font-weight:700;color:var(--card-text, var(--nido-navy));font-size:.88rem;
}
.programme-timeline-text{display:block;color:var(--nido-navy);opacity:.85;line-height:1.45;margin-top:2px;}
.programme-timeline-dot{
  grid-column:2;justify-self:center;z-index:1;width:34px;height:34px;border-radius:50%;
  background:var(--card-accent, var(--nido-coral));color:#fff;font-family:var(--font-heading);font-weight:700;
  font-size:.85rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--nido-cream);
}

/* Testimonial spotlight - a real, existing testimonial pulled in as a
   trust moment partway down the page, styled as a large pull-quote. */
.programme-spotlight{
  position:relative;background:var(--card-tint, var(--nido-cream));border-radius:var(--radius-lg);
  padding:44px 40px;text-align:center;
}
.programme-spotlight .quote-mark{
  font-family:var(--font-heading);font-size:3.4rem;line-height:1;color:var(--card-accent, var(--nido-coral));
  opacity:.5;margin-bottom:6px;
}
.programme-spotlight p{font-size:1.2rem;color:var(--nido-navy);line-height:1.6;margin:0 0 24px;}
.programme-spotlight-author{display:flex;align-items:center;justify-content:center;gap:12px;}
.programme-spotlight-author img{width:48px;height:48px;border-radius:50%;object-fit:cover;}
.programme-spotlight-initial{
  width:48px;height:48px;border-radius:50%;background:var(--card-accent, var(--nido-mint));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-heading);
}
.programme-spotlight-author .name{font-weight:700;color:var(--nido-navy);text-align:left;}
.programme-spotlight-author .role{font-size:.82rem;color:var(--nido-navy);opacity:.65;text-align:left;}

/* Extra info blocks - icon-card grid, matching the highlight cards'
   visual language so the page reads as one consistent design system
   rather than switching styles section to section. */
.programme-info-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
.programme-info-block{
  background:#fff;border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-soft);
  transition:transform .3s ease, box-shadow .3s ease;
}
.programme-info-block:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(46,59,78,.1);}
.programme-info-block .icon-wrap{
  width:48px;height:48px;border-radius:14px;background:var(--card-tint, var(--nido-cream));
  display:flex;align-items:center;justify-content:center;color:var(--card-text, var(--nido-coral));
  font-size:1.15rem;margin-bottom:16px;
}
.programme-info-block h3{margin:0 0 10px;color:var(--nido-navy);}
.programme-info-block p{margin:0;line-height:1.7;color:var(--nido-navy);opacity:.85;white-space:pre-line;}

@media (max-width:760px){
  .programme-timeline::before{left:20px;}
  .programme-timeline-item{grid-template-columns:40px 1fr;}
  .programme-timeline-dot{grid-column:1;}
  .programme-timeline-item:nth-child(odd) .programme-timeline-card,
  .programme-timeline-item:nth-child(even) .programme-timeline-card{
    grid-column:2;justify-self:start;text-align:left;max-width:none;
  }
}

@media (max-width:640px){
  .programme-lightbox{padding:20px;}
  .programme-lightbox-close{top:14px;right:14px;}
  .programme-lightbox-prev{left:8px;}
  .programme-lightbox-next{right:8px;}
  .programme-lightbox-nav{width:40px;height:40px;}
  .programme-hero-blob{width:260px;height:260px;top:-90px;right:-90px;}
  .programme-spotlight{padding:32px 22px;}
  .programme-spotlight p{font-size:1.05rem;}
}

.section--galerie{padding-top:60px;padding-bottom:60px;overflow:hidden;}
.galerie-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center;}
.galerie-text{min-width:0;}
.galerie-text .section-head{text-align:left;max-width:none;margin:0 0 22px;}
.galerie-text .eyebrow{display:inline-flex;align-items:center;gap:8px;transform:rotate(-2deg);}
.galerie-text .section-head h2{position:relative;padding-bottom:20px;}
.galerie-text .section-head h2::after{
  content:'';position:absolute;left:0;bottom:0;width:72px;height:7px;border-radius:999px;
  background:linear-gradient(90deg,var(--nido-coral),var(--nido-yellow),var(--nido-mint));
}
.galerie-text .section-head p{font-size:1.12rem;color:var(--nido-navy);opacity:.75;}
.galerie-social-buttons{display:flex;flex-wrap:wrap;gap:14px;}
.btn--social{min-width:230px;justify-content:center;color:#fff;}
.btn--instagram{background:linear-gradient(135deg,var(--nido-coral),var(--nido-yellow));box-shadow:0 10px 22px rgba(46,59,78,.25);}
.btn--instagram:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(46,59,78,.32);color:#fff;}
.btn--facebook{background:linear-gradient(135deg,var(--nido-blue),var(--nido-mint));box-shadow:0 10px 22px rgba(46,59,78,.25);}
.btn--facebook:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(46,59,78,.32);color:#fff;}

/* Gallery — 7-photo hexagon "flower" cluster: one center hex surrounded
   by 6 neighbors, flat-top orientation, exactly like a honeycomb cell. */
.hex-cluster{
  --hex-w:180px;
  --hex-h:calc(var(--hex-w) * .866);
  position:relative;
  min-width:0;
  width:calc(var(--hex-w) * 2.5);
  max-width:100%;
  height:calc(var(--hex-h) * 3);
  margin:0 auto;
}
.hex-item{
  position:absolute;box-sizing:border-box;
  width:var(--hex-w);height:var(--hex-h);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  padding:6px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .35s ease, opacity .9s ease, translate .9s ease;
  filter:drop-shadow(0 4px 10px rgba(46,59,78,.18));
}
.hex-item:hover{transform:scale(1.08);filter:drop-shadow(0 14px 22px rgba(46,59,78,.28));z-index:2;}
/* Frame color behind each honeycomb photo, one variable per slot so
   every hexagon can have its own color instead of all sharing one.
   Editable from Apparence > Personnaliser > En-tête section Galerie >
   Couleurs des hexagones (see --nido-hex-color-1..7, output in
   inc/customizer.php). The var() fallbacks below (used only until that
   runs) intentionally avoid navy/cream - a near-black or near-white
   frame reads as a design mistake behind a photo - and repeat no color
   on two hexagons that actually touch each other in the layout. */
/* slot 1: top */        .hex-item:nth-child(1){left:calc(var(--hex-w) * .75);top:0;background:var(--nido-hex-color-1, var(--nido-mint));}
/* slot 2: upper-left */ .hex-item:nth-child(2){left:0;top:calc(var(--hex-h) * .5);background:var(--nido-hex-color-2, var(--nido-blue));}
/* slot 3: upper-right */.hex-item:nth-child(3){left:calc(var(--hex-w) * 1.5);top:calc(var(--hex-h) * .5);background:var(--nido-hex-color-3, var(--nido-yellow));}
/* slot 4: center */     .hex-item:nth-child(4){left:calc(var(--hex-w) * .75);top:var(--hex-h);background:var(--nido-hex-color-4, var(--nido-coral));}
/* slot 5: lower-left */ .hex-item:nth-child(5){left:0;top:calc(var(--hex-h) * 1.5);background:var(--nido-hex-color-5, var(--nido-yellow));}
/* slot 6: lower-right */.hex-item:nth-child(6){left:calc(var(--hex-w) * 1.5);top:calc(var(--hex-h) * 1.5);background:var(--nido-hex-color-6, var(--nido-blue));}
/* slot 7: bottom */     .hex-item:nth-child(7){left:calc(var(--hex-w) * .75);top:calc(var(--hex-h) * 2);background:var(--nido-hex-color-7, var(--nido-mint));}
.hex-inner{
  display:block;width:100%;height:100%;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  position:relative;overflow:hidden;
  border:0;padding:0;background:none;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.hex-inner img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.hex-item:hover .hex-inner img{transform:scale(1.12);}
.hex-inner::after{
  content:"\f06e";font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.5rem;background:rgba(46,59,78,0);transition:background .3s ease;opacity:0;
}
.hex-item:hover .hex-inner::after{background:rgba(46,59,78,.45);opacity:1;}

@media (max-width:1100px){
  .hex-cluster{--hex-w:150px;}
}
@media (max-width:960px){
  .galerie-layout{grid-template-columns:1fr;gap:36px;}
  .galerie-text .section-head{text-align:center;margin:0 auto 22px;max-width:560px;}
  .galerie-social-buttons{justify-content:center;}
  .hex-cluster{--hex-w:160px;}
}
@media (max-width:640px){
  .hex-cluster{--hex-w:100px;}
}

/* Gallery: alternate "Grille classique" layout (up to 12 photos, no honeycomb shape) */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  max-width:640px;
  margin:0 auto;
}
.gallery-grid-item{aspect-ratio:1/1;}
.gallery-grid-item .hex-inner{clip-path:none;border-radius:var(--radius-lg, 16px);}
@media (max-width:960px){
  .gallery-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:640px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr);gap:10px;}
}


/* FAQ (accordion via native <details>/<summary>, no JS needed) */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{background:#fff;border:1px solid rgba(46,59,78,.1);border-radius:var(--radius-lg, 16px);padding:4px 22px;box-shadow:var(--shadow-soft);}
.faq-question{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;cursor:pointer;font-family:var(--font-heading);font-weight:700;color:var(--nido-navy);}
.faq-question::-webkit-details-marker{display:none;}
.faq-chevron{transition:transform .25s ease;color:var(--nido-coral);flex-shrink:0;}
.faq-item[open] .faq-chevron{transform:rotate(180deg);}
.faq-answer{padding:0 0 18px;color:#555;line-height:1.6;}
.faq-answer p{margin:0 0 .6em;}
.faq-answer p:last-child{margin-bottom:0;}

/* Testimonials */
.testimonials{background:var(--nido-navy);color:#fff;}
.testimonials .section-head h2{color:#fff;}
.testimonials .section-head p{color:rgba(255,255,255,.75);}
.testi-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;}
.testi-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:30px;}
.testi-card .quote-mark{font-family:var(--font-heading);font-size:2.4rem;color:var(--nido-yellow);line-height:1;}
.testi-card p{font-size:.98rem;opacity:.92;margin:12px 0 22px;}
.testi-author{display:flex;align-items:center;gap:12px;}
.testi-author img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.testi-author .name{font-weight:700;font-family:var(--font-heading);font-size:.95rem;}
.testi-author .role{font-size:.8rem;opacity:.7;}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--nido-coral),var(--nido-yellow));
  border-radius:var(--radius-lg);
  margin:0 auto;max-width:1180px;
  padding:60px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  color:#fff;
}
.cta-band h2{color:#fff;font-size:1.9rem;max-width:520px;}
.cta-band p{opacity:.95;max-width:520px;}
.cta-band p.reveal-up{opacity:0;}
.cta-band p.reveal-up.is-visible{opacity:.95;}

/* Contact */
.contact .container{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
.contact-info-card{
  background:var(--nido-contact-card-bg, #fff);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-soft);
}
.contact-info-card ul{display:flex;flex-direction:column;gap:22px;}
.contact-info-card li{display:flex;gap:16px;align-items:flex-start;}
.contact-info-card .ico{
  flex:none;width:44px;height:44px;border-radius:12px;background:var(--nido-mint);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.contact-info-card .label{font-weight:700;font-family:var(--font-heading);}
.contact-info-card .value{opacity:.8;font-size:.95rem;}
.contact-map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);min-height:var(--nido-map-height, 340px);}
.contact-map iframe{width:100%;height:100%;min-height:var(--nido-map-height, 340px);border:0;display:block;}
.contact-map--grayscale iframe{filter:grayscale(1);}

.contact-form-card{background:var(--nido-contact-card-bg, #fff);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;justify-content:flex-end;}
.contact-form-card input,.contact-form-card textarea,.contact-form-card select{
  width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #e6ddcd;
  font-family:var(--font-body);margin-bottom:6px;font-size:.95rem;
  background:var(--nido-contact-input-bg, var(--nido-cream));
  appearance:auto;
}
.contact-form-card textarea{min-height:120px;resize:vertical;}
.contact-form-card button{width:100%;justify-content:center;margin-top:10px;}
.contact-form-card .form-field{margin-bottom:10px;}
.contact-form-card .form-field label{
  display:block;font-size:.8rem;font-weight:600;color:var(--nido-navy);margin-bottom:5px;
}
.contact-form-card .form-field label .required-star{color:var(--nido-coral);margin-left:2px;}

/* Optional background photo behind the form (Apparence > Personnaliser >
   En-tête section Contact > Photo de fond du formulaire) - the overlay
   color/intensity are set from the Customizer via --nido-contact-overlay. */
.contact-form-card.has-bg-image{
  position:relative;background-size:cover;background-position:center;color:#fff;
}
.contact-form-card.has-bg-image::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius-lg);z-index:0;
  background:var(--nido-contact-overlay, rgba(46,59,78,.78));
}
.contact-form-card.has-bg-image > *{position:relative;z-index:1;}
.contact-form-card.has-bg-image h3{color:#fff;}
.contact-form-card.has-bg-image .form-field label{color:#fff;}
.contact-form-card.has-bg-image input,
.contact-form-card.has-bg-image textarea,
.contact-form-card.has-bg-image select{background:var(--nido-contact-input-bg, rgba(255,255,255,.94));border-color:transparent;}
.contact-form-card.has-bg-image .btn--outline{background:#fff;color:var(--nido-navy);}

/* Honeypot anti-spam field - kept in the accessibility tree as
   non-existent (aria-hidden + tabindex -1) and visually off-screen
   rather than display:none, since some spam bots specifically skip
   display:none fields when deciding what to fill in. */
.nido-hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.nido-recaptcha{margin:14px 0 4px;}
/* Collapsed by default; revealed via JS the first time the visitor
   clicks "Send" (see assets/js/main.js), so the box doesn't sit on
   the form up front. */
.nido-recaptcha--hidden{display:none;}
.nido-recaptcha-label{
  display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--nido-recaptcha-label-text, var(--nido-navy));margin-bottom:8px;
}
.nido-recaptcha-label i{color:var(--nido-mint-dark);}
.has-bg-image .nido-recaptcha-label{color:var(--nido-recaptcha-label-text, #fff);}
/* Google's checkbox itself renders inside a cross-origin iframe (can't be
   restyled), so instead we give it a soft card "frame" matching the rest
   of the form's rounded, cream-bordered look, so it reads as a native
   step in the form rather than a bolted-on third-party widget. */
.nido-recaptcha-frame{
  display:flex;justify-content:center;background:var(--nido-recaptcha-frame-bg, var(--nido-cream));border:1.5px solid #e6ddcd;
  border-radius:14px;padding:14px;overflow:hidden;
}
.nido-recaptcha-widget{min-width:256px;min-height:78px;}
.has-bg-image .nido-recaptcha-frame{background:var(--nido-recaptcha-frame-bg, rgba(255,255,255,.94));border-color:transparent;}
/* The widget itself has a fixed ~304px width; scale it down to fit
   narrower phone screens without clipping or forcing horizontal scroll. */
@media (max-width:400px){
  .nido-recaptcha-frame .nido-recaptcha-widget{transform:scale(.87);transform-origin:center;margin:-6px 0;}
  .nido-recaptcha-frame{padding:10px 4px;}
}
@media (max-width:340px){
  .nido-recaptcha-frame .nido-recaptcha-widget{transform:scale(.77);margin:-10px 0;}
}

.form-notice{
  display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:14px;
  font-size:.88rem;font-weight:600;margin-bottom:20px;line-height:1.45;
}
.form-notice--error{background:#fdecea;color:#a33325;}
.form-notice--error i{margin-top:2px;}
.has-bg-image .form-notice--error{background:rgba(255,255,255,.94);}

/* Date & time-slot fields: same size as the other fields, with a subtle icon + polish */
.field-icon-wrap{position:relative;}
.field-icon-wrap .field-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%) scale(1);
  font-size:14px;color:var(--nido-mint-dark);
  pointer-events:none;
  transition:color .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index:2;
}
.field-icon-wrap input[type="date"],
.field-icon-wrap select{
  padding:14px 16px 14px 44px !important;
  font-size:.95rem !important;
  font-weight:500;
  color:var(--nido-navy);
  cursor:pointer;
  transition:border-color .25s ease, box-shadow .3s ease, transform .2s ease;
}
.field-icon-wrap:hover input[type="date"],
.field-icon-wrap:hover select{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(46,58,70,.10);
  border-color:var(--nido-mint);
}
.field-icon-wrap:hover .field-icon{
  transform:translateY(-50%) scale(1.15) rotate(-6deg);
}
.field-icon-wrap input[type="date"]:focus,
.field-icon-wrap select:focus{
  outline:none;
  border-color:var(--nido-coral);
  animation:lenido-field-glow 1.8s ease-in-out infinite;
}
.field-icon-wrap:focus-within .field-icon{
  color:var(--nido-coral);
  transform:translateY(-50%) scale(1.2);
}
@keyframes lenido-field-glow{
  0%, 100% { box-shadow:0 0 0 3px rgba(255,122,110,.14); }
  50%      { box-shadow:0 0 0 6px rgba(255,122,110,.22); }
}

/* Tint the native date-picker icon (Chrome/Edge/Safari) */
.field-icon-wrap--date input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(53%) sepia(64%) saturate(414%) hue-rotate(115deg) brightness(92%);
  opacity:.85;
  cursor:pointer;
  transition:opacity .25s ease, transform .25s ease;
}
.field-icon-wrap--date input[type="date"]:hover::-webkit-calendar-picker-indicator{
  opacity:1;
  transform:scale(1.15);
}

/* Custom dropdown arrow for the time-slot select, same size as the field */
.field-icon-wrap--time select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:38px !important;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23FF7A6E' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  transition:background-position .2s ease, border-color .25s ease, box-shadow .3s ease, transform .2s ease;
}
.field-icon-wrap--time:hover select{
  background-position:right 14px center;
}
.field-icon-wrap--time select:invalid,
.field-icon-wrap--time select option[value=""]{
  color:#9a9488;
}

/* Footer */
.site-footer{background:var(--nido-navy);color:rgba(255,255,255,.85);padding:70px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1fr;gap:44px;margin-bottom:50px;align-items:start;}
.footer-brand .site-branding .name{color:#fff;}
.footer-brand p{opacity:.75;font-size:.92rem;max-width:300px;margin-top:14px;line-height:1.6;}
.footer-col{min-width:0;}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:18px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.92rem;
  line-height:1.5;
  margin-bottom:0;
}
.footer-col li i{margin-top:3px;opacity:.7;flex-shrink:0;width:14px;text-align:center;}
.footer-col li a, .footer-col li span{word-break:break-word;}
.footer-col a:hover{color:var(--nido-yellow);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.85rem;opacity:.7;}
.footer-bottom a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:2px;transition:text-decoration-color .2s ease;}
.footer-bottom a:hover{text-decoration-color:currentColor;}
.footer-social-icons{display:flex;gap:10px;flex-wrap:wrap;}
.footer-social-icons a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background .2s ease, color .2s ease;
}
.footer-social-icons a:hover{background:var(--nido-coral);color:#fff;}

/* Responsive */
@media (max-width:960px){
  .main-nav{display:none;}
  .menu-toggle{display:block;}
  .about .container, .contact .container{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cta-band{flex-direction:column;text-align:center;padding:40px 28px;}
}
@media (max-width:640px){
  .site-header .container{padding-top:10px;padding-bottom:10px;}
  .site-branding img,
  .site-branding span[style*="width:52px"]{height:40px!important;width:40px!important;}
  .site-branding .name{font-size:1.05rem;}
  .site-branding .baseline{display:none;}
  #main-content{padding-top:66px;}
  #hero, #about, #programmes, #galerie, #temoignages, #contact, #contact-form{scroll-margin-top:74px;}
  #programme-highlights, #programme-gallery, #programme-schedule, #programme-infos{scroll-margin-top:126px;}
}

@media (max-width:600px){
  .about-features{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .section{padding:60px 0;}
  /* The "10+ Années d'expérience" badge kept its full desktop size here
     (32px number, 20px/26px padding) while the photo next to it shrank
     to a single narrow column, so it ended up covering a big chunk of
     the photo. Scale it down and pull it in from the edge instead. */
  .about-media .stat-card{
    bottom:-16px;left:-12px;
    padding:12px 16px;
    max-width:62%;
  }
  .stat-card .num{font-size:1.4rem;}
  .stat-card .label{font-size:.68rem;line-height:1.25;}
  /* Animating border-radius on this element is what makes the photo
     appear to tear/split down the middle on phones (a mobile Safari
     rendering bug with animated clip-shapes). Keep a single stable
     organic shape on small screens instead of morphing it. */
  .about-photo-frame{animation:none;border-radius:58% 62% 55% 65% / 60% 55% 65% 60%;}
}

.site-header.is-scrolled{box-shadow:0 4px 18px rgba(46,59,78,.08);}

/* Accessibility */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;
  width:1px;word-wrap:normal!important;
}
.skip-link.screen-reader-text:focus{
  background:#fff;color:var(--nido-navy);display:block;
  height:auto;left:16px;top:16px;padding:14px 22px;
  width:auto;z-index:100000;border-radius:12px;box-shadow:var(--shadow-soft);
  clip:auto;clip-path:none;
}

/* Basic page content (mentions légales, etc.) */
.page-content p{margin-bottom:1.2em;}
.page-content h2,.page-content h3{margin-top:1.4em;}
.page-content ul,.page-content ol{padding-left:1.4em;margin-bottom:1.2em;}
.page-content ul{list-style:disc;}
.page-content ol{list-style:decimal;}
.page-content a{color:var(--nido-coral);text-decoration:underline;}

/* Hours table (Contact section) */
/* Hours list (Contact section) — 2 days per line, horizontal separators */
.hours-list{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:22px;
}
.hours-list-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid rgba(46,58,70,.07);
  font-size:13px;
  line-height:1.3;
  color:var(--nido-text);
}
.hours-day{
  display:inline-block;
  width:82px;
  flex-shrink:0;
  text-align:center;
  background:var(--nido-mint);
  color:#fff;
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.02em;
  padding:4px 8px;
  border-radius:20px;
  white-space:nowrap;
}
.hours-time{font-weight:600;color:var(--nido-navy);white-space:nowrap;}
@media(max-width:480px){
  .hours-list{grid-template-columns:1fr;}
}

/* Confirmation ticket (shown after a successful contact form submission) */
.confirmation-ticket{
  background:#fff;
  border-radius:20px;
  box-shadow:0 14px 34px rgba(46,58,70,.14);
  overflow:hidden;
  border:1px solid rgba(46,58,70,.06);
  animation:lenido-ticket-in .5s cubic-bezier(.22,1,.36,1);
}
@keyframes lenido-ticket-in{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.ticket-top{
  padding:32px 30px 26px;
  text-align:center;
  background:linear-gradient(160deg, #fffdf8 0%, var(--nido-cream) 100%);
}
.ticket-logo{margin-bottom:14px;display:flex;justify-content:center;}
.ticket-logo img{max-height:52px;width:auto;border-radius:50%;}
.ticket-logo-text{font-family:var(--font-heading);font-size:24px;font-weight:700;color:var(--nido-coral);}
.ticket-welcome{font-size:15px;color:var(--nido-navy);font-weight:600;margin:0 0 6px;}
.ticket-greeting{font-size:14px;color:#6b6459;margin:0;}

.ticket-perforation{
  display:flex;
  justify-content:space-between;
  padding:0 6px;
  position:relative;
}
.ticket-perforation::before{
  content:'';
  position:absolute;
  left:0;right:0;top:50%;
  border-top:2px dashed rgba(46,58,70,.15);
}
.ticket-perforation span{
  width:16px;height:16px;
  border-radius:50%;
  background:var(--nido-cream);
  flex-shrink:0;
  position:relative;
  z-index:1;
}
.ticket-perforation span:first-child{margin-left:-14px;}
.ticket-perforation span:last-child{margin-right:-14px;}

.ticket-bottom{padding:22px 30px 28px;}
.ticket-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px dashed rgba(46,58,70,.08);
}
.ticket-row:last-child{border-bottom:none;}
.ticket-row-label{font-size:12.5px;font-weight:600;color:#8a8378;text-transform:uppercase;letter-spacing:.03em;}
.ticket-row-value{font-size:14px;font-weight:700;color:var(--nido-navy);text-align:right;}
.ticket-number{
  font-family:var(--font-heading);
  font-size:17px;
  letter-spacing:.04em;
  color:var(--nido-coral);
  background:rgba(255,122,110,.1);
  padding:4px 12px;
  border-radius:8px;
}

/* Mobile nav drawer */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;background:#fff;
  transform:translateX(100%);transition:transform .3s ease;z-index:200;
  box-shadow:-10px 0 30px rgba(0,0,0,.12);padding:30px 26px;
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav ul{display:flex;flex-direction:column;gap:22px;margin-top:40px;}
.mobile-nav a{font-family:var(--font-heading);font-weight:600;font-size:1.1rem;}
.mobile-nav-close{background:none;border:none;font-size:1.6rem;position:absolute;top:20px;right:20px;cursor:pointer;}
.nav-overlay{position:fixed;inset:0;background:rgba(46,59,78,.4);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:150;}
.nav-overlay.is-open{opacity:1;pointer-events:auto;}

/* ------------------------------------------------------------------ */
/* Touch devices: turn off hover-only decorative effects              */
/* On a phone/tablet there's no real cursor, so :hover only fires on  */
/* tap - which can leave a button "stuck" mid-hover-animation until   */
/* the visitor taps elsewhere. Each rule below cancels one hover      */
/* effect for touch devices only; real mouse/trackpad users (desktop, */
/* and any touchscreen laptop that also has a mouse) keep every       */
/* effect exactly as before. Tap/press feedback (:active) and         */
/* keyboard focus (:focus-visible) are untouched.                     */
/* ------------------------------------------------------------------ */
@media (hover:none), (pointer:coarse) {
  /* Buttons */
  .btn--primary:hover{transform:none;box-shadow:0 10px 22px rgba(242,132,107,.35);}
  .btn--outline:hover{background:transparent;color:var(--nido-navy);}
  .hero-actions .btn--outline:hover{
    background:var(--nido-hero-btn2-bg, transparent);
    color:var(--nido-hero-btn2-color, #fff);
  }
  .btn--instagram:hover{transform:none;box-shadow:0 10px 22px rgba(231,159,196,.4);}
  .btn--facebook:hover{transform:none;box-shadow:0 10px 22px rgba(141,198,232,.4);}

  /* Nav link underline */
  .main-nav a:hover{color:var(--nido-nav-text, var(--nido-navy));}
  .main-nav a:hover::after{width:0;}

  /* Social icons */
  .footer-social-icons a:hover{background:var(--nido-navy);transform:none;}

  /* Hero slider arrows */
  .hero-slider-arrow:hover{background:rgba(255,255,255,.16);transform:translateY(-50%);}

  /* About photo */
  .about-photo-frame:hover{transform:translateZ(0);-webkit-transform:translateZ(0);}
  .about-photo-frame:hover .about-frame-zoom{opacity:0;transform:scale(.8);}

  /* Program cards */
  .program-card:hover{animation-play-state:running;transform:none;}
  .program-card:hover .program-card-media-halo{filter:drop-shadow(0 14px 22px rgba(46,59,78,.22));}
  .program-card:hover .program-card-media img{transform:none;}
  .program-card:hover .program-card-body{box-shadow:0 10px 24px rgba(46,59,78,.08);}
  /* "En savoir plus" is normally a hover-reveal link, but touch devices
     have no hover state to reveal it with - it would stay permanently
     invisible. Show it always here instead of waiting for :hover. */
  .program-card-more,
  .program-card:hover .program-card-more{opacity:1;transform:translateX(0);}
  .program-card:hover .program-card-more i{transform:none;}

  /* Gallery hexagons */
  .hex-item:hover{transform:none;filter:drop-shadow(0 4px 10px rgba(46,59,78,.18));z-index:auto;}
  .hex-item:hover .hex-inner img{transform:none;}
  .hex-item:hover .hex-inner::after{background:rgba(46,59,78,0);opacity:0;}

  /* Programme page gallery grid */
  .programme-gallery-item:hover{transform:none;box-shadow:var(--shadow-soft);}
  .programme-gallery-item:hover img{transform:none;}
  .programme-gallery-item:hover .programme-gallery-caption{opacity:0;transform:translateY(6px);}
}