/* ============================================================
   PIZZERIA ILYES — Design 2026 "Forno di notte"
   Compatible composants.jsx (Header/Footer/PizzaCard/CartDrawer)
   ============================================================ */

:root{
  /* Palette four à bois */
  --noir:#16120E;
  --noir-2:#221B14;
  --noir-3:#2A2117;
  --tomato:#E8392B;
  --tomato-dark:#C22417;
  --tomato-hover:#D42B1E; /* survol du CTA — 5,04:1 sur blanc, reste conforme AA */
  --ember:#FF8A3C;
  --creme:#FFF4E4;
  --basil:#4C9A58;
  --or:#F2B441;
  --pate:#E9C68F;

  /* Mapping ancien système (utilisé par composants.jsx) */
  --bg:var(--noir);
  --bg-alt:var(--noir-2);
  --fg:var(--creme);
  --fg-muted:rgba(255,244,228,.65);
  --text:var(--creme);
  --text-muted:rgba(255,244,228,.6);
  --border:rgba(255,244,228,.12);
  --cream:var(--noir-3);
  --cream-dark:#1C1610;
  --paper:var(--noir-2);
  --ink:var(--creme);
  --accent:var(--tomato);
  --accent-2:var(--basil);
  --terracotta:var(--ember);
  --wood:#1C1610;
  --muted:rgba(255,244,228,.6);
  --line:rgba(255,244,228,.12);

  --font-display:'Unbounded',sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --font-hand:'Caveat',cursive;

  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 18px 48px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--fg);
  background:
    radial-gradient(1100px 540px at 88% -5%, rgba(255,138,60,.10), transparent 60%),
    radial-gradient(900px 520px at -5% 100%, rgba(232,57,43,.08), transparent 60%),
    var(--noir);
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;color:var(--fg)}
.script{font-family:var(--font-hand);font-weight:600}

/* ============ HEADER ============ */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(22,18,14,.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,244,228,.08);
  color:var(--creme);
}
.header::after{
  content:'';display:block;height:3px;
  background:linear-gradient(90deg,var(--tomato),var(--ember) 50%,var(--or));
}
.header-inner{
  max-width:1280px;margin:0 auto;
  padding:12px 24px;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;position:relative;z-index:2;
}
.nav{display:flex;gap:26px;align-items:center}
.nav a{
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  position:relative;padding:6px 2px;opacity:.75;transition:opacity .2s,color .2s;
}
.nav a.active{opacity:1;color:var(--ember)}
.nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ember);border-radius:2px}
@media (hover:hover){.nav a:hover{opacity:1;color:var(--ember)}}

.logo-wrap{display:flex;justify-content:center;align-items:center}
.logo-wrap img{
  height:64px;width:auto;border-radius:50%;
  filter:drop-shadow(0 6px 16px rgba(232,57,43,.35));
  transition:transform .25s;
}
@media (hover:hover){.logo-wrap:hover img{transform:scale(1.06) rotate(-3deg)}}

.header-right{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.header-phone{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;
  font-size:15px;font-weight:700;letter-spacing:.04em;
  color:var(--creme);border:1.5px solid rgba(255,244,228,.22);
  background:rgba(255,255,255,.04);transition:all .2s;white-space:nowrap;
}
@media (hover:hover){.header-phone:hover{border-color:var(--ember);color:var(--ember);background:rgba(255,138,60,.08)}}
.header-phone svg{flex-shrink:0}

.cart-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--tomato);color:#fff;border:1.5px solid var(--tomato);
  box-shadow:0 6px 18px rgba(232,57,43,.35);
  transition:all .2s;position:relative;
}
@media (hover:hover){.cart-btn:hover{background:var(--tomato-dark);transform:translateY(-1px)}}
.cart-badge{
  background:var(--creme);color:var(--noir);
  border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;padding:0 6px;
}
/* 44x44 minimum : le glyphe seul ne faisait que 22x32, sous le plancher WCAG 2.2
   de 24x24 et loin de la cible tactile recommandee de 44x44. */
.menu-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:-10px;
  font-size:24px;line-height:1;color:var(--creme);
  background:none;border:0;cursor:pointer;
}

/* ============ HERO (index) ============ */
.hero{position:relative;padding:72px 24px 90px;overflow:hidden}
.hero-inner{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:48px;align-items:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:12px;font-weight:800;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ember);
  margin-bottom:22px;font-style:normal;
}
.hero-eyebrow::before{content:"";width:34px;height:2px;background:var(--ember)}
.hero h1{
  font-size:clamp(38px,5.2vw,74px);font-weight:900;
  line-height:1.02;letter-spacing:-.01em;margin-bottom:26px;
}
.hero h1 em{font-style:normal;color:var(--tomato)}
.hero h1 .outline{color:transparent;-webkit-text-stroke:2px var(--creme)}
.hero-lede{
  font-family:var(--font-body);font-style:normal;
  font-size:17px;line-height:1.7;color:rgba(255,244,228,.78);
  max-width:48ch;margin-bottom:34px;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;font-size:14px;font-weight:800;
  letter-spacing:.04em;border-radius:999px;
  transition:transform .2s,box-shadow .2s,background .2s;
  border:2px solid transparent;
}
/* Fond assombri : #E8392B donnait 4,16:1 avec du blanc en 14px gras, sous le seuil AA
   de 4,5:1. #C22417 monte a 5,90:1 sans changer la teinte de la marque. */
.btn-primary{background:var(--tomato-dark);color:#fff;box-shadow:0 10px 28px rgba(194,36,23,.35)}
@media (hover:hover){.btn-primary:hover{background:var(--tomato-hover);transform:translateY(-2px)}}
.btn-ghost{border-color:rgba(255,244,228,.25);color:var(--creme)}
@media (hover:hover){.btn-ghost:hover{border-color:var(--ember);color:var(--ember);transform:translateY(-2px)}}
.btn-wa{background:#25D366;color:#06250f;box-shadow:0 10px 28px rgba(37,211,102,.3)}
@media (hover:hover){.btn-wa:hover{transform:translateY(-2px)}}

.hero-meta{display:flex;gap:36px;margin-top:46px;flex-wrap:wrap}
.hero-meta div{font-size:13px;color:rgba(255,244,228,.55)}
.hero-meta strong{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:21px;color:var(--creme);margin-bottom:4px;
}

/* Carrousel photos hero */
.hero-carousel{position:relative;width:100%;max-width:500px;height:500px;margin-left:auto}
.hero-carousel::before{
  content:'';position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,60,.22), transparent 65%);
  filter:blur(20px);
}
.dish{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:dish-cycle 12s infinite}
.dish-1{animation-delay:0s}.dish-2{animation-delay:4s}.dish-3{animation-delay:8s}
.dish img{
  width:90%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:
    0 40px 80px -18px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,244,228,.12),
    0 0 60px rgba(255,138,60,.18);
}
@keyframes dish-cycle{
  0%,4%{opacity:0;transform:scale(.88) rotate(-6deg)}
  9%,30%{opacity:1;transform:scale(1) rotate(0)}
  36%,100%{opacity:0;transform:scale(.88) rotate(6deg)}
}
.dish-label{
  position:absolute;bottom:0;left:50%;
  transform:translateX(-50%) rotate(-3deg);
  font-family:var(--font-hand);font-size:28px;
  color:var(--noir);background:var(--creme);
  padding:5px 24px;border-radius:999px;z-index:5;white-space:nowrap;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--tomato);overflow:hidden;padding:15px 0;
  border-block:1px solid rgba(0,0,0,.18);
}
.marquee-track{
  display:flex;gap:46px;width:max-content;
  animation:mq-slide 28s linear infinite;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.marquee-track span{display:flex;align-items:center;gap:46px}
.marquee-track i{font-style:normal;color:rgba(255,255,255,.55)}
@keyframes mq-slide{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.section{padding:84px 24px}
.section-inner{max-width:1280px;margin:0 auto}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:46px;flex-wrap:wrap;
}
.section-head h2{font-size:clamp(28px,3.4vw,46px);font-weight:900}
.section-head h2 em{font-style:normal;color:var(--ember)}
.section-head p{max-width:44ch;color:rgba(255,244,228,.62);font-size:15px;line-height:1.65}
.section-eyebrow{
  font-family:var(--font-body);color:var(--ember);
  font-size:12px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  display:block;margin-bottom:10px;transform:none;
}
.section-link{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ember);border-bottom:2px solid var(--ember);padding-bottom:4px;
}

/* ============ BENTO CATÉGORIES (index) ============ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:16px}
.cell{
  position:relative;border-radius:var(--radius-lg);padding:22px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--noir-2);
  border:1px solid rgba(255,244,228,.08);
  transition:transform .25s,border-color .25s;
}
@media (hover:hover){.cell:hover{transform:translateY(-5px);border-color:rgba(255,138,60,.5)}}
.cell .em{font-size:38px;position:absolute;top:16px;right:18px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.cell h3{font-size:16px;font-weight:700;margin-bottom:4px}
.cell span{font-size:12.5px;color:rgba(255,244,228,.55)}
.cell.big{
  grid-column:span 2;grid-row:span 2;
  background:linear-gradient(150deg,#A82318,var(--tomato) 62%,#F0603F);
}
.cell.big .em{font-size:80px;top:22px;right:24px}
.cell.big h3{font-size:25px}
.cell.big span{color:rgba(255,255,255,.78)}
.cell.green{background:linear-gradient(150deg,#23522c,#3A7D44)}
.cell.gold{background:linear-gradient(150deg,#9a6a14,var(--or))}
.cell.gold h3{color:var(--noir)}
.cell.gold span{color:rgba(22,18,14,.65)}

/* ============ PIZZA CARDS (cartes claires sur fond sombre) ============ */
.pizza-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px;
}
.pizza-card{
  /* surcharge des variables pour carte claire */
  --fg-muted:#6f6357;
  --text:#241B14;
  --text-muted:#6f6357;
  --basil:#2E7D44;
  --tomato:#D62F22;
  --border:rgba(36,27,20,.12);
  --cream:#F5E9D6;
  --accent:#D62F22;

  background:#FFF8EC;color:#241B14;
  border:1px solid rgba(36,27,20,.08);
  border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .25s,box-shadow .25s;
}
@media (hover:hover){.pizza-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.4)}}

.pizza-card-img{
  aspect-ratio:4/3;background:#F3D6B2;position:relative;overflow:hidden;
}
.pizza-card-img::before{
  content:'';position:absolute;inset:12%;border-radius:50%;
  background:#E9C68F;box-shadow:inset 0 0 0 6px #C49B62;
}
.pizza-card-img.has-photo::before{display:none!important}
.pizza-card-img.has-photo{aspect-ratio:1/1;background:#F3D6B2}
.pizza-card-img.has-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .4s;
}
@media (hover:hover){.pizza-card:hover .pizza-card-img.has-photo img{transform:scale(1.04)}}
.pizza-badge{
  position:absolute;top:14px;left:14px;
  background:var(--tomato);color:#fff;
  padding:6px 12px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;z-index:2;
}
.pizza-badge.veg{background:#2E7D44}
.pizza-badge.spicy{background:var(--ember);color:var(--noir)}
.pizza-badge.premium{background:var(--noir);color:var(--or)}
.pizza-badge.nouveau{background:var(--or);color:var(--noir)}
.pizza-badge.choix{background:#4a7c2f}

.pizza-card-body{padding:20px;display:flex;flex-direction:column;flex:1;gap:10px}
.pizza-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.pizza-name{font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.15;color:#241B14}
.pizza-price{
  font-family:var(--font-display);font-size:17px;font-weight:900;
  color:#4a7c2f;white-space:nowrap;
}
.pizza-ingredients{font-size:13.5px;color:#6f6357;line-height:1.5;flex:1}

.pizza-add{
  margin-top:8px;width:100%;
  background:#241B14;color:#FFF4E4;
  padding:13px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
@media (hover:hover){.pizza-add:hover{background:#D62F22;color:#fff}}
.pizza-add.added{background:#2E7D44;color:#fff}

/* styles cartes (tweaks legacy — neutralisés) */
.pizza-grid[data-card-style] .pizza-card{border-radius:var(--radius-lg)}

/* ============ SAUCE PICKER ============ */
.sauce-picker{
  margin-top:auto;padding:12px;
  background:#F5E9D6;border:1px solid rgba(36,27,20,.12);
  border-radius:12px;animation:saucePop .18s ease-out;
}
@keyframes saucePop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.sauce-picker-title{
  font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:#6f6357;margin-bottom:8px;
}
.sauce-picker-hint{font-size:11px;color:#6f6357;font-weight:400;margin-left:8px;font-style:italic}
.sauce-picker-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sauce-chip{
  font:inherit;font-size:12px;font-weight:700;
  padding:6px 10px;border:1.5px solid rgba(36,27,20,.15);
  background:#FFF8EC;color:#241B14;border-radius:999px;
  transition:all .15s;
}
@media (hover:hover){.sauce-chip:hover{border-color:#D62F22;background:#D62F22;color:#fff;transform:translateY(-1px)}}
.sauce-chip.on{background:#D62F22;color:#fff;border-color:#D62F22}
.sauce-chip .sauce-check{display:inline-block;width:16px;margin-right:4px;font-weight:800}
.sauce-extra{font-weight:600;opacity:.85;font-size:11px;margin-left:2px}
.sauce-picker-footer{display:flex;gap:8px;margin-top:10px}
.sauce-cancel{
  font:inherit;font-size:11px;color:#6f6357;
  text-decoration:underline;padding:2px 4px;flex:0 0 auto;
}
@media (hover:hover){.sauce-cancel:hover{color:#D62F22}}
.sauce-confirm{
  flex:1;font:inherit;font-weight:800;font-size:13px;
  background:#D62F22;color:#fff;border-radius:10px;padding:10px 14px;
  transition:filter .15s;
}
@media (hover:hover){.sauce-confirm:hover{filter:brightness(1.1)}}

/* ============ MENU PAGE ============ */
.menu-hero{text-align:center;padding:72px 24px 36px}
.menu-hero h1{font-size:clamp(42px,6.5vw,84px);font-weight:900;margin-bottom:16px}
.menu-hero h1 em{font-style:normal;color:var(--ember)}
.menu-hero p{max-width:560px;margin:0 auto;color:rgba(255,244,228,.62);font-size:16px}
.menu-hero .script{font-size:26px!important;color:var(--ember)!important}

.category-back{
  font:inherit;color:rgba(255,244,228,.6);font-size:14px;font-weight:700;
  margin-bottom:12px;padding:0;text-decoration:underline;
}
@media (hover:hover){.category-back:hover{color:var(--ember)}}

.category-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;max-width:1200px;margin:0 auto;
}
.category-card{
  font:inherit;text-align:left;
  background:var(--noir-2);
  border:1px solid rgba(255,244,228,.1);
  border-radius:var(--radius-lg);
  overflow:hidden;padding:0;
  display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
@media (hover:hover){
  .category-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 44px rgba(0,0,0,.5);
    border-color:rgba(255,138,60,.5);
  }
}
.category-card-img{aspect-ratio:16/9;position:relative;background:#2A2117;background-size:cover!important;background-position:center!important}
.category-card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(22,18,14,.55));
}
.category-card-img.cat-pizzas{background-image:url('/assets/cat-pizzas.webp')}
.category-card-img.cat-mega{background-image:url('/assets/cat-pizzas-mega.webp')}
.category-card-img.cat-sandwichs{background-image:url('/assets/cat-sandwichs.webp')}
.category-card-img.cat-tacos{background-image:url('/assets/cat-tacos.webp')}
.category-card-img.cat-crispy{background-image:url('/assets/cat-crispy.webp')}
.category-card-img.cat-burgers{background-image:url('/assets/cat-hamburgers.webp')}
.category-card-img.cat-cheese{background-image:url('/assets/cat-cheese.webp')}
.category-card-img.cat-plats{background-image:url('/assets/cat-plats.webp')}
.category-card-img.cat-frites{background-image:url('/assets/cat-frites.webp')}
.category-card-img.cat-boissons{background-image:url('/assets/chat-boissons.webp')}
.category-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.category-card-title{font-size:19px;font-weight:700;margin:0 0 6px;color:var(--creme)}
.category-card-tagline{color:rgba(255,244,228,.6);margin:0 0 14px;font-size:13.5px;flex:1}
.category-card-count{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,244,228,.45);font-weight:800;margin-bottom:8px;
}
.category-card-arrow{color:var(--ember);font-weight:800;font-size:13.5px}
@media (hover:hover){.category-card:hover .category-card-arrow{text-decoration:underline}}

/* ============ INFOS (index) ============ */
.infos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{
  background:var(--noir-2);border:1px solid rgba(255,244,228,.09);
  border-radius:var(--radius-lg);padding:28px;
}
.info-card .ic{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;font-size:22px;
  margin-bottom:16px;background:rgba(255,138,60,.14);
}
.info-card h3{font-size:15px;font-weight:700;margin-bottom:10px}
.info-card p{font-size:14.5px;line-height:1.7;color:rgba(255,244,228,.68)}
/* Ces liens en ligne — « Ouvrir dans Maps » et le numero de telephone — ne faisaient
   que 16px de haut. En inline-block avec du remplissage ils passent le plancher WCAG
   2.2 de 24x24. La marge negative laterale evite de decaler le texte du paragraphe. */
.info-card a{
  color:var(--ember);font-weight:700;
  display:inline-block;padding:6px 4px;margin:0 -4px;min-height:24px;
}

/* ============ FOOTER ============ */
.footer{
  background:#100D09;color:var(--creme);
  padding:0 24px 24px;margin-top:80px;position:relative;
  border-top:1px solid rgba(255,244,228,.08);
}
.footer::before{
  content:'';display:block;height:3px;
  background:linear-gradient(90deg,var(--tomato),var(--ember) 50%,var(--or));
  margin:0 -24px 56px;
}
.footer-inner{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:40px;
}
.footer h4{
  font-family:var(--font-display);color:var(--ember);
  font-size:15px;margin-bottom:16px;font-weight:700;
}
.footer ul{list-style:none}
/* Les liens du pied de page ne faisaient que 15 a 19px de haut. En inline-block avec
   du remplissage vertical ils depassent le plancher WCAG 2.2 de 24x24 ; la marge basse
   est reduite d autant pour ne pas etirer la colonne. */
.footer li{margin-bottom:2px;font-size:14px;opacity:.8}
.footer li a{display:inline-block;padding:7px 0;min-height:24px}
@media (hover:hover){.footer li a:hover{color:var(--ember)}}
.footer-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.footer-brand img{height:130px;width:auto;margin-bottom:14px;filter:drop-shadow(0 6px 18px rgba(232,57,43,.3))}
.footer-bottom{
  max-width:1280px;margin:0 auto;padding-top:22px;
  border-top:1px solid rgba(255,244,228,.1);
  display:flex;justify-content:center;text-align:center;
  font-size:12px;opacity:.55;flex-wrap:wrap;gap:12px;
}
/* Meme correctif de cible tactile que les autres liens du pied de page. */
.footer-bottom .credit-link{
  display:inline-block;padding:5px 0;min-height:24px;
  color:rgba(255,244,228,.55);text-decoration:none;transition:color .2s;
}
.footer-bottom .credit-link:hover{
  color:var(--ember);
}

/* ============ CART DRAWER ============ */
.cart-overlay{
  position:fixed;inset:0;background:rgba(10,8,6,.6);
  backdrop-filter:blur(3px);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(440px,100vw);background:var(--noir-2);
  z-index:101;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  box-shadow:-16px 0 50px rgba(0,0,0,.5);
  border-left:1px solid rgba(255,244,228,.1);
}
.cart-drawer.open{transform:translateX(0)}
.cart-header{
  padding:20px 24px;border-bottom:1px solid rgba(255,244,228,.1);
  display:flex;justify-content:space-between;align-items:center;
}
.cart-header h3{font-size:18px}
.cart-close{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;border:1.5px solid rgba(255,244,228,.18);transition:all .2s;
}
@media (hover:hover){.cart-close:hover{background:var(--tomato);border-color:var(--tomato);color:#fff}}
.cart-items{flex:1;overflow-y:auto;padding:20px 24px 16px}
.cart-empty{text-align:center;padding:60px 20px;color:rgba(255,244,228,.55)}
.cart-empty .script{font-size:30px;color:var(--ember);margin-bottom:8px;display:block}
.cart-empty p{font-size:14px}
.cart-item{
  display:grid;grid-template-columns:60px 1fr auto;gap:14px;
  padding:16px 0;border-bottom:1px solid rgba(255,244,228,.08);align-items:center;
}
.cart-item:last-child{border-bottom:none}
.cart-item-img{width:60px;height:60px;border-radius:12px;background:radial-gradient(circle,#E9C68F,#B8895A);position:relative;overflow:hidden}
.cart-item-img.cat-pizzas{background:radial-gradient(circle at center,#E9C68F 0%,#E8392B 100%)}
.cart-item-img.cat-mega{background:radial-gradient(circle at center,#E9C68F 0%,#A82318 100%)}
.cart-item-img.cat-sandwichs{background:linear-gradient(135deg,#E9C68F,#C8941F)}
.cart-item-img.cat-tacos{background:linear-gradient(135deg,#E9C68F,#2E7D44)}
.cart-item-img.cat-crispy{background:linear-gradient(135deg,#F0C068,#E8392B)}
.cart-item-img.cat-burgers{background:linear-gradient(135deg,#E9C68F,#8B4513)}
.cart-item-img.cat-cheese{background:linear-gradient(135deg,#F2B441,#C8941F)}
.cart-item-img.cat-plats{background:radial-gradient(circle,#E9C68F 30%,#2E7D44 100%)}
.cart-item-img.cat-frites{background:linear-gradient(135deg,#E9C68F,#E8A832)}
.cart-item-img.cat-boissons{background:linear-gradient(135deg,#9CCBE0,#3A7DA4)}
.cart-item-info{min-width:0}
.cart-item-name{font-family:var(--font-display);font-weight:700;font-size:14px;margin-bottom:4px}
.cart-item-price{font-size:13px;color:rgba(255,244,228,.6)}
.cart-item-controls{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.qty-control{
  display:inline-flex;align-items:center;
  border:1.5px solid rgba(255,244,228,.18);border-radius:999px;overflow:hidden;
}
.qty-btn{width:30px;height:30px;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:background .15s}
@media (hover:hover){.qty-btn:hover{background:rgba(255,244,228,.1)}}
.qty-val{min-width:28px;text-align:center;font-weight:700;font-size:14px}

.cart-sauce-btn{
  display:block;width:100%;text-align:left;font:inherit;font-size:12px;
  background:rgba(255,138,60,.08);border:1px dashed rgba(255,138,60,.4);
  color:var(--creme);padding:6px 10px;border-radius:8px;margin:6px 0 4px;transition:all .15s;
}
@media (hover:hover){.cart-sauce-btn:hover{background:rgba(255,138,60,.15);border-style:solid;border-color:var(--ember)}}
.cart-sauce-btn strong{font-weight:800;color:var(--ember)}
.cart-sauce-btn .edit-link,.cart-sauce-btn .add-sauce-link{color:var(--ember);font-weight:800;margin-left:6px;text-decoration:underline}
.cart-sauce-edit-multi{
  background:var(--noir-3);border:1.5px solid var(--ember);
  border-radius:10px;padding:10px;margin:6px 0 4px;
}
.cart-sauce-multi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:8px}
.cart-sauce-multi-grid .sauce-chip{
  font-size:11px;padding:6px 8px;
  background:var(--noir-2);color:var(--creme);border-color:rgba(255,244,228,.2);
}
.cart-sauce-multi-grid .sauce-chip.on{background:var(--tomato);border-color:var(--tomato);color:#fff}
.cart-sauce-done{
  width:100%;font:inherit;font-weight:800;font-size:12px;
  background:var(--tomato);color:#fff;border-radius:8px;padding:8px;
}
@media (hover:hover){.cart-sauce-done:hover{filter:brightness(1.1)}}

.cart-footer{padding:20px 24px;border-top:1px solid rgba(255,244,228,.1);background:var(--noir-3)}
.service-mode{margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed rgba(255,244,228,.15)}
.service-mode-label{
  font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(255,244,228,.55);margin-bottom:8px;
}
.service-mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.service-opt{
  font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 6px;background:var(--noir-2);
  border:1.5px solid rgba(255,244,228,.14);border-radius:12px;
  transition:all .15s;font-size:12px;font-weight:700;color:var(--creme);
}
@media (hover:hover){.service-opt:hover{border-color:var(--ember);transform:translateY(-1px)}}
.service-opt.active{
  background:var(--tomato);border-color:var(--tomato);color:#fff;
  box-shadow:0 6px 16px rgba(232,57,43,.3);
}
.service-icon{font-size:22px;line-height:1}
.service-fee{font-size:10px;font-weight:800;opacity:.85}
.cart-totals{margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed rgba(255,244,228,.15)}
.cart-line{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,244,228,.6);padding:4px 0}
.cart-line span:last-child{color:var(--creme);font-weight:700}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.cart-total-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.cart-total-amount{font-family:var(--font-display);font-size:28px;font-weight:900;color:var(--ember)}
.cart-checkout{
  width:100%;padding:16px;background:var(--tomato);color:#fff;
  border-radius:999px;font-size:14px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;transition:all .2s;
}
@media (hover:hover){.cart-checkout:hover{background:var(--tomato-dark);transform:translateY(-1px)}}
.cart-checkout:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ============ CHECKOUT MODAL ============ */
.checkout-overlay{
  position:fixed;inset:0;background:rgba(10,8,6,.7);z-index:5000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.checkout-modal{
  background:var(--noir-2);border:1px solid rgba(255,244,228,.12);
  border-radius:20px;width:100%;max-width:540px;max-height:90vh;
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:modalPop .25s cubic-bezier(.2,.9,.3,1.1);overflow:hidden;
}
@keyframes modalPop{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.checkout-header{padding:20px 24px;border-bottom:1px solid rgba(255,244,228,.1);display:flex;justify-content:space-between;align-items:center}
.checkout-header h3{font-size:17px;margin:0}
.checkout-body{padding:20px 24px;overflow-y:auto;flex:1}
.checkout-section{margin-bottom:18px;padding-bottom:14px;border-bottom:1px dashed rgba(255,244,228,.12)}
.checkout-section:last-of-type{border-bottom:none}
.checkout-section h4{
  font-family:var(--font-body);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(255,244,228,.5);margin:0 0 10px;font-weight:800;
}
.checkout-section h4 strong{color:var(--ember);font-weight:800}
.checkout-list{list-style:none;padding:0;margin:0}
.checkout-list li{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-bottom:1px solid rgba(255,244,228,.07)}
.checkout-list li:last-child{border:none}
.checkout-list li span:last-child{font-weight:800}
.checkout-form{display:flex;flex-direction:column;gap:8px}
.checkout-form input,.checkout-form textarea{
  font:inherit;font-size:14px;padding:11px 13px;
  border:1.5px solid rgba(255,244,228,.16);
  background:var(--noir);color:var(--creme);border-radius:10px;resize:vertical;
}
.checkout-form input:focus,.checkout-form textarea:focus{border-color:var(--ember);outline:none}
.checkout-form ::placeholder{color:rgba(255,244,228,.4)}
.checkout-totals{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,244,228,.12)}
.cart-line-total{font-size:18px;padding-top:8px!important;margin-top:4px;border-top:1px dashed rgba(255,244,228,.15)}
.cart-line-total span{color:var(--creme)!important;font-weight:800!important}
.cart-line-total span:last-child{font-family:var(--font-display);font-size:24px;color:var(--ember)!important}
.checkout-modal .cart-checkout{margin:0 24px 22px;width:auto}
.checkout-success{padding:40px 28px 28px;text-align:center}
.success-circle{
  width:72px;height:72px;border-radius:50%;
  background:var(--basil);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:38px;margin:0 auto 16px;
  animation:popIn .4s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.checkout-success h3{font-size:24px;margin:0 0 4px}
.checkout-success .script{color:var(--ember);font-size:22px;display:block;margin-bottom:16px}
.success-text{color:rgba(255,244,228,.65);margin-bottom:22px;line-height:1.6}
.success-text strong{color:var(--ember);font-size:18px}
.checkout-success .cart-checkout{margin:0}

/* ============ TOAST ============ */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(120px);
  background:var(--creme);color:var(--noir);
  padding:14px 22px;border-radius:999px;
  font-size:14px;font-weight:700;z-index:200;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:transform .3s;display:inline-flex;align-items:center;gap:10px;
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ============ BARRE COMMANDE MOBILE ============ */
.orderbar{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  display:none;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(22,18,14,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,244,228,.1);
}
.orderbar .btn{flex:1;justify-content:center;padding:13px 10px;font-size:13px}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .marquee-track,.dish{animation:none}
  .dish-1{opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .infos-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .hero-carousel{max-width:360px;height:360px;margin:0 auto;order:-1}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .header-inner{grid-template-columns:auto 1fr auto;gap:12px;padding:10px 16px;position:relative}
  .logo-wrap{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;z-index:5}
  .logo-wrap img{height:52px}
  .menu-toggle{display:flex}
  .nav{
    display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;padding:24px;gap:16px;text-align:center;
    background:rgba(22,18,14,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,244,228,.12);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:transform .25s,opacity .25s;
  }
  .nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  /* Menu deroulant : chaque entree occupe une vraie cible tactile de 44px. */
  .nav a{font-size:15px;opacity:.9;min-height:44px;display:flex;align-items:center;justify-content:center;padding:6px 12px}
  .cart-btn{padding:9px 13px;font-size:11px}
  .cart-btn-text{display:none}
  /* Le libelle est masque faute de place : le lien devient une icone seule, il lui
     faut donc une cible de 44x44 et un nom accessible (aria-label dans le JSX). */
  .header-phone{
    min-width:44px;min-height:44px;padding:0;
    justify-content:center;gap:0;
  }
  .header-phone svg{width:19px;height:19px}
  .header-phone-text{display:none}
  .section{padding:54px 20px}
  .hero{padding:44px 20px 60px}
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .footer{padding-bottom:110px}
  .orderbar{display:flex}
  .infos-grid{grid-template-columns:1fr}
  .bento{grid-auto-rows:130px}
  .pizza-grid{grid-template-columns:1fr 1fr;gap:14px}
  .hero-meta{gap:24px}
}
@media (max-width:480px){
  .pizza-grid{grid-template-columns:1fr}
}

/* Trois colonnes pour Crispy & Box et Pizzas mega uniquement : ces deux
   categories comptent 6 produits, donc 3+3 tombe juste, alors que auto-fill
   en mettait 4 puis 2. Les autres categories gardent leur comportement.

   Seuil a 1240px, et non plus bas : mesure faite, a 940px de fenetre le conteneur
   tombe a 877px (barre de defilement comprise) et auto-fill donne 2 colonnes de
   428px. Forcer 3 y produisait des cartes de 278px, bien plus serrees que sur les
   autres categories. La regle ne doit donc jamais faire que ramener 4 colonnes a 3,
   jamais faire passer de 2 a 3. En dessous du seuil, ces deux pages se comportent
   exactement comme avant, surcharges mobiles incluses. */
@media (min-width:1240px){
  .pizza-grid[data-cat="crispy"],
  .pizza-grid[data-cat="mega"]{
    grid-template-columns:repeat(3,1fr);
  }
}

/* ============================================================
   PANIER DÉSACTIVÉ (comme en production actuelle)
   → Pour réactiver la commande en ligne : SUPPRIMER ce bloc.
   ============================================================ */
.cart-btn,
.pizza-add,
.cart-drawer,
.cart-overlay,
.checkout-overlay,
.sauce-picker{
  display:none !important;
}


/* ============================================================
   Ajouts build v2 — SEO, accessibilité, robustesse
   ============================================================ */

/* Le contenu ne doit jamais dépendre du JavaScript pour être visible.
   L'ancienne règle .reveal{opacity:0} rendait la page entièrement blanche
   si le script échouait. L'animation n'est désormais armée que si le JS
   a effectivement démarré (classe .js posée par le script inline du head). */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* Vignettes de catégorie en vraies <img> : une image de fond CSS n'est ni
   indexable dans Google Images ni descriptible par un attribut alt. */
.category-card{text-decoration:none;color:inherit;display:flex}
.category-card-img{display:block}
.category-card-img>img{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;
}
.category-card-tagline,.category-card-count,.category-card-arrow{display:block}

/* ---- Barre de catégories collante (pages de catégorie) ----
   Remplace l'ancien lien « ← Toutes les catégories », qui se superposait au
   sous-titre sur mobile et disparaissait dès le premier défilement.
   L'en-tête et cette barre collent ensemble via .stickytop : aucune hauteur
   d'en-tête n'est codée en dur, donc rien à réajuster selon l'écran. */
.stickytop{position:sticky;top:0;z-index:60}
.stickytop .header{position:static;top:auto;z-index:auto}

.catnav{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;max-width:1200px;margin:0 auto;
  background:rgba(22,18,14,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,244,228,.1);
}
.catnav-scroll{
  flex:1;min-width:0;                     /* min-width:0 : sans ça le flex refuse de rétrécir */
  display:flex;gap:8px;align-items:center;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.catnav-scroll::-webkit-scrollbar{display:none}
.catnav-link,.catnav-all{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  /* 40px de haut : en dessous, la cible devient difficile à viser au pouce. */
  min-height:40px;padding:0 14px;border-radius:999px;
  font-size:13.5px;font-weight:700;line-height:1;white-space:nowrap;
  text-decoration:none;color:rgba(255,244,228,.72);
  background:rgba(255,244,228,.06);
  border:1px solid rgba(255,244,228,.12);
  transition:background .2s,border-color .2s,color .2s;
}
.catnav-link.is-active{
  color:var(--noir,#16120E);
  background:var(--ember,#FF8A3C);
  border-color:var(--ember,#FF8A3C);
}
/* Le retour au menu complet est traité à part : hors du défilement, bordure
   orange pleine, pour qu'il ne se confonde pas avec les onglets de catégorie. */
.catnav-all{
  flex:0 0 auto;
  color:var(--ember,#FF8A3C);
  background:rgba(255,138,60,.1);
  border-color:rgba(255,138,60,.6);
}
@media (hover:hover){
  .catnav-link:hover{background:rgba(255,244,228,.14);color:var(--creme,#FFF4E4)}
  .catnav-link.is-active:hover{background:var(--ember,#FF8A3C);color:#16120E}
  .catnav-all:hover{background:rgba(255,138,60,.16);color:var(--ember,#FF8A3C)}
}
/* Repère visuel indiquant qu'il reste des catégories à droite. */
.catnav{position:relative}
.catnav::after{
  content:'';position:absolute;right:0;top:0;bottom:1px;width:40px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(22,18,14,.92));
}

/* Fil d'Ariane */
.breadcrumb{margin-bottom:16px;font-size:13px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li{display:flex;align-items:center;gap:6px;color:rgba(255,244,228,.5)}
.breadcrumb li+li::before{content:'/';opacity:.4}
.breadcrumb a{color:rgba(255,244,228,.68);text-decoration:none}
.breadcrumb a:hover{color:var(--ember);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ember);font-weight:700}

/* Paragraphe d'introduction des pages de catégorie */
.menu-intro{
  max-width:62ch;margin:14px auto 0;
  font-size:15.5px;line-height:1.75;color:rgba(255,244,228,.7);
}

/* Maillage interne entre catégories */
.related h2{font-size:20px;margin-bottom:18px}
/* Cartes de catégorie.
   L'ancienne version était en repeat(auto-fill,minmax(200px,1fr)) : le nombre de
   colonnes variait avec la largeur, et comme le compteur était repoussé à droite
   par margin-left:auto, les libellés longs (« Nos Crispy & Box », « Nos boissons »)
   se cassaient en deux lignes. Résultat : des hauteurs inégales et une dernière
   ligne orpheline. D'où un nombre de colonnes fixe et une structure verticale. */
.related-links{
  list-style:none;margin:0 0 24px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.related-links a{
  display:flex;flex-direction:column;height:100%;
  border-radius:16px;overflow:hidden;
  background:var(--noir-2);border:1px solid rgba(255,244,228,.09);
  color:var(--creme);text-decoration:none;
  transition:border-color .2s,transform .2s;
}
/* Les visuels sources vont du carré (boissons, 800x800) au 16/9 (pizzas, 800x450).
   Le ratio est donc imposé ici et l'image recadrée, sinon chaque carte prendrait
   la hauteur de sa propre image. Le cadre réserve aussi la place avant chargement,
   ce qui évite tout décalage de mise en page. */
.related-links .rl-media{
  display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--noir-3);
}
.related-links .rl-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.related-links .rl-body{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 14px 13px;
}
.related-links .rl-name{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:14.5px;line-height:1.25;
}
.related-links .rl-ico{
  display:inline-flex;flex-shrink:0;
  width:18px;height:18px;color:var(--ember);
}
.related-links .rl-ico svg{width:100%;height:100%;display:block}
.related-links a em{
  font-style:normal;font-size:12.5px;font-weight:600;
  color:rgba(255,244,228,.5);
  /* Chiffres à largeur fixe : les compteurs s'alignent d'une carte à l'autre. */
  font-variant-numeric:tabular-nums;
}
@media (hover:hover){
  .related-links a:hover{border-color:rgba(255,138,60,.55);transform:translateY(-3px)}
  .related-links a:hover .rl-media img{transform:scale(1.06)}
  .related-links a:hover .rl-name{color:var(--ember)}
}
/* Deux colonnes dès que trois deviennent trop étroites pour le libellé. */
@media (max-width:820px){
  .related-links{grid-template-columns:repeat(2,1fr);gap:12px}
  /* En deux colonnes les cartes tombent a ~160px : un libelle comme
     « Nos Crispy & Box » passe sur deux lignes et la carte grandit, ce qui
     redonnait des hauteurs inegales. On reserve donc deux lignes pour tous,
     les cartes restent identiques quelle que soit la longueur du nom. */
  .related-links .rl-name{min-height:2.5em;align-items:flex-start}
  .related-links .rl-ico{margin-top:1px}
}
@media (max-width:400px){
  .related-links .rl-body{padding:10px 12px 11px}
  .related-links .rl-name{font-size:13.5px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .related-links a,.related-links .rl-media img{transition:none}
  .related-links a:hover{transform:none}
  .related-links a:hover .rl-media img{transform:none}
}
.related-back a{color:var(--ember);font-weight:700;text-decoration:none;font-size:14px}
.related-back a:hover{text-decoration:underline}

/* Titres destinés aux lecteurs d'écran et aux robots, masqués visuellement.
   Non pénalisant : le texte décrit fidèlement le contenu qui suit. */
.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;
}

/* ---- Commande par téléphone ----
   Le panier a été retiré : les clients commandent en appelant. Le téléphone
   devient donc l'unique action, et il doit être impossible à manquer. */
.btn-call{
  background:var(--noir-2,#211a13);
  color:var(--ember,#FF8A3C);
  border:2px solid var(--ember,#FF8A3C);
}
@media (hover:hover){
  .btn-call:hover{background:var(--ember,#FF8A3C);color:#16120E}
}
/* Un seul bouton dans la barre du bas : il prend toute la largeur. */
.orderbar-call{
  flex:1;justify-content:center;text-align:center;
  font-size:15px;font-weight:800;
}
.menu-commander{
  margin-top:14px;font-size:15px;color:rgba(255,244,228,.75);
}
.menu-commander a{color:var(--ember);text-decoration:none}
.menu-commander a:hover{text-decoration:underline}

/* Le nom du produit est passé de <div> à <h3> (hiérarchie de titres correcte
   pour les robots) : on annule la marge par défaut du navigateur. */
h3.pizza-name{margin:0;font-size:inherit;line-height:inherit}

/* Alignement des encarts entre cartes d une meme rangee.
   Le bloc titre + ingredients a une hauteur variable : un nom qui passe sur
   deux lignes (« Poutine Party XL ») ou une liste d ingredients plus longue
   decalait vers le bas tout ce qui suit, si bien que l encart « Supplements »
   d une carte ne s alignait plus sur celui de sa voisine.
   La grille etire deja toutes les cartes d une rangee a la meme hauteur :
   il suffit de pousser vers le bas tout ce qui suit le titre. */
.pizza-card-head{margin-bottom:auto}

/* Accroche du hero passee dans le H1 : on neutralise la typo du titre pour
   qu elle garde exactement son rendu de ligne d accroche. */
.hero h1 .hero-eyebrow{display:flex;line-height:1.4;letter-spacing:.3em}

/* Carte integree sous les infos pratiques (chargee a la demande). */
.map-embed{
  margin-top:18px;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,244,228,.12);aspect-ratio:16/6;background:#1e1712;
}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:720px){.map-embed{aspect-ratio:4/3}}

/* Quatre cartes d infos (ajout de la zone de livraison) : 4 colonnes sur grand
   ecran, 2x2 sur tablette, une colonne sur mobile. */
.infos-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.infos-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.infos-grid{grid-template-columns:1fr}}

/* Mode borne QR (?qr=1) : la classe est posée avant peinture par le script
   inline, donc pas de scintillement. */
.qr-mode .header,
.qr-mode .footer,
.qr-mode .orderbar,
.qr-mode .breadcrumb,
.qr-mode .related{display:none!important}