/* ============================================================
   Kabana Pizz — Site public
   ============================================================
   Remplace css/style.css pour index.html, compte.html, 404.html
   et les pages légales. Charge après tokens.css puis base.css :
   ce fichier ne redéfinit ni .btn, ni les champs, ni .status-chip,
   ni .toast — ils vivent dans base.css.

   Deux choses ont disparu de l'ancien fichier :
   - les 766 lignes de styles admin (style.css:1765-2530), mortes
     depuis qu'admin.html ne charge plus que css/admin.css ;
   - les 400 lignes de rattrapage mobile « 3 produits par ligne »,
     rendues inutiles par une grille pensée mobile d'abord.
   ============================================================ */

/* ============================================================
   1. En-tête
   ============================================================
   L'ancien en-tête empilait une barre de marque et une barre de
   navigation : 124 px de haut sur un écran de 812 px, soit 15 %
   de l'écran occupés en permanence. Une seule rangée désormais,
   et les catégories descendent dans une barre collante propre.
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* Les pages secondaires posent leur .topbar dans le flux, sans le
   conteneur fixe .site-header : elle doit alors porter elle-meme son
   fond et son filet. */
body:not(:has(.site-header)) .topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  max-width: none;
  padding-left: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2));
  padding-right: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2));
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

/* Navigation textuelle : réservée au desktop sur l'accueil, où la
   barre de catégories collante prend le relais. Les pages
   secondaires (compte, 404, légales) s'en servent à toutes les
   tailles, elles n'ont pas de barre de catégories. */
.topnav {
  display: none;
  gap: var(--space-1);
}

.topnav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.topnav a:hover { background: var(--color-surface-sunken); color: var(--color-text); }

.topnav a.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.account-link:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.account-icon { display: inline-flex; }
.account-label { display: none; }

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.cart-btn:hover { background: var(--color-primary-hover); }
.cart-btn:active { background: var(--color-primary-active); }

.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-text-invert);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .topbar { min-height: 64px; gap: var(--space-3); }
  .topnav { display: flex; }
  .brand { font-size: var(--text-xl); margin-right: var(--space-4); }
  .brand img { width: 38px; height: 38px; }
  .account-label { display: inline; }
}

/* Sur l'accueil, la navigation textuelle laisse la place à la barre
   de catégories : deux navigations concurrentes sur le même écran
   forcent un arbitrage inutile. */
@media (max-width: 1023px) {
  .site-header .topnav { display: none; }
}

/* ============================================================
   2. Barre de catégories collante
   ============================================================
   Sort de l'en-tête fixe : l'accueil démarre 68 px plus haut,
   et la barre reste accessible pendant tout le parcours carte.
   ============================================================ */

.catnav {
  position: sticky;
  /* --banner-offset vaut la hauteur du bandeau de fermeture replié, ou
     0 px quand la boutique est ouverte. Sans lui, les deux éléments
     collants se recouvrent. */
  top: calc(var(--header-offset, 56px) + var(--banner-offset, 0px));
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--space-2);
  padding-block: var(--space-2);
  /* Alignée sur la colonne de contenu : le fond reste pleine largeur, mais
     à 1440 px la première puce démarrait au bord de la boîte de contenu
     et non sur son contenu, où vivent la marque et les cartes produit. */
  padding-inline: max(var(--page-gutter), calc((100% - var(--content-max)) / 2 + var(--page-gutter)));
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.catnav::-webkit-scrollbar { display: none; }

.catnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.catnav a:hover { border-color: var(--color-border-strong); color: var(--color-text); }

.catnav a.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   3. Hero
   ============================================================
   Ancienne version : un titre-slogan rimé de trois lignes, sans le
   mot « pizzeria » ni la ville, qui repoussait la première pizza à
   1055 px. Le H1 dit maintenant ce que vend le commerce et où ;
   le slogan reste, en sous-titre.
   ============================================================ */

.hero {
  padding: var(--space-5) 0 var(--space-5);
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
}

.hero__inner {
  display: grid;
  gap: var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.hero__inner > * { min-width: 0; }

.hero__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.hero__slogan {
  margin: var(--space-3) 0 0;
  max-width: 44ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* Ces puces défilaient horizontalement : à 375 px, « Paiement sur place »
   commençait à x=204 et se terminait à x=499, donc hors écran, sans aucune
   affordance de défilement. La mention la plus rassurante du hero passait
   inaperçue. Elles reviennent à la ligne. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* padding-inline resserré : à 375 px, le statut d'ouverture (179 px) et
   « Paiement sur place » (167 px) dépassaient de 11 px la largeur utile et
   tombaient sur trois lignes au lieu de deux. */
.hero__fact {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

/* Le paiement sur place est la question que se pose tout nouveau
   client, et le brief interdit de laisser croire à un paiement en
   ligne. Il est donc annoncé dès le premier écran, pas seulement
   au récapitulatif. */
.hero__fact--pay {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-weight: var(--weight-semibold);
}

.hero__fact--pay::before { content: "💶"; }

.hero__cta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero__cta .btn { flex: 1 1 0; min-width: 0; }

/* Sous 640 px le visuel du hero est retire : la grille de 22 photos
   de pizzas commence juste en dessous et joue le meme role, en plus
   utile. Ce sont 170 px gagnes avant la premiere fiche produit. */
.hero__media { display: none; }

@media (min-width: 640px) {
  .hero__media { display: block; }
}

.hero__media {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* La vidéo Vimeo garde ses proportions natives : on la déborde
   plutôt que de la déformer. */
.hero__media iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Le passage en deux colonnes attendait 900 px : entre 768 et 899 le visuel
   restait pleine largeur (720x315) et le hero occupait 613 px, soit 60 % d'un
   écran de tablette avant la première pizza. La tablette a désormais sa vraie
   mise en page, pas un mobile agrandi. */
@media (min-width: 768px) {
  .hero { padding: var(--space-8) 0; }
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-6);
  }
  .hero__cta { flex-wrap: wrap; }
  .hero__cta .btn { flex: 0 0 auto; }
  .hero__media { aspect-ratio: 4 / 3; }
}

@media (min-width: 900px) {
  .hero { padding: var(--space-10) 0 var(--space-8); }
  .hero__inner { gap: var(--space-8); }
  .hero__title { font-size: var(--text-4xl); }
  .hero__slogan { font-size: var(--text-lg); }
}

/* Badge ouvert / fermé — l'information la plus périssable de la
   page. La couleur ne porte jamais seule le sens : une pastille
   pleine double le message (WCAG 1.4.1). */
.open-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-success);
}

.open-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.open-badge.closed { color: var(--color-danger); }

/* ============================================================
   4. Bandeau de fermeture
   ============================================================ */

/* Une bande de 46 px en texte fin passait pour un bandeau de cookies.
   L'information la plus décisive de la page — on ne peut pas commander —
   occupe désormais un bloc qu'on ne saute pas. */
.closed-banner {
  /* Collant sous l'en-tête fixe : l'information disparaissait dès qu'on
     défilait vers la carte. */
  position: sticky;
  top: var(--header-offset, 56px);
  z-index: var(--z-sticky);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-block: var(--space-6);
  padding-inline: max(var(--page-gutter), calc((100% - var(--content-max)) / 2 + var(--page-gutter)));
  background: var(--color-warning-soft);
  border-bottom: 3px solid var(--color-warning);
  color: var(--color-warning);
  text-align: center;
}

.closed-banner__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-surface);
  font-size: var(--text-2xl);
  line-height: 1;
}

.closed-banner__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.closed-banner__message {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.closed-banner__hint {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.closed-banner__hint a { color: var(--color-text); }

@media (min-width: 768px) {
  .closed-banner:not(.is-compact) { padding: var(--space-8) var(--page-gutter); }
  .closed-banner:not(.is-compact) .closed-banner__title { font-size: var(--text-2xl); }
}

/* Replié : une seule ligne, le message de l'exploitant reste lisible. */
.closed-banner.is-compact {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--page-gutter);
  text-align: left;
}

.closed-banner.is-compact .closed-banner__icon {
  width: 30px;
  height: 30px;
  font-size: var(--text-base);
}

.closed-banner.is-compact .closed-banner__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.closed-banner.is-compact .closed-banner__message {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.closed-banner.is-compact .closed-banner__title,
.closed-banner.is-compact .closed-banner__hint { display: none; }

@media (min-width: 560px) {
  .closed-banner.is-compact { grid-template-columns: auto auto minmax(0, 1fr); }
  .closed-banner.is-compact .closed-banner__title { display: block; }
  .closed-banner.is-compact .closed-banner__message { grid-column: 3; }
}

/* ============================================================
   5. Sections de la carte
   ============================================================ */

.menu-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--page-gutter) var(--space-8);
}

@media (min-width: 768px) {
  .menu-section { padding-top: var(--space-8); }
}

.section-head { margin-bottom: var(--space-4); }

@media (max-width: 559px) {
  .section-head .section-eyebrow { display: none; }
}

.section-eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.section-sub {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------- Recherche globale ----------

   Placée au-dessus des trois sections, pas à l'intérieur des pizzas :
   elle porte sur toute la carte, sa position doit le dire. */

.catalog-search {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--page-gutter) 0;
}

.catalog-search__field { position: relative; }

.catalog-search input[type="search"] {
  padding-right: var(--space-12);
  -webkit-appearance: none;
  appearance: none;
}

.catalog-search input[type="search"]::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.search-clear:hover { background: var(--color-primary-soft); color: var(--color-primary); }

.search-summary {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.search-summary.is-empty {
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* ---------- Puces de filtre ---------- */

.filter-chips {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips .chip { flex: none; }

.no-results {
  grid-column: 1 / -1;
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-text-muted);
}

.no-results p { margin: 0 0 var(--space-4); }

/* ============================================================
   6. Grilles et cartes produit
   ============================================================
   Le prix restait masqué par défaut (.card-price { display:none })
   et n'était rendu que par deux media queries tardives. Il est
   maintenant toujours affiché, à toutes les tailles.
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.grid-simple { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) { .grid-simple { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-simple { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Carte pizza ---------- */

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-sunken);
}

.card-img-wrap picture {
  position: absolute;
  inset: 0;
  display: block;
}

.card-img-wrap img,
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.base-chip {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-transform: lowercase;
}

.stock-chip {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-text-invert);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-3);
}

.card-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.card-title-row h3 {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.badge-signature {
  flex: none;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* 10.88 px auparavant. Le plancher de l'échelle est 13 px. */
.card-ingredients {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La liste complete reste dans l'attribut title et dans l'encart
   reglementaire en bas de carte : ici, une ligne suffit a signaler. */
.card-allergens {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.allergen-tag {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.card-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.size-picker {
  grid-column: 1 / -1;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

/* 8.96 px auparavant : la taille de pizza, l'un des deux choix que
   la carte demande, était le texte le plus petit de la page. */
.size-pill {
  flex: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  /* 32 px : c'était le plus petit contrôle du parcours de commande, pour
     l'un des deux choix que la fiche demande. Aligné sur --control-height-sm. */
  min-height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}

.size-pill strong { font-size: var(--text-sm); font-weight: var(--weight-bold); }

.size-pill[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.card-price {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.add-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--tap-min);
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
}

.qty-stepper[hidden] { display: none; }

.qty-stepper button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
}

.qty-stepper button:hover { background: var(--color-primary); color: var(--color-text-invert); }

.qty-value {
  min-width: 22px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  /* Le rouge de marque sur son aplat clair plafonne a 4.35:1 : sous le
     seuil AA. La quantite est une donnee, elle se lit en texte courant. */
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.add-btn[hidden] { display: none; }

/* La fiche accompagnement/boisson est une rangée : ses contrôles ne
   forment pas de grille comme sur la carte pizza. */
.card-simple .card-controls {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.add-btn:hover:not([disabled]) { background: var(--color-primary-hover); }
.add-btn:active:not([disabled]) { transform: scale(0.92); }
.add-btn.added { background: var(--color-success); }
.add-btn[disabled] { background: var(--color-border-strong); cursor: not-allowed; }

/* ---------- Carte simple (accompagnements, boissons) ---------- */

/* min-height : la fiche accompagnement montait a 95 px (ligne allergenes)
   et la fiche boisson tombait à 82 px. Deux hauteurs pour un même composant,
   côte à côte dans la même page. */
.card-simple {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 96px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.card-simple picture,
.card-simple .thumb,
.card-simple .emoji-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-surface-sunken);
}

.emoji-thumb {
  display: grid;
  place-items: center;
  font-size: var(--text-2xl);
}

.card-simple .info { min-width: 0; }

.card-simple h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.card-simple .price {
  display: block;
  margin-top: 2px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.stock-inline {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-danger);
}

/* ============================================================
   7. Encart allergènes
   ============================================================ */

.allergen-notice {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.allergen-notice strong { color: var(--color-text); }

.allergen-notice ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.allergen-notice li {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-warm);
  font-size: var(--text-xs);
}

/* ============================================================
   8. Infos, horaires, adresse
   ============================================================ */

.infos {
  display: grid;
  gap: var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--page-gutter);
}

@media (min-width: 768px) { .infos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.infos-col {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.infos-col h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.infos-col p { font-size: var(--text-sm); color: var(--color-text-muted); }
.infos-col .btn { margin-top: var(--space-3); }

.pay-note {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-weight: var(--weight-semibold);
}

.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.hours th,
.hours td {
  padding: var(--space-2) 0;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.hours th { font-weight: var(--weight-medium); color: var(--color-text); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

.hours .today th,
.hours .today td {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* ---------- Panneau « nous trouver » ---------- */

.visit-panel {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .visit-panel { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: start; }
}

.visit-copy h2 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-xl); }

.address-line {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.visit-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.google-review {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-warm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.google-mark { font-weight: var(--weight-bold); color: var(--color-text); }
.google-stars { color: var(--color-warning); letter-spacing: 1px; }

/* ---------- Avis Google — preuve sociale ---------- */

.reviews {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--page-gutter);
  overflow-x: clip;
  min-width: 0;
}

.infos .reviews {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--color-border);
}

.reviews-intro {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.reviews-intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.reviews-score {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}

.reviews-score__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.google-g {
  display: block;
  flex: none;
}

.reviews-score__stars {
  margin: 0;
  color: var(--color-warning);
  font-size: var(--text-xl);
  letter-spacing: 0.18em;
  line-height: 1;
}

.reviews-score__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  line-height: 1;
}

.reviews-score__rating {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 3.25rem);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.reviews-score__denom {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.reviews-score__count {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.reviews-lead {
  margin: var(--space-1) 0 0;
  max-width: 36ch;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.reviews-stage {
  min-width: 0;
}

.reviews-viewport {
  overflow: hidden;
}

.reviews-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (hover: hover) and (pointer: fine) {
  .review-card {
    transition:
      transform var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .review-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

.review-card__stars {
  color: var(--color-warning);
  letter-spacing: 0.12em;
  font-size: var(--text-base);
  line-height: 1;
  white-space: nowrap;
}

.review-card__identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.review-card__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.review-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.review-card__quote {
  margin: 0;
  flex: 1;
}

.review-card__quote p {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  min-height: calc(var(--leading-normal) * 4em);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  text-wrap: pretty;
}

.reviews-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.reviews-controls {
  display: none;
  gap: var(--space-2);
}

.reviews-nav {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.reviews-nav:hover:not([disabled]) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.reviews-nav[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.reviews-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
}

.reviews-dot {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.reviews-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition:
    width var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.reviews-dot[aria-current="true"]::before {
  width: 22px;
  background: var(--color-primary);
}

.reviews-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

.reviews-foot .btn { width: 100%; }

.reviews-publish {
  margin: var(--space-4) 0 0;
  text-align: center;
}

.reviews-publish a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-underline-offset: 3px;
}

.reviews-publish a:hover { color: var(--color-primary); }

@media (min-width: 768px) {
  .reviews-track {
    grid-auto-columns: calc((100% - var(--space-4)) / 2);
  }

  .review-card__quote p {
    -webkit-line-clamp: 5;
    line-clamp: 5;
    min-height: calc(var(--leading-normal) * 5em);
  }

  .reviews-foot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .reviews-foot .btn { width: auto; min-width: 12.5rem; }
}

@media (min-width: 1024px) {
  .reviews-track {
    grid-auto-columns: calc((100% - (var(--space-4) * 2)) / 3);
  }

  .reviews-controls { display: flex; }

  .review-card { padding: var(--space-5) var(--space-5) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { scroll-behavior: auto; }

  .review-card:hover { transform: none; }
}

.visit-map {
  min-height: 260px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.visit-map iframe { width: 100%; height: 100%; min-height: 260px; border: 0; }

.map-consent {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  height: 100%;
  min-height: 260px;
  padding: var(--space-5);
  text-align: center;
}

.map-consent-pin { font-size: var(--text-2xl); }
.map-consent-title { margin: 0; font-weight: var(--weight-semibold); }

.map-consent-text {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ============================================================
   9. Pied de page
   ============================================================ */

.footer {
  margin-top: var(--space-10);
  padding: var(--space-8) var(--page-gutter);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer p { margin: 0 0 var(--space-4); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* WCAG 2.2 — 2.5.8 : ces liens ne sont pas « en ligne dans une
   phrase », l'exception ne s'applique donc pas. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-warm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.footer-links a:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.footer-links a[aria-current="page"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   10. Panier flottant et tiroir
   ============================================================ */

.mini-cart {
  position: fixed;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: var(--space-4);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 520px;
  margin: 0 auto;
  min-height: 56px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}

.mini-cart:hover { background: var(--color-primary-hover); }
.mini-cart span { display: grid; min-width: 0; }
.mini-cart strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.mini-cart small {
  font-size: var(--text-xs);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-cart b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-overlay);
}

.drawer {
  position: fixed;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  /* Feuille du bas sur mobile : le pouce atteint le bord inférieur,
     pas le haut d'un panneau latéral. */
  /* --keyboard-inset : hauteur masquée par le clavier virtuel, mesurée au
     runtime depuis visualViewport (setupViewportInsets). Sans elle, le pied
     du tiroir — donc le bouton de commande — passe derrière le clavier dès
     qu'un champ du checkout prend le focus.
     dvh et non vh : vh ignore la barre d'URL rétractable sur mobile. */
  inset: auto 0 var(--keyboard-inset, 0px) 0;
  max-height: calc(92dvh - var(--keyboard-inset, 0px));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  box-shadow: var(--shadow-lg);
}

.drawer.open { transform: none; }
.drawer[aria-hidden="true"] { visibility: hidden; }
.drawer.open[aria-hidden="false"] { visibility: visible; }

@media (min-width: 768px) {
  .drawer {
    inset: 0 0 var(--keyboard-inset, 0px) auto;
    width: min(440px, 100%);
    max-height: none;
    border-radius: 0;
    transform: translateX(100%);
  }
}

.drawer-step { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.drawer-step[hidden] { display: none; }

.drawer-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.drawer-head h2 {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.drawer-head .icon-btn:last-child { margin-left: auto; }

.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

/* Action rare et destructive : elle était présentée en bouton bordé, juste
   au-dessus du CTA principal, avec lequel elle rivalisait. Elle garde sa
   zone tactile de 44 px mais prend l'apparence d'un lien discret. */
.drawer-clear-row {
  padding: 0 var(--space-4);
  text-align: right;
}

.drawer-clear-row[hidden] { display: none; }

.btn-clear-cart {
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border-color: transparent;
  background: none;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-clear-cart:hover:not([disabled]) {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.drawer-foot {
  padding: var(--space-4);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* Cet encart bordé pesait 82 px dans un pied de 221 px, et ne laissait que
   453 px au formulaire pour 793 px de contenu. La mention reste obligatoire
   avant validation : elle passe sous le CTA, en une ligne, où elle se lit en
   même temps que le bouton plutôt qu'au-dessus des totaux. */
.pay-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-success);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-align: center;
}

.pay-notice strong { font-weight: var(--weight-bold); }

/* Montant porté par le CTA lui-même : « Reserver ma commande · 35 € ». */
.btn-amount { font-variant-numeric: tabular-nums; }

/* Résumé replié dans l'étape coordonnées, à la place de l'ancienne
   troisième étape. */
.checkout-summary { margin-bottom: var(--space-4); }

.checkout-summary .recap-section {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.checkout-summary summary {
  padding: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style-position: inside;
}

.checkout-summary .recap-line { padding: var(--space-2) var(--space-3); }
.checkout-summary .recap-line:last-child { border-bottom: 0; }
.checkout-summary .recap-note { padding: 0 var(--space-3) var(--space-3); }

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

.cart-total-row strong {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ---------- Lignes du panier ---------- */

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-line:last-child { border-bottom: 0; }

.line-info { min-width: 0; grid-column: 1; grid-row: 1; }
.line-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }

/* Porte désormais le prix unitaire : « 3× Kabana — 30 € » ne disait pas
   si la pizza valait 10 € ou si le total était faux. */
.line-size { font-size: var(--text-xs); color: var(--color-text-muted); }

.cart-line .qty { grid-column: 1; grid-row: 2; justify-self: start; }

.line-price {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

/* Retirer un article demandait de décrémenter jusqu'à zéro. */
.line-remove {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.line-remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }

.qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.qty button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
}

.qty button:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.qty span { min-width: 20px; text-align: center; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* ---------- Formulaire de commande ---------- */

.mode-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.mode-group legend {
  flex: 1 0 100%;
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.mode-pill {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.mode-pill input { position: absolute; opacity: 0; pointer-events: none; }

.mode-pill:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.mode-pill:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Code de réduction ---------- */

.promo-field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }

.promo-field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.promo-field__row { display: flex; gap: var(--space-2); }
.promo-field__row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.promo-field__row .btn { flex: 0 0 auto; }
.promo-field input[readonly] { background: var(--color-success-soft); border-color: var(--color-success); }

.promo-feedback { margin: 0; }
.promo-feedback[hidden] { display: none; }

/* Ligne de remise, entre le sous-total et le total à régler. */
.discount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-success);
}

.discount-row[hidden] { display: none; }
.discount-row strong { font-variant-numeric: tabular-nums; }

.delivery-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------- Récapitulatif ---------- */

.recap-section { margin-bottom: var(--space-5); }

.recap-section h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.recap-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.recap-line:last-child { border-bottom: 0; }

.recap-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.confirm-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  cursor: pointer;
}

/* ---------- Confirmation de commande ---------- */

.order-success {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
  background: var(--color-overlay);
}

.order-success-card {
  width: min(420px, 100%);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.order-success-card h2 { margin: var(--space-3) 0; font-family: var(--font-display); font-size: var(--text-2xl); }
.order-success-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.order-success-card .btn { margin-top: var(--space-3); }

.done-check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

/* ---------- Retour d'ajout au panier ---------- */

.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-text-invert);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.cart-toast.show { opacity: 1; transform: translate(-50%, 0); }

.toast-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-success);
  font-size: var(--text-xs);
}

/* ============================================================
   11. Pages compte et authentification
   ============================================================ */

.auth-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--page-gutter);
}

.auth-card {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.auth-card[hidden] { display: none; }
.auth-head { margin-bottom: var(--space-5); }

.auth-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
}

.auth-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-5);
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.auth-tab {
  flex: 1;
  min-height: var(--control-height-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
}

.auth-tab[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}

.auth-form { display: grid; gap: var(--space-4); }
.auth-form[hidden] { display: none; }
.auth-alt { margin: 0; text-align: center; font-size: var(--text-sm); }
.profile-saved { margin: 0; font-size: var(--text-sm); color: var(--color-success); font-weight: var(--weight-semibold); }

.account-created-message {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--text-sm);
}

.account-dashboard { width: min(920px, 100%); }

.account-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.account-hero .auth-head { margin: 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.account-layout { display: grid; gap: var(--space-5); }

@media (min-width: 900px) {
  .account-layout { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
}

.account-panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.panel-title-row { margin-bottom: var(--space-4); }
.orders-title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); }
.orders-list { display: grid; gap: var(--space-3); }

/* ---------- Carte de commande client ---------- */

.client-order {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.co-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.co-ref {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.co-items-list { margin: 0; padding: 0; list-style: none; }

.co-item-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
}

.co-item-qty { font-weight: var(--weight-semibold); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.co-item-price { font-variant-numeric: tabular-nums; }

.co-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.co-total { font-size: var(--text-lg); color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Ce que le statut implique pour le client : « Prête à retirer » sans
   « vous pouvez venir la chercher » ne dit pas quoi faire. */
.co-hint {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.co-actions { margin-top: var(--space-3); }
.co-reorder { width: 100%; }
.co-feedback { margin: var(--space-3) 0 0; }
.co-feedback[hidden] { display: none; }

/* ============================================================
   12. Pages légales et 404
   ============================================================
   Trois documents longs (mentions, CGV, confidentialité) : le
   visiteur doit pouvoir les scanner, sauter à une section, et
   passer d'un document à l'autre. Le 404 réutilise .legal-doc
   dans un conteneur plus étroit.
   ============================================================ */

.legal-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--page-gutter) var(--space-12);
}

.legal-hero {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.legal-hero h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.legal-hero .legal-lead {
  max-width: 58ch;
  margin: var(--space-4) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.legal-updated {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* Famille des trois documents : on sait où on est, on saute aux
   deux autres sans redescendre au pied de page. */
.legal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}

.legal-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.legal-tabs a:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.legal-tabs a[aria-current="page"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: var(--weight-semibold);
}

.legal-layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .legal-layout {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-10);
  }
}

.legal-toc {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

@media (min-width: 900px) {
  .legal-toc {
    position: sticky;
    top: var(--space-4);
  }
}

.legal-toc h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  counter-reset: legal-toc;
}

.legal-toc li { counter-increment: legal-toc; }

.legal-toc a {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-decoration: none;
}

.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero);
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.legal-toc a:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.legal-doc {
  max-width: var(--prose-max);
  margin: 0 auto;
}

.legal-layout .legal-doc {
  max-width: none;
  margin: 0;
}

.legal-doc h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
}

.legal-doc h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  scroll-margin-top: var(--space-5);
}

.legal-doc h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.legal-doc p,
.legal-doc li {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.legal-doc li { color: var(--color-text-muted); }
.legal-doc li strong { color: var(--color-text); }

.legal-doc ul,
.legal-doc ol { margin: 0 0 var(--space-4); }

.legal-doc a { text-underline-offset: 2px; }

.legal-doc code {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-size: 0.9em;
}

.legal-doc > section {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}

.legal-doc > section:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Fiche d'identité : dt en petite capitale, dd en lecture courante.
   Deux colonnes dès qu'il y a la place, pile sinon. */
.legal-doc dl {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-warm);
}

.legal-doc dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding-top: 2px;
}

.legal-doc dd {
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .legal-doc dl {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .legal-doc dd { margin-bottom: var(--space-3); }
  .legal-doc dd:last-child { margin-bottom: 0; }
}

.legal-doc > section.legal-contact {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.legal-contact h2 { margin-bottom: var(--space-4); }

.legal-contact p { margin-top: var(--space-4); color: var(--color-text-muted); }

.legal-contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.legal-contact__list li {
  display: grid;
  gap: 2px;
  color: var(--color-text);
}

.legal-contact__list span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.legal-back {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ---------- Page 404 ---------- */

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.error-links {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WCAG 2.2 — 2.5.8 : ce sont des cibles de navigation, pas des liens
   en ligne dans une phrase. L'exception ne s'applique pas. */
.error-links a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.error-links a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Champ que l'exploitant doit compléter : surligné pour qu'un oubli
   se voie en relecture plutôt qu'en production. */
.legal-placeholder {
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   13. Reveals
   ============================================================
   Le seul mouvement conservé : une apparition sobre à l'arrivée
   dans le viewport. Neutralisée par les tokens sous
   prefers-reduced-motion.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   14. Décalage sous l'en-tête fixe
   ============================================================
   Seule l'accueil porte un en-tête fixe (.site-header). Les pages
   secondaires affichent une .topbar dans le flux : leur appliquer
   ce décalage ouvrirait 56 px de vide en haut de page.
   --header-offset est mesuré au runtime par setupSiteHeader().
   ============================================================ */

body:has(.site-header) {
  padding-top: var(--header-offset, 56px);
}

/* Cible d'ancre : il faut dégager l'en-tête fixe ET la barre de
   catégories collante, sinon le titre de section atterrit dessous. */
.menu-section,
.infos,
.reviews,
.visit-panel {
  scroll-margin-top: calc(var(--header-offset, 56px) + 64px);
}

/* Le mini-panier flottant ne doit pas masquer la dernière carte. */
body:has(.mini-cart:not([hidden])) .footer {
  padding-bottom: calc(var(--space-8) + 72px);
}