@charset "utf-8";
/* ==========================================================================
   Anas Pizza Original — Nantes
   Direction : reprendre l'enseigne (bleu nuit + orange de la salle + rouge
   du logo), traiter la carte comme un menu imprimé sur papier crème.
   Aplats francs, filets nets, pas d'effet lumineux, pas de verre dépoli.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées (RGPD : aucun appel à un CDN tiers)
   -------------------------------------------------------------------------- */
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-400-normal-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-400-normal-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}

@font-face{font-family:"Playfair Display";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-700-italic-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-700-italic-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}

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-normal-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-normal-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}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-italic-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-italic-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}

@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400-normal-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400-normal-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}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500-normal-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500-normal-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}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-normal-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-normal-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}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-normal-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-normal-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}

/* --------------------------------------------------------------------------
   2. Palette — relevée sur la devanture et la salle
   -------------------------------------------------------------------------- */
:root{
  /* Le brun d'un four à bois, pas le bleu d'une agence. La première version
     reprenait le bleu marine du panneau de l'enseigne : juste sur le papier,
     froid à l'écran. Le rouge, l'or et la crème restent ceux de la devanture ;
     seule la teinte sombre change, et le site sent la pizzeria. */
  --four-900:#1C120E;   /* pied de page — brun presque noir */
  --four-800:#2E1C15;   /* fond principal */
  --four-700:#3E281E;
  --four-600:#523528;
  --orange:#F4650F;     /* orange des murs de la salle */
  --orange-800:#A63C06;   /* orange foncé : 5,7:1 sur crème, 4,9:1 sur encadré, 6:1 sous du blanc */
  --red:#D0202A;        /* rouge du logo rond */
  --red-800:#A5151E;
  --brand-gold:#EFAA3C; /* le « PIZZA » doré de l'enseigne */
  --gold:#F5B325;       /* jaune des titres de la carte */
  --cream:#F6F1E7;      /* blanc cassé du lettrage */
  --cream-2:#EBE0CD;

  /* rôles — redéfinis par les thèmes de section ci-dessous */
  --bg:var(--four-800);
  --fg:var(--cream);
  --fg-2:#CBB9A7;
  --rule:rgba(246,241,231,.16);
  --rule-2:rgba(246,241,231,.09);
  --surface:#38221A;
  --surface-2:#452B21;

  /* typographie */
  --f-display:Anton,"Arial Narrow",Impact,sans-serif;
  --f-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:Barlow,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-serif:"Playfair Display",Georgia,serif;

  /* rythme */
  --shell:1180px;
  --gut:clamp(1.1rem,4.5vw,2.25rem);
  --sec:clamp(3.5rem,8vw,6rem);
  --r:6px;
  --r-l:10px;

  --ease:cubic-bezier(.22,.8,.3,1);
  --hdr:62px;
}

/* thème papier crème : la carte et les infos, comme un menu imprimé */
.t-cream{
  --bg:var(--cream);
  --fg:var(--four-800);
  --fg-2:#6E574A;
  --rule:rgba(28,43,62,.17);
  --rule-2:rgba(28,43,62,.1);
  --surface:#FFFDF8;
  --surface-2:var(--cream-2);
}
/* thème orange plein : le bandeau de repères */
.t-orange{
  --bg:var(--orange);
  --fg:#2E1C15;
  --fg-2:rgba(28,43,62,.82);
  --rule:rgba(28,43,62,.26);
  --rule-2:rgba(28,43,62,.15);
  --surface:rgba(255,255,255,.16);
  --surface-2:rgba(255,255,255,.1);
}
/* thème rouge plein : l'offre du mardi */
.t-red{
  --bg:var(--red);
  --fg:#FFF6E9;
  --fg-2:rgba(255,246,233,.85);
  --rule:rgba(255,246,233,.28);
  --rule-2:rgba(255,246,233,.15);
  --surface:rgba(0,0,0,.14);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Un display: explicite l'emporte sur la règle [hidden] du navigateur. Sans
   cette ligne, masquer un élément en JavaScript ne le masque pas dès qu'il
   porte un display: dans la feuille — le formulaire d'accès de l'écran
   cuisine restait visible après déverrouillage pour cette seule raison. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
body{
  margin:0;
  background:var(--four-800);
  color:var(--cream);
  font:400 clamp(1rem,.97rem + .16vw,1.06rem)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-wrap:pretty;
}
body.is-locked{overflow:hidden}
/* pages courtes (404) : le pied de page reste collé en bas de l'écran */
body{min-height:100svh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .18s var(--ease)}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.t-orange :focus-visible{outline-color:var(--four-800)}
::selection{background:var(--orange);color:#fff}

.container{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.section{background:var(--bg);color:var(--fg);padding-block:var(--sec);position:relative}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-100px;z-index:999;background:var(--gold);color:#1A1204;padding:.7rem 1.1rem;border-radius:var(--r);font-weight:700;transition:top .18s}
.skip:focus{top:8px}

/* --------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */
.eyebrow{
  font:700 .78rem/1 var(--f-body);
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);
  display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;
}
.eyebrow::before{content:"";width:22px;height:3px;background:currentColor;flex:none}
.eyebrow--center{justify-content:center}
.t-orange .eyebrow,.t-red .eyebrow{color:inherit}
.t-cream .eyebrow{color:var(--orange-800)}

.h-xl{font:400 clamp(2.3rem,1.3rem + 4.6vw,4.2rem)/.96 var(--f-display);letter-spacing:-.01em;text-transform:uppercase}
.h-l{font:400 clamp(2rem,1.4rem + 2.8vw,3.2rem)/1.06 var(--f-display);text-transform:uppercase}
.h-m{font:700 clamp(1.25rem,1.1rem + .8vw,1.6rem)/1.15 var(--f-cond);text-transform:uppercase;letter-spacing:.015em}
.lead{color:var(--fg-2);font-size:clamp(1.02rem,.99rem + .28vw,1.16rem);max-width:56ch}
.h-l + .lead,.h-l + p,.h-m + p,.h-xl + .lead{margin-top:1rem}
.tint{color:var(--orange)}
.t-cream .tint{color:var(--orange-800)}
.center{text-align:center}
.center .lead,.center .eyebrow{margin-inline:auto}

.sec-head{margin-bottom:clamp(2rem,4.5vw,3rem)}
.sec-head--split{display:grid;gap:1.2rem}

/* --------------------------------------------------------------------------
   5. Boutons — aplats francs, sans halo
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.4rem;min-height:50px;border-radius:var(--r);
  background:var(--orange-800);color:#fff;border:2px solid var(--orange-800);
  font:700 1rem/1 var(--f-cond);letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{background:var(--orange-800);border-color:var(--orange-800);color:#fff}
.btn--dark{background:var(--four-800);border-color:var(--four-800);color:var(--cream)}
.btn--dark:hover{background:var(--four-700);border-color:var(--four-700);color:var(--cream)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#1A1204}
.btn--gold:hover{background:#DF9F16;border-color:#DF9F16;color:#1A1204}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--fg)}
.btn--ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--sm{min-height:42px;padding:.55rem 1rem;font-size:.9rem}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}

/* --------------------------------------------------------------------------
   6. Bandeau promo défilant
   -------------------------------------------------------------------------- */
.ticker{background:var(--red);color:#FFF3E2;overflow:hidden;position:relative;z-index:60}
.ticker__track{display:flex;width:max-content;animation:tickerRoll 40s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;flex:none}
.ticker__item{
  display:inline-flex;align-items:center;padding:.45rem 1rem;
  font:700 .78rem/1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.ticker__item::after{content:"";width:4px;height:4px;background:var(--gold);margin-left:1rem}
@keyframes tickerRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --------------------------------------------------------------------------
   7. En-tête — bleu plein, comme le panneau de la devanture
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:70;
  background:var(--four-800);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.header.is-stuck{border-bottom-color:rgba(246,241,231,.14)}
.header__inner{display:flex;align-items:center;gap:.9rem;height:var(--hdr)}

/* Le logo est celui de l'enseigne, détouré de la photo de la devanture
   (voir outils/logo.js). Il ne se recompose pas : c'est une image, pas du
   texte mis en forme — le « A » calligraphique n'existe dans aucune police
   d'ici. Le nom reste lisible par les machines via l'attribut alt. */
.brand{display:inline-flex;align-items:center;color:var(--cream);flex:none;min-height:44px}
.brand__logo{display:block;width:min(46vw,206px);height:auto}

.nav{display:none}
.header__spacer{flex:1}
.header__cta{display:none}
.header__tel{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  padding:.45rem .8rem;border-radius:var(--r);
  border:1.5px solid rgba(246,241,231,.28);color:var(--cream);
  font:700 .9rem/1 var(--f-cond);letter-spacing:.04em;
  transition:background-color .18s,border-color .18s,color .18s;
}
.header__tel svg{width:15px;height:15px}
.header__tel:hover{background:var(--orange);border-color:var(--orange);color:#fff}

.burger{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r);border:1.5px solid rgba(246,241,231,.28)}
.burger span{display:block;width:18px;height:2px;background:var(--cream);transition:transform .3s var(--ease),opacity .16s}
.burger span+span{margin-top:5px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* tiroir mobile */
.drawer{position:fixed;inset:0;z-index:80;overflow:hidden;background:rgba(15,26,44,.7);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__panel{
  position:absolute;inset:0 0 0 auto;width:min(86vw,340px);
  background:var(--four-800);border-left:1px solid var(--rule);
  padding:.9rem var(--gut) 1.8rem;display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .34s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.drawer__close{width:44px;height:44px;border-radius:var(--r);border:1.5px solid var(--rule);display:grid;place-items:center;font-size:1.2rem}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem .1rem;border-bottom:1px solid var(--rule-2);
  color:var(--cream);font:700 1.15rem/1 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;
}
.drawer__link span{color:var(--orange)}
.drawer__link:hover{color:var(--gold)}
.drawer__foot{margin-top:auto;padding-top:1.4rem;display:grid;gap:.55rem}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
/* Le hero tenait tout le premier écran, et la carte commençait au deuxième.
   Le restaurant a demandé « la carte en premier » : on garde l'accroche, on
   lui retire la place qu'elle prenait. Un client qui arrive veut voir des
   pizzas, pas lire une présentation. */
.hero{background:var(--four-800);color:var(--cream);padding-block:clamp(1.4rem,3.5vw,2.4rem) clamp(1.6rem,4vw,2.8rem);position:relative;overflow:hidden}
.hero__inner{display:grid;gap:clamp(1.8rem,5vw,3rem)}

/* La pastille « Ouvert / Fermé » a été retirée du bandeau d'accueil. Elle
   annonçait une fermeture à un visiteur venu regarder la carte à 3h du matin,
   et le premier mot du site devenait « Fermé ». Les horaires sont dans
   « Infos & horaires », là où on les cherche. Le calcul d'ouverture reste
   dans assets/js/main.js : c'est lui qui met en valeur la ligne du jour dans
   le tableau des horaires. */

.hero h1{margin-bottom:1rem}
.hero h1 .line{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.hero h1 .line>span{display:block;transform:translateY(102%);animation:riseIn .7s var(--ease) forwards;animation-delay:calc(var(--i,0) * .08s + .05s)}
.hero h1 .rule{color:var(--orange)}
@keyframes riseIn{to{transform:none}}
.hero .lead,.hero .btn-row,.hero__meta{animation:fadeUp .6s var(--ease) both}
.hero .lead{animation-delay:.3s;margin-bottom:1.6rem}
.hero .btn-row{animation-delay:.38s}
.hero__meta{animation-delay:.46s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.hero__meta{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:1.5rem}
.tagpill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem;border:1px solid var(--rule);
  font:600 .8rem/1 var(--f-body);
}
.tagpill svg{width:13px;height:13px;color:var(--orange)}

/* Le dessin de pizza a laissé la place à une vraie photo. Une illustration,
   même bien faite, dit « site » ; une photo dit « restaurant ». Le bois de la
   photo est du même brun que le fond du bandeau : elle s'y pose sans coupure,
   d'où le cadre à peine marqué et l'ombre portée basse plutôt qu'un contour
   franc. */
.hero__art{display:grid;place-items:center}
.hero__photo{
  margin:0;width:min(86vw,460px);
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 50px rgba(0,0,0,.42);
}
.hero__photo img{display:block;width:100%;height:auto}
/* Sur téléphone, la photo passe en bandeau large : à pleine hauteur elle
   repoussait la carte sous la ligne de flottaison, et c'est la carte qu'on
   vient voir. */
@media (max-width:719px){
  .hero__inner{gap:1.2rem}
  .hero__photo{width:100%;aspect-ratio:16/9}
  /* Le sujet — le logo en haut, la pizza en bas — occupe presque toute la
     hauteur de la photo. Un rognage centré coupait le logo en deux ; décalé
     vers le haut, il ne mord que sur le bois. */
  .hero__photo img{height:100%;object-fit:cover;object-position:center 22%}
}

/* --------------------------------------------------------------------------
   9. Bandeau de repères (orange plein)
   -------------------------------------------------------------------------- */
.band{background:var(--bg);color:var(--fg)}
.band__grid{display:grid;grid-template-columns:repeat(2,1fr)}
.band__cell{padding:1.3rem 1rem;text-align:center;border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.band__cell:nth-child(2n){border-right:0}
.band__cell:nth-last-child(-n+2){border-bottom:0}
.band__n{font:400 clamp(1.6rem,1.2rem + 1.8vw,2.4rem)/1 var(--f-display)}
.band__l{font:600 .72rem/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin-top:.35rem}

/* --------------------------------------------------------------------------
   10. Nos engagements
   -------------------------------------------------------------------------- */
.specials{display:grid;gap:0;border-top:1px solid var(--rule)}
.special{padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.special__ico{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--orange);color:var(--orange);margin-bottom:.9rem}
.special__ico svg{width:22px;height:22px}
.special h3{margin-bottom:.4rem}
.special p{color:var(--fg-2);font-size:.96rem;max-width:42ch}

/* --------------------------------------------------------------------------
   11. La carte — traitée comme un menu imprimé sur papier crème
   -------------------------------------------------------------------------- */
.menu-tools{
  position:sticky;top:var(--hdr);z-index:40;
  background:var(--bg);
  padding-block:.8rem;margin-bottom:1.4rem;
  border-bottom:1px solid var(--rule);
}
.menu-search{position:relative;margin-bottom:.7rem}
.menu-search input{
  width:100%;min-height:48px;padding:.75rem 2.6rem .75rem 2.7rem;
  border:1.5px solid var(--rule);border-radius:var(--r);
  background:var(--surface);color:var(--fg);font:500 1rem/1 var(--f-body);
  transition:border-color .18s;
}
.menu-search input::placeholder{color:var(--fg-2)}
.menu-search input:focus{outline:none;border-color:var(--orange)}
.menu-search svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--fg-2);pointer-events:none}
.menu-search__clear{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:var(--r);display:none;place-items:center;color:var(--fg-2)}
.menu-search.has-value .menu-search__clear{display:grid}

.filters{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{
  flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem .95rem;border:1.5px solid var(--rule);border-radius:var(--r);
  font:700 .84rem/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);
  transition:color .18s,background-color .18s,border-color .18s;
}
.filter:hover{color:var(--fg);border-color:var(--fg)}
.filter[aria-pressed=true]{background:var(--four-800);border-color:var(--four-800);color:var(--cream)}

.menu-cat{margin-bottom:clamp(2rem,4.5vw,3rem);scroll-margin-top:calc(var(--hdr) + 110px)}
.menu-cat__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem 1rem;
  padding-bottom:.6rem;margin-bottom:1rem;border-bottom:3px solid var(--four-800);
}
.menu-cat__title{font:400 clamp(1.4rem,1.15rem + 1.3vw,2rem)/1 var(--f-display);text-transform:uppercase}
.menu-cat__title em{font-style:normal;color:var(--orange-800)}
.menu-cat__note{font-size:.9rem;color:var(--fg-2);flex-basis:100%}
.prices{display:flex;gap:.4rem;margin-left:auto}
.price-tag{display:inline-flex;align-items:baseline;gap:.4rem;padding:.3rem .6rem;background:var(--four-800);color:var(--cream);border-radius:var(--r)}
.price-tag span{font:600 .6rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.price-tag b{font:700 1rem/1 var(--f-cond)}

.items{display:grid;gap:0}
.item{
  display:grid;grid-template-columns:64px 1fr;gap:.85rem;align-items:start;
  padding:.8rem 0;border-bottom:1px solid var(--rule-2);
}
.item__img{
  width:64px;height:64px;border-radius:50%;flex:none;
  background:var(--surface-2);
}
.item__body{display:grid;gap:.2rem;min-width:0}
.item__top{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.item__name{font:italic 700 1.1rem/1.15 var(--f-cond);text-transform:uppercase;letter-spacing:.01em;color:var(--fg)}
.item__desc{color:var(--fg-2);font-size:.93rem;line-height:1.45}
.item__price{margin-left:auto;font:700 1rem/1 var(--f-cond);white-space:nowrap}
.badge{display:inline-flex;align-items:center;padding:.18rem .42rem;border-radius:3px;font:700 .62rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
.badge--veg{background:#DDF0E1;color:#1F6B37}
.badge--hot{background:#FBE0DE;color:#A8231C}
.badge--star{background:var(--four-800);color:var(--gold)}

.menu-empty{display:none;text-align:center;padding:2.5rem 1rem;color:var(--fg-2)}
.menu-empty.is-shown{display:block}
.menu-foot{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.9rem;color:var(--fg-2)}
.menu-foot a{color:var(--orange-800);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   12. Offre du mardi (rouge plein)
   -------------------------------------------------------------------------- */
.promo__grid{display:grid;gap:1.6rem;align-items:center}
.promo__price{
  display:grid;place-items:center;justify-self:start;
  width:clamp(132px,30vw,164px);aspect-ratio:1;border-radius:50%;
  background:var(--gold);color:#2A1500;
}
.promo__price b{font:400 clamp(2rem,1.5rem + 2.2vw,2.7rem)/1 var(--f-display)}
.promo__price span{font:700 .7rem/1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;margin-top:.3rem}

/* --------------------------------------------------------------------------
   13. La maison
   -------------------------------------------------------------------------- */
.about__grid{display:grid;gap:clamp(2rem,5vw,3rem);align-items:center}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.shot{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--surface);aspect-ratio:4/5}
.shot--wide{grid-column:span 2;aspect-ratio:16/10}
/* l'illustration sert de fond ; la vraie photo, si elle existe, passe dessus */
.shot__art{position:absolute;inset:0;width:100%;height:100%}
.shot img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.shot figcaption{z-index:2}
.art-serif{font-family:var(--f-serif);font-style:italic;font-weight:700}
.art-display{font-family:var(--f-display)}
.art-body{font-family:var(--f-body);font-weight:600}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .7rem;background:linear-gradient(transparent,rgba(15,26,44,.9));font:700 .74rem/1.2 var(--f-cond);letter-spacing:.09em;text-transform:uppercase;color:var(--cream)}
.values{display:grid;gap:.9rem;margin-top:1.6rem}
.value{display:flex;gap:.8rem;align-items:flex-start}
.value__ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border:2px solid var(--orange);color:var(--orange)}
.value__ico svg{width:18px;height:18px}
.value h3{font:700 1rem/1.2 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem}
.value p{color:var(--fg-2);font-size:.93rem}

/* --------------------------------------------------------------------------
   14. Infos pratiques
   -------------------------------------------------------------------------- */
.infos__grid{display:grid;gap:1rem}
.panel{padding:clamp(1.2rem,3.5vw,1.7rem);background:var(--surface);border:1px solid var(--rule)}
.panel h3{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:2px solid var(--four-800)}
.panel h3 svg{width:19px;height:19px;color:var(--orange-800);flex:none}

.hours{display:grid}
.hours__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.55rem .5rem;font-size:.95rem;color:var(--fg-2);border-bottom:1px solid var(--rule-2)}
.hours__row:last-child{border-bottom:0}
.hours__row dt{font-weight:500}
.hours__row dd{font-variant-numeric:tabular-nums;font-weight:600;color:var(--fg)}
.hours__row.is-today{background:var(--four-800);color:var(--cream);border-radius:var(--r)}
.hours__row.is-today dt::after{content:" · aujourd’hui";font-size:.82em;opacity:.75}
.hours__row.is-today dd{color:var(--gold)}

.contact-list{display:grid}
.contact-row{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--rule-2)}
.contact-row:last-child{border-bottom:0}
.contact-row__ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1.5px solid var(--rule);color:var(--orange-800)}
.contact-row__ico svg{width:17px;height:17px}
.contact-row dt{font:600 .68rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin-bottom:.2rem}
.contact-row dd{margin:0;font-weight:600;word-break:break-word}
.contact-row a:hover{color:var(--orange-800)}

.mapcard{
  display:grid;align-content:end;gap:.7rem;padding:1.3rem;min-height:190px;
  background:var(--four-800);color:var(--cream);border:1px solid var(--four-700);
  position:relative;overflow:hidden;
}
.mapcard::before{
  content:"";position:absolute;inset:0;opacity:.28;
  background-image:linear-gradient(rgba(246,241,231,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(246,241,231,.22) 1px,transparent 1px);
  background-size:34px 34px;
}
.mapcard__pin{position:absolute;top:34%;left:50%;translate:-50% -50%;width:34px;height:34px;border-radius:50% 50% 50% 2px;rotate:-45deg;background:var(--red);border:3px solid var(--cream)}
.mapcard__pin::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--cream)}
.mapcard__body{position:relative}
.mapcard__body strong{display:block;font:700 1rem/1.3 var(--f-cond);text-transform:uppercase;letter-spacing:.04em}
.mapcard__body span{color:#A6B6CE;font-size:.9rem}
.mapcard .btn{position:relative;justify-self:start;pointer-events:none}

/* --------------------------------------------------------------------------
   15. Commander
   -------------------------------------------------------------------------- */
.order__grid{display:grid;gap:1rem}
.ordercard{display:grid;gap:.6rem;padding:1.4rem;border:1px solid var(--rule);background:var(--surface)}
.ordercard__logo{font:700 1.25rem/1 var(--f-body);letter-spacing:-.015em}
.ordercard p{color:var(--fg-2);font-size:.94rem}
.ordercard .btn{margin-top:.3rem}
.ordercard__badge{font:700 .62rem/1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.ordercard--uber .ordercard__logo{color:#3ECF6B}
.ordercard--uber .btn{background:#059669;border-color:#059669;color:#fff}
.ordercard--uber .btn:hover{background:#047857;border-color:#047857}
.ordercard--tel .ordercard__logo{color:var(--orange)}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq{display:grid;max-width:80ch;border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1rem 2.6rem 1rem 0;
  font:700 1.02rem/1.35 var(--f-cond);letter-spacing:.02em;text-transform:uppercase;
  transition:color .18s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";position:absolute;right:.4rem;top:1.15rem;width:10px;height:10px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq__item[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq__item summary:hover{color:var(--orange)}
.faq__body{padding:0 0 1.1rem;color:var(--fg-2);font-size:.96rem;max-width:70ch}
.faq__body a{color:var(--gold);font-weight:600}

/* --------------------------------------------------------------------------
   17. Pied de page
   -------------------------------------------------------------------------- */
.footer{background:var(--four-900);color:var(--cream);border-top:3px solid var(--orange);padding-block:clamp(2.4rem,5vw,3.4rem) 1.4rem}
.footer__grid{display:grid;gap:1.9rem;margin-bottom:2rem}
.footer .brand{margin-bottom:.9rem}
.footer p{color:#A6B6CE;font-size:.93rem;max-width:38ch}
.footer h4{font:700 .74rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin-bottom:.9rem}
.footer__list{display:grid;gap:.55rem}
.footer__list a{color:#A6B6CE;font-size:.94rem}
.footer__list a:hover{color:var(--gold)}
.footer__bottom{border-top:1px solid rgba(246,241,231,.14);padding-top:1.3rem;display:grid;gap:.7rem;font-size:.85rem;color:#8FA0BA}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:0 1rem}
/* liens légaux : 22 px de haut au clic, on remonte à la cible de 44 px */
.footer__bottom nav a{display:inline-flex;align-items:center;min-height:44px}
.footer__bottom a:hover{color:var(--gold)}
/* La signature de l'agence. Elle héritait du « max-width:38ch » des
   paragraphes du pied de page : sur grand écran elle se pliait en trois
   lignes dans une colonne de 320 px, l'adresse renvoyée à la ligne derrière
   un point médian orphelin. D'où le sélecteur plus fort ici — « .footer p »
   pèse plus lourd que « .credit » seul, et c'est ce qui gagnait. */
.footer .credit{
  max-width:none;
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem;
  margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid rgba(246,241,231,.14);
  font-size:.82rem;color:#8FA0BA;
}
.credit__agence{display:inline-flex;align-items:center;gap:.6rem;min-height:44px}
.credit__logo{width:28px;height:28px;flex:none;color:#8FA0BA}
.credit a{color:#8FA0BA;font-weight:400;text-decoration:none}
.credit a b{color:var(--cream);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.credit__mail{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,241,231,.28)}
.credit a:hover,.credit a:hover b{color:var(--orange)}
/* Le séparateur n'apparaît que si les deux tiennent sur une ligne : replié,
   un point médian se retrouverait seul en tête de ligne. */
.credit__sep{display:none}
@media (min-width:560px){
  .credit__sep{display:block;width:1px;height:1.1em;background:rgba(246,241,231,.24)}
}

/* --------------------------------------------------------------------------
   18. Barre d'action mobile
   -------------------------------------------------------------------------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:65;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  background:var(--four-900);border-top:1px solid rgba(246,241,231,.16);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(102%);transition:transform .28s var(--ease);
}
.actionbar.is-shown{transform:none}
.actionbar a{
  display:grid;justify-items:center;gap:.2rem;padding:.6rem .3rem;
  color:var(--cream);font:700 .66rem/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
  border-right:1px solid rgba(246,241,231,.14);
}
.actionbar a:last-child{border-right:0}
.actionbar a svg{width:18px;height:18px;color:var(--gold)}
.actionbar a.is-primary{background:var(--orange);color:#fff;border-right-color:rgba(0,0,0,.18)}
.actionbar a.is-primary svg{color:#fff}

/* --------------------------------------------------------------------------
   19. Pages internes (mentions légales, confidentialité, 404)
   -------------------------------------------------------------------------- */
.page-hero{background:var(--four-800);color:var(--cream);padding-block:clamp(2.2rem,6vw,3.4rem) clamp(1.6rem,4vw,2.2rem);border-bottom:3px solid var(--orange)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.85rem;color:#A6B6CE;margin-bottom:.9rem}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--gold)}
.prose{max-width:74ch;padding-block:clamp(2rem,5vw,3rem)}
.section .prose{padding-block:0}
.prose h2{font:400 clamp(1.3rem,1.1rem + 1vw,1.7rem)/1.15 var(--f-display);text-transform:uppercase;color:var(--fg);margin:2.2rem 0 .8rem;padding-bottom:.4rem;border-bottom:2px solid var(--rule);scroll-margin-top:calc(var(--hdr) + 16px)}
.prose h2:first-child{margin-top:0}
.prose h3{font:700 1rem/1.3 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;color:var(--orange-800);margin:1.5rem 0 .4rem}
.prose p,.prose li{color:#5A463B}
.prose p+p{margin-top:.8rem}
.prose a{color:var(--orange-800);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Un bouton reste un bouton, même au milieu d'un texte : sans cette ligne,
   « .prose a » l'emporte sur « .btn » et le libellé devient orange sur
   orange, illisible. */
.prose a.btn{color:#fff;text-decoration:none}
.prose a.btn--ghost{color:var(--fg)}
.prose a.btn--ghost:hover{color:#fff}
.prose ul{margin:.7rem 0;display:grid;gap:.4rem}
.prose ul li{position:relative;padding-left:1.2rem}
.prose ul li::before{content:"";position:absolute;left:.1rem;top:.6em;width:5px;height:5px;background:var(--orange)}
.prose dl{display:grid;gap:.5rem;margin:1rem 0;padding:1.1rem 1.2rem;background:var(--surface);border:1px solid var(--rule)}
.prose dl div{display:grid;gap:.1rem}
.prose dt{font:600 .7rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.prose dd{margin:0;color:var(--fg);font-weight:600}
.prose ul.credits{gap:.7rem;font-size:.92rem}
.prose ul.credits b{color:var(--fg);font-weight:700}
.prose table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem}
.prose th,.prose td{text-align:left;padding:.65rem .7rem;border-bottom:1px solid var(--rule-2);vertical-align:top}
.prose th{background:var(--four-800);color:var(--cream);font:700 .74rem/1.2 var(--f-cond);letter-spacing:.08em;text-transform:uppercase}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.note{padding:1rem 1.1rem;border-left:4px solid var(--orange);background:var(--surface-2);margin:1.2rem 0;font-size:.93rem}
.toc{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.8rem}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .75rem;border:1px solid var(--rule);color:var(--fg-2);font:600 .82rem/1 var(--f-body)}
.toc a:hover{background:var(--four-800);border-color:var(--four-800);color:var(--cream)}

.err{min-height:60vh;display:grid;place-content:center;text-align:center;gap:1.1rem;padding-block:4rem}
.err__code{font:400 clamp(4.5rem,16vw,9rem)/.9 var(--f-display);color:var(--orange)}

/* --------------------------------------------------------------------------
   20. Apparitions au défilement (discrètes)
   -------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.is-in[data-reveal]{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   21. Points de rupture
   -------------------------------------------------------------------------- */
@media (max-width:419px){
  .header__tel span{display:none}
  .header__tel{width:44px;height:44px;padding:0;justify-content:center}
  .header__inner{gap:.55rem}
}

@media (min-width:600px){
  .band__grid{grid-template-columns:repeat(4,1fr)}
  .band__cell{border-bottom:0}
  .band__cell:nth-child(2n){border-right:1px solid var(--rule-2)}
  .band__cell:last-child{border-right:0}
  .specials{grid-template-columns:repeat(2,1fr);column-gap:2.5rem}
  .items{grid-template-columns:repeat(2,1fr);column-gap:2.5rem}
  .order__grid{grid-template-columns:repeat(2,1fr)}
  .footer__bottom{grid-template-columns:1fr auto;align-items:center}
  .sec-head--split{grid-template-columns:1fr auto;align-items:end}
  .promo__grid{grid-template-columns:auto 1fr;gap:2.2rem}
}

@media (min-width:900px){
  :root{--hdr:72px}
  .hero__inner{grid-template-columns:1.1fr .9fr;align-items:center}
  .hero__art{order:2}
  .nav{display:flex;align-items:center;gap:.1rem;margin-left:1rem}
  .nav a{position:relative;padding:.5rem .75rem;color:var(--cream);font:600 .87rem/1 var(--f-body)}
  .nav a::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.3rem;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
  .nav a:hover,.nav a.is-active{color:var(--gold)}
  .nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
  .burger{display:none}
  .header__cta{display:inline-flex}
  .specials{grid-template-columns:repeat(4,1fr);column-gap:2rem}
  .about__grid{grid-template-columns:1fr 1fr}
  .about__grid .about__media{order:2}
  .infos__grid{grid-template-columns:1fr 1fr}
  .infos__grid .mapcard{grid-column:1/-1}
  .order__grid{grid-template-columns:repeat(3,1fr);max-width:1080px}
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .actionbar{display:none}
}

@media (min-width:1100px){
  .items{grid-template-columns:repeat(3,1fr);column-gap:2rem}
  .item{grid-template-columns:58px 1fr}
  .item__img{width:58px;height:58px}
  .menu-tools{display:flex;align-items:center;gap:1.2rem}
  .menu-search{margin-bottom:0;flex:none;width:290px;order:2}
  .filters{order:1;flex:1;flex-wrap:wrap;overflow:visible}
  .filter{min-height:40px}
}

@media (min-width:900px){ body{padding-bottom:0} }
@media (max-width:899px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .promo__price{justify-self:center}
  .promo__grid{text-align:center;justify-items:center}
  .promo .eyebrow{justify-content:center}
  .promo .btn-row{justify-content:center}
}

/* --------------------------------------------------------------------------
   22. Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .hero h1 .line>span{transform:none}
  .actionbar{transform:none}
}

/* --------------------------------------------------------------------------
   23. Impression — la carte doit rester lisible sur papier
   -------------------------------------------------------------------------- */
@media print{
  .header,.ticker,.actionbar,.drawer,.hero__art,.menu-tools,.order,.credit{display:none!important}
  body{background:#fff;color:#111;padding:0}
  .section,.hero,.footer{background:#fff!important;color:#111!important}
  .item__img{display:none}
  .item{grid-template-columns:1fr}
  .item__name,.menu-cat__title,.h-l{color:#000!important}
  .item__desc,.lead,.footer p{color:#333!important}
  .price-tag{background:none;color:#000;border:1px solid #000}
}

/* --------------------------------------------------------------------------
   25. Livraison & avis
   -------------------------------------------------------------------------- */
.delivery{
  margin-top:1.6rem;padding:clamp(1.2rem,3.5vw,1.7rem);
  border:1px solid var(--rule);background:var(--surface);
  /* aligné sur la grille des trois moyens de commander, juste au-dessus */
  max-width:1080px;
}
.delivery h3{padding-bottom:.7rem;margin-bottom:1rem;border-bottom:2px solid var(--orange)}
.delivery__grid{display:grid;gap:.85rem}
.delivery__grid div{display:grid;gap:.15rem}
.delivery__grid dt{font:600 .68rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.delivery__grid dd{margin:0;font-weight:600}
.delivery__note{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule-2);font-size:.9rem;color:var(--fg-2)}
.delivery__note a{color:var(--gold);font-weight:600}

.review p{color:var(--fg-2);font-size:.96rem}
.review h3 svg{color:var(--gold)}

@media (min-width:600px){
  .delivery__grid{grid-template-columns:repeat(2,1fr);gap:1.1rem 2rem}
}

/* --------------------------------------------------------------------------
   26. Fiche détaillée d'un plat
   -------------------------------------------------------------------------- */
.item{position:relative}
.item__more{
  position:absolute;inset:0;width:100%;border-radius:var(--r);
  background:none;cursor:pointer;
}
.item__more:hover{background:rgba(28,43,62,.04)}
.item__more:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

.sheet{
  width:min(94vw,520px);max-height:88svh;padding:0;border:0;
  border-radius:var(--r-l);
  /* C'est le corps qui défile, pas la fiche entière : sinon la croix de
     fermeture — positionnée en absolu — s'en va avec le contenu, et sur
     grand écran la colonne photo laisse un rectangle vide derrière elle.
     Le display ne vaut que pour [open] : une déclaration d'auteur écrase
     le « display:none » que le navigateur applique à un <dialog> fermé,
     et la fiche resterait affichée par-dessus la page. */
  flex-direction:column;overflow:hidden;
  background:var(--cream);color:var(--four-800);
  --fg:var(--four-800);--fg-2:#6E574A;--rule:rgba(28,43,62,.17);--rule-2:rgba(28,43,62,.1);
  --surface:#FFFDF8;--surface-2:var(--cream-2);
}
.sheet[open]{display:flex}
.sheet::backdrop{background:rgba(15,26,44,.72)}
.sheet[open]{animation:sheetIn .28s var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sheet__close{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--four-800);color:var(--cream);font-size:1rem;
}
.sheet__close:hover{background:var(--orange)}
/* La photo est plafonnée en hauteur : sur un téléphone, un rapport 5/4 pris
   sur toute la largeur mangeait la moitié de l'écran et repoussait le nom du
   plat sous la ligne de flottaison. Le recadrage se charge du reste. */
.sheet__img{width:100%;height:auto;aspect-ratio:5/4;max-height:30svh;object-fit:cover;background:var(--cream-2);display:block;flex:none}
/* Deux garde-fous contre l'écrasement du corps de la fiche.

   Sur l'iPhone du client, la fiche s'ouvrait réduite à sa photo : sous
   l'image, une bande de trois lignes de haut où l'on devinait le début des
   badges, et rien d'autre. Ni le nom, ni les tailles, ni le bouton. Mesuré
   sur sa capture : photo 282 px, corps 24 px.

   La fiche n'a pas de hauteur imposée, seulement un plafond. Pour deviner
   sa hauteur, le moteur part de la base de ses enfants : avec « flex:1 »,
   donc une base de 0, le corps ne pèse rien dans ce calcul. Les Safari
   récents rattrapent en mesurant le contenu réel — Chromium aussi, ce qui
   explique que rien n'ait été vu d'ici — les plus anciens laissent le corps
   à zéro.

   1. flex-basis « auto » : le corps pèse ce qu'il contient. C'est la règle
      juste, et elle suffit partout où le calcul est correct.
   2. min-height : une hauteur plancher, qu'aucun calcul de flexbox ne peut
      contourner. Même si un moteur estime le corps à zéro, il ne peut pas
      descendre en dessous. C'est le filet.

   Le corps garde le droit de rétrécir sous son contenu — 11rem est très
   au-dessous — donc il continue de défiler, et c'est toujours lui, et non
   la fiche entière, qui bouge. Sur un écran très bas la photo disparaît
   (voir plus bas) : le plancher reste alors largement tenable. */
.sheet__body{padding:clamp(1.2rem,4vw,1.7rem);overflow-y:auto;overscroll-behavior:contain;min-height:11rem;flex:1 1 auto}
.sheet__badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}
.sheet__badges:empty{display:none}
.sheet h2{margin-bottom:.5rem}
.sheet__prices{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.sheet__label{
  font:700 .68rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);margin:1.2rem 0 .55rem;padding-bottom:.4rem;border-bottom:1px solid var(--rule);
}
.sheet__ing{display:flex;flex-wrap:wrap;gap:.4rem}
.sheet__ing li{
  padding:.35rem .7rem;border:1px solid var(--rule);border-radius:var(--r);
  font:600 .88rem/1 var(--f-body);background:var(--surface);
}
.sheet__supp{font-size:.93rem;font-weight:600}
.sheet__allerg{
  margin-top:1.3rem;padding:.85rem 1rem;border-left:4px solid var(--orange);
  background:var(--cream-2);font-size:.86rem;color:#5A463B;
}
.sheet .btn-row{margin-top:1.3rem}
/* Le bouton qui valide reste sous la main, même au milieu d'une longue liste
   de suppléments. Le halo reprend le fond de la fiche : sans lui, le bouton
   a l'air posé au hasard par-dessus les ingrédients. Et la liste garde de
   quoi défiler sous lui, pour que le dernier supplément reste atteignable. */
#p-form{display:flex;flex-direction:column;padding-bottom:.4rem}
#p-form #p-add{
  position:sticky;bottom:0;z-index:1;margin-top:1.3rem;
  box-shadow:0 0 0 .55rem var(--cream);
}
@media (min-width:560px){
  .sheet{width:min(94vw,760px);grid-template-columns:260px 1fr;grid-template-rows:minmax(0,1fr)}
  .sheet[open]{display:grid}
  /* max-height retiré : en colonne latérale la photo doit tenir toute la
     hauteur de la fiche, le plafond du téléphone la couperait net. */
  .sheet__img{height:100%;aspect-ratio:auto;max-height:none;align-self:stretch}
  /* Le plancher du corps ne sert qu'au cas où le calcul de hauteur écrase le
     texte, ce qui ne peut pas arriver ici : la grille lui donne sa rangée. */
  .sheet__body{min-height:0}
}
/* Fenêtre basse — un portable posé sur un bureau : la photo mange la place
   dont le texte a besoin. On la réduit, puis on la retire. */
@media (min-width:560px) and (max-height:620px){
  .sheet{grid-template-columns:190px 1fr}
}
@media (max-height:520px){
  .sheet[open]{display:flex}
  .sheet__img{display:none}
}

/* --------------------------------------------------------------------------
   21. Commande en ligne
   -------------------------------------------------------------------------- */
.page-commande{display:flex;flex-direction:column;min-height:100dvh}
.page-commande main{flex:1}
/* la barre de panier flotte au-dessus du contenu : on lui laisse la place */
.page-commande .footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
/* la barre du panier flotte au-dessus : on réserve sa hauteur pour que le
   dernier plat de la liste reste atteignable */
.page-commande .cmd__cats{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.page-commande .actionbar{display:none!important}

.cmd__panel .lead{margin-bottom:1.6rem}
.cmd__note{font-size:.88rem;color:var(--fg-2);margin-top:1.2rem}
.cmd__note--pay{display:flex;align-items:center;gap:.5rem;justify-content:center;text-align:left}
.cmd__note--pay svg{width:18px;height:18px;flex:none}
.cmd__erreur{
  margin:1rem 0;padding:.85rem 1rem;border-left:4px solid var(--red);
  background:#FDECEC;color:#8C1219;font-size:.9rem;font-weight:600;
}
.cmd__legal{font-size:.82rem;color:var(--fg-2);margin:1.4rem 0 1rem;line-height:1.55}
.cmd__back{
  display:inline-flex;align-items:center;min-height:44px;margin-bottom:.4rem;
  font:700 .78rem/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);
}
.cmd__back:hover{color:var(--orange-800)}

/* fil des étapes */
.steps{
  display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;
  margin-bottom:clamp(1.4rem,4vw,2.2rem);padding-bottom:.3rem;
}
.steps::-webkit-scrollbar{display:none}
.steps__i{
  flex:none;display:flex;align-items:center;gap:.45rem;padding:.45rem .7rem;
  border:1.5px solid var(--rule);border-radius:var(--r);
  font:700 .72rem/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);
}
.steps__i span{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--four-800);color:var(--cream);font-size:.68rem;
}
.steps__i.is-on{border-color:var(--four-800);color:var(--fg)}
.steps__i.is-on span{background:var(--four-800);color:var(--cream)}
.steps__i.is-done{border-color:var(--orange);color:var(--orange-800)}
.steps__i.is-done span{background:var(--orange);color:#fff}
/* Sur un téléphone, quatre étiquettes ne tiennent pas : la rangée défilait
   et les étapes 3 et 4 disparaissaient hors de l'écran. On ne garde alors
   que le libellé de l'étape en cours ; les autres se réduisent à leur
   numéro, et les quatre tiennent d'un coup d'œil. */
@media (max-width:559px){
  .steps{gap:.35rem;justify-content:flex-start}
  .steps__i{padding:.4rem .5rem;font-size:.68rem}
  .steps__i:not(.is-on){font-size:0;gap:0;padding:.4rem}
  .steps__i:not(.is-on) span{font-size:.68rem}
}

/* étape 1 — formule */
.modes{display:grid;gap:.8rem;margin-top:1.4rem}
.mode{
  display:grid;gap:.25rem;padding:1.2rem 1.3rem;text-align:left;
  border:1.5px solid var(--rule);border-radius:var(--r);background:var(--surface);
  transition:border-color .18s,background-color .18s;
}
.mode:hover{border-color:var(--orange);background:var(--cream-2)}
/* Hors créneau : visiblement éteint, mais toujours lisible — le client doit
   pouvoir lire l'horaire de livraison, c'est justement l'information utile. */
.mode--ferme{opacity:.55;cursor:not-allowed;background:var(--cream-2)}
.mode--ferme:hover{border-color:var(--rule);background:var(--cream-2)}
.mode--ferme span{color:var(--red);font-weight:600}
.mode svg{width:26px;height:26px;color:var(--orange-800);margin-bottom:.3rem}
.mode b{font:400 1.35rem/1 var(--f-display);text-transform:uppercase;color:var(--fg)}
.mode span{font-size:.88rem;color:var(--fg-2)}
@media (min-width:620px){.modes{grid-template-columns:1fr 1fr}}

/* étape 2 — rubriques */
.cmd__tabs{margin-bottom:1.4rem}
.cmd__cats .item__more{cursor:pointer}

/* fiche produit : options */
.opts{display:grid;gap:.5rem}
.opts--wrap{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.opt{position:relative;display:block}
.opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.opt span{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  min-height:48px;padding:.5rem .9rem;border:1.5px solid var(--rule);border-radius:var(--r);
  background:var(--surface);font-weight:600;transition:border-color .16s,background-color .16s;
}
.opt span b{font:700 1rem/1 var(--f-cond)}
.opt input:checked + span{border-color:var(--four-800);background:var(--four-800);color:var(--cream)}
.opt input:focus-visible + span{outline:3px solid var(--orange);outline-offset:2px}
.opt--sm span{min-height:44px;padding:.45rem .8rem;font-size:.88rem;font-weight:600}
.supp__t{
  font:700 .78rem/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-2);margin:.9rem 0 .45rem;
}
.supp__t b{color:var(--orange-800)}
.sheet__opt{font-weight:400;text-transform:none;letter-spacing:0;opacity:.8}

.qte{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.4rem 0 1rem}
.qte > span{font:700 .72rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.qte__ctrl{display:flex;align-items:center;border:1.5px solid var(--rule);border-radius:var(--r)}
.qte__b{width:48px;height:48px;display:grid;place-items:center;font-size:1.3rem;color:var(--fg)}
.qte__b:hover{background:var(--cream-2)}
.qte output{min-width:2.4rem;text-align:center;font:700 1.1rem/1 var(--f-cond)}

/* étape 3 — formulaire */
.form{display:grid;gap:1rem;max-width:38rem;margin-top:1.3rem}
.champ{display:grid;gap:.3rem}
.champ label{font:700 .72rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.champ label span{text-transform:none;letter-spacing:0;font-weight:400;opacity:.8}
.champ input,.champ textarea{
  width:100%;min-height:50px;padding:.7rem .9rem;font:400 1rem/1.4 var(--f-body);color:var(--fg);
  background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r);
  transition:border-color .16s;
}
.champ textarea{min-height:auto;resize:vertical}
/* Le gris par défaut du navigateur est assez foncé pour qu'un exemple passe
   pour une valeur déjà saisie — d'où le préfixe « Ex. » et ce ton plus clair. */
.champ input::placeholder,.champ textarea::placeholder{color:var(--fg-2);opacity:.72}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--orange)}
.champ small{font-size:.82rem;color:var(--fg-2)}
.champ-duo{display:grid;gap:1rem}
@media (min-width:520px){.champ-duo{grid-template-columns:1fr 1.4fr}}

/* étape 4 — récapitulatif */
.recap{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);padding:.4rem 1rem}
.recap__l{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule-2)}
.recap__l b{font:700 1rem/1.3 var(--f-cond);white-space:nowrap}
.recap__l--s{color:var(--fg-2)}
.recap__l--t{border-bottom:0;padding-top:.8rem}
.recap__l--t span{font:700 .8rem/1.6 var(--f-cond);letter-spacing:.08em;text-transform:uppercase}
.recap__l--t b{font-size:1.35rem;color:var(--orange-800)}
.recap__client{margin-top:1.4rem}
.recap__client p{color:#5A463B;font-size:.94rem}
.recap__com{margin-top:.5rem;font-style:italic}
.btn--pay{margin-top:.4rem}

/* panier flottant */
.cart{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--four-900);border-top:1px solid rgba(246,241,231,.16);
  padding-bottom:env(safe-area-inset-bottom);
}
.cart__inner{display:flex;align-items:center;gap:.7rem;padding-block:.6rem}
.cart__see{display:flex;align-items:center;gap:.6rem;flex:1;min-height:48px;color:var(--cream);text-align:left}
.cart__n{
  width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--orange);color:#fff;font:700 .85rem/1 var(--f-cond);
}
.cart__t{font:700 .78rem/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase}
.cart__p{margin-left:auto;font:700 1.15rem/1 var(--f-cond)}
.cart__go{flex:none}
/* Un bouton bloqué doit rester lisible : à 45 % d'opacité sur fond marine,
   le libellé disparaissait et l'on ne savait plus quoi lire. */
.cart__go[disabled]{background:transparent;border-color:rgba(246,241,231,.4);color:#D3C3B3;pointer-events:none}
.cart__list{max-height:46vh;overflow-y:auto;border-top:1px solid rgba(246,241,231,.16);padding:.6rem clamp(1rem,4vw,2rem)}
.cart__line{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;align-items:center;padding:.45rem 0;color:var(--cream)}
.cart__q{font:700 .9rem/1 var(--f-cond);color:var(--gold)}
.cart__n2{font-size:.9rem}
.cart__pp{font:700 .95rem/1 var(--f-cond);white-space:nowrap}
.cart__x{width:34px;height:34px;display:grid;place-items:center;color:#8FA0BA;border-radius:var(--r)}
.cart__x:hover{color:#fff;background:rgba(246,241,231,.12)}
.cart__sum{display:flex;justify-content:space-between;padding:.4rem 0;color:#8FA0BA;font-size:.86rem}
.cart__sum b{color:var(--cream)}
.cart__avert{
  padding:.55rem clamp(1rem,4vw,2rem);background:var(--red);color:#fff;
  font-size:.85rem;font-weight:600;text-align:center;line-height:1.35;
}

/* tableau des allergènes (CGV) */
.allerg{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.9rem}
.allerg th,.allerg td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--rule-2);vertical-align:top}
.allerg thead th{
  background:var(--four-800);color:var(--cream);
  font:700 .7rem/1.2 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
  position:sticky;top:calc(var(--hdr) - 1px);z-index:1;
}
/* .prose th donne un fond bleu marine à TOUTES les cellules d'en-tête ;
   sans cette remise à zéro, les noms de plats sont bleu sur bleu. */
.allerg tbody th{background:transparent;font-weight:700;color:var(--fg);width:42%}
.allerg td{color:#5A463B}
.allerg__cat th{
  background:var(--cream-2);color:var(--orange-800);
  font:700 .7rem/1.2 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;width:auto;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   22. Écran cuisine (interne)
   -------------------------------------------------------------------------- */
.page-cuisine{background:var(--four-900);color:var(--cream);min-height:100dvh}
.kit__bar{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,3vw,1.6rem);background:var(--four-800);
  border-bottom:1px solid rgba(246,241,231,.16);
}
.kit__etat{margin-left:auto;font:700 .78rem/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;color:#8FA0BA}
.kit__etat.est-ok{color:#6FD08C}
.kit__etat.est-ko{color:#FF8A8A}
.kit__son{
  display:flex;align-items:center;gap:.35rem;min-height:40px;padding:.3rem .7rem;
  border:1.5px solid rgba(246,241,231,.24);border-radius:var(--r);color:var(--cream);
  font:700 .74rem/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;
}
.kit__son[aria-pressed=false]{opacity:.5}

.kit{padding:clamp(1rem,3vw,1.6rem)}
.kit__acces{max-width:22rem;margin:12vh auto;display:grid;gap:.9rem}
.kit__acces h1{font:400 2rem/1 var(--f-display);text-transform:uppercase}
.kit__acces p{color:#8FA0BA}
.kit__acces .champ label{color:#8FA0BA}
.kit__acces .champ input{background:var(--four-800);border-color:rgba(246,241,231,.24);color:var(--cream)}
.kit__vide{text-align:center;color:#8FA0BA;padding:16vh 1rem}

.kit__grille{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.kit__c{
  display:flex;flex-direction:column;gap:.6rem;padding:.9rem 1rem 1rem;
  background:var(--four-800);border:1px solid rgba(246,241,231,.16);border-left:5px solid var(--orange);
  border-radius:var(--r);
}
.kit__c.est-faite{opacity:.42;border-left-color:#6FD08C}
.kit__c-h{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.kit__mode{
  padding:.22rem .55rem;border-radius:var(--r);
  font:700 .66rem/1.4 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
}
.kit__mode--livraison{background:var(--orange);color:#fff}
.kit__mode--emporter{background:var(--gold);color:var(--four-900)}
.kit__h{font:700 1.15rem/1 var(--f-cond)}
.kit__id{margin-left:auto;font:600 .74rem/1 var(--f-body);letter-spacing:.1em;color:#8FA0BA}
.kit__art{display:grid;gap:.3rem;font-size:1.02rem;line-height:1.35}
.kit__art b{color:var(--gold);font:700 1.05rem/1 var(--f-cond);margin-right:.2rem}
.kit__com{padding:.5rem .7rem;background:var(--red);color:#fff;border-radius:var(--r);font-size:.9rem;font-weight:600}
.kit__c-f{padding-top:.6rem;border-top:1px solid rgba(246,241,231,.16);display:grid;gap:.15rem}
.kit__cli{font-size:.92rem}
.kit__cli a{color:var(--gold);text-decoration:underline}
.kit__adr{font-size:.9rem;color:#D3C3B3}
.kit__tot{font:700 1.2rem/1 var(--f-cond);color:var(--gold);margin-top:.3rem}
.kit__ok{
  min-height:48px;border:1.5px solid rgba(246,241,231,.28);border-radius:var(--r);
  color:var(--cream);font:700 .78rem/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
}
.kit__ok:hover{background:rgba(246,241,231,.12)}
.est-faite .kit__ok{border-color:#6FD08C;color:#6FD08C}

/* page de confirmation de commande */
.merci{max-width:40rem;margin-inline:auto;text-align:center}
.merci__ok{width:72px;height:72px;color:var(--orange);margin-bottom:1.2rem}
.merci .lead{margin-bottom:2rem}
.merci__pts{display:grid;gap:.7rem;text-align:left;padding:1.2rem 1.3rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.merci__pts p{color:#5A463B}
.merci__pts b{color:var(--fg)}
.merci .cmd__note{margin-top:1.4rem}
.merci .btn-row{justify-content:center}
/* Carte claire posée dans une section sombre : sans redéfinir les couleurs
   de texte, elle hérite du gris clair du thème et devient illisible. */
.ordercard--site{
  border-color:var(--orange);background:var(--cream-2);
  --fg:#2E1C15;--fg-2:#5A463B;
  color:var(--fg);
}
.ordercard--site .ordercard__logo{color:var(--orange-800)}
.ordercard--site p{color:var(--fg-2)}
.ordercard--site .ordercard__badge{
  /* la carte est une grille : sans justify-self, la pastille occupe
     toute la largeur au lieu de sa seule étiquette */
  justify-self:start;padding:.25rem .5rem;border-radius:var(--r);
  background:var(--orange-800);color:#fff;
}
.merci__ref{margin:-1rem 0 1.6rem;font-size:.92rem;color:var(--fg-2)}
.merci__ref b{font:700 1.1rem/1 var(--f-cond);color:var(--fg);letter-spacing:.06em}

/* offre du jour */
.offre-jour{
  margin-bottom:1.2rem;padding:.75rem 1rem;border-radius:var(--r);
  background:var(--red);color:#fff;font-size:.92rem;
}
.offre-jour b{font:700 .78rem/1.4 var(--f-cond);letter-spacing:.08em;text-transform:uppercase}
.price-tag s{opacity:.6;font-size:.8em;margin-right:.15rem}
.price-tag--promo{background:var(--red)}
.opt b s{opacity:.55;font-weight:400;margin-right:.25rem}
.recap__l--promo{color:var(--red)}
.recap__l--promo b{color:var(--red)}
.cart__sum--promo span,.cart__sum--promo b{color:var(--gold)}

/* --------------------------------------------------------------------------
   23. Espace de gestion (interne)
   --------------------------------------------------------------------------
   Même fond sombre que l'écran cuisine : ce sont les deux écrans de la
   maison, ils doivent se reconnaître au premier coup d'œil et se distinguer
   du site public. Toutes les cibles font au moins 44 px de haut — l'écran
   se tient d'une main, souvent avec de la farine dessus.
   -------------------------------------------------------------------------- */
.page-admin{background:var(--four-900);color:var(--cream);min-height:100dvh}
.adm__bar{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.8rem;
  padding:.7rem clamp(1rem,3vw,1.6rem);background:var(--four-800);
  border-bottom:1px solid rgba(246,241,231,.16);
}
.adm__profil{
  margin-left:auto;font:700 .74rem/1 var(--f-cond);letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);
}
.adm__sortir{
  min-height:40px;padding:.3rem .7rem;border:1.5px solid rgba(246,241,231,.24);
  border-radius:var(--r);color:var(--cream);
  font:700 .72rem/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;
}
.adm__sortir:hover{background:rgba(246,241,231,.12)}

.adm{padding:clamp(1rem,3vw,1.6rem);max-width:56rem;margin-inline:auto}
.adm .kit__acces{max-width:22rem}
.adm__bloc{
  margin-bottom:1.1rem;padding:1rem clamp(.9rem,3vw,1.3rem) 1.2rem;
  background:var(--four-800);border:1px solid rgba(246,241,231,.16);border-radius:var(--r);
}
.adm__bloc h2{font:400 1.5rem/1.1 var(--f-display);text-transform:uppercase;margin-bottom:.6rem}
.adm__bloc h3{
  font:700 .74rem/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin:1rem 0 .5rem;
}
.adm__cat:first-child h3{margin-top:0}
.adm__aide{font-size:.88rem;color:#CBB9A7;margin-bottom:.8rem}
.adm .champ label{color:#CBB9A7}
.adm .champ input,.adm .champ select{
  background:var(--four-700);border-color:rgba(246,241,231,.24);color:var(--cream);
}

/* La note de confirmation reste au-dessus de tout : sur un téléphone, le
   bloc modifié est souvent déjà sorti de l'écran quand la réponse arrive. */
.adm__note{
  position:sticky;top:3.6rem;z-index:9;margin-bottom:1rem;
  padding:.7rem 1rem;border-radius:var(--r);font-size:.92rem;font-weight:600;
}
.adm__note.est-ok{background:#2F5E3E;color:#DFF3E4}
.adm__note.est-ko{background:var(--red);color:#fff}

.adm__feu{padding:.7rem .9rem;border-radius:var(--r);margin-bottom:.8rem;font-size:.95rem}
.adm__feu.est-ouvert{background:rgba(111,208,140,.14);border:1px solid rgba(111,208,140,.4)}
.adm__feu.est-ferme{background:rgba(198,58,46,.2);border:1px solid var(--red)}
.adm__motif{display:block;margin-top:.3rem;color:#CBB9A7;font-style:italic}
.btn--danger{background:var(--red);border-color:var(--red);color:#fff}

.adm__chiffres{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin-block:1rem .6rem}
.adm__chiffres>div{padding:.7rem .8rem;background:var(--four-700);border-radius:var(--r)}
.adm__chiffres dt{font:700 .68rem/1.3 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:#CBB9A7}
.adm__chiffres dd{font:700 1.5rem/1.1 var(--f-cond);color:var(--gold)}

/* Le champ de recherche est un input[type=search] : sans ces trois lignes,
   le navigateur lui impose son propre fond clair au milieu d'un écran sombre. */
.adm__cherche input{
  width:100%;min-height:44px;padding:.5rem .7rem;-webkit-appearance:none;appearance:none;
  background:var(--four-700);border:1.5px solid rgba(246,241,231,.24);
  border-radius:var(--r);color:var(--cream);font-size:1rem;
}
.adm__plats{display:flex;flex-wrap:wrap;gap:.4rem}
.adm__plat{
  min-height:44px;padding:.4rem .8rem;border:1.5px solid rgba(246,241,231,.24);
  border-radius:var(--r);color:var(--cream);font-size:.92rem;text-align:left;
}
.adm__plat:hover{background:rgba(246,241,231,.1)}
/* Un plat retiré est barré autant que coloré : la couleur seule ne se voit
   pas sous une lumière de cuisine, et pas du tout pour un daltonien. */
.adm__plat.est-rupture{
  background:rgba(198,58,46,.22);border-color:var(--red);
  color:#FFC9C4;text-decoration:line-through;
}
.adm__plat[disabled]{opacity:.5}

.adm__prix-l{
  display:grid;grid-template-columns:1fr auto;gap:.35rem .6rem;align-items:center;
  padding:.4rem 0;border-bottom:1px solid rgba(246,241,231,.1);
}
.adm__prix-n{font-size:.95rem}
.adm__prix-v{display:flex;align-items:center;gap:.35rem}
.adm__prix-u{color:#CBB9A7;font:700 1rem/1 var(--f-cond)}
.adm__prix-c{
  width:5.2rem;min-height:44px;padding:.4rem .6rem;text-align:right;
  background:var(--four-700);border:1.5px solid rgba(246,241,231,.24);
  border-radius:var(--r);color:var(--cream);font:700 1rem/1 var(--f-cond);
}
.adm__prix-l.est-change .adm__prix-c{border-color:var(--gold);color:var(--gold)}
.adm__prix-r{
  grid-column:1/-1;justify-self:start;font-size:.78rem;
  min-height:32px;padding:.2rem .5rem;border:1px solid rgba(246,241,231,.24);
  border-radius:var(--r);color:var(--gold);
}
.adm__prix-r:hover{background:rgba(246,241,231,.1)}

.adm__livraison{display:grid;gap:.8rem;max-width:20rem}
.adm__apercu{display:grid;gap:.8rem;justify-items:start;margin-top:.8rem}
.adm__apercu img{max-width:min(100%,18rem);border-radius:var(--r);border:1px solid rgba(246,241,231,.24)}

@media (min-width:640px){
  .adm__prix-l{grid-template-columns:1fr auto 11rem}
  .adm__prix-r{grid-column:auto;justify-self:end}
}

/* --------------------------------------------------------------------------
   24. Bandeau de consentement
   --------------------------------------------------------------------------
   Il n'existe que si la mesure d'audience est activée : sans traceur, pas de
   bandeau — c'est le meilleur bandeau de tous.

   Les deux boutons sont identiques. Un « Accepter » plein et un « Refuser »
   en gris pâle, c'est un choix libre en apparence seulement, et c'est ce que
   la CNIL sanctionne. Posé en bas de l'écran plutôt qu'en travers de la page :
   il informe, il ne prend pas le site en otage.
   -------------------------------------------------------------------------- */
.consent{
  position:fixed;z-index:60;left:.7rem;right:.7rem;
  bottom:calc(.7rem + env(safe-area-inset-bottom));
  max-width:30rem;padding:1rem 1.1rem 1.1rem;
  background:var(--four-800);color:var(--cream);
  border:1px solid rgba(246,241,231,.2);border-radius:var(--r);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  animation:fadeUp .3s var(--ease) both;
}
.consent__t{font:700 .78rem/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.consent__d{font-size:.88rem;line-height:1.5;color:#CBB9A7;margin-bottom:.9rem}
.consent__d a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.consent__b{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.consent__b button{
  min-height:46px;padding:.5rem .8rem;border-radius:var(--r);
  border:1.5px solid rgba(246,241,231,.3);color:var(--cream);
  font:700 .8rem/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
}
.consent__b button:hover{background:rgba(246,241,231,.12)}

/* La barre d'action mobile occupe déjà le bas de l'écran : le bandeau se
   pose au-dessus d'elle, sinon il recouvre « Appeler ». */
@media (max-width:899px){
  .consent{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
}
@media (min-width:600px){
  .consent{left:auto;right:1.2rem;bottom:calc(1.2rem + env(safe-area-inset-bottom))}
}

/* Les deux barres internes portent le logo, un état et un bouton. Sur un
   écran de 320 px, les trois ne tiennent pas côte à côte : le bouton sortait
   de la page. On laisse le logo se réduire et la barre se plier plutôt que
   d'imposer une largeur qui n'existe pas. */
.kit__bar,.adm__bar{flex-wrap:wrap}
.kit__bar .brand,.adm__bar .brand{flex:0 1 auto;min-width:0}
.kit__bar .brand__logo,.adm__bar .brand__logo{width:min(40vw,168px)}
@media (max-width:359px){
  .kit__bar .brand__logo,.adm__bar .brand__logo{width:118px}
  .kit__etat,.adm__profil{margin-left:0;flex-basis:100%;order:3}
}