/* ═══════════════════════════════════════════════
   T'CROUSTY PÉRIGUEUX — Shared Styles
   Police: Bangers (titres) + Plus Jakarta Sans (corps)
   Auto-hébergées (RGPD) — aucune requête vers Google
═══════════════════════════════════════════════ */

/* Bangers — titres */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bangers-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bangers-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans — corps (police variable, poids 300→700) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════
   TOKENS — dérivés du hero (graphite + zigzag orange)
   Le hero est la référence : ses valeurs redescendent
   dans la page au lieu que la page reste uniformément noire.
═══════════════════════════════════════════════ */
:root {
  /* ── Surfaces : le rythme de la page ── */
  --s-hero:     #5C5C62;   /* graphite du hero, la référence */
  --s-graphite: #4A4A50;   /* écho du hero dans la page */
  --s-raised:   #2D2D33;
  --s-deep:     #1D1D21;
  --s-black:    #0C0C0E;

  /* ── Marque ── */
  --orange:     #EF7C1C;
  --orange-hi:  #FF8A3D;
  --orange-lo:  #C4471E;   /* brique */
  --amber:      #E9A11B;   /* second ton chaud (remplace le gris #C7C7CC) */
  --ink:        #17171A;   /* texte sur fond orange */
  --cream:      #F5F5F2;
  --text:       #F5F5F3;
  --muted:      #9A9AA0;
  --border:     rgba(239,124,28,.14);

  /* ── Catégories : teintes conservées, ton unifié ──
     Ces couleurs servent aussi de couleur de TEXTE (noms de cartes, prix,
     liens) sur fond --card. Elles sont donc désaturées mais gardées assez
     claires pour tenir 4,5:1 — les valeurs d'origine descendaient jusqu'à
     2,4:1 (le violet des desserts), ce qui était déjà hors des clous. */
  --c-crousty:  #EF7C1C;
  --c-finger:   #E8845A;
  --c-kids:     #6FB392;
  --c-desserts: #BA9CC1;
  --c-boissons: #85A9CC;
  /* Variantes profondes : halos, fonds, bordures — jamais de texte dessus */
  --c-finger-d:   #C4471E;
  --c-kids-d:     #3E7A63;
  --c-desserts-d: #6B4A6E;
  --c-boissons-d: #3D5A78;

  /* ── Sauces (page Croustys) : mêmes teintes, saturation alignée ── */
  --ok:      #74B894;   /* mentions de validation : halal, garanties */

  --c-blanc: #D8CBC0;
  --c-curry: #E9A11B;
  --c-tand:  #86B4D0;
  --c-fish:  #74B894;
  --c-crev:  #F09A66;

  /* ── Typographie ── */
  --ff-t:     'Bangers', cursive;
  --ff-title: var(--ff-t);
  --ff-b:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ls-t:     .04em;       /* tracking unique des titres Bangers */

  /* ── Formes ── */
  --r:    14px;
  --r2:   22px;
  --r3:   32px;
  --notch: 18px;           /* coin haut-droit coupé des cartes */
  --edge:  3vw;            /* angle unique des jonctions diagonales */
  /* L'éclair de marque : un seul tracé pour tous les héros du site
     (accueil, menu, catégories) et pour la bande stats. */
  --bolt: polygon(100% 0, 62% 0, 44% 42%, 58% 42%, 40% 100%, 100% 100%);

  /* ── Mouvement : une seule courbe ── */
  --ease:   cubic-bezier(.32,.72,0,1);
  --t-fast: .25s;
  --t-mid:  .6s;
  --t-slow: .85s;
  --tr:     var(--t-fast) var(--ease);

  /* ── Ombres : grandes, basses, pâles ── */
  --sh-card:  0 20px 50px -20px rgba(0,0,0,.55);
  --sh-panel: 0 30px 80px -20px rgba(0,0,0,.6);
  --sh-btn:   0 18px 30px -12px rgba(0,0,0,.45);

  /* ── Alias rétro-compatibles (pages catégories, phase 2) ── */
  --bg:    var(--s-deep);
  --bg2:   var(--s-raised);
  --bg3:   #34343A;
  --card:  #36363D;
  --card2: #414149;
  --gold:  var(--amber);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body {
  font-family: var(--ff-b);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
}

/* Noise */
body::before {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9998; opacity:.35;
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--orange); border-radius:2px; }

/* ── Utilities ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:100px 0; }

.tag {
  display:inline-block; font-family:var(--ff-b);
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); background:rgba(239,124,28,.14); border:1px solid rgba(239,124,28,.32);
  padding:5px 14px; border-radius:100px; margin-bottom:18px;
}
.tag--gold { color:var(--gold); background:rgba(199,199,204,.08); border-color:rgba(199,199,204,.25); }

.section-title {
  font-family:var(--ff-t); font-size:clamp(2rem,5vw,4.2rem);
  font-weight:400; line-height:1.05; letter-spacing:var(--ls-t);
}
.section-lead { font-size:clamp(.95rem,1.8vw,1.15rem); color:var(--muted); max-width:540px; margin-top:14px; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:100px;
  font-family:var(--ff-b); font-weight:700; font-size:.95rem;
  text-decoration:none; cursor:pointer; border:none;
  position:relative;
  transition:transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.btn:hover { transform:translateY(-2px); }

.btn--orange { background:linear-gradient(135deg,var(--orange),var(--orange-hi)); color:#fff; box-shadow:0 8px 28px rgba(239,124,28,.3); }
.btn--orange:hover { box-shadow:0 14px 40px rgba(239,124,28,.5); }
.btn--gold { background:var(--amber); color:var(--ink); box-shadow:0 8px 28px rgba(233,161,27,.28); }
.btn--gold:hover { box-shadow:0 14px 40px rgba(233,161,27,.45); }
.btn--outline { background:transparent; color:var(--text); border:1.5px solid rgba(255,255,255,.15); }
.btn--outline:hover { border-color:var(--orange); color:var(--orange); }

/* ── Logo ── */
.navbar__logo-word { height:46px; width:auto; flex-shrink:0; }
.navbar__logo-sep { width:1px; height:34px; background:rgba(255,255,255,.22); margin:0 12px; flex-shrink:0; }
.navbar__logo-icon { height:66px; width:auto; filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)); flex-shrink:0; }
.footer__logo-word { height:62px; width:auto; flex-shrink:0; }
.footer__logo-sep { width:1px; height:46px; background:rgba(255,255,255,.2); margin:0 16px; flex-shrink:0; }
.footer__logo-icon { height:82px; width:auto; filter:drop-shadow(0 3px 10px rgba(0,0,0,.4)); flex-shrink:0; }
/* A 320px le bloc logo mesurait 347px et poussait toute la page en scroll
   horizontal. Les hauteurs descendent, la largeur suit. */
@media(max-width:400px) {
  .footer__logo-word { height:44px; }
  .footer__logo-icon { height:58px; }
  .footer__logo-sep  { height:32px; margin:0 10px; }
}
.logo-loc   { font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-left:10px; align-self:flex-end; padding-bottom:2px; }

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.visible { opacity:1; transform:none; }
/* Décalage de 60 ms plafonné à 240 ms : au-delà, on attend la dernière carte. */
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s}
.d4{transition-delay:.24s} .d5{transition-delay:.24s}

/* ═══ NAVBAR ═══ */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:18px 0; transition:all var(--t-mid) var(--ease); }
.navbar.scrolled {
  background:rgba(15,15,17,.85);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(230,230,235,.06);
  padding:13px 0;
}
.navbar__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.navbar__logo { display:flex; align-items:center; min-height:44px; gap:0; text-decoration:none; flex-shrink:0; margin-left:-22px; }
.navbar__links { display:flex; align-items:center; gap:26px; list-style:none; }
.navbar__links a {
  color:rgba(245,245,243,.6); text-decoration:none;
  font-size:.86rem; font-weight:500; letter-spacing:.02em; transition:color var(--t-fast) var(--ease);
}
.navbar__links a:hover, .navbar__links a.active { color:var(--text); }
.navbar__cta { margin-left:8px; padding:10px 20px !important; font-size:.84rem !important; }

/* Liens infos pratiques (Nous trouver / Avis) — separes des categories */
.navbar__links li:nth-last-child(3) { border-left:1px solid rgba(255,255,255,.18); padding-left:20px; }
.navbar__link--info { color:var(--text) !important; font-weight:700 !important; white-space:nowrap; }
.navbar__link--info:hover { color:#fff !important; }
.nav-mobile a.nav-mobile__info { color:var(--orange); }

.navbar__burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none; }
.navbar__burger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.navbar__burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.navbar__burger.is-open span:nth-child(2) { opacity:0; }
.navbar__burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Le panneau plein ecran defile : ses 10 entrees demandent 926px, soit plus
   que la hauteur d'un iPhone SE (568px) ou d'un telephone en paysage. Sans
   overflow-y, le bouton Commander sortait de l'ecran sans moyen d'y acceder.
   justify-content reste centre tant que ca tient, et bascule en haut des que
   le contenu deborde (safe-area pour l'encoche et la barre du bas). */
.nav-mobile {
  display:none; position:fixed; inset:0;
  background:rgba(15,15,17,.97); backdrop-filter:blur(20px);
  z-index:999; flex-direction:column; align-items:center; justify-content:safe center; gap:28px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 88px) 20px calc(env(safe-area-inset-bottom) + 32px);
}
.nav-mobile.open { display:flex; }
.nav-mobile a { font-family:var(--ff-t); font-size:2.4rem; font-weight:400; letter-spacing:var(--ls-t); color:var(--text); text-decoration:none; transition:color var(--t-fast) var(--ease); }
.nav-mobile a:hover { color:var(--orange); }
/* Ecrans courts (petits telephones, mode paysage) : on resserre pour limiter
   le defilement plutot que de compter dessus. */
@media(max-height:740px) {
  .nav-mobile { gap:14px; padding-top:calc(env(safe-area-inset-top) + 76px); }
  .nav-mobile a { font-size:1.7rem; }
}
@media(max-height:480px) {
  .nav-mobile { gap:8px; padding-top:calc(env(safe-area-inset-top) + 68px); }
  .nav-mobile a { font-size:1.35rem; }
}

/* Cible tactile du burger : 36x28 avant, sous le minimum de 44x44. */
.navbar__burger {
  width:44px; height:44px; align-items:center; justify-content:center;
  margin-right:-8px;
}

/* ═══ BREADCRUMB ═══ */
/* Les liens faisaient 21px de haut : sous le doigt, c'est trop peu. Le padding
   vertical les amene a 40px sans decaler la mise en page (marges compensees). */
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.8rem; color:rgba(245,245,242,.86); margin:-11px 0 17px; }
.breadcrumb a { color:rgba(245,245,242,.86); text-decoration:none; transition:color var(--t-fast) var(--ease); padding:11px 2px; }
.breadcrumb a:hover { color:var(--cream); }
.breadcrumb span { color:rgba(245,245,242,.45); }

/* ═══ CATEGORY HERO ═══ */
/* Même couple que le hero d'accueil : graphite plein et éclair orange.
   Le fond n'est plus teinté de la couleur de catégorie — celle-ci reste
   présente plus bas dans la page (cartes, prix, liens, coin coupé). */
.cat-hero {
  min-height:38vh; display:flex; align-items:flex-end;
  padding-bottom:56px; padding-top:120px;
  position:relative; overflow:hidden;
  background:var(--s-hero);
}
.cat-hero__line { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--orange),transparent); opacity:.3; }
/* Zigzag — l'arrière-plan de la moitié droite est découpé en éclair,
   au tracé commun --bolt et en orange plein, comme sur l'accueil. */
.cat-hero__zigzag {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--orange);
  clip-path:var(--bolt);
}
.cat-hero__content { position:relative; z-index:1; }
.cat-hero__emoji { font-size:3.5rem; margin-bottom:14px; display:block; }
.cat-hero__title { font-family:var(--ff-t); font-size:clamp(2.5rem,7vw,6rem); font-weight:400; line-height:1; letter-spacing:var(--ls-t); }
.cat-hero__count { font-size:.9rem; color:rgba(245,245,243,.82); margin-top:8px; }
/* Le mot accentué traverse le zigzag : il part de l'orange (lisible sur le
   graphite) et arrive sur le crème (lisible sur la forme pleine). Même
   dégradé que l'accroche de l'accueil (.grad-text). */
.cat-hero__accent {
  background:linear-gradient(100deg,var(--orange) 0%,var(--amber) 38%,var(--cream) 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ═══ ITEM CARDS ═══ */
.items-section { padding:60px 0 100px; }
.menu-grid--cat { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }

.item-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:26px; display:flex; flex-direction:column; gap:12px;
  position:relative; overflow:hidden;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.item-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cat-color,var(--orange)); opacity:.55; transition:opacity var(--t-fast) var(--ease);
}
.item-card:hover { transform:translateY(-3px); border-color:var(--cat-color,var(--orange)); box-shadow:var(--sh-card); }
.item-card:hover::before { opacity:1; }
.item-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.item-card__emoji { font-size:2rem; flex-shrink:0; }
.item-card__price { font-family:var(--ff-t); font-size:1.5rem; font-weight:400; letter-spacing:var(--ls-t); color:var(--cat-color,var(--orange)); flex-shrink:0; }
.item-card__name { font-family:var(--ff-b); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.95rem; line-height:1.35; }
.item-card__desc { font-size:.86rem; line-height:1.6; color:var(--muted); }
.item-card__badge { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.05); color:var(--cat-color,var(--orange)); border:1px solid currentColor; padding:3px 10px; border-radius:100px; width:fit-content; }

/* ═══ CAT NAV ═══ */
.cat-nav {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:16px; padding:32px 0; border-top:1px solid var(--border); margin-top:32px;
}
.cat-nav a { display:flex; align-items:center; min-height:44px; gap:8px; text-decoration:none; color:var(--muted); font-size:.9rem; font-weight:600; transition:color var(--t-fast) var(--ease); }
.cat-nav a:hover { color:var(--text); }
.cat-nav__center a { color:var(--orange); font-weight:700; }

/* ═══ FLOAT CTA ═══ */
.float-cta { position:fixed; bottom:28px; right:28px; z-index:500; box-shadow:0 8px 32px rgba(0,0,0,.45); border-radius:100px; }

/* ═══ STATS ═══ */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; }
.stat { background:var(--card); padding:44px 28px; text-align:center; position:relative; }
.stat::after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px; background:linear-gradient(90deg,transparent,var(--orange),transparent); opacity:0; transition:opacity var(--t-fast) var(--ease); }
.stat:hover::after { opacity:1; }
.stat__icon { margin-bottom:12px; display:flex; justify-content:center; }
.stat__icon .ic-svg { width:26px; height:26px; }
.band-orange .stat__icon { color:var(--cream); opacity:.9; }
.stat__number { font-family:var(--ff-t); font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:400; letter-spacing:var(--ls-t); line-height:1; }
.stat__label { font-size:.83rem; color:var(--muted); margin-top:8px; font-weight:500; }

/* ═══ FOOTER ═══ */
.footer { padding:56px 0 28px; background:var(--s-black); border-top:1px solid rgba(230,230,235,.04); }
.footer__top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid var(--border); margin-bottom:28px; }
.footer__logo-link { display:flex; align-items:center; text-decoration:none; margin-left:-12px; }
.footer__tagline { font-size:.86rem; color:var(--muted); margin-top:12px; max-width:280px; line-height:1.65; }
.footer__socials { display:flex; gap:10px; margin-top:18px; }
.footer__soc { width:36px; height:36px; border-radius:10px 0 10px 10px; background:rgba(255,255,255,.04); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.footer__soc:hover { background:var(--orange); border-color:var(--orange); }
.footer__col-title { font-family:var(--ff-b); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:16px; }
/* Liens de navigation du pied de page : 19px de haut avant, on passe a 40px
   en zone cliquable (le gap compense pour que l'espacement visuel ne bouge pas). */
.footer__links { list-style:none; display:flex; flex-direction:column; gap:0; }
.footer__links a { color:rgba(245,245,243,.5); text-decoration:none; font-size:.86rem; transition:color var(--t-fast) var(--ease); display:block; padding:10px 0; }
.footer__links a:hover { color:var(--text); }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer__copy { font-size:.76rem; color:var(--muted); }
.footer__legal { display:flex; flex-wrap:wrap; gap:4px 16px; margin:-10px 0; }
.footer__legal a { font-size:.76rem; color:var(--muted); text-decoration:none; padding:10px 0; }
.footer__legal a:hover { color:var(--text); }

/* ═══ RESPONSIVE ═══ */
/* Bascule burger plus tot : la navbar a grandi (icone + liens Nous trouver/Avis) */
@media(max-width:1140px) {
  .navbar__links { display:none; }
  .navbar__burger { display:flex; }
}
@media(max-width:880px) {
  .footer__top { grid-template-columns:1fr; gap:28px; }
  .menu-grid--cat { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr; gap:1px; }
  .navbar__logo { margin-left:-12px; }
  .navbar__logo-word { height:30px; }
  .navbar__logo-sep { height:24px; margin:0 8px; }
  .navbar__logo-icon { height:42px; }
  .logo-loc { display:none; }
}
@media(max-width:600px) {
  .section { padding:72px 0; }
  .float-cta { bottom:16px; right:16px; }
  .cat-hero { padding-top:100px; padding-bottom:36px; }
}
@media(max-width:400px) {
  .navbar__logo-word { height:25px; }
  .navbar__logo-sep { height:20px; margin:0 6px; }
  .navbar__logo-icon { height:34px; }
}

/* ═══════════════════════════════════════════════
   ADVANCED ANIMATIONS  (inspired by tastycrousty.io)
═══════════════════════════════════════════════ */

/* ── Floating polaroid gallery (bobbing polaroid strip) ── */
.float-gallery {
  position:relative; padding:120px 0 140px;
  overflow:hidden;
}
.float-gallery__grid {
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(8px,1.6vw,22px); flex-wrap:nowrap; margin-top:48px;
  perspective:900px;
}
.float-card {
  flex:0 0 auto;
  width:clamp(100px,13vw,170px); aspect-ratio:3/4;
  background:linear-gradient(150deg,#26201A 0%,#332A20 100%);
  border:1px solid rgba(230,230,235,.12); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(2.6rem,5.5vw,4.4rem);
  box-shadow:var(--sh-panel), inset 0 1px 0 rgba(255,255,255,.05);
  position:relative; will-change:transform;
  animation:polaroid-bob 6s ease-in-out infinite;
}
.float-card::after {
  content:attr(data-cap); position:absolute; bottom:12px; left:0; right:0;
  text-align:center; font-family:var(--ff-b); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; color:var(--orange);
}
@keyframes polaroid-bob {
  0%,100% { transform:translateY(0) rotate(var(--r,0deg)); }
  50%     { transform:translateY(-14px) rotate(calc(var(--r,0deg) * -.8)); }
}
.float-card.f1 { --r:-6deg;  animation-delay:-.2s; margin-bottom:30px; }
.float-card.f2 { --r: 4deg;  animation-delay:-1.1s; margin-bottom:-10px; }
.float-card.f3 { --r:-3deg;  animation-delay:-2.3s; margin-bottom:40px; z-index:2; }
.float-card.f4 { --r: 5deg;  animation-delay:-.8s;  margin-bottom:-18px; }
.float-card.f5 { --r:-5deg;  animation-delay:-1.6s; margin-bottom:20px; }
.float-card.f6 { --r: 7deg;  animation-delay:-2.8s; margin-bottom:10px; }

.float-gallery__caption {
  text-align:center; padding:0 24px; position:relative; z-index:2;
}
.float-gallery__caption h2 {
  font-family:var(--ff-t); font-size:clamp(2rem,6vw,5rem); font-weight:400;
  letter-spacing:var(--ls-t); line-height:1; margin-top:14px;
}
.float-gallery__caption p {
  margin-top:18px; color:var(--muted); font-weight:500; max-width:500px; margin-left:auto; margin-right:auto;
}

/* ── Marquee / Ticker (rotated bands) ── */
.marquee {
  overflow:hidden; padding:18px 0; position:relative; z-index:5;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,var(--bg2) 0%,var(--bg3) 50%,var(--bg2) 100%);
}
/* Les bandes sont plus larges que la fenetre et pivotees : leur boite debordait
   de 7px a droite, ce qui donnait une barre de defilement horizontale sur tous
   les ecrans PC. Un conteneur qui masque le debord regle le probleme sans
   toucher au rendu. */
.marquee-clip { overflow:hidden; }
.marquee--orange { background:var(--orange); border-color:var(--orange); transform:rotate(-1.6deg); margin:-3vw -10px; }
.marquee--gold   { background:var(--amber);   border-color:var(--gold);   transform:rotate(1.6deg);  margin:-3vw -10px; }
.marquee__track {
  display:flex; gap:48px; width:max-content; align-items:center;
  animation:marquee-scroll 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee__item {
  font-family:var(--ff-t); font-size:clamp(1.15rem,2.1vw,1.7rem); font-weight:400;
  letter-spacing:var(--ls-t); white-space:nowrap;
  display:inline-flex; align-items:center; gap:18px;
}
.marquee--orange .marquee__item, .marquee--gold .marquee__item { color:var(--ink); }
.marquee__dot { width:7px; height:7px; border-radius:50%; background:var(--orange); display:inline-block; }
.marquee--orange .marquee__dot, .marquee--gold .marquee__dot { background:var(--ink); }

/* ── Animated gradient text ── */
/* Le dégradé traverse le zigzag : il part de l'orange (lisible sur le
   graphite) et arrive sur le crème (lisible sur l'orange). Statique —
   l'animation ajoutait du bruit sans rien dire. */
.grad-text {
  background:linear-gradient(100deg,var(--orange) 0%,var(--amber) 38%,var(--cream) 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Bob / rotation ── */
.bob { display:inline-block; animation:bob 3.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes spin-slow { to { transform:rotate(360deg) } }
/* Anneau pulsé — utilisé par .step__num::after */
@keyframes pulse-ring {
  0%{transform:scale(.55); opacity:0}
  20%{opacity:.65}
  100%{transform:scale(1.7); opacity:0}
}

/* ── Rotating SVG text badge ── */
.rot-badge {
  position:relative; width:140px; height:140px;
  display:inline-flex; align-items:center; justify-content:center;
}
.rot-badge svg { width:100%; height:100%; animation:spin-slow 18s linear infinite; }
.rot-badge text {
  font-family:var(--ff-b); font-weight:700; font-size:12px;
  letter-spacing:.2em; fill:var(--text); text-transform:uppercase;
}
.rot-badge__core {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.6rem;
}

/* ── Magnetic hook ── */
.magnetic { transition:transform var(--t-fast) var(--ease); will-change:transform; }

/* ── Clip-path image / block reveal ── */
.clip-reveal { clip-path:inset(0 100% 0 0); transition:clip-path var(--t-slow) var(--ease); }
.clip-reveal.visible { clip-path:inset(0 0 0 0); }

/* ── Floating-corner badge / sticker ── */
.sticker {
  position:absolute; top:-18px; right:-12px;
  background:var(--amber); color:var(--ink);
  font-family:var(--ff-b); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px;
  box-shadow:0 6px 18px rgba(233,161,27,.35);
  animation:bob 2.6s ease-in-out infinite;
  transform-origin:center;
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce) {
  .float-card, .marquee__track, .bob,
  .rot-badge svg, .sticker, .step__num::after { animation:none !important; }
}

@media(max-width:880px) {
  /* La hauteur etait figee a 70vh alors que le contenu en demandait plus :
     les cartes etaient tranchees net en bas (-48px sur iPhone, -122px sur
     iPad portrait, -612px en paysage). La section reprend sa hauteur reelle. */
  .float-gallery { padding:80px 0 90px; }
  .float-card { width:34vw; }
  .float-card.f4, .float-card.f5, .float-card.f6 { display:none; }
  .marquee--orange, .marquee--gold { transform:none; margin:0; }
}
/* Trois cartes cote a cote ne tiennent plus sous 480px : elles passent a deux,
   et la rangee peut respirer. */
@media(max-width:480px) {
  .float-gallery { padding:64px 0 72px; }
  .float-card { width:40vw; }
  .float-card.f3 { display:none; }
}

/* ═══════════════════════════════════════════════
   PLAISIR SECTION  (sensory value proposition)
═══════════════════════════════════════════════ */
.pleasure { padding:140px 0 130px; position:relative; overflow:hidden; }
.pleasure__bg-text {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--ff-t); font-size:clamp(7rem,22vw,22rem); font-weight:400;
  color:transparent; -webkit-text-stroke:1px rgba(199,199,204,.04);
  white-space:nowrap; pointer-events:none; user-select:none;
}
.pleasure__inner { position:relative; z-index:1; max-width:920px; margin:0 auto; text-align:center; }
.pleasure__kicker {
  display:inline-flex; align-items:center; gap:10px; font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  padding:6px 14px; border:1px solid rgba(199,199,204,.25); border-radius:100px;
  background:rgba(199,199,204,.06); margin-bottom:30px;
}
.pleasure__kicker::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pb 2.4s ease infinite; }
.pleasure__title {
  font-family:var(--ff-t); font-size:clamp(2.4rem,6.5vw,5.5rem);
  font-weight:400; line-height:1.08; letter-spacing:var(--ls-t); margin-bottom:36px;
}
.pleasure__title .acc-o { color:var(--orange); }
.pleasure__title .acc-g { color:var(--gold); }
.pleasure__copy {
  font-size:clamp(1.05rem,2vw,1.45rem); line-height:1.65;
  color:rgba(245,245,243,.55); max-width:720px; margin:0 auto;
}
.pleasure__copy em { color:var(--text); font-style:normal; font-weight:600; }
.pleasure__pillars {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:64px; max-width:880px; margin-left:auto; margin-right:auto;
}
.pillar {
  background:linear-gradient(170deg,var(--card) 0%,var(--card2) 100%);
  border:1px solid var(--border); border-radius:var(--r2);
  padding:32px 24px; text-align:center; position:relative; overflow:hidden;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pillar::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  opacity:0; transition:opacity var(--t-fast) var(--ease);
}
.pillar:hover { transform:translateY(-5px); border-color:rgba(239,124,28,.3); box-shadow:var(--sh-card); }
.pillar:hover::before { opacity:1; }
.pillar__icon { font-size:2.6rem; margin-bottom:14px; display:inline-block; }
.pillar__title { font-family:var(--ff-b); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.92rem; margin-bottom:8px; }
.pillar__text { font-size:.86rem; color:var(--muted); line-height:1.6; }

/* ═══════════════════════════════════════════════
   HOW-TO  (3-step ordering process)
═══════════════════════════════════════════════ */
.howto { padding:120px 0; position:relative; overflow:hidden; }
.howto::before, .howto::after {
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
}
.howto::before { top:0; } .howto::after { bottom:0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.howto__header { text-align:center; margin-bottom:64px; }
.howto__steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.howto__steps::before {
  content:''; position:absolute; top:50px; left:16%; right:16%; height:2px;
  background:repeating-linear-gradient(90deg,var(--orange) 0 8px,transparent 8px 16px);
  opacity:.25; z-index:0;
}
.step {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:36px 28px 32px; position:relative; z-index:1; text-align:center;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.step:hover { transform:translateY(-6px); border-color:var(--orange); box-shadow:var(--sh-panel); }
.step__num {
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--amber));
  color:var(--ink); font-family:var(--ff-t); font-size:2rem; font-weight:400; letter-spacing:var(--ls-t);
  margin-bottom:22px; box-shadow:0 10px 30px rgba(239,124,28,.35);
  position:relative;
}
.step__num::after {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid var(--orange); opacity:.3;
  animation:pulse-ring 2.6s ease-out infinite;
}
.step__icon { margin-bottom:16px; display:flex; justify-content:center; }
.step__title { font-family:var(--ff-b); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:1rem; margin-bottom:12px; }
.step__text { font-size:.92rem; color:var(--muted); line-height:1.65; }
/* Liens d'action isoles : 22px de haut sous le doigt, on passe a 44. */
.step__cta {
  display:inline-flex; align-items:center; min-height:44px;
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:.82rem; font-weight:700; color:var(--orange);
  text-decoration:none; letter-spacing:.02em;
}
.step__cta:hover { color:var(--gold); }

.howto__bottom { display:flex; justify-content:center; margin-top:56px; }

@media(max-width:880px) {
  .pleasure__pillars { grid-template-columns:1fr; gap:14px; }
  .howto__steps { grid-template-columns:1fr; gap:18px; }
  .howto__steps::before { display:none; }
}

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

/* ══════════════════════════════════════
   BANNIÈRE CONSENTEMENT COOKIES (CNIL)
══════════════════════════════════════ */
#tc-cookie-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:10001;
  background:rgba(18,18,20,.96); backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(230,230,235,.12);
  padding:18px 24px;
  transform:translateY(100%); opacity:0;
  transition:transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
#tc-cookie-banner.cookie-banner--visible { transform:translateY(0); opacity:1; }
#tc-cookie-banner.cookie-banner--hidden  { transform:translateY(110%); opacity:0; }
.cookie-banner__content {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cookie-banner__text { flex:1; min-width:220px; }
.cookie-banner__text strong { font-family:var(--ff-b); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; color:var(--text); }
.cookie-banner__text p { font-size:.8rem; color:var(--muted); margin-top:4px; line-height:1.55; }
.cookie-banner__actions { display:flex; gap:10px; flex-shrink:0; }
.cookie-btn {
  padding:10px 22px; border-radius:100px;
  font-weight:700; font-size:.84rem; cursor:pointer;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  white-space:nowrap;
}
.cookie-btn:hover { transform:translateY(-2px); }
.cookie-btn--refuse {
  background:transparent; color:var(--text);
  border:1.5px solid rgba(255,255,255,.18);
}
.cookie-btn--refuse:hover { border-color:var(--orange); color:var(--orange); }
.cookie-btn--accept {
  background:var(--orange); color:#fff; border:1.5px solid var(--orange);
  box-shadow:0 4px 16px rgba(239,124,28,.3);
}
.cookie-btn--accept:hover { box-shadow:0 8px 24px rgba(239,124,28,.5); }
.cookie-banner__link {
  font-size:.74rem; color:var(--muted); text-decoration:underline;
  flex-shrink:0; white-space:nowrap;
}
.cookie-banner__link:hover { color:var(--text); }

/* ── Placeholder carte (cookies refusés) ── */
.map-consent-placeholder {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:var(--card); border-radius:var(--r2); text-align:center; padding:32px;
}
.map-consent-placeholder__icon { font-size:3rem; }
.map-consent-placeholder p { font-size:.9rem; color:var(--muted); line-height:1.55; }
.map-consent-placeholder p span { display:block; font-size:.78rem; margin-top:4px; }

@media(max-width:640px) {
  .cookie-banner__actions { width:100%; }
  .cookie-btn { flex:1; text-align:center; }
  .cookie-banner__link { margin-left:auto; }
}

/* ═══════════════════════════════════════════════
   GRAMMAIRE DE LA DIAGONALE
   Le zigzag du hero ne se répète pas tel quel — il se
   décline en trois intensités : un écho pleine puissance
   (bande orange), des jonctions de sections en biais,
   et un coin coupé sur les cartes.
═══════════════════════════════════════════════ */

/* ── Surfaces : le rythme de la page ── */
.surf-deep     { background:var(--s-deep); }
.surf-raised   { background:var(--s-raised); }
.surf-graphite { background:var(--s-graphite); }

/* ── Jonction diagonale ──
   La section remonte de --edge et sa tranche haute est
   coupée au même angle partout : la section précédente
   apparaît dans le triangle libéré. */
.edge-top {
  position:relative;
  margin-top:calc(var(--edge) * -1);
  padding-top:calc(var(--edge) + 40px);
  clip-path:polygon(0 var(--edge), 100% 0, 100% 100%, 0 100%);
}
.edge-top--flip {
  clip-path:polygon(0 0, 100% var(--edge), 100% 100%, 0 100%);
}

/* ── Coin coupé des cartes ──
   border-radius asymétrique + languette triangulaire.
   (Un clip-path sur la carte entière supprimerait sa
   bordure sur l'arête coupée et son ombre portée.) */
.cat-card, .step, .pillar, .formula__item, .item-card {
  border-radius:var(--r2) 0 var(--r2) var(--r2);
}
.cat-card::after, .step::after, .pillar::after, .formula__item::after, .item-card::after {
  content:''; position:absolute; top:0; right:0;
  width:var(--notch); height:var(--notch);
  background:var(--cat-c, var(--cat-color, var(--orange)));
  clip-path:polygon(100% 0, 0 0, 100% 100%);
  transition:opacity var(--tr);
  opacity:.85; z-index:2; pointer-events:none;
}
.cat-card:hover::after, .step:hover::after,
.pillar:hover::after, .item-card:hover::after { opacity:1; }
.step, .pillar, .formula__item { position:relative; }

/* ── L'écho du hero ──
   Reprend le couple exact du haut de page : fond graphite et
   éclair orange plein, même tracé de clip-path. */
.band-orange {
  background:var(--s-hero);
  color:var(--text);
  position:relative; overflow:hidden;
}
.band-orange__zigzag {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--orange);
  clip-path:var(--bolt);
}
.band-orange > .container { position:relative; z-index:1; }
.band-orange .section-title,
.band-orange .stat__number { color:var(--cream); }
.band-orange .stat__label { color:var(--cream); opacity:.82; }

/* Les stats sur la bande : plus de cartes, des colonnes filetées */
.band-orange .stats {
  background:transparent; border:none; border-radius:0; gap:0;
}
.band-orange .stat {
  background:transparent;
  border-left:1px solid rgba(245,245,243,.22);
}
.band-orange .stat:first-child { border-left:none; }
.band-orange .stat::after { display:none; }

/* ═══════════════════════════════════════════════
   ICÔNES SVG
═══════════════════════════════════════════════ */
.ic-svg {
  width:24px; height:24px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:square; stroke-linejoin:miter;
}
/* Vignette : même coin coupé que les cartes */
.ic-tile {
  width:44px; height:44px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px 0 12px 12px;
  background:rgba(239,124,28,.1);
  border:1px solid var(--border);
  color:var(--cat-color, var(--orange));
  transition:background var(--tr), border-color var(--tr), color var(--tr);
}
.step:hover .ic-tile, .formula__item:hover .ic-tile {
  background:rgba(239,124,28,.18); border-color:var(--orange);
}
.formula__result .ic-tile {
  background:rgba(23,23,26,.16); border-color:rgba(23,23,26,.25); color:var(--ink);
}
.footer__soc .ic-svg { width:18px; height:18px; }
.footer__soc:hover { color:var(--ink); }
.soc-btn .ic-svg { width:17px; height:17px; }
.ic__icon .ic-svg { width:20px; height:20px; color:var(--orange); }

/* ═══════════════════════════════════════════════
   ACCENTS DE MARQUE
   L'orange est un accent, pas un fond. Le halo radial
   global a été retiré : il empêchait tout contraste
   orange d'exister ailleurs sur la page.
═══════════════════════════════════════════════ */

/* Barre de défilement */
::-webkit-scrollbar-thumb { background:var(--orange); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--amber); }

/* Liens de navigation : souligné orange au survol */
.navbar__link { position:relative; }
.navbar__link::after {
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:linear-gradient(90deg,var(--orange),var(--amber));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-fast) var(--ease);
  border-radius:2px;
}
.navbar__link:hover::after { transform:scaleX(1); }

/* Puces de liste légales */
.legal-content ul { list-style:none; }
.legal-content li { position:relative; padding-left:18px; }
.legal-content li::before {
  content:''; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--orange);
}

/* Sélection de texte */
::selection { background:var(--orange); color:#fff; }
::-moz-selection { background:var(--orange); color:#fff; }

/* Focus clavier (accessibilité + marque) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.navbar__link:focus-visible, input:focus-visible {
  outline:2px solid var(--orange); outline-offset:3px; border-radius:4px;
}

/* Footer */
.footer { border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--orange),transparent) 1; }
.footer__col-title { color:var(--orange); }
.footer__links a:hover, .footer__legal a:hover { color:var(--orange); }

/* Fil d'Ariane */
/* Le fil d'Ariane vit sur le hero : graphite a gauche, eclair orange a droite.
   Le gris muet ne valait que 2,37:1 sur le graphite, et le nom de la page
   courante — en orange — disparaissait purement et simplement sur l'eclair
   (1,00:1). Le creme est la seule valeur qui tienne sur les deux fonds. */
.breadcrumb a:hover { color:var(--cream); }
.breadcrumb > span:last-child { color:var(--cream); font-weight:600; }

/* Nav catégories */
.cat-nav a:hover { color:var(--orange); }

/* Sur-titres */
.howto__kicker, .formula__kicker, .contact__kicker { color:var(--orange); }

/* Prix : prennent la couleur de leur catégorie */
.item-card__price, .crousty-card__price, .big-card__price,
.kids-card__price, .cat-card__price, .price-banner__price,
.drink-card__price, .finger-item__price, .dessert-card__price,
.price-highlight__value { color:var(--cat-color,var(--orange)); }