/* Yazid Restaurant v2 — feuille de styles commune au site et à la carte.
   Direction : l'écrin du logo. Rouge Yazid et grenat pour les fonds de marque, or pour la structure
   (filets doubles, frise d'étoiles à six branches, cadres), ivoire pour la lecture.
   Les boutons et les puces reprennent la pointe de l'hexagone. */

/* ---------- Polices (auto-hébergées, licence SIL OFL) ---------- */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/marcellus-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/marcellus-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/tenor-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/tenor-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Reem Kufi"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/reem-kufi-arabic-500-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Reem Kufi"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/reem-kufi-arabic-700-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/noto-kufi-arabic-arabic-wght-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/noto-kufi-arabic-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Jetons ---------- */
:root {
  --rouge: #A8111A;          /* champ du logo */
  --rouge-vif: #C9161F;
  --grenat: #6E0B12;         /* frise du logo */
  --nuit: #2A0A0D;           /* fonds sombres : vin presque noir */
  --nuit-2: #3D1216;
  --or: #D2A54E;
  --or-clair: #F1D58C;
  --or-fonce: #9C6D27;
  --or-texte: #87591C;       /* or lisible sur ivoire (contraste 5,6:1) */
  --or-plein: #DDB76A;       /* or des boutons et repères actifs (aplat) */
  --ivoire: #FBF5EA;
  --ivoire-2: #F4EADB;
  --encre: #2A1A14;
  --encre-2: #6B5A4E;
  --filet: #E6D7C1;
  --filet-or: #D9BE86;
  --rose-pale: #F2D9C9;
  --f-display: "Marcellus", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-text: "Tenor Sans", "Optima", "Candara", "Segoe UI", sans-serif;
  --f-ar-display: "Reem Kufi", "Noto Kufi Arabic", "Geeza Pro", sans-serif;
  --f-ar-text: "Noto Kufi Arabic", "Geeza Pro", Tahoma, sans-serif;
  --gouttiere: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --focus: var(--encre);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; font-synthesis-weight: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--nuit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="ar"] body { font-family: var(--f-ar-text); font-size: 1rem; line-height: 1.85; }
img, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--rouge); text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* survol des liens de texte : sans spécificité, pour ne jamais écraser la couleur d'un bouton ou d'un lien stylé */
:where(a:hover) { color: var(--encre); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-dark { --focus: var(--or-clair); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--ivoire); color: var(--encre); padding: 10px 16px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }

.display { font-family: var(--f-display); font-weight: 400; letter-spacing: .005em; }
html[lang="ar"] .display { font-family: var(--f-ar-display); font-weight: 700; letter-spacing: 0 !important; }
.it { font-family: var(--f-display); }
.ar { font-family: var(--f-ar-display); font-weight: 500; }
.num { font-family: var(--f-display); font-variant-numeric: lining-nums; }
html[lang="ar"] .num { font-family: var(--f-ar-text); font-weight: 600; }

/* Fond de marque : rouge et treillis d'étoiles très discret ; variante sombre */
.motif { background-color: var(--rouge); background-image: url(../media/brand/motif.svg); background-size: 51px auto; }
.motif--sombre { background-color: var(--nuit); background-image: url(../media/brand/motif-sombre.svg); background-size: 51px auto; }
/* Frise : la bande du logo, étoiles à six branches entre deux filets d'or */
.frise { height: 30px; background: var(--grenat) url(../media/brand/frise.svg) repeat-x center / auto 100%; border-block: 2px solid var(--or); box-shadow: 0 -4px 0 -1px var(--grenat), 0 -5px 0 -1px var(--or-fonce), 0 4px 0 -1px var(--grenat), 0 5px 0 -1px var(--or-fonce); position: relative; z-index: 1; }
/* Filet double, comme les deux cadres de l'hexagone */
.filet-double { height: 6px; border-block: 2px solid var(--or); }

/* ---------- Boutons : pilules nettes, couleurs pleines, filet fin ---------- */
.btn {
  --fond: var(--or-plein); --texte: var(--nuit); --bord: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--fond); color: var(--texte); box-shadow: inset 0 0 0 1px var(--bord);
  font-family: var(--f-text); font-size: 1rem; line-height: 1.2; letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html[lang="ar"] .btn { font-family: var(--f-ar-text); font-weight: 600; letter-spacing: 0; }
.btn:active { transform: scale(.98); }
.btn svg { flex: none; }
.btn--clair { --fond: var(--or-plein); --texte: var(--nuit); }
.btn--sombre { --fond: var(--nuit); --texte: var(--ivoire); --bord: rgba(241, 213, 140, .45); }
.btn--rouge { --fond: var(--rouge); --texte: #fff; }
.btn--fantome { --fond: transparent; --texte: #fff; --bord: rgba(255, 255, 255, .55); }
.btn--petit { min-height: 44px; font-size: .9375rem; padding: 0 20px; }
.btn--rond { width: 48px; min-height: 48px; padding: 0; }
/* Survol seulement avec une souris : sur téléphone, l'état « survol » reste collé après un toucher */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); color: var(--texte); }
  .btn--clair:hover { --fond: var(--ivoire); --texte: var(--rouge); }
  .btn--sombre:hover { --fond: var(--grenat); --texte: #fff; --bord: var(--or-clair); }
  .btn--rouge:hover { --fond: var(--grenat); }
  .btn--fantome:hover { --fond: rgba(255, 255, 255, .1); --bord: #fff; }
}
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

/* Bouton Instagram */
.insta {
  display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 24px 8px 8px;
  text-decoration: none; color: var(--encre); border: 1px solid var(--filet-or); border-radius: 999px; background: #fff;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
html[dir="rtl"] .insta { padding: 8px 8px 8px 24px; }
.insta__rond { width: 48px; height: 48px; border-radius: 999px; background: var(--rouge); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; transition: background-color .18s ease, color .18s ease; }
.insta__txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.insta__titre { font-family: var(--f-display); font-size: 1.125rem; }
html[lang="ar"] .insta__titre { font-family: var(--f-ar-display); font-weight: 700; }
.insta__compte { font-size: .9375rem; color: var(--encre-2); }
.insta:hover { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.insta:hover .insta__rond { background: var(--or); color: var(--nuit); }
.insta:hover .insta__compte { color: var(--rose-pale); }
.insta--blanc { background: var(--ivoire); border-color: var(--or); }
.insta--blanc:hover { background: var(--grenat); border-color: var(--or); color: #fff; }

/* Bascule de langue */
.langue { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(241, 213, 140, .45); background: rgba(42, 10, 13, .35); }
.langue a, .langue span { min-height: 40px; min-width: 48px; padding: 0 12px; border-radius: 999px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: .875rem; letter-spacing: .06em; color: var(--ivoire); }
.langue [aria-current="true"] { background: var(--or-plein); color: var(--nuit); }
.langue .ar-lien { font-family: var(--f-ar-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; }
.langue a:hover { background: rgba(241, 213, 140, .16); color: #fff; }

/* Vitrine : enseigne grenat à lettres d'or, filet d'or, photo encadrée */
.vitrine { background: var(--nuit); overflow: hidden; display: flex; flex-direction: column; border: 1.5px solid var(--or); }
.vitrine__enseigne { background: var(--grenat); color: var(--or-clair); padding: 13px 20px 11px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--or); }
.vitrine__nom { font-family: var(--f-display); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; }
html[lang="ar"] .vitrine__nom { font-family: var(--f-ar-display); font-weight: 700; }
.vitrine__prix { font-size: 1rem; white-space: nowrap; color: var(--ivoire); }
.vitrine picture { position: relative; }
.vitrine picture::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(241, 213, 140, .55); pointer-events: none; }
.vitrine img { width: 100%; height: 100%; object-fit: cover; }
a.vitrine { color: inherit; transition: border-color .2s ease; }
a.vitrine:hover { border-color: var(--or-clair); }
a.vitrine:hover .vitrine__enseigne { background: var(--rouge); }

/* Statut d'ouverture : petite étoile à huit branches */
.statut { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; }
.statut::before { content: ""; width: 10px; height: 10px; background: currentColor; clip-path: polygon(50% 0, 63% 21%, 85% 15%, 79% 37%, 100% 50%, 79% 63%, 85% 85%, 63% 79%, 50% 100%, 37% 79%, 15% 85%, 21% 63%, 0 50%, 21% 37%, 15% 15%, 37% 21%); }
.statut[hidden] { display: none; }

/* =====================================================================
   SITE : page d'accueil
   ===================================================================== */
.site-header { color: #fff; position: absolute; inset-inline: 0; top: 0; z-index: 20; }
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 12px; }
.site-nav__logo { display: block; flex: none; }
.site-nav__logo img { width: 62px; height: auto; filter: drop-shadow(0 3px 6px rgba(42, 10, 13, .45)); }
.site-nav__liens { display: none; gap: clamp(20px, 2.6vw, 38px); font-size: 1.0625rem; letter-spacing: .02em; }
html[lang="ar"] .site-nav__liens { font-weight: 500; letter-spacing: 0; }
.site-nav__liens a { color: var(--ivoire); text-decoration: none; padding: 12px 0; }
.site-nav__liens a:hover { color: var(--or-clair); box-shadow: inset 0 -1.5px 0 var(--or); }
.site-nav__actions { display: flex; align-items: center; gap: 10px; }
.site-nav__tel { display: none; }
.site-nav__insta { display: none; }
.menu-btn { width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(241, 213, 140, .6); background: rgba(42, 10, 13, .35); color: var(--or-clair); display: flex; align-items: center; justify-content: center; }
.menu-mobile { background: var(--nuit); color: #fff; padding: 12px var(--gouttiere) 28px; border-top: 2px solid var(--or); }
.menu-mobile[hidden] { display: none; }
.menu-mobile ul { display: flex; flex-direction: column; }
.menu-mobile a.grand { display: block; color: var(--ivoire); text-decoration: none; font-size: 2.125rem; line-height: 1.35; padding: 4px 0; }
.menu-mobile a.grand:hover { color: var(--or-clair); }
.menu-mobile .tels { border-top: 1px solid var(--nuit-2); margin-top: 16px; padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.menu-mobile .tels a { color: var(--or-clair); min-height: 44px; display: flex; align-items: center; }
@media (min-width: 960px) {
  .site-nav__liens { display: flex; }
  .site-nav__tel, .site-nav__insta { display: inline-flex; }
  .menu-btn, .menu-mobile { display: none !important; }
  .site-nav__logo img { width: 76px; }
}
@media (max-width: 959px) { .site-nav__carte { display: inline-flex; padding: 0 16px; } .site-nav__actions { gap: 8px; } .site-nav__logo img { width: 54px; } }
@media (min-width: 960px) { .site-nav__carte { display: none; } }

/* Héros : le nom en or, comme sur l'enseigne */
.hero { color: var(--ivoire); overflow: hidden; padding-top: 92px; }
@media (min-width: 960px) { .hero { padding-top: 112px; } }
.hero__grille { display: flex; flex-wrap: wrap; gap: 36px clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(20px, 3vw, 40px) clamp(44px, 5vw, 72px); }
.hero__texte { flex: 5 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero__nom { margin: 0; line-height: 0; }
.hero__nom svg { width: min(100%, 560px); height: auto; overflow: visible; filter: drop-shadow(0 4px 0 rgba(42, 10, 13, .45)); }
.hero__nom .eclat { animation: eclat 2.2s .5s cubic-bezier(.3, .1, .3, 1) both; }
@keyframes eclat { from { transform: translateX(-120px); } to { transform: translateX(640px); } }
@media (prefers-reduced-motion: reduce) { .hero__nom .eclat { animation: none; opacity: 0; } }
.hero__nom-latin { font-family: var(--f-display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--or-clair); letter-spacing: .32em; line-height: 1; margin-top: -4px; }
html[lang="ar"] .hero__nom-latin { font-family: var(--f-ar-display); letter-spacing: 0; font-weight: 500; }
.hero__accroche { font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1.08; color: #fff; text-wrap: balance; }
html[lang="ar"] .hero__accroche { line-height: 1.45; }
.hero__intro { font-size: 1.1875rem; max-width: 30em; color: var(--rose-pale); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__horaires { display: flex; align-items: center; gap: 12px; color: var(--or-clair); }
.hero__horaires::before { content: ""; width: 34px; height: 1.5px; background: var(--or); }
@media (max-width: 520px) { .hero__actions .btn { flex: 1 1 100%; } }
.hero__photo { flex: 4 1 340px; min-width: 0; max-width: 470px; margin: 0 auto; position: relative; }
.hero__photo img { object-position: 50% 60%; }
.hero__legende { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; background: var(--nuit); color: var(--or-clair); font-size: .9375rem; padding: 6px 16px; border: 1px solid var(--or); }

/* Sections */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--ivoire { background: var(--ivoire); color: var(--encre); }
.section--nuit { color: var(--ivoire); }
.section--rouge { color: #fff; }
.section--grenat { background: var(--grenat); color: var(--ivoire); }
.titre-2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.05; text-wrap: balance; }
.section--ivoire .titre-2 { color: var(--rouge); }
.section--nuit .titre-2, .section--grenat .titre-2 { color: var(--or-clair); }
html[lang="ar"] .titre-2 { line-height: 1.45; }
.deux-col { display: flex; flex-wrap: wrap; gap: 44px clamp(40px, 6vw, 96px); align-items: start; }
.deux-col > * { min-width: 0; }
.col-6 { flex: 6 1 420px; } .col-5 { flex: 5 1 360px; } .col-7 { flex: 7 1 480px; } .col-4 { flex: 4 1 300px; }
.texte-long { font-size: 1.1875rem; line-height: 1.7; color: var(--encre); max-width: 34em; }
html[lang="ar"] .texte-long { font-size: 1.0625rem; line-height: 2; }
.section--rouge .texte-long, .section--grenat .texte-long { color: var(--rose-pale); }
.legende { font-size: .875rem; color: var(--encre-2); margin-top: 12px; }
.section--grenat .legende { color: var(--filet-or); }
.cadre-or { position: relative; padding: 9px; border: 1.5px solid var(--or); }
.cadre-or picture { position: relative; }
.cadre-or picture::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(241, 213, 140, .6); pointer-events: none; }

.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 32px; border-top: 2px solid var(--or); margin-top: 32px; }
.faits div { padding: 16px 0; border-bottom: 1px solid var(--filet); }
.faits dt { font-size: .9375rem; color: var(--encre-2); }
.faits dd { margin-top: 4px; font-family: var(--f-display); font-size: 1.25rem; color: var(--grenat); }
html[lang="ar"] .faits dd { font-family: var(--f-ar-display); font-weight: 500; font-size: 1.1875rem; }

.classiques__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; }
.classiques__grille { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.classiques__grille .vitrine { flex: 5 1 340px; min-width: 0; text-decoration: none; }
.classiques__grille .vitrine.large { flex: 7 1 480px; }
.classiques__grille .vitrine img { height: clamp(240px, 28vw, 420px); }
@media (min-width: 900px) { .classiques__grille .decale { margin-top: clamp(0px, 7vw, 104px); } .classiques__grille .decale-2 { margin-top: clamp(0px, 3vw, 48px); } }

.vendredi__titre { font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: 1; color: #fff; text-wrap: balance; }
html[lang="ar"] .vendredi__titre { line-height: 1.4; }
.lignes-prix { display: flex; flex-direction: column; border-top: 2px solid var(--or); max-width: 30em; margin-top: 28px; }
.lignes-prix div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(241, 213, 140, .45); font-size: 1.1875rem; }
.lignes-prix .num { font-size: 1.625rem; color: var(--or-clair); }
.vendredi .vitrine { max-width: 460px; }
.vendredi .vitrine img { height: clamp(320px, 34vw, 500px); }

.terrasse__ar { font-family: var(--f-ar-display); font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.3; color: var(--or); margin-bottom: 16px; }
.terrasse img { width: 100%; height: clamp(280px, 36vw, 520px); object-fit: cover; }

.infos__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 36px; border-top: 2px solid var(--or); padding-top: 32px; margin-top: 44px; }
.infos__grille h3 { font-family: var(--f-display); font-size: 1.375rem; color: var(--rouge); margin-bottom: 8px; }
html[lang="ar"] .infos__grille h3 { font-family: var(--f-ar-display); font-weight: 700; }
.infos__grille p { font-size: 1.125rem; }
.infos__grille a.lien-fort { display: inline-flex; min-height: 44px; align-items: center; font-family: var(--f-display); font-size: 1.25rem; }
.infos__grille a.tel { color: var(--encre); }
.carte-g { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }
.carte-g__cadre { position: relative; overflow: hidden; border: 1.5px solid var(--or); outline: 1px solid var(--filet-or); outline-offset: 5px; background: var(--ivoire-2); height: clamp(300px, 34vw, 440px); margin: 6px; }
.carte-g__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.carte-g__pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.bloc-insta { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: #fff; padding: 26px 30px; border: 1px solid var(--filet); border-top: 2px solid var(--or); }
.bloc-insta p { font-size: 1.125rem; max-width: 32em; }

.site-footer { color: var(--ivoire); }
.site-footer .wrap { padding-block: 56px 36px; }
.site-footer a { color: var(--ivoire); }
.site-footer a:hover { color: var(--or-clair); }
.site-footer__haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.site-footer__marque { display: flex; align-items: center; gap: 22px; }
.site-footer__marque img { width: 96px; flex: none; }
.site-footer__liens { display: flex; flex-wrap: wrap; gap: 8px 64px; font-size: 1.0625rem; }
.site-footer__liens ul { display: flex; flex-direction: column; gap: 4px; }
.site-footer__liens a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__bas { border-top: 1px solid var(--nuit-2); margin-top: 36px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .875rem; color: var(--filet-or); }
.site-footer__adresse { color: var(--rose-pale); max-width: 16em; }

/* =====================================================================
   CARTE : menu digital
   ===================================================================== */
.carte-page { background: var(--nuit); }
.carte-tete { color: #fff; }
.carte-tete__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gouttiere); }
.carte-tete__barre img { width: 54px; } @media (min-width: 1024px) { .carte-tete__barre img { width: 68px; } } .carte-tete__barre img { filter: drop-shadow(0 3px 6px rgba(42, 10, 13, .45)); }
.carte-tete__corps { padding: 2px var(--gouttiere) 26px; display: flex; flex-direction: column; gap: 10px; }
.carte-tete h1 { font-size: clamp(3.25rem, 14vw, 5.25rem); line-height: 1; color: var(--or-clair); }
html[lang="ar"] .carte-tete h1 { line-height: 1.35; }
.carte-tete__infos { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9375rem; color: var(--rose-pale); }
.carte-tete__infos a { color: #fff; }
.carte-tete .statut { color: var(--or-clair); }

.carte-nav { position: sticky; top: 0; z-index: 30; color: #fff; border-bottom: 1.5px solid var(--or); }
.carte-nav__rangee { display: flex; align-items: center; gap: 8px; padding: 10px 0 10px var(--gouttiere); }
html[dir="rtl"] .carte-nav__rangee { padding: 10px var(--gouttiere) 10px 0; }
.carte-nav__puces { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline-end: var(--gouttiere); flex: 1; min-width: 0; }
.carte-nav__puces::-webkit-scrollbar { display: none; }
.puce {
  flex: none; scroll-snap-align: start; min-height: 40px; padding: 0 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; color: var(--ivoire); text-decoration: none; font-size: .9375rem; letter-spacing: .02em; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(241, 213, 140, .32); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
html[lang="ar"] .puce { letter-spacing: 0; font-weight: 500; }
.puce:hover { color: var(--or-clair); box-shadow: inset 0 0 0 1px var(--or-clair); }
.puce[aria-current="true"] { background: var(--or-plein); color: var(--nuit); box-shadow: none; }

.carte-corps { background: var(--ivoire); }
.carte-corps__inner { max-width: 760px; margin-inline: auto; padding: 22px var(--gouttiere) 40px; }

.cat { padding-top: 30px; scroll-margin-top: 76px; }
.cat[hidden] { display: none; }
.cat__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--or); box-shadow: 0 4px 0 -2.5px var(--filet-or); }
.cat__tete h2 { font-size: 2.125rem; line-height: 1.1; color: var(--rouge); }
html[lang="ar"] .cat__tete h2 { line-height: 1.5; }
.cat__sous { font-size: 1.125rem; color: var(--or-texte); }
.cat__sous.ar { color: var(--or-texte); }
.cat .vitrine { margin-bottom: 6px; }
.cat .vitrine__enseigne { padding: 11px 16px 9px; }
.cat .vitrine__enseigne h2 { font-size: 1.875rem; line-height: 1.1; color: var(--or-clair); }
html[lang="ar"] .cat .vitrine__enseigne h2 { line-height: 1.5; }
.cat .vitrine .cat__sous { color: var(--ivoire); }
.cat .vitrine__photo { position: relative; }
.cat .vitrine__photo::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(241, 213, 140, .6); pointer-events: none; }
/* Même cadrage 2:1 à toutes les largeurs, pour que le recadrage reste prévisible */
.cat .vitrine img { height: auto; aspect-ratio: 2 / 1; }
#burgers .vitrine img { object-position: 50% 58%; }
.cat__note { font-size: .9375rem; color: var(--encre-2); margin-top: 10px; }

.plats { display: flex; flex-direction: column; }
.plat { padding: 14px 0; border-bottom: 1px solid var(--filet); display: flex; flex-direction: column; gap: 4px; }
.plat:last-child { border-bottom: 0; }
.plat[hidden] { display: none; }
.plat__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.plat__nom { font-family: var(--f-display); font-size: 1.1875rem; line-height: 1.3; color: var(--encre); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[lang="ar"] .plat__nom { font-family: var(--f-ar-text); font-weight: 600; font-size: 1.0625rem; line-height: 1.6; }
.plat__prix { font-size: 1.3125rem; color: var(--rouge); white-space: nowrap; }
.plat__prix small { font-size: .72em; color: var(--encre-2); }
.plat__desc { font-size: .9375rem; line-height: 1.55; color: var(--encre-2); max-width: 40em; }
html[lang="ar"] .plat__desc { line-height: 1.85; font-size: .9375rem; }
.badge-maison { font-family: var(--f-text); font-size: .75rem; letter-spacing: .06em; color: var(--nuit); background: var(--or-plein); padding: 2px 10px 1px; line-height: 1.5; border-radius: 999px; }
html[lang="ar"] .badge-maison { font-family: var(--f-ar-text); font-weight: 700; letter-spacing: 0; }
.plats--doubles .plat__ligne { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem 4.4rem; gap: 6px; }
.plats--doubles .plat__prix { text-align: end; font-size: 1.25rem; }
.entetes-doubles { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem 4.4rem; gap: 6px; padding-top: 10px; font-size: .8125rem; color: var(--or-texte); text-align: end; line-height: 1.3; }
.plat--extra .plat__nom { font-family: var(--f-text); font-size: 1.0625rem; }
html[lang="ar"] .plat--extra .plat__nom { font-family: var(--f-ar-text); font-weight: 500; }

.carte-fin { color: #fff; }
.carte-fin__inner { max-width: 760px; margin-inline: auto; padding: 40px var(--gouttiere) 44px; display: flex; flex-direction: column; gap: 22px; }
.carte-fin__logo { display: flex; justify-content: center; }
.carte-fin__logo img { width: 92px; }
.carte-fin h2 { font-size: clamp(2.75rem, 11vw, 4.25rem); line-height: 1.05; text-align: center; color: var(--or-clair); }
html[lang="ar"] .carte-fin h2 { line-height: 1.4; }
.carte-fin__ar { text-align: center; font-family: var(--f-ar-display); font-size: 1.625rem; font-weight: 500; color: var(--or); margin-top: -10px; }
.commande { background: var(--grenat); border: 1.5px solid var(--or); outline: 1px solid rgba(241, 213, 140, .45); outline-offset: -7px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.commande__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.commande__tete h3 { font-family: var(--f-display); font-size: 1.375rem; color: var(--or-clair); }
html[lang="ar"] .commande__tete h3 { font-family: var(--f-ar-display); font-weight: 700; }
.badge-livraison { font-size: .875rem; color: var(--nuit); background: var(--or-plein); padding: 3px 12px; border-radius: 999px; }
.carte-fin .btn { width: 100%; }
.carte-fin__pied { text-align: center; font-size: .875rem; line-height: 1.7; color: var(--rose-pale); }

/* Sommaire (ordinateur) */
.sommaire { display: none; }
@media (min-width: 1024px) {
  .carte-layout { max-width: 1280px; margin: 0 auto; padding: 28px 28px 40px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; }
  .carte-nav { display: none; }
  .sommaire { display: block; position: sticky; top: 20px; background: var(--ivoire); padding: 26px 26px 20px; max-height: calc(100vh - 40px); overflow: auto; border: 1.5px solid var(--or); outline: 1px solid rgba(241, 213, 140, .35); outline-offset: 5px; margin: 6px; }
  .sommaire h2 { font-size: 2rem; color: var(--rouge); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--or); }
  .sommaire ol a { display: flex; align-items: baseline; gap: 8px; min-height: 34px; padding-top: 6px; color: var(--encre); text-decoration: none; font-family: var(--f-display); font-size: 1.0625rem; }
  html[lang="ar"] .sommaire ol a { font-family: var(--f-ar-text); font-weight: 500; font-size: .96875rem; }
  .sommaire ol a .points { flex: 1; border-bottom: 1.5px dotted var(--filet-or); transform: translateY(-4px); }
  .sommaire ol a .num { white-space: nowrap; font-family: var(--f-text); }
  .sommaire ol a .it { font-size: .9375rem; color: var(--encre-2); }
  .sommaire ol a .ar { font-size: 1rem; color: var(--encre-2); }
  .sommaire ol a:hover, .sommaire ol a[aria-current="true"] { color: var(--rouge); }
  .carte-corps { border: 1.5px solid var(--or); }
  .carte-corps__inner { max-width: none; padding: 34px 48px 48px; }
  .cat { scroll-margin-top: 20px; }
  .carte-fin { overflow: hidden; margin-top: 22px; border: 1.5px solid var(--or); }
  .carte-tete__barre, .carte-tete__corps { max-width: 1280px; margin-inline: auto; }
}

/* Intro vidéo (mobile) */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--nuit) center / cover no-repeat; color: #fff; display: none; }
.intro-active .intro { display: block; }
.intro-active body { overflow: hidden; }
.intro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro__haut { position: absolute; inset-inline: 0; top: 0; height: 140px; background: linear-gradient(180deg, rgba(42, 10, 13, .65), rgba(42, 10, 13, 0)); }
.intro__bas { position: absolute; inset-inline: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, rgba(42, 10, 13, 0), rgba(42, 10, 13, .6) 38%, rgba(42, 10, 13, .94)); }
.intro__barre { position: absolute; inset-inline: 14px; top: max(14px, env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 12px; }
.intro__segments { display: flex; gap: 5px; }
.intro__segments span { flex: 1; height: 3px; background: rgba(241, 213, 140, .3); overflow: hidden; }
.intro__segments i { display: block; height: 100%; width: 0; background: var(--or-clair); }
.intro__ligne { display: flex; justify-content: space-between; align-items: center; }
.intro__libelle { font-size: .9375rem; color: var(--or-clair); }
.intro__passer { min-height: 44px; padding: 0 16px 0 18px; border: 1px solid rgba(241, 213, 140, .6); border-radius: 999px; background: rgba(42, 10, 13, .75); color: #fff; font-size: .9375rem; display: inline-flex; align-items: center; gap: 8px; }
html[lang="ar"] html[lang="ar"] .intro__contenu { position: absolute; inset-inline: 20px; bottom: max(26px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.intro__contenu img { width: 86px; }
.intro__accroche { font-size: 3rem; line-height: 1.05; color: #fff; }
html[lang="ar"] .intro__accroche { line-height: 1.45; }
.intro__mentions { display: flex; justify-content: space-between; gap: 12px; font-size: .84375rem; color: var(--filet-or); }
/* Intro de la page de commande : texte en haut, bas dégagé pour laisser voir le sac */
.intro--commande .intro__haut { height: 34%; background: linear-gradient(180deg, rgba(42, 10, 13, .82), rgba(42, 10, 13, .5) 55%, rgba(42, 10, 13, 0)); }
.intro--commande .intro__bas { height: 24%; background: linear-gradient(180deg, rgba(42, 10, 13, 0), rgba(42, 10, 13, .62) 45%, rgba(42, 10, 13, .9)); }
.intro__accroche--haut { position: absolute; inset-inline: 20px; top: calc(max(14px, env(safe-area-inset-top)) + 74px); margin: 0; font-size: 2.375rem; text-wrap: balance; }
.intro--commande .intro__contenu { gap: 12px; }

/* Page 404 */
.erreur { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px var(--gouttiere); color: #fff; }
.erreur img { margin-inline: auto; }
.erreur h1 { font-size: clamp(2.75rem, 10vw, 5rem); line-height: 1.05; color: var(--or-clair); }
.erreur p { font-size: 1.125rem; margin: 18px 0 28px; }

/* ---------- Commande en ligne (/commander/) ---------- */
.carte-tete__sous { max-width: 32em; font-size: 1.0625rem; line-height: 1.55; color: var(--rose-pale); }
.plat__bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.plat__bas .plat__desc { flex: 1; min-width: 0; }
.ajout { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--rouge); color: #fff; font-size: .9375rem; letter-spacing: .03em; cursor: pointer; transition: background-color .15s ease; }
html[lang="ar"] .ajout { font-weight: 600; letter-spacing: 0; padding: 0 14px 0 18px; }
.ajout:hover { background: var(--grenat); }
.ajout:active { transform: translateY(1px); }
.ajout-prix { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 40px; width: 100%; padding: 0 6px; border: 0; border-radius: 999px; background: #fff; color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); font-size: 1.0625rem; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ajout-prix svg { width: 14px; height: 14px; flex: none; }
.ajout-prix:hover { background: var(--rouge); color: #fff; }
.commande-page .plats--doubles .plat__ligne { align-items: center; }
.est-ajoute { animation: ajout-pop .35s ease; }
@keyframes ajout-pop { 45% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .est-ajoute { animation: none; } }

body.a-panier { padding-bottom: 92px; }
html.panier-ouvert { overflow: hidden; }
.panier { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; }
.panier[hidden], .panier__corps[hidden], .panier__fond[hidden], .panier__apres[hidden], .panier__erreur[hidden], .champ-cmd[hidden] { display: none; }
.panier__fond { position: fixed; inset: 0; background: rgba(42, 10, 13, .55); }
.panier__feuille { position: relative; max-width: 560px; margin: 0 auto; background: var(--ivoire); color: var(--encre); border-top: 2px solid var(--or); box-shadow: 0 -4px 0 -1px var(--grenat), 0 -5px 0 -1px var(--or-fonce), 0 -14px 32px rgba(42, 10, 13, .35); max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); }
.panier__barre { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 70px; padding: 10px max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px)); border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.panier__icone { position: relative; flex: none; display: flex; color: var(--grenat); }
.panier__nb { position: absolute; top: -9px; inset-inline-end: -11px; min-width: 23px; height: 23px; padding: 0 6px; background: var(--rouge); color: #fff; font-size: .8125rem; display: grid; place-items: center; border-radius: 999px; }
.panier__titre { flex: 1; min-width: 0; font-size: 1.5rem; line-height: 1.2; color: var(--rouge); }
.panier__total-barre { font-size: 1.25rem; color: var(--rouge); white-space: nowrap; }
.panier__chevron { display: flex; transition: transform .2s ease; color: var(--or-fonce); }
.panier__barre[aria-expanded="true"] .panier__chevron { transform: rotate(180deg); }
.panier__barre[aria-expanded="true"] .panier__total-barre { visibility: hidden; }
.panier__corps { overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.panier__lignes { display: flex; flex-direction: column; }
.ligne-cmd { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.ligne-cmd__img { grid-row: 1 / span 2; width: 52px; height: 52px; object-fit: cover; background: var(--grenat); border-radius: 10px; }
.ligne-cmd__nom { font-family: var(--f-display); font-size: 1.0625rem; line-height: 1.3; }
html[lang="ar"] .ligne-cmd__nom { font-family: var(--f-ar-text); font-weight: 600; }
.ligne-cmd__var { display: block; font-family: var(--f-text); font-size: .875rem; color: var(--encre-2); }
.ligne-cmd__var:empty { display: none; }
.ligne-cmd__suppr { justify-self: end; width: 40px; height: 40px; border: 0; background: transparent; color: var(--encre); display: grid; place-items: center; cursor: pointer; }
.ligne-cmd__suppr:hover { color: var(--rouge); }
.ligne-cmd__bas { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--filet-or); border-radius: 999px; }
.stepper button { width: 42px; height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--encre); display: grid; place-items: center; cursor: pointer; }
.stepper button:hover { color: var(--rouge); background: var(--ivoire-2); }
.stepper output { min-width: 30px; text-align: center; font-family: var(--f-display); font-size: 1.0625rem; }
.ligne-cmd__prix { font-size: 1.1875rem; color: var(--rouge); white-space: nowrap; }
.panier__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.125rem; border-top: 2px solid var(--or); padding-top: 12px; }
.panier__total .num { font-size: 1.75rem; color: var(--rouge); }
.panier__form { display: flex; flex-direction: column; gap: 14px; }
.panier__modes { border: 0; padding: 0; margin: 0; min-width: 0; }
.panier__modes legend { font-size: .9375rem; margin-bottom: 8px; padding: 0; color: var(--encre-2); }
.segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--filet-or); border-radius: 999px; }
.segments label { position: relative; }
.segments input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segments span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 6px; border-radius: 999px; font-size: .9375rem; text-align: center; line-height: 1.15; }
html[lang="ar"] .segments span { font-weight: 600; }
.segments input:checked + span { background: var(--grenat); color: var(--or-clair); }
.segments input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }
.champ-cmd { display: flex; flex-direction: column; gap: 6px; font-size: .9375rem; color: var(--encre-2); }
.champ-cmd input, .champ-cmd textarea { font: inherit; font-size: 1rem; line-height: 1.4; padding: 12px 14px; min-height: 48px; border: 1px solid var(--filet-or); border-radius: 12px; background: #fff; color: var(--encre); resize: vertical; width: 100%; }
.champ-cmd input::placeholder, .champ-cmd textarea::placeholder { color: var(--encre-2); opacity: .75; }
.champ-cmd input:focus, .champ-cmd textarea:focus { outline: 3px solid var(--or); outline-offset: 1px; border-color: var(--grenat); }
.champ-cmd [aria-invalid="true"] { border-color: var(--rouge); }
.panier__erreur { color: var(--rouge); }
.panier__envoyer { width: 100%; }
.panier__info { font-size: .875rem; line-height: 1.5; color: var(--encre-2); text-align: center; }
.panier__info [dir="ltr"] { white-space: nowrap; display: inline-block; }
.panier__apres { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; background: #fff; border: 1.5px solid var(--filet-or); font-size: .9375rem; line-height: 1.5; }
@media (min-width: 1024px) {
  .panier { inset-inline: auto 28px; width: 460px; }
  body.a-panier { padding-bottom: 0; }
  .commande-page .carte-fin { margin-bottom: 96px; }
}

@media print {
  .carte-nav, .intro, .sommaire, .carte-fin .btn, .insta, .panier, .ajout, .ajout-prix, .frise { display: none !important; }
  body, .carte-page { background: #fff; }
  .carte-tete { background: #fff !important; color: #000; }
}


/* =====================================================================
   v2.1 : ornements marocains et confort de lecture
   ===================================================================== */
/* Zellige : étoiles à huit branches et croix, très discret */
.zellige { background-color: var(--rouge); background-image: url(../media/brand/zellige.svg); background-size: 56px; }
.zellige--sombre { background-color: var(--nuit); background-image: url(../media/brand/zellige-sombre.svg); background-size: 56px; }

/* Arc outrepassé brisé : la porte marocaine encadre les photos portrait */
.arche { position: relative; aspect-ratio: 4 / 5; width: 100%; }
.arche__photo { position: absolute; inset: 0; background: var(--nuit);
  -webkit-mask: url(../media/brand/arche.svg) center / 100% 100% no-repeat; mask: url(../media/brand/arche.svg) center / 100% 100% no-repeat; }
.arche__photo picture, .arche__photo img { width: 100%; height: 100%; }
.arche__photo img { object-fit: cover; }
.arche__trait { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arche__trait path { fill: none; vector-effect: non-scaling-stroke; }
.arche__trait .ext { stroke: var(--or); stroke-width: 2.5; }
.arche__trait .int { stroke: rgba(241, 213, 140, .8); stroke-width: 1; }
.vendredi__arche { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; }
.plaque { position: relative; margin-top: -26px; z-index: 1; display: inline-flex; align-items: baseline; gap: 12px; padding: 10px 26px; background: var(--grenat); border: 1.5px solid var(--or); outline: 1px solid rgba(241, 213, 140, .5); outline-offset: -6px; color: var(--or-clair); }
.plaque__nom { font-family: var(--f-display); font-size: 1.375rem; }
html[lang="ar"] .plaque__nom { font-family: var(--f-ar-display); font-weight: 700; }
.plaque .ar { color: var(--ivoire); }

/* Coins d'or sur les cadres photo */
.coins { position: relative; }
.coins::before, .vitrine picture::before, .cat .vitrine__photo::before {
  content: ""; position: absolute; inset: 4px; z-index: 2; pointer-events: none;
  background: url(../media/brand/coin-hg.svg) top left / 30px no-repeat, url(../media/brand/coin-hd.svg) top right / 30px no-repeat,
    url(../media/brand/coin-bg.svg) bottom left / 30px no-repeat, url(../media/brand/coin-bd.svg) bottom right / 30px no-repeat; }
.cadre-or.coins::before { inset: 13px; }

/* Séparateur : filet, étoile, filet */
.orne { display: block; width: 150px; height: 15px; margin-top: 18px; background: url(../media/brand/orne.svg) center / contain no-repeat; }
.section--ivoire .orne { background-image: url(../media/brand/orne-fonce.svg); }
.orne--centre { margin-inline: auto; margin-top: -6px; }
.classiques__tete .orne { margin-top: 14px; }

/* Rempart de kasbah : créneaux à gradins posés sur la frise */
.rempart { height: 26px; background: var(--ivoire) url(../media/brand/merlons.svg) repeat-x center bottom / 44px 26px; margin-bottom: -1px; position: relative; z-index: 1; }

/* Nom des catégories : petite étoile d'or */
.cat .vitrine__enseigne h2::before, .cat__tete h2::before {
  content: ""; display: inline-block; width: .52em; height: .52em; margin-inline-end: .4em; vertical-align: .1em; background: var(--or);
  clip-path: polygon(50% 0, 63% 21%, 85% 15%, 79% 37%, 100% 50%, 79% 63%, 85% 85%, 63% 79%, 50% 100%, 37% 79%, 15% 85%, 21% 63%, 0 50%, 21% 37%, 15% 15%, 37% 21%); }
.cat__tete h2::before { background: var(--or-fonce); }

/* Pointillés d'or entre le plat et son prix : la ligne se lit d'un coup d'œil */
.plat__ligne { align-items: baseline; }
.plat__points { flex: 1 1 24px; min-width: 18px; align-self: flex-end; margin-bottom: .42em; border-bottom: 2px dotted var(--filet-or); }
.plat__nom { flex: 0 1 auto; }
.plats--doubles .plat__points { display: none; }

/* Rail des catégories : fondu au bord pour montrer qu'il défile */
.carte-nav__rangee { position: relative; }
.carte-nav__rangee::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 40px; pointer-events: none; background: linear-gradient(to left, var(--nuit) 20%, rgba(42, 10, 13, 0)); }
html[dir="rtl"] .carte-nav__rangee::after { background: linear-gradient(to right, var(--nuit) 20%, rgba(42, 10, 13, 0)); }

/* Retour en haut de la carte */
.haut-page { position: fixed; z-index: 35; inset-inline-end: max(16px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; display: grid; place-items: center; color: var(--nuit); background: var(--or-plein); text-decoration: none; border-radius: 999px; box-shadow: 0 6px 18px rgba(42, 10, 13, .35); transition: transform .2s ease; }
.haut-page[hidden] { display: none; }
.haut-page:hover { transform: translateY(-2px); }
body.a-panier .haut-page { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* page de commande : les boutons Ajouter sont à droite, le retour en haut passe à gauche */
.commande-page .haut-page { inset-inline-end: auto; inset-inline-start: max(16px, env(safe-area-inset-left, 0px)); }
@media (min-width: 1024px) { body.a-panier .haut-page { bottom: 28px; } }

/* Ordinateur : la fin de carte prolonge la carte, sous la même rangée d'or */
@media (min-width: 1024px) { .carte-fin { margin-top: 0; border-top: 0; } .carte-corps { border-bottom: 0; } }

/* =====================================================================
   Ouverture : le logo se dessine, puis les battants s'ouvrent
   ===================================================================== */
.ouverture { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; overflow: hidden; }
.ouverture-active .ouverture { display: grid; }
.ouverture-active body { overflow: hidden; }
.ouverture__porte { position: absolute; top: 0; bottom: 0; width: 50.2%; background: var(--nuit) url(../media/brand/zellige-sombre.svg) center / 56px; }
.ouverture__porte--g { left: 0; box-shadow: inset -2px 0 0 var(--or), inset -8px 0 0 var(--nuit), inset -9px 0 0 rgba(241, 213, 140, .5); animation: porte-g .7s 2.55s cubic-bezier(.6, 0, .3, 1) forwards; }
.ouverture__porte--d { right: 0; box-shadow: inset 2px 0 0 var(--or), inset 8px 0 0 var(--nuit), inset 9px 0 0 rgba(241, 213, 140, .5); animation: porte-d .7s 2.55s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes porte-g { to { transform: translateX(-101%); } }
@keyframes porte-d { to { transform: translateX(101%); } }
.ouverture__logo { position: relative; z-index: 1; width: min(62vw, 300px); animation: lo-sortie .45s 2.35s ease-in forwards; }
.ouverture__logo .lo { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
@keyframes lo-sortie { to { opacity: 0; transform: scale(1.08); } }
.lo-trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lo-trace .9s .1s cubic-bezier(.5, 0, .3, 1) forwards; }
.lo-trace--int { animation-delay: .25s; }
@keyframes lo-trace { to { stroke-dashoffset: 0; } }
.lo-bande, .lo-rim, .lo-champ, .lo-nom, .lo-rest, .lo-etoile { opacity: 0; }
.lo-bande { animation: lo-apparait .6s .75s ease-out forwards; }
.lo-rim { animation: lo-apparait .5s .85s ease-out forwards; }
.lo-champ { transform: scale(.9); animation: lo-champ .55s .95s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes lo-apparait { to { opacity: 1; } }
@keyframes lo-champ { to { opacity: 1; transform: scale(1); } }
/* le nom arabe s'écrit de droite à gauche */
.lo-nom { clip-path: inset(0 0 0 100%); animation: lo-nom .65s 1.25s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes lo-nom { from { opacity: 1; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.lo-eclat { transform: translateX(-80px); animation: lo-eclat .9s 1.75s ease-in-out forwards; }
@keyframes lo-eclat { to { transform: translateX(720px); } }
.lo-rest { transform: translateY(14px); animation: lo-rest .5s 1.75s ease-out forwards; }
@keyframes lo-rest { to { opacity: 1; transform: translateY(0); } }
.lo-etoile { transform: rotate(-135deg) scale(.2); animation: lo-etoile .6s 1.85s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes lo-etoile { to { opacity: 1; transform: rotate(0) scale(1); } }
.ouverture__passer { position: absolute; z-index: 2; inset-inline-end: max(14px, env(safe-area-inset-right, 0px)); top: max(14px, env(safe-area-inset-top, 0px)); min-height: 44px; padding: 0 16px 0 18px; border: 1px solid rgba(241, 213, 140, .6); border-radius: 999px; background: rgba(42, 10, 13, .75); color: #fff; font-size: .9375rem; display: inline-flex; align-items: center; gap: 8px; animation: lo-sortie .3s 2.4s ease-in forwards; }
/* Passer : tout se referme vite */
.ouverture--vite .ouverture__logo, .ouverture--vite .ouverture__passer { animation: lo-sortie .2s ease-in forwards; }
.ouverture--vite .ouverture__porte--g { animation: porte-g .35s .1s ease-in forwards; }
.ouverture--vite .ouverture__porte--d { animation: porte-d .35s .1s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .ouverture { display: none !important; } }