/* ============================================================
   CROUSTY FOOD — Landing Page
   Stylesheet principal
   Design : 1920x7560px (7 sections de 1920x1080px)
   Phase 1 : Desktop fixe 1920px
   ============================================================ */

@font-face {
  font-family: 'Pricedown';
  src: url('../fonts/Pricedown Bl.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pricedown Bl';
  src: url('../fonts/Pricedown Bl.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- CSS Variables ---- */
:root {
  --page-width: 1920px;
  --section-height: 1080px;
  --accueil-scroll-distance: 320vh;
  --color-bg-dark: #0d0b1a;
  --color-text-white: #ffffff;
  --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --transition-base: 300ms ease;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-bg-dark);
  color: var(--color-text-white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body.is-loading {
  overflow: hidden;
}

img {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

canvas {
  display: block;
}

/* ---- Loader ---- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background:
    radial-gradient(circle at center, rgba(51, 68, 111, 0.16) 0%, rgba(7, 5, 12, 0.92) 48%, rgba(4, 3, 8, 0.98) 100%);
  transition: opacity 500ms ease, visibility 500ms ease;
}

body.is-intro-ready #loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-brand img {
  width: 112px;
  height: auto;
}

.loader-track {
  width: 320px;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

#loader-bar {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #ffffff 0%, #8fb4ff 45%, #d4e3ff 100%);
  transition: width 180ms ease;
}

#loader-percent {
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

/* ---- Page wrapper ---- */
.page-wrapper {
  width: var(--page-width);
  margin: 0 auto;
  position: relative;
}

/* ---- Background (palmiers — pleine page) ----
   Image 420x1568 = version réduite de 1920x7560.
   On l'étire à 1920px de large et on repeat-y.        ---- */
.page-background {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--page-width);
  height: 100vh;
  background-image: url('../assets/background.png');
  background-repeat: repeat-y;
  background-size: var(--page-width) auto;
  background-position: top center;
  z-index: 0;
  pointer-events: none;
}

/* ---- Section générique ---- */
.section {
  position: relative;
  width: var(--page-width);
  min-height: var(--section-height);
  z-index: 1;
}


/* ============================================================
   SECTION 1 — ACCUEIL (HERO)
   ============================================================ */

.section-accueil {
  min-height: calc(var(--section-height) + var(--accueil-scroll-distance));
  overflow: visible;
}

.section-accueil__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #050409;
}

.section-accueil__scroll-track {
  height: var(--accueil-scroll-distance);
}

.hero-standalone {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

.hero-standalone__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(7, 5, 12, 0) 0%, rgba(7, 5, 12, 0.1) 34%, rgba(7, 5, 12, 0.46) 100%),
    linear-gradient(180deg, rgba(4, 3, 7, 0.78) 0%, rgba(4, 3, 7, 0.08) 28%, rgba(4, 3, 7, 0.44) 100%);
}

.hero-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255, 255, 255, 0.88);
  animation: hero-scroll-pulse 1.6s ease-in-out infinite;
}

.hero-scroll-indicator__label {
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.hero-scroll-indicator__arrow {
  position: relative;
  width: 1px;
  height: 58px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.hero-scroll-indicator__arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.95);
  transform: translateX(-50%) rotate(45deg);
}

@keyframes hero-scroll-pulse {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.72;
  }
  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 1;
  }
}

.canvas-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 1;
  overflow: hidden;
  clip-path: circle(78% at 50% 54%);
  will-change: clip-path;
}

.canvas-fallback,
#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.canvas-fallback {
  object-fit: cover;
  opacity: 1;
  transition: opacity 240ms ease;
}

body.is-canvas-ready .canvas-fallback {
  opacity: 0;
}

#dark-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(4, 3, 7, 0.9);
  pointer-events: none;
  opacity: 0.34;
}

/* -- Ellipses lumière -- */
.section-accueil__light-purple {
  position: absolute;
  left: -305px;
  top: 266px;
  width: 887px;
  height: 795px;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.section-accueil__light-purple img { width: 100%; height: 100%; object-fit: fill; }

.section-accueil__light-blue {
  position: absolute;
  left: 1177px;
  top: 300px;
  width: 788px;
  height: 795px;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.section-accueil__light-blue img { width: 100%; height: 100%; object-fit: fill; }

/* -- Navigation -- */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 230px;
  z-index: 10;
}

.navbar__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.navbar__link {
  position: absolute;
  cursor: pointer;
  transition: transform var(--transition-base), filter var(--transition-base);
}
.navbar__link:hover { transform: scale(1.05); filter: brightness(1.2); }
.navbar__link:active { transform: scale(0.97); }
.navbar__link img { width: 100%; height: 100%; object-fit: contain; }

.navbar__link--accueil    { left: 109px;  top: 74px; width: 207px; height: 77px; }
.navbar__link--notre-carte { left: 429px;  top: 74px; width: 349px; height: 77px; }
.navbar__link--commander  { left: 1141px; top: 74px; width: 324px; height: 77px; }
.navbar__link--autre      { left: 1596px; top: 74px; width: 161px; height: 77px; }

/* -- Logo -- */
.navbar__logo-bg {
  position: absolute;
  left: 865px;
  top: 23px;
  width: 181px;
  height: 181px;
  z-index: 10;
  pointer-events: none;
}
.navbar__logo-bg img { width: 100%; height: 100%; object-fit: contain; }

.navbar__logo {
  position: absolute;
  left: 865px;
  top: 23px;
  width: 189px;
  height: 189px;
  z-index: 11;
  cursor: pointer;
  transition: transform var(--transition-base);
}
.navbar__logo:hover { transform: scale(1.06); }
.navbar__logo img { width: 100%; height: 100%; object-fit: contain; }


/* ============================================================
   SECTION 2 — CARTE DES CROUSTY (CARROUSEL)
   Frame Figma Y global: 1080 → 2160
   Y relatif = Y_figma - 1080
   ============================================================ */

.section-crousty {
  height: var(--section-height);
  overflow: visible;
}

/* ---- Slides system ---- */
.crousty-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.crousty-slide--active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Éléments positionnés dans chaque slide ---- */

/* Ellipse fond (glow) */
.section-crousty__light-fond {
  position: absolute;
  left: 453px;
  top: 156px;
  width: 1036px;
  height: 864px;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}
.section-crousty__light-fond img { width: 100%; height: 100%; object-fit: fill; }

/* Titre */
.section-crousty__title {
  position: absolute;
  left: 59px;
  top: 87px;
  width: 546px;
  height: 154px;
  z-index: 5;
}
.section-crousty__title img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Prix */
.section-crousty__price {
  position: absolute;
  left: 67px;
  top: 260px;
  width: 300px;
  height: 154px;
  z-index: 5;
}
.section-crousty__price img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Plat central */
.section-crousty__dish {
  position: absolute;
  left: 350px;
  top: 170px;
  width: 1220px;
  height: 810px;
  z-index: 4;
}
.section-crousty__dish img { width: 100%; height: 100%; object-fit: contain; }

/* Glow du bouton COMMANDEZ */
.section-crousty__btn-glow {
  position: absolute;
  left: 742px;
  top: 909px;
  width: 435px;
  height: 112px;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
}
.section-crousty__btn-glow img { width: 100%; height: 100%; object-fit: fill; }

/* Bouton COMMANDEZ */
.section-crousty__btn-commander {
  position: absolute;
  left: 751px;
  top: 920px;
  width: 417px;
  height: 94px;
  z-index: 7;
  cursor: pointer;
  transition: transform var(--transition-base), filter var(--transition-base);
}
.section-crousty__btn-commander:hover  { transform: scale(1.05); filter: brightness(1.15); }
.section-crousty__btn-commander:active { transform: scale(0.97); }
.section-crousty__btn-commander img { width: 100%; height: 100%; object-fit: contain; }

/* Liste ingrédients */
.section-crousty__ingredients {
  position: absolute;
  left: 1451px;
  top: 691px;
  width: 364px;
  height: 288px;
  z-index: 5;
}
.section-crousty__ingredients img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Éléments fixes (partagés entre slides) ---- */

/* Flèches */
.section-crousty__arrow {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 20;
  cursor: pointer;
  transition: transform var(--transition-base), filter var(--transition-base);
}
.section-crousty__arrow:hover  { transform: scale(1.15); filter: brightness(1.3); }
.section-crousty__arrow:active { transform: scale(0.95); }
.section-crousty__arrow img { width: 100%; height: 100%; object-fit: contain; }

.section-crousty__arrow--left  { left: 240px;  top: 490px; }
.section-crousty__arrow--right { left: 1602px; top: 490px; }

/* ---- Dots Roulette ---- */
.crousty-dots {
  position: absolute;
  left: 50%;
  top: 165px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 20;
}

.crousty-dots__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: transform 0.4s ease, background 0.4s ease, width 0.4s ease, height 0.4s ease;
}

.crousty-dots__dot--active {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1);
}

/* Roulette spin animation */
@keyframes dotSpin {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(1); }
}

.crousty-dots__dot--spinning {
  animation: dotSpin 0.5s ease;
}


/* ============================================================
   SECTION 3 — CARTE DES TACOS
   Frame Figma Y global: 2160 → 3240
   Y relatif = Y_figma - 2160
   ============================================================ */

.section-tacos {
  height: var(--section-height);
}

/* Shared img rule */
.section-tacos [class*="__"] img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Gratiné + Fromages (top bar) ---- */
.section-tacos__gratine     { position: absolute; left: 16px;  top: 22px;  width: 272px; height: 72px; z-index: 5; }

.section-tacos__fromage-glow { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-tacos__fromage-glow--cheddar  { left: 240px; top: -110px;  width: 300px; height: 300px; }
.section-tacos__fromage-glow--raclette { left: 400px; top: -110px; width: 300px; height: 300px; }
.section-tacos__fromage-glow--emmental { left: 600px; top: -110px; width: 300px; height: 300px; }

.section-tacos__fromage-img  { position: absolute; z-index: 4; }
.section-tacos__fromage-img--cheddar   { left: 352px; top: 0px;  width: 78px;  height: 78px; }
.section-tacos__fromage-img--raclette  { left: 510px; top: -10px;  width: 101px; height: 102px; }
.section-tacos__fromage-img--emmental  { left: 695px; top: 5px; width: 87px;  height: 65px; }

.section-tacos__fromage-txt  { position: absolute; z-index: 5; }
.section-tacos__fromage-txt--cheddar   { left: 326px; top: 57px; width: 141px; height: 72px; }
.section-tacos__fromage-txt--raclette  { left: 492px; top: 57px; width: 141px; height: 72px; }
.section-tacos__fromage-txt--emmental  { left: 665px; top: 57px; width: 159px; height: 72px; }

/* ---- Menu text ---- */
.section-tacos__menu-text    { position: absolute; left: 16px; top: 111px; width: 709px; height: 120px; z-index: 5; }

/* ---- 3 Tacos (ellipses + images + names) ---- */
.section-tacos__ellipse { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-tacos__ellipse img { width: 100%; height: 100%; object-fit: fill; }
.section-tacos__ellipse--uno  { left: -167px;   top: -550px;  width: 2000px; height: 2000px; }
.section-tacos__ellipse--dos  { left: 500px;  top: -400px;  width: 1500px; height: 1500px; }
.section-tacos__ellipse--tres { left: 798px; top: -300px;  width: 1300px; height: 1300px; }

.section-tacos__tacos-img { position: absolute; z-index: 4; }
.section-tacos__tacos-img--uno  { left: 207px;  top: 231px; width: 337px; height: 337px; }
.section-tacos__tacos-img--dos  { left: 738px;  top: 138px; width: 463px; height: 463px; }
.section-tacos__tacos-img--tres { left: 1283px; top: 46px;  width: 573px; height: 573px; }

/* Tacos names — enlarged to match design */
.section-tacos__tacos-name { position: absolute; z-index: 5; }
.section-tacos__tacos-name--uno  { left: 150px;  top: 580px; width: 442px; height: 130px; }
.section-tacos__tacos-name--dos  { left: 730px;  top: 580px; width: 442px; height: 130px; }
.section-tacos__tacos-name--tres { left: 1340px; top: 580px; width: 442px; height: 130px; }

/* ---- VIANDES title ---- */
.section-tacos__viandes-title { position: absolute; left: 37px; top: 700px; width: 209px; height: 96px; z-index: 5; }

/* ---- Viande items ---- */
.section-tacos__viande-bg { position: absolute; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-tacos__viande-bg--tenders    { left: -65px;  top: 680px; width: 500px; height: 400px; }
.section-tacos__viande-bg--cordonbleu { left: 100px; top: 680px; width: 500px; height: 400px; }
.section-tacos__viande-bg--kebab      { left: 300px; top: 680px; width: 500px; height: 400px; }
.section-tacos__viande-bg--hachee     { left: 500px; top: 680px; width: 500px; height: 400px; }
.section-tacos__viande-bg--escalope   { left: 690px; top: 680px; width: 500px; height: 400px; }

.section-tacos__viande-img { position: absolute; z-index: 4; }
.section-tacos__viande-img--tenders    { left: 80px;  top: 800px; width: 160px; height: 120px; }
.section-tacos__viande-img--cordonbleu { left: 280px; top: 790px; width: 160px; height: 120px; }
.section-tacos__viande-img--kebab      { left: 475px; top: 770px; width: 155px; height: 155px; }
.section-tacos__viande-img--hachee     { left: 645px; top: 768px; width: 200px; height: 150px; }
.section-tacos__viande-img--escalope   { left: 870px; top: 800px; width: 145px; height: 96px; }

.section-tacos__viande-txt { position: absolute; z-index: 5; }
.section-tacos__viande-txt--tenders    { left: 100px; top: 905px; width: 118px; height: 50px; }
.section-tacos__viande-txt--cordonbleu { left: 290px; top: 910px; width: 128px; height: 60px; }
.section-tacos__viande-txt--kebab      { left: 505px; top: 910px; width: 90px; height: 35px; }
.section-tacos__viande-txt--hachee     { left: 685px; top: 910px; width: 134px; height: 68px; }
.section-tacos__viande-txt--escalope   { left: 880px; top: 910px; width: 125px; height: 60px; }

/* ---- Sauces — consistent sizing ---- */
/* All sauce bg ellipses: 100x99, sauce images constrained to ~110x110 centered, text ~100x40 */
.section-tacos__sauce-bg { position: absolute; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-tacos__sauce-bg img { width: 100%; height: 100%; object-fit: fill; }
.section-tacos__sauce-img { position: absolute; z-index: 4; }
.section-tacos__sauce-txt { position: absolute; z-index: 5; }

/* Uniform sauce image size: constrained to ~110px centered on ellipse */
.section-tacos__sauce-img img { width: 100%; height: 100%; object-fit: contain; }
/* Uniform sauce text: consistent height */
.section-tacos__sauce-txt img { width: 100%; height: 100%; object-fit: contain; }

/* Row 1 — Y center ~810, text at ~870 */
.section-tacos__sauce-bg--algerienne  { left: 1164px; top: 725px; width: 160px; height: 160px; }
.section-tacos__sauce-img--algerienne { left: 1190px; top: 755px; width: 109px; height: 109px; }
.section-tacos__sauce-txt--algerienne { left: 1170px; top: 855px; width: 155px; height: 70px; }

.section-tacos__sauce-bg--biggy  { left: 1298px; top: 730px; width: 160px; height: 160px; }
.section-tacos__sauce-img--biggy { left: 1315px; top: 749px; width: 120px; height: 120px; }
.section-tacos__sauce-txt--biggy { left: 1341px; top: 867px; width: 75px; height: 43px; }

.section-tacos__sauce-bg--samourai  { left: 1428px; top: 726px; width: 160px; height: 160px; }
.section-tacos__sauce-img--samourai { left: 1445px; top: 745px; width: 125px; height: 125px; }
.section-tacos__sauce-txt--samourai { left: 1441px; top: 860px; width: 130px; height: 58px; }

.section-tacos__sauce-bg--blanche  { left: 1562px; top: 725px; width: 160px; height: 160px; }
.section-tacos__sauce-img--blanche { left: 1584px; top: 756px; width: 108px; height: 108px; }
.section-tacos__sauce-txt--blanche { left: 1590px; top: 874px; width: 100px; height: 35px; }

.section-tacos__sauce-bg--mayonnaise  { left: 1697px; top: 732px; width: 160px; height: 160px; }
.section-tacos__sauce-img--mayonnaise { left: 1728px; top: 760px; width: 93px; height: 93px; }
.section-tacos__sauce-txt--mayonnaise { left: 1710px; top: 862px; width: 148px; height: 58px; }

/* Row 2 — Y center ~975, text at ~1035 */
.section-tacos__sauce-bg--ketchup  { left: 1165px; top: 890px; width: 160px; height: 160px; }
.section-tacos__sauce-img--ketchup { left: 1175px; top: 900px; width: 140px; height: 140px; }
.section-tacos__sauce-txt--ketchup { left: 1188px; top: 1025px; width: 120px; height: 54px; }

.section-tacos__sauce-bg--bbq  { left: 1300px; top: 900px; width: 160px; height: 160px; }
.section-tacos__sauce-img--bbq { left: 1292px; top: 887px; width: 170px; height: 170px; }
.section-tacos__sauce-txt--bbq { left: 1334px; top: 1037px; width: 85px; height: 33px; }

.section-tacos__sauce-bg--harissa  { left: 1428px; top: 895px; width: 160px; height: 160px; }
.section-tacos__sauce-img--harissa { left: 1451px; top: 916px; width: 110px; height: 110px; }
.section-tacos__sauce-txt--harissa { left: 1450px; top: 1025px; width: 120px; height: 56px; }

.section-tacos__sauce-bg--brazil  { left: 1558px; top: 893px; width: 160px; height: 160px; }
.section-tacos__sauce-img--brazil { left: 1525px; top: 853px; width: 223px; height: 223px; }
.section-tacos__sauce-txt--brazil { left: 1595px; top: 1031px; width: 95px; height: 43px; }

.section-tacos__sauce-bg--curry  { left: 1698px; top: 895px; width: 160px; height: 160px; }
.section-tacos__sauce-img--curry { left: 1722px; top: 916px; width: 110px; height: 110px; }
.section-tacos__sauce-txt--curry { left: 1732px; top: 1032px; width: 95px; height: 40px; }


/* ============================================================
   SECTION 4 — CARTE DES BURGERS
   Frame Figma Y global: 3240 → 4320
   Y relatif = Y_figma - 3240
   ============================================================ */

.section-burgers {
  height: var(--section-height);
}

/* Shared img rule */
.section-burgers [class*="__"] img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Menu text ---- */
.section-burgers__menu-text { position: absolute; left: 24px; top: 0px; width: 1128px; height: 60px; z-index: 5; }

/* ---- Ellipse glows ---- */
.section-burgers__ellipse { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-burgers__ellipse img { width: 100%; height: 100%; object-fit: fill; }
.section-burgers__ellipse--left  { left: -120px;  top: 168px; width: 1200px; height: 1200px; }
.section-burgers__ellipse--right { left: 850px; top: 30px;  width: 1200px; height: 1200px; }

/* ---- Rectangle fonds (glow cards) ---- */
.section-burgers__fond { position: absolute; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-burgers__fond img { width: 100%; height: 100%; object-fit: fill; }

/* Row 1 fonds */
.section-burgers__fond--eggbacon      { left: -20px;   top: -80px;  width: 700px; height: 700px; }
.section-burgers__fond--crispybacon   { left: 380px;  top: -80px;  width: 700px; height: 700px; }
.section-burgers__fond--doublecheese  { left: 840px;  top: -80px;  width: 700px; height: 700px; }
.section-burgers__fond--painturckebab { left: 1300px; top: -80px;  width: 700px; height: 700px; }

/* Row 2 fonds */
.section-burgers__fond--montagnard { left: -20px;   top: 460px; width: 700px; height: 700px; }
.section-burgers__fond--bigk       { left: 380px;  top: 460px; width: 700px; height: 700px; }
.section-burgers__fond--cheese     { left: 840px; top: 460px; width: 700px; height: 700px; }
.section-burgers__fond--kebabdurum { left: 1300px; top: 460px; width: 700px; height: 700px; }

/* ---- Burger images ---- */
.section-burgers__img { position: absolute; z-index: 4; }

/* Row 1 images */
.section-burgers__img--eggbacon      { left: 52px;   top: 17px;  width: 414px; height: 414px; }
.section-burgers__img--crispybacon   { left: 466px;  top: 60px;  width: 501px; height: 334px; }
.section-burgers__img--doublecheese  { left: 920px;  top: 70px;  width: 527px; height: 352px; }
.section-burgers__img--painturckebab { left: 1395px; top: 83px;  width: 518px; height: 311px; }

/* Row 2 images */
.section-burgers__img--montagnard { left: 0px;   top: 572px; width: 572px; height: 381px; }
.section-burgers__img--bigk       { left: 410px;  top: 560px; width: 629px; height: 420px; }
.section-burgers__img--cheese     { left: 1009px; top: 661px; width: 413px; height: 261px; }
.section-burgers__img--kebabdurum { left: 1395px; top: 533px; width: 460px; height: 460px; }

/* ---- Burger names ---- */
.section-burgers__name { position: absolute; z-index: 5; }

/* Row 1 names */
.section-burgers__name--eggbacon      { left: 126px;  top: 402px; width: 272px; height: 77px; }
.section-burgers__name--crispybacon   { left: 542px;  top: 400px; width: 360px; height: 77px; }
.section-burgers__name--doublecheese  { left: 1015px; top: 400px; width: 366px; height: 77px; }
.section-burgers__name--painturckebab { left: 1442px; top: 400px; width: 437px; height: 77px; }

/* Row 2 names */
.section-burgers__name--montagnard { left: 97px;   top: 928px; width: 350px; height: 77px; }
.section-burgers__name--bigk       { left: 668px;  top: 918px; width: 131px; height: 77px; }
.section-burgers__name--cheese     { left: 1112px; top: 918px; width: 177px; height: 77px; }
.section-burgers__name--kebabdurum { left: 1478px; top: 918px; width: 355px; height: 77px; }

/* ---- Burger prices ---- */
.section-burgers__price { position: absolute; z-index: 5; }

/* Row 1 prices */
.section-burgers__price--eggbacon      { left: 187px;  top: 472px; width: 150px; height: 77px; }
.section-burgers__price--crispybacon   { left: 642px;  top: 470px; width: 150px; height: 77px; }
.section-burgers__price--doublecheese  { left: 1124px; top: 470px; width: 140px; height: 77px; }
.section-burgers__price--painturckebab { left: 1598px; top: 470px; width: 140px; height: 77px; }

/* Row 2 prices */
.section-burgers__price--montagnard { left: 195px;  top: 993px; width: 150px; height: 77px; }
.section-burgers__price--bigk       { left: 657px;  top: 995px; width: 140px; height: 77px; }
.section-burgers__price--cheese     { left: 1128px; top: 995px; width: 150px; height: 77px; }
.section-burgers__price--kebabdurum { left: 1569px; top: 995px; width: 140px; height: 77px; }



/* ============================================================
   SECTION 5 — BOISSONS & DESSERTS (tabbed)
   ============================================================ */

.section-bd { height: var(--section-height); }

/* ---- Tabs ---- */
.bd-tabs       { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10; }
.bd-tabs__btn  {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  color: rgba(255,255,255,0.35);
  font-family: 'Pricedown', 'Impact', sans-serif;
  font-size: 30px;
  padding: 16px 44px;
  cursor: pointer;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: all 0.35s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  text-shadow: none;
}
.bd-tabs__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(168,85,247,0) 0%, rgba(56,189,248,0) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.bd-tabs__btn--active {
  background: linear-gradient(135deg, rgba(168,85,247,0.25) 0%, rgba(56,189,248,0.2) 100%);
  border-color: rgba(168,85,247,0.5);
  color: #ffffff;
  box-shadow: 0 0 25px rgba(168,85,247,0.3), 0 0 60px rgba(56,189,248,0.12), inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow: 0 0 20px rgba(168,85,247,0.6);
}
.bd-tabs__btn:hover:not(.bd-tabs__btn--active) {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.12) 100%);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(255,255,255,0.06);
  transform: translateY(-2px);
}
.bd-tabs__btn:active { transform: translateY(1px); }

/* ---- Panels ---- */
.bd-panel          { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.bd-panel--active  { opacity: 1; pointer-events: auto; }

/* ---- Shared base classes ---- */
.bd__glow     { position: absolute; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.bd__glow img { width: 100%; height: 100%; object-fit: fill; }
.bd__img      { position: absolute; }
.bd__img img  { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   BOISSONS — canettes + prix PNG
   ============================================================ */

/* Orangina */
.bd__glow--orangina       { left: 0px;  top: 150px; width: 600px; height: 680px; }
.bd__img--orangina        { left: 60px;  top: 200px; width: 530px; height: 580px; }

/* Coca-Cola */
.bd__glow--coca           { left: 350px; top: 150px; width: 600px; height: 680px; }
.bd__img--coca            { left: 370px; top: 170px; width: 550px; height: 630px; }

/* Ice Tea */
.bd__glow--icetea         { left: 655px; top: 150px; width: 600px; height: 680px; }
.bd__img--icetea          { left: 715px; top: 190px; width: 510px; height: 590px; }

/* Oasis */
.bd__glow--oasis          { left: 990px; top: 150px; width: 600px; height: 680px; }
.bd__img--oasis           { left: 1050px; top: 215px; width: 475px; height: 545px; }

/* Perrier */
.bd__glow--perrier        { left: 1300px; top: 150px; width: 600px; height: 680px; }
.bd__img--perrier         { left: 1360px; top: 200px; width: 500px; height: 580px; }

/* Prix PNG */
.bd__img--prix-180         { left: 870px;  top: 790px; width: 201px; height: 115px; }


/* ============================================================
   BIG DESSERTS
   ============================================================ */

/* Crep'sty Simple */
.bd__glow--crepsty-simple          { left: 20px;  top: 100px; width: 1000px; height: 800px; }
.bd__img--crepsty-simple           { left: 120px;  top: 210px; width: 800px; height: 570px; }
.bd__img--crepsty-simple-name      { left: 235px;  top: 720px; width: 600px; height: 100px; }
.bd__img--crepsty-simple-ingr      { left: 310px;  top: 695px; width: 400px; height: 35px; }

/* Crep'sty Premium */
.bd__glow--crepsty-premium         { left: 880px; top: 100px; width: 1000px; height: 800px; }
.bd__img--crepsty-premium          { left: 980px; top: 200px; width: 800px; height: 570px; }
.bd__img--crepsty-premium-name     { left: 1085px; top: 720px; width: 600px; height: 100px; }
.bd__img--crepsty-premium-ingr     { left: 1130px; top: 695px; width: 500px; height: 35px; }


/* ============================================================
   DESSERTS
   ============================================================ */

/* Row 1 */
.bd__glow--tiramisu       { left: 122px;  top: 125px; width: 400px; height: 300px; }
.bd__img--tiramisu        { left: 160px;   top: 160px; width: 310px; height: 210px; }
.bd__img--tiramisu-name   { left: 145px;  top: 368px; width: 350px; height: 80px; }

.bd__glow--donuts         { left: 540px;  top: 125px; width: 400px; height: 300px; }
.bd__img--donuts          { left: 620px;  top: 160px; width: 230px; height: 230px; }
.bd__img--donuts-name     { left: 600px;  top: 380px; width: 280px; height: 55px; }

.bd__glow--kinder         { left: 990px;  top: 125px; width: 400px; height: 300px; }
.bd__img--kinder          { left: 1070px;  top: 155px; width: 250px; height: 250px; }
.bd__img--kinder-name     { left: 1050px;  top: 376px; width: 280px; height: 55px; }

.bd__glow--tarte          { left: 1380px; top: 125px; width: 400px; height: 300px; }
.bd__img--tarte           { left: 1400px; top: 90px; width: 400px; height: 400px; }
.bd__img--tarte-name      { left: 1475px; top: 382px; width: 270px; height: 50px; }

/* Row 2 */
.bd__glow--tartedaim      { left: 330px;  top: 460px; width: 400px; height: 300px; }
.bd__img--tartedaim       { left: 350px;  top: 490px; width: 350px; height: 240px; }
.bd__img--tartedaim-name  { left: 315px;  top: 672px; width: 420px; height: 120px; }

.bd__glow--cookies        { left: 770px;  top: 460px; width: 400px; height: 300px; }
.bd__img--cookies         { left: 830px;  top: 530px; width: 280px; height: 150px; }
.bd__img--cookies-name    { left: 825px;  top: 705px; width: 280px; height: 55px; }

.bd__glow--panini         { left: 1200px; top: 460px; width: 400px; height: 300px; }
.bd__img--panini          { left: 1250px; top: 500px; width: 282px; height: 217px; }
.bd__glow--caprisun       { left: 1480px; top: 560px; width: 88px;  height: 139px; }
.bd__img--caprisun        { left: 1480px; top: 535px; width: 100px;  height: 150px; }
.bd__img--panini-name     { left: 1200px; top: 709px; width: 500px; height: 100px; }


/* ============================================================
   BANDEROLES ANIMÉES (entre section 5 et 6)
   2 bandes diagonales avec texte défilant en boucle infinie
   ============================================================ */

.banderoles {
  position: relative;
  width: var(--page-width);
  height: 340px;
  overflow: visible;
  z-index: 8;
  margin-top: -60px;
  margin-bottom: -60px;
}

.banderoles__band {
  position: absolute;
  left: -15%;
  width: 130%;
  height: 190px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

/* Bande du dessus — bleu ciel → violet */
.banderoles__band--1 {
  top: 10px;
  background: linear-gradient(90deg, #3352df 0%, #5220ad 25%, #a855f7 50%, #5220ad 75%, #3352df 100%);
  background-size: 800px 100%;
  transform: rotate(-4deg);
  z-index: 3;
  box-shadow: 0 6px 40px rgba(56, 189, 248, 0.35), 0 0 80px rgba(129, 140, 248, 0.25);
}

/* Bande du dessous — rose → rouge */
.banderoles__band--2 {
  top: 120px;
  background: linear-gradient(90deg, #05db70 0%, #2f9cc7 25%, #d062da 50%, #2f9cc7 75%, #05db70 100%);
  background-size: 800px 100%;
  transform: rotate(3.5deg);
  z-index: 2;
  box-shadow: 0 6px 40px rgba(236, 72, 153, 0.35), 0 0 80px rgba(244, 63, 94, 0.25);
}

/* Track — contient 2x le texte pour boucle seamless */
.banderoles__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.banderoles__track--left {
  animation: banderole-scroll-left 25s linear infinite;
}

.banderoles__track--right {
  animation: banderole-scroll-right 30s linear infinite;
}

/* Texte */
.banderoles__text {
  font-family: 'Pricedown', 'Impact', sans-serif;
  font-size: 90px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 6px;
  text-transform: uppercase;
  padding: 0 20px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

/* Animations */
@keyframes banderole-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes banderole-scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}


/* ============================================================
   SECTION 6 — COMMANDER
   Frame Figma Y global: 5400 → 6480
   Y relatif = Y_figma - 5400
   ============================================================ */

.section-commander {
  height: var(--section-height);
  overflow: hidden;
}

/* Shared img rule */
.section-commander [class*="__"] img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Ellipses décoratives (fond) ---- */
.section-commander__ellipse { position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-commander__ellipse img { width: 100%; height: 100%; object-fit: fill; }

.section-commander__ellipse--red    { left: -500px; top: -100px; width: 1200px; height: 1200px; }
.section-commander__ellipse--green  { left: 100px;  top: -150px; width: 1200px; height: 1200px; }
.section-commander__ellipse--purple { left: 1000px;  top: -120px;  width: 1300px; height: 1300px; }

/* ---- Colonne gauche : À emporter via WhatsApp ---- */
.section-commander__title-whatsapp {
  position: absolute;
  left: 220px;
  top: 160px;
  width: 400px;
  height: 150px;
  z-index: 5;
}


.section-commander__qr {
  position: absolute;
  left: 180px;
  top: 330px;
  width: 480px;
  height: 480px;
  z-index: 5;
  cursor: pointer;
  transition: transform var(--transition-base), filter var(--transition-base);
}
.section-commander__qr:hover  { transform: scale(1.02); filter: brightness(1.08); }
.section-commander__qr:active { transform: scale(0.99); }

/* ---- Colonne droite : Livraison à Domicile ---- */
.section-commander__title-livraison {
  position: absolute;
  left: 1130px;
  top: 160px;
  width: 320px;
  height: 180px;
  z-index: 5;
}

/* ---- Boutons livraison (glow + logo + cliquez ici) ---- */
.section-commander__glow { position: absolute; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-commander__glow img { width: 100%; height: 100%; object-fit: fill; }

.section-commander__logo {
  position: absolute;
  z-index: 5;
  cursor: pointer;
  transition: transform var(--transition-base), filter var(--transition-base);
}
.section-commander__logo:hover  { transform: scale(1.08); filter: brightness(1.15); }
.section-commander__logo:active { transform: scale(0.96); }

.section-commander__cliquez {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

/* Uber Eats */
.section-commander__glow--uber       { left: 795px; top: 330px; width: 500px; height: 500px; }
.section-commander__logo--uber       { left: 900px; top: 430px; width: 280px; height: 280px; }
.section-commander__cliquez--uber    { left: 920px; top: 735px; width: 250px; height: 40px; }

/* Deliveroo */
.section-commander__glow--deliveroo    { left: 1295px; top: 330px; width: 500px; height: 500px; }
.section-commander__logo--deliveroo    { left: 1400px; top: 430px; width: 280px; height: 280px; }
.section-commander__cliquez--deliveroo { left: 1420px; top: 735px; width: 250px; height: 40px; }


/* ============================================================
   SECTION 7 — FOOTER / AUTRE
   Frame Figma Y global: 6480 → 7560
   Y relatif = Y_figma - 6480
   ============================================================ */

.section-footer {
  height: var(--section-height);
  position: relative;
  overflow: hidden;
}

/* Fond noir semi-transparent */
.section-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

/* ---- Ellipses décoratives ---- */
.section-footer__ellipse { position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.section-footer__ellipse img { width: 100%; height: 100%; object-fit: fill; }

.section-footer__ellipse--jaune     { left: -400px; top: 300px; width: 1200px; height: 1200px; }
.section-footer__ellipse--bleu-fond { left: 421px;  top: -50px;  width: 800px;  height: 900px; }
.section-footer__ellipse--bleu      { left: 1100px; top: 0px; width: 1100px; height: 1100px; }

/* ---- Titre réseaux ---- */
.section-footer__titre-reseaux {
  position: absolute;
  left: 76px;
  top: 40px;
  z-index: 5;
  font-family: 'Pricedown', 'Impact', sans-serif;
  font-size: 52px;
  color: #ffffff;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* ---- QR Codes réseaux sociaux ---- */
.section-footer__qr {
  position: absolute;
  z-index: 5;
}
.section-footer__qr img { width: 100%; height: 100%; object-fit: contain; }

.section-footer__qr--snap   { left: 76px;   top: 130px; width: 340px; height: 340px; }
.section-footer__qr--insta  { left: 480px;  top: 130px; width: 340px; height: 340px; }
.section-footer__qr--tiktok { left: 884px;  top: 130px; width: 340px; height: 340px; }

/* Labels sous QR codes */
.section-footer__qr-label {
  position: absolute;
  z-index: 5;
  font-family: 'Pricedown', 'Impact', sans-serif;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.section-footer__qr-label--snap   { left: 76px;  top: 485px; width: 340px; }
.section-footer__qr-label--insta  { left: 480px; top: 485px; width: 340px; }
.section-footer__qr-label--tiktok { left: 884px; top: 485px; width: 340px; }

/* ---- Tagline sous QR codes ---- */
.section-footer__tagline {
  position: absolute;
  left: 76px;
  top: 560px;
  width: 1148px;
  z-index: 5;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 1px;
  font-style: italic;
}

/* ---- Infos pratiques (colonne droite) ---- */
.section-footer__info-block {
  position: absolute;
  left: 1350px;
  top: 100px;
  width: 480px;
  z-index: 5;
}

.section-footer__info-title {
  font-family: 'Pricedown', 'Impact', sans-serif;
  font-size: 42px;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.section-footer__address {
  font-style: normal;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 14px;
}
.section-footer__address a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}
.section-footer__address a:hover { color: #ffffff; }

.section-footer__phone {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 28px;
}
.section-footer__phone a {
  color: #ffffff;
  transition: color 0.3s ease;
}
.section-footer__phone a:hover { color: rgba(255, 255, 255, 0.7); }

.section-footer__hours-title {
  font-family: 'Pricedown', 'Impact', sans-serif;
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.section-footer__hours {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-footer__hours--closed span:last-child {
  color: rgba(255, 100, 100, 0.9);
  font-weight: 600;
}

/* ---- Google Maps ---- */
.section-footer__map {
  position: absolute;
  left: 1300px;
  top: 480px;
  width: 580px;
  height: 420px;
  z-index: 5;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.section-footer__map iframe {
  display: block;
  filter: brightness(0.85) contrast(1.1) saturate(0.7);
}

/* ---- Barre de fin (mentions légales) ---- */
.section-footer__bottom-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.5px;
}

.section-footer__bottom-bar strong {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.section-footer__separator {
  color: rgba(255, 255, 255, 0.15);
}

.section-footer__legal-link {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section-footer__legal-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   ============================================================
   ===                                                      ===
   ===             ANIMATIONS — PHASE 2                     ===
   ===                                                      ===
   ============================================================
   ============================================================ */


/* ============================================================
   SECTION 2 — CROUSTY : CARROUSEL 3D AVEC PERSPECTIVE
   ============================================================ */

.section-crousty {
  /* Plus besoin de perspective 3D, on reste à plat */
  overflow: hidden;
}

/* Base slide state : caché à droite, hors-écran */
.crousty-slide {
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(120%, 0, 0) scale(1);
  z-index: 1;
}

/* Slide active : en place, nette */
.crousty-slide--active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  z-index: 3;
}

/* Slide qui sort vers la gauche (on avance au suivant) :
   zoom léger d'accroche, puis slide vers la gauche en gardant le zoom */
.crousty-slide--exiting-left {
  animation: crousty-exit-left 0.95s cubic-bezier(0.55, 0, 0.2, 1) forwards;
  z-index: 2;
  pointer-events: none;
}

/* Slide qui sort vers la droite (on recule au précédent) */
.crousty-slide--exiting-right {
  animation: crousty-exit-right 0.95s cubic-bezier(0.55, 0, 0.2, 1) forwards;
  z-index: 2;
  pointer-events: none;
}

/* Slide qui arrive de la droite (sur next) : entre déjà zoomée, rentre en place, se dézoome en fin */
.crousty-slide--entering-from-right {
  animation: crousty-enter-from-right 0.95s cubic-bezier(0.55, 0, 0.2, 1) forwards;
  z-index: 3;
}

/* Slide qui arrive de la gauche (sur prev) */
.crousty-slide--entering-from-left {
  animation: crousty-enter-from-left 0.95s cubic-bezier(0.55, 0, 0.2, 1) forwards;
  z-index: 3;
}

/* Le zoom d'accroche monte jusqu'à 1.08 avant le départ, et la slide entrante
   débarque déjà à 1.08 et se pose ensuite à 1. Effet : un mouvement en miroir. */
@keyframes crousty-exit-left {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
  22% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.08);
    filter: brightness(1.1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-120%, 0, 0) scale(1.08);
    filter: brightness(0.7);
  }
}

@keyframes crousty-exit-right {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
  22% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.08);
    filter: brightness(1.1);
  }
  100% {
    opacity: 0;
    transform: translate3d(120%, 0, 0) scale(1.08);
    filter: brightness(0.7);
  }
}

@keyframes crousty-enter-from-right {
  0% {
    opacity: 0;
    transform: translate3d(120%, 0, 0) scale(1.08);
    filter: brightness(0.7);
  }
  45% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.08);
    filter: brightness(1.1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
}

@keyframes crousty-enter-from-left {
  0% {
    opacity: 0;
    transform: translate3d(-120%, 0, 0) scale(1.08);
    filter: brightness(0.7);
  }
  45% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.08);
    filter: brightness(1.1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
}

/* ---- Animations staggered des textes/éléments dans la slide active ---- */

@keyframes crousty-text-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes crousty-btn-in {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.92);
  }
  60% {
    transform: translateY(-3px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Le plat central n'a plus d'animation propre : le slide horizontal avec zoom
   s'en charge. On évite ainsi une superposition de transforms. */

.crousty-slide--active .section-crousty__title {
  animation: crousty-text-in 0.7s 0.4s cubic-bezier(0.2, 0.85, 0.3, 1.05) both;
}

.crousty-slide--active .section-crousty__price {
  animation: crousty-text-in 0.7s 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.05) both;
}

.crousty-slide--active .section-crousty__ingredients {
  animation: crousty-text-in 0.7s 0.55s cubic-bezier(0.2, 0.85, 0.3, 1.05) both;
}

.crousty-slide--active .section-crousty__btn-commander,
.crousty-slide--active .section-crousty__btn-glow {
  animation: crousty-btn-in 0.7s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Subtle "breathing" glow derrière le plat actif */
@keyframes crousty-glow-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.03); }
}

.crousty-slide--active .section-crousty__light-fond {
  animation: crousty-glow-breathe 4s ease-in-out infinite;
}

/* Bloquer le curseur pendant la transition pour éviter les glitchs */
.section-crousty.is-transitioning .section-crousty__arrow,
.section-crousty.is-transitioning .crousty-dots__dot {
  pointer-events: none;
}


/* ============================================================
   SECTION 3 — TACOS : HOVER ZOOM SAUCES + GLITCH TACOS
   ============================================================ */

/* ---- Sauces : hover zoom groupé (bg + img + txt) ---- */
.section-tacos__sauce-bg,
.section-tacos__sauce-img,
.section-tacos__sauce-txt {
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.45s ease,
    opacity 0.45s ease;
  cursor: pointer;
}

.section-tacos__sauce-img.is-hovered {
  transform: scale(1.22) translateY(-4px);
  filter: drop-shadow(0 0 18px rgba(255, 180, 60, 0.55)) brightness(1.12);
  z-index: 15;
}

.section-tacos__sauce-bg.is-hovered {
  transform: scale(1.18);
  filter: brightness(1.5) saturate(1.4);
  z-index: 14;
}

.section-tacos__sauce-txt.is-hovered {
  transform: scale(1.1) translateY(3px);
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));
  z-index: 15;
}

/* ---- Tacos (Uno/Dos/Tres) : glitch hover + scale ---- */
.section-tacos__tacos-img {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.section-tacos__tacos-img:hover {
  transform: scale(1.045);
}

.section-tacos__tacos-img:hover img {
  animation: tacos-glitch 0.42s ease-out 1;
}

@keyframes tacos-glitch {
  0% {
    transform: translate(0, 0);
    filter: none;
  }
  18% {
    transform: translate(-4px, 1px);
    filter:
      drop-shadow(4px 0 0 rgba(255, 40, 100, 0.75))
      drop-shadow(-4px 0 0 rgba(0, 230, 255, 0.75));
  }
  36% {
    transform: translate(4px, -2px);
    filter:
      drop-shadow(-4px 0 0 rgba(255, 40, 100, 0.7))
      drop-shadow(4px 0 0 rgba(0, 230, 255, 0.7));
  }
  54% {
    transform: translate(-3px, 2px);
    filter:
      drop-shadow(3px 0 0 rgba(255, 40, 100, 0.5))
      drop-shadow(-3px 0 0 rgba(0, 230, 255, 0.5));
  }
  72% {
    transform: translate(2px, -1px);
    filter: drop-shadow(2px 0 0 rgba(255, 230, 80, 0.4));
  }
  100% {
    transform: translate(0, 0);
    filter: none;
  }
}

/* Le nom du taco (immédiatement après l'image) suit légèrement le scale au hover */
.section-tacos__tacos-img + .section-tacos__tacos-name {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-tacos__tacos-img:hover + .section-tacos__tacos-name {
  transform: scale(1.03);
}


/* ============================================================
   SECTION 4 — BURGERS : HOVER TRÈS LÉGER
   ============================================================ */

.section-burgers__img {
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.55s ease;
  cursor: pointer;
}

.section-burgers__img:hover {
  transform: scale(1.035) translateY(-6px);
  filter: drop-shadow(0 10px 28px rgba(168, 85, 247, 0.35)) brightness(1.08);
}

/* Le fond rectangle associé s'intensifie légèrement (via :has, browsers modernes) */
.section-burgers__fond {
  transition: filter 0.55s ease, transform 0.55s ease;
}

.section-burgers__fond:has(+ .section-burgers__img:hover) {
  filter: brightness(1.3) saturate(1.2);
}


/* ============================================================
   SECTION 5 — BOISSONS : FLOTTEMENT CONTINU LÉGER SUR CANETTES
   ============================================================ */

.bd__img--orangina img,
.bd__img--coca img,
.bd__img--icetea img,
.bd__img--oasis img,
.bd__img--perrier img {
  animation: can-float 5s ease-in-out infinite;
  will-change: transform;
}

/* Durées et délais décalés pour que les canettes bougent indépendamment —
   jamais synchronisées, toujours vivantes */
.bd__img--orangina img { animation-duration: 4.6s; animation-delay: 0s;    }
.bd__img--coca img     { animation-duration: 5.2s; animation-delay: -1.3s; }
.bd__img--icetea img   { animation-duration: 4.2s; animation-delay: -0.6s; }
.bd__img--oasis img    { animation-duration: 5.6s; animation-delay: -2.1s; }
.bd__img--perrier img  { animation-duration: 4.8s; animation-delay: -0.9s; }

/* Flottement doux : montée/descente verticale + micro-rotation en douceur.
   Très léger (12px de hauteur, ±1° de rotation) pour rester subtil. */
@keyframes can-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(0, -6px, 0) rotate(0.8deg);
  }
  50% {
    transform: translate3d(0, -12px, 0) rotate(0deg);
  }
  75% {
    transform: translate3d(0, -6px, 0) rotate(-0.8deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* Hover sur une canette : petit lift sur le conteneur (la canette à l'intérieur
   continue de flotter naturellement — on ne coupe pas l'animation) */
.bd__img--orangina, .bd__img--coca, .bd__img--icetea,
.bd__img--oasis, .bd__img--perrier {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.bd__img--orangina:hover, .bd__img--coca:hover, .bd__img--icetea:hover,
.bd__img--oasis:hover, .bd__img--perrier:hover {
  transform: translateY(-6px) scale(1.025);
}
.bd__img--orangina:hover img, .bd__img--coca:hover img, .bd__img--icetea:hover img,
.bd__img--oasis:hover img, .bd__img--perrier:hover img {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35)) brightness(1.08);
}


/* ============================================================
   SECTION 5 — BIG DESSERTS : COEURS QUI S'ENVOLENT AU HOVER
   ============================================================ */

.bd__img--crepsty-simple,
.bd__img--crepsty-premium {
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.5s ease;
  cursor: pointer;
  overflow: visible;
}

.bd__img--crepsty-simple:hover,
.bd__img--crepsty-premium:hover {
  transform: scale(1.025) translateY(-4px);
  filter: drop-shadow(0 14px 40px rgba(255, 80, 180, 0.4)) brightness(1.08);
}

/* Les coeurs flottants — créés dynamiquement en JS */
.heart-pop {
  position: absolute;
  bottom: 20%;
  z-index: 100;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  animation: heart-float 2s cubic-bezier(0.25, 0.8, 0.3, 1) forwards;
  filter: drop-shadow(0 2px 8px rgba(255, 80, 180, 0.4));
}

@keyframes heart-float {
  0% {
    transform: translateY(0) scale(0.3) rotate(-12deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
    transform: translateY(-25px) scale(1.15) rotate(6deg);
  }
  30% {
    transform: translateY(-80px) scale(1) rotate(-6deg);
    opacity: 1;
  }
  60% {
    transform: translateY(-200px) scale(0.95) rotate(10deg);
    opacity: 0.85;
  }
  100% {
    transform: translateY(-340px) scale(0.6) rotate(-14deg);
    opacity: 0;
  }
}


/* ============================================================
   SECTION 5 — DESSERTS : HOVER TILT + SCALE + GLOW
   ============================================================ */

.bd__img--tiramisu,
.bd__img--donuts,
.bd__img--kinder,
.bd__img--tarte,
.bd__img--tartedaim,
.bd__img--cookies,
.bd__img--panini {
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.45s ease;
  cursor: pointer;
}

.bd__img--tiramisu:hover,
.bd__img--donuts:hover,
.bd__img--kinder:hover,
.bd__img--tarte:hover,
.bd__img--tartedaim:hover,
.bd__img--cookies:hover,
.bd__img--panini:hover {
  transform: scale(1.08) translateY(-5px) rotate(-1.5deg);
  filter: drop-shadow(0 12px 32px rgba(255, 180, 80, 0.4)) brightness(1.1);
}

/* Les fonds glow s'intensifient quand on hover leur dessert associé (via :has) */
.bd__glow--tiramisu,
.bd__glow--donuts,
.bd__glow--kinder,
.bd__glow--tarte,
.bd__glow--tartedaim,
.bd__glow--cookies,
.bd__glow--panini {
  transition: filter 0.45s ease, transform 0.45s ease;
}

.bd__glow--tiramisu:has(+ .bd__img--tiramisu:hover),
.bd__glow--donuts:has(+ .bd__img--donuts:hover),
.bd__glow--kinder:has(+ .bd__img--kinder:hover),
.bd__glow--tarte:has(+ .bd__img--tarte:hover),
.bd__glow--tartedaim:has(+ .bd__img--tartedaim:hover),
.bd__glow--cookies:has(+ .bd__img--cookies:hover),
.bd__glow--panini:has(+ .bd__img--panini:hover) {
  filter: brightness(1.4) saturate(1.3);
  transform: scale(1.05);
}


/* ============================================================
   SECTION 6 — COMMANDER : HOVER QR + PULSE
   ============================================================ */

/* Override les règles existantes de .section-commander__qr:hover */
.section-commander__qr {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-commander__qr img {
  transition: filter 0.4s ease;
}

.section-commander__qr:hover {
  transform: scale(1.06) translateY(-6px);
  filter: none;
}

.section-commander__qr:hover img {
  animation: qr-pulse 1.6s ease-in-out infinite;
}

.section-commander__qr:active {
  transform: scale(1.02) translateY(-2px);
}

@keyframes qr-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 22px rgba(37, 211, 102, 0.55))
      brightness(1.06);
  }
  50% {
    filter:
      drop-shadow(0 0 45px rgba(37, 211, 102, 0.85))
      drop-shadow(0 0 80px rgba(37, 211, 102, 0.3))
      brightness(1.14);
  }
}


/* ============================================================
   ACCESSIBILITÉ — prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .crousty-slide {
    transform: none !important;
    filter: none !important;
  }

  .crousty-slide:not(.crousty-slide--active) {
    display: none;
  }

  .bd__img--orangina img, .bd__img--coca img, .bd__img--icetea img,
  .bd__img--oasis img, .bd__img--perrier img {
    animation: none !important;
  }
}