/* ═══════════════════════════════════════════════════════════════
   DÉROULÉ CONTINU — surcouche : scroll fluide, ancres, responsive
   Chargée après styles.css ; ne modifie que la mise en page globale.
═════════════════════════════════════════════════════════════════ */
:root{--topbar-h:clamp(58px,8vh,86px);--flow-y:clamp(54px,8vh,124px)}

html,body{height:auto;overflow-x:hidden;overflow-y:visible}
body{display:block}
html{scroll-behavior:smooth}

/* ─── Bandeau cookies — informatif, aucun consentement à recueillir
       puisque le site ne dépose aucun cookie non essentiel ─────── */
.cookie-banner{position:fixed;left:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);bottom:clamp(14px,3vh,26px);z-index:200;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,20px);
  max-width:640px;margin:0 auto;
  padding:clamp(14px,2vh,18px) clamp(16px,2.4vw,22px);
  background:var(--c-petrol);color:#faf6ee;border-radius:6px;
  box-shadow:0 24px 50px -20px rgba(8,20,24,.5);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .35s,transform .35s}
.cookie-banner.is-visible{opacity:1;transform:none;pointer-events:auto}
.cookie-banner .cb-text{flex:1 1 320px;margin:0;font-size:13.5px;line-height:1.5;color:color-mix(in srgb,#faf6ee 92%,transparent)}
.cookie-banner .cb-text a{color:#faf6ee;text-decoration:underline;text-underline-offset:2px}
.cookie-banner .cb-ok{flex:none;padding:10px 20px;background:#faf6ee;color:var(--c-petrol-d);border:0;border-radius:3px;font-family:var(--ff-mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.cookie-banner .cb-ok:hover{background:var(--c-accent)}
@media (prefers-reduced-motion:reduce){.cookie-banner{transition:none}}

/* ─── Barre supérieure collante ─────────────────────────────── */
.topbar{position:sticky;top:0;z-index:120;background:color-mix(in srgb,var(--c-paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .3s,padding .3s}
body.is-scrolled .topbar{box-shadow:0 6px 30px -18px color-mix(in srgb,var(--c-ink) 60%,transparent)}

/* fine barre de progression */
.flow-progress{position:fixed;left:0;top:0;z-index:130;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--c-petrol),var(--c-accent));pointer-events:none}

/* ─── Le flux : plus de pages qui se succèdent ──────────────── */
.fullpage{position:relative;flex:none;min-height:0;overflow:visible;scroll-snap-type:none;overscroll-behavior:auto}
.fullpage>.fp-panel{min-height:0;align-content:normal;scroll-snap-align:none;scroll-snap-stop:normal;padding-block:var(--flow-y);scroll-margin-top:calc(var(--topbar-h) - 2px)}
.fullpage>.fp-panel--tall{align-content:normal}
.fullpage>.hero.fp-panel,.hero.fp-panel{padding-block:0}

/* garde-fous : blocs jadis étirés par la hauteur d'écran */
.lieu-spread{min-height:0}
.lieu-shot{min-height:clamp(300px,46vh,540px)}
.cours-body,.visiter-grid,.atelier-grid,.offres-grid,.planche-grid{min-height:0}
.manifest-inner{min-height:0}
.visiter-card{min-height:0}

/* ─── Apparition au défilement ──────────────────────────────── */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ─── Entrée du hero au chargement ──────────────────────────── */
@keyframes hero-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-mark .hero-line{animation:hero-rise .8s cubic-bezier(.22,.7,.3,1) both}
.hero-mark .hero-cart{animation:hero-rise .9s cubic-bezier(.22,.7,.3,1) .12s both}
.hero-cta{animation:hero-rise .8s cubic-bezier(.22,.7,.3,1) .32s both}

/* ─── CTA de couleur : reflet balayant au survol ────────────── */
.insta-cta{isolation:isolate}
.insta-cta::after{content:'';position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.18) 55%,transparent 70%);
  background-size:240% 100%;background-position:130% 0;transition:background-position .7s ease;pointer-events:none;z-index:0}
.insta-cta:hover::after{background-position:-30% 0}
.insta-cta .ic-picto,.insta-cta .ic-text,.insta-cta .ic-arrow{position:relative;z-index:1}

/* ─── Galerie & cadres : légère élévation au survol (sans ombre) ─── */
.pl-fig,.of-media,.atelier-figure,.manifest-figure,.cours-figure{transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.pl-fig:hover,.of-media:hover{transform:translateY(-5px)}

@media (prefers-reduced-motion:reduce){
  .hero-mark .hero-line,.hero-mark .hero-cart,.hero-cta{animation:none}
  .insta-cta::after{transition:none}
  .pl-fig,.of-media,.atelier-figure,.manifest-figure,.cours-figure{transition:none}
  .pl-fig:hover,.of-media:hover{transform:none}
}

/* ─── Bulles / pastilles — micro-libellés arrondis ──────────── */
.cl-tag,.of-tag,.ps-when{border-radius:999px}
.of-tag{display:inline-flex;align-items:center;padding:.34em .9em;background:color-mix(in srgb,var(--c-accent) 55%,transparent);color:var(--c-petrol-d)}
.cl-tag{display:inline-flex;align-items:center;padding:.3em .85em;background:color-mix(in srgb,var(--c-accent) 28%,transparent)}

/* ─── Rail de progression : passe en pastilles discrètes ────── */
.fp-rail{top:calc(50% + var(--topbar-h) / 2)}

/* ─── Navigation mobile ─────────────────────────────────────── */
.nav-toggle{display:none;align-items:center;gap:9px;border:1px solid color-mix(in srgb,var(--c-petrol) 30%,transparent);border-radius:999px;background:none;padding:9px 15px;cursor:pointer;font-family:var(--ff-mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-petrol)}
.nav-toggle .nt-bars{display:grid;gap:3px;width:16px}
.nav-toggle .nt-bars i{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s}
body.nav-open .nav-toggle .nt-bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
body.nav-open .nav-toggle .nt-bars i:nth-child(2){opacity:0}
body.nav-open .nav-toggle .nt-bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

@media (max-width:1024px){
  .topbar{grid-template-columns:1fr auto;align-items:center}
  .nav-toggle{display:inline-flex}
  .topbar-nav{position:fixed;left:0;right:0;top:var(--topbar-h);z-index:119;display:grid;gap:0;padding:6px clamp(18px,5vw,40px) 18px;background:var(--c-paper);border-bottom:1px solid color-mix(in srgb,var(--c-petrol) 18%,transparent);box-shadow:0 24px 40px -30px color-mix(in srgb,var(--c-ink) 70%,transparent);transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .28s,transform .28s}
  body.nav-open .topbar-nav{opacity:1;transform:none;pointer-events:auto}
  .topbar-nav a{padding:13px 2px;font-size:15px;border-bottom:1px solid color-mix(in srgb,var(--c-petrol) 12%,transparent)}
  .topbar-nav a:last-child{border-bottom:none}
  .topbar-nav a::after{display:none}
  .fp-rail{display:none}
}
@media (max-width:720px){
  .topbar-nav{display:grid}
  :root{--flow-y:clamp(42px,6.5vh,72px)}
  .lieu-shot{min-height:clamp(240px,40vh,360px)}
  .lieu-mark{width:min(58vw,190px)}
  .hero-picto{bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}