/*
 * Menu client : design system commun à tous les thèmes (THEMES.md §4, §8, §11).
 * Fondations de la Phase 0 : variables par défaut, échelles, formes, direction, accessibilité.
 * Les variantes de composants (§4.7) s'ajoutent ici en Phase 2. Budget : ≤ 18 Ko compressés.
 * Règles : écrit pour 360 px, @media en min-width uniquement, propriétés logiques uniquement (RTL).
 */

/* ---------- Variables par défaut (valeurs de repli ; l'AppearanceResolver les remplace par établissement) ---------- */
:root {
  --c-primary: #9A3B1B;
  --c-secondary: #3E2A1E;
  --c-accent: #C8962E;
  --c-text: #2B1D14;
  --c-bg: #FBF6EE;
  --c-surface: #FFFFFF;
  --c-price: #9A3B1B;
  --c-on-primary: #FFFFFF;
  --c-on-accent: #111111;
  --c-text-muted: #6B5B50;
  --c-border: #E9E1D6;
  --c-overlay: rgb(0 0 0 / 0.45);
  --c-focus: var(--c-text);

  --font-heading: 'Cairo', system-ui, sans-serif;
  --font-body: 'Cairo', system-ui, sans-serif;

  /* Échelle typographique, moyenne (m) : les classes .ts-* et .ps-* la remplacent (THEMES.md §4.3). */
  --fs-venue: 1.75rem;
  --fs-section: 1.375rem;
  --fs-item: 1.0625rem;
  --fs-price: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-body: 1.5;
  --lh-heading: 1.25;

  /* Densité : 4, 8, 12, 16, 24, 32, 48, 64 px × multiplicateur (comfortable = 1). */
  --density: 1;
  --space-1: calc(4px * var(--density));
  --space-2: calc(8px * var(--density));
  --space-3: calc(12px * var(--density));
  --space-4: calc(16px * var(--density));
  --space-5: calc(24px * var(--density));
  --space-6: calc(32px * var(--density));
  --space-7: calc(48px * var(--density));
  --space-8: calc(64px * var(--density));

  --radius-card: 8px;
  --radius-image: 8px;
  --radius-button: 8px;
  --radius-badge: 4px;

  --shadow-card: none;
  --shadow-sheet: 0 -8px 32px rgb(0 0 0 / 0.25);

  --nav-height: 56px;
  --touch: 48px;
}

/* Tailles des titres et des prix (paliers uniquement) */
.ts-s { --fs-venue: 1.5rem; --fs-section: 1.25rem; --fs-item: 1rem; }
.ts-m { --fs-venue: 1.75rem; --fs-section: 1.375rem; --fs-item: 1.0625rem; }
.ts-l { --fs-venue: 2rem; --fs-section: 1.625rem; --fs-item: 1.125rem; }
.ps-s { --fs-price: 1rem; }
.ps-m { --fs-price: 1.125rem; }
.ps-l { --fs-price: 1.25rem; }

/* Densité */
.d-compact { --density: 0.75; }
.d-comfortable { --density: 1; }
.d-airy { --density: 1.35; }

/* Coins : les boutons, badges et pastilles passent à 999 px avec « pill », les cartes sont plafonnées à 24 px et les images à 16 px */
.r-none { --radius-card: 0; --radius-image: 0; --radius-button: 0; --radius-badge: 0; }
.r-sm { --radius-card: 4px; --radius-image: 4px; --radius-button: 4px; --radius-badge: 2px; }
.r-md { --radius-card: 8px; --radius-image: 8px; --radius-button: 8px; --radius-badge: 4px; }
.r-lg { --radius-card: 16px; --radius-image: 16px; --radius-button: 16px; --radius-badge: 8px; }
.r-pill { --radius-card: 24px; --radius-image: 16px; --radius-button: 999px; --radius-badge: 999px; }

/* Ombres : en palette sombre, remplacées par une bordure */
.sh-none { --shadow-card: none; }
.sh-soft { --shadow-card: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.06); }
.sh-strong { --shadow-card: 0 2px 6px rgb(0 0 0 / 0.12), 0 10px 24px rgb(0 0 0 / 0.12); }
.is-dark { color-scheme: dark; }
.is-dark.sh-soft, .is-dark.sh-strong { --shadow-card: 0 0 0 1px var(--c-border); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-block-size: 100dvh;
}

h1, h2, h3, h4, p, ul, ol, figure { margin-block: 0; }
ul, ol { padding-inline-start: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--lh-heading); }
a { color: var(--c-primary); }
img, picture, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
button { font: inherit; color: inherit; }

/* Mise en page : colonne centrée, 720 px au plus */
.menu { margin-inline: auto; max-inline-size: 720px; min-block-size: 100dvh; background: var(--c-bg); }
.slot { padding-inline: var(--space-4); }

[hidden] { display: none !important; }

/* Focus toujours visible (2 px) */
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Accès rapide au contenu et textes réservés aux lecteurs d'écran */
.skip { position: absolute; inset-block-start: 0; inset-inline-start: 0; padding: var(--space-3); background: var(--c-primary); color: var(--c-on-primary); transform: translateY(-200%); z-index: 100; }
.skip:focus { transform: none; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Texte arabe et RTL ---------- */
:lang(ar) { letter-spacing: 0; text-transform: none; --lh-body: 1.65; --lh-heading: 1.45; }
/* Les textes saisis par le restaurateur portent dir="auto" (noms français dans un menu arabe) */
[dir="auto"] { unicode-bidi: plaintext; }
/* Icônes directionnelles inversées en RTL */
[dir="rtl"] .i-dir { transform: scaleX(-1); }

/* ---------- Icônes (sprite) ---------- */
.i { inline-size: 1.25em; block-size: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; }
.i--lg { inline-size: 1.5rem; block-size: 1.5rem; }

/* ---------- Éléments communs ---------- */
.price { font-weight: 700; color: var(--c-price); font-size: var(--fs-price); font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--c-text-muted); font-size: var(--fs-small); }

.sold-out-label { font-size: var(--fs-small); font-weight: 700; color: var(--c-text-muted); }



.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 24px; padding-inline: var(--space-2);
  border-radius: var(--radius-badge); background: var(--c-accent); color: var(--c-on-accent);
  font-size: var(--fs-small); font-weight: 600;
}

/* Images : proportions fixes, jamais de déformation */
.photo { inline-size: 100%; object-fit: cover; border-radius: var(--radius-image); background: var(--c-border); }

/* Zones tactiles ≥ 48 px */
.tap { min-block-size: var(--touch); min-inline-size: var(--touch); display: inline-flex; align-items: center; justify-content: center; }

/* ================= Composants du moteur et variantes (THEMES.md §4.7) ================= */
.menu { padding-block-end: 80px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--touch); padding-inline: var(--space-4); border: 0; border-radius: var(--radius-button); background: var(--c-primary); color: var(--c-on-primary); font-weight: 600; text-decoration: none; cursor: pointer; }
.btn--small { background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-border); }
.error-page { padding: var(--space-8) var(--space-4); text-align: center; display: flex; flex-direction: column; gap: var(--space-3); }

/* Annonce, pastilles d'information */
.announcement { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--c-accent); color: var(--c-on-accent); font-weight: 600; font-size: var(--fs-small); }
.info-bar { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); overflow-x: auto; scrollbar-width: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--touch); padding-inline: var(--space-3); border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); color: var(--c-text); text-decoration: none; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.pill--status.is-open::before, .pill--status.is-closed::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c-text-muted); }
.pill--status.is-open::before { background: #1E7A46; }

/* Couverture et logo */
.hero { position: relative; overflow: hidden; background: var(--c-border); }
.hero picture, .hero-img { inline-size: 100%; block-size: 100%; }
.hero-img { object-fit: cover; }
.hero--empty { background: var(--c-border); background: color-mix(in srgb, var(--c-primary) 16%, var(--c-bg)); }
.hero--cover_full { block-size: clamp(240px, 46vh, 340px); }
.hero--cover_short, .hero--logo_on_cover { block-size: 180px; }
.logo { --logo: 72px; inline-size: var(--logo); block-size: var(--logo); flex-shrink: 0; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-image); background: var(--c-surface); }
.logo--sm { --logo: 56px; }
.logo--lg { --logo: 96px; }
.logo picture, .logo-img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.logo--letter { background: var(--c-primary); color: var(--c-on-primary); font-family: var(--font-heading); font-weight: 800; font-size: calc(var(--logo) * 0.45); }
.header { padding: var(--space-4) var(--space-4) var(--space-3); }
.venue-name { font-size: var(--fs-venue); }
.slogan { color: var(--c-text-muted); }
.header--centered_logo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.header--centered_logo .logo { border-radius: 50%; }
.hero--logo_on_cover + .header .logo { position: relative; z-index: 1; margin-block-start: calc(var(--logo) / -1.4); border: 4px solid var(--c-bg); box-shadow: var(--shadow-card); }
.header--logo_left, .header--compact { display: flex; align-items: center; gap: var(--space-3); }
.header-text { min-inline-size: 0; }
.header--compact .venue-name { font-size: calc(var(--fs-venue) * 0.9); }

/* Navigation des catégories (collante) */
.cat-nav { position: sticky; inset-block-start: 0; z-index: 10; background: var(--c-bg); border-block-end: 1px solid var(--c-border); }
.cat-nav ul { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: var(--space-2) var(--space-4); }
.cat { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--touch); padding-inline: var(--space-3); color: var(--c-text); text-decoration: none; white-space: nowrap; border-radius: var(--radius-button); }
.cat-nav--chips .cat { border: 1px solid var(--c-border); background: var(--c-surface); }
.cat-nav--chips .cat[aria-current], .cat-nav--chips_icons .cat[aria-current] .cat-icon { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.cat-nav--chips_icons .cat { flex-direction: column; gap: 6px; padding: var(--space-1); font-size: var(--fs-small); font-weight: 700; min-inline-size: 64px; }
.cat-icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--c-surface); border: 1px solid var(--c-border); }
.cat-icon .i { inline-size: 26px; block-size: 26px; }
.cat-nav--tabs .cat, .cat-nav--underline .cat { border-radius: 0; border-block-end: 3px solid transparent; }
.cat-nav--tabs .cat[aria-current], .cat-nav--underline .cat[aria-current] { border-block-end-color: var(--c-primary); color: var(--c-primary); font-weight: 600; }
.cat-nav--underline ul { justify-content: center; }
.cat-nav--underline .cat[aria-current] { color: var(--c-accent); border-block-end-color: var(--c-accent); }

/* Sections et en-têtes de section */
.section { scroll-margin-block-start: 84px; padding-block-end: var(--space-4); }
.section-header { padding: var(--space-5) var(--space-4) var(--space-2); }
.section-header h2 { font-size: var(--fs-section); color: var(--c-secondary); }
.section-desc { color: var(--c-text-muted); font-size: var(--fs-small); }
.section-header--ornament { text-align: center; }
.ornament { position: relative; display: block; inline-size: 140px; block-size: 12px; margin: var(--space-2) auto; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 50% / 54px 1px no-repeat, linear-gradient(var(--c-accent), var(--c-accent)) 100% 50% / 54px 1px no-repeat; }
.ornament::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 7px; block-size: 7px; background: var(--c-accent); transform: rotate(45deg); }
.section-header--bold_bar { margin-block-start: var(--space-4); background: var(--c-secondary); color: var(--c-bg); padding-block: var(--space-3); }
.section-header--bold_bar h2 { color: inherit; text-transform: uppercase; }
.section-header--minimal_caps { text-align: center; padding-block-start: var(--space-6); }
.section-header--minimal_caps h2 { font-size: var(--fs-small); font-weight: 400; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-accent); }

/* Cartes produit */
.cards { padding-inline: var(--space-4); display: flex; flex-direction: column; }
.cards--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.cards--card_large { gap: var(--space-4); }
.card { position: relative; }
.card-open { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: start; cursor: pointer; overflow-wrap: break-word; }
.card-open::after { content: ""; position: absolute; inset: 0; }
.card-name { font-size: var(--fs-item); }
.card-desc { color: var(--c-text-muted); font-size: var(--fs-small); margin-block-start: var(--space-1); }
.o-desc-two_lines .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o-desc-hidden .card-desc { display: none; }
.o-noimg .card-photo, .o-noimg .card-media .photo { display: none; }
.card-photo, .card-media { overflow: hidden; }
.card-photo picture, .card-media picture { block-size: 100%; }
.card-photo .photo, .card-media .photo { block-size: 100%; }
.o-shape-square .card-photo { aspect-ratio: 1; }
.o-shape-rounded .card-photo { border-radius: var(--radius-image); }
.o-shape-circle .card-photo { border-radius: 50%; aspect-ratio: 1; }
.o-shape-landscape .card-photo { aspect-ratio: 4 / 3; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block-start: var(--space-1); }
.badge .i { inline-size: 1em; block-size: 1em; }
.card.is-sold-out .card-photo, .card.is-sold-out .card-media .photo { opacity: 0.55; filter: grayscale(1); }
.card.is-sold-out .card-open, .card.is-sold-out .price { color: var(--c-text-muted); }

.card--row, .card--row_thumb, .card--minimal { padding-block: var(--space-3); border-block-end: 1px dotted var(--c-border); }
.card--row_thumb { display: flex; gap: var(--space-3); align-items: flex-start; }
.card--row_thumb .card-photo { flex: 0 0 72px; inline-size: 72px; block-size: 72px; border-radius: var(--radius-image); }
.card--row_thumb .card-body { flex: 1; min-inline-size: 0; }
.card-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.card-line .card-name { flex: 0 1 auto; min-inline-size: 0; }
.leader { flex: 1; min-inline-size: 12px; border-block-end: 2px dotted var(--c-border); transform: translateY(-4px); }
.card--grid { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); background: var(--c-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card--grid .card-photo { aspect-ratio: 1; border-radius: var(--radius-image); }
.card--grid .card-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.card--card_large { background: var(--c-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--c-border); }
.card-price { position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-button); background: var(--c-surface); box-shadow: var(--shadow-card); }
.o-noimg .card-media { display: none; }
.o-noimg .card--card_large .card-price { position: static; display: block; padding: var(--space-3) var(--space-3) 0; box-shadow: none; background: none; }
.card--card_large .card-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.card--minimal { text-align: center; padding-block: var(--space-4); }
.card--minimal .card-open { text-align: center; }
.card--minimal .badges { justify-content: center; }
.js .js-variants, .js .js-allergens { display: none; }
.variants li { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-1); }
.allergens-title { font-weight: 700; font-size: var(--fs-small); }
.allergens ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-1); }
.allergens li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); }

/* Publicités (plan gratuit) */
.ad { position: relative; margin: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-surface); overflow: hidden; }
.ad-label { position: absolute; inset-block-start: var(--space-1); inset-inline-start: var(--space-2); z-index: 1; padding: 0 var(--space-2); border-radius: var(--radius-badge); background: var(--c-overlay); color: #fff; font-size: 0.75rem; }
.ad-link, .ad-img { display: block; inline-size: 100%; }
.ad-frame { display: block; inline-size: 100%; block-size: 120px; border: 0; }

/* Informations pratiques, avis, pied de page */
.info { padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-3); }
.info-card { padding: var(--space-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--space-2); }
.info--list .info-card { background: none; border: 0; border-block-start: 1px solid var(--c-border); border-radius: 0; box-shadow: none; padding-inline: 0; }
.info-title { display: flex; align-items: center; gap: var(--space-2); font-size: 1.0625rem; }
.hours-row { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: 2px; }
.hours-row dt, .hours-row dd { margin: 0; }
.hours-row.is-today { font-weight: 700; color: var(--c-primary); }
.wifi { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.icon-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.icon-list li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); }
.social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.social a { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border: 1px solid var(--c-border); border-radius: 50%; color: var(--c-text); }
.social .i { inline-size: 24px; block-size: 24px; }
.review { padding: var(--space-4); text-align: center; }
.footer { padding: var(--space-5) var(--space-4); text-align: center; font-size: var(--fs-small); color: var(--c-text-muted); }
.footer a { color: inherit; }

/* Barre du bas (zone du pouce) */
.bottom-bar { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; max-inline-size: 720px; margin-inline: auto; padding: var(--space-2) var(--space-4); background: var(--c-bg); border-block-start: 1px solid var(--c-border); }
.lang { position: relative; }
.lang summary, .lang--single { list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch); padding-inline: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius-button); background: var(--c-surface); font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; inset-block-end: calc(100% + var(--space-2)); inset-inline-start: 0; min-inline-size: 160px; padding: var(--space-1); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); }
.lang li a { display: flex; align-items: center; min-block-size: var(--touch); padding-inline: var(--space-3); color: var(--c-text); text-decoration: none; border-radius: var(--radius-badge); }
.lang li a[aria-current] { font-weight: 700; color: var(--c-primary); }
.to-top { border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-surface); color: var(--c-text); cursor: pointer; }

/* Fiche produit (bottom sheet) */
.sheet { inline-size: 100%; max-inline-size: 720px; max-block-size: 90dvh; margin: auto auto 0; padding: 0; border: 0; border-start-start-radius: 24px; border-start-end-radius: 24px; background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-sheet); overflow-y: auto; }
.sheet::backdrop { background: var(--c-overlay); }
.sheet-grip { inline-size: 40px; block-size: 4px; margin: var(--space-2) auto; border-radius: 2px; background: var(--c-border); }
.sheet-close { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); z-index: 1; border: 0; border-radius: 50%; background: var(--c-surface); color: var(--c-text); cursor: pointer; }
.sheet-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-6); }
.sheet-img { inline-size: 100%; max-block-size: 46dvh; object-fit: cover; border-radius: var(--radius-image); }
.sheet-title { font-size: var(--fs-section); }
.sheet .js-variants, .sheet .js-allergens { display: block; }
.sheet .price { font-size: var(--fs-price); }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Tablette et ordinateur ---------- */
@media (min-width: 600px) {
  .slot { padding-inline: var(--space-5); }
  .cards--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero--cover_full { block-size: 360px; }
  .sheet { margin-block: auto; border-radius: 24px; }
}