/*
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.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: lenido
*/

: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:'Baloo 2', system-ui, sans-serif;
  --font-body:'Quicksand', 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;
}
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;}
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-block;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--nido-coral);
  background:rgba(242,132,107,0.12);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px;
}
.section-head{text-align:center;max-width:640px;margin:0 auto 50px;}
.section-head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);}
.section-head p{font-size:1.05rem;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;
  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);}

/* 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;}
}

/* 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);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;}
.site-branding{display:flex;align-items:center;gap:12px;}
.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);}
.site-branding .baseline{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--nido-coral);font-weight:600;}

.main-nav ul{display:flex;gap:34px;align-items:center;}
.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:18px;}
.social-icons{display:flex;gap:12px;}
.social-icons a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--nido-navy);color:#fff;
  transition:background .25s ease, transform .25s ease;
}
.social-icons a:hover{background:var(--nido-coral);transform:translateY(-2px);}
.social-icons svg{width:18px;height:18px;fill:currentColor;}

.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;
  overflow:hidden;
  min-height:620px;
  display:flex;
  align-items:center;
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--nido-navy);}
.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%);
}
.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;
}
.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;
}
.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(.8);transform-origin:center;}
}
.hero-content{
  max-width:660px;
  transition:opacity .4s ease, transform .4s ease;
}
/* Default (and "fade") per-slide animation: fade + slight rise. */
.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:rgba(255,255,255,.16);backdrop-filter:blur(3px);
}
.hero-content h1{
  color:var(--nido-hero-title-color, #fff);
  font-size:clamp(2.2rem, 4.5vw, var(--nido-hero-title-size, 54px));
}
.hero-content h1 .accent{color:var(--nido-yellow);}
.hero-content p{
  color:var(--nido-hero-subtitle-color, #fff);
  font-size:var(--nido-hero-subtitle-size, 18px);
  opacity:.92;max-width:560px;margin-bottom:28px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:34px;}
.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);
}
.hero-actions .btn--outline:hover{
  background:var(--nido-hero-btn2-hover-bg, var(--nido-navy));
  color:var(--nido-hero-btn2-hover-color, #fff);
}
.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;}

@media (max-width:640px){
  .hero{
    padding:130px 0 70px;
    /* A content-driven height (min-height:auto) makes the hero's height
       swing with however much text is on each slide, which forces the
       background photo into a wildly different crop/zoom every time -
       that's the "photos don't show correctly / layout is a mess"
       effect. Locking to a viewport-based range keeps every slide's
       photo cropped consistently instead. dvh is used with a vh
       fallback for older iOS versions. */
    min-height:520px;
    min-height:64vh;
    min-height:64dvh;
    max-height:760px;
  }
  /* 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%;}
  .hero-content .eyebrow{font-size:11px;padding:5px 12px;margin-bottom:14px;}
  .hero-content h1{
    font-size:clamp(1.5rem, 7vw, 1.9rem);
    line-height:1.2;
    margin-bottom:12px;
  }
  .hero-content p{
    font-size:clamp(.85rem, 3.6vw, .95rem);
    line-height:1.45;
    margin-bottom:20px;
  }
  .hero-actions{margin-bottom:20px;gap:10px;}
  .hero-badges{gap:8px;}
  .hero-badges .badge{font-size:.76rem;padding:6px 12px 6px 6px;gap:7px;}
  .hero-badges .badge .dot{width:26px;height:26px;font-size:.72rem;}
  .hero-actions .btn{
    flex:1 1 auto;justify-content:center;text-align:center;
    padding:11px 14px;
    font-size:.82rem;
    gap:7px;
  }
  .hero-actions .btn i{font-size:.85em;}
}
@media (max-width:380px){
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
}

/* 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 26s 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:80px;align-items:center;}
.about-media{position:relative;}

/* Colorful dashed rings that slowly orbit the photo, each at a different
   speed/direction/color for a playful layered effect. Sized larger than
   the frame and centered behind it (z-index below), so they peek out
   around the blob's edges instead of sitting on top of the photo. */
.about-orbit{
  position:absolute;
  inset:-10%;
  width:120%;height:120%;
  z-index:0;
  pointer-events:none;
}
.about-orbit-ring{
  fill:none;
  stroke-width:3.5;
  stroke-linecap:round;
  transform-box:fill-box;
  transform-origin:center;
}
.about-orbit-ring--1{
  stroke:var(--nido-coral);
  stroke-dasharray:38 26;
  animation:about-orbit-spin 10s linear infinite;
}
.about-orbit-ring--2{
  stroke:var(--nido-mint);
  stroke-dasharray:26 18;
  animation:about-orbit-spin-reverse 14s linear infinite;
}
.about-orbit-ring--3{
  stroke:var(--nido-yellow);
  stroke-dasharray:16 34;
  animation:about-orbit-spin 8s linear infinite;
}
@keyframes about-orbit-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes about-orbit-spin-reverse{
  from{transform:rotate(360deg);}
  to{transform:rotate(0deg);}
}
@media (prefers-reduced-motion:reduce){
  .about-orbit-ring{animation:none;}
}

/* Photo frame: an organic "blob" shape (soft, rounded, always slightly
   different from a plain circle) that gently morphs over time - more
   playful than the old plain square/rounded-rectangle. The image itself
   fills the shape via object-fit + the parent's overflow:hidden. */
.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;
}
.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%;}
}
@media (prefers-reduced-motion:reduce){
  .about-photo-frame{animation:none;border-radius:50%;}
}

/* Small "click to enlarge" hint, tucked in a corner, revealed on hover/focus
   (and always faintly visible on touch devices, since there's no hover there). */
.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);}
@media (hover:none){
  .about-frame-zoom{opacity:.9;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-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;
}

/* About photo lightbox (self-contained: separate from the programme-page
   lightbox further down, so that one is untouched). */
.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;
  transition:background .2s ease;
}
.about-lightbox-close:hover{background:rgba(255,255,255,.25);}

/* Programs / services */
.programs{background:#fff;}
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;}
.program-card{
  background:var(--nido-cream);border-radius:var(--radius-lg);padding:34px 28px;
  transition:transform .3s ease, box-shadow .3s ease;
  border:2px solid transparent;
}
.program-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);border-color:var(--nido-yellow);}
.program-card .icon-wrap{
  width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--nido-coral);color:#fff;margin-bottom:20px;font-size:1.5rem;
}
.program-card h3{font-size:1.2rem;margin-bottom:8px;}
.program-card p{font-size:.95rem;opacity:.8;margin:0;}
.program-card .age{
  display:inline-block;margin-top:14px;font-size:.78rem;font-weight:700;
  background:var(--nido-navy);color:#fff;padding:4px 12px;border-radius:999px;
}
.program-card{display:block;}
.program-card-more{
  display:flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--font-heading);font-weight:700;font-size:.9rem;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);}

/* 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;}
.programme-hero-section{padding-bottom:0;}
.programme-hero-head{margin-top:26px;max-width:760px;}
.programme-hero-head .age{
  display:inline-block;margin-bottom:16px;font-size:.8rem;font-weight:700;
  background:var(--nido-navy);color:#fff;padding:6px 16px;border-radius:999px;
}
.programme-hero-head h1{font-size:clamp(2rem,4vw,2.9rem);}
.programme-featured-media{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);
  margin:36px 0 0;max-height:460px;
}
.programme-featured-media img{width:100%;height:100%;object-fit:cover;display:block;}
.programme-content h2{margin-top:1.4em;}
.programme-hero-intro{margin-top:16px;font-size:1.08rem;color:var(--nido-navy);opacity:.8;max-width:620px;}

/* Scroll-reveal animation, used across programme pages */
.reveal-up{opacity:0;transform:translateY(26px);transition:opacity .6s ease, transform .6s ease;}
.reveal-up.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal-up{opacity:1;transform:none;transition:none;}
}

/* "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{
  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(--nido-cream);
  display:flex;align-items:center;justify-content:center;color:var(--nido-coral);font-size:1.25rem;
}
.programme-highlight-card p{margin:0;line-height:1.6;color:var(--nido-navy);opacity:.85;}

/* Photo gallery */
.programme-gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;
}
.programme-gallery-item{
  position:relative;border:0;padding:0;cursor:zoom-in;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--shadow-soft);background:var(--nido-cream);
  transition:transform .35s ease, box-shadow .35s ease;
}
.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);}

/* 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);}

/* Daily timeline */
.programme-timeline{display:flex;flex-direction:column;position:relative;padding-left:6px;}
.programme-timeline::before{
  content:'';position:absolute;left:65px;top:8px;bottom:8px;width:2px;
  background:repeating-linear-gradient(to bottom, var(--nido-mint) 0 6px, transparent 6px 12px);
}
.programme-timeline-item{
  display:grid;grid-template-columns:56px 20px 1fr;align-items:center;gap:14px;
  padding:14px 0;position:relative;
}
.programme-timeline-time{
  font-family:var(--font-heading);font-weight:700;color:var(--nido-navy);font-size:.9rem;text-align:right;
}
.programme-timeline-dot{
  width:14px;height:14px;border-radius:50%;background:var(--nido-coral);
  box-shadow:0 0 0 5px var(--nido-cream);justify-self:center;z-index:1;
}
.programme-timeline-text{color:var(--nido-navy);opacity:.85;line-height:1.5;}

/* Extra info blocks */
.programme-info-blocks{display:flex;flex-direction:column;gap:26px;}
.programme-info-block{
  background:var(--nido-cream);border-radius:var(--radius-lg);padding:26px 28px;
}
.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:640px){
  .programme-timeline::before{left:56px;}
  .programme-timeline-item{grid-template-columns:46px 16px 1fr;gap:10px;}
  .programme-lightbox{padding:20px;}
  .programme-lightbox-close{top:14px;right:14px;}
}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:16px;}
.gallery-grid a{position:relative;border-radius:var(--radius-md);overflow:hidden;display:block;}
.gallery-grid a:nth-child(4n+1){grid-row:span 2;}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.gallery-grid a:hover img{transform:scale(1.08);}
.gallery-grid a::after{
  content:"\f16d";font-family:'Font Awesome 6 Brands','Font Awesome 6 Free';
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.6rem;background:rgba(46,59,78,0);transition:background .3s ease;opacity:0;
}
.gallery-grid a:hover::after{background:rgba(46,59,78,.45);opacity:1;}

/* 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;}

/* Contact */
.contact .container{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
.contact-info-card{
  background:#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:340px;}
.contact-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;}

.contact-form-card{background:#fff;border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-soft);}
.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-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;}

/* 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-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, .header-cta .social-icons{display:none;}
  .menu-toggle{display:block;}
  .about .container, .contact .container{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .cta-band{flex-direction:column;text-align:center;padding:40px 28px;}
}
@media (max-width:640px){
  /* The header CTA button(s) now live inside the mobile drawer (see
     .mobile-nav-buttons) so the fixed top bar only needs to hold the
     logo and the hamburger icon - that's what was making it so tall
     and cramped on phones. */
  .header-cta > .btn{display:none;}
  .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;}
  .mobile-nav-buttons{display:flex;flex-direction:column;gap:12px;margin-top:26px;}
  .mobile-nav-buttons .btn{justify-content:center;}
}

@media (max-width:600px){
  .about-features{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .section{padding:60px 0;}
  .about-orbit{inset:-7%;width:114%;height:114%;}
  /* 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;}
}

.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;}