/* ============================================================
   CATHERINE KELSEN — Pâtisserie d'art
   Design system + layout
   ============================================================ */

:root{
  /* Palette */
  --ivory: #f7f2ec;
  --ivory-2: #efe7dd;
  --paper: #fffdfa;
  --ink: #1c1a18;
  --ink-soft: #4a4540;
  --muted: #8a817a;
  --line: rgba(28,26,24,.14);

  --rose: #c98e8a;        /* blush accent */
  --rose-deep: #a96b66;
  --rose-soft: #f1ddd9;
  --gold: #b08b54;        /* awards / fine accent */

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --pad: clamp(20px, 5vw, 90px);
  --maxw: 1480px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--ink);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
section{ position:relative; }

/* ---------- Selection ---------- */
::selection{ background:var(--rose); color:#fff; }

/* ---------- Typography helpers ---------- */
.section-label{
  font-family:var(--sans);
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:500; margin-bottom:1.1rem;
}
.section-title{
  font-family:var(--display);
  font-weight:340;
  font-size:clamp(2.3rem, 5.6vw, 5rem);
  line-height:1.02;
  letter-spacing:-.01em;
}
.section-title em{ font-style:italic; color:var(--rose-deep); }
.section-intro{
  margin-top:1.4rem; max-width:46ch; color:var(--ink-soft);
  font-size:1.02rem;
}
.section-head{ margin-bottom:clamp(2.5rem,5vw,4.5rem); padding:0 var(--pad); }
.section-head--center{ text-align:center; }
.section-head--center .section-intro{ margin-inline:auto; }

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 2.2rem; border-radius:100px;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  transition:transform .5s var(--ease), background .4s, color .4s, border-color .4s;
  will-change:transform;
}
.btn--solid{ background:var(--ink); color:var(--ivory); }
.btn--solid:hover{ background:var(--rose-deep); transform:translateY(-3px); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-3px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--ink); margin-top:1.8rem;
}
.link-arrow span{ transition:transform .4s var(--ease); }
.link-arrow:hover span{ transform:translateX(8px); }

/* ============================================================
   PRELOADER — cinematic intro
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease);
}
body.is-loading{ overflow:hidden; height:100vh; }
.preloader.is-wipe{ clip-path:inset(0 0 100% 0); }
.preloader.is-done{ pointer-events:none; }

/* animated vertical stripes background (echo of the logo) */
.preloader__stripes{
  position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(90deg,
    transparent 0, transparent 46px,
    rgba(28,26,24,.05) 46px, rgba(28,26,24,.05) 48px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  animation:stripesShift 6s linear infinite;
}
@keyframes stripesShift{ to{ background-position:48px 0; } }

.preloader__center{ position:relative; z-index:2; text-align:center; }
.preloader__logo{ width:clamp(150px,20vw,220px); margin:0 auto 1rem; }
.preloader__img{
  width:100%; height:auto;
  clip-path:inset(0 0 100% 0); transform:scale(1.08);
  animation:plLogo 1.1s .15s var(--ease) forwards;
}
@keyframes plLogo{ to{ clip-path:inset(0 0 0 0); transform:scale(1); } }

.preloader__name{
  font-family:var(--display); font-weight:330; letter-spacing:.02em;
  font-size:clamp(1.6rem,4.5vw,2.8rem); line-height:1;
}
.preloader__name span{
  display:inline-block; opacity:0; transform:translateY(70%);
  animation:plLetter .65s var(--ease) forwards;
}
.preloader__name .sp{ width:.25em; }
.preloader__name span:nth-child(1){ animation-delay:.85s; }
.preloader__name span:nth-child(2){ animation-delay:.90s; }
.preloader__name span:nth-child(3){ animation-delay:.95s; }
.preloader__name span:nth-child(4){ animation-delay:1.00s; }
.preloader__name span:nth-child(5){ animation-delay:1.05s; }
.preloader__name span:nth-child(6){ animation-delay:1.10s; }
.preloader__name span:nth-child(7){ animation-delay:1.15s; }
.preloader__name span:nth-child(8){ animation-delay:1.20s; }
.preloader__name span:nth-child(9){ animation-delay:1.25s; }
.preloader__name span:nth-child(10){ animation-delay:1.30s; }
.preloader__name span:nth-child(11){ animation-delay:1.35s; }
.preloader__name span:nth-child(12){ animation-delay:1.40s; }
.preloader__name span:nth-child(13){ animation-delay:1.45s; }
.preloader__name span:nth-child(14){ animation-delay:1.50s; }
.preloader__name span:nth-child(15){ animation-delay:1.55s; }
.preloader__name span:nth-child(16){ animation-delay:1.60s; }
.preloader__tag{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--rose-deep); margin-top:.9rem; opacity:0;
  animation:fadeUp .8s 1.25s var(--ease) forwards;
}
@keyframes plLetter{ to{ opacity:1; transform:none; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.preloader__count{
  position:absolute; bottom:clamp(1.4rem,4vw,3rem); right:clamp(1.4rem,4vw,3rem); z-index:2;
  font-family:var(--display); font-weight:300; line-height:1;
  font-size:clamp(2.4rem,8vw,5rem); color:var(--ink); display:flex; align-items:baseline;
}
.preloader__count i{ font-style:normal; font-size:.4em; color:var(--rose-deep); margin-left:.15em; }


/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor, .cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; }
.cursor{
  width:7px; height:7px; background:var(--ink);
  transform:translate(-50%,-50%);
  transition:width .25s, height .25s, background .25s, opacity .3s;
}
.cursor-ring{
  width:42px; height:42px; border:1px solid rgba(28,26,24,.4);
  transform:translate(-50%,-50%);
  transition:width .4s var(--ease), height .4s var(--ease), border-color .4s, background .4s, opacity .3s;
  display:flex; align-items:center; justify-content:center;
}
.cursor-ring__label{
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  opacity:0; transition:opacity .3s; font-weight:500;
}
body.cursor-link .cursor{ opacity:0; }
body.cursor-link .cursor-ring{ width:64px; height:64px; background:var(--ink); border-color:var(--ink); }
body.cursor-view .cursor{ opacity:0; }
body.cursor-view .cursor-ring{ width:96px; height:96px; background:rgba(28,26,24,.92); border-color:transparent; }
body.cursor-view .cursor-ring__label{ opacity:1; }
@media (hover:none), (max-width:900px){ .cursor,.cursor-ring{ display:none; } }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--rose-deep); z-index:9997; transition:width .1s linear;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s;
}
.header.is-scrolled{
  background:rgba(247,242,236,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:.85rem var(--pad);
  box-shadow:0 1px 0 var(--line);
}
.header__brand{ display:flex; align-items:center; gap:.6rem; }
.header__logo{ height:64px; width:auto; transition:height .5s var(--ease); }
.header.is-scrolled .header__logo{ height:48px; }
.nav{ display:flex; gap:2.2rem; }
.nav a{
  position:relative; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:400; padding:.3rem 0; color:var(--ink);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.header__cta{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  padding:.7rem 1.6rem; border:1px solid var(--ink); border-radius:100px;
  transition:background .4s, color .4s;
}
.header__cta:hover{ background:var(--ink); color:var(--ivory); }

/* Burger */
.burger{ display:none; width:40px; height:40px; position:relative; z-index:950; }
.burger span{
  position:absolute; left:8px; width:24px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:23px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:920; background:var(--ivory);
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  clip-path:circle(0% at calc(100% - 38px) 38px);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
body.menu-open .mobile-menu{ clip-path:circle(150% at calc(100% - 38px) 38px); pointer-events:auto; }
.mobile-menu__nav{ display:flex; flex-direction:column; gap:.2rem; }
.mobile-menu__nav a{
  font-family:var(--display); font-weight:340; font-size:clamp(2rem,9vw,3rem);
  line-height:1.25; opacity:0; transform:translateY(20px);
}
body.menu-open .mobile-menu__nav a{ animation:fadeUp .6s var(--ease) forwards; }
body.menu-open .mobile-menu__nav a:nth-child(1){ animation-delay:.15s; }
body.menu-open .mobile-menu__nav a:nth-child(2){ animation-delay:.22s; }
body.menu-open .mobile-menu__nav a:nth-child(3){ animation-delay:.29s; }
body.menu-open .mobile-menu__nav a:nth-child(4){ animation-delay:.36s; }
body.menu-open .mobile-menu__nav a:nth-child(5){ animation-delay:.43s; }
body.menu-open .mobile-menu__nav a:nth-child(6){ animation-delay:.5s; }
.mobile-menu__foot{
  margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.4rem; color:var(--ink-soft);
}
.mobile-menu__foot a{ font-size:1.3rem; font-family:var(--display); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center;
  padding-bottom:clamp(96px,13vh,128px);
  background:
    radial-gradient(120% 90% at 50% 18%, var(--rose-soft) 0%, var(--ivory) 58%);
}

/* giant faint scrolling word behind everything */
.hero__word{
  position:absolute; top:50%; left:0; width:100%; transform:translateY(-58%);
  z-index:0; overflow:hidden; opacity:.05; pointer-events:none;
}
.marquee__track{
  display:flex; align-items:center; gap:1.4rem; white-space:nowrap; width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee__track--slow{
  animation-duration:48s; animation-direction:reverse;
  font-family:var(--display); font-weight:300;
  font-size:clamp(8rem,26vw,24rem); letter-spacing:.02em; color:var(--ink); gap:3rem;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* croissant visual */
.hero__visual{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
@media (min-width:861px){
  .hero__visual{ justify-content:flex-end; padding-right:clamp(1rem,5vw,7rem); }
}
.hero__halo{
  position:absolute; width:min(70vw,720px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(241,221,217,.55) 38%, transparent 68%);
  filter:blur(6px);
  animation:floaty 8s ease-in-out infinite;
}
.hero__tilt{ display:inline-block; transition:transform .35s var(--ease-out); transform-style:preserve-3d; will-change:transform; }
.hero__croissant{
  position:relative; width:min(44vw, 500px); aspect-ratio:4/5; object-fit:cover;
  border-radius:clamp(18px,2.6vw,34px);
  box-shadow:0 50px 90px -22px rgba(80,45,25,.42);
  animation:floatY 7s ease-in-out infinite;
  will-change:transform; opacity:0;
}
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-20px); } }
.hero__croissant.is-ready{ opacity:1; transition:opacity 1.1s ease; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-22px) rotate(2deg);} }

/* hero text */
.hero__content{ position:relative; z-index:3; padding:0 var(--pad); max-width:min(92vw,920px); }
.hero__eyebrow{ overflow:hidden; }
.hero__eyebrow span{
  display:inline-block; font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.hero__title{
  font-family:var(--display); font-weight:330; line-height:.96;
  font-size:clamp(3.1rem, 10vw, 9rem); letter-spacing:-.02em; margin:.6rem 0 1.5rem;
  text-shadow:0 2px 40px rgba(247,242,236,.7);
}
.hero__title .line{ display:block; overflow:hidden; padding:.02em .18em .16em 0; margin-bottom:-.14em; }
.hero__title em{ font-style:italic; }
.hero__sub{ max-width:34ch; color:var(--ink-soft); font-size:1.05rem; }
.hero__actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }

/* reveal-on-load for hero */
.hero__eyebrow span, .hero__title .line, .hero__sub, .hero__actions{
  transform:translateY(110%); opacity:0;
}
.hero__title .line{ transform:translateY(105%); }
.hero.is-in .hero__eyebrow span{ animation:heroUp .9s .1s var(--ease) forwards; }
.hero.is-in .hero__title .line:nth-child(1){ animation:heroUp 1s .25s var(--ease) forwards; }
.hero.is-in .hero__title .line:nth-child(2){ animation:heroUp 1s .38s var(--ease) forwards; }
.hero.is-in .hero__sub{ animation:heroUp .9s .55s var(--ease) forwards; }
.hero.is-in .hero__actions{ animation:heroUp .9s .68s var(--ease) forwards; }
@keyframes heroUp{ to{ transform:translateY(0); opacity:1; } }

/* visible infinite marquee band (bottom) */
.hero__marquee{
  position:absolute; left:0; bottom:0; width:100%; z-index:4;
  padding:.85rem 0; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(247,242,236,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  opacity:0; transform:translateY(20px);
}
.hero.is-in .hero__marquee{ animation:heroUp .9s .8s var(--ease) forwards; }
.hero__marquee .marquee__track{
  font-family:var(--display); font-style:italic; font-weight:340;
  font-size:clamp(1.05rem,2.1vw,1.6rem); color:var(--ink); gap:1.6rem;
  animation-duration:26s;
}
.hero__marquee .marquee__track i{ font-style:normal; color:var(--rose); font-size:.8em; }

.hero__scroll{
  position:absolute; bottom:clamp(74px,10vh,98px); left:50%; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.hero__scroll-line{ width:1px; height:40px; background:var(--ink); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; inset:0; background:var(--ivory);
  animation:scrolldown 2s var(--ease) infinite;
}
@keyframes scrolldown{ 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(100%);} }

/* ============================================================
   AWARDS
   ============================================================ */
.awards{ background:var(--ink); color:var(--ivory); }
.awards__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,5vw,4rem) var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center;
}
.award{ padding:1rem; }
.award + .award{ border-left:1px solid rgba(255,255,255,.14); }
.award__icon{ font-size:1.8rem; display:block; margin-bottom:.8rem; }
.award h3{ font-family:var(--display); font-weight:340; font-size:1.5rem; }
.award p{ color:rgba(247,242,236,.6); font-size:.85rem; letter-spacing:.04em; margin-top:.3rem; }

/* ============================================================
   INTRO
   ============================================================ */
.intro{ padding:clamp(5rem,11vw,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.intro__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.intro__lead{ font-family:var(--display); font-weight:340; font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.4; margin:1.6rem 0 1.2rem; }
.intro__text p{ color:var(--ink-soft); }
.intro__media .ph--tall{ aspect-ratio:3/4; }

/* ============================================================
   IMAGE PLACEHOLDERS
   ============================================================ */
.ph{
  position:relative; overflow:hidden; background:var(--ivory-2); border-radius:6px;
  width:100%; aspect-ratio:4/3;
}
.ph img{ width:100%; height:100%; object-fit:cover; object-position:50% var(--opy,50%); transition:transform 1.1s var(--ease); }
.ph::before{
  content:attr(data-label); position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1.2rem; color:var(--muted); font-size:.7rem; letter-spacing:.08em;
  background:
    repeating-linear-gradient(45deg, var(--ivory-2), var(--ivory-2) 12px, #e8dfd4 12px, #e8dfd4 24px);
}
.ph img{ position:relative; z-index:1; }
.ph--tall{ aspect-ratio:3/4; }
.ph--round{ aspect-ratio:1; border-radius:50%; }

/* ============================================================
   UNIVERS
   ============================================================ */
.univers{ padding:clamp(4rem,9vw,8rem) 0; }
.univers__grid{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem);
}
.univ-card{ display:flex; flex-direction:column; }
.univ-card .ph{ aspect-ratio:3/4; margin-bottom:1.3rem; }
.univ-card:hover .ph img{ transform:scale(1.06); }
.univ-card__body{ position:relative; }
.univ-card__num{ font-family:var(--display); font-style:italic; color:var(--rose); font-size:1rem; }
.univ-card h3{ font-family:var(--display); font-weight:360; font-size:1.55rem; margin:.2rem 0 .5rem; }
.univ-card p{ color:var(--ink-soft); font-size:.95rem; max-width:38ch; }
.univ-card--feature{ grid-column:span 1; }
.univ-card--feature .ph{ aspect-ratio:4/5; }
.univ-card__badge{
  display:inline-block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rose-deep); border:1px solid var(--rose); border-radius:100px;
  padding:.3rem .8rem; margin-bottom:.7rem; font-weight:500;
}

/* ============================================================
   TROMPE-L'ŒIL
   ============================================================ */
.trompe{
  padding:clamp(5rem,10vw,9rem) 0; background:var(--paper);
  overflow:hidden; position:relative;
}
.trompe__bg-word{
  position:absolute; top:7%; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-weight:300; white-space:nowrap;
  font-size:clamp(4rem,16vw,15rem); color:var(--ink); opacity:.04; pointer-events:none; z-index:0;
}
.trompe__layout{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,5rem); align-items:center;
}
/* slider */
.trompe__slider, .trompe__info{ min-width:0; }
.trompe__slider{ position:relative; }
.trompe__stage-glow{
  position:absolute; top:50%; left:50%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--rose-soft) 0%, transparent 64%); z-index:0; pointer-events:none;
}
.trompe__viewport{
  position:relative; z-index:1; overflow:hidden; border-radius:14px;
  cursor:grab; touch-action:pan-y;
}
.trompe__viewport:active{ cursor:grabbing; }
.trompe__track{ display:flex; will-change:transform; transition:transform .9s cubic-bezier(.16,1,.3,1); }
.trompe__slide{
  flex:0 0 100%; display:flex; align-items:center; justify-content:center; padding:1.2rem;
}
.trompe__slide .ph{
  width:min(420px,82%); aspect-ratio:1; border-radius:50%;
  box-shadow:0 34px 64px rgba(120,70,40,.22);
  transform:scale(.82); opacity:.35; transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
.trompe__slide.is-active .ph{ transform:scale(1); opacity:1; }
.trompe__slide .ph img{ pointer-events:none; }
/* arrows */
.trompe__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:52px; height:52px; border-radius:50%; background:var(--ivory); color:var(--ink);
  border:1px solid var(--line); display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(28,26,24,.12); transition:background .35s, color .35s, transform .35s;
}
.trompe__arrow:hover{ background:var(--ink); color:var(--ivory); }
.trompe__arrow--prev{ left:-6px; }
.trompe__arrow--next{ right:-6px; }
.trompe__arrow:disabled{ opacity:.3; pointer-events:none; }
/* info column */
.trompe__info{ display:flex; flex-direction:column; }
.trompe__caption{ margin-bottom:1.4rem; }
.trompe__index{ font-size:.78rem; letter-spacing:.2em; color:var(--rose-deep); }
.trompe__caption h3{ font-family:var(--display); font-weight:360; font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1.05; margin:.4rem 0 .2rem; }
.trompe__price{ color:var(--rose-deep); font-size:1.15rem; letter-spacing:.05em; }
.trompe__dots{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.trompe__dot{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .3s, transform .3s; padding:0; }
.trompe__dot.is-active{ background:var(--rose-deep); transform:scale(1.4); }
/* selector list */
.trompe__selector{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.trompe__opt{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem .4rem; border-bottom:1px solid var(--line);
  font-size:1.02rem; transition:padding .4s var(--ease), color .3s; position:relative;
  text-align:left; width:100%;
}
.trompe__opt-name{ font-family:var(--display); font-weight:360; transition:transform .4s var(--ease); }
.trompe__opt-name::before{
  content:""; display:inline-block; width:0; height:1px; background:var(--rose-deep);
  vertical-align:middle; margin-right:0; transition:width .4s var(--ease), margin .4s var(--ease);
}
.trompe__opt-price{ color:var(--muted); font-size:.92rem; white-space:nowrap; }
.trompe__opt:hover .trompe__opt-name,
.trompe__opt.is-active .trompe__opt-name{ color:var(--rose-deep); }
.trompe__opt.is-active .trompe__opt-name::before,
.trompe__opt:hover .trompe__opt-name::before{ width:26px; margin-right:14px; }
.trompe__opt.is-active{ padding-left:1.2rem; }
.trompe__opt.is-active .trompe__opt-price{ color:var(--rose-deep); }
.trompe__note{
  text-align:center; max-width:50ch; margin:3rem auto 0; padding:0 var(--pad);
  color:var(--muted); font-size:.85rem; font-style:italic; font-family:var(--display);
}

/* ============================================================
   BOX BRUNCH
   ============================================================ */
.brunch{ padding:clamp(5rem,10vw,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.brunch__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.brunch__media{ position:sticky; top:120px; }
.brunch__media .ph--tall{ aspect-ratio:3/4; }
.brunch__price-tags{ display:flex; gap:1rem; margin-top:1.2rem; flex-wrap:wrap; }
.price-tag{
  flex:1; min-width:140px; border:1px solid var(--line); border-radius:8px;
  padding:1rem 1.2rem; background:var(--paper);
}
.price-tag--alt{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.price-tag__label{ display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.price-tag--alt .price-tag__label{ color:rgba(247,242,236,.55); }
.price-tag__value{ font-family:var(--display); font-weight:340; font-size:2rem; }
.brunch__lead{ font-family:var(--display); font-weight:340; font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.45; margin:1.4rem 0 2rem; }
.brunch__list{ display:grid; grid-template-columns:1fr 1fr; gap:.1rem 2.5rem; margin-bottom:2.4rem; }
.brunch__list li{
  display:flex; align-items:baseline; gap:.8rem; padding:.7rem 0;
  border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.95rem;
}
.brunch__list li span{
  font-family:var(--display); color:var(--rose-deep); font-size:1rem; min-width:1.4em;
}
.brunch__list li em{ font-style:italic; color:var(--muted); }

/* ============================================================
   STATEMENT (cinematic)
   ============================================================ */
.statement{
  position:relative; overflow:hidden; background:var(--ink); color:var(--ivory);
  padding:clamp(5rem,13vw,11rem) var(--pad); text-align:center;
}
.statement__glow{
  position:absolute; top:50%; left:50%; width:120%; aspect-ratio:2/1; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(201,142,138,.32) 0%, transparent 60%);
  pointer-events:none; animation:glowPulse 8s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); } }
.statement__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; }
.statement .section-label{ color:var(--rose); }
.statement__title{
  font-family:var(--display); font-weight:330; letter-spacing:-.01em;
  font-size:clamp(2.4rem,6.5vw,6rem); line-height:1.04; margin:1rem 0 0;
}
.statement__title em{ font-style:italic; color:var(--rose); }
.statement__sub{ max-width:54ch; margin:2rem auto 0; color:rgba(247,242,236,.65); font-size:1.05rem; }

/* ============================================================
   GALERIE — horizontal pinned scroll (cinematic)
   ============================================================ */
.hgal{ position:relative; background:linear-gradient(180deg,var(--ivory) 0%, var(--paper) 100%); }
.hgal__pin{ padding:clamp(4rem,9vw,7rem) 0; }
.hgal__head{ max-width:var(--maxw); margin:0 auto 2.5rem; padding:0 var(--pad); }
.hgal__hint{ margin-top:1rem; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--rose-deep); }
.hgal__hint span{ display:inline-block; animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(8px); } }
.hgal__track{ display:flex; gap:clamp(1rem,2.2vw,2.2rem); padding:0 var(--pad); align-items:center; }
.hgal__item{ flex:0 0 auto; }
.hgal__item .ph{
  width:auto; height:clamp(300px,52vh,560px); border-radius:12px;
  box-shadow:0 30px 60px -28px rgba(80,45,25,.4); aspect-ratio:3/4;
  transform:scale(var(--hs,1)); transition:transform .45s var(--ease); transform-origin:center;
}
.hgal__item--mid .ph{ aspect-ratio:1/1; }
.hgal__item--sq .ph{ aspect-ratio:4/5; }
.hgal__item--tall .ph{ aspect-ratio:3/4; }
.hgal__item--up{ transform:translateY(-5vh); }
.hgal__item--down{ transform:translateY(5vh); }
.hgal__item .ph::after{
  content:""; position:absolute; inset:0; z-index:2; background:rgba(28,26,24,.18);
  opacity:0; transition:opacity .45s var(--ease);
}
.hgal__item:hover .ph::after{ opacity:1; }
.hgal__item:hover .ph img{ transform:scale(1.06); }
.hgal__item figcaption{
  margin-top:1rem; font-size:.82rem; letter-spacing:.04em; color:var(--ink-soft);
  display:flex; align-items:baseline; gap:.6rem;
}
.hgal__item figcaption span{ font-family:var(--display); font-style:italic; color:var(--rose-deep); }
.hgal__bar{ max-width:var(--maxw); margin:2.5rem auto 0; padding:0 var(--pad); }
.hgal__bar span{ display:block; height:2px; width:0; background:var(--rose-deep); transition:width .1s linear; }

/* DESKTOP: pin the section and scroll the track horizontally */
@media (min-width:861px){
  .hgal{ height:360vh; }
  .hgal__pin{
    position:sticky; top:0; height:100vh; overflow:hidden;
    display:flex; flex-direction:column; justify-content:center; padding:0;
  }
  .hgal__head{ position:absolute; top:clamp(80px,11vh,120px); left:0; right:0; margin:0 auto; z-index:3; }
  .hgal__track{ padding:0 var(--pad) 0 var(--pad); will-change:transform; }
  .hgal__bar{ position:absolute; bottom:7vh; left:0; right:0; }
  .hgal__bar::before{ content:""; position:absolute; left:var(--pad); right:var(--pad); top:0; height:2px; background:var(--line); }
  .hgal__bar span{ position:relative; margin:0 var(--pad); }
}

/* ============================================================
   SALON DE THÉ
   ============================================================ */
.salon{ padding:clamp(5rem,10vw,9rem) 0; background:var(--rose-soft); }
.salon__layout{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(2rem,6vw,6rem); align-items:start;
}
/* sticky pinned heading */
.salon__head{ position:sticky; top:clamp(90px,16vh,150px); align-self:start; }
.salon__head .link-arrow{ margin-top:1.6rem; }
/* staggered, varied-size gallery that scrolls past the pinned title */
.salon__gallery{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,2vw,1.4rem);
}
.salon__item{ overflow:hidden; border-radius:10px; }
.salon__item .ph{ height:100%; border-radius:10px; }
.salon__item:hover .ph img{ transform:scale(1.07); }
.salon__item--a .ph{ aspect-ratio:4/5; }
.salon__item--b{ margin-top:clamp(2rem,6vw,5rem); }
.salon__item--b .ph{ aspect-ratio:3/4; }
.salon__item--c .ph{ aspect-ratio:1/1; }
.salon__item--d{ margin-top:clamp(-1.5rem,-3vw,-1rem); }
.salon__item--d .ph{ aspect-ratio:3/4; }
.salon__item--e .ph{ aspect-ratio:3/4; }
.salon__item--f{ margin-top:clamp(1.5rem,4vw,3.5rem); }
.salon__item--f .ph{ aspect-ratio:4/5; }

/* ============================================================
   SOCIAL — Instagram + Facebook (live)
   ============================================================ */
.social{ padding:clamp(5rem,10vw,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.social__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); align-items:start; }
.social__card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.2rem,2.5vw,1.8rem); display:flex; flex-direction:column; gap:1.2rem;
}
.social__card--solo{ max-width:534px; margin:0 auto; padding:1rem 1rem 1.2rem; box-shadow:0 30px 70px -30px rgba(28,26,24,.25); }
.social__card--solo .social__card-head{ padding:.4rem .6rem 0; }
.social__actions{ display:flex; gap:1rem; justify-content:center; margin-top:2.2rem; flex-wrap:wrap; }
.social__card-head{ display:flex; align-items:center; gap:.9rem; }
.social__ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; flex-shrink:0; }
.social__ico--ig{ background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }
.social__ico--fb{ background:#1877f2; }
.social__card-id{ flex:1; min-width:0; }
.social__card-id h3{ font-family:var(--display); font-weight:360; font-size:1.4rem; line-height:1; }
.social__card-id a, .social__card-id span{ font-size:.86rem; color:var(--muted); }
.social__card-id a:hover{ color:var(--rose-deep); }
.social__live{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rose-deep); white-space:nowrap; }
.social__live::first-letter{ color:#e0344b; }
.social__feed--ig{
  height:560px; overflow-y:auto; overflow-x:hidden; border-radius:10px; background:var(--ivory-2);
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--rose) transparent;
}
.social__feed--ig::-webkit-scrollbar{ width:6px; }
.social__feed--ig::-webkit-scrollbar-thumb{ background:var(--rose); border-radius:6px; }
.ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; padding:.4rem; }
.ig-embed{ width:100%; height:100%; border:0; display:block; }
.social__cell{ aspect-ratio:1; border-radius:6px; overflow:hidden; }
.social__feed--ig .social__cell:hover img{ transform:scale(1.08); }
.social__feed--fb{ border-radius:10px; overflow:hidden; height:600px; background:transparent; display:flex; justify-content:center; }
.fb-embed{ width:100%; max-width:500px; height:600px; border:0; display:block; margin:0 auto; }
.social__btn{ align-self:flex-start; }

/* ============================================================
   VISITER
   ============================================================ */
.visiter{ padding:clamp(5rem,10vw,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.visiter__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.contact-block{ margin:2rem 0 2.6rem; }
.contact-block__addr{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:340; font-size:1.4rem; line-height:1.3;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:color .3s, border-color .3s;
}
.contact-block__addr svg{ color:var(--rose-deep); transition:transform .35s var(--ease); }
.contact-block__addr:hover{ color:var(--rose-deep); border-color:var(--rose-deep); }
.contact-block__addr:hover svg{ transform:translate(3px,-3px); }
.contact-block__tel{ display:block; font-size:1.2rem; margin:1rem 0 0; letter-spacing:.04em; transition:color .3s; }
.contact-block__tel:hover{ color:var(--rose-deep); }
.hours{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; border-top:1px solid var(--line); padding-top:2rem; }
.hours__col h4{ font-family:var(--display); font-weight:360; font-size:1.2rem; margin-bottom:1rem; }
.hours__col ul li{
  display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0;
  font-size:.9rem; border-bottom:1px solid var(--line);
}
.hours__col ul li span{ color:var(--ink-soft); }
.hours__col ul li em{ font-style:normal; color:var(--ink); white-space:nowrap; }
.visiter__map{ height:100%; min-height:420px; border-radius:8px; overflow:hidden; background:var(--ivory-2); }
.visiter__map iframe{ width:100%; height:100%; min-height:420px; border:0; filter:grayscale(.3) contrast(1.02); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--ivory); padding:clamp(3.5rem,7vw,6rem) var(--pad) 2.4rem; }
.footer__inner{
  max-width:760px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
}
.footer__logo{ width:150px; height:auto; filter:invert(1); }
.footer__tag{ font-family:var(--display); font-style:italic; font-size:1.15rem; color:rgba(247,242,236,.7); margin-top:-.6rem; }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.8rem; }
.footer__nav a{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(247,242,236,.82); transition:color .3s; }
.footer__nav a:hover{ color:var(--rose); }
.footer__contact{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.6rem; font-size:.98rem; }
.footer__contact a{ color:var(--ivory); transition:color .3s; }
.footer__contact a:hover{ color:var(--rose); }
.footer__sep{ color:rgba(247,242,236,.4); }
.footer__social{ display:flex; gap:1.4rem; }
.footer__social a{ font-size:.85rem; letter-spacing:.08em; color:rgba(247,242,236,.75); transition:color .3s; }
.footer__social a:hover{ color:var(--rose); }
.footer__rule{ width:100%; max-width:var(--maxw); height:1px; background:rgba(255,255,255,.14); margin:.4rem 0; }
.footer__bottom{
  width:100%; max-width:var(--maxw);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
}
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.6rem 1.4rem; }
.footer__legal-link{ font-size:.8rem; color:rgba(247,242,236,.7); transition:color .3s; letter-spacing:.02em; }
.footer__legal-link:hover{ color:var(--ivory); text-decoration:underline; }
.footer__credit{ font-size:.85rem; color:rgba(247,242,236,.65); text-align:center; white-space:nowrap; }
.footer__credit a{ color:var(--rose); transition:color .3s; }
.footer__credit a:hover{ color:#fff; text-decoration:underline; }
.footer__copy{ font-size:.8rem; color:rgba(247,242,236,.5); text-align:right; }

/* ============================================================
   MODALS
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:9990; display:flex; align-items:center; justify-content:center;
  padding:var(--pad); background:rgba(28,26,24,.55); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__panel{
  background:var(--ivory); border-radius:10px; max-width:640px; width:100%;
  max-height:84vh; overflow-y:auto; padding:clamp(1.8rem,4vw,3rem); position:relative;
  transform:translateY(20px); transition:transform .5s var(--ease);
}
.modal.is-open .modal__panel{ transform:none; }
.modal__close{ position:absolute; top:1rem; right:1.2rem; font-size:1.8rem; line-height:1; color:var(--muted); transition:color .3s; }
.modal__close:hover{ color:var(--ink); }
.modal__panel h3{ font-family:var(--display); font-weight:360; font-size:1.9rem; margin-bottom:1.4rem; }
.modal__body h4{ font-family:var(--display); font-weight:400; font-size:1.1rem; margin:1.4rem 0 .4rem; }
.modal__body p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:.5rem; }
.modal__body em{ color:var(--muted); }
.modal__body a{ color:var(--rose-deep); text-decoration:underline; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(var(--ry,52px)) scale(var(--rs,.97));
  transition:opacity 1s var(--ease-out), transform 1.15s var(--ease-out), filter 1s var(--ease-out);
  filter:blur(8px);
}
.reveal.is-visible{ opacity:1; transform:none; filter:blur(0); }
/* staggered vertical reveals for more movement (no horizontal shift = no overflow) */
.univers__grid .univ-card:nth-child(even){ --ry:96px; }
.univers__grid .univ-card:nth-child(odd){ --ry:48px; }
.salon__item{ --ry:90px; }
.salon__item--b, .salon__item--d, .salon__item--f{ --ry:140px; }
.galerie__grid .g-item:nth-child(2n){ --ry:110px; }
.galerie__grid .g-item:nth-child(3n){ --ry:150px; }
.brunch__media{ --ry:30px; }
.brunch__text{ --ry:80px; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }

/* ============================================================
   EXCITEMENT — floats, badge, kinetic bands, tilt
   ============================================================ */

/* floating pastry bubbles */
.hero__floats{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.floaty{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:var(--s);
  transform:translate(-50%,-50%) translate(var(--px,0px),var(--py,0px));
  transition:transform .5s var(--ease-out);
  will-change:transform;
}
.floaty img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  box-shadow:0 18px 40px rgba(120,70,40,.22), 0 0 0 6px rgba(255,255,255,.55);
  animation:bob 6s var(--t,0s) ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-18px) rotate(4deg); } }

/* spinning award badge */
.hero__badge{
  position:absolute; z-index:5; top:clamp(92px,12vh,140px); right:clamp(1rem,5vw,5rem);
  width:clamp(96px,11vw,140px); aspect-ratio:1; display:grid; place-items:center;
}
.hero__badge svg{ width:100%; height:100%; animation:spin 18s linear infinite; }
.hero__badge text{ font-family:var(--sans); font-size:13px; letter-spacing:1.5px; fill:var(--ink); text-transform:uppercase; font-weight:500; }
.hero__badge-star{
  position:absolute; font-size:1.5rem; color:var(--rose-deep);
  animation:spin 18s linear reverse infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* kinetic bands */
.band{
  overflow:hidden; padding:clamp(1.1rem,2.6vw,2.2rem) 0; background:var(--ivory);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.band--rose{ background:var(--rose-deep); border-color:transparent; }
.band__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content; white-space:nowrap;
  font-family:var(--display); font-weight:340; font-style:italic;
  font-size:clamp(2.2rem,7vw,5.5rem); color:var(--ink); line-height:1;
  animation:marquee 32s linear infinite;
}
.band[data-reverse] .band__track{ animation-direction:reverse; }
.band__track .outline{
  -webkit-text-stroke:1px var(--ink); color:transparent; font-style:normal;
}
.band--rose .band__track{ color:#fff; }
.band--rose .band__track .outline{ -webkit-text-stroke:1px rgba(255,255,255,.85); color:transparent; }
.band__track i{ font-style:normal; color:var(--rose); font-size:.5em; }
.band--rose .band__track i{ color:var(--rose-soft); }

/* 3D tilt + magnetic helpers */
.univ-card, .g-item{ transform-style:preserve-3d; transition:transform .4s var(--ease); }
.tilt-inner{ transition:transform .3s var(--ease); }
.btn, .header__cta{ will-change:transform; }

/* word-stagger reveal on titles */
.section-title .word{ display:inline-block; overflow:hidden; vertical-align:top; padding:.06em .04em .22em; margin:-.06em -.04em -.22em; }
.section-title .word > span{ display:inline-block; transform:translateY(115%); transition:transform .8s var(--ease); }
.reveal.is-visible .section-title .word > span,
.section-head.is-visible .section-title .word > span{ transform:translateY(0); }
.section-title .word > span{ transition-delay:calc(var(--wi,0) * .05s); }

/* parallax helper */
[data-parallax]{ will-change:transform; }

/* mobile sticky call/itinerary bar */
.mobile-cta{ display:none; }
@media (max-width:860px){
  .mobile-cta{
    display:flex; gap:.6rem; position:fixed; left:0; right:0; bottom:0; z-index:880;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(247,242,236,.92); backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    transform:translateY(120%); transition:transform .5s var(--ease);
  }
  .mobile-cta.is-shown{ transform:translateY(0); }
  .mobile-cta__btn{
    flex:1; text-align:center; padding:.85rem 1rem; border-radius:100px;
    font-size:.82rem; letter-spacing:.06em; font-weight:500;
    border:1px solid var(--ink); color:var(--ink);
  }
  .mobile-cta__btn--solid{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
  body{ padding-bottom:70px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav{ gap:1.5rem; }
  .univers__grid{ grid-template-columns:repeat(2,1fr); }
  .galerie__grid{ column-count:3; }
}

@media (max-width:860px){
  .nav, .header__cta{ display:none; }
  .burger{ display:block; }
  .header{ padding:1rem var(--pad); }

  /* mobile hero: croissant behind the headline, text on clean ground */
  .hero{ align-items:flex-end; padding-bottom:0; }
  .hero__content{ padding-bottom:12vh; }
  .hero__visual{ align-items:flex-start; justify-content:center; padding-top:13vh; }
  .hero__croissant{ width:min(70vw,340px); }
  .hero__halo{ display:none; }
  .hero__floats, .hero__badge{ display:none; }
  .band__track{ font-size:clamp(2rem,11vw,3.4rem); }
  .hero__sub{ max-width:30ch; }
  .hero__actions .btn{ width:100%; }
  .hero__actions{ width:100%; max-width:360px; }
  .intro__grid,
  .trompe__layout,
  .brunch__grid,
  .salon__layout,
  .visiter__grid{ grid-template-columns:1fr; }
  .brunch__media{ position:static; }
  .salon__head{ position:static; }
  .salon__item{ margin-top:0 !important; }
  .awards__inner{ grid-template-columns:1fr; gap:0; }
  .award + .award{ border-left:none; border-top:1px solid rgba(255,255,255,.14); }
  .award{ padding:1.6rem 1rem; }
  .social__grid{ grid-template-columns:1fr; }
  .salon__gallery{ grid-template-columns:repeat(2,1fr); }
  /* horizontal gallery → clean vertical stack on mobile (no horizontal slide) */
  .hgal{ height:auto !important; }
  .hgal__pin{ position:static; height:auto; overflow:visible; padding:clamp(3.5rem,9vw,5rem) 0; display:block; }
  .hgal__head{ position:static; }
  .hgal__hint{ display:none; }
  .hgal__track{ flex-direction:column; align-items:stretch; gap:1.2rem; transform:none !important; padding:0 var(--pad); }
  .hgal__item{ transform:none !important; }
  .hgal__item .ph{ width:100%; height:auto; aspect-ratio:4/5 !important; transform:none !important; }
  .hgal__bar{ display:none; }
  .footer__bottom{ grid-template-columns:1fr; gap:.9rem; }
  .footer__legal{ justify-content:center; }
  .footer__copy{ text-align:center; }
  .trompe__arrow{ display:none; }
  .trompe__viewport{ cursor:default; }
  .social__feed--ig{ height:auto; }
  .social__feed--fb, .fb-embed{ height:520px; }
  .brunch__media .ph--tall{ max-width:420px; }
  .trompe__stage{ order:-1; }
}

@media (max-width:560px){
  .univers__grid{ grid-template-columns:1fr; }
  .univ-card .ph, .univ-card--feature .ph{ aspect-ratio:4/3; }
  .brunch__list{ grid-template-columns:1fr; }
  .hours{ grid-template-columns:1fr; }
  .hero__title{ font-size:clamp(3rem,15vw,5rem); }
  .footer__nav{ gap:.5rem 1.1rem; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; filter:none !important; }
  .reveal .ph, .reveal.ph{ clip-path:none !important; }
  .section-title .word > span{ transform:none !important; }
}