/* ==================================================================
   Les Pieds Sous la Table — feuille de style unique
   Palette et typographie reprises du flyer :
   brun chaud sur papier beige, titres condensés en capitales,
   panneaux blancs très arrondis, prix en pastilles rondes.
   Pas de cuisson au feu de bois : aucune mention, aucun visuel de four.
   Mobile d'abord. Gros boutons, fort contraste.
   ================================================================== */

:root{
  /* Couleurs du flyer.
     Gamme volontairement claire : le brun trop sombre écrasait le papier. */
  --bordeaux:#8C4634;        /* titres, bandeaux, barre panier */
  --bordeaux-clair:#A85E45;  /* survols et bordures secondaires */
  --brique:#9A4630;          /* touches de commande — terre cuite adoucie, aplat plein */
  --brique-fonce:#813A28;    /* survol et appui des touches */
  --bordeaux-fonce:#6F3527;  /* survol et pied de page */
  --papier:#F4EEE5;          /* fond de page */
  --papier-2:#E8DECF;        /* bandes et aplats */
  --panneau:#FEFCF9;         /* cartes et panneaux */
  --encre:#33261F;
  --encre-doux:#6B564A;
  --dore:#E0A33E;            /* accent sur fond clair (pizza du logo) */
  --dore-clair:#FBD79A;      /* texte doré sur fond brun */
  --vert:#1F5A2E;            /* seulement fonctionnel : ouvert, validé, confirmé */
  --rouge-err:#A8241A;

  --r:12px;
  --r-carte:22px;
  --r-panneau:28px;
  --ombre:0 2px 0 rgba(51,38,31,.16);
  --ombre-carte:0 10px 26px rgba(110,49,40,.10);

  /* Titres : condensé gras en capitales, comme sur le flyer.
     Pour coller au flyer au pixel, voir le README (police Anton / Poppins). */
  --titre:"Impact","Haettenschweiler","Arial Narrow Bold","Arial Narrow",sans-serif;
  --texte:"Poppins","Century Gothic","Futura","Segoe UI",system-ui,sans-serif;

  /* Hauteurs des barres collantes : recalculées en JS (voir majHauteurs).
     Valeur de repli volontairement plus basse que la hauteur réelle : au pire
     la barre des catégories se glisse sous l'en-tête, jamais de filet visible. */
  --h-entete:56px;
  --h-onglets:68px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:1.125rem;   /* 18 px — en rem pour suivre le réglage de taille du téléphone */
  line-height:1.6;
}

h1,h2,.cat-titre,.bandeau-txt,.tunnel-tete h2{
  font-family:var(--titre);
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:400;      /* ces polices sont déjà très grasses */
  line-height:1.04;
}
h1{ font-size:2.6rem; margin:.1em 0 .35em }
h2{ font-size:1.9rem; margin:1.3em 0 .5em }

a{ color:var(--bordeaux) }
img{ max-width:100%; display:block }

.wrap{ width:100%; max-width:1100px; margin:0 auto; padding:0 16px }
.petit{ font-size:.9rem; color:var(--encre-doux); line-height:1.5 }
.gros{ font-size:1.15rem }
.titre-centre{ text-align:center; margin-bottom:.4em }

.skip{ position:absolute; left:-9999px }
.skip:focus{ left:8px; top:8px; z-index:99; background:#fff; padding:10px 14px; border-radius:8px }

:focus-visible{ outline:3px solid var(--dore); outline-offset:2px }

/* Bandeau « appareil hors ligne » : au-dessus de tout, y compris le tunnel */
#horsLigne{
  position:fixed; top:0; left:0; right:0; z-index:10000;
  background:var(--encre); color:var(--dore-clair);
  padding:10px 16px; text-align:center; font-size:.9rem; font-weight:700;
}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:54px; padding:12px 24px;
  border:none; border-radius:999px;
  font-family:var(--texte); font-size:1.02rem; font-weight:700;
  text-decoration:none; cursor:pointer;
  box-shadow:var(--ombre);
}
.btn:active{ transform:translateY(2px); box-shadow:none }
.btn-primaire{ background:var(--bordeaux); color:#fff }
.btn-primaire:hover{ background:var(--bordeaux-fonce) }
.btn-sombre{ background:var(--encre); color:#fff }
.btn-clair{ background:transparent; color:var(--bordeaux); border:2px solid var(--bordeaux) }
.btn-bloc{ width:100%; font-size:1.1rem; min-height:60px }
.btn[disabled]{ opacity:.4; cursor:not-allowed; box-shadow:none }

/* ---------------- En-tête ---------------- */
.entete{
  position:sticky; top:0; z-index:40;
  background:var(--panneau);
  box-shadow:0 2px 14px rgba(110,49,40,.13);
}
.entete-in{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; padding-bottom:10px }
.marque{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--encre); min-width:0 }
.logo-ph{
  width:54px; height:54px; flex:none; display:grid; place-items:center;
  border-radius:50%;
  background:var(--bordeaux); color:var(--dore-clair);
}
.logo-ph svg{ width:28px; height:28px }
/* Le vrai logo (05/09/2026), rond comme l'ancien pictogramme qu'il remplace. */
.logo-img{
  width:54px; height:54px; flex:none; border-radius:50%; object-fit:cover;
  box-shadow:0 1px 6px rgba(110,49,40,.18);
}
.marque-txt{ display:flex; flex-direction:column; line-height:1.15; min-width:0 }
.marque-txt strong{
  font-family:var(--texte); font-size:1.05rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; color:var(--bordeaux);
}
.marque-txt em{ font-size:.7rem; color:var(--encre-doux); font-style:normal; text-transform:uppercase; letter-spacing:.08em }
.entete-act{ display:flex; gap:9px; align-items:center }
/* Bouton d'appel : rond et au trait, pour ne pas concurrencer « Commander » */
.btn-tel{
  width:54px; height:54px; min-height:0; padding:0; flex:none;
  border-radius:50%; box-shadow:none;
  background:transparent; color:var(--bordeaux);
  border:2px solid var(--bordeaux);
}
.btn-tel:hover{ background:var(--bordeaux); color:#fff }
.btn-tel svg{ width:23px; height:23px }
/* Sur mobile, l'icône seule suffit : le lien compose le numéro. Sur ordinateur,
   où « tel: » ne fait rien de visible, on affiche le numéro en clair. */
.tel-lbl,.tel-num{ display:none }

@media (max-width:430px){
  .logo-ph,.logo-img{ width:46px; height:46px }
  .btn-tel{ width:48px; height:48px }
  .btn-tel svg{ width:21px; height:21px }
  .marque-txt strong{ font-size:.95rem }
  .marque-txt em{ display:none }
  .entete-act .btn-primaire{ padding:12px 16px; font-size:.98rem; min-height:48px }
}

/* ---------------- Accueil ---------------- */
.hero{ position:relative; overflow:hidden; padding-bottom:6px }
/* volutes crème du flyer */
.hero::before,.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  background:var(--panneau); opacity:.75;
}
.hero::before{
  width:420px; height:420px; left:-190px; top:-140px;
  border-radius:52% 48% 60% 40% / 45% 55% 45% 55%;
}
.hero::after{
  width:340px; height:340px; right:-170px; bottom:-160px;
  border-radius:45% 55% 40% 60% / 55% 42% 58% 45%;
}
/* Photo d'ambiance en fond (aucune pour le moment) */
.hero > .hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.35; z-index:0;
}
.hero-in{ position:relative; z-index:1; padding-top:26px; padding-bottom:30px; text-align:center }

.hero-sceaux{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 1em }
.sceau{
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--bordeaux); background:transparent;
  border:2px solid var(--bordeaux); border-radius:999px; padding:5px 16px;
}
/* Halal : pas de vert (étranger à la palette) mais le seul sceau plein,
   donc le plus visible des trois. */
.sceau-halal{
  background:var(--bordeaux); border-color:var(--bordeaux); color:var(--dore-clair);
  letter-spacing:.14em; padding:5px 20px;
}

.hero h1{ color:var(--bordeaux) }
.hero-sub{ max-width:620px; margin:0 auto 1.3em; font-size:1.02rem; color:var(--encre-doux) }

/* Le choix « à emporter / livraison » et les prix ne sont pas répétés ici :
   la bascule au-dessus de la carte et la 1re étape de la commande s'en chargent. */
.hero-cta{ margin:0 }
.btn-hero{ min-height:64px; padding:14px 46px; font-size:1.2rem }

.hero-statut{ margin-top:18px; font-weight:700 }
.hero-statut .ouvert{ color:var(--vert) }
.hero-statut .ferme{ color:var(--rouge-err) }

/* ---------------- Bandes info ----------------
   Quatre cartes, jamais d'orpheline en bout de rangée : 1 colonne sur mobile,
   2 sur tablette, 4 sur grand écran. */
.bandes{ display:grid; gap:10px; padding-top:8px; padding-bottom:10px }
.bande{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--panneau); border-radius:var(--r-carte);
  padding:16px; box-shadow:var(--ombre-carte);
}
.bande-ico{ flex:none; color:var(--bordeaux-clair); line-height:1; margin-top:2px }
.bande-ico svg{ width:28px; height:28px }
.bande strong{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--bordeaux); margin-bottom:1px;
}
.bande div span{ font-size:.93rem; color:var(--encre-doux); line-height:1.4 }

/* Bandeau de l'offre : pleine largeur, il fait aussi séparation avec la carte */
.promo-bande{
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:var(--bordeaux); color:var(--papier);
  border-radius:var(--r-panneau); padding:16px 22px; margin:6px 0 2px;
  text-align:center;
}
.promo-bande .bande-ico{ color:var(--dore-clair); margin-top:0 }
.promo-bande p{ margin:0; font-size:.98rem }
.promo-bande strong{
  color:var(--dore-clair); text-transform:uppercase;
  letter-spacing:.12em; font-size:.76rem; margin-right:6px;
  white-space:nowrap;
}

/* ---------------- Carte ---------------- */
.carte{ padding:22px 0 100px }
.carte .titre-centre{ color:var(--bordeaux); font-size:2.2rem }

/* Bascule à emporter / livraison. Sans libellé : les deux boutons se
   comprennent d'eux-mêmes. */
.bascule-mode{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:480px; padding-top:2px; padding-bottom:14px;
}
.bascule-btn{
  flex:1 1 140px; min-height:50px; cursor:pointer;
  background:transparent; color:var(--bordeaux);
  border:2px solid var(--bordeaux); border-radius:999px;
  font-family:var(--texte); font-size:1rem; font-weight:700;
}
.bascule-btn[aria-pressed="true"]{ background:var(--bordeaux); color:#fff }

.onglets{
  position:sticky; top:var(--h-entete); z-index:30;
  display:flex; gap:8px; overflow-x:auto; padding:12px 16px;
  background:var(--papier); box-shadow:0 6px 12px -8px rgba(110,49,40,.35);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.onglets::-webkit-scrollbar{ display:none }
.onglet{
  flex:none; min-height:46px; padding:9px 20px; cursor:pointer;
  background:var(--panneau); color:var(--bordeaux); border:none;
  border-radius:999px; font-family:var(--texte);
  font-size:.95rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  box-shadow:var(--ombre-carte);
}
.onglet[aria-current="true"]{ background:var(--bordeaux); color:#fff }

.cat{ padding-top:8px }
.cat-titre{
  font-size:2rem; color:var(--bordeaux);
  margin:30px 0 6px; text-align:center;
}
.cat-titre::after{
  content:""; display:block; width:64px; height:4px; margin:10px auto 0;
  background:var(--dore); border-radius:999px;
}
.cat-note{ margin:0 auto 18px; color:var(--encre-doux); font-size:.94rem; text-align:center; max-width:640px }

/* Disposition centrée : une catégorie qui a moins de cartes que de colonnes
   (Wings, Glaces) ne les laisse plus collées à gauche. Les cartes d'une même
   rangée gardent la même hauteur (étirement par défaut des lignes flex). */
.produits{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px }
.produit-bloc{ flex:1 1 300px; max-width:360px; display:flex; flex-direction:column }
.produit-bloc.ouvert{ flex-basis:100%; max-width:100% }
/* Sans photo : le texte, puis les touches de commande dessous.
   Pour remettre une vignette, repasser en grille :
   display:grid; grid-template-columns:78px 1fr;
   grid-template-areas:"photo texte" "act act"; */
.produit{
  /* flex:1 0 auto — la carte occupe toute la hauteur de sa rangée, quel que
     soit le nombre de lignes d'ingrédients : toutes les cases d'une même
     rangée ont ainsi la même taille. */
  flex:1 0 auto;
  display:flex; flex-direction:column; gap:12px;
  background:var(--panneau); border-radius:var(--r-panneau); padding:16px;
  box-shadow:var(--ombre-carte);
}
.p-photo{ width:100%; height:150px; object-fit:cover; border-radius:16px }
/* Le bloc texte occupe toute la place au-dessus des touches et centre son
   contenu : le vide se répartit au-dessus et au-dessous du texte au lieu de
   creuser un trou juste avant les boutons. */
.p-txt{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
/* Hauteur de texte réservée par catégorie, pour que toutes les cartes d'une
   même catégorie soient identiques : pizzas = nom + 2 lignes d'ingrédients +
   étiquette « Hors formule » ; formules, wings et paninis = nom + 2 lignes.
   Desserts, glaces et boissons n'ont pas d'ingrédients : rien à réserver. */
.produits[data-cat="pizzas"] .p-txt,
.produits[data-cat="menus"] .p-txt{ min-height:6.6rem }
.produits[data-cat="wings"] .p-txt,
.produits[data-cat="paninis"] .p-txt{ min-height:4.5rem }
.p-nom{
  margin:0; font-size:1.02rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; color:var(--encre);
}
.p-ing{ margin:3px 0 0; font-size:.92rem; color:var(--encre-doux); line-height:1.45 }
/* Pastilles à la largeur de leur texte, alignées sur une seule ligne : dans une
   colonne flex elles s'étireraient sinon sur toute la largeur de la carte. */
.p-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:10px }
.tag{
  padding:3px 12px;
  background:var(--papier-2); color:var(--bordeaux);
  border-radius:999px; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
/* Étiquette des formules : dorée, pour distinguer « Menu Familiale »
   d'une pizza en taille Familiale au premier coup d'œil */
.tag-formule{ background:var(--dore-clair); color:var(--bordeaux-fonce) }

/* Produit mis en vedette : mêmes couleurs que les autres cartes, mais pleine
   largeur, avec un filet brun et une étiquette. Rien de plus voyant que ça. */
.bloc-vedette{ flex-basis:100%; max-width:100% }
.produit-vedette{ border:2px solid var(--bordeaux) }
.produit-vedette .p-txt{ min-height:0 }
.produit-vedette .p-nom{ font-size:1.15rem }
.produit-vedette .p-act{ justify-content:center }
.produit-vedette .btn-ajout{ flex:0 1 200px }

/* Produit réservé à l'autre mode : présent mais grisé, avec le bouton
   qui bascule le mode. Fond sourd plutôt qu'opacité, pour rester lisible. */
.produit-indispo{ background:var(--papier-2); box-shadow:none }
.produit-indispo .p-nom{ color:var(--encre-doux) }
.tag-indispo{ background:var(--bordeaux); color:var(--dore-clair) }
/* sélecteur composé : sinon la règle .btn-ajout, définie plus bas, l'emporte
   et le libellé repasse en blanc sur fond clair */
.btn-ajout.btn-basculer{ background:transparent; color:var(--bordeaux); border-color:var(--bordeaux) }
.btn-ajout.btn-basculer .p{ font-size:1rem }

/* Les touches restent en bas de carte (la marge auto du bloc texte les y
   pousse), donc elles s'alignent d'une carte à l'autre sur toute la rangée. */
.p-act{ display:flex; gap:9px; flex-wrap:wrap }
/* Terre cuite en aplat plein. Le #A85E45 d'origine, peu saturé et d'une clarté
   moyenne, tirait vers le brun boueux ; la version vive qui a suivi criait un
   peu. Celle-ci est plus dense et plus sourde, sans dégradé : la touche paraît
   pleine plutôt que lustrée. */
.btn-ajout{
  position:relative; flex:1 1 132px; min-height:58px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; padding:7px 12px; border:2px solid var(--brique); border-radius:999px;
  background:var(--brique); color:#fff; font-family:var(--texte);
}
.btn-ajout:hover{ background:var(--brique-fonce); border-color:var(--brique-fonce) }
.btn-ajout:active{ transform:translateY(2px) }
.btn-ajout .v{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em }
.btn-ajout .p{ font-size:1.1rem; font-weight:700 }
.btn-ajout.btn-compo{ background:transparent; color:var(--bordeaux) }

/* Deux formats côte à côte : le plus grand garde la touche pleine, le petit
   passe en contour. Même vocabulaire qu'avant — seul l'appui change de côté.
   Déclaré après .btn-compo pour l'emporter : « + boisson » est un bouton à
   composition, et c'est pourtant lui qu'on met en avant. */
.btn-ajout.btn-phare{ background:var(--brique); color:#fff; border-color:var(--brique) }
.btn-ajout.btn-phare:hover{ background:var(--brique-fonce); border-color:var(--brique-fonce) }
.btn-ajout.btn-second:hover{ background:var(--papier-2) }
.btn-ajout.btn-second{ background:transparent; color:var(--bordeaux) }
.pastille-qte{
  position:absolute; top:-9px; right:-4px;
  min-width:28px; height:28px; padding:0 7px;
  display:grid; place-items:center;
  background:var(--dore); color:var(--encre);
  border-radius:999px; font-size:.9rem; font-weight:700;
}
.pastille-qte:empty{ display:none }

/* Panneau de composition (formules, panini + boisson, pizza sur mesure).
   Il prolonge la carte du produit : mêmes arrondis, mêmes couleurs, champs en
   pilules sur deux colonnes plutôt qu'un formulaire empilé. */
/* Même largeur que la carte, et angles complémentaires : la carte perd ses
   arrondis du bas pendant que le panneau est ouvert, le panneau porte ceux du
   bas. Les deux ne forment qu'un seul contour. */
.compo{
  background:var(--papier-2);
  border-radius:0 0 var(--r-panneau) var(--r-panneau);
  padding:20px; margin:0;
}
.produit-bloc.ouvert .produit{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  box-shadow:none;
}
.produit-bloc.ouvert .compo{ box-shadow:var(--ombre-carte) }
.compo-tete{
  margin:0 0 16px; text-align:center;
  font-weight:700; font-size:.82rem; color:var(--bordeaux);
  text-transform:uppercase; letter-spacing:.12em;
}
.compo-champs{ display:grid; gap:14px }
.champ-large{ grid-column:1 / -1 }
.compo-fixe{
  margin:0; padding:12px 16px; background:var(--panneau); border-radius:999px;
  color:var(--vert); font-weight:700; font-size:.95rem; text-align:center;
}
/* Ne cible que .compo-lbl : le sélecteur incluait « label », qui attrapait
   aussi les cases à cocher des ingrédients et les déformait. */
.compo-lbl{
  display:block; font-weight:700; font-size:.74rem; margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--encre-doux);
}

/* Sélecteur maison : le choix courant en pilule, la liste dépliée en dessous
   avec le nom ET les ingrédients de chaque pizza. */
.choix-btn{
  width:100%; min-height:58px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--panneau); border:2px solid transparent; border-radius:999px;
  padding:10px 18px; font-family:var(--texte); text-align:left; color:var(--encre);
}
.choix-btn[aria-expanded="true"]{ border-color:var(--bordeaux) }
.choix-txt{ display:flex; flex-direction:column; min-width:0 }
.choix-txt strong{ font-size:1rem }
.choix-txt span{
  font-size:.82rem; color:var(--encre-doux);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.choix-fleche{ flex:none; color:var(--bordeaux); display:grid; place-items:center }
.choix-fleche svg{ width:18px; height:18px }
.choix-btn[aria-expanded="true"] .choix-fleche{ transform:rotate(180deg) }

.choix-liste{
  margin-top:8px; max-height:340px; overflow-y:auto;
  background:var(--panneau); border-radius:var(--r-carte); padding:6px;
  display:grid; gap:3px;
}
.choix-option{
  width:100%; cursor:pointer; border:none; background:transparent;
  border-radius:16px; padding:11px 15px; font-family:var(--texte); text-align:left;
}
.choix-option strong{ display:block; font-size:.98rem; color:var(--encre) }
.choix-option span{ display:block; font-size:.85rem; color:var(--encre-doux); line-height:1.35 }
.choix-option:hover{ background:var(--papier-2) }
.choix-option[aria-pressed="true"]{ background:var(--bordeaux) }
.choix-option[aria-pressed="true"] strong,
.choix-option[aria-pressed="true"] span{ color:#fff }

.compo-actions{ display:flex; gap:10px; margin-top:18px }
.compo-actions .btn{ min-height:56px }
.compo-actions .btn-clair{ flex:0 0 auto; padding:12px 22px }
.compo-actions .btn-primaire{ flex:1; font-size:1.05rem }
/* colonnes assez larges pour « Pomme de terre » ou « Chicken tikka » sur une
   seule ligne : sinon les pilules n'ont plus la même hauteur d'une rangée à l'autre */
.ingredients{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:7px }
.ing-case{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--panneau); border:2px solid transparent; border-radius:999px;
  padding:9px 14px; font-size:.93rem;
}
.ing-case input{ width:21px; height:21px; flex:none; accent-color:var(--bordeaux) }
/* un nom trop long serait coupé plutôt que renvoyé à la ligne : toutes les
   pilules gardent ainsi la même hauteur */
.ing-case span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ing-case:has(input:checked){ border-color:var(--bordeaux); background:#fff }

/* ---------------- Barre panier ---------------- */
.barre-panier{
  position:fixed; left:0; right:0; z-index:45;
  /* `--h-suivi` vaut la hauteur du bandeau « commande en cours » quand il est
     affiché, 0 sinon : les deux barres se superposent au lieu de se cacher. */
  bottom:var(--h-suivi, 0px);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--panneau); box-shadow:0 -6px 22px rgba(110,49,40,.16);
}
.btn-panier{
  width:100%; min-height:62px; display:flex; align-items:center; gap:12px;
  padding:12px 20px; cursor:pointer; border:none; border-radius:999px;
  background:var(--bordeaux); color:#fff; font-family:var(--texte);
  font-size:1.05rem; font-weight:700;
}
.btn-panier strong{ margin-left:auto; font-size:1.2rem }
.pastille{
  display:grid; place-items:center; min-width:34px; height:34px; padding:0 9px;
  background:var(--dore); color:var(--encre); border-radius:999px; font-size:1rem;
}

/* ---------------- Bandeau « commande en cours » ---------------- */
/* Le client a fermé l'onglet par mégarde, ou revient sur le site pour autre
   chose : son suivi doit lui revenir sans qu'il ait à le chercher. En bas de
   l'écran, là où le pouce se trouve déjà, et sur toutes les pages. */
#suiviEnCours{
  position:fixed; left:0; right:0; bottom:0; z-index:46;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--bordeaux); color:#fff; text-decoration:none;
  box-shadow:0 -6px 22px rgba(110,49,40,.22);
}
#suiviEnCours .pt{ font-size:1.6rem; line-height:1 }
#suiviEnCours b{ display:block; font-size:1.02rem; line-height:1.25 }
#suiviEnCours .ref{ font-size:.82rem; opacity:.85 }
#suiviEnCours .fleche{ margin-left:auto; font-weight:700; white-space:nowrap }

/* ---------------- Tunnel de commande ---------------- */
.voile{ position:fixed; inset:0; background:rgba(51,38,31,.55); z-index:50 }
.tunnel{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  background:var(--papier);
}
.tunnel-tete{
  display:flex; align-items:center; gap:8px;
  padding:12px; background:var(--bordeaux); color:#fff;
  padding-top:calc(12px + env(safe-area-inset-top));
}
.tunnel-tete h2{ margin:0; font-size:1.5rem; flex:1; text-align:center }
.btn-retour,.btn-fermer{
  width:46px; height:46px; flex:none; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; font-size:1.3rem;
}
.btn-retour[hidden]{ visibility:hidden; display:block !important }

.etapes{ display:flex; margin:0; padding:0; list-style:none; background:var(--panneau) }
.etapes li{
  flex:1; text-align:center; padding:11px 4px; font-size:.76rem; font-weight:700;
  color:var(--encre-doux); text-transform:uppercase; letter-spacing:.1em;
  border-bottom:4px solid transparent;
}
.etapes li[data-actif="true"]{ color:var(--bordeaux); border-bottom-color:var(--bordeaux) }
.etapes li[data-fait="true"]{ color:var(--vert) }

.tunnel-corps{ flex:1; overflow-y:auto; padding:18px 16px; -webkit-overflow-scrolling:touch }
.tunnel-pied{
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--panneau); box-shadow:0 -6px 18px rgba(110,49,40,.12);
}
.tunnel-pied .recap{ display:flex; justify-content:space-between; font-size:1.1rem; font-weight:700; margin-bottom:11px }

/* Lignes de panier */
.ligne{
  display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center;
  background:var(--panneau); border-radius:var(--r-carte); padding:14px; margin-bottom:11px;
  box-shadow:var(--ombre-carte);
}
.ligne-nom{ font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.98rem }
.ligne-detail{ font-size:.88rem; color:var(--encre-doux); margin:3px 0 }
.ligne-prix{ font-weight:700; color:var(--bordeaux); font-size:1.05rem }
.pas-a-pas{ display:flex; align-items:center; gap:10px }
.pas-a-pas button{
  width:48px; height:48px; border-radius:50%; border:2px solid var(--bordeaux);
  background:transparent; color:var(--bordeaux); font-size:1.4rem; cursor:pointer; line-height:1;
}
.pas-a-pas .q{ min-width:32px; text-align:center; font-size:1.15rem; font-weight:700 }
.vide{ text-align:center; padding:44px 10px; color:var(--encre-doux) }

/* Formulaires */
.champ{ margin-bottom:18px }
.champ > label{ display:block; font-weight:700; margin-bottom:8px }
.champ .aide{ font-weight:400; font-size:.88rem; color:var(--encre-doux); display:block }
input[type=text],input[type=tel],input[type=email],textarea,select{
  width:100%; min-height:56px; padding:13px 16px; font-size:1.05rem;
  font-family:var(--texte); color:var(--encre);
  background:var(--panneau); border:2px solid #D9C9B6; border-radius:var(--r);
}
textarea{ min-height:92px; resize:vertical }
input:focus,select:focus,textarea:focus{ border-color:var(--bordeaux) }
.err-champ{ border-color:var(--rouge-err) !important; background:#FDF2F1 }
.msg-err{ color:var(--rouge-err); font-weight:700; margin:8px 0 0 }

/* Choix en gros blocs (mode, créneau, paiement) */
.options{ display:grid; gap:10px; margin-bottom:8px }
.option{
  display:flex; align-items:flex-start; gap:13px; cursor:pointer;
  background:var(--panneau); border:2px solid transparent; border-radius:var(--r-carte); padding:15px;
  box-shadow:var(--ombre-carte);
}
/* Bouton radio invisible mais toujours atteignable au clavier : à 0×0 pixel,
   plusieurs navigateurs le retirent de l'ordre de tabulation. */
.option input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none }
/* Le focus clavier se voit sur la pastille, faute d'être visible sur l'input */
.option input:focus-visible + .coche{ outline:3px solid var(--dore); outline-offset:3px }
.option .coche{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:2px solid #C9B49E; background:#fff; margin-top:2px;
}
.option .txt{ font-weight:400 }
.option .txt strong{ display:block; font-size:1.05rem; font-weight:700 }
.option .txt span{ font-size:.92rem; color:var(--encre-doux) }
/* Choix affiché mais indisponible (commande immédiate quand c'est fermé) */
.option-inactive{ background:var(--papier-2); box-shadow:none; cursor:default }
.option-inactive .txt strong{ color:var(--encre-doux) }
.option-inactive .coche{ border-style:dashed; background:transparent }

.option[data-sel="true"]{ border-color:var(--bordeaux) }
.option[data-sel="true"] .coche{ border-color:var(--bordeaux); background:radial-gradient(circle, var(--bordeaux) 46%, #fff 49%) }

/* Choix du jour, puis des heures du service : une file de sept jours de
   créneaux d'affilée était illisible. */
.jours{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none }
.jours::-webkit-scrollbar{ display:none }
.jour-chip{
  flex:none; min-height:48px; padding:10px 18px; cursor:pointer;
  background:var(--panneau); color:var(--bordeaux); border:2px solid transparent;
  border-radius:999px; font-family:var(--texte); font-size:.95rem; font-weight:700;
  box-shadow:var(--ombre-carte);
}
.jour-chip[aria-pressed="true"]{ background:var(--bordeaux); color:#fff }

.service{ margin-bottom:14px }
.service-nom{
  display:block; margin-bottom:8px;
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--encre-doux);
}
.creneaux{ display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px }
.creneau{
  min-height:52px; cursor:pointer; padding:8px 6px;
  background:var(--panneau); border:2px solid transparent; border-radius:999px;
  font-size:1.02rem; font-weight:700; color:var(--bordeaux); font-family:var(--texte);
  box-shadow:var(--ombre-carte);
}
.creneau[aria-pressed="true"]{ background:var(--bordeaux); color:#fff }
.jour-titre{
  font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--bordeaux); margin:18px 0 8px;
}

/* Suggestions du panier : une ligne discrète, trois pastilles */
.suggestions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 2px }
.sugg-titre{ font-size:.9rem; color:var(--encre-doux); font-weight:600 }
.sugg{
  min-height:44px; padding:8px 14px; border-radius:999px; cursor:pointer;
  background:var(--panneau); border:1.5px solid var(--papier-2);
  font-family:var(--texte); font-size:.9rem; font-weight:600; color:var(--encre);
}
.sugg:hover{ border-color:var(--bordeaux) }

/* « Tout retirer » : présent mais volontairement effacé */
.btn-vider{
  display:block; margin:14px auto 0; min-height:44px; padding:8px 16px;
  background:none; border:none; cursor:pointer;
  font-family:var(--texte); font-size:.88rem; color:var(--encre-doux);
  text-decoration:underline; text-underline-offset:3px;
}
.btn-vider:hover{ color:var(--rouge-err) }

/* Compteur de l'offre sur la barre du panier */
.barre-promo{
  margin:0 auto 8px; max-width:540px; text-align:center;
  font-size:.85rem; font-weight:700; color:var(--bordeaux);
}

/* Réassurance au paiement */
.reassure{
  text-align:center; font-size:.85rem; color:var(--encre-doux);
  text-transform:uppercase; letter-spacing:.07em; margin:18px 0 4px;
}

/* Billets annoncés pour un paiement en espèces */
/* La bulle du billet : accrochée SOUS l'option qu'on vient de cocher, et
   non reléguée en bas de page. Le client répond là où son doigt se trouve
   déjà ; une question posée trois écrans plus bas n'est jamais lue, et
   c'est la caisse qui découvre le billet de 50 € au moment de rendre la
   monnaie. Le bec pointe vers l'option pour dire à quoi elle se rapporte. */
.bulle{ position:relative; margin-top:2px; padding:14px 15px;
        background:var(--dore-clair); border-radius:var(--r-carte) }
.bulle::before{
  content:""; position:absolute; top:-9px; left:30px;
  border-left:10px solid transparent; border-right:10px solid transparent;
  border-bottom:10px solid var(--dore-clair);
}
.bulle > .champ{ margin:0 }
.bulle .aide{ color:var(--bordeaux-fonce) }

.billets{ display:flex; flex-wrap:wrap; gap:8px }
.billet{
  min-height:48px; padding:10px 18px; border-radius:999px; cursor:pointer;
  background:var(--panneau); border:2px solid var(--papier-2);
  font-family:var(--texte); font-size:.95rem; font-weight:700; color:var(--encre);
}
.billet[aria-pressed="true"]{ background:var(--bordeaux); border-color:var(--bordeaux); color:#fff }
/* Montant libre : « Je paye avec [   ] € » sur une ligne */
.billet-autre{ display:flex; align-items:center; gap:10px; margin-top:10px }
.billet-autre label{ margin:0; font-weight:600 }
.billet-autre input{ max-width:110px; text-align:right; font-variant-numeric:tabular-nums }
.billet-autre span{ font-weight:700 }
#billetNote{ margin:8px 0 0 }
#billetNote:empty{ display:none }

/* Messages zone de livraison */
/* Marge des deux côtés : ces encarts sont parfois suivis d'un autre bloc
   (les options de créneau), et se collaient à lui. */
.zone-msg{ margin:10px 0; padding:14px 16px; border-radius:var(--r-carte); font-weight:700 }
.zone-ok{ background:#EAF2EA; color:var(--vert) }
.zone-ko{ background:#FBECEA; color:var(--rouge-err) }
/* Information de charge : ni faute ni validation, une contrainte à connaître */
.zone-info{ background:var(--papier-2); color:var(--encre) }
.zone-info strong{ color:var(--bordeaux) }
.zone-ko .btn, .zone-info .btn{ margin-top:12px }

/* Encart paiement en ligne (module à intégrer) */
.encart{
  background:var(--panneau); border:2px dashed #C9B49E; border-radius:var(--r-carte);
  padding:18px; margin:14px 0; text-align:center; color:var(--encre-doux);
}
.recap-liste{ background:var(--panneau); border-radius:var(--r-carte); padding:16px 18px; box-shadow:var(--ombre-carte) }
.recap-liste div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0 }
.recap-liste .tot{
  border-top:2px solid var(--papier-2); margin-top:8px; padding-top:10px;
  font-weight:700; font-size:1.1rem; color:var(--bordeaux);
}

/* Offre promotionnelle */
.cadeau{
  background:var(--bordeaux); color:var(--papier);
  border-radius:var(--r-carte); padding:16px; margin:0 0 12px;
}
.cadeau strong{ font-size:1.05rem; color:var(--dore-clair) }
.cadeau .petit{ color:var(--papier-2) }
.cadeau label{ color:var(--dore-clair) }
.info-promo{
  background:var(--papier-2); border-radius:var(--r-carte); padding:12px 16px; margin:0 0 12px;
  font-weight:700; color:var(--bordeaux); font-size:.95rem;
}

/* Message éphémère */
.toast{
  position:fixed; left:12px; right:12px; bottom:92px; z-index:70;
  background:var(--encre); color:#fff; border-radius:var(--r-carte);
  padding:15px 18px; font-size:.98rem; font-weight:700;
  box-shadow:0 10px 28px rgba(51,38,31,.34);
}
@media (min-width:700px){
  .toast{ left:auto; right:22px; max-width:420px }
}

/* Confirmation */
.confirm{ text-align:center; padding:22px 6px }
.confirm .rond{
  width:96px; height:96px; margin:0 auto 16px; border-radius:50%;
  background:var(--vert); color:#fff; display:grid; place-items:center; font-size:3rem;
}
.confirm h3{ font-family:var(--titre); text-transform:uppercase; font-size:1.9rem; font-weight:400; margin:.2em 0 }
.numero{ font-weight:700; font-size:1.3rem; color:var(--bordeaux) }

/* ---------------- Contact ---------------- */
.contact{ background:var(--bordeaux); color:var(--papier); padding:10px 0 40px }
.contact h2{ color:var(--dore-clair); margin-top:1.1em; font-size:1.7rem }
.contact a{ color:var(--dore-clair) }
.contact .petit{ color:var(--papier-2) }

/* Action secondaire sur le panneau bordeaux (ouvrir le plan) : contour clair
   plutôt qu'aplat doré, qui criait plus fort que le bouton « Commander ».
   Le sélecteur reprend « a » pour passer devant .contact a ci-dessus,
   sinon le texte hérite du doré clair et devient illisible sur le fond. */
.contact a.btn-discret{
  background:rgba(244,238,229,.10);
  color:var(--papier);
  /* 2px comme .btn-clair : sur un écran Windows à 125 %, 1,5px retombait
     sur un seul pixel physique et le contour paraissait accidentel. */
  border:2px solid rgba(244,238,229,.6);
  box-shadow:none;
  font-weight:600;
}
.contact a.btn-discret:hover{ background:rgba(244,238,229,.2); border-color:var(--papier) }
.horaires{ width:100%; border-collapse:collapse; font-size:1rem }
.horaires td{ padding:9px 0; border-bottom:1px solid rgba(241,234,224,.18) }
.horaires td:first-child{ text-transform:uppercase; font-size:.85rem; letter-spacing:.06em }
.horaires td:last-child{ text-align:right }
.horaires tr[data-auj="true"]{ color:#fff; font-weight:700 }
.tel-gros{ font-size:1.6rem; font-weight:700; text-decoration:none }
.villes{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px }
.villes li{
  background:rgba(241,234,224,.13); border-radius:999px; padding:8px 16px; font-size:.9rem;
}

/* Allergènes : bloc dépliable au bas de la section contact (fond bordeaux) */
.allergenes{
  margin-top:26px; background:rgba(244,238,229,.08);
  border:1.5px solid rgba(244,238,229,.35); border-radius:var(--r-carte);
  padding:4px 18px;
}
.allergenes summary{
  cursor:pointer; list-style:none; padding:12px 0; font-weight:700;
  color:var(--dore-clair); display:flex; align-items:center; gap:10px;
}
.allergenes summary::-webkit-details-marker{ display:none }
.allergenes summary::after{ content:"▾"; margin-left:auto; transition:transform .2s }
.allergenes[open] summary::after{ transform:rotate(180deg) }
.allergenes .petit{ color:var(--papier-2) }
.allergenes-liste{
  list-style:none; padding:0; margin:8px 0 12px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px 22px;
}
.allergenes-liste li{ font-size:.92rem }
.allergenes-liste strong{ display:block; color:var(--papier) }
.allergenes-liste span{ color:var(--papier-2); font-size:.84rem; line-height:1.45 }
/* Tableau plat par plat : long, il défile seul plutôt que d'étirer la page */
.allergenes-tab{ max-height:340px; overflow:auto; margin:10px 0 12px;
  border:1px solid rgba(244,238,229,.22); border-radius:12px }
.allergenes-tab table{ width:100%; border-collapse:collapse; font-size:.88rem }
.allergenes-tab caption{
  text-align:left; padding:10px 12px 8px; font-size:.8rem; color:var(--papier-2);
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.allergenes-tab th, .allergenes-tab td{
  text-align:left; padding:7px 12px; border-top:1px solid rgba(244,238,229,.14);
  vertical-align:top;
}
.allergenes-tab th{ color:var(--papier); font-weight:700; white-space:nowrap }
.allergenes-tab td{ color:var(--papier-2) }

.pied{ background:var(--bordeaux-fonce); color:var(--papier-2); text-align:center; padding:24px 0 110px }
.pied strong{ color:var(--papier) }
.pied .petit{ color:#D6C2B2; margin:.5em 0 }

/* ---------------- Ecrans plus larges ---------------- */
@media (min-width:700px){
  body{ font-size:19px }
  h1{ font-size:4rem }
  /* place pour le numéro : le rond redevient une pilule */
  .btn-tel{ width:auto; height:auto; min-height:54px; padding:12px 22px; border-radius:999px }
  .tel-num{ display:inline; font-variant-numeric:tabular-nums }
  .bandes{ grid-template-columns:1fr 1fr }
  .compo-champs{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) }
  .hero-in{ padding-top:44px; padding-bottom:52px }
  .contact-in{ display:grid; grid-template-columns:1fr 1fr; gap:36px }
  .barre-panier{ padding:14px 16px }
  .btn-panier{ max-width:540px; margin:0 auto }
  .onglets{ justify-content:center }
  .tunnel{
    inset:auto 50% 0 auto; transform:translateX(50%);
    width:min(640px,100%); height:min(94vh,920px); top:auto; bottom:0;
    border-radius:var(--r-panneau) var(--r-panneau) 0 0; overflow:hidden;
  }
}

@media (min-width:1000px){
  .bandes{ grid-template-columns:repeat(4,1fr) }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .btn:active,.btn-ajout:active{ transform:none }
}

@media print{
  .entete,.barre-panier,.onglets,.hero-cta,.tunnel,.voile,.bascule-mode,
  #suiviEnCours{ display:none !important }
}

/* ============ PAGES DE TEXTE (mentions légales, confidentialité) ============
   Un document se lit, il ne se parcourt pas : colonne étroite, interligne
   généreux, et des repères visuels pour retrouver une information précise. */
.doc{ max-width:760px; padding-top:28px; padding-bottom:56px }
.doc h1{
  font-family:var(--titre); text-transform:uppercase; font-weight:400;
  font-size:2rem; letter-spacing:.02em; color:var(--bordeaux); margin:0 0 26px;
}
.doc-bloc{ margin:0 0 34px }
.doc-bloc h2{
  font-family:var(--titre); text-transform:uppercase; font-weight:400;
  font-size:1.22rem; letter-spacing:.02em; color:var(--bordeaux);
  margin:0 0 .5em; padding-bottom:.3em; border-bottom:2px solid var(--papier-2);
}
.doc-bloc h3{ font-size:1rem; margin:1.4em 0 .35em; color:var(--encre) }
.doc-bloc p{ margin:0 0 .9em; line-height:1.65 }

/* Résumé en tête de la page confidentialité : c'est souvent tout ce qui sera lu. */
.doc-resume{
  background:var(--panneau); border-radius:var(--r-carte);
  border-left:6px solid var(--bordeaux);
  padding:20px 22px; margin:0 0 34px;
}
.doc-resume h2{
  font-family:var(--titre); text-transform:uppercase; font-weight:400;
  font-size:1.1rem; letter-spacing:.02em; color:var(--bordeaux); margin:0 0 .5em;
}
.doc-resume ul{ margin:0; padding-left:20px }
.doc-resume li{ margin:0 0 .55em; line-height:1.6 }

/* Fiches d'identité (éditeur, hébergeur, médiateur) : deux colonnes sur grand
   écran, empilées sur téléphone — jamais de valeur orpheline sans son libellé. */
.doc-liste{ margin:0 }
.doc-liste dt{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--encre-doux); margin-top:.9em;
}
.doc-liste dd{ margin:.1em 0 0; font-weight:600 }
@media (min-width:640px){
  .doc-liste{ display:grid; grid-template-columns:220px 1fr; gap:0 18px; align-items:baseline }
  .doc-liste dt{ margin-top:.55em }
  .doc-liste dd{ margin-top:.55em }
}

.doc-tab{ width:100%; border-collapse:collapse; margin:.4em 0 1em }
.doc-tab th,.doc-tab td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--papier-2);
  vertical-align:top; line-height:1.5;
}
.doc-tab th{ font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--encre-doux) }
.doc-tab td:first-child{ font-weight:600 }

.doc-retour{ margin-top:40px }

/* Information non fournie : elle doit sauter aux yeux, sur la page comme à
   l'impression. Mieux vaut un trou visible qu'une donnée inventée. */
.afournir{
  background:#FFF0C2; color:#7A5200; font-weight:700;
  padding:1px 8px; border-radius:6px; border:1px dashed #C89A2B;
  white-space:nowrap;
}

/* Encart de contrôle : disparaît de lui-même quand data.js est complet. */
.incomplet{
  background:#FFF6E0; border:2px solid #E0A33E; border-radius:var(--r-carte);
  padding:18px 20px; margin:0 0 32px;
}
.incomplet p{ margin:0 0 .6em; line-height:1.6 }
.incomplet ul{ margin:0; padding-left:20px }
.incomplet li{ margin:.2em 0 }
.incomplet code{
  background:rgba(0,0,0,.06); padding:1px 6px; border-radius:5px;
  font-size:.9em; font-family:ui-monospace,"Consolas",monospace;
}

/* Liens du pied de page : discrets, mais ce sont de vraies cibles de
   navigation — 44 px de haut pour un doigt, pas 21. */
.pied .petit a{
  color:var(--dore-clair); text-decoration:underline;
  display:inline-block; padding:14px 10px; line-height:1.2;
}
.pied-liens{ margin-top:.2em }

/* Le pied réserve 110 px pour la barre du panier ; sur une page de texte,
   il n'y a pas de barre, donc pas de réserve. */
.page-doc .pied{ padding-bottom:28px }