/* ============================================
   SMTTM V5 — Clean & Harmonized
   ============================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* ── Colors ── */
  --cream:      #F5F0E8;
  --beige:      #E8DED0;
  --terra:      #B5673A;
  --terra-l:    #C8835A;
  --terra-d:    #8B4A28;
  --terra-a:    #c56b48;
  --green:      #3D5A47;
  --green-d:    #2C4235;
  --sage:       #6B7F5E;
  --teal:       #50736c;
  --teal-d:     #2e4540;
  --gold:       #C49A4C;
  --gold-l:     #D4B06A;
  --dark:       #2A2420;
  --muted:      #443f3c;
  --white:      #FFFFFF;

  /* ── Section-specific named colors ── */
  --eclipse-bg:     #bfa691;  /* Soirée Eclipse fond */
  --sunset-top:     #d4b896;  /* Soirée Sunset dégradé haut */
  --sunset-bot:     #b89468;  /* Soirée Sunset dégradé bas */
  --newsletter-ok:  #FFFFFF;  /* Message succès newsletter */
  --newsletter-err: #8B4A28;  /* Message erreur newsletter */
  --gal-placeholder:#e8e2d8;  /* Galerie — fond skeleton image */

  /* ── RGB channels (pour rgba()) ── */
  /* Modifier ces valeurs en parallèle avec les hex ci-dessus */
  --cream-rgb:    245, 240, 232;
  --terra-rgb:    181, 103, 58;
  --terra-a-rgb:  197, 107, 72;
  --terra-l-rgb:  200, 131, 90;
  --terra-d-rgb:  139, 74, 40;
  --teal-rgb:     80, 115, 108;
  --dark-rgb:     42, 36, 32;
  --muted-rgb:    68, 63, 60;
  --white-rgb:    255, 255, 255;

  /* Typography */
  --f-display:  'Playfair Display', Georgia, serif;
  --f-body:     'Outfit', system-ui, sans-serif;

  /* Spacing */
  --section-px:  3rem;
  --section-py:  5rem;
  --max-w:       1400px;
  --radius:      20px;
  --radius-sm:   12px;
  --radius-full: 100px;

  /* Mountains */
  --mt-h: 250px;

  /* Easing */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  :root {
    --section-px: 1.5rem;
    --section-py: 5rem;
    --mt-h: 140px;
  }
}
@media (min-width: 1200px) {
  :root { --mt-h: 300px; }
}

/* ---------- SCROLLBAR ---------- */
html {
  scrollbar-color: var(--terra-l) var(--beige);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--beige); }
::-webkit-scrollbar-thumb {
  background-color: var(--terra-l);
  border-radius: 100px;
  border: 2px solid var(--beige);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--terra); }

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 80px; }
body {
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--dark);
  overflow-x: clip;
  cursor: auto;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--terra); text-decoration: none; cursor: pointer; }
img { display: block; max-width: 100%; }
p  { font-size: 1.05rem; line-height: 1.7; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

@media (min-width: 769px) {
  p { font-size: 1rem; }
}

/* ---------- CURSOR ---------- */
/* ── CURSOR TRAIL — étoiles cream qui suivent la souris ── */
.cursor-trail {
  position: fixed;
  left: 0; top: 0;
  width: 11px; height: 11px;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse 18% 100% at center, var(--cream) 0%, transparent 68%),
    radial-gradient(ellipse 100% 18% at center, var(--cream) 0%, transparent 68%);
  transition: opacity 0.25s ease-out;
  will-change: transform, opacity;
}

/* ── CUSTOM CURSOR — étoile 4 branches terra-a DOM-based ── */
.cursor { display: none; } /* ancien cursor DOM désactivé */

@media (hover: hover) and (pointer: fine) {
  html, html * { cursor: none !important; }

  .cursor-star {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    width: 22px; height: 22px;
    transform: translate(-50%, -50%);
    transition: transform 0.15s var(--ease);
    overflow: visible;
  }
  .cursor-star--hover { transform: translate(-50%, -50%) scale(1.6); }
}

/* ---------- SIDENAV METRO ---------- */
.sidenav { display: none; }

@media (min-width: 769px) {
  .nav { display: none !important; }

  /* Espace pour la sidenav — les sections s'arrêtent avant */
  body { padding-right: 168px; }

  .sidenav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: fixed;
    right: 0; top: 0;
    height: 100vh;
    width: 168px;
    padding: 1.4rem 0rem 1.5rem 0;
    z-index: 100;
    gap: 1rem;
    background: rgba(0,0,0,0.04);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .sidenav__logo {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sidenav__logo img {
    height: 100px; width: auto;
    opacity: 0; transition: opacity 0.5s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
  }
  .sidenav__logo.logo--visible img { opacity: 0.85; }
  .sidenav__logo.logo--visible:hover img { opacity: 1; }

  /* ── Track ── */
  .sidenav__track {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
  }

  /* Ligne fond blanche */
  .sidenav__line-bg {
    position: absolute;
    right: 22px; width: 3px;
    border-radius: 2px;
    background: rgba(var(--white-rgb),0.28);
    pointer-events: none;
    top: 0; bottom: 0;
  }

  /* Ligne progression : sinusoïde terracotta animée */
  .sidenav__line-fill {
    position: absolute;
    right: 18px; width: 10px;
    top: 0; height: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='24'%3E%3Cpath d='M 5 0 Q 10 6 5 12 Q 0 18 5 24' stroke='%23B5673A' stroke-width='2.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 10px 24px;
    animation: sineScroll 1.2s linear infinite;
    pointer-events: none;
    overflow: hidden;
    transition: height .3s var(--ease);
  }
  @keyframes sineScroll { to { background-position-y: -24px; } }

  /* Fusée indicateur */
  .sidenav__rocket {
    position: absolute;
    right: 7px;
    top: 0;
    transform: translateY(-50%) rotate(180deg);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(var(--terra-rgb),.75)) drop-shadow(0 1px 3px rgba(0,0,0,.3));
    animation: rocketFlicker 2s ease-in-out infinite;
  }
  @keyframes rocketFlicker {
    0%,100% { filter: drop-shadow(0 0 5px rgba(var(--terra-rgb),.75)) drop-shadow(0 1px 3px rgba(0,0,0,.3)); }
    50%      { filter: drop-shadow(0 0 8px rgba(255,160,0,.9))  drop-shadow(0 1px 3px rgba(0,0,0,.3)); }
  }

  /* ── Stations ── */
  .sidenav__station {
    display: flex; align-items: center;
    text-decoration: none; position: relative; z-index: 2;
    width: 100%; justify-content: flex-end;
    padding-right: 34px; /* space for dot sitting on the line */
  }

  /* Point solide — positionné sur la ligne */
  .sidenav__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(var(--white-rgb),0.4);
    transition: background .4s, width .3s, height .3s, right .3s, box-shadow .3s;
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  }

  /* Visité → terracotta */
  .sidenav__station--visited .sidenav__dot {
    background: var(--terra);
    box-shadow: 0 0 0 2px rgba(var(--terra-rgb),0.2);
  }

  /* Actif → terracotta, un peu plus gros */
  .sidenav__station--active .sidenav__dot {
    background: var(--terra);
    width: 11px; height: 11px; right: 18.5px;
    box-shadow: 0 0 0 3px rgba(var(--terra-rgb),0.25);
  }

  /* Label : texte simple, même gris que le menu mobile */
  .sidenav__label {
    color: var(--muted);
    font-size: .82rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap;
    transition: color .3s, transform .3s;
  }

  /* Hover */
  .sidenav__station:hover .sidenav__dot { background: rgba(var(--white-rgb),.9); width: 10px; height: 10px; right: 19px; }
  .sidenav__station:hover .sidenav__label { color: var(--dark); transform: translateX(-2px); }

  /* Label actif */
  .sidenav__station--active .sidenav__label { color: var(--terra); font-weight: 700; }

  /* Label visité */
  .sidenav__station--visited .sidenav__label { color: rgba(var(--muted-rgb),0.45); }

  /* Terminus billetterie : centré, dot invisible (gardé pour calcul JS) */
  .sidenav__station--final {
    justify-content: center;
    padding-right: 0;
    z-index: 5; /* au-dessus du vaisseau (z-index: 4) pour l'effet "passe dessous" */
  }
  .sidenav__station--final .sidenav__dot {
    opacity: 0;
    width: 3px; height: 3px;
    right: auto; left: 50%; transform: translateX(-50%) translateY(-50%);
  }
  .sidenav__station--final .sidenav__label {
    background: var(--terra);
    color: var(--white);
    padding: 8px 18px; border-radius: 100px;
    font-weight: 700; font-size: .8rem;
    letter-spacing: .1em;
    box-shadow: 0 2px 10px rgba(var(--terra-rgb),0.4);
    display: inline-block;
  }
  .sidenav__station--final:hover .sidenav__label { background: var(--terra-d); color: var(--white); transform: scale(1.04); }
  .sidenav__station--final.sidenav__station--active .sidenav__label,
  .sidenav__station--final.sidenav__station--visited .sidenav__label { background: var(--terra); color: var(--white); opacity: 1; }

  /* Crash animations */
  @keyframes rocketImpact {
    0%   { transform: translateY(-50%) rotate(180deg); }
    20%  { transform: translateY(-58%) rotate(197deg) scale(1.08); }
    45%  { transform: translateY(-45%) rotate(184deg) scale(0.95); }
    65%  { transform: translateY(-53%) rotate(194deg) scale(1.02); }
    82%  { transform: translateY(-49%) rotate(181deg); }
    100% { transform: translateY(-50%) rotate(180deg); }
  }
  @keyframes explodePop {
    0%   { transform: translate(0, 0) scale(0); opacity: var(--eo); }
    40%  { transform: translate(var(--dx), var(--dy)) scale(1); opacity: var(--eo); }
    100% { transform: translate(calc(var(--dx)*1.7), calc(var(--dy)*1.7)) scale(.5); opacity: 0; }
  }
  .explosion-circle {
    position: absolute; border-radius: 50%;
    background: var(--terra-a); pointer-events: none; z-index: 10;
    animation: explodePop .65s ease-out forwards;
  }
  @keyframes btnImpact {
    0%,100% { transform: none; }
    15%     { transform: translateX(-5px) rotate(-2.5deg); }
    30%     { transform: translateX(4px)  rotate(2deg); }
    45%     { transform: translateX(-3px) rotate(-1.5deg); }
    60%     { transform: translateX(2px)  rotate(1deg); }
    80%     { transform: translateX(-1px); }
  }
  .sidenav__station--final.rocket-crashed .sidenav__label {
    animation: btnImpact 0.55s ease-in-out;
  }
  .sidenav__rocket--crashed {
    animation: rocketImpact 0.5s ease-in-out, rocketFlicker 2s ease-in-out infinite 0.5s !important;
  }

  /* ── Galerie ── */
  .sidenav__extra {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 1rem 0;
  }
  .sidenav__extra-sep {
    width: 3px; height: 18px;
    background: rgba(var(--white-rgb),0.15); border-radius: 2px;
  }
  .sidenav__dot--sm { width: 5px; height: 5px; right: 21.5px; }
  .sidenav__station--gallery {
    justify-content: center;
    padding-right: 0;
  }
  .sidenav__station--gallery .sidenav__label {
    background: var(--teal);
    color: rgba(var(--white-rgb),0.92);
    padding: 8px 20px; border-radius: 100px;
    font-size: .9rem; font-weight: 600;
    letter-spacing: .08em;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(var(--teal-rgb),0.45);
  }
  .sidenav__station--gallery:hover .sidenav__label { background: var(--green); color: var(--white); transform: scale(1.04); }

  /* ── Footer sidenav : téléphone, email, scroll-top ── */
  .sidenav__footer {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: .55rem; width: 100%; padding: 0 .4rem;
    margin-top: auto;
  }
  .sidenav__icon-btn {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: none; text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .35s;
    flex-shrink: 0;
  }
  .sidenav__icon-btn:hover { transform: scale(1.14) translateY(-3px); }

  /* Téléphone — teal lunaire */
  .sidenav__icon-btn:nth-child(1) {
    background: var(--teal); color: var(--white);
    box-shadow: 0 4px 14px rgba(var(--teal-rgb),.45);
  }
  .sidenav__icon-btn:nth-child(1):hover {
    box-shadow: 0 8px 24px rgba(var(--teal-rgb),.6), 0 0 0 5px rgba(var(--teal-rgb),.18);
  }

  /* Email — terracotta */
  .sidenav__icon-btn:nth-child(2) {
    background: var(--terra); color: var(--white);
    box-shadow: 0 4px 14px rgba(var(--terra-rgb),.45);
  }
  .sidenav__icon-btn:nth-child(2):hover {
    box-shadow: 0 8px 24px rgba(var(--terra-rgb),.6), 0 0 0 5px rgba(var(--terra-rgb),.18);
  }

  /* Scroll-top — comet button */
  .comet-wrap {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .4s;
  }
  .comet-wrap.visible { opacity: 1; pointer-events: all; animation: moonAppear .5s var(--ease) both; }

  .comet-halo {
    position: absolute;
    width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--terra-a-rgb),.22) 0%, rgba(var(--terra-a-rgb),.06) 50%, transparent 70%);
    animation: haloPulse 3s ease-in-out infinite;
    pointer-events: none;
  }

  .comet-btn {
    position: relative;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--terra-d); border: none; cursor: none;
    display: flex; align-items: center; justify-content: center;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .35s;
    box-shadow: 0 4px 14px rgba(var(--terra-d-rgb),.5);
    z-index: 1; overflow: hidden;
  }
  .comet-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--terra-d-rgb),.55), 0 0 0 5px rgba(var(--terra-a-rgb),.25);
  }

  /* Clip la trainée au niveau de la pointe du chevron */
  .comet-trail-wrap {
    position: absolute; bottom: 0; left: 0; right: 0;
    top: 52%; /* en dessous des bras du chevron */
    overflow: hidden; pointer-events: none; z-index: 1;
  }
  .comet-trail {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 14px; height: 30px;
    border-radius: 7px 7px 4px 4px;
    background: linear-gradient(to bottom, rgba(var(--terra-l-rgb),.8), rgba(var(--terra-l-rgb),.25) 50%, rgba(var(--terra-l-rgb),0) 100%);
    pointer-events: none;
    animation: trailPulse 2s ease-in-out infinite;
  }
  .comet-trail-wide {
    position: absolute; bottom: 2px; left: 50%;
    transform: translateX(-50%);
    width: 30px; height: 20px; border-radius: 50%;
    background: radial-gradient(ellipse at top, rgba(var(--terra-l-rgb),.3) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(2px);
    animation: trailGlow 2s ease-in-out infinite;
  }

  .comet-bL, .comet-bR { transform-origin: 12px 8px; }
  .comet-bL { animation: wL 3s ease-in-out infinite; }
  .comet-bR { animation: wR 3s ease-in-out infinite; }
  .comet-btn:hover .comet-bL,
  .comet-btn:hover .comet-bR { animation-duration: 1.2s; }

  @keyframes moonAppear {
    0%   { transform: scale(.5); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes haloPulse {
    0%, 100% { transform: scale(1); opacity: .5; }
    50% { transform: scale(1.2); opacity: .85; }
  }
  @keyframes trailPulse { 0%,100%{opacity:.9} 50%{opacity:.4} }
  @keyframes trailGlow  { 0%,100%{opacity:.5} 50%{opacity:.2} }
  @keyframes wL { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-3deg)} }
  @keyframes wR { 0%,100%{transform:rotate(0)} 50%{transform:rotate(3deg)} }
}

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem var(--section-px);
  transition: background .4s, padding .4s, box-shadow .4s;
}
.nav--scrolled {
  background: rgba(var(--cream-rgb), .92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: .8rem var(--section-px);
  box-shadow: 0 2px 30px rgba(0,0,0,.06);
}
.nav__logo { opacity: 0; transition: opacity 0.5s ease; }
.nav__logo.logo--visible { opacity: 1; }
.nav__logo img { height: 50px; width: auto; transition: height .4s; }
.nav--scrolled .nav__logo img { height: 38px; }

.nav__links { display: flex; gap: 1.8rem; align-items: center; }
.nav__link {
  font-size: .92rem; font-weight: 500; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
  transition: color .3s; position: relative;
}
.nav__link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--terra);
  transition: width .4s var(--ease);
}
.nav__link:hover { color: var(--terra); }
.nav__link:hover::after { width: 100%; }

.nav__link--cta {
  background: var(--terra); color: var(--white) !important;
  padding: .55rem 1.3rem; border-radius: var(--radius-full);
  font-weight: 600;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { background: var(--terra-d); transform: scale(1.05); }

.nav__burger {
  display: none; background: none; border: none; cursor: none;
  flex-direction: column; gap: 5px; padding: 8px;
}
.nav__burger span { display: block; width: 34px; height: 5px; border-radius: 3px; background: var(--terra-a); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(var(--cream-rgb), .57); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding-bottom: 20vh;
  opacity: 0; pointer-events: none; transition: opacity .4s;
  text-shadow: 0px 0px 8px rgba(var(--cream-rgb), .57);
}
.mobile-menu--open { opacity: 1; pointer-events: all; }
.mobile-menu__link { font-family: var(--f-display); font-size: 1.7rem;  color: var(--dark); font-weight: 600;}
.mobile-menu__link:hover { color: var(--terra); }
.mobile-menu__link--cta { color: var(--terra); }
/* ── Lang pills ── */
.lang-pill {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--terra-a); background: transparent;
  border: 1.5px solid var(--terra-a); padding: 0.25rem 0.65rem;
  border-radius: 999px; text-decoration: none;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
  cursor: none;
}
.lang-pill--active {
  background: var(--terra-a); color: var(--cream);
}
.lang-pill:not(.lang-pill--active):hover {
  background: var(--terra-a); color: var(--cream); opacity: 0.8;
}
.sidenav__lang {
  display: flex; gap: 6px; justify-content: center; padding: 0.4rem 0;
}
.mobile-lang {
  position: absolute; bottom: 5rem; right: 1.8rem;
  display: flex; gap: 8px; align-items: center;
}
.lang-switch--nav { margin-left: 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--terra-a); opacity: 0.75; text-decoration: none; border: 1.5px solid var(--terra-a); padding: 0.25rem 0.65rem; border-radius: 999px; transition: opacity 0.2s; }
.lang-switch--nav:hover { opacity: 1; }

.mobile-menu__link--gallery {
  background: var(--teal);
  color: var(--white) !important;
  padding: 0.75rem 2.8rem;
  border-radius: var(--radius-full);
  font-size: 2rem;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(var(--teal-rgb),0.28);
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  text-shadow: 0px 0px 2px rgba(var(--white-rgb), .27);
}
.mobile-menu__link--gallery:hover {
  background: var(--green);
  color: var(--white);
  transform: scale(1.04);
  box-shadow: 0 10px 30px rgba(var(--teal-rgb),0.38);
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-body); font-size: .9rem; font-weight: 600;
  padding: .85rem 2rem; border-radius: var(--radius-full);
  border: none; cursor: none; transition: all .4s var(--ease);
}
.btn--primary { background: var(--terra); color: var(--white); }
.btn--primary:hover { background: var(--terra-d); transform: scale(1.05); box-shadow: 0 8px 30px rgba(var(--terra-rgb),.25); }
.btn--ghost { background: transparent; color: var(--dark); border: 1.5px solid rgba(var(--terra-rgb),.15); }
.btn--ghost:hover { border-color: var(--terra); color: var(--terra); }
.btn--white { background: var(--white); color: var(--terra); }
.btn--white:hover { background: var(--cream); transform: scale(1.05); }
.btn--teal { background: var(--teal); color: var(--white); }
.btn--teal:hover { background: var(--teal-d); transform: scale(1.05); box-shadow: 0 8px 30px rgba(var(--teal-rgb),.35); }
.btn--large { padding: 1.1rem 3rem; font-size: 1.05rem; }

/* ---------- SECTION COMMON ---------- */
.section__header { margin-bottom: 3.5rem; }
.section__header--solo { margin-top: 4rem; }
.section__label {
  font-size: 1.3rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--terra); margin-bottom: .6rem;
}
.section__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900; line-height: 1.1;
}
.section__subtitle { font-size: 1.1rem; color: var(--muted); margin-top: .8rem; }

/* Dark backgrounds override */
.bg-terra .section__label, .bg-sage .section__label { color: rgba(var(--white-rgb),.7); }
.bg-green .section__label, .bg-teal .section__label { color: var(--gold-l); }
.bg-terra .section__title, .bg-green .section__title, .bg-teal .section__title, .bg-sage .section__title { color: var(--white); }
.bg-terra .section__title a, .bg-green .section__title a, .bg-teal .section__title a, .bg-sage .section__title a { color: inherit; text-decoration: none; }
.bg-terra .section__title a:hover, .bg-green .section__title a:hover, .bg-teal .section__title a:hover, .bg-sage .section__title a:hover { text-decoration: underline; }

/* ---------- HERO ---------- */
.hero {
  position: sticky; top: 0;
  min-height: 100vh;
  overflow: hidden; background: transparent; z-index: 0;
}
.parallax-layer { will-change: transform; }
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent 0%, var(--cream) 100%);
  z-index: 8;
  pointer-events: none;
}
.hero__content { position: relative; z-index: 2; text-align: center; padding: 0 2rem; max-width: 900px; }
.hero__logo { width: 420px; max-width: 85vw; height: auto; margin: 0 auto 2rem; opacity: 0; }
.hero__date {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: 1.45rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--terra-a); margin-bottom: 1.4rem; opacity: 0; 
}

.hero__date-line { display: inline-block; width: 40px; height: 2px; background: var(--terra); }
.hero__location {
  font-size: .85rem; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--terra); margin-bottom: 1.5rem; opacity: 0
}
.hero__title { font-family: var(--f-display); line-height: 1; margin-bottom: 1.5rem; }
.hero__title-line {
  display: block; font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 900; color: var(--dark); opacity: 0; transform: translateY(60px);
}
.hero__title-line--italic { font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 4vw, 3.5rem); color: var(--muted); }
.hero__title-line--accent { font-size: clamp(3.5rem, 10vw, 9rem); color: var(--terra); }
.hero__subtitle { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 300; color: var(--muted); margin-bottom: .5rem; opacity: 0; }
.hero__desc { font-size: 1.05rem; color: var(--muted); margin-bottom: 2.5rem; opacity: 0; }
.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; }
.hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  z-index: 2; opacity: 0; margin-top: 2rem;
}
.hero__scroll span {
  font-size: .8rem; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(63, 60, 60, 0.75); font-weight: 700;
}
.hero__scroll-line {
  width: 3px; height: 70px;
  background: linear-gradient(to bottom, var(--white), transparent);
  box-shadow: 0 0 10px rgba(var(--white-rgb),.4);
  animation: scrollLine 2s ease-in-out infinite;
}
.hero__scroll-chevron {
  color: var(--white);
  filter: drop-shadow(0 0 6px rgba(var(--white-rgb),.6));
  animation: chevronBounce 1.6s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes chevronBounce {
  0%, 100% { transform: translateY(0);   opacity: .5; }
  50%       { transform: translateY(6px); opacity: 1;  }
}

/* ---------- STACKING SECTIONS ---------- */
.stack-wrapper { overflow-x: clip; overflow-y: visible; }

.stack-section {
  position: sticky; top: 0;
  min-height: var(--section-minh, 100vh);
}
.stack-section:nth-child(1)  { z-index: 1; }
.stack-section:nth-child(2)  { z-index: 2; }
.stack-section:nth-child(3)  { z-index: 3; }
.stack-section:nth-child(4)  { z-index: 4; }
.stack-section:nth-child(5)  { z-index: 5; }
.stack-section:nth-child(6)  { z-index: 6; }
.stack-section:nth-child(7)  { z-index: 7; }
.stack-section:nth-child(8)  { z-index: 8; }
.stack-section:nth-child(9)  { z-index: 9; }
.stack-section:nth-child(10) { z-index: 10; }
.stack-section:nth-child(11) { z-index: 11; }

/* Mountain shape at top of each section */
.stack-section__mountain {
  position: absolute;
  top: calc(-1 * var(--mt-h) + 2px);
  left: 0; right: 0;
  height: var(--mt-h);
  z-index: 2; pointer-events: none; line-height: 0;
}
.stack-section__mountain svg {
  display: block; width: 100%; height: 100%;
}

/* Section content */
.stack-section__content {
  position: relative; z-index: 1;
  padding: var(--section-py) var(--section-px);
  /* Base = moitié de la montagne + réglage par section (--pb-extra, peut être négatif) */
  padding-bottom: max(0px, calc(var(--mt-h) * 0.5 + var(--pb-extra, 0px)));
  max-width: var(--max-w); margin: 0 auto;
}
.stack-section__content--full { max-width: 100%; }
.stack-section__content--full > .section__inner { max-width: var(--max-w); margin: 0 auto; }

/* Background helpers */
.bg-cream      { background: var(--cream); }
.bg-beige      { background: var(--beige); }
.bg-terra      { background: var(--terra);     color: var(--cream); }
.bg-terracotta { background: var(--terra);     color: var(--cream); }
.bg-green      { background: var(--green);     color: var(--cream); }
.bg-teal       { background: var(--teal);      color: var(--cream); }
.bg-sage       { background: var(--sage);      color: var(--cream); }

/* ── Background ambient FX (stars & dots) ── */
.bg-fx {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.bg-fx__star, .bg-fx__dot, .bg-fx__sparkle {
  position: absolute;
  transform: rotate(var(--rot, 0deg)) scale(0);
  opacity: 0;
  animation: bgFxPulse var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
/* Thin cross: two overlapping radial gradients */
.bg-fx__star {
  width: var(--size, 14px); height: var(--size, 14px);
  background:
    radial-gradient(ellipse 16% 100% at center, var(--fx-color) 0%, transparent 72%),
    radial-gradient(ellipse 100% 16% at center, var(--fx-color) 0%, transparent 72%);
}
/* SVG sparkle wrapper — SVG fills it, scales from center */
.bg-fx__sparkle { display: block; }
.bg-fx__sparkle svg { display: block; width: 100%; height: 100%; }
.bg-fx__dot {
  width: var(--size, 6px); height: var(--size, 6px);
  border-radius: 50%;
  background: var(--fx-color);
}
@keyframes bgFxPulse {
  0%        { transform: rotate(var(--rot,0deg)) scale(0); opacity: 0; }
  15%, 85%  { opacity: 1; }
  50%       { transform: rotate(var(--rot,0deg)) scale(1); opacity: 0.9; }
  100%      { transform: rotate(var(--rot,0deg)) scale(0); opacity: 0; }
}

/* Label/title overrides for terracotta (same as terra) */
.bg-terracotta .section__label { color: rgba(var(--white-rgb),.7); }
.bg-terracotta .section__title { color: var(--white); }

/* ---------- INTRO ---------- */
.intro-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5rem;
  align-items: center;
}
.intro-title {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  flex-shrink: 0;
}
.intro-title__line {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--dark);
}
.intro-title__line--italic {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2.6rem);
  color: var(--muted);
}
.intro-title__line--accent {
  font-size: clamp(4rem, 8vw, 7.5rem);
  color: var(--terra);
  line-height: 0.95;
}
.intro-text {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding-left: 3.5rem;
  border-left: 2px solid rgba(var(--terra-rgb),.25);
}
.intro-text p {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--dark);
}
.intro-text strong {
  color: var(--terra);
  font-weight: 700;
}
@media (max-width: 768px) {
  .intro-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro-text { border-left: none; border-top: 2px solid rgba(var(--terra-rgb),.25); padding-left: 0; padding-top: 2rem; }
}

/* ---------- PROFS ---------- */
.profs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.5rem; }
.prof-card { grid-column: span 2; }
.profs-grid .prof-card:nth-child(4) { grid-column: 2 / 4; }
.profs-grid .prof-card:nth-child(5) { grid-column: 4 / 6; }
.prof-card__img {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1/1; background: var(--beige); margin-bottom: 1.5rem;
}
.prof-stars { position: absolute; width: 100%; height: 100%; animation: starSlide 30s linear infinite; z-index: 0; will-change: transform; }
.prof-stars--b { left: 100%; }
.prof-card__img .star-dot { background: rgba(var(--white-rgb),0.85); width: 7px; height: 7px; position: absolute; border-radius: 50%; }
.prof-star4 {
  position: absolute;
  width: var(--size, 10px); height: var(--size, 10px);
  background:
    radial-gradient(ellipse 16% 100% at center, var(--fx-color) 0%, transparent 72%),
    radial-gradient(ellipse 100% 16% at center, var(--fx-color) 0%, transparent 72%);
  transform: rotate(var(--rot, 0deg)) scale(0); opacity: 0;
  animation: bgFxPulse var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
.prof-card__img .shooting-star { height: 7px; width: 55%; background: linear-gradient(90deg, rgba(var(--white-rgb),0.95), transparent); position: absolute; border-radius: 4px; }
.prof-card__img img {
  width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1;
  transition: transform .8s var(--ease), filter .8s;
}
.prof-card__img:hover img { transform: scale(1.08); filter: brightness(.8); }
.prof-card__name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(var(--dark-rgb),.6));
  color: var(--white); padding: 15px;
  font-family: var(--f-display); font-size: 1.7rem; font-weight: 700;
  text-shadow: 0 2px 8px var(--dark);
  text-align: center; z-index: 2;
}
.prof-card__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s; z-index: 3;
}
.prof-card__img:hover .prof-card__overlay { opacity: 1; }
@media (max-width: 768px) {
  .prof-card__overlay { opacity: 1; }
}
.prof-card__origin {
  font-size: 1.3rem; color: var(--terra); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .6rem;
}
.prof-card__info p:last-child { color: var(--muted); font-size: 1rem; line-height: 1.3; }
.btn-moon {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(var(--terra-rgb),.85); color: var(--white);
  padding: .6rem 1.2rem; border-radius: var(--radius-full);
  font-weight: 600; font-size: 1.4rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-moon:hover { background: var(--terra); color: var(--white); }
@media (max-width: 900px) {
  .profs-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; margin: 0 auto; }
  .prof-card,
  .profs-grid .prof-card:nth-child(4),
  .profs-grid .prof-card:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 680px) {
  .profs-grid { grid-template-columns: 1fr; max-width: 400px; }
}

/* ── Instagram badges — prof cards ── */
.prof-insta {
  position: absolute;
  top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  color: var(--terra-a);
  text-decoration: none;
  background: none;
  padding: 4px 6px;
}
.prof-insta--left  { left: 10px; }
.prof-insta--right { right: 10px; }
.prof-insta svg { flex-shrink: 0; width: 26px; height: 26px; filter: drop-shadow(0 0 4px rgba(var(--white-rgb),.9)); }
.prof-insta span {
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  max-width: 76px; word-break: break-word; text-align: center; line-height: 1.2;
  text-shadow: 0 0 6px rgba(var(--white-rgb),.95), 0 1px 3px rgba(var(--white-rgb),.7);
}
@media (pointer: fine) {
  .prof-card__img:hover .prof-insta { opacity: 1; pointer-events: auto; }
  .prof-insta { transition: opacity 0.35s ease, transform 0.2s ease; }
  .prof-insta:hover { transform: scale(1.15); }
}
@media (pointer: coarse) {
  .prof-insta { top: auto; bottom: 12px; }
  .prof-insta svg { filter: drop-shadow(0 0 12px rgba(var(--white-rgb),1)) drop-shadow(0 0 6px rgba(var(--white-rgb),1)) drop-shadow(0 0 3px rgba(var(--white-rgb),1)); }
  .prof-insta span { text-shadow: 0 0 14px rgba(var(--white-rgb),1), 0 0 7px rgba(var(--white-rgb),1), 0 0 3px rgba(var(--white-rgb),1); }
  .prof-card__img.insta-active .prof-insta { opacity: 1; pointer-events: auto; }
}

/* ---------- BAND ---------- */
.band-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.band-layout__img { border-radius: var(--radius); overflow: hidden; }
.band-layout__img a { display: block; position: relative; overflow: hidden; border-radius: var(--radius); }
.band-layout__img a::after { content: ''; position: absolute; inset: 0; background: rgba(var(--white-rgb),.08); opacity: 0; transition: opacity .4s ease; }
.band-layout__img a:hover::after { opacity: 1; }
.band-layout__img img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); }
.band-layout__img a:hover img { transform: scale(1.05); }
.band-layout__desc { color: rgba(var(--white-rgb),.8); line-height: 1.8; margin-top: 1.2rem; margin-bottom: 1rem; }
.band-layout__desc a { color: var(--gold-l); text-decoration: none; transition: color .2s ease, text-shadow .2s ease; }
.band-layout__desc a:hover { color: var(--white); text-shadow: 0 0 10px rgba(255,215,100,.6); }
.band-layout__tagline { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; color: var(--gold-l); margin-bottom: 2rem; }
@media (max-width: 768px) { .band-layout { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- SOIRÉES ---------- */
.soirees-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.soiree-card { background: rgba(var(--white-rgb),.08); border: 1px solid rgba(var(--white-rgb),.12); border-radius: var(--radius); overflow: hidden; transition: transform .5s var(--ease); }
.soiree-card:hover { transform: translateY(-8px); }
.soiree-card--highlight { background: rgba(var(--white-rgb),.15); border-color: rgba(var(--white-rgb),.25); }
.soiree-anim { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.soiree-anim__title {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
  color: var(--white); padding: 15px;
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 700;
  text-align: center; z-index: 10;
}
.soiree-card__body { padding: 1.5rem; }
.soiree-card__date { font-size: 1.05rem; color: var(--cream); font-weight: 700; margin-bottom: .3rem; }
.soiree-card__tag {
  font-size: .92rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terra-a); margin-bottom: .8rem; padding: .3rem .8rem;
  background: var(--cream); border-radius: var(--radius-full); display: inline-block;
}
.soiree-card__body p:last-child { color: var(--white); font-size: 1.08rem; line-height: 1.7; }
.soiree-card__body strong { color: var(--white); }
@media (max-width: 900px) { .soirees-grid { grid-template-columns: 1fr; } }

/* Moonrise */
.soiree-anim--moonrise { background: var(--teal); }
.night { position: relative; width: 68%; aspect-ratio: 1; }
.night::after { content: ''; position: absolute; left: 35%; width: 100%; height: 100%; background: var(--teal); border-radius: 100%; transform: scale(1.1); z-index: 2; }
.window { position: absolute; width: 100%; height: 100%; background: var(--white); border-radius: 100%; overflow: hidden; z-index: 1; }
.stars-container { position: absolute; width: 100%; height: 100%; animation: starSlide 30s linear infinite; }
.stars-container:nth-child(2) { left: 100%; }
.star-dot { position: absolute; width: 1px; height: 1px; background: var(--terra-a); }
.shooting-star { position: absolute; width: 26%; height: 2px; background: linear-gradient(90deg, var(--terra-a), transparent); opacity: 0; animation: shooting 5s linear infinite; }
@keyframes starSlide { to { transform: translateX(-100%); } }
@keyframes shooting { 0% { opacity: 0; transform: rotateZ(-30deg) translateX(0) scaleX(0); } 25% { opacity: 1; transform: rotateZ(-30deg) translateX(-200%) scaleX(1); } 50%,100% { opacity: 0; transform: rotateZ(-30deg) translateX(-400%) scaleX(2); } }

/* Eclipse */
.soiree-anim--eclipse { background: var(--eclipse-bg); }
.eclipse-container { position: relative; width: 68%; aspect-ratio: 1; }
.moon-eclipse { background: var(--white); width: 100%; height: 100%; border-radius: 50%; position: relative; }
.moon-eclipse::before { content: ''; background: var(--eclipse-bg); position: absolute; height: 100%; width: 100%; border-radius: 50%; z-index: 2; animation: eclipseMove 5s linear infinite alternate; }
@keyframes eclipseMove { 0% { transform: translate(-7.5%, 7.5%) scale(.95); } 50% { transform: translate(0,0) scale(1); box-shadow: 0 0 40px rgba(199,147,139,.6); } 100% { transform: translate(7.5%, -7.5%) scale(.95); } }

/* Sunset */
.soiree-anim--sunset { background: linear-gradient(to bottom, var(--sunset-top), var(--sunset-bot)); }
.sunset-container { position: relative; width: 100%; height: 100%; }
.moon-crescent { position: absolute; top: 15%; right: 20%; width: 38%; aspect-ratio: 1; z-index: 1; }
.moon-crescent svg { width: 100% !important; height: 100% !important; }
.mountains-svg-container { position: absolute; bottom: 0; left: 0; width: 200%; height: 85%; z-index: 2; animation: scrollMts 60s linear infinite; }
.mountains-svg-container svg { width: 50%; height: 100%; display: inline-block; }
@keyframes scrollMts { to { transform: translateX(-50%); } }

/* ---------- PLANNING ---------- */
.planning-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-around; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.day-card {
  background: var(--white); border-radius: 25px; padding: 30px 20px;
  flex: 1; min-width: 300px; max-width: 380px;
  box-shadow: 0 8px 25px rgba(var(--terra-a-rgb),.15);
  position: relative; overflow: hidden; transition: transform .3s;
}
.day-card:hover { transform: translateY(-10px); box-shadow: 0 12px 35px rgba(var(--terra-a-rgb),.25); }
.moon-phase { position: absolute; top: -40px; right: -40px; width: 150px; height: 150px; opacity: .08; }
.day-header { text-align: center; margin-bottom: 25px; }
.day-name { font-size: 28px; font-weight: bold; color: var(--terra-a); font-family: var(--f-display); }
.day-date { font-size: 16px; color: var(--muted); font-weight: 600; }
.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--terra-a), var(--terra-l)); border-radius: 3px; }
.event { position: relative; margin-bottom: 25px; }
.event::before { content: ''; position: absolute; left: -29.5px; top: 5px; width: 12px; height: 12px; background: var(--terra-a); border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--terra-a); }
.event.highlight { background: rgba(var(--teal-rgb),.05); padding: 15px; border-radius: var(--radius-sm); }
.event.highlight::before { top: 20px; background: var(--teal); box-shadow: 0 0 0 2px var(--teal), 0 0 10px rgba(var(--teal-rgb),.5); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); opacity: .8; } }
.event-time { font-size: 15px; font-weight: bold; color: var(--terra-a); margin-bottom: 5px; }
.event-title { font-size: 18px; font-weight: bold; color: var(--dark); margin-bottom: 5px; }
.event.highlight .event-title { color: var(--teal); }
.event-description { font-size: 15px; color: var(--muted); line-height: 1.5; }
.special-badge { display: inline-block; background: var(--terra-a); color: var(--white); padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: bold; margin-left: 8px; text-transform: uppercase; }
@media (max-width: 768px) { .planning-container { flex-direction: column; align-items: stretch; } .day-card { min-width: 100%; max-width: 100%; } }

/* ---------- COUNTDOWN ---------- */
.timers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.timer-card { text-align: center; }
.timer-icon { font-size: 60px; margin-bottom: 20px; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.timer-title { font-size: 32px; font-weight: bold; color: var(--terra-a); margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; position: relative; display: inline-block; font-family: var(--f-display); }
.timer-discount { position: absolute; top: -40px!important; right: -60px; background: var(--teal); color: var(--white); font-size: 16px; font-weight: bold; padding: 6px 14px; border-radius: 25px; transform: rotate(-8deg); animation: float 3s ease-in-out infinite; }
.timer-discount--special { background: linear-gradient(135deg, var(--terra-a), var(--terra-l)); right: -80px; top: 0; }
@keyframes float { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-5px); } }
.timer-display { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.timer-item { position: relative; width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer-item::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, var(--terra-a), var(--terra-l)); box-shadow: 0 8px 25px rgba(var(--terra-a-rgb),.3); }
.timer-value { position: relative; z-index: 1; font-size: 32px; font-weight: bold; color: var(--white); line-height: 1; margin-bottom: 5px; }
.timer-label { position: relative; z-index: 1; font-size: 11px; color: rgba(var(--white-rgb),.9); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.timer-card.completed { opacity: 0; transform: scale(.8); pointer-events: none; transition: all .5s; }
@media (max-width: 768px) { .timer-item { width: 80px; height: 80px; } .timer-value { font-size: 26px; } .timer-title { font-size: 26px; } }

/* ---------- NIVEAUX ---------- */
.niveaux-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.niveaux-grid--solo { grid-template-columns: repeat(3, 1fr); }
.niveau-card {
  background: rgba(var(--white-rgb),.1); border: 1px solid rgba(var(--white-rgb),.12);
  border-radius: var(--radius); padding: 2rem; text-align: center;
  transition: transform .5s var(--ease);
}
.niveau-card:hover { transform: translateY(-6px); }
.niveau-card img { width: 115px; height: 115px; object-fit: contain; margin: 0 auto 1.2rem; border-radius: 50%; }
.niveau-card h3 { font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; margin-bottom: .3rem; color: var(--white); }
.niveau-card__level { font-size: .96rem; color: var(--gold-l); font-weight: 600; margin-bottom: .8rem; }
.badge { background: rgba(var(--white-rgb),.2); color: var(--white); padding: .2rem .6rem; border-radius: var(--radius-full); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.niveau-card p { color: rgba(var(--white-rgb),.95); font-size: 1.08rem; line-height: 1.6; }
.niveau-card__included { margin-top: .8rem; font-size: .92rem !important; color: var(--cream) !important; }
@media (max-width: 1330px) { .niveaux-grid, .niveaux-grid--solo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .niveaux-grid, .niveaux-grid--solo { grid-template-columns: 1fr; } }

/* Nova image swap */
.niveau-img-swap { position: relative; width: 115px; height: 115px; margin: 0 auto 1.2rem; }
.niveau-img-swap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; transition: opacity 0.4s ease; }
.niveau-img-swap .nova-img-2 { opacity: 0; }
.niveau-card--nova:hover .nova-img-2,
.niveau-card--nova.nova-active .nova-img-2 { opacity: 1; }
.niveau-card--nova:hover .nova-img-1,
.niveau-card--nova.nova-active .nova-img-1 { opacity: 0; }

/* Ateliers & Balboa grids — flex pour centrer 1 ou N cartes */
.niveaux-grid--ateliers,
.niveaux-grid--balboa { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 600px; margin: 0 auto; }
.niveaux-grid--ateliers .niveau-card,
.niveaux-grid--balboa .niveau-card { flex: 0 0 260px; }

/* Pulsar blur (surprise) */
.niveau-card--blur .niveau-card__blurred { filter: blur(10px); -webkit-user-select: none; user-select: none; }
.blur-word { filter: blur(25px); -webkit-user-select: none; user-select: none; display: inline-block; }

/* ---------- PRIZES ---------- */
.carousel-container { position: relative; width: 100%; max-width: 900px; height: 420px; margin: 0 auto; perspective: 1000px; }
.carousel-glow { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(var(--terra-a-rgb),.15), transparent 70%); pointer-events: none; }
.carousel-orbit { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.prize-card { position: absolute; width: 220px; height: 300px; left: 50%; top: 50%; margin-left: -110px; margin-top: -150px; transition: transform .8s cubic-bezier(.4,0,.2,1), opacity .8s; cursor: pointer; }
.prize-card-inner { width: 100%; height: 100%; background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.08); display: flex; flex-direction: column; transition: box-shadow .4s; text-decoration: none; color: inherit; }
.prize-card.active .prize-card-inner { box-shadow: 0 0 0 2px var(--terra-a); }
.prize-rank { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,.3); pointer-events: none; }
.prize-card[data-rank="1"] .prize-rank { background: linear-gradient(135deg, #f7d774, #d4a84b, #c4963c); color: #3d2e0a; }
.prize-card[data-rank="2"] .prize-rank { background: linear-gradient(135deg, #d4d4d4, #a8a8a8); color: #2d2d2d; }
.prize-card[data-rank="3"] .prize-rank { background: linear-gradient(135deg, #d4956d, #b87333); color: #2d1810; }
.prize-image { width: 100%; aspect-ratio: 1; overflow: hidden; }
.prize-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.prize-card.active:hover .prize-image img { transform: scale(1.05); }
.prize-content { padding: 20px 16px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; background: var(--white); margin-top: -40px; padding-top: 50px; position: relative; }
.prize-content::before { content: ''; position: absolute; top: -40px; left: 0; right: 0; height: 50px; background: linear-gradient(to top, var(--white) 20%, transparent); pointer-events: none; }
.prize-label { font-size: .7rem; text-transform: uppercase; letter-spacing: 3px; color: var(--terra-a); margin-bottom: 6px; font-weight: bold; }
.prize-name { font-size: 1rem; color: var(--dark); line-height: 1.3; font-weight: 500; }
@media (max-width: 768px) { .carousel-container { height: 380px; } .prize-card { width: 180px; height: 260px; margin-left: -90px; margin-top: -130px; } }

/* ---------- INFOS ---------- */
.infos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.info-card { background: rgba(var(--white-rgb),.12); border: 1px solid rgba(var(--white-rgb),.15); border-radius: var(--radius); padding: 2.5rem; }
.info-card__icon { font-size: 2rem; margin-bottom: 1rem; }
.info-card h3 { font-family: var(--f-display); font-size: 1.65rem; font-weight: 700; color: var(--white); margin-bottom: .5rem; }
.info-card p { color: rgba(var(--white-rgb),.8); line-height: 1.7; }
.info-card__item { margin-top: .6rem; }
.info-card p a { color: rgba(var(--white-rgb),.9); text-decoration: underline; }
.info-card .btn { margin-top: 1.5rem; }
@media (max-width: 600px) { .infos-grid { grid-template-columns: 1fr; } }

/* ---------- EXTRAS ---------- */
/* Colonnes dynamiques selon le nombre de cartes via :has() */
.extras-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.extra-card {
  background: var(--white); border: 1px solid rgba(var(--terra-rgb),.1);
  border-radius: var(--radius); padding: 1.4rem 1.8rem;
  display: flex; align-items: center; gap: 1.5rem; text-align: left;
  transition: transform .5s var(--ease), box-shadow .3s;
}
.extra-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(var(--terra-rgb),.08); }
.extra-card__logo-link { display: block; flex-shrink: 0; width: 90px; height: 90px; }
.extra-card__logo { width: 90px; height: 90px; object-fit: contain; border-radius: var(--radius-sm); transition: transform .4s var(--ease); }
.extra-card__logo-link:hover .extra-card__logo { transform: scale(1.08); }
.extra-card h3 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 700; margin-bottom: .3rem; }
.extra-card p { color: var(--muted); font-size: 1.06rem; line-height: 1.6; }
@media (max-width: 768px) {
  .extra-card { display: grid; grid-template-columns: 90px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0.2rem 1rem; padding: 1.2rem; }
  .extra-card__logo-link { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .extra-card h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .extra-card p  { grid-column: 2; grid-row: 2; margin: 0; }
}
@media (max-width: 600px) { .extras-grid { grid-template-columns: 1fr; } }

/* ---------- BILLETTERIE ---------- */
.billetterie-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.billetterie-text { font-size: 1.3rem; color: rgba(var(--white-rgb),.8); }
.newsletter-form { margin-top: .5rem; }
.newsletter-hint { color: rgba(var(--white-rgb),.7); font-size: 1rem; margin-bottom: .8rem; }
.newsletter-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-form__row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.newsletter-input { padding: .85rem 1.4rem; border-radius: var(--radius-full); border: none; font-size: .9rem; min-width: 220px; background: rgba(var(--white-rgb),.15); color: var(--white); outline: none; transition: background .2s; }
.newsletter-input::placeholder { color: rgba(var(--white-rgb),.5); }
.newsletter-input:focus { background: rgba(var(--white-rgb),.25); }
.newsletter-msg { font-size: .88rem; margin-top: .75rem; min-height: 1.2em; }
.newsletter-msg--ok  { color: var(--newsletter-ok); }
.newsletter-msg--err { color: var(--newsletter-err); }
/* Desktop : caché (validation invisible, erreur gérée par le msg formulaire) */
.turnstile-badge { display: none; }
/* Mobile : inline juste sous l'email, disparaît une fois validé */
@media (pointer: coarse) {
  .turnstile-badge {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.6rem;
    transition: opacity 0.5s ease;
  }
  .turnstile-badge.is-verified { opacity: 0; pointer-events: none; }
}

/* ---------- FLOATING BUTTONS — DESKTOP ---------- */
.floating-buttons { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 200; display: flex; flex-direction: column; gap: .8rem; }
.floating-btn {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1.2rem; border-radius: var(--radius-full);
  font-family: var(--f-body); font-size: .82rem; font-weight: 600;
  border: none; cursor: none; transition: all .4s var(--ease);
  text-decoration: none; box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.floating-btn--subscribe { background: var(--terra); color: var(--white); }
.floating-btn--subscribe:hover { background: var(--terra-d); transform: scale(1.05); color: var(--white); }
.floating-btn--instagram { background: var(--white); color: var(--dark); border: 1px solid rgba(var(--terra-rgb),.1); }
.floating-btn--instagram:hover { border-color: var(--terra); color: var(--terra); }
@media (max-width: 768px) {
  .floating-buttons { display: none; }
}

/* ---------- BARRE MOBILE ---------- */
.mob-bar { display: none; }

@media (max-width: 768px) {

  .mob-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--white); border-top: 1px solid rgba(var(--terra-rgb),.12);
    padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom));
    align-items: center; justify-content: space-around;
    box-shadow: 0 -4px 24px rgba(0,0,0,.08);
  }

  /* Bouton générique de la barre */
  .mob-bar__btn {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    background: none; border: none; color: var(--terra-a);
    font-family: var(--f-body); font-size: .65rem; font-weight: 600;
    text-decoration: none; cursor: pointer; padding: .3rem .5rem;
    transition: color .3s, transform .3s var(--ease);
  }
  .mob-bar__btn:hover, .mob-bar__btn:active { color: var(--terra); transform: translateY(-2px); }

  /* Traits des icônes : épais, arrondis, couleur terra-a via currentColor */
  .mob-bar__btn svg path,
  .mob-bar__btn svg rect,
  .mob-bar__btn svg polyline,
  .mob-bar__btn svg ellipse,
  .mob-bar__btn svg circle:not([fill="currentColor"]) {
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* S'inscrire */
  .mob-bar__btn--subscribe { color: var(--terra-a); }
  .mob-bar__btn--subscribe span { font-size: .6rem; }

  /* Scroll top */
  @keyframes mob-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .mob-bar__btn--top { opacity: 0; pointer-events: none; transition: opacity .3s, color .3s; }
  .mob-bar__btn--top.visible { opacity: 1; pointer-events: all; animation: mob-bob 1.6s ease-in-out infinite; }

  /* Contact wrap */
  .mob-bar__contact-wrap { position: relative; }

  /* Popup contact */
  .mob-bar__contact-popup {
    position: absolute; bottom: calc(100% + .8rem); left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; gap: .5rem; align-items: center;
    pointer-events: none;
  }
  .mob-bar__popup-btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.15);
    opacity: 0; transform: translateY(12px) scale(.6);
    transition: background .3s;
  }
  .mob-bar__popup-btn--email { background: var(--terra); color: var(--white); transition-delay: .05s; }
  .mob-bar__popup-btn--phone { background: var(--teal); color: var(--white); }
  .mob-bar__popup-btn--email:hover { background: var(--terra-d); }
  .mob-bar__popup-btn--phone:hover  { background: var(--green-d); }

  /* Popup ouverte */
  .mob-bar__contact-popup.open { pointer-events: all; }
  .mob-bar__contact-popup.open .mob-bar__popup-btn {
    opacity: 1; transform: translateY(0) scale(1);
  }
  .mob-bar__contact-popup.open .mob-bar__popup-btn--email {
    transition: opacity .3s var(--ease) .06s, transform .35s var(--ease) .06s, background .3s;
  }
  .mob-bar__contact-popup.open .mob-bar__popup-btn--phone {
    transition: opacity .3s var(--ease) 0s, transform .35s var(--ease) 0s, background .3s;
  }

  /* Bouton contact actif */
  .mob-bar__btn--contact.active { color: var(--terra); }
  @keyframes starSpin { to { transform: rotate(360deg); } }
  .mob-bar__btn--contact.active svg { animation: starSpin .5s var(--ease) 1; }
}

/* ---------- SCROLL TO TOP ---------- */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--terra);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(var(--terra-rgb), 0.35);
}
.scroll-top svg {
  transition: transform 0.25s ease;
}
.scroll-top:hover svg {
  transform: translateY(-3px);
}
.scroll-top::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(var(--terra-rgb), 0.65);
  opacity: 0;
}
@keyframes scroll-top-pulse {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}
.scroll-top.visible::after {
  animation: scroll-top-pulse 2.5s ease-in-out infinite;
}

/* ---------- MENTIONS LÉGALES ---------- */
.page-mentions { background: var(--cream); }
.mentions { max-width: 760px; margin: 0 auto; padding: 6rem 2rem 5rem; }
.mentions h1 { font-family: var(--f-display); font-size: 2.2rem; color: var(--dark); margin-bottom: 2.5rem; }
.mentions h2 { font-family: var(--f-display); font-size: 1.1rem; color: var(--terra); margin: 2.2rem 0 .5rem; }
.mentions p, .mentions address { font-size: 1.02rem; line-height: 1.8; color: var(--dark); font-style: normal; margin-bottom: .4rem; }
.mentions a { color: var(--terra); text-decoration: underline; }
.mentions__back { font-size: .9rem; color: var(--terra); text-decoration: none; font-weight: 600; }
.mentions__back:hover { text-decoration: underline; }

/* ---------- FOOTER ---------- */
.footer { position: relative; z-index: 50; background: var(--dark); color: var(--cream); padding: var(--section-px); }
.footer__inner { max-width: var(--max-w); margin: 0 auto; }
.footer__content { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.footer__logo { font-family: var(--f-display); font-size: 1.45rem; font-weight: 700; color: var(--white); margin-bottom: .3rem; }
.footer__credit { font-size: .95rem; color: rgba(var(--white-rgb),.5); }
.footer__links { display: flex; gap: 2rem; }
.footer__links a { font-size: .95rem; color: rgba(var(--white-rgb),.5); }
.footer__links a:hover { color: var(--terra-l); }
.footer__copy { font-size: .85rem; color: rgba(var(--white-rgb),.3); }
@media (max-width: 600px) { .footer__content { flex-direction: column; gap: 1.5rem; } }

/* Intro section : contenu court → pas de min-height imposée, taille naturelle */
#presentation {
  min-height: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--beige) 35%);
}
#presentation .stack-section__content {
  padding-bottom: calc(var(--mt-h) * 0.55);
  position: relative;
  z-index: 1;
}

/* Vague terracotta animée — bord haut ondulé, gradient qui descend */
.intro-terra {
  position: absolute;
  top: calc(-1 * var(--mt-h) + 10px);
  left: 0; right: 0;
  height: calc(var(--mt-h) - 10vh);
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 769px) {
  .intro-terra { top: -80px; }
}
.intro-terra svg {
  width: 100%; height: 100%;
  display: block;
}
@media (max-width: 768px) {
  .intro-terra { height: 80vh; }  /* ajuste ce chiffre */
}
/* Vague terracotta animée en bas de la section planning */
.planning-terra {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  pointer-events: none;
  z-index: 0;
}
.planning-terra svg {
  width: 100%; height: 100%;
  display: block;
}

/* ============================================
   GALERIE PAGE
   ============================================ */

/* Annule le padding-right de la sidenav sur la page galerie */
@media (min-width: 769px) {
  .page-galerie { padding-right: 0 !important; }
}

/* Hero — sticky pour l'effet de stacking */
.gal-hero {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2rem var(--section-px) calc(var(--mt-h) * 0.7);
  text-align: center;
  background: var(--beige);
}

/* Contenu galerie — glisse par-dessus le hero */
.gal-content {
  position: relative;
  z-index: 2;
  background: var(--cream);
}

/* Montagne entre hero et galerie */
.gal-content__mountain {
  position: absolute;
  top: calc(-1 * var(--mt-h) + 2px);
  left: 0; right: 0;
  height: var(--mt-h);
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}
.gal-content__mountain svg { display: block; width: 100%; height: 100%; }
.gal-hero__logo {
  width: 280px; max-width: 60vw; height: auto; margin: 0 auto 2rem; display: block;
}
.gal-hero__title {
  font-family: var(--f-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  color: var(--terra);
  margin-bottom: 1rem;
}
.gal-hero__sub {
  font-size: 1.38rem;
  color: var(--muted);
}

/* Photos / Vidéos toggle */
.gal-toggle {
  display: flex; gap: 1rem; justify-content: center;
  padding: 1.5rem var(--section-px) 1rem;
  background: var(--cream);
}
.gal-toggle__btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1.8rem; border-radius: var(--radius-full);
  border: 2px solid rgba(var(--terra-rgb),.2);
  background: var(--white); color: var(--muted);
  font-family: var(--f-body); font-size: .95rem; font-weight: 600;
  cursor: none; transition: all .3s var(--ease);
}
.gal-toggle__btn:hover { border-color: var(--terra); color: var(--terra); }
.gal-toggle__btn--active { background: var(--terra); border-color: var(--terra); color: var(--white); }
.gal-toggle__btn--active:hover { background: var(--terra-d); border-color: var(--terra-d); }

/* Slider panels */
.gal-slider { position: relative; }
.gal-slider__panel { display: none; }
.gal-slider__panel--active { display: block; }

/* Filters — desktop : flex nowrap [back | groups | logo] */
.gal-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.6rem var(--section-px);
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(var(--cream-rgb), .9);
}

/* Retour accueil — bloc gauche */
.gal-filters__back {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--terra-a);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  padding: 0;
  transition: color 0.3s;
}
.gal-filters__back:hover { color: var(--terra-d); }
.gal-filters__back svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.8;
  transition: transform 0.3s;
}
.gal-filters__back:hover svg { transform: translateX(-3px); }

/* Topbar — transparent sur desktop (enfants directs du flex parent) */
.gal-filters__topbar { display: contents; }

/* Wrapper des groupes — bloc central, flex:1, wrappable */
.gal-filters__groups {
  order: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}

/* Bouton toggle filtre — caché sur desktop */
.gal-filter-toggle { display: none; }

/* Bouton appliquer — caché sur desktop */
.gal-filter-apply { display: none; }

/* Mini logo — bloc droit */
.gal-filters__logo {
  order: 2;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.gal-filters__logo img { height: 88px; width: auto; display: block; }
.gal-filters__logo.visible {
  opacity: 1;
  pointer-events: auto;
}

.gal-filters__group {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* Mobile — barre fixe + panneau filtres en tiroir */
@media (max-width: 768px) {
  .page-galerie .nav { display: none; }

  /* Barre principale (topbar) */
  .gal-filters {
    display: block;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
  }

  .page-galerie .gal-hero {
    padding-top: var(--gal-filter-h, 56px);
  }

  /* Topbar — devient une vraie barre flex */
  .gal-filters__topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem var(--section-px);
    background: rgba(var(--cream-rgb), .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .gal-filters__back { flex: 0 0 auto; }

  /* Bouton filtre ✦ — visible sur mobile */
  .gal-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--white);
    border: 1.5px solid rgba(var(--terra-rgb), .25);
    color: var(--muted);
    padding: .38rem .85rem;
    border-radius: var(--radius-full);
    font-family: var(--f-body);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s;
  }
  .gal-filter-toggle.active {
    border-color: var(--terra);
    color: var(--terra);
  }
  .gal-filter-toggle__count {
    display: none;
    background: var(--terra);
    color: var(--white);
    font-size: .68rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 0 .42rem;
    min-width: 1.3em;
    text-align: center;
  }
  .gal-filter-toggle__count.has-count { display: inline-block; }

  .gal-filters__logo {
    flex: 0 0 auto;
    margin-left: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .gal-filters__logo img { height: 52px; width: auto; }

  /* Panneau filtres — tiroir déroulant sous la topbar */
  .gal-filters__groups {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0;
    background: rgba(var(--cream-rgb), .97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
  }
  .gal-filters__groups.open {
    max-height: 70vh;
    padding: 0.75rem var(--section-px) 1rem;
    padding-bottom: 15px;
    overflow-y: auto;
  }
  .gal-filters__groups::-webkit-scrollbar { display: none; }
  .gal-filter-apply {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: .6rem 1rem;
    background: var(--terra);
    border: none;
    border-radius: var(--radius-full);
    color: var(--white);
    font-family: var(--f-body);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .05em;
    transition: background .2s;
  }
  .gal-filter-apply:hover { background: var(--terra-d); }

  .gal-filters__group {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image:         linear-gradient(to right, black 80%, transparent 100%);
  }
  .gal-filters__group::-webkit-scrollbar { display: none; }
}
.gal-filters__label {
  font-size: .94rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-right: .5rem;
}
.gal-filter {
  background: var(--white);
  border: 1.5px solid rgba(var(--terra-rgb),.15);
  color: var(--muted);
  padding: .45rem 1rem;
  border-radius: var(--radius-full);
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 500;
  cursor: none;
  transition: all .3s var(--ease);
}
.gal-filter:hover {
  border-color: var(--terra);
  color: var(--terra);
}
.gal-filter--active {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--white);
}
.gal-filter--active:hover {
  background: var(--terra-d);
  border-color: var(--terra-d);
  color: var(--white);
}

/* ---------- PAGINATION ---------- */
.gal-pagination-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1rem var(--section-px) 0;
  gap: 1rem;
}
.gal-pagination-top .gal-nav { grid-column: 2; display: flex; justify-content: center; }
.gal-pagination-top .gal-per-page { grid-column: 3; justify-self: end; }
.gal-nav { display: flex; justify-content: center; }
.gal-nav--bottom { padding: 0 var(--section-px) 2rem; display: flex; justify-content: center; }
.gal-nav__inner { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.gal-nav__btn {
  background: var(--white);
  border: 1.5px solid rgba(var(--terra-rgb),.15);
  color: var(--muted);
  padding: .4rem .75rem;
  border-radius: var(--radius-full);
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s;
  min-width: 2.2rem;
  text-align: center;
}
.gal-nav__btn:hover { border-color: var(--terra); color: var(--terra); }
.gal-nav__btn--active { background: var(--terra); border-color: var(--terra); color: var(--white); }
.gal-nav__btn:disabled { opacity: .35; pointer-events: none; }
.gal-nav__dots { color: var(--muted); padding: 0 .2rem; align-self: center; }
.gal-per-page { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.gal-per-page__label { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.gal-per-page__btn {
  background: var(--white);
  border: 1.5px solid rgba(var(--terra-rgb),.15);
  color: var(--muted);
  padding: .35rem .7rem;
  border-radius: var(--radius-full);
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s;
}
.gal-per-page__btn:hover { border-color: var(--terra); color: var(--terra); }
.gal-per-page__btn--active { background: var(--terra); border-color: var(--terra); color: var(--white); }
@media (max-width: 480px) {
  .gal-pagination-top { grid-template-columns: 1fr; }
  .gal-pagination-top .gal-nav { grid-column: 1; }
  .gal-pagination-top .gal-per-page { grid-column: 1; justify-self: center; }
}

/* Masonry Grid — CSS columns */
.gal-grid {
  padding: 2rem var(--section-px) 4rem;
  max-width: var(--max-w);
  margin: 0 auto;
  columns: 4;
  column-gap: 1rem;
}

/* Photographe filter — pill caché derrière le bouton */
.gal-photo-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Bouton photographe au-dessus du pill */
.gal-photo-btn-wrap > button {
  position: relative;
  z-index: 2;
}
/* Desktop : rotation */
.gal-filter--site-pill {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 1;
  transform-origin: top right;
  transform: rotate(15deg);
  opacity: 0;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  white-space: nowrap;
  background: var(--white);
  border-color: var(--terra);
  color: var(--terra);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1), opacity .15s;
}
.gal-filter--site-pill.visible {
  transform: rotate(-35deg);
  opacity: 1;
  pointer-events: auto;
}
.gal-filter--site-pill:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: white;
}
/* Mobile : glisse vers la droite sous le bouton, pas de rotation */
@media (max-width: 768px) {
  .gal-photo-btn-wrap {
    flex-wrap: nowrap;
    gap: 0;
  }
  .gal-filter--site-pill {
    position: static;
    transform: translateX(-12px);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  }
  .gal-filter--site-pill.visible {
    transform: translateX(6px);
    opacity: 1;
    pointer-events: auto;
  }
}
.gal-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: none;
  transition: transform .4s var(--ease);
}
.gal-item:hover {
  transform: scale(1.02);
}
.gal-item img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--gal-placeholder);
  transition: filter .4s, opacity .3s;
  opacity: 0;
}
.gal-item img.loaded {
  opacity: 1;
}
.gal-item:hover img {
  filter: brightness(.8);
}

/* Size variants for visual interest */
.gal-item--tall img { min-height: 400px; object-fit: cover; }
.gal-item--wide { column-span: all; }

/* Overlay on hover */
.gal-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem;
  background: linear-gradient(transparent 40%, rgba(var(--dark-rgb),.7));
  opacity: 0;
  transition: opacity .3s;
}
.gal-item:hover .gal-item__overlay { opacity: 1; }
.gal-item__alt {
  color: var(--white);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.4;
}
.gal-item__edition {
  color: var(--gold-l);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .3rem;
}

/* Video badge */
.gal-item__badge {
  position: absolute;
  top: .8rem;
  right: .8rem;
  background: rgba(var(--dark-rgb),.75);
  color: var(--white);
  font-size: .7rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  letter-spacing: .05em;
}

/* Empty state */
.gal-empty {
  text-align: center;
  padding: 4rem var(--section-px);
  color: var(--muted);
  font-size: 1.1rem;
}

/* Responsive grid */
@media (max-width: 1100px) { .gal-grid { columns: 3; } }
@media (max-width: 768px)  { .gal-grid { columns: 2; column-gap: .8rem; } }
@media (max-width: 480px)  { .gal-grid { columns: 1; } }

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(var(--dark-rgb), .95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.lightbox--open {
  opacity: 1;
  pointer-events: all;
}
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(var(--white-rgb),.1);
  border: none;
  color: var(--white);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: background .3s;
}
.lightbox__close:hover { background: rgba(var(--white-rgb),.2); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(var(--white-rgb),.1);
  border: none;
  color: var(--white);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: background .3s;
}
.lightbox__nav:hover { background: rgba(var(--white-rgb),.2); }
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }

.lightbox__content {
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--radius);
  object-fit: contain;
}
.lightbox__video {
  width: 80vw;
  max-width: 900px;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
}
.lightbox__video iframe {
  width: 100%;
  height: 100%;
}
.lightbox__caption {
  color: rgba(var(--white-rgb),.7);
  font-size: .9rem;
  margin-top: 1.5rem;
  text-align: center;
}

@media (max-width: 768px) {
  .lightbox__nav--prev { left: .5rem; }
  .lightbox__nav--next { right: .5rem; }
  .lightbox__video { width: 95vw; }
}

/* ============================================
   PADDING BAS PAR SECTION
   Ajuste --pb-extra pour chaque section
   indépendamment (desktop / mobile).
   Valeur = padding supplémentaire AU-DESSUS
   du padding de base (mountain height).
   ============================================ */

/* --- Desktop --- */
#band    { --section-minh: fit-content; }
#soirees { --section-minh: fit-content; }
#profs       .stack-section__content { --pb-extra: 30px; }
#band        .stack-section__content { --pb-extra: 40px; }
#soirees     .stack-section__content { --pb-extra: 80px; }
#planning    .stack-section__content { --pb-extra: 50px; }
#niveaux     .stack-section__content { --pb-extra: 50px; }
#prizes      .stack-section__content { --pb-extra: 50px; }
#infos       .stack-section__content { --pb-extra: 50px; }
#extras      .stack-section__content { --pb-extra: 50px; }
#billetterie .stack-section__content { --pb-extra: 50px; }

/* ── MOBILE : désactivation des animations coûteuses ── */
@media (max-width: 768px) {
  .prof-star4.bgFxPulse { animation: none; will-change: auto; }
  .parallax-layer        { will-change: auto; }
  .nav--scrolled         { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(var(--cream-rgb), .97); }
  .mobile-menu           { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hero__logo            { max-width: 92vw; }
}

/* ── ACCESSIBILITÉ : prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  #profs       .stack-section__content { --pb-extra: 30px; }
  #band        .stack-section__content { --pb-extra: 20px; }
  #soirees     .stack-section__content { --pb-extra: 30px; }
  #planning    .stack-section__content { --pb-extra: 150px; }
  #niveaux     .stack-section__content { --pb-extra: 130px; }
  #prizes      .stack-section__content { --pb-extra: 30px; }
  #infos       .stack-section__content { --pb-extra: 30px; }
  #extras      .stack-section__content { --pb-extra: 30px; }
  #billetterie .stack-section__content { --pb-extra: 30px; }
}

/* ─── PAGE LOADER ──────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
#page-loader.loader--hidden {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.loader-logo {
  width: 300px;
  max-width: 75vw;
  height: auto;
}
.loader-moon svg { width: 88px; height: 88px; }

/* ─── MOBILE REVEALS — CSS pur, zéro GSAP ─────────────────── */
@media (pointer: coarse) {
  [data-reveal-section],
  .soiree-card, .prof-card,
  .niveau-card, .extra-card, .info-card,
  .band-layout__img, .band-layout__content {
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .is-revealed { opacity: 1; }
}