/* ==========================================================================
   Pizza Crousty — commande en ligne
   Refonte visuelle « snack de nuit » : fond charbon, photos plein cadre,
   rouge braise pour l'action, or pour la sélection. Mobile-first strict.
   Aucune logique ici : les noms de classes suivent app.js à la lettre.
   ========================================================================== */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/anton-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/space-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/space-mono-700-latin.woff2") format("woff2");
}

/* THÈME CLAIR — 16/08/2026. Bascule faite ICI et dans la poignée de règles
   marquées « [clair] » plus bas. Règle de tri appliquée : ce qui est POSÉ SUR UNE
   PHOTO reste sombre (le texte blanc y est lisible), ce qui est au niveau de la
   PAGE bascule. Palette sombre d'origine : 07_ARCHIVES/backups/simply-good-styles-AVANT-clair2-*.css */
:root {
  --nuit: #ffffff;          /* fond de page */
  --nuit-2: #f6f6f7;
  --surface: #ffffff;       /* cartes */
  --surface-2: #f3f4f6;     /* panneaux, champs */
  --surface-3: #e8eaed;
  --creme: #16181d;         /* texte principal */
  --creme-2: #3f434b;
  --creme-pale: #6b7280;    /* texte secondaire */
  --rouge: #e03a17;         /* ACTION */
  --rouge-fonce: #b82d0f;
  --rouge-sombre: #fdeae5;
  --or: #b8820c;            /* SÉLECTION — #ffc233 est illisible sur blanc */
  --or-fonce: #916509;
  --or-sombre: #fdf3dc;
  --vert: #1d9e4b;
  --alerte: #c01824;
  --bordure: #16181d1f;
  --bordure-forte: #16181d33;
  --sur-photo: #fdf6ec;     /* texte posé SUR une image : suit la photo, jamais le thème */
  --sur-photo-2: #e3d6c4;
  --or-sur-photo: #ffc233;  /* l'or clair est illisible sur blanc mais juste sur une photo */
  --rayon: 20px;
  --rayon-s: 13px;
  --ombre-carte: 0 1px 2px #16181d14, 0 10px 26px #16181d1a;
  --ombre-flottante: 0 18px 44px #16181d33;
  --anton: "Anton", "Futura", "Trebuchet MS", sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; }
h1, h2, .marque, .titre-section {
  font-family: var(--anton);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 0.98;
}
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
a { color: var(--or-fonce); }  /* [clair] --or ne fait que 3,37:1 sur blanc :
     bon pour un titre, trop faible pour un lien. --or-fonce passe AA. */
a:hover { color: var(--creme); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 6px; }

/* ---------- Bandeau démo (sécurité : doit rester alarmant) ---------- */
.bandeau-demo {
  background: repeating-linear-gradient(135deg, var(--alerte) 0 14px, #98131c 14px 28px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 12px;
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #ffffffe6; /* [clair] voile d'en-tête */
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--bordure);
}
.entete-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.marque {
  font-size: 1.5rem;
  color: var(--creme);
  line-height: 1;
}
.marque em {
  font-style: normal;
  color: var(--rouge);
}
.entete-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--creme);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.entete-tel:hover { border-color: var(--or); color: var(--creme); background: var(--surface-2); }
.entete-tel:active { transform: scale(0.97); }

/* ---------- Bandeau état serveur (fermé / pause) ---------- */
.bandeau-etat {
  background: var(--or);
  color: #221a06;
  font-weight: 800;
  text-align: center;
  padding: 11px 16px;
  font-size: 0.95rem;
}

/* ---------- Héro ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 78vw;
  max-height: 620px;
  display: flex;
  align-items: flex-end;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 18/08 : le hero est la DEVANTURE panoramique (1814x867, ratio 2,09).
     Le texte du hero occupe le BAS du cadre ; on remonte donc le cadrage pour
     que l'enseigne et le téléphone restent au-dessus de lui, jamais derrière. */
  object-position: center 34%;
  z-index: -2;
  animation: heroZoom 9s ease-out both;
}
@keyframes heroZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #100d0bd9 0%, #100d0b40 34%, #100d0bd6 74%, var(--nuit) 100%),
    radial-gradient(120% 80% at 15% 100%, #f0431f2e 0%, transparent 60%);
}
.hero-texte {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 26px 16px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.hero h1 {
  font-size: clamp(2.1rem, 10.5vw, 4rem);
  color: var(--sur-photo);
  text-shadow: 0 4px 30px #000000b3;
  max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--or-sur-photo); display: block; }
.baseline {
  margin: 0;
  color: var(--sur-photo-2);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero-infos {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
}
.hero-infos li {
  background: #fdf6ec1a;
  border: 1px solid var(--bordure-forte);
  backdrop-filter: blur(8px);
  color: var(--sur-photo);
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.hero-infos li:first-child {
  background: var(--vert);
  border-color: transparent;
  color: #06240f;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  width: 100%;
}

/* Pastille ouvert / fermé, calculée à l'affichage (horaires config 11h–2h) */
.statut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #0b1a0fcc;
  border: 1px solid #34c46b66;
  color: #8ff0b3;
}
.statut::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 0 #34c46bb3;
  animation: pouls 2.4s ease-out infinite;
}
.statut[data-ouvert="non"] {
  background: #1f0f0dcc;
  border-color: #f0431f59;
  color: #ffb9a6;
}
.statut[data-ouvert="non"]::before { background: var(--rouge); animation: none; }
@keyframes pouls {
  0% { box-shadow: 0 0 0 0 #34c46b99; }
  70% { box-shadow: 0 0 0 9px #34c46b00; }
  100% { box-shadow: 0 0 0 0 #34c46b00; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-principal {
  background: linear-gradient(180deg, #ff5730, var(--rouge));
  color: #fff;
  box-shadow: 0 10px 26px #f0431f4d;
}
.btn-principal:hover { background: linear-gradient(180deg, #ff6a45, var(--rouge-fonce)); color: #fff; }
.btn-principal:active { transform: scale(0.97); box-shadow: 0 4px 14px #f0431f4d; }
.btn-secondaire {
  background: #16181d0a; /* [clair] */
  color: var(--creme);
  border: 1px solid var(--bordure-forte);
  backdrop-filter: blur(8px);
}
.btn-secondaire:hover { border-color: var(--or); color: var(--creme); background: #16181d12; } /* [clair] */
.btn-secondaire:active { transform: scale(0.97); }
.btn-commander { flex: 1 1 210px; font-size: 1.08rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ---------- Raccourcis « envies » (tuiles photo) ---------- */
.envies {
  max-width: 64rem;
  margin: 0 auto;
  padding: 26px 0 6px;
}
.titre-section {
  font-size: 1.5rem;
  color: var(--creme);
  padding: 0 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.titre-section::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--rouge), transparent);
  border-radius: 2px;
}
.envies-piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 42vw;
  gap: 11px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 16px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.envies-piste::-webkit-scrollbar { display: none; }
.envie {
  position: relative;
  scroll-snap-align: start;
  /* 18/08 : passé de 3/4 (portrait) à 1/1. Les visuels de cette bande sont des
     plats DÉTOURÉS CARRÉS : en portrait, `cover` rognait les bords et coupait
     le logo rond du Menu Duo. En carré, la photo entre entière. */
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  background: var(--surface);
  box-shadow: var(--ombre-carte);
  border: 1px solid var(--bordure);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.envie:hover { transform: translateY(-4px); border-color: var(--or); }
.envie:active { transform: scale(0.98); }
.envie img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `contain` et non `cover` : ces visuels sont détourés sur blanc, les rogner
     ampute le plat. Le fond blanc de la carte prolonge celui de l'image. */
  object-fit: contain;
  object-position: center 42%;
  background: #fff;
  padding: 6px;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.envie:hover img { transform: scale(1.07); }
.envie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #100d0b00 52%, #100d0bb8 78%, #100d0bf2 100%);
}
.envie span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  z-index: 1;
  font-family: var(--anton);
  text-transform: uppercase;
  font-size: 1.02rem;
  color: var(--sur-photo);
  line-height: 1.02;
  text-shadow: 0 2px 12px #000;
}
.envie em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--or-sur-photo);
  margin-top: 4px;
  letter-spacing: 0;
}

/* ---------- Nav catégories (onglets) ---------- */
.nav-cats {
  position: sticky;
  top: var(--h-entete, 60px);
  z-index: 30;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 11px 16px;
  background: #fffffff2; /* [clair] */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-cats::-webkit-scrollbar { display: none; }
.nav-cats a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--creme-2);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.nav-cats a:hover { color: var(--creme); border-color: var(--or); }
.nav-cats a:active { transform: scale(0.96); }
.nav-cats a.actif {
  background: var(--or);
  border-color: var(--or);
  color: #241a04;
  box-shadow: 0 6px 18px #b8820c33; /* [clair] */
}

/* ---------- Carte ---------- */
.carte {
  max-width: 64rem;
  margin: 0 auto;
  padding: 4px 16px 120px;
}
.categorie { padding-top: 20px; scroll-margin-top: 130px; }
.categorie:focus { outline: none; }
/* 23/08 — plus d'animation d'entrée : les catégories ne s'échangent plus, elles coexistent. */
@keyframes entree {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* En-tête de catégorie : photo plein cadre, titre posé dessus */
.cat-entete {
  position: relative;
  margin-bottom: 14px;
  border-radius: var(--rayon);
  overflow: hidden;
}
.cat-entete-photo {
  background: var(--surface-2);
  box-shadow: var(--ombre-carte);
  border: 1px solid var(--bordure);
}
.cat-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 50%;
}
.cat-entete-photo .cat-photo[src*="lahmacun"],
.cat-entete-photo .cat-photo[src*="barquettes"],
.cat-entete-photo .cat-photo[src*="boissons"] { object-position: center 42%; }
/* Compositions entières (plateau, planche) : on garde le cadrage d'origine,
   sinon le recadrage large coupe la moitié du plat. */
.cat-entete-photo .cat-photo[src*="menu-etudiant"] { aspect-ratio: 3 / 2; object-position: center 60%; }
.envie img[src*="menu-etudiant"] { object-position: center 62%; }
.cat-entete-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #100d0b00 30%, #100d0bd1 72%, #100d0bfa 100%);
}
.cat-entete-photo h2 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  z-index: 1;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--sur-photo);
  text-shadow: 0 3px 18px #000000c4;
}
/* Sans photo (Naans, Box, Extras, Desserts) : bandeau typographique plein */
.cat-entete:not(.cat-entete-photo) {
  background:
    radial-gradient(90% 130% at 100% 0%, #f0431f26 0%, transparent 62%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--bordure);
  padding: 26px 18px 24px 26px;
}
.cat-entete:not(.cat-entete-photo)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--or), var(--rouge));
}
.cat-entete:not(.cat-entete-photo) h2 {
  font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  color: var(--creme);
}
.cat-note {
  margin: 12px 2px 0;
  color: var(--creme-pale);
  font-size: 0.92rem;
}
.badge {
  display: inline-block;
  margin: 12px 2px 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--or-sombre);
  border: 1px solid #b8820c59; /* [clair] */
  color: var(--or);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ---------- Articles ---------- */
.articles {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.article {
  position: relative;
  display: grid;
  /* MOBILE-FIRST (mesuré le 18/08 sur 375 px) : une colonne prix dédiée écrasait
     le texte à 55 px de large — « Junior 9,90 € · Sénior … » montait sur 5 lignes.
     En étroit, le prix passe SOUS le texte ; la colonne prix revient à ≥700 px. */
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nom  btn"
    "desc btn"
    "var  btn"
    "prix btn";
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 15px 15px 15px 17px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease;
}
/* Photo par article (18/08) : vignette à gauche, comme les listes Uber Eats /
   EatOrder — le repère visuel n°1 d'une carte de pizzeria. */
.article-avec-photo {
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "photo nom  btn"
    "photo desc btn"
    "photo var  btn"
    "photo prix btn";
}
.article-photo {
  grid-area: photo;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: calc(var(--rayon-s) - 4px);
  background: var(--surface-2);
  align-self: center;
}
.article-desc {
  grid-area: desc;
  margin: 0;
  font-size: 0.8rem;
  color: var(--creme-pale);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article:hover { border-color: var(--bordure-forte); background: var(--surface-2); transform: translateY(-2px); }
.article:active { transform: translateY(0) scale(0.995); }
.article:has(.btn-ajouter:focus-visible) { border-color: var(--or); }
.article-nom {
  grid-area: nom;
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--creme);
  line-height: 1.25;
}
.article .prix {
  grid-area: prix;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--or);
  white-space: nowrap;
  letter-spacing: -0.03em;
  justify-self: start; /* mobile : le prix vit sous le texte */
}
.article-variantes {
  grid-area: var;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--creme-pale);
}
/* Le bouton couvre toute la carte (cible tactile maximale) tout en restant
   un vrai bouton focusable ; le rond « + » n'est que sa partie visible. */
.btn-ajouter {
  grid-area: btn;
  position: static;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff;
  font-size: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px #f0431f3d;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.btn-ajouter::before {
  content: "+";
  font-family: var(--sans);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  display: block;
  margin-top: -3px;
}
/* La carte entière déclenche le bouton (cible tactile maximale) sans cesser
   d'être un vrai bouton focusable. */
.btn-ajouter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rayon-s);
}
.btn-ajouter:hover { background: var(--rouge-fonce); transform: scale(1.06); }
.btn-ajouter:active { transform: scale(0.9); }

/* ---------- Comment ça marche ---------- */
.etapes {
  max-width: 64rem;
  margin: 0 auto;
  padding: 6px 16px 8px;
}
.etapes-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: etape;
}
.etapes-liste li {
  counter-increment: etape;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
}
.etapes-liste li::before {
  content: counter(etape);
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--or);
  color: #241a04;
  font-family: var(--anton);
  font-size: 1.15rem;
  display: grid;
  place-items: center;
}
.etapes-liste strong { display: block; color: var(--creme); font-size: 1rem; margin-bottom: 2px; }
.etapes-liste span { color: var(--creme-pale); font-size: 0.88rem; }

/* ---------- Avis ---------- */
.avis { max-width: 64rem; margin: 0 auto; padding: 30px 0 6px; }
.avis h2 {
  font-size: 1.5rem;
  color: var(--creme);
  padding: 0 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.avis h2::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--or), transparent);
  border-radius: 2px;
}
.avis-liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84vw;
  gap: 11px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 16px 14px;
  scrollbar-width: none;
}
.avis-liste::-webkit-scrollbar { display: none; }
.avis-carte {
  scroll-snap-align: start;
  margin: 0;
  padding: 20px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.avis-carte blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--creme-2);
}
.avis-carte figcaption {
  color: var(--creme-pale);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- Accès / itinéraire ---------- */
.acces { max-width: 64rem; margin: 0 auto; padding: 26px 16px 0; }
.acces-bloc {
  display: grid;
  gap: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--bordure);
  background: var(--surface);
  box-shadow: var(--ombre-carte);
}
.plan {
  position: relative;
  min-height: 260px;
  background: var(--surface-2);
}
.plan-cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan-secours {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  color: var(--creme-pale);
  font-size: 0.9rem;
}
.plan-secours strong { color: var(--creme); font-size: 1.05rem; }
.acces-infos { padding: 20px 18px 22px; display: grid; gap: 14px; }
.acces-infos h2 { font-size: 1.45rem; color: var(--creme); }
.acces-liste { display: grid; gap: 9px; margin: 0; }
.acces-liste div { display: flex; gap: 11px; align-items: baseline; }
.acces-liste dt {
  flex: 0 0 78px;
  color: var(--creme-pale);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.acces-liste dd { margin: 0; color: var(--creme); font-size: 0.98rem; }
.acces-liste dd a { color: var(--creme); text-decoration: none; border-bottom: 1px solid var(--bordure-forte); }
.acces-liste dd a:hover { color: var(--or); border-color: var(--or); }
.acces-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.acces-actions .btn { flex: 1 1 160px; min-height: 48px; font-size: 0.95rem; }

/* ---------- Pied ---------- */
.pied { padding: 26px 0 130px; }
.pied-facade {
  width: calc(100% - 32px);
  max-width: calc(64rem - 32px);
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-carte);
}
.pied-infos {
  max-width: 64rem;
  margin: 0 auto;
  padding: 22px 16px;
  display: grid;
  gap: 7px;
}
.pied-infos .marque { font-size: 1.35rem; margin-bottom: 2px; }
.pied-infos p { margin: 0; color: var(--creme-2); font-size: 0.95rem; }
.pied-infos address { font-style: normal; color: var(--creme-pale); }
.pied-infos a { color: var(--or); }
.pied-paiement {
  margin-top: 8px !important;
  color: var(--creme-pale) !important;
  font-size: 0.84rem !important;
}

/* ---------- Barre panier flottante ---------- */
.barre-panier {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 45;
  max-width: 33rem;
  margin: 0 auto;
  min-height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5730, var(--rouge));
  color: #fff;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--ombre-flottante), 0 0 0 1px #ffffff4d inset;
  animation: monteePanier 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  transition: transform 0.12s ease, background 0.2s ease;
}
@keyframes monteePanier {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.barre-panier:hover { background: linear-gradient(180deg, #ff6a45, var(--rouge-fonce)); }
.barre-panier:active { transform: scale(0.985); }
#barre-panier-libelle { display: inline-flex; align-items: center; gap: 10px; }
#barre-panier-libelle::before {
  content: "🛒";
  font-size: 1.1rem;
}
#barre-panier-total { font-family: var(--mono); font-weight: 700; }

/* ---------- Feuilles (bottom-sheets) ---------- */
.feuille {
  border: 1px solid var(--bordure-forte);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 0;
  width: 100%;
  max-width: 33rem;
  max-height: 92dvh;
  margin: auto auto 0;
  background: var(--nuit-2);
  color: var(--creme);
  box-shadow: 0 -26px 70px #16181d29; /* [clair] */
  animation: monteeFeuille 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes monteeFeuille {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.feuille::backdrop { background: #16181d5c;  /* [clair] voile de dialogue */ backdrop-filter: blur(4px); }
.feuille-inner {
  padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  max-height: 92dvh;
  -webkit-overflow-scrolling: touch;
  /* 23/08 : arrivé au bout de la feuille, le geste ne doit PAS continuer sur la
     page derrière (bug iPhone). Doublé côté JS par le verrou de <body>. */
  overscroll-behavior: contain;
}
.feuille-inner::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 99px;
  background: var(--bordure-forte);
  margin: -6px auto 14px;
}
.feuille h2 {
  font-size: 1.45rem;
  color: var(--creme);
  padding-right: 50px;
  margin-bottom: 4px;
}
.feuille-fermer {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bordure-forte);
  background: var(--surface-2);
  color: var(--creme);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.feuille-fermer:hover { border-color: var(--or); }
.feuille-fermer:active { transform: scale(0.94); }

.groupe { margin: 18px 0; }
.groupe-titre {
  display: block;
  margin-bottom: 9px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--creme);
}
.groupe-sous { color: var(--creme-pale); font-weight: 500; font-size: 0.8rem; }

.choix { display: grid; gap: 8px; }
.choix label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: var(--rayon-s);
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--creme);
  font-size: 0.97rem;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.choix label:hover { border-color: var(--bordure-forte); }
.choix label:has(input:checked) { border-color: var(--or); background: var(--or-sombre); }
.choix input { width: 22px; height: 22px; accent-color: var(--rouge); flex: 0 0 auto; }
.choix .choix-prix { margin-left: auto; color: var(--or); font-weight: 700; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--creme-2);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.chips label:hover { border-color: var(--or); color: var(--creme); }
.chips label:active { transform: scale(0.96); }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:checked) {
  background: var(--or);
  border-color: var(--or);
  color: #241a04;
  box-shadow: 0 4px 12px #b8820c33; /* [clair] */
}
.chips label:has(input:checked)::before { content: "✓"; font-weight: 900; }
/* 23/08 — crudités cochées en teinte DOUCE (demande de Loann : « une couleur un peu
   moins vive pour salade tomate oignon »). Elles sont pré-cochées toutes les trois :
   en orange plein, c'est un bloc de trois pavés vifs sur chaque fiche. */
.chips.chips-crudites label:has(input:checked) {
  background: color-mix(in srgb, var(--or) 13%, #fff);
  border-color: color-mix(in srgb, var(--or) 55%, #fff);
  color: var(--creme);
  box-shadow: none;
}
.chips.chips-crudites label:has(input:checked)::before { color: var(--or); }

input[type="text"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border-radius: var(--rayon-s);
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 1rem;
}
input::placeholder, textarea::placeholder { color: #9aa0a8; /* [clair] */ }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--or); background: var(--surface-2); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--creme-pale) 50%), linear-gradient(135deg, var(--creme-pale) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
textarea { resize: vertical; min-height: 68px; line-height: 1.4; }

.stepper { display: flex; align-items: center; gap: 16px; }
.stepper button {
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: 1px solid var(--bordure-forte);
  background: var(--surface-2);
  color: var(--creme);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.12s ease;
}
.stepper button:hover { background: var(--surface-3); }
.stepper button:active { transform: scale(0.9); }
.stepper .qte { font-family: var(--mono); font-size: 1.2rem; min-width: 2ch; text-align: center; }

.pied-feuille {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, #ffffff00, var(--nuit-2) 26%) /* [clair] */;
  padding: 14px 0 2px;
  margin-top: 10px;
}
.pied-feuille .btn { width: 100%; }

.segmente {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 5px;
}
.segmente label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  color: var(--creme-2);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.segmente input { position: absolute; opacity: 0; pointer-events: none; }
.segmente label:has(input:checked) { background: var(--or); color: #241a04; }

.ligne-panier {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bordure);
}
.ligne-panier strong { font-weight: 700; font-size: 1rem; color: var(--creme); }
.ligne-panier .details { font-size: 0.8rem; color: var(--creme-pale); margin-top: 3px; line-height: 1.4; }
.ligne-panier .cote { text-align: right; flex: 0 0 auto; display: grid; gap: 8px; justify-items: end; }
.ligne-panier .cote .mono { font-weight: 700; font-size: 1rem; color: var(--or); }
.mini-stepper { display: flex; align-items: center; gap: 8px; }
.mini-stepper button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--creme);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.mini-stepper button:hover { border-color: var(--or); }
.mini-stepper button:active { background: var(--surface-2); }

.totaux {
  display: grid;
  gap: 6px;
  padding: 16px 0 6px;
  margin-top: 4px;
  border-top: 1px solid var(--bordure);
  font-size: 0.96rem;
}
.totaux .rangee { display: flex; justify-content: space-between; color: var(--creme-pale); }
.totaux .total {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--creme);
  padding-top: 6px;
  border-top: 1px dashed var(--bordure-forte);
  margin-top: 4px;
}
.totaux .total .mono { color: var(--or); }

.message-info {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--creme-pale);
  line-height: 1.45;
}
.message-erreur {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: var(--rayon-s);
  background: var(--rouge-sombre);
  border: 1px solid #f0431f66;
  color: #ffc4b4;
  font-size: 0.9rem;
  font-weight: 600;
}

.feuille-confirmation { text-align: center; }
.confirmation-check { font-size: 2.6rem; margin: 6px 0 0; }
.confirmation-numero {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--or);
  margin: 6px 0 10px;
  letter-spacing: 0.04em;
}
.feuille-confirmation .message-info { text-align: center; }

/* ---------- Écrans larges ---------- */
@media (min-width: 700px) {
  .hero { min-height: 52vh; }
  .article-photo { width: 84px; height: 84px; }
  /* ≥700 px : la colonne prix dédiée revient (l'œil la cherche à droite) */
  .article {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "nom  prix btn"
      "desc prix btn"
      "var  prix btn";
  }
  .article-avec-photo {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "photo nom  prix btn"
      "photo desc prix btn"
      "photo var  prix btn";
  }
  .article .prix { justify-self: end; }
  .envies-piste { grid-auto-columns: 210px; }
  .avis-liste { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .articles { grid-template-columns: 1fr 1fr; }
  .etapes-liste { grid-template-columns: repeat(3, 1fr); }
  .acces-bloc { grid-template-columns: 1.15fr 1fr; }
  .plan { min-height: 340px; }
}
@media (min-width: 1000px) {
  .hero-texte { padding: 40px 16px 40px; }
  .cat-photo { aspect-ratio: 2 / 1; max-height: 420px; }
  .cat-entete-photo .cat-photo[src*="menu-etudiant"] { aspect-ratio: 3 / 2; max-height: 460px; }
}

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

/* ---------- Ajustements Cowork (post-Design) ---------- */
/* Carte OpenStreetMap : le design prévoyait le cadre (.plan-cadre) mais le
   bundle ne pouvait pas embarquer d'iframe. Hauteur remontée (260 px d'origine)
   parce que la barre d'attribution OSM — obligatoire, licence ODbL — passe sur
   deux lignes dans un cadre étroit et mangeait le plan. */
.plan { min-height: 340px; }
@media (min-width: 700px) {
  .plan { min-height: 400px; }
}
/* Le repli n'est là que si l'iframe est bloquée : il ne doit jamais capter le
   clic à travers la carte. */
.plan-cadre { z-index: 1; }

/* Sauce au-delà du plafond : visiblement indisponible, mais pas invisible. */
.chips label.chip-inactif { opacity: .38; cursor: not-allowed; }


/* ---------- Fiche produit — présentation (16/08/2026) ----------
   Une question par groupe, repliable, avec le compte de ce qui est choisi.
   Aucune de ces règles ne porte de logique : le JS ne lit que .groupe-compteur. */
.fiche-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.fiche-photo {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--bordure);
}
.fiche-titres { min-width: 0; }
.fiche-categorie {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--creme-pale);
}

.groupe-pliable { border-top: 1px solid var(--bordure); }
.groupe-pliable > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 26px 13px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  min-height: 44px;          /* cible tactile */
}
.groupe-pliable > summary::-webkit-details-marker { display: none; }
.groupe-pliable > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--creme-pale);
  border-bottom: 2px solid var(--creme-pale);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.groupe-pliable[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.groupe-pliable > summary:hover .groupe-question { color: var(--rouge); }

.groupe-compteur {
  flex: 0 0 auto;
  min-width: 2.6em;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rouge);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
}
.groupe-compteur.vide { background: var(--surface-3); color: var(--creme-pale); }
.groupe-question {
  font-family: var(--anton);
  text-transform: uppercase;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: var(--creme);
}
.groupe-contrainte {
  flex: 1 1 100%;
  padding-left: calc(2.6em + 26px);
  margin-top: -6px;
  font-size: 0.78rem;
  color: var(--creme-pale);
}
.groupe-contrainte:empty { display: none; }
.groupe-pliable > *:not(summary) { padding-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .groupe-pliable > summary::after { transition: none; }
}

/* ---------- Recherche dans la carte + filtres par base (18/08/2026) ---------- */

.recherche-carte {
  max-width: var(--largeur, 1080px);
  margin: 18px auto 0;
  padding: 0 16px;
}
#recherche {
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--creme);
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
#recherche:focus { border-color: var(--rouge); box-shadow: 0 0 0 3px var(--rouge-sombre); }
#recherche::placeholder { color: var(--creme-pale); }
.recherche-compte {
  margin: 8px 2px 0;
  font-size: 0.85rem;
  color: var(--creme-pale);
}

/* Mode recherche : toutes les catégories qui ont des résultats s'affichent,
   les en-têtes photo se replient pour laisser la place aux résultats. */
html.recherche-active .categorie { display: none !important; }
html.recherche-active .categorie.a-resultats { display: block !important; }
html.recherche-active .cat-photo,
html.recherche-active .chips-filtres,
html.recherche-active .envies { display: none !important; }
html.recherche-active .cat-entete-photo { min-height: 0; }
html.recherche-active .cat-entete h2 { position: static; }

/* Chips de filtre (pizzas par base) */
.chips-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.chip-filtre {
  padding: 7px 14px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--creme-2);
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.chip-filtre:hover { border-color: var(--creme-2); }
.chip-filtre.actif {
  color: #fff;
  background: var(--rouge);
  border-color: var(--rouge);
}
.hors-base { display: none !important; }

/* ---------- Options avec vignette (groupes EatOrder, 18/08/2026) ---------- */
/* Pâte normale / pâte fromage, boissons, desserts : chez eux chaque option porte
   sa photo. C'est ce qui rend la fiche reconnaissable au premier coup d'œil. */
.choix label.choix-photo {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.opt-photo {
  /* 18/08 : réduites de 40 à 32 px. Ces vignettes viennent du catalogue EatOrder
     et sont de petite définition : au-delà, le flou se voit. Petites, elles se
     lisent comme des pictos. Fond BLANC et non gris : les images sont détourées
     sur blanc, un fond gris dessinait un carré visible autour de chacune. */
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  flex: none;
  mix-blend-mode: multiply;   /* fond blanc de l'image ↔ fond blanc de la carte */
}

/* ==========================================================================
   CARTES EN GRILLE, PHOTO EN HAUT — 18/08/2026
   Demande de Loann : « recrée la même interface qu'EatOrder ». Leur carte est
   une GRILLE de cartes photo-en-haut, pas une liste. La vignette à gauche
   posée cette nuit était lisible mais ne leur ressemblait pas — et c'est
   l'écran sur lequel ils comparent en premier.
   Ne s'applique QU'AUX articles qui ont une photo : un article sans photo
   garde la disposition en ligne, qui reste correcte.
   ========================================================================== */

.articles:has(.article-avec-photo) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 620px)  { .articles:has(.article-avec-photo) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .articles:has(.article-avec-photo) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .articles:has(.article-avec-photo) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.article-avec-photo {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: center;
}
.article-avec-photo .article-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  /* 23/08 : BLANC et non --surface-2. Les photos de la grille sont toutes
     détourées sur blanc, mais une partie sont des PNG TRANSPARENTS (canettes
     EatOrder, Monster, Coca US) : sur le gris du panneau, elles ressortaient
     dans un cadre gris à côté de voisines sur carré blanc opaque. Même grille,
     deux fonds. Le blanc rend les deux familles identiques. */
  background: #fff;
}
.article-avec-photo .article-nom {
  padding: 11px 12px 0;
  font-size: 0.95rem;
  line-height: 1.2;
}
.article-avec-photo .prix {
  padding: 5px 12px 0;
  justify-self: center;
  font-size: 1rem;
  color: var(--rouge);           /* leur prix est orange, pas doré */
}
.article-avec-photo .article-desc {
  /* 🔴 18/08/2026 — le padding-bas doit rester HORS de la zone rognée.
     `overflow:hidden` rogne au bord de la BOÎTE DE PADDING, pas du contenu : avec
     `padding-bottom:12px`, la 4e ligne se peignait dans ces 12 px et restait
     visible, tranchée en deux, JUSTE SOUS le « … » du clamp. Visible sur 4 cartes
     sur 6 en 375 px. Le padding-bas est donc passé en `margin-bottom` : le rognage
     tombe pile à la fin de la 3e ligne.
     ⚠️ Défaut INVISIBLE à la mesure du DOM (hauteur et scroll horizontal étaient
     corrects) — trouvé à la capture d'écran. Ne pas le réintroduire en refusionnant
     le padding. */
  padding: 5px 12px 0;
  margin-bottom: 12px;
  -webkit-line-clamp: 3;
  font-size: 0.76rem;
  margin-top: auto;              /* la description colle au bas : cartes alignées */
}
/* Les 3 tailles détaillées font doublon avec « dès 9,90 € » — EatOrder n'affiche
   que le « à partir de ». Le détail reste dans la fiche. */
.article-avec-photo .article-variantes { display: none; }

/* Le « + » flotte sur la photo, en bas à droite (repère Uber Eats / EatOrder) */
.article-avec-photo .btn-ajouter {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 38px;
  height: 38px;
  z-index: 2;
}
.article-avec-photo .btn-ajouter::before { font-size: 1.5rem; }

/* Toute la carte est cliquable — géré dans app.js (délégation sur .article-avec-photo),
   pas par une astuce CSS : un pseudo-élément en pointer-events:none ne capte rien. */
.article-avec-photo { cursor: pointer; }

/* ==========================================================================
   AVIS ET ÉTAPES — pictogrammes et étoiles (18/08/2026)
   Demande de Loann : « améliore le design avec des dessins / symboles ».
   Tout est en SVG intégré ou en caractère : zéro requête, zéro CDN.
   ========================================================================== */

.avis-resume {
  margin: 6px 0 18px;
  font-size: 1rem;
  color: var(--creme-2);
}
.avis-etoiles {
  display: inline-block;
  color: var(--or);
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  line-height: 1;
}
.avis-etoiles-vides { color: var(--bordure-forte); }
.avis-carte .avis-etoiles { margin-bottom: 8px; }
/* 18/08 : guillemet en filigrane RETIRÉ (demande de Loann). Le texte des avis
   porte déjà ses propres « … » : le second signe faisait doublon et se lisait
   comme deux traits parasites entre les étoiles et la citation. */

.etapes-titre {
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: var(--creme);
  margin: 0 0 18px;
}
/* ⚠ SPÉCIFICITÉ : `.etapes-liste span` (0,1,1) bat `.etape-icone` (0,1,0) et
   repeignait le trait en gris sur l'orange — mesuré au navigateur le 18/08.
   Le sélecteur est donc qualifié par son parent. */
.etapes-liste .etape-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  /* Esthétique : cercle plein en dégradé chaud (l'orange de LEUR enseigne, #fc8f4c,
     vers le rouge d'action), trait blanc dessus. L'aplat rose pâle précédent
     manquait de contraste et jurait avec le reste de la page. */
  border-radius: 50%;
  background: linear-gradient(145deg, #fc8f4c 0%, var(--rouge) 78%);
  color: #fff;
  box-shadow: 0 6px 16px #e03a1733;
  margin-bottom: 12px;
}
.etapes-liste .etape-icone svg { width: 25px; height: 25px; }
/* Le numéro d'origine (li::before, plus haut) est CONSERVÉ — il porte déjà
   `counter-increment` sur le li. En redéclarer un ici affichait 2, 4, 6.
   On le rend juste plus discret : le pictogramme devient le repère principal. */
.etapes-liste li::before {
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  background: var(--or-sombre);
  color: var(--or-fonce);
  align-self: center;
}
/* Le pictogramme prend la place d'honneur, à gauche du texte. */
.etapes-liste li { align-items: center; }
.etapes-liste .etape-icone { margin-bottom: 0; }

/* Mention « photos non contractuelles » — ajoutée le 19/08/2026.
   Obligatoire tant que les photos d'articles viennent d'un catalogue et non du
   restaurant : sur un module de commande, la photo décrit ce qui est acheté. */
.mention-photos{
  margin:1.5rem auto 0;max-width:60ch;padding:0 1rem;
  font-size:.78rem;line-height:1.5;text-align:center;
  color:var(--textePale,#8b8778);
}

/* ─────────────────────────────────────────────────────────────────────────────
   19/08/2026 — ARTICLE SANS PHOTO DANS UNE GRILLE DE CARTES.
   `.articles:has(.article-avec-photo)` passe TOUTE la liste en grille de cartes
   dès qu'UN SEUL article a une photo. Les articles sans photo gardaient alors la
   mise en page « ligne de liste » : dans la section Boissons, Corona, Flying Fish,
   Efes et les Dr Pepper s'affichaient à plat au milieu de cartes — ça donnait
   l'impression de DEUX CATÉGORIES dans une seule (signalé par Loann à l'écran).
   Ils prennent donc la même forme de carte, avec un aplat neutre à la place de la
   photo. Le jour où l'article reçoit sa photo, cette règle ne s'applique plus.
   ───────────────────────────────────────────────────────────────────────────── */
.articles:has(.article-avec-photo) > .article:not(.article-avec-photo) {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: center;
}
.articles:has(.article-avec-photo) > .article:not(.article-avec-photo)::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,.05) 0 38%, transparent 39%),
    var(--surface-2);
}
.articles:has(.article-avec-photo) > .article:not(.article-avec-photo) .article-nom {
  padding: 11px 12px 0; font-size: .95rem; line-height: 1.2;
}
.articles:has(.article-avec-photo) > .article:not(.article-avec-photo) .prix {
  padding: 5px 12px 0; justify-self: center; font-size: 1rem; color: var(--rouge);
}
.articles:has(.article-avec-photo) > .article:not(.article-avec-photo) .article-desc {
  padding: 5px 12px 0; margin: auto 0 12px; font-size: .76rem; -webkit-line-clamp: 3;
}
/* Cohérent avec les cartes photo : le détail des tailles reste dans la fiche. */
.articles:has(.article-avec-photo) > .article:not(.article-avec-photo) .article-variantes {
  display: none;
}
.articles:has(.article-avec-photo) > .article:not(.article-avec-photo) .btn-ajouter {
  position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; z-index: 2;
}

/* Logo d'en-tête (19/08/2026) — bandeau or sur noir fourni par le restaurant.
   Il remplace le nom en toutes lettres dans la barre du haut. Hauteur fixe et
   largeur auto : le ratio du fichier (2,4:1) n'est jamais forcé. */
.marque-logo { display: inline-flex; align-items: center; line-height: 0; }
.marque-logo img { height: 42px; width: auto; display: block; }
@media (min-width: 700px) { .marque-logo img { height: 54px; } }

/* Chips de sauce avec vignette (19/08/2026) — même repère visuel que les
   suppléments, qui portent déjà leur image. */
.chips label.chip-photo { display: inline-flex; align-items: center; gap: 7px; }
.chips label.chip-photo .opt-photo { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; }

/* ═══════════════════════════════════════════════════════════════════════════
   19/08/2026 — ACCORD CHROMATIQUE AVEC LE SITE VITRINE (demande de Loann).
   La vitrine est en NOIR #0A0A0B + OR #E0B75C ; le module héritait du blanc et du
   rouge orangé de Pizza Crousty. Deux pages du même restaurant, deux identités.

   🔴 CE QU'ON NE FAIT PAS, ET POURQUOI : passer le module en fond noir. Les 51
   vignettes d'articles sont détourées SUR BLANC — sur du noir, chaque photo
   deviendrait un rectangle blanc. Il faudrait toutes les redétourer en
   transparence, et certaines ne s'y prêtent pas. Le corps reste donc clair.

   Ce qu'on aligne : les DEUX BANDEAUX (en-tête et pied) passent au noir de la
   vitrine — c'est là que se voyait le plus le décalage, son logo étant or sur noir
   posé sur un en-tête blanc, il se lisait comme un rectangle collé. Et les repères
   d'action passent du rouge au noir-et-or de son enseigne.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --noir-marque: #0A0A0B;
  --or-marque: #E0B75C;
  --or-marque-clair: #F3DCA0;
}

/* ── Les deux bandeaux ─────────────────────────────────────────────────────── */
.entete {
  /* 🔑 Le noir est CALÉ SUR CELUI DU LOGO, pas choisi à l'œil : son fichier a un
     fond dominant #181817 (mesuré). Avec le noir de la vitrine (#0A0A0B) le
     rectangle du logo restait visible — plus clair que le bandeau. Opaque, sans
     voile : un fond translucide laisse remonter la page et casse l'accord. */
  background: #181817;
  border-bottom: 1px solid #E0B75C33;
}
.entete .marque { color: var(--or-marque-clair); }
.entete .marque em { color: var(--or-marque); }
.entete-tel {
  color: var(--or-marque-clair);
  border-color: #E0B75C55;
  background: #ffffff0f;
}
.entete-tel:hover { background: #E0B75C1f; border-color: var(--or-marque); }
/* Le fond du logo et celui du bandeau étant identiques, aucun mode de fusion
   n'est nécessaire — `mix-blend-mode` altérait les ors sur certains navigateurs. */
.marque-logo img { display: block; }

.pied {
  background: var(--noir-marque);
  color: #F0E7D6;
  margin-top: 40px;
  padding-top: 34px;
}
.pied .marque { color: var(--or-marque-clair); }
.pied .marque em { color: var(--or-marque); }
.pied a { color: var(--or-marque); }
.pied address, .pied p { color: #F0E7D6; }

/* ── Repères d'action : le noir-et-or de son enseigne remplace le rouge ────── */
.btn-ajouter { background: var(--noir-marque); color: var(--or-marque); }
.btn-ajouter:hover { background: #1b1b1f; }
.btn-principal, .barre-panier .btn-principal, button.btn-principal {
  background: var(--noir-marque);
  color: var(--or-marque-clair);
}
.btn-principal:hover { background: #1b1b1f; }

/* Les prix passent à l'or foncé, lisible sur blanc — comme sur la vitrine, où
   ils sont dorés. `--or` (#b8820c) est déjà la valeur retenue pour ça. */
.prix, .article-avec-photo .prix,
.articles:has(.article-avec-photo) > .article:not(.article-avec-photo) .prix { color: var(--or); }

/* Onglets de catégorie : RIEN À FAIRE — vérifié dans le DOM le 19/08, l'onglet
   actif est déjà `#b8820c` (l'or foncé du thème) via `.nav-cats a.actif`. La règle
   que j'avais écrite ici visait une classe `.cat-onglet` QUI N'EXISTE PAS : elle
   ne s'appliquait à rien. Retirée — du CSS qui ne matche rien finit par faire
   croire qu'un réglage est en place alors qu'il ne l'est pas. */

/* ── Héros = LE LOGO (19/08/2026, demande de Loann) ────────────────────────────
   Le héros ne porte plus une photo du lieu mais le bandeau de l'enseigne. Deux
   conséquences : l'image se voit ENTIÈRE (contain, pas cover — un logo recadré
   n'est plus un logo), et le titre est masqué à l'œil, le nom étant déjà écrit
   dans l'image. Il reste dans le DOM pour la structure Hn. */
.hero-logo {
  background: #181817;
  min-height: 0;
  /* 🔴 `.hero` est un FLEX EN LIGNE : l'image remise en flux se rangeait donc À
     CÔTÉ du texte, collée à gauche, et `margin:0 auto` n'y pouvait rien. On passe
     la colonne en vertical pour ce cas : logo au-dessus, infos dessous. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 16px 22px;
  text-align: center;
}
/* 🔴 L'image du héros est `position:absolute; inset:0` (elle sert de fond derrière
   le texte). Pour un LOGO ce montage ne convient pas : il doit occuper sa place,
   pas remplir le cadre. Elle repasse donc en flux normal.
   ⚠ HONNÊTETÉ SUR LE DIAGNOSTIC : j'ai d'abord cru mesurer une image réduite à
   32 px de large. C'ÉTAIT FAUX — le panneau du navigateur était à 0×0, donc TOUTES
   les mesures valaient 0. Le passage en flux normal reste le bon montage (un logo
   occupe sa place, il ne remplit pas un cadre), mais il n'a corrigé aucun bug de
   largeur : il n'y en avait pas. Vérifié ensuite en 1280×860 : héros 1280×267,
   logo peint 457×190, aucun débordement.
   🔑 Toujours lire window.innerWidth avant de croire une mesure de mise en page. */
.hero-logo .hero-img {
  position: static;
  inset: auto;
  width: min(100%, 520px);
  height: auto;
  max-height: 190px;
  margin: 0 auto;
  object-fit: contain;
  animation: none;                    /* pas de zoom sur un logo : il doit être net */
  z-index: auto;
}
.hero-logo h1, .hero-logo .baseline {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.hero-logo .hero-texte { padding: 0; align-items: center; text-align: center; width: 100%; }
.hero-logo .hero-infos { justify-content: center; }
.hero-logo .hero-actions { justify-content: center; }
/* Le bouton principal ne doit pas s'étirer sur toute la largeur du héros. */
.hero-logo .hero-actions .btn { flex: 0 0 auto; min-width: 190px; }
.hero-logo .hero-infos li { color: var(--sur-photo-2); }

/* Le logo d'en-tête est maintenant le MÉDAILLON ROND : format carré, pas bandeau. */
.marque-logo img { height: 40px; width: 40px; object-fit: contain; }
@media (min-width: 700px) { .marque-logo img { height: 48px; width: 48px; } }
.marque-logo { gap: 10px; }
.marque-logo .marque { font-size: 1.15rem; letter-spacing: .02em; }
@media (min-width: 700px) { .marque-logo .marque { font-size: 1.35rem; } }

/* Le voile du héros (dégradé sombre + halo rouge) existe pour poser du texte sur
   une PHOTO. Sur un héros-logo il n'a plus d'objet, et son bas clair passait comme
   une salissure grise sous le bouton Commander. Retiré pour ce cas seulement. */
.hero-logo::after { display: none; }

/* 🔴 19/08 — le bouton secondaire du héros était NOIR SUR NOIR, donc invisible.
   `.btn-secondaire` prend sa couleur de `--creme` (#16181d), le texte principal
   sur fond CLAIR. Le héros étant passé au noir, le libellé « Où nous trouver »
   disparaissait — présent dans le DOM, illisible à l'écran.
   ⚠ Un texte invisible ne se voit sur aucune mesure de mise en page : trouvé en
     lisant la couleur calculée, pas la structure. */
.hero-logo .btn-secondaire {
  color: var(--or-marque-clair);
  border-color: rgba(224, 183, 92, .45);
  background: rgba(255, 255, 255, .06);
}
.hero-logo .btn-secondaire:hover {
  background: rgba(224, 183, 92, .14);
  border-color: var(--or-marque);
  color: var(--or-marque-clair);
}

/* Rupture de stock du jour — piloté depuis /admin/carte (20/08/2026).
   L'article reste LISIBLE : le client qui cherche son produit habituel doit
   comprendre qu'il existe et qu'il est momentanément épuisé, pas croire que
   la carte a changé. */
.article-rupture { opacity: .55; }
.article-rupture .article-photo { filter: grayscale(1); }
.article-rupture .btn-ajouter { cursor: not-allowed; }
.etiq-rupture {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: var(--alerte, #d05b5b); border: 1px solid currentColor; border-radius: 9999px;
  padding: .1rem .5rem; margin-bottom: .35rem;
}

/* Bouton « une part de plus » sur une viande déjà choisie — 23/08/2026.
   Il n'apparaît que si la viande est cochée ET qu'il reste de la place : c'est ce qui
   conserve la possibilité d'un Tacos 3 viandes « 3× viande hachée », que de simples
   cases à cocher auraient supprimée. */
.viande-plus{
  font:inherit;font-weight:800;line-height:1;cursor:pointer;
  margin-left:8px;min-width:30px;min-height:30px;padding:0 8px;border-radius:999px;
  border:1.5px solid var(--rouge);background:transparent;color:var(--rouge);
}
.viande-plus:hover{background:var(--rouge);color:#fff}
.viande-plus[hidden]{display:none}

/* Bloc « à retirer sur place » du suivi de commande — 23/08/2026.
   Le client va se déplacer : plan + itinéraire, là où il regarde. */
.suivi-retrait{margin:22px 0 0;padding:18px;border-radius:var(--rayon);background:var(--surface-2);text-align:left}
.suivi-retrait-titre{margin:0 0 4px;font-weight:800}
.suivi-adresse{margin:0 0 12px;color:var(--creme-2)}
.suivi-plan{width:100%;height:220px;border:0;border-radius:var(--rayon-s);display:block;margin-bottom:12px}
.suivi-itineraire{width:100%;text-align:center}

/* ══ Formule menu mise en avant — 23/08/2026 ══
   C etait une case a cocher nue au milieu des autres options : la formule la plus
   rentable du comptoir (+3 EUR, frites + boisson) se lisait comme un detail. */
/* ═══ 23/08/2026 — « SEUL / EN MENU » EN TÊTE DE FICHE (2e version) ═══
   Deux grandes cases radio côte à côte, prix final dans chacune. La pastille ronde
   « MENU » de la 1re version se lisait comme une étiquette, pas comme un bouton. */
.choix-formule { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.formule {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 40px;
  border: 2px solid var(--bordure-forte); border-radius: 16px; background: var(--surface); cursor: pointer;
  min-height: 64px; transition: border-color .15s, background .15s;
}
.formule input { position: absolute; opacity: 0; pointer-events: none; }
.formule::before {
  content: ""; position: absolute; left: 12px; top: 16px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--bordure-forte); background: #fff; box-sizing: border-box;
}
.formule.actif { border-color: var(--or); background: color-mix(in srgb, var(--or) 9%, #fff); }
.formule.actif::before { border-color: var(--or); background: radial-gradient(circle, var(--or) 0 45%, #fff 50%); }
.formule-titre { font-weight: 800; font-size: 1rem; line-height: 1.15; }
.formule-sous { font-size: .78rem; color: var(--creme-pale); line-height: 1.2; }
.formule-prix { margin-top: 4px; font-weight: 800; color: var(--or); font-size: 1.02rem; }
.formule:focus-within { outline: 2px solid var(--or); outline-offset: 2px; }
/* Carte de la grille : petit rond rouge « Menu » sur la photo = indicateur, pas un
   bouton (pointer-events none : le clic va à la carte, la fiche fait choisir). */
.badge-menu {
  position: absolute; top: 8px; left: 8px; z-index: 2; pointer-events: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 0.56rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--or); box-shadow: 0 3px 10px #00000033;
}
/* Carte de la grille : la formule existe, on l'annonce sous le prix */
.prix-menu { display: block; font-size: .78rem; font-weight: 700; color: var(--creme-pale); }
.article-avec-photo .prix-menu { padding: 0 12px 2px; text-align: center; }
/* Le groupe boisson remonté en tête quand le menu est activé */
.groupe-boisson-menu { border-left: 3px solid var(--or); padding-left: 10px; margin-top: 8px; border-top: 0; }
.groupe-boisson-menu > summary .groupe-question { color: var(--or); }
.choix .choix-prix.inclus { color: var(--vert); }
/* (conservé pour l'historique des 3 autres modules : la carte « Passer en menu ? ») */
.groupe-menu{border:2px solid var(--rouge);border-radius:var(--rayon);padding:4px;background:color-mix(in srgb,var(--rouge) 5%,transparent)}
.menu-offre{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border:0;background:transparent}
.menu-visuels{display:flex;flex-shrink:0}
.menu-visuels img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:50%;border:2px solid var(--surface);margin-left:-14px}
.menu-visuels img:first-child{margin-left:0}
.menu-texte{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.menu-titre{font-weight:800;font-size:1.02rem}
.menu-sous{font-size:.86rem;color:var(--creme-pale)}
.menu-prix{font-weight:800;color:var(--rouge);font-size:1.08rem;white-space:nowrap}

/* ═══ 23/08/2026 — CARTE DE FIDÉLITÉ (resto.fidelite) — 2e présentation ═══
   Carte aux couleurs de la marque (bande sombre + accent), texte à gauche, QR dans
   une tuile blanche « Flashez-moi » à droite ; sur mobile, la tuile passe sous le
   bouton, petite et centrée — plus de grand QR seul en haut. */
.fidelite { padding: 26px 16px 10px; }
.fidelite-carte {
  max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
  background: var(--noir-marque, #263032); color: #f4f2ec; border-radius: 22px; padding: 22px 24px;
  box-shadow: 0 14px 40px #0000002e;
}
.fidelite-texte { min-width: 0; }
.fidelite-sur { margin: 0 0 6px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.fidelite h2 { font-family: var(--anton); font-weight: 400; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.02; margin: 0 0 10px; text-transform: uppercase; color: #fff; }
.fidelite-p { margin: 0 0 10px; font-size: .92rem; line-height: 1.4; color: #d9d5cc; }
.fidelite-code-ligne { display: inline-flex; align-items: center; gap: 0; margin: 0 0 14px; border: 1.5px solid #ffffff33; border-radius: 999px; overflow: hidden; }
.fidelite-code-label { padding: 6px 12px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d9d5cc; }
.fidelite-code { padding: 6px 14px 6px 12px; font-size: 1.1rem; font-weight: 700; letter-spacing: .14em; color: #fff; background: var(--or); }
.fidelite-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; padding: .8rem 1.6rem; text-decoration: none; }
.fidelite-app { margin: 10px 0 0; font-size: .76rem; color: #b9b4aa; }
.fidelite-tuile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
  background: #fff; border-radius: 16px; padding: 10px 10px 8px; color: var(--noir-marque, #263032);
}
.fidelite-qr { width: 128px; height: 128px; display: block; border-radius: 6px; }
.fidelite-flash { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 560px) {
  .fidelite-carte { grid-template-columns: 1fr; padding: 20px 18px; gap: 16px; }
  .fidelite-tuile { justify-self: center; }
  .fidelite-qr { width: 120px; height: 120px; }
}
.fidelite-rappel {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 10px 12px;
  border: 1px solid var(--bordure); border-radius: 14px; text-decoration: none; color: var(--creme);
  background: var(--surface);
}
.fidelite-rappel img { width: 56px; height: 56px; border-radius: 8px; background: #fff; padding: 3px; flex: 0 0 auto; }
.fidelite-rappel span { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; min-width: 0; }
.fidelite-rappel strong { font-size: .92rem; line-height: 1.2; }
.fidelite-rappel span span { color: var(--or); font-weight: 700; }

/* 23/08 — carte de fidélité sur la page de suivi (resto.fidelite) */
.suivi-fidelite {
  display: flex; align-items: center; gap: 14px; max-width: 33rem; margin: 18px auto 0; padding: 14px;
  background: var(--noir-marque, #263032); color: #f4f2ec; border-radius: 18px; text-decoration: none;
  box-shadow: 0 10px 30px #0000002a;
}
.suivi-fidelite img { width: 96px; height: 96px; flex: 0 0 auto; border-radius: 10px; background: #fff; padding: 5px; }
.suivi-fidelite-texte { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: .88rem; line-height: 1.3; }
.suivi-fidelite-texte strong { font-family: var(--anton); font-weight: 400; font-size: 1.05rem; line-height: 1.05; text-transform: uppercase; color: #fff; }
.suivi-fidelite-texte b { color: var(--or); letter-spacing: .1em; }
.suivi-fidelite-btn { margin-top: 2px; font-weight: 800; color: var(--or); }

/* 23/08 — suivi : commande remise → avis Google au centre */
.suivi-avis {
  margin: 16px 0 6px; padding: 20px 16px; text-align: center;
  background: color-mix(in srgb, var(--or) 8%, #fff); border: 1.5px solid color-mix(in srgb, var(--or) 45%, #fff);
  border-radius: 18px;
}
.suivi-avis-merci { margin: 0 0 2px; font-family: var(--anton); font-weight: 400; font-size: 1.35rem; text-transform: uppercase; line-height: 1.05; }
.suivi-avis-etoiles { margin: 2px 0 6px; color: #f5b301; font-size: 1.5rem; letter-spacing: .12em; line-height: 1; }
.suivi-avis-texte { margin: 0 auto 14px; max-width: 28rem; font-size: .92rem; color: var(--creme-pale); line-height: 1.4; }
.suivi-avis-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; padding: .95rem 1.8rem; font-size: 1.05rem; text-decoration: none; }

/* ═══ 23/08/2026 — DURCISSEMENT DU DÉFILEMENT TACTILE (Loann : « le scroll bug toujours
   sur téléphone »). Trois causes connues de saccades / gestes capturés sur iOS :
   1. un `backdrop-filter` sur un élément COLLANT est recalculé à chaque image pendant
      le défilement → barre d'onglets opaque sur écran tactile ;
   2. un carrousel horizontal en `scroll-snap-type: x mandatory` attrape le geste
      VERTICAL qui démarre dessus → `proximity` + `touch-action: pan-x pan-y` ;
   3. le geste qui arrive au bout d'un carrousel continue sur la page → `contain`. */
@media (hover: none) {
  .nav-cats { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}
.avis-liste, .envies-piste {
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.feuille-inner { touch-action: pan-y; }