/* ============================================================
   RESTAURANT LE BON GESTE — feuille de style du site (12/10/2026)
   Palette tirée des affiches : orange/rouge du logo, brun torréfié, crème, or.
   ============================================================ */
:root {
  --nuit: #1a0f0a;
  --brun: #2b1810;
  --brun-2: #3a2216;
  --creme: #fbf6ee;
  --sable: #f4e9da;
  --sable-2: #ead9c2;
  --encre: #22140d;
  --gris: #7d6b5d;
  --rouge: #e5391d;
  --orange: #f18a12;
  --or: #e8b04a;
  --vert: #1f8a4c;
  --marque: linear-gradient(120deg, #e5391d 0%, #f07a12 55%, #f6a01a 100%);
  --rayon: 22px;
  --ombre: 0 18px 40px -18px rgba(43, 24, 16, .45);
  --ombre-douce: 0 8px 24px -12px rgba(43, 24, 16, .35);
  --titre: "Playfair Display", Georgia, serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --texte: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --largeur: 1320px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-variant-numeric: lining-nums; font-family: var(--texte); color: var(--encre); background: var(--creme); line-height: 1.5; font-size: 16px; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.cadre { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .cadre { padding: 0 28px; } }
.evitement { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 999; }
.evitement:focus { left: 8px; }
.script { font-family: var(--script); font-weight: 400; color: var(--orange); }
.surtitre { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 700; color: var(--orange); }
.surtitre::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
h1, h2, h3 { font-variant-numeric: lining-nums; font-family: var(--titre); line-height: 1.08; margin: 0; letter-spacing: -.01em; }
.titre-section { font-size: clamp(30px, 4.2vw, 50px); font-weight: 800; margin: 8px 0 10px; }
.titre-section .script { font-size: .9em; display: inline-block; transform: rotate(-3deg); margin-left: 6px; }
.chapo { color: var(--gris); max-width: 640px; margin: 0; font-size: 17px; }
.section { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 900px) { .section { padding-top: 84px; padding-bottom: 84px; } }
.tete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 28px; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 700; text-decoration: none; font-size: 15px; transition: transform .15s ease, box-shadow .2s ease, background .2s; white-space: nowrap; }
.bouton:active { transform: scale(.97); }
.bouton-marque { background: var(--marque); color: #fff; box-shadow: 0 10px 24px -10px rgba(229, 57, 29, .7); }
.bouton-marque:hover { box-shadow: 0 14px 30px -10px rgba(229, 57, 29, .85); }
.bouton-sombre { background: var(--brun); color: #fff; }
.bouton-clair { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--sable-2); }
.bouton-ligne { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.bouton-vert { background: #1faa59; color: #fff; }
.bouton-petit { padding: 9px 16px; font-size: 14px; }
.bouton-bloc { width: 100%; }
.bouton[disabled] { opacity: .55; pointer-events: none; }

/* ---------- Bandeau + en-tête ---------- */
.bandeau { background: var(--nuit); color: #f6dcc0; font-size: 13px; text-align: center; padding: 8px 12px; letter-spacing: .02em; }
.bandeau b { color: var(--or); font-weight: 700; }
.entete { position: sticky; top: 0; z-index: 50; background: rgba(251, 246, 238, .88); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(43,24,16,.07); }
.entete-ligne { display: flex; align-items: center; gap: 18px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { height: 46px; width: auto; }
.logo .mot { display: flex; flex-direction: column; line-height: 1; }
.logo .mot small { font-family: var(--titre); letter-spacing: .32em; font-size: 9.5px; color: var(--gris); text-transform: uppercase; }
.logo .mot b { font-family: var(--titre); font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 12px; border-radius: 999px; }
.nav a:hover { background: var(--sable); }
.btn-panier { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.pastille { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 999px; background: var(--nuit); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; border: 2px solid var(--creme); }
.burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--sable); }
.burger span { display: block; width: 20px; height: 2px; background: var(--encre); margin: 5px auto; border-radius: 2px; transition: .2s; }
@media (max-width: 960px) {
  .burger { display: block; }
  .nav { position: fixed; inset: 72px 0 auto 0; background: var(--creme); flex-direction: column; align-items: stretch; padding: 14px 16px 22px; gap: 2px; box-shadow: 0 20px 30px -20px rgba(0,0,0,.35); transform: translateY(-130%); transition: transform .28s ease; }
  .nav.ouvert { transform: none; }
  .nav a { padding: 14px 12px; font-size: 17px; }
  .nav .bouton { margin-top: 8px; justify-content: center; }
  .entete-ligne { height: 64px; }
  .nav { inset: 64px 0 auto 0; }
  .logo img { height: 40px; }
  .logo .mot b { font-size: 19px; }
}

/* ---------- Vitrine animée ---------- */
.vitrine { padding: 18px 0 6px; }
.hero { position: relative; border-radius: 30px; overflow: hidden; min-height: 470px; box-shadow: var(--ombre); isolation: isolate; }
.scene { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; padding: 40px 56px; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; color: #fff; }
.scene.actif { opacity: 1; visibility: visible; }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -2; }
.s-braise::before { background: radial-gradient(120% 90% at 85% 40%, #6b2a10 0%, #2b1209 55%, #160904 100%); }
.s-or::before { background: radial-gradient(120% 90% at 80% 30%, #4a3214 0%, #21150a 60%, #120b05 100%); }
.s-feu::before { background: linear-gradient(135deg, #d8381c 0%, #ef7d14 60%, #f6a51c 100%); }
.s-creme { color: var(--encre); }
.s-creme::before { background: radial-gradient(120% 100% at 85% 30%, #fff 0%, #f6ead8 55%, #ecd8bd 100%); }
.scene .braises { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,170,60,.7), transparent 60%), radial-gradient(2px 2px at 70% 80%, rgba(255,120,40,.6), transparent 60%), radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,200,90,.6), transparent 60%), radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,150,60,.6), transparent 60%), radial-gradient(2px 2px at 55% 15%, rgba(255,180,70,.55), transparent 60%); animation: braises 9s linear infinite; opacity: .9; }
@keyframes braises { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 -260px, 0 -180px, 0 -320px, 0 -220px, 0 -280px; } }
.sc-texte { position: relative; z-index: 2; max-width: 560px; }
.sc-etiquette { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.s-creme .sc-etiquette { background: var(--brun); color: #fff; border-color: transparent; }
.sc-texte h2 { font-size: clamp(40px, 5.6vw, 76px); font-weight: 900; margin: 14px 0 0; }
.sc-texte h2 .script { display: block; font-size: .56em; line-height: 1.15; color: var(--or); transform: rotate(-3deg); margin: 6px 0 0 14px; }
.s-feu .sc-texte h2 .script { color: #fff4d6; }
.s-creme .sc-texte h2 .script { color: var(--orange); }
.sc-texte p { font-size: 17px; opacity: .9; max-width: 440px; margin: 14px 0 22px; }
.sc-prix { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--titre); font-weight: 800; font-size: 26px; margin-right: 14px; }
.sc-prix small { font-family: var(--texte); font-size: 13px; font-weight: 600; opacity: .8; }
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sc-visuel { position: relative; height: 100%; min-height: 360px; }
.sc-visuel figure { position: absolute; margin: 0; border-radius: 26px; overflow: hidden; border: 6px solid rgba(255,255,255,.95); box-shadow: 0 30px 50px -20px rgba(0,0,0,.6); }
.sc-visuel figure img { width: 100%; height: 100%; object-fit: cover; }
.sc-visuel .f1 { width: 62%; aspect-ratio: 4/3.2; right: 26%; top: 8%; transform: rotate(-5deg); animation: flotte 7s ease-in-out infinite; }
.sc-visuel .f2 { width: 48%; aspect-ratio: 1/1; right: 0; bottom: 4%; transform: rotate(5deg); animation: flotte 7s ease-in-out -3.5s infinite; }
@keyframes flotte { 50% { translate: 0 -10px; } }
.sc-visuel .tampon { position: absolute; left: 4%; bottom: 6%; width: 118px; height: 118px; border-radius: 50%; background: var(--marque); color: #fff; display: grid; place-items: center; text-align: center; font-weight: 800; line-height: 1.05; font-size: 14px; box-shadow: 0 16px 30px -12px rgba(229,57,29,.8); transform: rotate(-10deg); z-index: 3; }
.sc-visuel .tampon b { display: block; font-family: var(--titre); font-size: 26px; }
.hero-fleche { position: absolute; top: 50%; translate: 0 -50%; z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--encre); font-size: 22px; box-shadow: var(--ombre-douce); }
.hero-fleche.g { left: 14px; } .hero-fleche.d { right: 14px; }
.hero-points { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 7px; z-index: 5; }
.hero-points button { width: 9px; height: 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); padding: 0; transition: width .3s; }
.hero-points button.actif { width: 28px; background: #fff; }
@media (max-width: 860px) {
  .hero { min-height: 610px; border-radius: 24px; }
  .scene { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 28px 22px 46px; align-items: start; }
  .sc-texte p { font-size: 15px; margin: 10px 0 16px; }
  .sc-visuel { min-height: 250px; }
  .sc-visuel .f1 { width: 64%; right: 30%; top: 4%; }
  .sc-visuel .f2 { width: 50%; right: 2%; bottom: 2%; }
  .sc-visuel .tampon { width: 92px; height: 92px; font-size: 12px; left: auto; right: 2%; top: 0; bottom: auto; }
  .sc-visuel .tampon b { font-size: 20px; }
  .hero-fleche { display: none; }
}

/* ---------- Accès rapides ---------- */
.acces { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; padding: 22px 0 6px; }
.acces a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; }
.acces .rond { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; box-shadow: var(--ombre-douce); border: 3px solid #fff; transition: transform .2s; font-size: 28px; }
.acces a:hover .rond { transform: translateY(-4px) rotate(-3deg); }
.acces .rond img { width: 100%; height: 100%; object-fit: cover; }
.acces .rond.marque { background: var(--marque); color: #fff; }
.acces .rond.sombre { background: var(--brun); color: #fff; }
.acces .rond.wa { background: #1faa59; color: #fff; }
.acces .rond svg { width: 30px; height: 30px; }
@media (max-width: 860px) { .acces { grid-template-columns: repeat(5, 1fr); gap: 16px 6px; } .acces .rond { width: 60px; height: 60px; } .acces a { font-size: 12px; } }

/* ---------- Intro ---------- */
.intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.intro h1 { font-size: clamp(38px, 5.4vw, 72px); font-weight: 900; }
.intro h1 .script { display: block; font-size: .72em; transform: rotate(-3deg); margin: 6px 0 0 6px; }
.intro p.chapo { margin-top: 18px; font-size: 18px; }
.promesses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.promesse { background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--ombre-douce); }
.promesse .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--marque); color: #fff; display: grid; place-items: center; margin-bottom: 10px; }
.promesse .ic svg { width: 22px; height: 22px; }
.promesse b { display: block; font-size: 15px; }
.promesse span { font-size: 13.5px; color: var(--gris); }
.intro-visuel { position: relative; }
.intro-visuel img { border-radius: 28px; aspect-ratio: 4/4.4; max-height: 560px; object-fit: cover; width: 100%; box-shadow: var(--ombre); }
.intro-visuel .carton { position: absolute; left: -22px; bottom: 26px; background: var(--nuit); color: #fff; border-radius: 20px; padding: 16px 18px; max-width: 240px; box-shadow: var(--ombre); }
.intro-visuel .carton .script { font-size: 22px; display: block; color: var(--or); }
.intro-visuel .carton small { opacity: .8; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } .promesses { grid-template-columns: 1fr; } .intro-visuel .carton { left: 12px; } .intro-visuel img { aspect-ratio: 4/3.6; } }

/* ---------- Cartes de plats ---------- */
.grille-plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.plat { background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-douce); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.plat:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.plat .photo { position: relative; aspect-ratio: 16/11; background: var(--sable); overflow: hidden; }
.plat .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.plat:hover .photo img { transform: scale(1.05); }
.plat .badge { position: absolute; top: 12px; left: 12px; background: var(--nuit); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.plat .badge.chaud { background: var(--marque); }
.plat .epuise { position: absolute; inset: 0; background: rgba(26,15,10,.62); color: #fff; display: grid; place-items: center; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.plat .corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plat h3 { font-size: 21px; font-weight: 700; }
.plat p { margin: 0; color: var(--gris); font-size: 14px; flex: 1; }
.plat .formules { display: flex; flex-wrap: wrap; gap: 6px; }
.plat .formules span { background: var(--sable); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.plat .plat-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.plat .prix { font-family: var(--titre); font-weight: 800; font-size: 22px; }
.plat .prix small { font-family: var(--texte); font-size: 12px; color: var(--gris); font-weight: 600; margin-right: 4px; }
.btn-ajout { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--marque); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; box-shadow: 0 10px 20px -10px rgba(229,57,29,.9); transition: transform .15s; }
.btn-ajout:hover { transform: rotate(90deg); }
.btn-ajout[disabled] { background: #c9bcae; box-shadow: none; }

/* Vedettes : grande carte + défilement horizontal sur mobile */
.vedettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vedettes .plat:first-child { grid-column: span 2; grid-row: span 2; }
.vedettes .plat:first-child .photo { aspect-ratio: auto; flex: 1; min-height: 300px; }
.vedettes .plat:first-child h3 { font-size: 30px; }
.vedettes .plat:first-child p { flex: 0 0 auto; }
.vedettes .plat:first-child .corps { flex: 0 0 auto; }
.vedettes .plat:first-child .formules { margin-top: auto; }
@media (max-width: 1100px) { .vedettes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .vedettes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 4px 16px 16px; }
  .vedettes .plat { flex: 0 0 78%; scroll-snap-align: start; }
  .vedettes .plat:first-child .photo { min-height: 0; aspect-ratio: 16/11; flex: none; }
  .vedettes .plat:first-child h3 { font-size: 21px; }
}

/* ---------- La carte : onglets catégories ---------- */
.zone-carte { background: linear-gradient(180deg, var(--sable) 0%, var(--creme) 260px); }
.onglets { position: sticky; top: 72px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; margin-bottom: 18px; background: linear-gradient(180deg, var(--sable) 70%, transparent); scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets button { flex: 0 0 auto; border: 0; background: #fff; border-radius: 999px; padding: 8px 16px 8px 8px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; box-shadow: var(--ombre-douce); }
.onglets button img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.onglets button.actif { background: var(--nuit); color: #fff; }
@media (max-width: 960px) { .onglets { top: 64px; } }
.bloc-cat { margin-bottom: 44px; scroll-margin-top: 150px; }
.bloc-cat .entete-cat { position: relative; border-radius: 26px; overflow: hidden; min-height: 170px; display: flex; align-items: flex-end; padding: 22px 24px; color: #fff; margin-bottom: 18px; box-shadow: var(--ombre-douce); }
.bloc-cat .entete-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.bloc-cat .entete-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,10,5,.82) 0%, rgba(20,10,5,.35) 60%, rgba(20,10,5,.1) 100%); z-index: 0; }
.bloc-cat .entete-cat > div { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; width: 100%; }
.bloc-cat .entete-cat { isolation: isolate; }
.bloc-cat .entete-cat h3 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; }
.bloc-cat .entete-cat p { margin: 4px 0 0; opacity: .9; max-width: 520px; }
.vide-cat { background: #fff; border-radius: 20px; padding: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; box-shadow: var(--ombre-douce); }
.vide-cat p { margin: 0; color: var(--gris); max-width: 560px; }

/* ---------- Bande formules ---------- */
.formules-bande { background: var(--nuit); color: #fff; border-radius: 30px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--ombre); }
.formules-bande .texte { padding: 44px 44px 40px; }
.formules-bande h2 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 900; color: #fff; }
.formules-bande h2 .script { display: block; color: var(--or); font-size: .85em; transform: rotate(-3deg); }
.formules-bande .horaire { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--or); color: var(--or); border-radius: 999px; padding: 8px 18px; font-weight: 700; margin: 18px 0; }
.formules-bande ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.formules-bande li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(255,255,255,.2); padding-bottom: 8px; }
.formules-bande li b { color: var(--or); font-family: var(--titre); white-space: nowrap; }
.formules-bande .image { position: relative; min-height: 320px; }
.formules-bande .image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .formules-bande { grid-template-columns: 1fr; } .formules-bande .texte { padding: 30px 22px; } .formules-bande .image { min-height: 240px; order: -1; } }

/* ---------- En cuisine (vidéos + ambiance) ---------- */
.cuisine-grille { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; }
.cuisine-grille > * { border-radius: 22px; overflow: hidden; position: relative; box-shadow: var(--ombre-douce); margin: 0; background: var(--brun); }
.cuisine-grille video, .cuisine-grille img { width: 100%; height: 100%; object-fit: cover; }
.cuisine-grille .haut { grid-row: span 2; }
.cuisine-grille .large { grid-column: span 2; }
.cuisine-grille figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(26,15,10,.72); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); }
@media (max-width: 860px) { .cuisine-grille { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 10px; } }

/* ---------- Livraison ---------- */
.livraison { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; background: #fff; border-radius: 30px; padding: 26px; box-shadow: var(--ombre-douce); }
.livraison .photo-l { border-radius: 22px; overflow: hidden; aspect-ratio: 4/4.2; position: relative; }
.livraison .photo-l img { width: 100%; height: 100%; object-fit: cover; }
.zones { display: grid; gap: 8px; margin: 16px 0 20px; }
.zones div { display: flex; justify-content: space-between; gap: 12px; background: var(--creme); padding: 11px 14px; border-radius: 14px; font-size: 15px; }
.zones b { font-family: var(--titre); }
@media (max-width: 860px) { .livraison { grid-template-columns: 1fr; padding: 16px; } .livraison .photo-l { aspect-ratio: 16/11; } }

/* ---------- Formulaires ---------- */
.carte-form { background: #fff; border-radius: 26px; padding: 24px; box-shadow: var(--ombre-douce); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ.plein { grid-column: 1 / -1; }
.champ label { font-size: 13px; font-weight: 700; color: var(--brun-2); }
.champ input, .champ select, .champ textarea { border: 1.5px solid var(--sable-2); background: var(--creme); border-radius: 14px; padding: 12px 14px; font-size: 16px; outline: none; transition: border .2s, background .2s; width: 100%; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--orange); background: #fff; }
.champ textarea { min-height: 84px; resize: vertical; }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } }
.erreur { display: none; background: #fdecea; color: #a12a17; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin-top: 12px; }
.erreur.on { display: block; }
.succes { background: #e7f6ec; color: #13603a; border-radius: 14px; padding: 14px; font-weight: 600; margin-top: 12px; }
.reserver { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.reserver .visuel { border-radius: 26px; overflow: hidden; position: relative; min-height: 380px; box-shadow: var(--ombre-douce); }
.reserver .visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reserver .visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,5,0) 35%, rgba(20,10,5,.85) 100%); }
.reserver .visuel .legende { z-index: 1; position: absolute; left: 20px; right: 20px; bottom: 20px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.reserver .visuel .legende h3 { font-size: 30px; }
.choix-type { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.choix-type label { cursor: pointer; }
.choix-type input { position: absolute; opacity: 0; pointer-events: none; }
.choix-type span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; background: var(--creme); border: 1.5px solid var(--sable-2); font-size: 13px; font-weight: 700; text-align: center; }
.choix-type span i { font-style: normal; font-size: 22px; }
.choix-type input:checked + span { border-color: var(--orange); background: #fff4e8; color: #a8470a; }
@media (max-width: 860px) { .reserver { grid-template-columns: 1fr; } .reserver .visuel { min-height: 240px; } .choix-type { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Suivi + infos ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.infos { background: var(--nuit); color: #fff; border-radius: 26px; padding: 26px; display: grid; gap: 16px; }
.infos .ligne-info { display: flex; gap: 14px; align-items: flex-start; }
.infos .ligne-info .ic { flex: 0 0 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: var(--or); }
.infos .ligne-info .ic svg { width: 22px; height: 22px; }
.infos .ligne-info b { display: block; }
.infos .ligne-info span, .infos .ligne-info a { color: #e8d6c4; font-size: 15px; }
.mes-commandes { display: grid; gap: 8px; margin-top: 14px; }
.mes-commandes a { display: flex; justify-content: space-between; gap: 10px; background: var(--creme); border-radius: 14px; padding: 10px 14px; text-decoration: none; font-weight: 600; font-size: 14px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: #cdb8a4; padding: 46px 0 120px; margin-top: 40px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }
.pied img.logo-pied { height: 120px; width: auto; }
.pied h4 { color: #fff; font-family: var(--titre); font-size: 18px; margin: 0 0 10px; }
.pied a { color: #f3dfca; text-decoration: none; display: block; padding: 3px 0; }
.pied .bas { border-top: 1px solid rgba(255,255,255,.1); margin-top: 26px; padding-top: 16px; font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.pied .devise { font-family: var(--script); color: var(--or); font-size: 24px; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr; } .pied { padding-bottom: 130px; } }

/* ---------- Barre mobile ---------- */
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(251,246,238,.94); backdrop-filter: blur(12px); border-top: 1px solid rgba(43,24,16,.08); }
.barre-mobile .bouton { flex: 1; padding: 13px 10px; font-size: 15px; }
.barre-mobile .bouton.principal { flex: 1.6; justify-content: space-between; }
@media (max-width: 960px) { .barre-mobile { display: flex; } }

/* ---------- Panneau panier / commande ---------- */
.voile { position: fixed; inset: 0; background: rgba(20,10,5,.55); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .25s; }
.voile.on { opacity: 1; pointer-events: auto; }
.panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--creme); z-index: 90; transform: translateX(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(0,0,0,.4); }
.panneau.on { transform: none; }
.panneau-tete { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--sable-2); background: #fff; }
.panneau-tete h3 { font-size: 22px; flex: 1; }
.fermer { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sable); font-size: 20px; }
.etapes { display: flex; gap: 6px; padding: 12px 18px 0; }
.etapes span { flex: 1; height: 4px; border-radius: 4px; background: var(--sable-2); }
.etapes span.ok { background: var(--marque); }
.panneau-corps { flex: 1; overflow-y: auto; padding: 16px 18px 24px; -webkit-overflow-scrolling: touch; }
.panneau-pied { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--sable-2); display: grid; gap: 10px; }
.total-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.total-ligne.grand { font-size: 20px; font-weight: 800; }
.total-ligne.grand b { font-family: var(--titre); font-size: 26px; }
.ligne-panier { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 10px; margin-bottom: 10px; box-shadow: 0 4px 14px -10px rgba(0,0,0,.4); }
.ligne-panier img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.ligne-panier b { display: block; font-size: 15px; }
.ligne-panier small { color: var(--gris); display: block; font-size: 12.5px; }
.ligne-panier .px { font-weight: 800; font-size: 14px; }
.qte { display: inline-flex; align-items: center; gap: 2px; background: var(--creme); border-radius: 999px; padding: 3px; margin-top: 6px; }
.qte button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; font-weight: 800; font-size: 16px; }
.qte span { min-width: 26px; text-align: center; font-weight: 800; }
.panier-vide { text-align: center; padding: 40px 10px; color: var(--gris); }
.panier-vide .gros { font-size: 54px; }
.choix-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.choix-mode label, .choix-paiement label { cursor: pointer; }
.choix-mode input, .choix-paiement input { position: absolute; opacity: 0; pointer-events: none; }
.choix-mode span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 16px; background: #fff; border: 2px solid transparent; font-weight: 700; font-size: 13.5px; box-shadow: 0 4px 14px -10px rgba(0,0,0,.4); text-align: center; }
.choix-mode span i { font-style: normal; font-size: 26px; }
.choix-mode input:checked + span, .choix-paiement input:checked + span { border-color: var(--orange); background: #fff4e8; }
.choix-paiement { display: grid; gap: 10px; margin: 6px 0 14px; }
.choix-paiement label > span { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; border: 2px solid transparent; box-shadow: 0 4px 14px -10px rgba(0,0,0,.4); }
.choix-paiement label > span > i { font-style: normal; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; color: #fff; flex: 0 0 44px; }
.choix-paiement .wave i { background: #1dc8f2; }
.choix-paiement .cash i { background: var(--vert); }
.choix-paiement b { display: block; }
.choix-paiement small { color: var(--gris); }
.recap { background: #fff; border-radius: 16px; padding: 14px; display: grid; gap: 6px; font-size: 14px; margin-bottom: 12px; }
.recap div { display: flex; justify-content: space-between; gap: 10px; }
.confirme { text-align: center; padding: 8px 0; }
.confirme .coche { width: 76px; height: 76px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 40px; display: grid; place-items: center; margin: 6px auto 12px; animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(0); } }
.confirme .ref { font-family: var(--titre); font-size: 34px; font-weight: 900; letter-spacing: .04em; }
.encadre { background: #fff; border-radius: 18px; padding: 16px; text-align: left; margin: 14px 0; box-shadow: 0 4px 14px -10px rgba(0,0,0,.4); }
.encadre h4 { margin: 0 0 8px; font-size: 16px; }
.depot { display: block; border: 2px dashed var(--sable-2); border-radius: 14px; padding: 14px; text-align: center; font-weight: 700; cursor: pointer; background: var(--creme); }
.depot input { display: none; }

/* Fiche d'options d'un plat */
.fiche { position: fixed; z-index: 95; left: 50%; top: 50%; width: min(520px, calc(100% - 24px)); max-height: calc(100% - 40px); background: var(--creme); border-radius: 26px; overflow: hidden; transform: translate(-50%, -46%) scale(.96); opacity: 0; pointer-events: none; transition: .25s ease; display: flex; flex-direction: column; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.fiche.on { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.fiche .photo-f { position: relative; aspect-ratio: 16/9; flex: 0 0 auto; }
.fiche .photo-f img { width: 100%; height: 100%; object-fit: cover; }
.fiche .photo-f .fermer { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); }
.fiche .corps-f { padding: 18px 20px; overflow-y: auto; }
.fiche h3 { font-size: 27px; }
.fiche p { color: var(--gris); margin: 6px 0 14px; }
.options { display: grid; gap: 8px; margin-bottom: 16px; }
.options label { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 14px; padding: 12px 14px; border: 2px solid transparent; cursor: pointer; font-weight: 600; }
.options input { accent-color: var(--orange); width: 18px; height: 18px; margin-right: 8px; }
.options label:has(input:checked) { border-color: var(--orange); background: #fff4e8; }
.options .px { font-family: var(--titre); font-weight: 800; }
.option-titre { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brun-2); margin: 4px 0 8px; }
.fiche .pied-f { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: #fff; display: flex; gap: 12px; align-items: center; }
@media (max-width: 560px) {
  .fiche { left: 0; right: 0; top: auto; bottom: 0; width: 100%; border-radius: 26px 26px 0 0; transform: translateY(100%); max-height: 92%; }
  .fiche.on { transform: none; }
}

/* Visionneuse de carte papier */
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(10,5,2,.92); display: none; align-items: center; justify-content: center; padding: 20px; }
.visionneuse.on { display: flex; }
.visionneuse img { max-height: 92vh; width: auto; border-radius: 14px; }
.visionneuse .fermer { position: absolute; top: 16px; right: 16px; background: #fff; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 96px; translate: -50% 20px; background: var(--nuit); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 600; z-index: 120; opacity: 0; transition: .25s; pointer-events: none; box-shadow: var(--ombre); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.toast.on { opacity: 1; translate: -50% 0; }

/* Apparition au défilement */
.revele { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.revele.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revele { opacity: 1; transform: none; }
}

/* Carte sur téléphone : cartes horizontales compactes (photo à gauche), façon appli de livraison */
@media (max-width: 640px) {
  .grille-plats { grid-template-columns: 1fr; gap: 12px; }
  .grille-plats .plat { flex-direction: row; border-radius: 18px; }
  .grille-plats .plat .photo { flex: 0 0 118px; aspect-ratio: auto; min-height: 100%; }
  .grille-plats .plat .badge { top: 8px; left: 8px; font-size: 10px; padding: 4px 8px; }
  .grille-plats .plat .corps { padding: 12px 12px 12px 14px; gap: 4px; }
  .grille-plats .plat h3 { font-size: 17px; }
  .grille-plats .plat p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .grille-plats .plat .formules { display: none; }
  .grille-plats .plat .prix { font-size: 18px; }
  .grille-plats .btn-ajout { width: 40px; height: 40px; font-size: 22px; }
  .bloc-cat .entete-cat { min-height: 140px; padding: 18px; border-radius: 20px; }
}

/* ---------- Menu du jour (v2) ---------- */
.mdj { background: radial-gradient(120% 120% at 90% 0%, #4a2412 0%, var(--nuit) 60%); border-radius: 30px; padding: 30px; color: #fff; box-shadow: var(--ombre); position: relative; overflow: hidden; }
.mdj::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--marque); opacity: .28; filter: blur(20px); pointer-events: none; }
.mdj-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; position: relative; z-index: 1; }
.mdj .titre-section { color: #fff; margin-bottom: 4px; }
.mdj .titre-section .script { color: var(--or); font-size: .62em; }
.mdj-message { margin: 0; color: #f1dcc6; max-width: 640px; }
.mdj-pastille { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
.mdj .grille-plats { position: relative; z-index: 1; }
.mdj .plat { color: var(--encre); }
@media (max-width: 640px) { .mdj { padding: 20px 14px; border-radius: 24px; } }

/* ---------- Galerie (v2) ---------- */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 14px; }
.galerie figure { margin: 0; border-radius: 20px; overflow: hidden; position: relative; cursor: zoom-in; box-shadow: var(--ombre-douce); background: var(--sable); }
.galerie figure:nth-child(9n+1), .galerie figure:nth-child(9n+6) { grid-row: span 2; }
.galerie figure:nth-child(9n+3) { grid-column: span 2; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); background: rgba(26,15,10,.7); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); }
@media (max-width: 860px) { .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; } .galerie figure { border-radius: 14px; } .galerie figure:nth-child(9n+3) { grid-column: span 1; } .galerie figcaption { font-size: 11px; padding: 4px 9px; } }
.visionneuse figure { margin: 0; text-align: center; }
.visionneuse .legende-v { color: #fff; margin-top: 10px; font-weight: 600; }

/* ---------- Plan d'accès (v2) ---------- */
.carte-geo { margin-top: 24px; position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--ombre-douce); background: var(--sable); }
.carte-geo iframe { display: block; width: 100%; height: 360px; border: 0; filter: saturate(.9); }
.carte-geo-info { position: absolute; left: 16px; bottom: 16px; background: #fff; border-radius: 18px; padding: 14px 16px; display: grid; gap: 4px; box-shadow: var(--ombre); max-width: 300px; }
.carte-geo-info span { color: var(--gris); font-size: 14px; }
.carte-geo-info small { color: var(--gris); font-size: 12px; }
.carte-geo-info .bouton { margin-top: 6px; }
@media (max-width: 640px) { .carte-geo iframe { height: 300px; } .carte-geo-info { position: static; max-width: none; border-radius: 0; } }

/* ---------- Spécialité Les Merveilles d'Amed (v3) ---------- */
.amed { display: grid; grid-template-columns: .95fr 1.05fr; gap: 0; background: #120804; color: #fff; border-radius: 30px; overflow: hidden; box-shadow: var(--ombre); }
.amed-visuel { position: relative; min-height: 460px; background: #000; }
.amed-visuel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.amed-vignette { position: absolute; width: 38%; aspect-ratio: 1/1; object-fit: cover; border-radius: 18px; border: 4px solid #fff; box-shadow: 0 20px 40px -14px rgba(0,0,0,.7); }
.amed-vignette.v1 { right: 6%; top: 8%; transform: rotate(5deg); }
.amed-vignette.v2 { right: 14%; bottom: 7%; transform: rotate(-4deg); }
.amed-texte { padding: 40px 40px 36px; background: radial-gradient(120% 120% at 100% 0%, #5a2410 0%, #120804 65%); }
.amed-texte h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 900; color: #fff; margin: 10px 0 12px; }
.amed-texte h2 .script { display: block; font-size: .62em; color: var(--or); transform: rotate(-3deg); margin: 4px 0 0 10px; }
.amed-texte p { color: #ecd6c1; margin: 0 0 18px; font-size: 16.5px; }
.amed-points { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amed-points li { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 12px 14px; }
.amed-points b { display: block; font-size: 15px; }
.amed-points span { color: #d9c2ab; font-size: 13.5px; }
.amed-plats { margin-top: 18px; }
.signe-amed { display: inline-block; font-size: 12px; font-weight: 700; color: #a8470a; background: #fff1e3; border-radius: 999px; padding: 3px 10px; width: fit-content; }
.express-choix { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px; background: #fff7ea; border: 2px solid #f6c27a; border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.express-choix input { width: 20px; height: 20px; accent-color: var(--orange); margin-top: 2px; flex: 0 0 auto; }
.express-choix b { display: block; font-size: 15px; color: var(--encre); }
.express-choix small { color: var(--gris); font-size: 13px; font-weight: 500; }
@media (max-width: 860px) {
  .amed { grid-template-columns: 1fr; border-radius: 24px; }
  .amed-visuel { min-height: 300px; }
  .amed-texte { padding: 26px 20px; }
  .amed-points { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .grille-plats .plat .signe-amed { font-size: 10.5px; padding: 2px 8px; } }