/* ==========================================================
   LEMDINA — feuille de style principale
   Bleu Sidi Bou Saïd, finitions dorées, chaux.
   Une page par rubrique : accueil (porte dorée qui s'ouvre),
   maison, carte encadrée comme un menu imprimé, réserver,
   nous trouver. Chaque page s'ouvre sur un fronton doré.
   ========================================================== */

:root {
  --bleu: #1E3F6E;
  --bleu-nuit: #12284A;
  --bleu-encre: #0B1C36;
  --or: #C8A04F;
  --or-clair: #E4C98A;
  --or-sombre: #9C7A36;
  /* or martelé : boutons, porte, titres de page */
  --or-metal: linear-gradient(120deg, var(--or-sombre) 0%, var(--or-clair) 32%, var(--or) 58%, var(--or-clair) 82%, var(--or-sombre) 100%);
  --chaux: #F4F6F8;
  --texte: #DDE4EE;
  --texte-doux: #A9B6CA;
  --filet: rgba(228, 201, 138, .28);
  --filet-fort: rgba(228, 201, 138, .55);

  --f-titre: "Marcellus", "Times New Roman", serif;
  --f-texte: "Jost", "Helvetica Neue", Arial, sans-serif;
  --f-arabe: "Aref Ruqaa", "Times New Roman", serif;

  --conteneur: 1160px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --rayon: 4px;
  --nav-h: 68px;
  --haut-sur: env(safe-area-inset-top, 0px);
  --bas-sur: env(safe-area-inset-bottom, 0px);

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--haut-sur)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bleu-nuit);
  color: var(--texte);
  font-family: var(--f-texte);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* pied de page toujours en bas, même sur une page courte */
body:not(.admin) { min-height: 100svh; display: flex; flex-direction: column; }
body:not(.admin) > main { flex: 1; }

/* transition douce d'une page à l'autre (navigateurs compatibles) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
h1, h2 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); color: var(--chaux); }

/* texte en or martelé */
.fronton__titre, .carte__titre, .hero__titre, .resa__numero {
  background: var(--or-metal); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
p { margin: 0 0 1em; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--or); color: var(--bleu-encre); padding: .6em 1em; border-radius: var(--rayon);
}
.skip:focus { top: 12px; }

.conteneur { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding-inline: var(--gouttiere); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .55em 1.6em;
  font: 500 .95rem/1 var(--f-texte); letter-spacing: .04em;
  text-decoration: none; border-radius: var(--rayon); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.bouton--or {
  background: var(--or-metal); background-size: 160% 100%; background-position: 0 0;
  color: var(--bleu-encre); border: 1px solid var(--or-clair);
  box-shadow: inset 0 0 0 1px rgba(11, 28, 54, .25), 0 6px 18px rgba(200, 160, 79, .18);
  transition: background-position .4s, box-shadow .2s;
}
.bouton--or:hover { background-position: 100% 0; box-shadow: inset 0 0 0 1px rgba(11, 28, 54, .25), 0 8px 24px rgba(200, 160, 79, .32); }
.bouton--ligne { background: transparent; border: 1px solid var(--filet-fort); color: var(--or-clair); }
.bouton--ligne:hover { background: rgba(228, 201, 138, .1); border-color: var(--or-clair); }

.lien-or { color: var(--or-clair); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lien-or:hover { color: var(--chaux); }

/* Étoile ornementale sous les titres de page */
.ornement {
  display: flex; align-items: center; gap: 18px;
  width: min(360px, 70%); margin: 1.25rem auto 0;
}
.ornement::before, .ornement::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--or)); }
.ornement::after { transform: scaleX(-1); }
.ornement svg { width: 34px; height: 34px; flex: none; }

/* Frise de zelliges : étoiles dorées entre deux filets d'or */
.frise {
  height: 30px; flex: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='30' viewBox='0 0 32 30'%3E%3Cg fill='none' stroke='%23C8A04F' stroke-width='1.2'%3E%3Crect x='11' y='10' width='10' height='10'/%3E%3Crect x='11' y='10' width='10' height='10' transform='rotate(45 16 15)'/%3E%3C/g%3E%3Ccircle cx='0' cy='15' r='1.6' fill='%23E4C98A'/%3E%3Ccircle cx='32' cy='15' r='1.6' fill='%23E4C98A'/%3E%3C/svg%3E") center / 32px 30px repeat-x,
    var(--bleu-encre);
  border-block: 1px solid var(--or);
  box-shadow: inset 0 3px 0 var(--bleu-encre), inset 0 4px 0 var(--filet-fort), inset 0 -3px 0 var(--bleu-encre), inset 0 -4px 0 var(--filet-fort);
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: calc(var(--nav-h) + var(--haut-sur)); padding: var(--haut-sur) var(--gouttiere) 0;
  display: flex; align-items: center; gap: 2rem;
  transition: background-color .3s, box-shadow .3s;
}
.nav { view-transition-name: entete; }
.nav.est-defile, .nav.est-ouvert {
  background: rgba(11, 28, 54, .95); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--or), 0 3px 0 var(--bleu-encre), 0 4px 0 rgba(200, 160, 79, .45);
}
.nav__marque { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.nav__porte { width: 26px; --porte-fond: var(--bleu-encre); }
.nav__marque span { font-family: var(--f-titre); font-size: 1.35rem; color: var(--or-clair); letter-spacing: .08em; }
.nav__liens { display: flex; gap: 1.75rem; }
.nav__liens a { text-decoration: none; font-size: .95rem; color: var(--texte); padding: .4em 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav__liens a:hover, .nav__liens a[aria-current="page"] { color: var(--or-clair); border-color: var(--or); }
.nav__resa { min-height: 42px; padding: .45em 1.2em; }

.nav__burger {
  display: none; width: 44px; height: 44px; padding: 0; margin-right: -8px;
  background: none; border: 0; cursor: pointer; color: var(--or-clair);
}
.nav__burger-traits, .nav__burger-traits::before, .nav__burger-traits::after {
  display: block; width: 24px; height: 1.5px; margin: 0 auto; background: currentColor;
  transition: transform .25s, background-color .25s;
}
.nav__burger-traits { position: relative; }
.nav__burger-traits::before, .nav__burger-traits::after { content: ""; position: absolute; left: 0; }
.nav__burger-traits::before { top: -7px; }
.nav__burger-traits::after { top: 7px; }
.nav__burger[aria-expanded="true"] .nav__burger-traits { background: transparent; }
.nav__burger[aria-expanded="true"] .nav__burger-traits::before { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-traits::after { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: calc(var(--nav-h) + var(--haut-sur) + 24px) var(--gouttiere) calc(96px + var(--bas-sur));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l7 17 17 7-17 7-7 17-7-17-17-7 17-7z' fill='none' stroke='%23C8A04F' stroke-opacity='.08'/%3E%3C/svg%3E"),
    var(--bleu-encre);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile nav { display: flex; flex-direction: column; gap: .25rem; }
.menu-mobile nav a {
  font-family: var(--f-titre); font-size: 2rem; color: var(--chaux); text-decoration: none;
  padding: .35rem 0; border-bottom: 1px solid var(--filet);
}
.menu-mobile nav a:hover, .menu-mobile nav a[aria-current="page"] { color: var(--or-clair); }
.menu-mobile__infos { color: var(--texte-doux); margin: 0; }
.menu-mobile__infos a { color: var(--or-clair); }

@media (max-width: 900px) {
  .nav__liens { display: none; }
  .nav__resa { display: none; }
  .nav__burger { display: block; }
}

/* ---------- Hero : la porte ---------- */
.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: end center;
  padding: calc(var(--nav-h) + var(--haut-sur) + 40px) var(--gouttiere) 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(30, 63, 110, .95), transparent 72%),
    radial-gradient(ellipse 34% 40% at 50% 70%, rgba(200, 160, 79, .2), transparent 70%),
    var(--bleu-encre);
  overflow: hidden;
}

/* adresse et téléphone gravés de part et d'autre de la porte (grand écran) */
.hero__cote {
  position: absolute; bottom: 120px; margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-titre); font-size: .95rem; letter-spacing: .18em; color: var(--or-clair); opacity: .75;
}
.hero__cote sup { font-size: .65em; }
.hero__cote--gauche { left: max(var(--gouttiere), calc(50% - 420px)); }
.hero__cote--droit { right: max(var(--gouttiere), calc(50% - 420px)); transform: none; }
@media (max-width: 1000px) { .hero__cote { display: none; } }
/* mobile : la porte se pose au-dessus de la barre d'actions fixe */
@media (max-width: 720px) { .hero { min-height: calc(100svh - 64px - var(--bas-sur)); } }

.hero__porte {
  position: relative; display: grid; justify-items: center; width: 100%;
  perspective: 1800px;
}

/* La porte du logo officiel : cadre doré (SVG), cour éclairée et deux battants (HTML, pour la 3D).
   --ox --oy --ol --oh : boîte de l'ouverture ; --axe : jointure des battants ; --fente : la même,
   dans l'ouverture. Valeurs en %, générées depuis outils/porte.json. */
.porte {
  --porte-l: min(calc(100vw - 36px), max(300px, min(calc(76svh * .649), 500px)));
  position: relative; width: var(--porte-l); aspect-ratio: 642 / 989;
  margin-top: 12px;
  perspective: 1400px;
  transform: rotateX(var(--incl-x, 0deg)) rotateY(var(--incl-y, 0deg));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.porte__interieur, .porte__lueur, .battant { position: absolute; top: var(--oy); height: var(--oh); }
.porte__interieur, .porte__lueur {
  left: var(--ox); width: var(--ol);
  -webkit-clip-path: url(#porte-clip-relative); clip-path: url(#porte-clip-relative);
}

/* ce qu'on découvre derrière la porte : une cour éclairée */
.porte__interieur {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30% 7% 6%; text-align: center;
  container-type: inline-size;
  background:
    radial-gradient(ellipse 75% 55% at 50% 62%, rgba(228, 201, 138, .26), transparent 70%),
    var(--bleu);
}
.porte__interieur > :not(.zellige) { position: relative; z-index: 1; }

.hero__arabe {
  font-family: var(--f-arabe); font-size: clamp(1.6rem, 10cqi, 2.8rem);
  color: var(--or); margin: 0; line-height: 1.2;
}
.hero__titre {
  font-size: clamp(1.8rem, 14cqi, 4.2rem); /* suit la largeur de l'ouverture */
  letter-spacing: .12em; margin-right: -.12em; /* compense l'approche finale */
  text-transform: uppercase;
  filter: drop-shadow(0 2px 16px rgba(11, 28, 54, .7));
}
.hero__sous-titre {
  display: flex; align-items: center; gap: .6rem;
  margin: .8rem 0 1.6rem; font-size: clamp(.85rem, 4.4cqi, 1.05rem); color: var(--or-clair); letter-spacing: .06em;
}
.hero__sous-titre::before, .hero__sous-titre::after { content: ""; width: min(28px, 6cqi); height: 1px; background: var(--or); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* les deux battants (sans JavaScript, la porte reste ouverte) */
.battant { display: none; z-index: 2; pointer-events: none; will-change: transform; }
.js .battant { display: block; }
.battant svg { width: 100%; height: 100%; overflow: visible; }
.battant--gauche { left: var(--ox); width: calc(var(--axe) - var(--ox)); transform-origin: 0 50%; }
.battant--droit { left: var(--axe); width: calc(var(--ox) + var(--ol) - var(--axe)); transform-origin: 100% 50%; }
.battant__barre, .heurtoir { fill: url(#or-metal-svg); }
.battant__clous circle { fill: url(#clou-or); transform-box: fill-box; transform-origin: center; }
.heurtoir--g { transform-origin: 202px 674px; } /* pivot : la rosace du heurtoir */
.heurtoir--d { transform-origin: 443px 676px; }

/* lumière : fente entre les battants, puis éclat à l'ouverture */
.porte__lueur { z-index: 3; pointer-events: none; mix-blend-mode: screen; }
.porte__lueur::before, .porte__lueur::after { content: ""; position: absolute; inset: 0; opacity: 0; }
.porte__lueur::before {
  background: linear-gradient(90deg, transparent calc(var(--fente) - 2.5%), rgba(255, 240, 200, .95) var(--fente), transparent calc(var(--fente) + 2.5%));
}
.porte__lueur::after {
  background: radial-gradient(ellipse 55% 60% at var(--fente) 60%, #FFF3D6, rgba(255, 228, 170, .75) 30%, rgba(228, 201, 138, .25) 55%, transparent 75%);
  transform-origin: var(--fente) 60%;
}

/* le cadre doré, par-dessus tout */
.porte__cadre {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 26px rgba(200, 160, 79, .3)) drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
}
.cadre__reflet { transform: translateX(0) skewX(-20deg); }
.cadre__eclat {
  opacity: 0; transition: opacity .6s ease;
  transform: translate(calc(var(--eclat-x, 321) * 1px), calc(var(--eclat-y, 400) * 1px));
}
.porte.suit-souris .cadre__eclat { opacity: .8; }
.cadre__trait { display: none; fill: none; stroke: var(--or-clair); stroke-width: 2.4; stroke-linejoin: round; }
.cadre__trait path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* étincelles projetées depuis la fente */
.porte__eclats { position: absolute; left: var(--axe); top: 64%; z-index: 5; pointer-events: none; }
.porte__eclats span {
  position: absolute; left: 0; top: 0; width: 16px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #FFF1C8); box-shadow: 0 0 6px rgba(255, 230, 170, .9);
  transform-origin: 0 50%;
}

/* sol : un filet d'or sous la porte */
.seuil {
  width: min(calc(var(--porte-l) + 140px), 100%); height: 2px; position: relative; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--or) 22%, var(--or-clair) 50%, var(--or) 78%, transparent);
  box-shadow: 0 0 24px 2px rgba(228, 201, 138, .3);
}

/* ---------- Motion design de l'accueil ----------
   Première visite de la session (.porte-intro, posée dans <head>) : le cadre se trace en or,
   l'or est coulé de bas en haut, les clous se posent, les heurtoirs tombent et frappent deux
   coups, la lumière filtre par la fente, puis les battants s'ouvrent vers l'intérieur dans un
   éclat ; le nom se révèle et le zellige se trace. Un clic ou une touche fait passer l'intro.
   Visites suivantes (.porte-vue) : porte ouverte, simple reflet sur le cadre. */
.zellige {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  fill: none; stroke: var(--or); stroke-width: 1; opacity: .5;
  /* le centre reste dégagé pour le titre et les boutons */
  -webkit-mask-image: radial-gradient(ellipse 62% 30% at 50% 62%, transparent 62%, #000 100%);
          mask-image: radial-gradient(ellipse 62% 30% at 50% 62%, transparent 62%, #000 100%);
}
.zellige path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (max-width: 720px) { .zellige { opacity: .38; } }

.poussiere { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.poussiere span {
  --dx: 26px;
  position: absolute; bottom: 6%; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--or-clair); box-shadow: 0 0 8px 1px rgba(228, 201, 138, .7);
  opacity: 0;
}
.poussiere span:nth-child(even) { --dx: -22px; }

.hero__arabe { --i: 0; }
.hero__titre { --i: 1; }
.hero__sous-titre { --i: 2; }
.hero__actions { --i: 3; }

@media (prefers-reduced-motion: no-preference) {
  .porte-intro .cadre__trait { display: block; animation: estompe .9s ease 1.5s forwards; }
  .porte-intro .cadre__trait path { animation: trace 1.3s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) forwards; }
  .porte-intro .cadre__or { animation: coulee 1.1s cubic-bezier(.55, 0, .25, 1) .55s both; }
  .porte-intro .battant svg { animation: apparait .7s ease .75s both, choc .7s linear 2.15s; }
  .porte-intro .porte__interieur { animation: apparait .4s linear 2.75s both; } /* la cour reste cachée jusqu'à l'ouverture */
  .porte-intro .battant__clous circle { animation: clou .5s cubic-bezier(.3, 1.8, .5, 1) calc(1s + var(--d)) both; }
  .porte-intro .heurtoir { animation: heurtoir-pose 1.2s cubic-bezier(.3, .6, .4, 1) 1.2s both, heurtoir-frappe .7s ease-in-out 2.15s; }
  .porte-intro .cadre__reflet { animation: reflet 1.3s cubic-bezier(.45, 0, .2, 1) 1.6s both; }
  .porte-intro .porte__lueur::before { animation: fente 1.3s ease-out 2.3s both; }
  .porte-intro .porte__lueur::after { animation: eclat 1.9s ease-out 2.8s both; }
  .porte-intro .battant--gauche { animation: ouvre-g 2.1s cubic-bezier(.6, 0, .15, 1) 2.75s both; }
  .porte-intro .battant--droit { animation: ouvre-d 2.1s cubic-bezier(.6, 0, .15, 1) 2.75s both; }
  .porte-intro .porte__eclats span { animation: etincelle 1.2s cubic-bezier(.2, .7, .3, 1) calc(2.85s + var(--dl)) both; }
  .porte-intro .porte__interieur > :not(.zellige) { animation: revele 1.1s cubic-bezier(.2, .7, .2, 1) calc(3.1s + var(--i) * .13s) both; }
  .porte-intro .hero__titre { animation-name: titre-revele; animation-duration: 1.6s; }
  .porte-intro .zellige path { stroke-dashoffset: 1; animation: zellige-trace 1.4s cubic-bezier(.5, 0, .2, 1) calc(var(--d) + 3.1s) forwards; }
  .porte-intro .zellige { animation: zellige-respire 7s ease-in-out 7s infinite; }

  /* passer l'intro : tout se termine en un quart de seconde */
  .porte.saute :is(.porte__interieur, .cadre__trait, .cadre__trait path, .cadre__or, .cadre__reflet, .battant, .battant svg, .battant__clous circle, .heurtoir, .porte__eclats span, .zellige path, .porte__interieur > :not(.zellige)),
  .porte.saute .porte__lueur::before, .porte.saute .porte__lueur::after {
    animation-delay: 0s !important; animation-duration: .25s !important;
  }

  .porte-vue .cadre__reflet { animation: reflet 1.4s cubic-bezier(.45, 0, .2, 1) .3s both; }
  .porte-vue .zellige path { stroke-dashoffset: 1; animation: zellige-trace 1.2s cubic-bezier(.5, 0, .2, 1) calc(var(--d) * .6 + .2s) forwards; }
  .porte-vue .zellige { animation: zellige-respire 7s ease-in-out 4.5s infinite; }
  .poussiere span { animation: poussiere-monte var(--t) linear var(--dl) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .poussiere { display: none; }
  .js .battant { display: none; }
}
/* porte déjà ouverte lors des visites suivantes de la session */
.js.porte-vue .battant { display: none; }

@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes estompe { to { opacity: 0; } }
@keyframes coulee { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes apparait { from { opacity: 0; } }
@keyframes clou { from { transform: scale(0); opacity: 0; } 60% { opacity: 1; } }
@keyframes heurtoir-pose {
  0% { transform: translateY(-46px); opacity: 0; }
  30% { transform: translateY(0) rotate(16deg); opacity: 1; }
  50% { transform: rotate(-10deg); }
  68% { transform: rotate(5deg); }
  84% { transform: rotate(-2deg); }
  100% { transform: none; opacity: 1; }
}
/* deux coups : l'anneau se soulève (raccourci) puis retombe */
@keyframes heurtoir-frappe {
  0%, 42%, 82%, 100% { transform: none; }
  18%, 58% { transform: scaleY(.5); }
  30%, 70% { transform: scaleY(1.05); }
}
@keyframes choc {
  0%, 27%, 37%, 67%, 77%, 100% { transform: none; }
  30%, 70% { transform: translateY(1.5px); }
  33%, 73% { transform: translateY(-1px); }
}
@keyframes reflet { to { transform: translateX(1500px) skewX(-20deg); } }
@keyframes fente {
  0% { opacity: 0; transform: scaleY(.25); }
  30% { opacity: .65; }
  60% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes eclat {
  0% { opacity: 0; transform: scale(.12, .6); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}
/* les battants se décollent puis s'ouvrent vers l'intérieur de la maison */
@keyframes ouvre-g {
  0% { transform: none; filter: none; }
  8% { transform: rotateY(-3deg); }
  80% { opacity: 1; }
  100% { transform: rotateY(104deg); filter: brightness(.35); opacity: 0; }
}
@keyframes ouvre-d {
  0% { transform: none; filter: none; }
  8% { transform: rotateY(3deg); }
  80% { opacity: 1; }
  100% { transform: rotateY(-104deg); filter: brightness(.35); opacity: 0; }
}
@keyframes etincelle {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(4px) scaleX(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)); }
}
@keyframes revele { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes titre-revele { from { opacity: 0; letter-spacing: .5em; filter: blur(10px); } }
@keyframes zellige-trace { to { stroke-dashoffset: 0; } }
@keyframes zellige-respire { 50% { opacity: .28; } }
@keyframes poussiere-monte {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .9; }
  70% { opacity: .5; }
  100% { transform: translate(var(--dx), -72vh); opacity: 0; }
}

/* ---------- Petites portes du logo (menu, pied de page, arches) ----------
   Les battants s'ouvrent quand on survole le lien qui les porte. */
.porte-mini { display: block; height: auto; aspect-ratio: 642 / 989; color: var(--or); fill: currentColor; overflow: visible; transition: filter .5s ease; }
.porte-mini__lueur { fill: var(--or-clair); opacity: 0; transition: opacity .5s ease; }
.porte-mini__battant { transition: transform .75s cubic-bezier(.6, 0, .2, 1); }
.porte-mini__battant--g { transform-origin: 90.6px 0; } /* gonds : bords de l'ouverture */
.porte-mini__battant--d { transform-origin: 549.6px 0; }
a:is(:hover, :focus-visible) .porte-mini { filter: drop-shadow(0 0 6px rgba(228, 201, 138, .55)); }
a:is(:hover, :focus-visible) .porte-mini__lueur { opacity: .9; }
a:is(:hover, :focus-visible) .porte-mini__battant { transform: scaleX(.16); }
@media (prefers-reduced-motion: reduce) { .porte-mini__battant { transition: none; } }

/* ---------- Accueil : présentation sous les arches ---------- */
.presentation { padding-block: 0 clamp(64px, 9vw, 112px); background: var(--bleu-nuit); text-align: center; }
.presentation__texte { max-width: 46rem; }
.presentation h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.presentation .ornement { margin: 1rem auto 1.5rem; }
.presentation .chapo { margin: 0 auto 1rem; }
.presentation p:not(.chapo) { color: var(--texte-doux); max-width: 38em; margin: 0 auto; }
.presentation__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }

/* ---------- Accueil : quatre arches vers les pages ---------- */
.portes { padding-block: clamp(64px, 9vw, 112px); background: var(--bleu-nuit); }
.portes__grille {
  list-style: none; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px);
}
.arche {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  min-height: clamp(280px, 27vw, 350px); padding: clamp(40px, 5vw, 64px) 1.25rem 1.75rem;
  text-align: center; text-decoration: none;
  border: 2px solid var(--or); border-radius: 9999px 9999px var(--rayon) var(--rayon);
  outline: 1px solid var(--filet-fort); outline-offset: 5px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 22%, rgba(200, 160, 79, .22), transparent 70%),
    var(--bleu);
  transition: background-color .3s, outline-color .3s, translate .3s;
}
.arche::before { /* clé d'arche : petite étoile dorée au sommet */
  content: ""; position: absolute; top: -9px; left: 50%; translate: -50% 0;
  width: 18px; height: 18px; background: var(--bleu-nuit);
  border: 1px solid var(--or); rotate: 45deg;
}
.arche:hover { outline-color: var(--or-clair); translate: 0 -4px; }
.arche:hover .arche__titre { color: var(--or-clair); }
.arche__porte { width: 54px; margin-bottom: auto; --porte-fond: var(--bleu); }
.arche__arabe { font-family: var(--f-arabe); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--or); line-height: 1.3; }
.arche__titre { font-size: clamp(1.35rem, 2.2vw, 1.7rem); transition: color .2s; }
.arche__texte { font-size: .92rem; line-height: 1.5; color: var(--texte-doux); max-width: 16em; min-height: 3em; /* deux lignes : titres alignés */ }
.arche__texte::before { /* filet d'or sous le titre */
  content: ""; display: block; width: 32px; height: 1px; margin: .5rem auto .7rem; background: var(--or);
}
@media (prefers-reduced-motion: reduce) { .arche:hover { translate: none; } }

@media (max-width: 960px) { .portes__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .arche { min-height: 240px; padding: 2.25rem .75rem 1.25rem; }
  .arche__porte { width: 44px; }
  .arche__texte { font-size: .85rem; }
}

/* ---------- Rosaces dorées (motion design des en-têtes) ----------
   Reprises de la carte imprimée : deux rosaces à demi hors champ qui se
   tracent couronne par couronne, puis tournent très lentement. */
.rosaces { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rosace {
  position: absolute; top: 50%; width: clamp(260px, 34vw, 480px); height: auto; aspect-ratio: 1;
  fill: none; stroke: var(--or); stroke-width: .7; stroke-linejoin: round; opacity: .55;
}
.rosace:first-child { left: 0; translate: -50% -50%; }
.rosace:last-child { right: 0; translate: 50% -50%; }
.rosace path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.rosace__points { fill: var(--or-clair); stroke: none; }
.carte .rosace { top: clamp(240px, 26vw, 380px); } /* à hauteur du titre, pas au milieu de la carte */

@media (prefers-reduced-motion: no-preference) {
  .js .rosace { animation: rosace-tourne 240s linear 3.2s infinite; }
  .js .rosace:last-child { animation-direction: reverse; }
  .js .rosace path { stroke-dashoffset: 1; animation: rosace-trace 1.8s cubic-bezier(.5, 0, .2, 1) calc(var(--d, 0s) + .3s) forwards; }
  .js .rosace__points { opacity: 0; animation: rosace-apparait 1s ease 2.4s forwards; }
}
@keyframes rosace-trace { to { stroke-dashoffset: 0; } }
@keyframes rosace-apparait { to { opacity: 1; } }
@keyframes rosace-tourne { to { rotate: 360deg; } }

@media (max-width: 720px) {
  .rosace { width: 230px; opacity: .35; }
}

/* ---------- Fronton : en-tête des pages intérieures ---------- */
.fronton {
  padding: calc(var(--nav-h) + var(--haut-sur) + clamp(40px, 7vw, 88px)) var(--gouttiere) clamp(36px, 5vw, 56px);
  position: relative; isolation: isolate; text-align: center;
  background:
    radial-gradient(ellipse 45% 75% at 50% 100%, rgba(200, 160, 79, .18), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l7 17 17 7-17 7-7 17-7-17-17-7 17-7z' fill='none' stroke='%23C8A04F' stroke-opacity='.1'/%3E%3C/svg%3E"),
    var(--bleu-encre);
}
.fronton > :not(.rosaces), .carte > .conteneur { position: relative; z-index: 1; }
.fronton__arabe { font-family: var(--f-arabe); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--or); line-height: 1.3; margin: 0 0 .2rem; }
.fronton__titre { font-size: clamp(2.6rem, 7vw, 4.4rem); letter-spacing: .04em; padding-bottom: .08em; }

/* ---------- La maison ---------- */
.maison { padding-block: clamp(56px, 8vw, 104px); background: var(--bleu-nuit); }
.maison__grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.maison__texte { min-width: 0; }
.maison h2 { margin-bottom: 1.5rem; }
.chapo { font-family: var(--f-titre); font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.5; color: var(--chaux); max-width: 34em; }
.maison p:not(.chapo) { color: var(--texte-doux); max-width: 36em; }
.maison__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.engagements {
  margin: 0; padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--or); border-radius: 120px 120px var(--rayon) var(--rayon);
  outline: 1px solid var(--filet-fort); outline-offset: 6px;
  padding-top: clamp(48px, 6vw, 64px);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(200, 160, 79, .16), transparent 70%),
    linear-gradient(180deg, rgba(30, 63, 110, .7), rgba(30, 63, 110, .2));
  text-align: center;
}
.engagements div + div { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.engagements div + div { border-top-color: var(--filet-fort); }
.engagements dt { font-family: var(--f-titre); font-size: 1.3rem; color: var(--or-clair); }
.engagements dd { margin: .3rem auto 0; color: var(--texte-doux); max-width: 26em; }

@media (max-width: 820px) {
  .maison__grille { grid-template-columns: 1fr; }
}

/* ---------- La carte : un menu encadré, au sommet en arc ---------- */
.carte {
  position: relative; isolation: isolate;
  padding-block: calc(var(--nav-h) + var(--haut-sur) + clamp(32px, 5vw, 64px)) clamp(64px, 9vw, 112px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l7 17 17 7-17 7-7 17-7-17-17-7 17-7z' fill='none' stroke='%23C8A04F' stroke-opacity='.07'/%3E%3C/svg%3E"),
    var(--bleu);
}
.carte__cadre {
  --pad: clamp(18px, 4.5vw, 64px);
  position: relative;
  padding: clamp(56px, 8vw, 96px) var(--pad) var(--pad);
  background: var(--bleu-nuit);
  border: 2px solid var(--or);
  border-radius: 50% 50% 6px 6px / clamp(80px, 14vw, 200px) clamp(80px, 14vw, 200px) 6px 6px;
  outline: 1px solid var(--filet-fort);
  outline-offset: -12px;
  box-shadow: 0 0 0 5px var(--bleu), 0 0 0 6px var(--filet-fort), 0 40px 90px rgba(11, 28, 54, .55);
}
.carte__entete { text-align: center; margin-bottom: 2.5rem; }
.carte__arabe { font-family: var(--f-arabe); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--or); margin: 0 0 .25rem; }
.carte__titre { font-size: clamp(2.4rem, 6vw, 3.8rem); padding-bottom: .08em; }
.carte__note { margin: .9rem auto 0; max-width: 40em; color: var(--texte-doux); font-size: .95rem; }

.carte__outils {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
  padding-block: 1.25rem; margin-bottom: 2rem;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

.recherche { position: relative; flex: 1 1 260px; max-width: 380px; }
.recherche svg {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; fill: none; stroke: var(--or-clair); stroke-width: 1.8; stroke-linecap: round;
}
.recherche input {
  width: 100%; min-height: 46px; padding: .5em 1em .5em 2.5em;
  font: inherit; font-size: 1rem; color: var(--chaux);
  background: rgba(30, 63, 110, .45); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.recherche input::placeholder { color: var(--texte-doux); }
.recherche input:focus { border-color: var(--or-clair); outline: none; box-shadow: 0 0 0 2px rgba(228, 201, 138, .35); }

.filtres { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtre {
  min-height: 40px; padding: .35em 1em;
  font: 400 .9rem/1 var(--f-texte); color: var(--texte);
  background: transparent; border: 1px solid var(--filet); border-radius: 999px; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.filtre:hover { border-color: var(--or-clair); }
.filtre[aria-pressed="true"] { background: var(--or); color: var(--bleu-encre); border-color: var(--or); }

.carte__corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }

.categories {
  position: sticky; top: calc(var(--nav-h) + var(--haut-sur) + 24px); display: flex; flex-direction: column; gap: .15rem;
  /* carte longue : la colonne défile si elle dépasse l'écran */
  max-height: calc(100svh - var(--nav-h) - var(--haut-sur) - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--filet-fort) transparent;
}
.categorie {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .45em 0 .45em 1rem;
  font: 400 1.05rem/1.3 var(--f-titre); color: var(--texte-doux); text-align: left;
  background: none; border: 0; border-left: 2px solid rgba(228, 201, 138, .2); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.categorie:hover { color: var(--chaux); }
.categorie[aria-pressed="true"] { color: var(--or-clair); border-left-color: var(--or); }
.categorie__arabe { display: none; } /* l'arabe reste sur les titres de rubrique */

.rubrique + .rubrique { margin-top: 3.5rem; }
.rubrique__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.rubrique__entete { padding-bottom: .5rem; border-bottom: 1px solid var(--or); }
.rubrique__titre { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--chaux); }
.rubrique__arabe { font-family: var(--f-arabe); font-size: 1.6rem; color: var(--or); }
.rubrique__desc { color: var(--texte-doux); font-size: .95rem; margin: .75rem 0 1.25rem; }

.plats { list-style: none; margin: 0; padding: 0; }
/* sous-titre d'un groupe de plats : « Couscous », « Les poissons grillés »… */
.groupe + .groupe { margin-top: 1.6rem; }
.groupe__titre {
  display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .5rem;
  font: 1.15rem/1.3 var(--f-titre); letter-spacing: .03em; color: var(--or-clair);
}
.groupe__titre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--filet-fort), transparent); }
.plat-cmd__section h4 { margin: 1.1rem 0 .1rem; font: 1rem/1.3 var(--f-titre); color: var(--or); letter-spacing: .03em; }
.plat { padding-block: 1.1rem; border-bottom: 1px solid rgba(228, 201, 138, .14); }
.plat__ligne { display: flex; align-items: baseline; gap: .6rem; }
.plat__nom { font: 400 1.2rem/1.3 var(--f-titre); color: var(--chaux); min-width: 0; }
.plat__points { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--filet-fort); translate: 0 -.3em; }
.plat__prix { font: 400 1.15rem/1 var(--f-titre); color: var(--or-clair); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plat__desc { margin: .3rem 0 0; color: var(--texte-doux); font-size: .97rem; max-width: 42em; }
.plat__tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .55rem 0 0; padding: 0; }
.plat__tags li { font-size: .78rem; letter-spacing: .02em; color: var(--or-clair); padding: .1em .65em; border: 1px solid var(--filet); border-radius: 999px; }
.plat__tags li.tag--signature { background: var(--or-metal); color: var(--bleu-encre); border-color: var(--or-clair); font-weight: 500; }
.plat--indispo .plat__nom, .plat--indispo .plat__prix { opacity: .5; }
.plat__indispo { font-size: .85rem; color: var(--or); font-style: italic; margin: .3rem 0 0; }

.vide { text-align: center; padding: 3rem 1rem; color: var(--texte-doux); }
.vide button { margin-top: 1rem; }

.apercu-bandeau {
  position: fixed; bottom: calc(16px + var(--bas-sur)); left: 50%; translate: -50% 0; z-index: 60;
  background: var(--or); color: var(--bleu-encre); padding: .6em 1.2em; border-radius: var(--rayon);
  font-size: .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); max-width: calc(100% - 32px); text-align: center;
}

@media (max-width: 820px) {
  .carte__corps { grid-template-columns: minmax(0, 1fr); }
  .categories {
    position: sticky; top: calc(var(--nav-h) + var(--haut-sur)); z-index: 5;
    flex-direction: row; gap: .25rem; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding: .5rem var(--pad);
    background: var(--bleu-nuit); border-bottom: 1px solid var(--filet);
  }
  .categories::-webkit-scrollbar { display: none; }
  .categorie { flex: none; border-left: 0; border-bottom: 2px solid transparent; padding: .4em .8em; font-size: 1rem; }
  .categorie[aria-pressed="true"] { border-bottom-color: var(--or); }
  .recherche { max-width: none; }
  .carte__cadre { outline: 0; }
  .categories { margin-inline: calc(1px - var(--pad)); }
}

/* ---------- Réserver : panneau en arche doré ---------- */
.resa {
  padding-block: clamp(56px, 8vw, 104px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l7 17 17 7-17 7-7 17-7-17-17-7 17-7z' fill='none' stroke='%23C8A04F' stroke-opacity='.07'/%3E%3C/svg%3E"),
    var(--bleu);
}
.resa__panneau {
  max-width: 660px; margin: 0 auto; text-align: center;
  padding: clamp(72px, 10vw, 104px) clamp(20px, 5vw, 56px) clamp(36px, 5vw, 56px);
  background:
    radial-gradient(ellipse 60% 45% at 50% 55%, rgba(200, 160, 79, .14), transparent 70%),
    var(--bleu-nuit);
  border: 2px solid var(--or);
  border-radius: 50% 50% 6px 6px / clamp(100px, 18vw, 170px) clamp(100px, 18vw, 170px) 6px 6px;
  outline: 1px solid var(--filet-fort); outline-offset: -12px;
  box-shadow: 0 0 0 5px var(--bleu), 0 0 0 6px var(--filet-fort), 0 40px 90px rgba(11, 28, 54, .55);
}
.resa__intro { color: var(--texte); max-width: 30em; margin: 0 auto 2rem; }
.resa__contact { display: grid; gap: 1.4rem; justify-items: center; }
.resa__numero {
  margin: 0; font-family: var(--f-titre); font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1.1;
  letter-spacing: .05em; white-space: nowrap; font-variant-numeric: tabular-nums;
  user-select: all;
}
.resa__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.resa__suite { margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--filet); }

/* ---------- Infos pratiques ---------- */
.infos { padding-block: clamp(56px, 8vw, 104px); background: var(--bleu-nuit); }
.infos__grille { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 80px); align-items: stretch; }
.infos__texte { min-width: 0; }
.infos__texte h2 { font-size: 1.25rem; color: var(--or-clair); margin: 1.75rem 0 .4rem; }
.infos__texte h2:first-child { margin-top: 0; }
.infos address { font-style: normal; margin-bottom: .5rem; color: var(--chaux); }
.telephone { font-family: var(--f-titre); font-size: 1.6rem; color: var(--chaux); text-decoration: none; letter-spacing: .04em; }
.telephone:hover { color: var(--or-clair); }

.horaires { border-collapse: collapse; width: 100%; max-width: 440px; font-size: .97rem; }
.horaires { border-top: 1px solid var(--or); }
.horaires th, .horaires td { text-align: left; padding: .45rem 0; border-bottom: 1px solid rgba(228, 201, 138, .2); vertical-align: top; }
.horaires th { font-weight: 400; color: var(--chaux); padding-right: 1rem; }
.horaires td { color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.petit { font-size: .85rem; color: var(--texte-doux); margin-top: .75rem; }

.infos__plan {
  min-height: 400px; border-radius: 220px 220px var(--rayon) var(--rayon); overflow: hidden;
  border: 2px solid var(--or); box-shadow: 0 0 0 8px var(--bleu-nuit), 0 0 0 9px rgba(200, 160, 79, .5);
  margin: 9px;
}
.infos__plan iframe { width: 100%; height: 100%; min-height: 400px; border: 0; filter: saturate(.75) contrast(1.05); }

/* variante sans carte intégrée : arche cliquable vers Google Maps */
.plan-lien {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  text-align: center; text-decoration: none; padding: 64px 24px 40px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(228, 201, 138, .16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l7 17 17 7-17 7-7 17-7-17-17-7 17-7z' fill='none' stroke='%23C8A04F' stroke-opacity='.12'/%3E%3C/svg%3E"),
    var(--bleu);
}
.plan-lien svg { width: 48px; height: 48px; fill: none; stroke: var(--or-clair); stroke-width: 1.3; }
.plan-lien strong { font: 400 1.6rem/1.2 var(--f-titre); color: var(--chaux); }
.plan-lien span { color: var(--texte-doux); }
.plan-lien .bouton { margin-top: .5rem; }

@media (max-width: 820px) {
  .infos__grille { grid-template-columns: 1fr; }
  .infos__plan { border-radius: 160px 160px var(--rayon) var(--rayon); min-height: 340px; }
  .infos__plan iframe { min-height: 340px; }
}

/* ---------- Pied de page ---------- */
.pied { background: var(--bleu-encre); padding-block: 56px; font-size: .92rem; color: var(--texte-doux); }
.pied__grille { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 3rem; align-items: center; }
.pied__grille p { margin: 0; }
.pied__marque { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.pied__porte { width: 40px; --porte-fond: var(--bleu-encre); }
.pied__nom { font-family: var(--f-titre); font-size: 1.4rem; color: var(--or-clair); }
.pied__nom span { font-family: var(--f-arabe); margin-left: .5rem; }
.pied__liens { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; }
.pied__liens a { text-decoration: none; }
.pied__liens a:hover { color: var(--or-clair); text-decoration: underline; text-underline-offset: 4px; }
.pied a { color: var(--chaux); }
.pied__adresse { text-align: right; }
.pied__legal { grid-column: 1 / -1; font-size: .8rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
/* réseaux : deux pièces sur le filet « trait, fleur, trait » des étiquettes */
.pied__reseaux { grid-column: 1 / -1; justify-self: stretch; display: grid; justify-items: center; gap: 1.6rem; padding-block: 1rem .5rem; }
.pied__suivre {
  display: flex; align-items: center; gap: 1.25rem; width: 100%;
  font-family: var(--f-titre); font-size: 1.15rem; color: var(--or-clair); white-space: nowrap;
}
.pied__suivre::before, .pied__suivre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--or)); }
.pied__suivre::after { transform: scaleX(-1); }
.pied__medailles { display: flex; gap: clamp(40px, 8vw, 72px); }
.pied a.medaille { color: var(--texte); }

@media (max-width: 820px) {
  .pied__grille { grid-template-columns: 1fr; justify-items: start; }
  .pied__liens { justify-content: start; }
  .pied__adresse { text-align: left; }
}

/* ---------- Réseaux : pièces dorées ----------
   Comme les macarons des étiquettes : disque bleu cerclé d'or, anneau de clous qui tourne.
   La pièce entre en tournoyant quand elle apparaît, et se retourne en or au survol. */
.medaille {
  --m: 56px;
  display: inline-flex; flex-direction: column; align-items: center; gap: .85rem;
  text-decoration: none; color: var(--texte); perspective: 700px;
}
.medaille__socle { position: relative; width: var(--m); aspect-ratio: 1; perspective: 500px; }
.medaille__clous {
  position: absolute; inset: -16%; width: 132%; height: 132%; max-width: none; overflow: visible;
  fill: none; stroke: var(--or); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 1; opacity: .7;
  transition: stroke .4s, opacity .4s;
}
.medaille__piece { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45, -.4, .25, 1.4); }
.medaille__face, .medaille__dos {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.medaille__face {
  color: var(--or-clair);
  background: radial-gradient(circle at 50% 28%, #2A5288, var(--bleu-nuit) 72%);
  box-shadow: inset 0 0 0 2px var(--or), inset 0 0 0 5px var(--bleu-nuit), inset 0 0 0 6px var(--filet-fort), 0 8px 20px rgba(0, 0, 0, .4);
}
/* lustre qui passe de temps en temps sur la pièce */
.medaille__face::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 246, 220, .4) 50%, transparent 65%);
  transform: translateX(-120%);
}
.medaille__dos {
  color: var(--bleu-encre); background: var(--or-metal); transform: rotateY(180deg);
  box-shadow: inset 0 0 0 2px var(--or-clair), inset 0 0 0 5px var(--or), inset 0 0 0 6px rgba(11, 28, 54, .3), 0 8px 26px rgba(200, 160, 79, .4);
}
.medaille__ico { width: 44%; height: 44%; }
.medaille:is(:hover, :focus-visible) .medaille__piece { transform: rotateY(180deg); }
.medaille:is(:hover, :focus-visible) .medaille__clous { stroke: var(--or-clair); opacity: 1; }
.medaille__texte { display: flex; flex-direction: column; align-items: center; line-height: 1.35; }
.medaille__nom { font-family: var(--f-titre); font-size: 1.05rem; color: var(--chaux); transition: color .3s; }
.medaille__compte { font-size: .82rem; color: var(--texte-doux); }
.medaille:is(:hover, :focus-visible) .medaille__nom { color: var(--or-clair); }
.medaille:focus-visible { outline: 0; }
.medaille:focus-visible .medaille__socle { outline: 2px solid var(--or-clair); outline-offset: 10px; border-radius: 50%; }

.medaille--grande { --m: clamp(96px, 16vw, 124px); gap: 1.4rem; }
.medaille--grande .medaille__nom { font-size: 1.6rem; }
.medaille--grande .medaille__compte { font-size: 1rem; }
.medaille--petite { --m: 42px; flex-direction: row; gap: 1rem; }
.medaille--petite .medaille__texte { align-items: flex-start; }

@media (prefers-reduced-motion: no-preference) {
  .medaille__clous { animation: tourne 48s linear infinite; }
  .medaille:is(:hover, :focus-visible) .medaille__clous { animation-duration: 5s; }
  .medaille__face::after { animation: lustre 7s ease-in-out calc(2.5s + var(--rang) * .8s) infinite; }
  .js .medaille__socle { opacity: 0; }
  .js .medaille.est-visible .medaille__socle { animation: piece-entre 1.4s cubic-bezier(.2, .75, .25, 1) calc(var(--rang) * .2s) both; }
}
@media (prefers-reduced-motion: reduce) { .medaille__piece { transition: none; } }
@keyframes tourne { to { rotate: 360deg; } }
@keyframes lustre { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes piece-entre {
  0% { opacity: 0; transform: translateY(-30px) rotateY(-540deg) scale(.55); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Nous trouver : grande section */
/* ---------- Nous trouver : questions fréquentes ---------- */
.faq { padding-block: 0 clamp(56px, 8vw, 104px); background: var(--bleu-nuit); }
.faq h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); text-align: center; margin-bottom: 2rem; }
.faq__liste { max-width: 48rem; margin: 0 auto; }
.faq__liste div { padding-block: 1.1rem; border-top: 1px solid var(--filet); }
.faq__liste div:last-child { border-bottom: 1px solid var(--filet); }
.faq__liste dt { font-family: var(--f-titre); font-size: 1.2rem; color: var(--or-clair); }
.faq__liste dd { margin: .35rem 0 0; color: var(--texte-doux); }

.reseaux {
  padding-block: clamp(56px, 8vw, 104px); text-align: center; border-top: 1px solid var(--filet);
  background:
    radial-gradient(ellipse 50% 70% at 50% 100%, rgba(200, 160, 79, .16), transparent 70%),
    var(--bleu);
}
.reseaux h2 { margin-bottom: .75rem; }
.reseaux__intro { color: var(--texte-doux); max-width: 34em; margin: 0 auto 3rem; }
.reseaux__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px clamp(56px, 12vw, 140px); }

/* menu mobile */
.menu-mobile__reseaux { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 2rem; }

/* ---------- Réserver et commander en ligne ---------- */
.livre, .commande {
  padding-block: clamp(40px, 6vw, 88px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l7 17 17 7-17 7-7 17-7-17-17-7 17-7z' fill='none' stroke='%23C8A04F' stroke-opacity='.07'/%3E%3C/svg%3E"),
    var(--bleu);
}
/* panneau doré à double filet, comme la carte imprimée */
.livre__form, .commande__colonne, .panier, .recu {
  background: var(--bleu-nuit);
  border: 1px solid var(--or); border-radius: 6px;
  outline: 1px solid var(--filet); outline-offset: -8px;
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 30px 70px rgba(11, 28, 54, .45);
}
.livre__form { max-width: 880px; margin: 0 auto; }
.resa--telephone { padding-block: 0 clamp(56px, 8vw, 96px); }

.etape { border: 0; margin: 0 0 2.5rem; padding: 0; min-width: 0; }
.etape__titre {
  display: flex; align-items: center; gap: .75rem; padding: 0; margin-bottom: 1.1rem;
  font-family: var(--f-titre); font-size: clamp(1.3rem, 2.4vw, 1.55rem); color: var(--chaux);
}
.etape__num {
  flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--or); border-radius: 50%; color: var(--or-clair); font-size: 1.05rem;
}

.champs { display: grid; gap: 1rem 1.25rem; }
.champs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.champ--large { grid-column: 1 / -1; }
.champ { display: grid; gap: .35rem; align-content: start; }
.champ__nom { font-size: .88rem; color: var(--texte-doux); }
.champ__aide { color: rgba(169, 182, 202, .7); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: .65rem .85rem;
  font: 400 1rem/1.4 var(--f-texte); color: var(--chaux);
  background: var(--bleu-encre); border: 1px solid var(--filet-fort); border-radius: var(--rayon);
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--or-clair); box-shadow: 0 0 0 3px rgba(228, 201, 138, .18); }
.champ input[type="date"] { color-scheme: dark; }

.compteur { display: inline-flex; align-items: center; gap: .5rem; }
.compteur__bouton {
  width: 48px; height: 48px; font: 400 1.5rem/1 var(--f-titre); color: var(--or-clair);
  background: transparent; border: 1px solid var(--filet-fort); border-radius: var(--rayon); cursor: pointer;
}
.compteur__bouton:hover:not(:disabled) { border-color: var(--or-clair); background: rgba(228, 201, 138, .08); }
.compteur__bouton:disabled { opacity: .35; cursor: default; }
.compteur__valeur { min-width: 2.2ch; text-align: center; font: 1.7rem/1 var(--f-titre); color: var(--chaux); }

.salle__message { color: var(--texte-doux); margin-bottom: .9rem; }
.salle__message:empty { display: none; }
/* créneaux en petites arches */
.creneaux { display: flex; flex-wrap: wrap; gap: .5rem; }
.creneau {
  min-width: 5.2rem; min-height: 46px; padding: .3rem .9rem;
  font: 400 1rem/1 var(--f-titre); font-variant-numeric: tabular-nums; letter-spacing: .03em;
  color: var(--texte); background: rgba(11, 28, 54, .6);
  border: 1px solid var(--filet-fort); border-radius: 999px 999px 4px 4px; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.creneau:hover:not(:disabled) { border-color: var(--or-clair); color: var(--or-clair); }
.creneau[aria-pressed="true"] { background: var(--or-metal); color: var(--bleu-encre); border-color: var(--or-clair); }
.creneau.est-complet { opacity: .35; text-decoration: line-through; cursor: default; }

/* plan de salle : tables placées en % du plan, tailles en unités de largeur du plan */
.plan {
  --echelle: 1;
  position: relative; aspect-ratio: 100 / 64; container-type: inline-size;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23C8A04F' stroke-opacity='.06'%3E%3Crect x='12' y='12' width='16' height='16'/%3E%3Crect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E"),
    var(--bleu-encre);
  border-radius: 6px;
}
.plan__sol { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plan__sol rect { fill: none; stroke: var(--filet-fort); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan__vitrine { stroke: var(--or); stroke-width: 3; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.plan__entree { stroke: var(--bleu-encre); stroke-width: 5; vector-effect: non-scaling-stroke; }
.plan__repere { position: absolute; font-size: .72rem; color: var(--texte-doux); line-height: 1; pointer-events: none; }
.plan__repere--vitrine { left: 6%; top: 2.5%; }
.plan__repere--entree { left: 47%; bottom: 3%; translate: -50% 0; }
.table {
  position: absolute; translate: -50% -50%;
  width: calc(var(--l) * var(--echelle) * 1cqi); height: calc(var(--h) * var(--echelle) * 1cqi);
  display: grid; place-content: center; gap: .1em; padding: 0;
  color: var(--or-clair); background: rgba(200, 160, 79, .09);
  border: 1.5px solid var(--or); border-radius: 4px;
  font-family: var(--f-texte); cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .25s, scale .2s;
}
.table--ronde { border-radius: 50%; }
.table__numero { font: calc(2.6cqi * var(--echelle)) / 1 var(--f-titre); }
.table__places { font-size: max(.58rem, calc(1.25cqi * var(--echelle))); line-height: 1; color: var(--texte-doux); white-space: nowrap; }
.table.est-libre:not([aria-pressed="true"]):hover { background: rgba(200, 160, 79, .22); scale: 1.06; }
.table[aria-pressed="true"] {
  background: var(--or-metal); color: var(--bleu-encre); border-color: var(--or-clair);
  box-shadow: 0 0 0 3px rgba(228, 201, 138, .3), 0 0 28px rgba(228, 201, 138, .45);
}
.table[aria-pressed="true"] .table__places { color: var(--bleu-nuit); }
.table.est-prise {
  cursor: not-allowed; color: rgba(169, 182, 202, .45); border-color: rgba(169, 182, 202, .25);
  background: repeating-linear-gradient(135deg, rgba(169, 182, 202, .07) 0 3px, transparent 3px 7px);
}
.table.est-prise .table__places { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  [data-etape-plan]:not([hidden]) .table { animation: table-pose .4s cubic-bezier(.2, .8, .3, 1.2) both; }
  @keyframes table-pose { from { opacity: 0; scale: .6; } }
}
@media (max-width: 600px) { .plan { aspect-ratio: 100 / 92; --echelle: 1.5; } }

.plan__legende { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--texte-doux); }
.plan__legende li { display: flex; align-items: center; gap: .45rem; }
.pastille { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--or); background: rgba(200, 160, 79, .09); }
.pastille--prise { border-color: rgba(169, 182, 202, .3); background: repeating-linear-gradient(135deg, rgba(169, 182, 202, .25) 0 2px, transparent 2px 4px); }
.pastille--choisie { background: var(--or-metal); border-color: var(--or-clair); }
.salle__choix { margin: .75rem 0 0; color: var(--or-clair); }

.recap-resa {
  margin: 0 0 1rem; padding: .9rem 1.25rem; text-align: center;
  font: 1.15rem/1.4 var(--f-titre); color: var(--or-clair);
  border: 1px solid var(--filet-fort); border-radius: var(--rayon);
}
.empreinte {
  display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem; background: rgba(200, 160, 79, .06);
  border: 1px solid var(--filet); border-left: 3px solid var(--or); border-radius: var(--rayon);
}
.empreinte__ico { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--or-clair); stroke-width: 1.4; }
.empreinte__texte { margin: 0; color: var(--texte); }
.empreinte__texte strong { color: var(--chaux); font-weight: 500; }
.formulaire__erreur { margin: 0 0 1rem; color: #F2B8B0; }
.formulaire__erreur:empty { display: none; }
.bouton--large { width: 100%; min-height: 56px; font-size: 1.05rem; }
.bouton:disabled { opacity: .6; cursor: progress; }
.formulaire__note { margin: .8rem 0 0; text-align: center; font-size: .85rem; color: var(--texte-doux); }

/* commander : la carte à gauche, le panier à droite */
.commande__grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mode {
  position: relative; display: grid; gap: .35rem; align-content: start;
  padding: 1.6rem 1.25rem 1.25rem; cursor: pointer; text-align: center;
  border: 1px solid var(--filet-fort); border-radius: 999px 999px 6px 6px / 70px 70px 6px 6px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode:hover { border-color: var(--or-clair); }
.mode:has(input:checked) { border-color: var(--or); background: rgba(200, 160, 79, .1); box-shadow: inset 0 0 0 1px var(--or); }
.mode:has(input:focus-visible) { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.mode__titre { font: 1.3rem/1.2 var(--f-titre); color: var(--chaux); }
.mode:has(input:checked) .mode__titre { color: var(--or-clair); }
.mode__texte { font-size: .88rem; color: var(--texte-doux); }

.commande__rubriques {
  position: sticky; top: calc(var(--nav-h) + var(--haut-sur)); z-index: 5;
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  margin: 0 -8px 1rem; padding: .6rem 8px; background: var(--bleu-nuit); border-bottom: 1px solid var(--filet);
}
.commande__rubriques a {
  flex: none; padding: .4rem .8rem; font-size: .88rem; color: var(--texte); text-decoration: none;
  border: 1px solid var(--filet); border-radius: 999px;
}
.commande__rubriques a:hover { color: var(--or-clair); border-color: var(--or); }
.rubrique-cmd { scroll-margin-top: calc(var(--nav-h) + var(--haut-sur) + 64px); }
.rubrique-cmd__titre { font-size: 1.25rem; color: var(--or-clair); margin: 1.6rem 0 .3rem; }
.rubrique-cmd__liste { list-style: none; margin: 0; padding: 0; }
.plat-cmd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .9rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid rgba(228, 201, 138, .12);
}
.plat-cmd__nom { display: block; color: var(--chaux); }
.plat-cmd.est-choisi .plat-cmd__nom { color: var(--or-clair); }
.plat-cmd__desc { display: block; font-size: .85rem; color: var(--texte-doux); line-height: 1.45; }
.plat-cmd__prix { font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap; }
.plat-cmd__compteur { display: inline-flex; align-items: center; gap: .3rem; }
.mini {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  font: 400 1.3rem/1 var(--f-titre); color: var(--or-clair); background: transparent; border: 1px solid var(--filet-fort);
}
.mini--plus { background: var(--or-metal); color: var(--bleu-encre); border-color: var(--or-clair); }
.mini:hover { box-shadow: 0 0 0 3px rgba(228, 201, 138, .18); }
.mini__qte { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--chaux); }
.mini__qte:empty { min-width: 0; }

.panier { position: sticky; top: calc(var(--nav-h) + var(--haut-sur) + 20px); }
.panier__titre { font-size: 1.55rem; margin-bottom: 1rem; }
.panier__lignes { list-style: none; margin: 0; padding: 0; }
.panier__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid rgba(228, 201, 138, .12); }
.panier__nom { color: var(--chaux); font-size: .95rem; }
.panier__prix { font-variant-numeric: tabular-nums; text-align: right; }
.panier__ligne .plat-cmd__compteur { grid-column: 1; }
.panier__ligne .mini { width: 32px; height: 32px; font-size: 1.1rem; }
.panier__vide { color: var(--texte-doux); }
.panier__totaux { margin: 1rem 0; }
.panier__totaux div { display: flex; justify-content: space-between; padding: .25rem 0; }
.panier__totaux dt { color: var(--texte-doux); }
.panier__totaux dd { margin: 0; font-variant-numeric: tabular-nums; }
.panier__total { margin-top: .4rem; padding-top: .7rem !important; border-top: 1px solid var(--or); }
.panier__total dt, .panier__total dd { font: 1.35rem/1.2 var(--f-titre); color: var(--or-clair); }
.panier__minimum { color: var(--or-clair); font-size: .9rem; }
.panier__minimum:empty { display: none; }
.panier-mobile { display: none; }
.carte__commander { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1.4rem 0 0; }

/* confirmation */
.recu { max-width: 620px; margin: 0 auto; }
.recu__attente { color: var(--texte-doux); margin: 0; }
.recu__titre { font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--or-clair); margin-bottom: 1.4rem; }
.recu__details { display: grid; gap: .1rem; margin: 0 0 1.4rem; }
.recu__details div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(228, 201, 138, .15); }
.recu__details dt { color: var(--texte-doux); }
.recu__details dd { margin: 0; color: var(--chaux); }
.recu__lignes { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.recu__lignes li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.recu__total { border-top: 1px solid var(--or); margin-top: .4rem; padding-top: .7rem !important; font: 1.25rem var(--f-titre); color: var(--or-clair); }
.recu__note { color: var(--texte-doux); margin: 0; }
.recu__erreur { color: #F2B8B0; }
.recu__aide { max-width: 620px; margin: 1.5rem auto 0; text-align: center; color: var(--texte-doux); }

@media (max-width: 900px) {
  .commande__grille { grid-template-columns: minmax(0, 1fr); }
  .panier { position: static; }
  .panier-mobile:not([hidden]) {
    position: fixed; inset: auto 0 0; z-index: 39;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem var(--gouttiere) calc(.85rem + var(--bas-sur));
    background: var(--or-metal); color: var(--bleu-encre); text-decoration: none; font-weight: 500;
    box-shadow: 0 -10px 30px rgba(11, 28, 54, .5);
  }
}
@media (max-width: 720px) {
  .panier-mobile:not([hidden]) { bottom: calc(64px + var(--bas-sur)); padding-bottom: .85rem; }
}
@media (max-width: 560px) {
  .champs--2, .modes { grid-template-columns: minmax(0, 1fr); }
  .plat-cmd { grid-template-columns: minmax(0, 1fr) auto; }
  .plat-cmd__compteur { grid-column: 2; grid-row: 1 / span 2; }
  .plat-cmd__prix { grid-column: 1; font-size: .9rem; color: var(--texte-doux); }
  .recu__details div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Barre d'actions mobile ---------- */
.barre-mobile { display: none; }

@media (max-width: 720px) {
  body { padding-bottom: calc(64px + var(--bas-sur)); }
  .barre-mobile {
    position: fixed; inset: auto 0 0; z-index: 40; view-transition-name: barre;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding-bottom: var(--bas-sur);
    background: rgba(11, 28, 54, .97); border-top: 1px solid var(--or);
    backdrop-filter: blur(8px);
  }
  .barre-mobile a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 64px; text-decoration: none; font-size: .8rem; color: var(--texte);
  }
  .barre-mobile a:first-child { color: var(--bleu-encre); background: var(--or-metal); font-weight: 500; }
  .barre-mobile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
  .barre-mobile a + a { border-left: 1px solid var(--filet); }
  .barre-mobile a[aria-current="page"] { color: var(--or-clair); box-shadow: inset 0 2px 0 var(--or); }
  .apercu-bandeau { bottom: calc(76px + var(--bas-sur)); }
}

/* ---------- Impression de la carte ---------- */
@media print {
  .nav, .pied, .frise, .carte__outils, .categories, .skip, .barre-mobile, .menu-mobile, .ornement { display: none !important; }
  .carte__titre { background: none; color: #000; -webkit-text-fill-color: #000; }
  body, .carte, .carte__cadre { background: #fff; color: #000; box-shadow: none; }
  .carte { padding: 0; }
  .carte__corps { display: block; }
  .rubrique__titre, .plat__nom, h2 { color: #000; }
  .plat__prix, .rubrique__arabe, .carte__arabe { color: #6b5320; }
  .plat__desc, .rubrique__desc, .carte__note { color: #333; }
  .plat { break-inside: avoid; }
}