:root {
  --cream: #FDF9EF;
  --blue: #B0D6F3;
  --blue-2: #C8E5FB;
  --black: #281D18;
  --yellow: #FCEFA3;
  --yellow-2: #FFF6C6;
  --brown: #855D3C;
  --orange-l: #FCD8C6;
  --orange-d: #C16E49;
  --line: rgba(40,29,24,.14);
  --muted: rgba(40,29,24,.62);
  --nav-h: 81px;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--cream);
  transition: opacity .5s ease, visibility .5s ease;
}
.site-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader-icon { width: min(220px, 60vw); height: auto; overflow: visible; }
.loader-wordmark { width: min(240px, 56vw); height: auto; opacity: .9; }

.loader-base { transform-box: fill-box; transform-origin: 50% 50%; animation: loader-base-breathe 2.6s ease-in-out infinite; }
.loader-clip-rect { transform-box: fill-box; transform-origin: 0% 50%; animation: loader-pipe-reveal 2.6s cubic-bezier(.65,0,.35,1) infinite; }
.loader-nozzle { transform-box: fill-box; animation: loader-nozzle-move 2.6s cubic-bezier(.65,0,.35,1) infinite; }

@keyframes loader-base-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
@keyframes loader-pipe-reveal {
  0%   { transform: scaleX(0); }
  55%  { transform: scaleX(1); }
  88%  { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes loader-nozzle-move {
  0%   { transform: translateX(0); opacity: 1; }
  55%  { transform: translateX(164px); opacity: 1; }
  58%  { opacity: 0; }
  100% { transform: translateX(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-base, .loader-clip-rect, .loader-nozzle { animation: none; }
  .loader-clip-rect { transform: scaleX(1); }
  .loader-nozzle { opacity: 0; }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(133,93,60,.28); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(133,93,60,.55); }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(133,93,60,.32) transparent; }

/* Scroll lock during loader */
body:has(#site-loader:not(.is-hidden)) { overflow: hidden; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cream);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}
.page-bg-photo { position: relative; }
.page-bg-photo::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(253,249,239, .55), rgba(253,249,239, .55)), var(--page-bg-photo);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: translateY(var(--bg-shift, 0px)) scale(1.15);
  transition: transform .15s ease-out;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .page-bg-photo::before { transform: none !important; transition: none; }
}
.page-home {
  background: radial-gradient(125% 125% at 50% 10%, #fff 40%, var(--blue) 100%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

.display {
  font-family: "Dela Gothic One", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.01em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--black);
}
.muted { color: var(--muted); }

.frame {
  border: clamp(14px, 3vw, 32px) solid var(--blue);
  border-radius: 24px;
}
.ph-photo {
  aspect-ratio: var(--ar, 1/1);
  border: 2px dashed var(--brown);
  border-radius: 16px;
  background: var(--orange-l);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--black);
  padding: 18px;
}
.ph-photo span { font-size: 12px; font-weight: 600; line-height: 1.5; }
.ph-photo small { display: block; margin-top: 4px; font-size: 10.5px; opacity: .75; }
.ph-photo.has-photo {
  border: clamp(14px, 3vw, 32px) solid var(--blue);
  background: none;
  padding: 0;
  overflow: hidden;
}
.ph-photo.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ph-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px dashed var(--brown);
  background: var(--yellow-2);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--black);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px;
  flex: 0 0 auto;
}
.ph-icon.has-photo { border: none; padding: 0; overflow: hidden; }
.ph-icon.has-photo img { width: 100%; height: 100%; object-fit: cover; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--black);
  color: var(--cream);
  border: 2px solid var(--black);
  transition: transform .25s cubic-bezier(.3,1.6,.4,1);
}
.btn:hover { transform: translateY(-3px); }
.btn-outline {
  background: transparent;
  color: var(--black);
}
.btn-toulong {
  padding: 22px 28px 13px;
  border-radius: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M6,98 Q2,98 2,94 L2,40 Q31.5,0 61,40 Q90.5,0 120,40 Q149.5,0 179,40 Q208.5,0 238,40 L238,94 Q238,98 234,98 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M6,98 Q2,98 2,94 L2,40 Q31.5,0 61,40 Q90.5,0 120,40 Q149.5,0 179,40 Q208.5,0 238,40 L238,94 Q238,98 234,98 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.section { padding: 100px 0; }
.section-photo { position: relative; isolation: isolate; overflow: hidden; }
.section-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(253,249,239, var(--bg-tint, .66)), rgba(253,249,239, var(--bg-tint, .66))), var(--bg-photo);
  background-size: var(--bg-photo-size, cover);
  background-position: var(--bg-photo-pos, center);
  background-repeat: no-repeat;
  -webkit-mask-image: var(--bg-mask, linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%));
  mask-image: var(--bg-mask, linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%));
  transform: translateY(var(--bg-shift, 0px)) scale(1.15);
  transition: transform .15s ease-out;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .section-photo::before { transform: none !important; transition: none; }
}
.section-head { max-width: 600px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: clamp(32px, 4.5vw, 50px); margin: 10px 0 0; }
.section-head p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; }

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* Grilles de cartes : légère cascade au lieu d'un bloc qui apparaît d'un
   coup — chaque carte de la même grille est indépendamment fade-up, avec
   un décalage croissant. S'applique aussi bien à l'entrée qu'à la sortie. */
.drinks-grid .drink-card:nth-child(2),
.parcours-grid .parcours-step:nth-child(2),
.actu-grid .actu-card:nth-child(2),
.menu-groups .menu-item:nth-child(2),
.b2b-photos .fade-up:nth-child(2),
.histoire-photos .fade-up:nth-child(2) { transition-delay: .07s; }
.drinks-grid .drink-card:nth-child(3),
.parcours-grid .parcours-step:nth-child(3),
.actu-grid .actu-card:nth-child(3),
.menu-groups .menu-item:nth-child(3),
.b2b-photos .fade-up:nth-child(3) { transition-delay: .14s; }
.drinks-grid .drink-card:nth-child(4),
.parcours-grid .parcours-step:nth-child(4),
.menu-groups .menu-item:nth-child(4) { transition-delay: .21s; }
.drinks-grid .drink-card:nth-child(5),
.parcours-grid .parcours-step:nth-child(5),
.menu-groups .menu-item:nth-child(5) { transition-delay: .28s; }
.parcours-grid .parcours-step:nth-child(6),
.menu-groups .menu-item:nth-child(6) { transition-delay: .35s; }
.menu-groups .menu-item:nth-child(7) { transition-delay: .4s; }
.menu-groups .menu-item:nth-child(8) { transition-delay: .45s; }

header.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253,249,239,.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px clamp(20px, 5vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo { display: flex; align-items: center; }
.logo img { height: 30px; width: auto; }
.nav-links {
  position: relative;
  display: flex;
  gap: 22px;
  font-size: 13px;
  font-weight: 600;
}
.nav-links a { position: relative; z-index: 2; transition: color .2s ease; }
.nav-links a:hover { text-decoration: underline; }
.nav-links a.active { color: var(--black); font-weight: 800; }
.nav-limelight {
  position: absolute;
  z-index: 1;
  left: -999px;
  bottom: -8px;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--orange-d);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--orange-d) 65%, transparent);
  pointer-events: none;
}
.nav-limelight.is-ready { transition: left .4s cubic-bezier(.4,0,.2,1); }
.nav-limelight::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 26px;
  transform: translate(-50%, 30%);
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--orange-d) 40%, transparent) 0%, transparent 72%);
  filter: blur(3px);
  pointer-events: none;
}
@media (max-width: 860px) {
  .nav-links { display: none; }
}

.hero {
  position: relative;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100vh - var(--nav-h));
  height: calc(100vh - var(--nav-h));
  perspective: 1100px;
  --mx: 50vw; --my: 45vh;
  --tilt-x: 0deg; --tilt-y: 0deg;
  --p1x: 0px; --p1y: 0px;
  --p2x: 0px; --p2y: 0px;
  --p3x: 0px; --p3y: 0px;
}
#shader-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
}
#bg-a, #bg-b {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity .9s ease;
  background: radial-gradient(ellipse at 50% 50%, var(--orange-l) 0%, var(--blue) 55%, var(--blue) 100%);
  mix-blend-mode: multiply;
  opacity: .35;
}
#bg-b { opacity: 0; }
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(40,29,24,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,29,24,.4) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(circle at 50% 48%, black 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 48%, black 0%, transparent 68%);
}
.slider { position: absolute; inset: 0; z-index: 4; }
.slide { position: absolute; inset: 0; pointer-events: none; }
.slide.active { pointer-events: auto; }
.slide.active .bowl-anim.has-photo { pointer-events: auto; }

.title-wrap {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.title-anim {
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(90px, 16vw, 260px);
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--black);
  opacity: .9;
}
.title-anim::after {
  content: attr(data-word);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 1px rgba(40,29,24,.2);
  color: transparent;
  opacity: .55;
  transform: translateY(10px);
}

.lens-stage {
  --w: clamp(410px, 68vw, 1040px);
  position: absolute;
  left: 50%; top: 45.5%;
  width: var(--w);
  height: calc(var(--w) / 3.2);
  transform: translate3d(-50%, -50%, 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  z-index: 5;
  pointer-events: none;
}
.lens-stage.is-expanded { width: min(var(--w), 64vh); height: min(var(--w), 64vh); }
.focus-lens {
  position: absolute;
  inset: 5%;
  border-radius: 28px;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.6), transparent 16%),
    radial-gradient(circle at 50% 65%, rgba(255,255,255,.22), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.05));
  border: 1px solid rgba(40,29,24,.16);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -40px 80px rgba(40,29,24,.05),
    0 40px 100px rgba(40,29,24,.16),
    0 0 90px color-mix(in srgb, var(--orange-d) 35%, transparent);
  opacity: .9;
  transform: translateZ(-40px) scale(.9);
}
.focus-lens::after {
  content: "";
  position: absolute;
  inset: -9%;
  border-radius: inherit;
  background: conic-gradient(from 120deg, transparent, rgba(255,255,255,.3), transparent 28%, color-mix(in srgb, var(--yellow) 50%, transparent), transparent 64%);
  filter: blur(16px);
  opacity: .85;
  animation: lensSpin 13s linear infinite;
  pointer-events: none;
}
@keyframes lensSpin { to { transform: rotate(360deg); } }

.bowl-wrap { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; transform-style: preserve-3d; }
.bowl-anim {
  --w: clamp(310px, 52vw, 780px);
  width: var(--w);
  height: calc(var(--w) / 3.2);
  border-radius: 22px;
  border: 2px dashed var(--brown);
  background: var(--orange-l);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  padding: 16px;
  filter: drop-shadow(0 30px 40px rgba(40,29,24,.18));
}
.bowl-anim small { display: block; margin-top: 4px; opacity: .75; }
.bowl-anim.has-photo {
  border: none;
  background: none;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  transition: transform .85s cubic-bezier(0.34,1.56,0.64,1), opacity .55s ease, filter .55s ease;
  filter: drop-shadow(0 30px 40px rgba(40,29,24,.28));
}
.bowl-anim.is-expanded { width: min(var(--w), 50vh); height: min(var(--w), 50vh); }
.bowl-anim.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.ring-label { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; transform: translateZ(60px); pointer-events: none; }
.orbit-text { width: 100%; height: 100%; opacity: .8; }
.orbit-text text { fill: var(--black); font-size: 8.8px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; }

.ingredient { position: absolute; z-index: 9; filter: drop-shadow(0 14px 18px rgba(40,29,24,.18)); will-change: transform, opacity; }
.ingredient svg { display: block; width: 100%; height: 100%; }
.ing-1 { top: 9%; left: 6%; width: clamp(60px, 7vw, 96px); transform: rotate(-20deg) translate3d(var(--p1x), var(--p1y), 90px); }
.ing-2 { top: 8%; right: 8%; width: clamp(54px, 6vw, 84px); transform: rotate(15deg) translate3d(var(--p2x), var(--p2y), 110px); }
.ing-3 { bottom: 18%; right: 20%; width: clamp(44px, 5vw, 70px); transform: rotate(-12deg) translate3d(var(--p3x), var(--p3y), 130px); }

.flavour-panel { position: absolute; left: 48px; bottom: 50px; z-index: 30; max-width: 380px; }
.flavour-panel h2 { margin: 0 0 9px; font-size: clamp(24px, 3vw, 36px); line-height: .9; font-family: "Dela Gothic One", sans-serif; }
.flavour-panel p { margin: 0; color: var(--black); opacity: .72; font-size: 13.5px; line-height: 1.7; }

.slide-nav { position: absolute; right: 48px; bottom: 50px; z-index: 50; display: flex; align-items: center; gap: 14px; }
.counter { min-width: 74px; font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--black); opacity: .6; }
.arrow-btn {
  width: 52px; height: 52px;
  border: 1px solid rgba(40,29,24,.22);
  border-radius: 999px;
  background: rgba(253,249,239,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center;
  transition: transform .25s ease, background .25s ease;
}
.arrow-btn:hover { transform: translateY(-4px) scale(1.04); background: var(--cream); }
.arrow-btn svg { width: 19px; height: 19px; color: var(--black); }

.vertical-index { position: absolute; left: 30px; top: 50%; z-index: 40; transform: translateY(-50%); display: grid; gap: 12px; }
.dot { width: 7px; height: 7px; border: 1px solid rgba(40,29,24,.4); border-radius: 999px; background: transparent; cursor: pointer; opacity: .6; transition: height .3s ease, background .3s ease, opacity .3s ease; }
.dot.active { height: 30px; background: var(--black); opacity: 1; }

.anim { opacity: 0; transition: transform .85s cubic-bezier(0.34,1.56,0.64,1), opacity .55s ease, filter .55s ease; will-change: transform, opacity, filter; }
.ingredient.anim { transition: transform .9s cubic-bezier(0.16,1,0.3,1), opacity .55s ease, filter .55s ease; }
.slide.active .title-anim   { opacity: .9; transform: translateX(0); filter: blur(0); }
.slide.active .bowl-anim    { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); filter: blur(0); }
.slide.active .content-anim { opacity: 1; transform: translateX(0); filter: blur(0); }
.slide.active .lens-anim    { opacity: .9; transform: translateZ(-40px) scale(.9); filter: blur(0); }
.slide.active .ring-anim    { opacity: .8; transform: scale(1); }
.slide.active .ing-1 { opacity: 1; transform: rotate(-20deg) translate3d(var(--p1x), var(--p1y), 90px); }
.slide.active .ing-2 { opacity: 1; transform: rotate(15deg) translate3d(var(--p2x), var(--p2y), 110px); }
.slide.active .ing-3 { opacity: 1; transform: rotate(-12deg) translate3d(var(--p3x), var(--p3y), 130px); }
.slide.active .title-anim   { transition-delay: 0s; }
.slide.active .content-anim { transition-delay: .04s; }
.slide.active .bowl-anim    { transition-delay: .07s; }
.slide.active .lens-anim    { transition-delay: .02s; }
.slide.active .ring-anim    { transition-delay: .12s; }
.slide.active .ing-1        { transition-delay: .3s; }
.slide.active .ing-2        { transition-delay: .38s; }
.slide.active .ing-3        { transition-delay: .46s; }

.slide.enter-right .title-anim   { opacity: 0; transform: translateX(60vw); filter: blur(12px); }
.slide.enter-right .bowl-anim    { opacity: 0; transform: translateX(66vw) rotate(30deg) scale(.7); filter: blur(18px); }
.slide.enter-right .content-anim { opacity: 0; transform: translateX(50vw); filter: blur(8px); }
.slide.enter-right .lens-anim    { opacity: 0; transform: translateZ(-40px) scale(.5); filter: blur(16px); }
.slide.enter-right .ring-anim    { opacity: 0; transform: scale(.6); }
.slide.enter-right .ing-1 { opacity: 0; transform: rotate(-20deg) translateY(-80vh); }
.slide.enter-right .ing-2 { opacity: 0; transform: rotate(15deg) translateY(-80vh); }
.slide.enter-right .ing-3 { opacity: 0; transform: rotate(-12deg) translateY(-80vh); }

.slide.enter-left .title-anim   { opacity: 0; transform: translateX(-60vw); filter: blur(12px); }
.slide.enter-left .bowl-anim    { opacity: 0; transform: translateX(-66vw) rotate(-30deg) scale(.7); filter: blur(18px); }
.slide.enter-left .content-anim { opacity: 0; transform: translateX(-50vw); filter: blur(8px); }
.slide.enter-left .lens-anim    { opacity: 0; transform: translateZ(-40px) scale(.5); filter: blur(16px); }
.slide.enter-left .ring-anim    { opacity: 0; transform: scale(.6); }
.slide.enter-left .ing-1 { opacity: 0; transform: rotate(-20deg) translateY(-80vh); }
.slide.enter-left .ing-2 { opacity: 0; transform: rotate(15deg) translateY(-80vh); }
.slide.enter-left .ing-3 { opacity: 0; transform: rotate(-12deg) translateY(-80vh); }

.slide.exit-left .title-anim, .slide.exit-left .bowl-anim, .slide.exit-left .content-anim, .slide.exit-left .lens-anim, .slide.exit-left .ring-anim {
  transition: transform .5s cubic-bezier(.4,0,1,1), opacity .4s ease-in, filter .35s ease-in;
}
.slide.exit-left .ingredient.anim { transition: transform .42s cubic-bezier(.4,0,1,1), opacity .32s ease-in, filter .32s ease-in; }
.slide.exit-left .title-anim   { opacity: 0; transform: translateX(-50vw); filter: blur(11px); }
.slide.exit-left .bowl-anim    { opacity: 0; transform: translateX(-55vw) rotate(-26deg) scale(.8); filter: blur(15px); }
.slide.exit-left .content-anim { opacity: 0; transform: translateX(-40vw); filter: blur(8px); }
.slide.exit-left .lens-anim    { opacity: 0; transform: translateX(-30vw) translateZ(-40px) scale(.46); filter: blur(20px); }
.slide.exit-left .ring-anim    { opacity: 0; transform: scale(.7); }
.slide.exit-left .ing-1 { opacity: 0; transform: rotate(-20deg) translateY(-100vh); }
.slide.exit-left .ing-2 { opacity: 0; transform: rotate(15deg) translateY(-100vh); }
.slide.exit-left .ing-3 { opacity: 0; transform: rotate(-12deg) translateY(-100vh); }

.slide.exit-right .title-anim, .slide.exit-right .bowl-anim, .slide.exit-right .content-anim, .slide.exit-right .lens-anim, .slide.exit-right .ring-anim {
  transition: transform .5s cubic-bezier(.4,0,1,1), opacity .4s ease-in, filter .35s ease-in;
}
.slide.exit-right .ingredient.anim { transition: transform .42s cubic-bezier(.4,0,1,1), opacity .32s ease-in, filter .32s ease-in; }
.slide.exit-right .title-anim   { opacity: 0; transform: translateX(50vw); filter: blur(11px); }
.slide.exit-right .bowl-anim    { opacity: 0; transform: translateX(55vw) rotate(26deg) scale(.8); filter: blur(15px); }
.slide.exit-right .content-anim { opacity: 0; transform: translateX(40vw); filter: blur(8px); }
.slide.exit-right .lens-anim    { opacity: 0; transform: translateX(30vw) translateZ(-40px) scale(.46); filter: blur(20px); }
.slide.exit-right .ring-anim    { opacity: 0; transform: scale(.7); }
.slide.exit-right .ing-1 { opacity: 0; transform: rotate(-20deg) translateY(-100vh); }
.slide.exit-right .ing-2 { opacity: 0; transform: rotate(15deg) translateY(-100vh); }
.slide.exit-right .ing-3 { opacity: 0; transform: rotate(-12deg) translateY(-100vh); }

@media (max-width: 760px) {
  .hero { min-height: 760px; height: calc(100svh - var(--nav-h)); }
  .title-anim { font-size: clamp(80px, 24vw, 130px); }
  .lens-stage { --w: min(80vw, 360px); top: 42%; }
  .bowl-anim { --w: min(70vw, 280px); }
  .flavour-panel { left: 18px; right: 18px; bottom: 96px; max-width: none; }
  .slide-nav { right: 18px; bottom: 24px; }
  .vertical-index { display: none; }
  .ing-1 { left: -4%; top: 14%; }
  .ing-2 { right: 0%; top: 12%; }
  .ing-3 { right: 4%; bottom: 30%; }

  .slide.enter-right .bowl-anim,
  .slide.enter-left .bowl-anim,
  .slide.exit-left .bowl-anim,
  .slide.exit-right .bowl-anim { filter: blur(0); }
}


.histoire-row {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.histoire-row .eyebrow { font-size: 14px; letter-spacing: .16em; }
.histoire-row h2 { font-size: clamp(34px, 4.6vw, 52px); margin: 0 0 18px; }
.histoire-row p { font-size: 17.5px; line-height: 1.75; margin: 0 0 22px; }
.histoire-mascot { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.histoire-mascot p { margin: 0; font-size: 13px; }
@media (max-width: 860px) {
  .histoire-row { grid-template-columns: 1fr; }
}

#carte { background: var(--blue-2); }
.menu-card {
  background: var(--cream);
  padding: clamp(24px, 4vw, 56px);
}
.menu-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 32px 48px;
}
.menu-item { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.menu-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.menu-item-name { font-weight: 800; font-size: 16px; }
.menu-item-price { font-weight: 800; font-size: 15px; color: var(--black); white-space: nowrap; }
.menu-item-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.55; }
.menu-note { margin: 28px 0 0; font-size: 12.5px; text-align: center; }
@media (max-width: 760px) {
  .menu-groups { grid-template-columns: 1fr; }
}

#gallery {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: rgba(40,29,24,0.45);
}
#gallery * { box-sizing: border-box; }
#gallery .gal-head { position: absolute; top: 54px; left: 0; right: 0; z-index: 10; text-align: center; pointer-events: none; }
#gallery .gal-head h2 { font-family: "Dela Gothic One", sans-serif; font-size: clamp(32px, 5vw, 54px); color: var(--black); }
#gallery .gal-head p { margin-top: 6px; font: 600 14px/1 Montserrat, sans-serif; color: var(--muted); transition: opacity .3s ease; }
#gallery .gal-head .gal-disclaimer { margin-top: 8px; font: 500 11.5px/1 Montserrat, sans-serif; opacity: .65; }
#gallery .grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(40,29,24,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,29,24,.04) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 120% at 50% 50%, #000 30%, transparent 78%);
}
#gallery .gal-spotlight {
  position: absolute; z-index: 0; pointer-events: none;
  width: 1100px; height: 1100px; border-radius: 50%;
  left: 0; top: 0; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(193,110,73,.1) 0%, transparent 60%);
}
#gallery canvas.gal-webgl { position: absolute; inset: 0; z-index: 1; display: block; transition: opacity .8s cubic-bezier(.3,.7,.2,1); }
@media (pointer: fine) {
  #gallery.gal-pointer-active, #gallery.gal-pointer-active * { cursor: none !important; }
  #gallery.gal-pointer-active #gal-dish, #gallery.gal-pointer-active #gal-dish * { cursor: auto !important; }
  #gallery.gal-pointer-active #gal-dish .gd-close { cursor: pointer !important; }
}
#gallery .gal-hotzone { position: absolute; top: 170px; bottom: 100px; left: 15%; right: 15%; z-index: 2; pointer-events: none; }
@media (max-width: 760px) { #gallery .gal-hotzone { top: 130px; bottom: 80px; left: 4%; right: 4%; } }
#gallery .gal-tooltip {
  position: absolute; z-index: 12; top: 0; left: 0;
  background: var(--black); color: var(--cream);
  border-radius: 12px; padding: 8px 16px;
  font: 700 13px/1 Montserrat, sans-serif;
  pointer-events: none;
  opacity: 0; transform: translate(-50%,-50%) scale(.7);
  transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.4,1);
  white-space: nowrap;
}
#gallery .gal-tooltip.is-visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }
#gal-dish {
  position: fixed; inset: 0; z-index: 10010;
  background: var(--cream);
  transform: translateY(102%);
  transition: transform .85s cubic-bezier(.7,0,.15,1);
  overflow-y: auto; overscroll-behavior: contain;
}
#gal-dish.is-open { transform: translateY(0); }
#gal-dish .gd-hero {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue), var(--orange-l));
  color: var(--black); font-weight: 700; text-align: center;
}
#gal-dish .gd-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,6,4,.78) 0%, rgba(8,6,4,.48) 42%, rgba(8,6,4,.28) 68%, rgba(8,6,4,.22) 100%);
}
#gal-dish .gd-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: blur(6px) saturate(1.1) brightness(.94); transform: scale(1.04); }
#gal-dish .gd-close {
  position: fixed; top: 22px; right: 22px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--black); color: var(--cream); font-size: 17px;
  display: grid; place-items: center;
  transition: transform .35s cubic-bezier(.3,1.6,.4,1);
}
#gal-dish .gd-close:hover { transform: scale(1.1) rotate(90deg); }
#gal-dish .gd-body {
  position: relative; z-index: 1; margin: 46vh 18px 18px;
  background: linear-gradient(135deg, rgba(186,219,247,.62), rgba(186,219,247,.42));
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 8px 40px rgba(8,6,4,.28), inset 0 1px 0 rgba(255,255,255,.35);
  color: var(--black); border-radius: 24px; padding: 50px clamp(24px, 9vw, 130px) 70px;
}
#gal-dish .gd-body h2 { font-family: "Dela Gothic One", sans-serif; font-size: 40px; text-shadow: 0 1px 12px rgba(255,255,255,.4); }
#gal-dish .gd-kicker {
  display: block;
  font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 14px;
}
#gal-dish .gd-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
#gal-dish .gd-head-row h2 { margin: 0; }
#gal-dish .gd-price {
  flex: 0 0 auto;
  background: var(--black); color: var(--cream);
  font-weight: 800; font-size: 17px;
  padding: 10px 18px; border-radius: 999px;
  white-space: nowrap;
}
#gal-dish .gd-compo-label {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(40,29,24,.55);
  margin-bottom: 12px;
}
#gal-dish .gd-compo {
  list-style: none; padding: 0; margin: 0 0 30px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
#gal-dish .gd-compo li {
  background: rgba(253,249,239,.6);
  border: 1px solid rgba(40,29,24,.16);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px; font-weight: 600;
  color: var(--black);
}
#gal-dish .gd-cta { display: inline-flex; }
@media (min-width: 761px) {
  #gal-dish .gd-body { width: 60%; margin-left: auto; margin-right: auto; }
}
#gal-cursor {
  position: fixed; z-index: 100; top: 0; left: 0;
  width: 30px; height: 30px; pointer-events: none;
  transition: transform .25s cubic-bezier(.3,1.5,.4,1);
  display: none;
}
#gal-cursor.is-shown { display: block; }
#gal-cursor.is-hover { transform: scale(1.55); }

.drinks-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 60px) 24px 80px;
}
.drinks-list { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.drinks-list span {
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.12;
  color: var(--black);
  cursor: default;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.9,.2,1), color .3s ease;
}
.drinks-list:hover span { color: rgba(40,29,24,.25); }
.drinks-list span:hover { color: var(--black); text-decoration: underline; }
.drinks-list span:nth-child(1) { transition-delay: 0ms, 0ms, 0s; }
.drinks-list span:nth-child(2) { transition-delay: 60ms, 60ms, 0s; }
.drinks-list span:nth-child(3) { transition-delay: 120ms, 120ms, 0s; }
.drinks-list span:nth-child(4) { transition-delay: 180ms, 180ms, 0s; }
.drinks-list span:nth-child(5) { transition-delay: 240ms, 240ms, 0s; }
.drinks-note { margin-top: 28px; font-size: 14px; color: var(--muted); }
.drinks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin-top: 36px; }
.drinks-grid-narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.drink-card {
  background: var(--cream);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  text-align: center;
  transition: transform .25s cubic-bezier(.3,1.6,.4,1);
}
.drink-card:hover { transform: translateY(-4px); }
.drink-card img { width: 100%; aspect-ratio: 3/4; object-fit: contain; margin: 0 auto 14px; }
.drink-card-name { font-weight: 800; font-size: 14px; }
.drink-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.drink-card-price { font-size: 13px; font-weight: 700; margin-top: 10px; }

.partner-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--cream);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 24px 28px;
  margin-top: 40px;
}
.partner-card img { width: 84px; height: 84px; object-fit: contain; flex-shrink: 0; }
.partner-card-text span.eyebrow { font-size: 12px; }
.partner-card h3 { margin: 8px 0 6px; font-size: 19px; }
.partner-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
@media (max-width: 560px) {
  .partner-card { flex-direction: column; text-align: center; }
}

#avis { background: var(--cream); }
.section-head .stars { font-size: 15px; vertical-align: -1px; }
.avis-scroll-outer {
  overflow: hidden;
  padding: 4px 0 18px;
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.avis-scroll {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: avisMarquee 75s linear infinite;
}
.avis-scroll:hover { animation-play-state: paused; }
@keyframes avisMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .avis-scroll { animation: none; overflow-x: auto; }
}
.avis-card {
  background: var(--blue-2);
  border-radius: 18px;
  padding: 24px;
  flex: 0 0 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.avis-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.avis-card .stars { color: #FBBC04; font-size: 14px; letter-spacing: 1px; }
.avis-card .quote { font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; flex: 1; }
.avis-card .who { font-size: 12.5px; font-weight: 700; margin: 0; }
@media (max-width: 860px) {
  .avis-card { flex: 0 0 84vw; }
}

.loc-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: stretch;
}
.loc-card { padding: clamp(24px, 4vw, 44px); background: var(--blue); }
.loc-card h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; }
.loc-card p { font-size: 15px; line-height: 1.7; margin: 0 0 8px; }
.hours { margin: 18px 0 14px; padding: 0; font-size: 15px; }
.hours-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.hours-row:last-child { border-bottom: 0; }
.hours dt { margin: 0; font-weight: 700; min-width: 92px; }
.hours dd { margin: 0 0 0 auto; color: var(--muted); white-space: nowrap; }
.hours-closed dt, .hours-closed dd { color: var(--orange-d); }
@media (max-width: 430px) {
  .hours { font-size: 13.5px; }
  .hours dt { min-width: 72px; }
  .hours-row { gap: 2px 8px; padding: 6px 0; }
}

.loc-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.loc-map { border-radius: 20px; overflow: hidden; border: 2px solid var(--blue); min-height: 320px; }
.loc-map iframe { width: 100%; height: 100%; border: 0; min-height: 320px; }
@media (max-width: 860px) {
  .loc-row { grid-template-columns: 1fr; }
}

.b2b-card { padding: clamp(24px, 4vw, 44px); background: var(--yellow-2); }
.b2b-card h2 { font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 14px; }
.b2b-card p { font-size: 15px; line-height: 1.7; margin: 0 0 18px; }
.b2b-tags { display: flex; flex-wrap: wrap; gap: 14px; }
.b2b-tag { display: inline-flex; padding: 11px 22px; border-radius: 999px; background: var(--cream); color: var(--black); font-size: 15.5px; font-weight: 700; border: 1.5px solid var(--line); }

.actu-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.actu-card { background: var(--blue-2); border-radius: 18px; padding: 24px; }
.actu-card .eyebrow { margin-bottom: 10px; }
.actu-card h3 { font-size: 18px; margin: 0 0 8px; }
.actu-card p { font-size: 13.5px; line-height: 1.55; margin: 0; }
.actu-empty { text-align: center; padding: 40px 20px; }
@media (max-width: 860px) {
  .actu-grid { grid-template-columns: 1fr; }
}

.parcours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.parcours-step { background: var(--blue-2); border-radius: 18px; padding: 24px 20px; }
.parcours-step .step-num { font-family: "Dela Gothic One", sans-serif; font-size: 26px; color: var(--black); opacity: .35; }
.parcours-step h3 { font-size: 15px; margin: 12px 0 6px; }
.parcours-step p { font-size: 12.5px; line-height: 1.55; margin: 0; color: var(--muted); }
@media (max-width: 860px) { .parcours-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .parcours-grid { grid-template-columns: 1fr; } }

.quote-block { max-width: 720px; margin: 0 auto; text-align: center; }
.quote-block blockquote { font-family: "Dela Gothic One", sans-serif; font-size: clamp(22px, 3vw, 32px); margin: 0; line-height: 1.3; }
.quote-block cite { display: block; margin-top: 14px; font-size: 13px; font-style: normal; color: var(--muted); }

.positioning-card { position: relative; overflow: hidden; background: var(--black); color: var(--cream); border-radius: 24px; padding: clamp(28px, 5vw, 56px); text-align: center; }
.positioning-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 56'%3E%3Crect x='10' y='28' width='120' height='20' rx='10' fill='none' stroke='%23FDF9EF' stroke-width='3'/%3E%3Cpath d='M14 30 Q24 10 34 26 Q44 8 54 24 Q64 9 74 25 Q84 8 94 24 Q104 10 114 26 Q120 18 126 28' stroke='%23FDF9EF' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 130px 52px;
}
.positioning-card > * { position: relative; z-index: 1; }
.positioning-card h2 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 16px; }
.positioning-card p { font-size: 15px; line-height: 1.7; max-width: 640px; margin: 0 auto; opacity: .85; }
.handwritten-wrap { position: relative; padding: 28px 36px; }
.handwritten-wrap > * { position: relative; z-index: 1; }
.handwritten-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.27, 1.11);
  pointer-events: none;
  z-index: 0;
}
.handwritten-path {
  fill: none;
  stroke: var(--brown);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.4s cubic-bezier(.43,.13,.23,.96) .15s;
}
.fade-up.in-view .handwritten-path { stroke-dashoffset: 0; }
.handwritten-elegant-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 48px);
  line-height: 1.55;
}
.handwritten-wrap .eyebrow { font-size: 18px; letter-spacing: .18em; }
.handwritten-wrap h2 { font-size: clamp(36px, 6.6vw, 74px); }
@media (min-width: 760px) {
  .handwritten-wrap h2 { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .handwritten-path { transition: none; stroke-dashoffset: 0; }
}

/* Bande pleine largeur fondue dans le footer (même marron) : plus de
   barre crème entre le dernier contenu et le footer */
.toulong-divider { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 56px 0 0; padding: 34px 20px 0; background: var(--black); }
.toulong-divider::before, .toulong-divider::after { content: ""; flex: 1; max-width: 110px; height: 1px; background: rgba(253,249,239,.28); }
.toulong-divider-icon { flex: 0 0 auto; width: 38px; height: auto; }

footer.site-footer {
  background: var(--black);
  color: var(--cream);
  overflow: hidden;
  padding-top: 50px;
}
.footer-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(253,249,239,.16);
  border-bottom: 1px solid rgba(253,249,239,.16);
  padding: 14px 0;
}
.footer-marquee-track {
  display: flex;
  width: max-content;
  gap: 22px;
  animation: marquee 24s linear infinite;
  font-family: "Dela Gothic One", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-marquee-track .dot { color: var(--orange-l); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .footer-marquee-track { animation: none; } }

.footer-giant {
  font-family: "Dela Gothic One", system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  font-size: 12.5vw;
  letter-spacing: -.02em;
  line-height: .82;
  color: rgba(253,249,239,.08);
  pointer-events: none;
  margin-top: 4px;
}
.footer-main {
  text-align: center;
  max-width: 640px;
  margin: -5.5vw auto 0;
  padding: 0 24px;
  position: relative;
}
.footer-runner { width: 58px; height: auto; margin: 0 auto 14px; filter: invert(1); opacity: .92; transform: rotate(-4deg); }
.footer-cta { font-size: clamp(28px, 4.5vw, 46px); margin: 0; }
.footer-pills { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 700;
  background: var(--cream);
  color: var(--black);
}
.footer-pill-outline {
  background: transparent;
  border: 1px solid rgba(253,249,239,.4);
  color: var(--cream);
}
.footer-bottom {
  position: relative;
  margin-top: 50px;
  padding: 22px clamp(20px, 6vw, 60px) calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(253,249,239,.16);
  font-size: 12px;
}
.footer-bottom a { color: inherit; opacity: .72; text-decoration: underline; transition: opacity .2s ease; }
.footer-bottom a:hover { opacity: 1; }
.footer-noxora {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none !important;
  opacity: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange-l);
}
.footer-noxora img { height: 24px; width: auto; }
.footer-noxora:hover { color: var(--orange-d); }

/* ── Pages texte (mentions légales, etc.) : colonne lisible ── */
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content h3 {
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 44px 0 14px;
}
.legal-content h3:first-child { margin-top: 0; }
.legal-content p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }
.legal-content strong { color: var(--black); }
.legal-content a { color: var(--brown); text-decoration: underline; }
@media (max-width: 760px) {
  .footer-giant { font-size: 13.5vw; }
  .footer-main { margin-top: -7vw; }
}

#ai-launcher {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}
#ai-launcher.is-hidden { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #ai-launcher { transition: none; } }
#ai-bubble {
  max-width: 220px;
  padding: 10px 16px;
  border-radius: 16px 16px 16px 4px;
  background: var(--black);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 12px 36px rgba(40,29,24,.3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(.92);
  transition: opacity .3s ease, transform .3s cubic-bezier(.3,1.6,.4,1);
  pointer-events: none;
}
#ai-bubble.is-shown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#ai-fab {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--orange-d);
  color: var(--cream);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 32px rgba(40,29,24,.35);
  border: 0;
  transition: transform .25s cubic-bezier(.3,1.6,.4,1);
}
#ai-fab:hover { transform: scale(1.08); }
#ai-fab svg, #ai-fab img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
#ai-launcher.is-open #ai-fab { display: none; }

#ai-panel {
  position: fixed;
  z-index: 10001;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  pointer-events: none;
  transition: opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1);
}
#ai-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
@media (min-width: 640px) {
  #ai-panel {
    inset: auto; bottom: 24px; left: 24px;
    width: 380px; height: 560px;
    border-radius: 20px;
    border: 2px solid var(--blue);
    box-shadow: 0 24px 80px rgba(40,29,24,.25);
  }
}
#ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  background: var(--blue);
}
#ai-head .ai-head-id { display: flex; align-items: center; gap: 10px; }
#ai-head .ai-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  color: var(--black);
  flex: 0 0 auto;
  overflow: hidden;
}
#ai-head .ai-avatar img { width: 100%; height: 100%; object-fit: cover; }
#ai-head .ai-name { font-size: 14px; font-weight: 800; }
#ai-head .ai-sub { font-size: 11px; color: var(--black); opacity: .7; }
#ai-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(40,29,24,.08); border: 0;
  display: grid; place-items: center;
  transition: background .25s ease;
}
#ai-close:hover { background: rgba(40,29,24,.16); }
#ai-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}
.ai-msg { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cream);
  flex: 0 0 auto;
  overflow: hidden;
}
.ai-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ai-msg-bubble {
  max-width: 88%;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
}
.ai-msg.assistant .ai-msg-bubble { background: var(--orange-l); border-left: 3px solid var(--orange-d); }
.ai-msg.user .ai-msg-bubble { background: var(--blue); }
.ai-msg-bubble strong { font-weight: 800; }
.ai-msg-bubble a { color: var(--black); border-bottom: 1px solid var(--black); }
.ai-msg-bubble a.ai-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 4px 0 0;
  padding: 7px 13px;
  border: none;
  border-radius: 999px;
  background: var(--orange-d);
  color: var(--cream);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.ai-msg-bubble a.ai-contact-btn:hover,
.ai-msg-bubble a.ai-contact-btn:active { background: var(--brown); }
.ai-msg-bubble a.ai-contact-btn svg { flex: 0 0 auto; }
.ai-cursor { display: inline-block; width: 6px; height: 14px; background: var(--orange-d); margin-left: 2px; vertical-align: middle; animation: aiBlink 1s steps(1) infinite; }
@keyframes aiBlink { 50% { opacity: 0; } }
.ai-typing { display: flex; gap: 4px; padding: 4px 0; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-d); animation: aiTyping 1.2s infinite; }
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aiTyping { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
#ai-form {
  flex: 0 0 auto;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: center;
}
#ai-input {
  flex: 1 1 auto;
  background: rgba(40,29,24,.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  color: var(--black);
  font-size: 13.5px;
  outline: none;
}
#ai-input:focus { border-color: var(--orange-d); }
#ai-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--orange-d);
  color: var(--cream);
  border: 0; display: grid; place-items: center;
  flex: 0 0 auto;
  transition: transform .2s ease, opacity .2s ease;
}
#ai-send:disabled { opacity: .35; }
#ai-send:not(:disabled):hover { transform: scale(1.08); }
#ai-credit { text-align: center; font-size: 10px; color: var(--muted); padding: 6px 0 0; }

.search-toggle {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--black);
  flex: 0 0 auto;
  transition: background .2s ease;
}
.search-toggle:hover { background: rgba(40,29,24,.06); }
.search-toggle svg { width: 18px; height: 18px; }

#search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  background: rgba(40,29,24,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  padding: 90px 20px 0;
}
#search-overlay.is-open { opacity: 1; pointer-events: auto; }
#search-panel {
  margin: 0 auto;
  max-width: 640px;
  background: var(--cream);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(40,29,24,.3);
  transform: translateY(-16px);
  opacity: 0;
  transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  overflow: hidden;
}
#search-overlay.is-open #search-panel { transform: translateY(0); opacity: 1; }
#search-bar { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
#search-bar svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
#search-input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font-size: 15px; font-family: Montserrat, sans-serif; color: var(--black); }
#search-close { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(40,29,24,.08); display: grid; place-items: center; flex: 0 0 auto; }
#search-results { max-height: 360px; overflow-y: auto; padding: 8px; }
.search-result { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; }
.search-result:hover { background: var(--blue-2); }
.search-result .sr-title { font-weight: 700; font-size: 14px; color: var(--black); }
.search-result .sr-type { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.search-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  #search-overlay { padding: 70px 14px 0; }
}

.social-tab {
  position: fixed;
  top: 40%;
  left: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 178px;
  height: 50px;
  padding: 0 16px;
  margin-left: -134px;
  border-radius: 0 999px 999px 0;
  background: var(--black);
  color: var(--cream);
  box-shadow: 0 10px 30px rgba(40,29,24,.25);
  transition: margin-left .4s cubic-bezier(.3,1,.4,1);
}
.social-tab:hover, .social-tab.is-open { margin-left: 0; }
.social-tab svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--orange-d); }
.social-tab span { font-size: 13px; font-weight: 700; white-space: nowrap; }
.social-tab-fb { top: calc(40% + 58px); }
.social-tab-tt { top: calc(40% + 116px); }
@media (prefers-reduced-motion: reduce) { .social-tab { transition: none; } }

/* ═══════════════════════════════════════════════════════════════
   OPTIMISATIONS MOBILE — n'affectent que les petits écrans
   (sauf html ci-dessous : même couleur que le fond existant,
   aucun changement visuel desktop)
   ═══════════════════════════════════════════════════════════════ */

/* Fond html + anti-rebond : les barres Safari iOS et l'overscroll
   prennent la couleur crème du site au lieu du blanc par défaut */
html {
  background-color: var(--cream);
  overscroll-behavior: none;
}
body { overscroll-behavior: none; }
/* Le fond html opaque passerait sinon devant le ::before en z-index:-1
   qui porte la fresque des pages page-bg-photo : isoler le body garde
   ce calque au-dessus du fond html. */
.page-bg-photo { isolation: isolate; }

/* Burger + menu mobile : inexistants sur desktop */
.nav-burger { display: none; }
#mobile-menu { display: none; }

@media (max-width: 860px) {

  /* ── Onglets sociaux : masqués (repris dans le menu burger) ── */
  .social-tab { display: none; }

  /* ── Nav compacte ── */
  /* Au-dessus du menu plein écran (10015) pour que le burger reste
     cliquable en X et referme le menu ; sous la recherche (10020) */
  header.site-nav { z-index: 10016; }
  .nav-row { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .logo img { height: 24px; }
  .search-toggle { display: none; }
  header.site-nav .btn-toulong {
    padding: 16px 14px 9px;
    font-size: 11px;
    letter-spacing: 0;
    transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s;
  }

  /* ── Bouton burger ── */
  /* Barres en position absolue : géométrie identique quel que soit le
     moteur de rendu, et croisement parfait en ✕ à l'ouverture */
  .nav-burger {
    display: block;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(253,249,239,.6);
    flex: 0 0 auto;
  }
  .nav-burger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: var(--black);
    transform: translate(-50%, -50%);
    transition: transform .3s cubic-bezier(.3,1.3,.4,1), opacity .2s ease;
  }
  .nav-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); }
  .nav-burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); }
  .nav-burger.is-open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

  /* ── Header figé pendant le menu ouvert ──
     Le header est en position:sticky, et le verrou de scroll (menu ouvert)
     passe le body en position:fixed avec un top négatif compensant le
     scroll. Safari iOS recalcule mal le sticky dans ce cas et le header
     "saute" à l'ouverture/fermeture : on le fige en position:fixed le
     temps du menu, exactement à la même place visuelle (top:0), donc
     aucun changement visible, juste plus de recalcul foireux. */
  body.menu-open header.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Le flou recalculé à chaque frame pendant que le menu (juste en
       dessous) change d'opacité coûte cher sur iOS Safari et peut faire
       sauter l'animation au lieu de la jouer. Inutile ici de toute façon :
       le menu est un fond opaque, rien à flouter derrière. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ── Menu mobile plein écran ── */
  #mobile-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 34px;
    position: fixed;
    inset: 0;
    z-index: 10015;
    padding: calc(var(--nav-h) + 20px) 24px calc(24px + env(safe-area-inset-bottom));
    background: var(--cream);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    /* Courbe "accélérée" pour la sortie : la même courbe ease-out que
       l'entrée, rejouée à l'envers, fait chuter l'opacité dès les 100
       premières ms puis traîne un long moment quasi invisible — ça se
       perçoit comme "pas d'animation, coupé sec". Ici le fondu est réparti
       sur toute la durée. */
    transition: opacity .3s cubic-bezier(.4,0,1,1), transform .32s cubic-bezier(.4,0,1,1);
    will-change: opacity, transform;
  }
  #mobile-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .32s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1);
  }
  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .mobile-menu-links a {
    font-family: "Dela Gothic One", system-ui, sans-serif;
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1;
    color: var(--black);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .26s cubic-bezier(.4,0,1,1), transform .28s cubic-bezier(.4,0,1,1);
  }
  #mobile-menu.is-open .mobile-menu-links a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
  }
  #mobile-menu.is-open .mobile-menu-links a:nth-child(1) { transition-delay: .05s; }
  #mobile-menu.is-open .mobile-menu-links a:nth-child(2) { transition-delay: .09s; }
  #mobile-menu.is-open .mobile-menu-links a:nth-child(3) { transition-delay: .13s; }
  #mobile-menu.is-open .mobile-menu-links a:nth-child(4) { transition-delay: .17s; }
  #mobile-menu.is-open .mobile-menu-links a:nth-child(5) { transition-delay: .21s; }
  #mobile-menu.is-open .mobile-menu-links a:nth-child(6) { transition-delay: .25s; }
  .mobile-menu-links a[aria-current="page"] {
    color: var(--orange-d);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
  .mobile-menu-social { display: flex; gap: 18px; }
  .mobile-menu-social a {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--black);
    color: var(--cream);
    display: grid;
    place-items: center;
  }
  .mobile-menu-social svg { width: 24px; height: 24px; color: var(--orange-d); }
  .mobile-menu-call { font-size: 14px; }

  /* ── Galerie produits : fiche Toulong ── */
  /* Fond sombre : le fond crème apparaissait en bande blanche sous la photo
     (le "fixed" du visuel se comporte en absolute à cause du transform parent) */
  /* z-index au-dessus du header (10016) sinon la nav recouvre le bouton ✕ */
  #gal-dish { background: #281D18; z-index: 10018; }
  /* Fiche fermée : invisible. Glissée à 102% sous l'écran, son haut (le ✕)
     réapparaissait quand la barre Safari se rétracte et agrandit la zone
     visible. visibility retardée pour laisser l'animation de fermeture finir. */
  #gal-dish:not(.is-open) {
    visibility: hidden;
    transition: transform .85s cubic-bezier(.7,0,.15,1), visibility 0s linear .85s;
  }
  #gal-dish .gd-close { top: calc(18px + env(safe-area-inset-top)); right: 18px; }
  /* Fiche moins zoomée : titres et texte ramenés à une échelle mobile.
     Tout doit tenir sans scroll même sur petit écran (SE, Android compact) :
     marge du haut plafonnée en px (pas juste en vh) et espacements resserrés. */
  #gal-dish .gd-body { margin-top: min(26vh, 190px); padding: 18px 20px 20px; }
  #gal-dish .gd-body h2 { font-size: 22px; line-height: 1.08; }
  #gal-dish .gd-kicker { font-size: 10px; margin-bottom: 6px; }
  #gal-dish .gd-head-row { margin-bottom: 10px; }
  #gal-dish .gd-price { font-size: 14px; padding: 7px 14px; }
  #gal-dish .gd-compo-label { margin-bottom: 8px; }
  #gal-dish .gd-compo { margin-bottom: 16px; gap: 7px; }
  #gal-dish .gd-compo li { font-size: 12px; padding: 7px 12px; }
  #gal-dish .gd-cta { width: 100%; justify-content: center; padding: 13px 26px 12px; }

  /* ── Entrée progressive de la fiche : carte, puis titre, puis le reste ── */
  #gal-dish .gd-body {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1);
  }
  #gal-dish .gd-body .gd-kicker,
  #gal-dish .gd-body .gd-head-row,
  #gal-dish .gd-body .gd-compo-label,
  #gal-dish .gd-body .gd-compo,
  #gal-dish .gd-body .gd-cta {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
  }
  #gal-dish.is-open .gd-body { opacity: 1; transform: translateY(0); transition-delay: .4s; }
  #gal-dish.is-open .gd-body .gd-kicker { opacity: 1; transform: translateY(0); transition-delay: .56s; }
  #gal-dish.is-open .gd-body .gd-head-row { opacity: 1; transform: translateY(0); transition-delay: .62s; }
  #gal-dish.is-open .gd-body .gd-compo-label { opacity: 1; transform: translateY(0); transition-delay: .74s; }
  #gal-dish.is-open .gd-body .gd-compo { opacity: 1; transform: translateY(0); transition-delay: .8s; }
  #gal-dish.is-open .gd-body .gd-cta { opacity: 1; transform: translateY(0); transition-delay: .92s; }
  @media (prefers-reduced-motion: reduce) {
    #gal-dish .gd-body,
    #gal-dish .gd-body .gd-kicker,
    #gal-dish .gd-body .gd-head-row,
    #gal-dish .gd-body .gd-compo-label,
    #gal-dish .gd-body .gd-compo,
    #gal-dish .gd-body .gd-cta { opacity: 1; transform: none; transition: none; }
  }

  /* ── Anti-zoom iOS : tout champ de saisie à 16px minimum ── */
  #ai-input, #search-input { font-size: 16px; }

  /* ── Fond html : crème par défaut ──
     Safari lit la couleur de la barre de statut/adresse sur la propriété
     background-color brute de html, pas sur le rendu réel de la page :
     un fond brun fixe ici faisait apparaître une barre brune en HAUT,
     y compris loin du footer. On garde crème en base, et c'est le
     script (site.js, scroll near bottom) qui bascule vers le brun
     juste avant d'atteindre le footer, comme pour la fiche produit. */
  html { background-color: var(--cream); }

  /* ── Chat IA : à droite + respecte l'encoche / barre du bas ── */
  #ai-launcher {
    bottom: calc(24px + env(safe-area-inset-bottom));
    left: auto;
    right: 24px;
    align-items: flex-end;
  }
  #ai-bubble { border-radius: 16px 16px 4px 16px; }

  /* Panneau chat plein écran : au-dessus du header (10016) sinon la nav
     recouvre son bouton de fermeture, et entrée en glissé du bas visible */
  #ai-panel {
    z-index: 10018;
    transform: translateY(9%);
    transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  }
  #ai-panel.is-open { transform: translateY(0); }
  #ai-head { padding-top: calc(16px + env(safe-area-inset-top)); }

  /* Menu ouvert : le bouton "Nous appeler" du header s'efface en fondu
     (le menu contient déjà l'appel avec le numéro complet).
     Pas de display:none — il tuerait la transition ; on garde la place
     du bouton pour que logo et burger ne bougent pas.
     Rattaché à #mobile-menu.is-open (bascule au clic, immédiat) plutôt
     qu'à body.menu-open (qui reste vrai 380ms de plus après la fermeture,
     le temps de laisser le header figé pendant le fondu de sortie) :
     sinon ce bouton restait invisible tout ce temps puis surgissait
     d'un coup une fois le menu déjà disparu. */
  header.site-nav:has(+ #mobile-menu.is-open) .btn-toulong {
    opacity: 0;
    transform: scale(.85);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
  }

  /* ── Fondu au scroll : départ plus doux et durée plus longue ── */
  .fade-up {
    transform: translateY(22px);
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  }
}

@media (max-width: 760px) {
  /* ── Titre géant du hero : tient dans l'écran au lieu d'être coupé
       ("FABRICATION", mot le plus long, cale la taille max) ── */
  .title-anim { font-size: clamp(30px, 9.6vw, 60px); }
  /* ── Hero : hauteur mini réaliste pour petits iPhone ── */
  .hero { min-height: 620px; }
}

/* ── Bandeau cookies ──
   En haut de l'écran (pas en bas) pour ne jamais chevaucher le chat
   "Petit Chef" ni le bouton d'appel du menu mobile, tous deux ancrés en bas. */
#cookie-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10020;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  background: var(--black);
  color: var(--cream);
  padding: 16px clamp(16px, 4vw, 40px) calc(16px + env(safe-area-inset-top)) clamp(16px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
#cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
#cookie-banner p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 640px; }
#cookie-banner p a { color: var(--cream); text-decoration: underline; }
#cookie-banner .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#cookie-banner button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid rgba(253,249,239,.3);
  background: transparent;
  color: var(--cream);
  transition: opacity .2s ease;
}
#cookie-banner button:hover { opacity: .75; }
#cookie-banner #cookie-accept {
  background: var(--cream);
  color: var(--black);
  border-color: var(--cream);
}
@media (max-width: 640px) {
  #cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  #cookie-banner .cookie-actions { justify-content: center; }
}