/*
Theme Name:   I KA FOOD
Theme URI:    https://ikafood.ml
Description:  Thème enfant Astra sur mesure pour le restaurant I KA FOOD — Magnambougou Faso Kanu, Bamako. Cuisine malienne du terroir. Design éditorial premium, noir chaud et terre cuite. 100 % code custom, aucun constructeur de page.
Author:       Abdoulaye Konaté — Consultant Marketing Digital & IA
Author URI:   https://mrkonate.com
Template:     astra
Version:      2.1.0
Requires PHP: 8.1
Text Domain:  ika-food
Tags:         restaurant, editorial, dark, custom
*/

/* ==========================================================================
   SOMMAIRE
   1.  Variables — design system (charte v1.0)
   2.  Reset & base
   3.  Header & navigation
   4.  Composants globaux (boutons, icônes de plats)
   5.  Accueil — hero photo
   6.  Accueil — sections
   7.  Page « La carte »
   8.  Page « Nous trouver »
   9.  Footer & flottant WhatsApp
   10. Animations
   11. Responsive
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES — DESIGN SYSTEM
   ========================================================================== */
:root{
  /* Couleurs de marque (extraites du logo) */
  --terre:       #B33A1A;   /* couleur signature */
  --terre-clair: #D4552B;   /* petits labels sur fond sombre — contraste AA */
  --ocre:        #E9A31B;   /* CTA principal, accents */
  --creme:       #FBF1E0;   /* fond des sections claires */
  --cacao:       #241812;   /* texte sur fond clair */

  /* Noirs & neutres */
  --noir:        #0E0B09;
  --charbon:     #161110;
  --graphite:    #221B17;
  --fume:        #8A7F76;
  --blanc:       #F7F2EA;
  --sable:       #EFE7D8;

  /* Typographie */
  --display: 'Clash Display', 'Inter', sans-serif;
  --corps:   'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;

  /* Rythme */
  --ease: cubic-bezier(.22,1,.36,1);
  --pad:  clamp(20px,5vw,72px);
  --max:  1320px;
}


/* ==========================================================================
   2. RESET & BASE — neutralise aussi la mise en page d'Astra
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body,
body.ast-plain-container,
body.ast-separate-container{
  background:var(--noir);color:var(--blanc);
  font-family:var(--corps);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Astra : on reprend la main sur les conteneurs */
#page,#content,.site-content,.ast-container,.entry-content,
.site-content > .ast-container,.ast-page-builder-template .site-content > .ast-container{
  max-width:none!important;padding:0!important;margin:0!important;display:block!important;
}
.ast-separate-container .ast-article-single,
.ast-separate-container #primary{padding:0!important;margin:0!important;background:none!important}
#primary,#main{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
.entry-header,.ast-archive-description,.ast-single-post .entry-header{display:none!important}

::selection{background:var(--ocre);color:var(--noir)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase}

/* Réservé aux lecteurs d'écran */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* Lien d'évitement (accessibilité clavier) */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ocre);color:var(--noir);padding:14px 24px;font-weight:600;
}
.skip:focus{left:var(--pad);top:12px}

/* Grain — évite l'aplat numérique parfait */
body::after{
  content:'';position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:96px;
  transition:height .4s var(--ease);
}
.hdr::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--noir);opacity:0;transition:opacity .4s var(--ease);
}
.hdr.solid{height:74px}
.hdr.solid::before{opacity:.94;backdrop-filter:blur(14px)}
.hdr__logo img{height:58px;width:auto;transition:height .4s var(--ease)}
.hdr.solid .hdr__logo img{height:44px}

.nav{display:flex;align-items:center;gap:38px}
.nav a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blanc);opacity:.68;transition:opacity .3s var(--ease);position:relative;padding:6px 0;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ocre);
  transition:width .35s var(--ease);
}
.nav a:hover,.nav a.on{opacity:1}
.nav a:hover::after,.nav a.on::after{width:100%}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:1.5px;background:var(--blanc);position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:22px;height:1.5px;background:var(--blanc);transition:.3s var(--ease)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger.on span{background:transparent}
.burger.on span::before{top:0;transform:rotate(45deg)}
.burger.on span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--noir);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer a{
  font-family:var(--display);font-weight:500;font-size:clamp(38px,11vw,60px);
  line-height:1.25;letter-spacing:-.02em;opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease);
}
.drawer.open a{opacity:1;transform:none}
.drawer.open a:nth-child(1){transition-delay:.15s}
.drawer.open a:nth-child(2){transition-delay:.22s}
.drawer.open a:nth-child(3){transition-delay:.29s}
.drawer a:hover{color:var(--ocre)}
.drawer__foot{margin-top:48px;color:var(--fume)}


/* ==========================================================================
   4. COMPOSANTS GLOBAUX
   ========================================================================== */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ocre);color:var(--noir);
  font-weight:600;font-size:14.5px;padding:14px 26px;border-radius:999px;
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.cta:hover{background:#F5B02C;transform:translateY(-2px);color:var(--noir)}
.cta svg{width:17px;height:17px}
.cta--ghost{background:transparent;color:var(--blanc);padding:14px 4px}
.cta--ghost:hover{background:transparent;color:var(--ocre);transform:none}
.cta--terre{background:var(--terre);color:#fff}
.cta--terre:hover{background:#C9421E;color:#fff}
.cta--wa{background:#25D366;color:#0B2B18}
.cta--wa:hover{background:#2EE573;color:#0B2B18}

.sec-head{margin-bottom:clamp(48px,7vw,86px)}
.sec-head .mono{display:block;margin-bottom:20px;color:var(--ocre)}
.light .sec-head .mono{color:var(--terre)}
.sec-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(32px,5.4vw,66px);line-height:1.02;letter-spacing:-.03em;max-width:18ch;
}
.pad{padding:clamp(90px,13vw,170px) 0}
.light{background:var(--creme);color:var(--cacao)}
.dark{background:var(--noir)}
.deep{background:var(--charbon)}

/* --- Icônes de plats (51 dessins, générés en PHP) --- */
.dish__ico{
  width:34px;height:34px;flex:none;color:#6E635B;
  transition:color .4s var(--ease),transform .5s var(--ease);
}
.dish__ico svg{width:100%;height:100%;display:block;overflow:visible}
.dish:hover .dish__ico{color:var(--ocre);transform:scale(1.09)}

.dish__ico .s{opacity:0;transition:opacity .3s var(--ease)}
.dish:hover .dish__ico .s{animation:vap 2.1s ease-in-out infinite}
@keyframes vap{
  0%  {opacity:0;transform:translateY(2.5px) scaleY(.85)}
  28% {opacity:.95}
  100%{opacity:0;transform:translateY(-5px) scaleY(1.15)}
}
.dish:hover .dish__ico .s:nth-of-type(2){animation-delay:.35s}
.dish:hover .dish__ico .s:nth-of-type(3){animation-delay:.7s}

.dish:hover .dish__ico .b{animation:bob 1.7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.7px)}}

.dish:hover .dish__ico .w{animation:wig 1.5s ease-in-out infinite;transform-origin:16px 20px}
@keyframes wig{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

.dish__ico .f{stroke:var(--terre-clair);opacity:.7;transition:opacity .35s var(--ease)}
.dish:hover .dish__ico .f{opacity:1}

.dish__ico.pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-7deg)}100%{transform:scale(1)}}


/* ==========================================================================
   5. ACCUEIL — HERO PHOTO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(120px,15vh,168px);overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);
  transition:opacity 1.3s var(--ease),transform 9s linear;
}
.hero__media img.on{opacity:1;transform:scale(1.05)}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, #0E0B09 0%, rgba(14,11,9,.92) 28%, rgba(14,11,9,.60) 48%, rgba(14,11,9,.18) 70%, rgba(14,11,9,.50) 100%),
    linear-gradient(180deg, rgba(14,11,9,.90) 0%, rgba(14,11,9,.14) 24%, rgba(14,11,9,.12) 54%, rgba(14,11,9,.90) 100%);
}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero__eyebrow{color:var(--ocre);margin-bottom:28px}
.hero h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(42px,6.6vw,96px);line-height:.98;letter-spacing:-.018em;
  max-width:13ch;text-wrap:balance;
}
.hero h1 .accent{color:var(--ocre);font-weight:400}
.hero h1 .thin{font-weight:400;color:#C6BAAF}
.hero__lede{
  margin-top:30px;max-width:44ch;color:#C2B6AB;font-size:clamp(16px,1.5vw,18.5px);
  font-weight:300;line-height:1.65;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:40px}
.hero__meta{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;margin-top:46px;color:#9C9088}

.pulse{display:inline-flex;align-items:center;gap:9px}
.pulse i{width:7px;height:7px;border-radius:50%;background:#5FAE5F;flex:none;animation:pulse 2.4s infinite}
.pulse.shut i{background:var(--terre-clair);animation:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,174,95,.5)}
  70%{box-shadow:0 0 0 9px rgba(95,174,95,0)}
  100%{box-shadow:0 0 0 0 rgba(95,174,95,0)}
}

/* Rail bas : plat en vedette */
.rail{position:relative;z-index:1;margin-top:clamp(38px,6vh,64px);padding:22px 0 26px}
.rail::before{
  content:'';position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;
  background:linear-gradient(90deg,rgba(247,242,234,.16),rgba(247,242,234,.03) 60%,transparent);
}
.rail__in{
  max-width:var(--max);margin:0 auto;
  padding:0 calc(var(--pad) + 76px) 0 var(--pad);
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);
}
.rail__nav{display:flex;gap:8px;flex:none}
.rail__nav button{
  width:42px;height:42px;border-radius:50%;background:rgba(247,242,234,.07);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);
}
.rail__nav button:hover{background:var(--ocre)}
.rail__nav svg{width:16px;height:16px;stroke:var(--blanc);stroke-width:2;fill:none}
.rail__nav button:hover svg{stroke:var(--noir)}
.rail__txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.rail__lbl{color:var(--terre-clair);flex:none}
.rail__name{
  font-family:var(--display);font-weight:500;font-size:clamp(18px,2.2vw,27px);
  letter-spacing:-.02em;color:var(--blanc);transition:opacity .45s var(--ease);
}
.rail__price{font-family:var(--mono);font-size:14px;color:var(--ocre);transition:opacity .45s var(--ease);letter-spacing:.04em}
.rail.swap .rail__name,.rail.swap .rail__price{opacity:0}
.rail__dots{display:flex;gap:7px;flex:none}
.rail__dots i{width:22px;height:2px;background:rgba(247,242,234,.18);display:block;transition:background-color .4s var(--ease);cursor:pointer}
.rail__dots i.on{background:var(--ocre)}

/* Ticker */
.ticker{position:relative;z-index:1;padding:26px 0;overflow:hidden;background:var(--charbon)}
.ticker__track{display:flex;width:max-content;animation:slide 44s linear infinite}
.ticker span{
  font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,42px);
  letter-spacing:-.01em;color:#3A302A;padding:0 26px;white-space:nowrap;
}
.ticker span em{font-style:normal;color:var(--terre)}
@keyframes slide{to{transform:translateX(-50%)}}


/* ==========================================================================
   6. ACCUEIL — SECTIONS
   ========================================================================== */
/* Manifeste */
.manifeste{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(32px,6vw,90px);align-items:start}
.manifeste__txt p{font-size:clamp(17px,1.9vw,22px);line-height:1.62;color:#4A3A2E;font-weight:300}
.manifeste__txt p+p{margin-top:26px}
.manifeste__txt strong{font-weight:500;color:var(--cacao)}
.dropcap::first-letter{
  font-family:var(--display);font-weight:600;font-size:4.1em;line-height:.82;
  float:left;margin:6px 14px 0 0;color:var(--terre);
}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:clamp(56px,8vw,96px)}
.stat{padding:30px 0}
.stat__n{font-family:var(--display);font-weight:600;font-size:clamp(38px,6vw,72px);line-height:1;letter-spacing:-.03em;color:var(--cacao)}
.stat__n small{font-size:.42em;font-weight:500;color:var(--terre);margin-left:4px}
.stat__l{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8B7663;margin-top:14px}

/* Familles — lignes éditoriales + image au survol */
.cats{margin-top:-14px;position:relative}
.cat{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,4vw,52px);align-items:center;
  padding:clamp(24px,3.4vw,40px) 0;position:relative;cursor:pointer;
  transition:padding-left .5s var(--ease);
}
.cat::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(247,242,234,.07)}
.cat:last-of-type::after{display:none}
.cat::before{
  content:'';position:absolute;left:-100vw;right:-100vw;top:0;bottom:0;z-index:-1;
  background:linear-gradient(90deg,rgba(233,163,27,.055),transparent 65%);
  opacity:0;transition:opacity .45s var(--ease);
}
.cat:hover::before{opacity:1}
.cat:hover{padding-left:clamp(10px,2vw,26px)}
.cat__n{font-family:var(--mono);font-size:12px;color:var(--terre-clair);letter-spacing:.16em;align-self:start;padding-top:.9em}
.cat__t{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,4.6vw,54px);line-height:1.04;letter-spacing:-.03em;
  transition:color .35s var(--ease);
}
.cat:hover .cat__t{color:var(--ocre)}
.cat__d{
  color:var(--fume);font-size:14.5px;font-weight:300;margin-top:10px;max-width:52ch;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease);
}
.cat:hover .cat__d{max-height:80px;opacity:1}
.cat__p{font-family:var(--mono);font-size:13px;color:var(--fume);white-space:nowrap;text-align:right}
.cat__p b{display:block;font-family:var(--display);font-weight:500;font-size:22px;color:var(--blanc);letter-spacing:-.01em;margin-bottom:4px}

.cats__peek{
  position:fixed;top:0;left:0;z-index:5;pointer-events:none;
  width:clamp(210px,20vw,290px);aspect-ratio:3/4;
  opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
  will-change:transform,opacity;
}
.cats__peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cats__peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease)}
.cats__peek img.on{opacity:1}
.cats__peek::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,11,9,.35),transparent 26%,transparent 68%,rgba(14,11,9,.55));
}
.cat__thumb{display:none}

/* Formules */
.formules{display:grid;gap:0}
.formule{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:clamp(26px,3.6vw,40px) 0;position:relative}
.formule::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(36,24,18,.11)}
.formule:last-child::after{display:none}
.formule__t{font-family:var(--display);font-weight:500;font-size:clamp(24px,3.6vw,40px);letter-spacing:-.025em;line-height:1.1}
.formule__d{color:#7C6A5B;font-size:15px;font-weight:300;margin-top:9px;max-width:44ch}
.formule__p{font-family:var(--display);font-weight:600;font-size:clamp(22px,3.2vw,36px);color:var(--terre);letter-spacing:-.02em;white-space:nowrap}

/* Zones de livraison */
.zones{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,26px);margin-top:8px}
.zone{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,6.4vw,80px);line-height:1;letter-spacing:-.035em;
  color:#2E2621;transition:color .45s var(--ease);cursor:default;
}
.zone:hover{color:var(--ocre)}
.zones__note{margin-top:clamp(38px,5vw,60px);color:var(--fume);max-width:52ch;font-weight:300}

/* CTA final */
.final{text-align:center;padding:clamp(100px,15vw,190px) 0}
.final .mono{color:var(--ocre);display:block;margin-bottom:26px}
.final h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,7vw,92px);line-height:.98;letter-spacing:-.035em;max-width:16ch;margin:0 auto}
.final__tel{
  display:inline-block;margin-top:clamp(38px,5vw,58px);
  font-family:var(--display);font-weight:600;font-size:clamp(26px,4.4vw,56px);
  letter-spacing:-.02em;color:var(--ocre);transition:opacity .3s var(--ease);
}
.final__tel:hover{opacity:.72;color:var(--ocre)}
.final__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:40px}


/* ==========================================================================
   7. PAGE « LA CARTE »
   ========================================================================== */
.intro{padding:clamp(140px,18vw,215px) 0 clamp(44px,6vw,66px);position:relative;overflow:hidden}
.intro::before{content:'';position:absolute;inset:0;background:radial-gradient(85% 70% at 85% 0%,rgba(233,163,27,.09),transparent 58%)}
.intro .wrap{position:relative}
.intro .mono{color:var(--ocre);display:block;margin-bottom:24px}
.intro h1{font-family:var(--display);font-weight:600;font-size:clamp(44px,9.4vw,124px);line-height:.92;letter-spacing:-.035em}
.intro h1 em{font-style:normal;color:var(--ocre);font-weight:400}
.intro__lede{margin-top:28px;max-width:52ch;color:#B5AAA0;font-weight:300;font-size:clamp(15.5px,1.6vw,18px)}
.intro__meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;color:var(--fume)}
.intro__meta span{display:inline-flex;align-items:center;gap:22px}
.intro__meta span:not(:last-child)::after{content:'·';color:var(--terre-clair);font-size:14px}

/* Barre sticky : recherche, filtres, compteur, tri */
.bar{position:sticky;top:74px;z-index:60;background:rgba(14,11,9,.93);backdrop-filter:blur(14px);padding:18px 0 16px}
.bar__in{display:flex;align-items:center;gap:18px}
.search{position:relative;flex:none;width:250px}
.search svg{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--fume);fill:none;stroke-width:2}
.search input{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(247,242,234,.14);
  color:var(--blanc);font-family:var(--corps);font-size:14.5px;padding:10px 0 10px 26px;
  transition:border-color .3s var(--ease);
}
.search input::placeholder{color:#6B6058}
.search input:focus{outline:none;border-bottom-color:var(--ocre)}
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px 0}
.filters::-webkit-scrollbar{display:none}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 18px;border-radius:999px;color:var(--fume);white-space:nowrap;
  background:rgba(247,242,234,.045);transition:.3s var(--ease);
}
.chip:hover{color:var(--blanc);background:rgba(247,242,234,.09)}
.chip.on{background:var(--ocre);color:var(--noir)}

.bar__meta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:14px}
.count{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fume)}
.count b{color:var(--ocre);font-weight:500;display:inline-block;min-width:1.6em;text-align:right}
.count.flash b{animation:flash .5s var(--ease)}
@keyframes flash{0%{transform:translateY(-5px);opacity:0}100%{transform:none;opacity:1}}
.sort{display:flex;align-items:center;gap:4px}
.sort > span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6B6058;margin-right:6px}
.sort button{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 13px;border-radius:999px;color:var(--fume);
  background:rgba(247,242,234,.045);transition:.3s var(--ease);white-space:nowrap;
}
.sort button:hover{color:var(--blanc);background:rgba(247,242,234,.09)}
.sort button.on{background:rgba(233,163,27,.16);color:var(--ocre)}

/* Liste des plats */
.menu{padding:clamp(40px,6vw,70px) 0 clamp(120px,16vw,190px)}
.grp{margin-bottom:clamp(56px,8vw,96px)}
.grp__head{margin-bottom:8px;padding-bottom:22px}
.grp__t{font-family:var(--display);font-weight:500;font-size:clamp(26px,4.4vw,50px);letter-spacing:-.03em;line-height:1.05}
.grp__n{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--terre-clair);text-transform:uppercase}
.grp__note{font-size:14px;font-weight:300;color:var(--fume);font-style:italic;margin-top:10px}

.dish{display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;padding:16px 0;position:relative}
.dish::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(247,242,234,.055)}
.dish:last-child::after{display:none}
.dish__n{font-size:16.5px;font-weight:400;transition:color .3s var(--ease);line-height:1.35}
.dish__n small{display:block;font-size:13px;color:var(--fume);font-weight:300;margin-top:4px}
.dish:hover .dish__n{color:var(--ocre)}
.dish__lead{
  flex:1;min-width:26px;height:1px;align-self:center;margin:0 4px;
  background:repeating-linear-gradient(90deg,rgba(247,242,234,.2) 0 2px,transparent 2px 7px);
}
.dish__p{font-family:var(--mono);font-size:14px;color:var(--blanc);white-space:nowrap;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.dish__tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terre-clair);margin-left:10px;vertical-align:middle;
}
.dish.epuise{opacity:.42}
.dish.epuise .add{pointer-events:none;opacity:.4}

.add{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(247,242,234,.06);color:var(--blanc);
  transition:.3s var(--ease);position:relative;
}
.add::before{content:'';position:absolute;inset:-6px}
.add svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .3s var(--ease)}
.add:hover{background:var(--ocre);color:var(--noir)}
.add.in{background:var(--terre);color:#fff}
.add.in svg{transform:rotate(45deg)}
.dish.hide,.grp.hide{display:none}

.empty{padding:70px 0;text-align:center;color:var(--fume);display:none}
.empty.show{display:block}
.empty b{display:block;font-family:var(--display);font-size:26px;font-weight:500;color:var(--blanc);margin-bottom:10px;letter-spacing:-.02em}

/* Formules sur la page carte */
.formules-blk{background:var(--creme);color:var(--cacao);padding:clamp(64px,9vw,110px) 0;margin-top:clamp(40px,6vw,60px)}
.formules-blk .mono{color:var(--terre);display:block;margin-bottom:18px}
.formules-blk h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4.6vw,54px);letter-spacing:-.03em;line-height:1.03;margin-bottom:clamp(34px,5vw,54px)}
.frm{display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center;padding:24px 0;position:relative}
.frm::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(36,24,18,.11)}
.frm:last-child::after{display:none}
.frm__t{font-family:var(--display);font-weight:500;font-size:clamp(21px,3vw,32px);letter-spacing:-.025em}
.frm__d{color:#7C6A5B;font-size:14.5px;font-weight:300;margin-top:7px}
.frm__p{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.8vw,30px);color:var(--terre);letter-spacing:-.02em;white-space:nowrap}
.frm .add{background:rgba(36,24,18,.07);color:var(--cacao)}
.frm .add:hover,.frm .add.in{background:var(--terre);color:#fff}
.frm .dish__ico{width:38px;height:38px;color:#B09A83}
.frm:hover .dish__ico{color:var(--terre);transform:scale(1.09)}
.frm:hover .dish__ico .s{animation:vap 2.1s ease-in-out infinite}
.frm:hover .dish__ico .b{animation:bob 1.7s ease-in-out infinite}
.frm:hover .dish__ico .w{animation:wig 1.5s ease-in-out infinite;transform-origin:16px 20px}
.frm .dish__ico .f{stroke:var(--terre)}

/* Panier */
.cart{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--charbon);
  transform:translateY(105%);transition:transform .55s var(--ease);
  box-shadow:0 -24px 60px -24px rgba(0,0,0,.85);
}
.cart.up{transform:none}
.cart__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px var(--pad);max-width:var(--max);margin:0 auto;width:100%;cursor:pointer}
.cart__sum{display:flex;align-items:center;gap:16px;min-width:0}
.cart__count{width:34px;height:34px;border-radius:50%;background:var(--ocre);color:var(--noir);flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:500}
.cart__lbl{font-size:14.5px;color:var(--fume);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart__lbl b{display:block;font-family:var(--display);font-size:19px;font-weight:600;color:var(--blanc);letter-spacing:-.01em}
.cart__acts{display:flex;align-items:center;gap:10px;flex:none}
.cart__toggle{width:34px;height:34px;border-radius:50%;background:rgba(247,242,234,.06);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.cart__toggle svg{width:16px;height:16px;stroke:var(--blanc);stroke-width:2;fill:none;transition:transform .4s var(--ease)}
.cart.open .cart__toggle svg{transform:rotate(180deg)}
.cart__toggle:hover{background:rgba(247,242,234,.12)}
.cart__list{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.cart.open .cart__list{max-height:min(52vh,440px);overflow-y:auto}
.cart__inner{padding:6px var(--pad) 22px;max-width:var(--max);margin:0 auto}
.ci{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:13px 0;position:relative}
.ci::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(247,242,234,.055)}
.ci:last-child::after{display:none}
.ci__n{font-size:15px;line-height:1.3}
.ci__n small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--fume);margin-top:3px;letter-spacing:.04em}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:30px;height:30px;border-radius:50%;background:rgba(247,242,234,.06);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--blanc);transition:.25s var(--ease)}
.qty button:hover{background:var(--ocre);color:var(--noir)}
.qty span{min-width:26px;text-align:center;font-family:var(--mono);font-size:14px}
.ci__p{font-family:var(--mono);font-size:14px;min-width:74px;text-align:right;font-variant-numeric:tabular-nums}
.cart__foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:22px;margin-top:8px;border-top:1px solid rgba(247,242,234,.07)}
.cart__clear{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fume);transition:color .3s var(--ease)}
.cart__clear:hover{color:var(--terre-clair)}

.toast{
  position:fixed;left:50%;bottom:104px;z-index:95;transform:translate(-50%,16px);
  background:var(--blanc);color:var(--noir);font-size:14px;font-weight:500;
  padding:12px 22px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}


/* ==========================================================================
   8. PAGE « NOUS TROUVER »
   ========================================================================== */
.infos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,50px)}
.info{padding:34px 0}
.info h3{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--terre-clair);margin-bottom:20px}
.info .big{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.4vw,28px);line-height:1.25;letter-spacing:-.02em;transition:color .3s var(--ease)}
a.big:hover{color:var(--ocre)}
.info p{color:var(--fume);font-size:14.5px;font-weight:300;margin-top:12px;max-width:30ch}

.hours{background:var(--creme);color:var(--cacao)}
.hours .mono{color:var(--terre);display:block;margin-bottom:20px}
.hours h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4.8vw,58px);letter-spacing:-.03em;line-height:1.02;margin-bottom:clamp(38px,5vw,60px)}
.hours__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.day{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;position:relative}
.day::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(36,24,18,.11)}
.day:last-child::after{display:none}
.day__n{font-size:16.5px;font-weight:400}
.day__h{font-family:var(--mono);font-size:14px;color:#7C6A5B;font-variant-numeric:tabular-nums}
.day.now .day__n{font-weight:600}
.day.now .day__h{color:var(--terre)}
.day__tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--terre);margin-left:10px}
.service{padding:22px 0;position:relative}
.service::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(36,24,18,.11)}
.service:last-child::after{display:none}
.service b{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.02em;display:block;margin-bottom:6px}
.service span{color:#7C6A5B;font-size:14.5px;font-weight:300}

.map{position:relative;background:var(--charbon);padding:clamp(60px,8vw,96px) 0}
.map__frame{position:relative;aspect-ratio:16/8;min-height:300px;overflow:hidden;background:var(--graphite)}
.map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.88) sepia(.24) hue-rotate(345deg)}
.map__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;color:var(--fume)}
.map__ph b{font-family:var(--display);font-weight:500;font-size:clamp(20px,3vw,30px);color:var(--blanc);letter-spacing:-.02em}
.map__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.reach{text-align:center;padding:clamp(90px,13vw,170px) 0}
.reach .mono{color:var(--ocre);display:block;margin-bottom:24px}
.reach h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,6.4vw,84px);line-height:.99;letter-spacing:-.035em;max-width:15ch;margin:0 auto}
.reach__tel{display:inline-block;margin-top:clamp(34px,4.6vw,52px);font-family:var(--display);font-weight:600;font-size:clamp(26px,4.4vw,56px);letter-spacing:-.02em;color:var(--ocre);transition:opacity .3s var(--ease)}
.reach__tel:hover{opacity:.72;color:var(--ocre)}
.reach__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:38px}
.reach__mail{display:block;margin-top:30px;color:var(--fume);font-size:15px;transition:color .3s var(--ease)}
.reach__mail:hover{color:var(--blanc)}


/* ==========================================================================
   9. FOOTER & FLOTTANT WHATSAPP
   ========================================================================== */
.ftr{background:var(--noir);padding:clamp(64px,9vw,110px) 0 40px}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(32px,5vw,60px)}
.ftr__logo img{height:76px;margin-bottom:24px}
.ftr p{color:var(--fume);font-size:14.5px;font-weight:300;max-width:34ch}
.ftr h4{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ocre);margin-bottom:20px}
.ftr ul{list-style:none}
.ftr li{margin-bottom:12px}
.ftr li a,.ftr li span{color:#A2968C;font-size:14.5px;font-weight:300;transition:color .3s var(--ease)}
.ftr li a:hover{color:var(--blanc)}
.ftr__bot{margin-top:clamp(52px,7vw,84px);padding-top:28px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:#6B6058;font-size:12.5px;border-top:1px solid rgba(247,242,234,.06)}

.wa{
  position:fixed;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:80;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 34px -10px rgba(37,211,102,.55);
  transition:transform .35s var(--ease);
}
.wa:hover{transform:scale(1.07)}
.wa svg{width:29px;height:29px;fill:#fff}


/* ==========================================================================
   10. ANIMATIONS
   ========================================================================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}


/* ==========================================================================
   11. RESPONSIVE — mobile-first sur les points de rupture 1024 / 860 / 560
   ========================================================================== */
@media(max-width:1024px){
  .manifeste{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .infos{grid-template-columns:1fr 1fr}
  .hours__grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .nav,.hdr > .cta{display:none}
  .burger{display:flex}
  .hdr{height:78px}
  .hero{padding-top:110px}
  .bar{top:78px}
  html{scroll-padding-top:200px}
  .bar__in{flex-direction:column;align-items:stretch;gap:12px}
  .search{width:100%}
  .cat{grid-template-columns:auto auto 1fr;gap:16px;align-items:center}
  .cats__peek{display:none}
  .cat__thumb{display:block;width:74px;height:96px;object-fit:cover;flex:none}
  .cat__p{grid-column:3;text-align:left;margin-top:12px}
  .cat__d{max-height:none;opacity:1;overflow:visible}
  .stats{grid-template-columns:1fr 1fr}
  .formule{grid-template-columns:1fr}
  .formule__p{margin-top:14px}
  .frm{grid-template-columns:auto 1fr auto}
  .frm__p{grid-column:2;margin-top:10px}
  .infos{grid-template-columns:1fr}
  .info{padding:22px 0}
}
@media(max-width:560px){
  .ftr__grid{grid-template-columns:1fr}
  .hero__meta{gap:12px 20px}
  .dish{grid-template-columns:auto 1fr auto;gap:14px}
  .dish__ico{width:30px;height:30px}
  .dish__lead{display:none}
  .dish__p{grid-column:2;grid-row:2;margin-top:4px}
  .cart__lbl{font-size:13px}
  .dish__ico .s{opacity:.5}   /* pas de survol au doigt : animation discrète permanente */
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}