/* ==========================================================================
   Continental Santa Pola — style.css
   Desktop (1440px, référence handoff). Le responsive/mobile (390px) et le
   menu hamburger sont volontairement traités en Phase 3 — voir README.md.
   Toutes les couleurs/tailles/espacements référencent tokens.css.
   ========================================================================== */

/* --- Reset minimal ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-warm-gray);
  background: var(--color-warm-white);
  -webkit-font-smoothing: antialiased;
}
img, picture { max-width: 100%; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; }

/* Phase 4 — Step 0 : la règle `overflow-x: hidden` (posée sur `body` en
   Phase 3, après avoir déjà retiré `html` — voir QA.md Phase 3) a été
   entièrement supprimée ici. Aucun débordement horizontal réel n'a été
   mesuré à aucune largeur testée (320 → 1440px), avec ou sans cette règle :
   elle ne corrigeait donc rien de réel. Elle n'est PAS réintroduite, y
   compris comme "sécurité" — un vrai débordement doit être corrigé à la
   source (grid/flex/max-width d'un composant précis), jamais masqué. Voir
   QA.md §"Step 0 — hygiène technique" pour le re-test complet 320–1440px. */

/* --- Accessibilité : lien d'évitement + focus visible -------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--color-warm-black);
  color: var(--color-warm-white);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--transition-fast);
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus {
  top: 12px;
}

/* V3 — BORDEAUX GRAPHITE : anneau de focus en bordeaux (7.83:1 sur ivoire —
   largement ≥3:1 requis pour un composant UI) sur les fonds clairs, qui
   couvrent la quasi-totalité du site. Le bordeaux tombe à 1.77:1 sur le
   graphite (La Brasa, footer) — override ciblé en champagne (6.67:1 sur
   graphite, 5.06:1 sur bordeaux profond) sur ces deux seules sections, voir
   règle dédiée plus bas dans ce fichier. */
:focus-visible {
  outline: 2px solid var(--color-brand-bordeaux);
  outline-offset: 2px;
  border-radius: 4px;
}
.brasa :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-brand-champagne);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Décalage des ancres pour ne pas passer sous le header sticky.
   .menu-category (BRASA-MENU-LINK-01) : catégories de la page carte,
   ciblées par ancre depuis "La Brasa" (#carnes-brasa) — même logique que
   les ancres de la homepage, pour que le titre de catégorie ne soit jamais
   masqué par le header sticky après navigation. */
#inicio, #carta, #brasa, #galeria, #ubicacion, .menu-category {
  scroll-margin-top: var(--header-height-desktop);
}

/* --- Typo utilitaires ----------------------------------------------------- */
/* V3 — BORDEAUX GRAPHITE : eyebrows en bordeaux sur fonds clairs (identité,
   §11 du brief V3 — inclut désormais le hero, voir §10). .eyebrow--on-dark
   (La Brasa, fond désormais graphite) passe en champagne : le bordeaux tombe
   à 1.77:1 sur le graphite, illisible — champagne = 6.67:1, AA. */
.eyebrow {
  font: 600 var(--text-eyebrow) var(--font-mono-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-brand-bordeaux);
  margin: 0;
}
.eyebrow--on-dark { color: var(--color-brand-champagne); }

.section__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h2-desktop);
  color: var(--color-warm-black);
}
.section__title--on-dark { color: var(--color-warm-white); }
.section__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-warm-gray);
}
.section__text--on-dark { color: rgba(254, 251, 248, .75); }

/* V3 — BORDEAUX GRAPHITE : filet/séparateur en champagne, très discret
   (§16 du brief V3 — Especialidades, Galería, jamais dans le hero). */
.rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--color-brand-champagne);
}

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-warm-black);
  font-weight: 600;
  transition: color var(--transition-fast);
}
/* V3 — BORDEAUX GRAPHITE : .link-underline sert notamment au téléphone/
   adresse (hero, Información práctica, footer carte) — §10/§20 du brief V3
   : "Téléphone/adresse → Graphite, ne pas recolorer en bordeaux."
   Hover en graphite doux (simple nuance, pas de changement de couleur de
   marque). --accent (variante non utilisée actuellement dans les templates)
   reste en bordeaux, cohérent avec son nom si elle sert un jour ailleurs. */
.link-underline:hover { color: var(--color-brand-graphite-soft); }
.link-underline--accent { color: var(--color-brand-bordeaux); }

.placeholder-label {
  font: var(--text-eyebrow) var(--font-mono-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
}

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--text-button) var(--font-body);
  border-radius: var(--radius-sm);
  padding: 16px 30px;
  min-height: 44px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  /* Brand Alignment — variante A validée : fond brand-dark / texte warm-white
     (15.12:1, très large marge). Remplace le rouge braise comme CTA principal. */
  background: var(--color-brand-dark);
  color: var(--color-warm-white);
}
.btn--primary:hover:not(:disabled) {
  /* V3 — BORDEAUX GRAPHITE : nuance graphite doux au survol (déjà défini
     pour cet usage, aucun nouveau hex) — le CTA reste dans la famille
     graphite (ACTION), jamais bordeaux (IDENTITÉ). */
  background: var(--color-brand-graphite-soft);
}
/* État "Reservar mesa" tant que RESERVATION_URL n'est pas renseignée
   (voir reserveButton() dans page.mjs et README.md § Réservation).
   L'opacité réduite ICI signale visuellement l'état disabled natif du
   <button> — ce n'est pas la couleur finale du bouton. Dès que
   RESERVATION_URL sera définie, l'élément redevient un <a> sans cette
   règle et s'affiche en --color-brand-dark à pleine intensité, comme les
   boutons "Ver la carta"/"Llamar" adjacents. */
.btn--primary:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.btn--secondary {
  background: transparent;
  color: var(--color-warm-black);
  border: 1.5px solid var(--color-border-strong);
}
.btn--secondary:hover {
  border-color: var(--color-warm-black);
  background: color-mix(in srgb, var(--color-warm-black) 5%, transparent);
}

.btn--outline-dark {
  background: transparent;
  color: var(--color-warm-white);
  border: 1.5px solid rgba(255, 255, 255, .3);
  padding: 13px 24px;
}
.btn--outline-dark:hover {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .06);
}

.btn--compact { padding: 9px 14px; font-size: 12.5px; }
.btn--footer { padding: 14px 26px; }

/* --- Sélecteur de langue --------------------------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-warm-gray);
}
.lang-switch__item { text-decoration: none; }
.lang-switch__item--active { color: var(--color-warm-black); font-weight: 600; }
/* Pas d'opacity ici : la distinction actif/inactif vient déjà de la couleur
   (voir --color-footer-muted en contexte sombre) — une opacity supplémentaire
   ferait chuter le contraste sous 4.5:1 sur fond --color-warm-black. */
.lang-switch__item--pending { cursor: default; }
.lang-switch__sep { color: inherit; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height-desktop);
  background: var(--color-warm-white);
  border-bottom: 1px solid var(--color-border);
}
.site-header--scrolled { box-shadow: var(--shadow-card); }

.site-header__inner {
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-section-x-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__brand-nav { display: flex; align-items: center; gap: 44px; }
.site-header__actions { display: flex; align-items: center; gap: 24px; }

/* --- Lockup de marque (Brand Alignment) : "CONTINENTAL" + "BAR · RESTAURANTE" ---
   Remplace l'ancien wordmark simple .brand. Tailles desktop par défaut ;
   overrides mobile/tablette (≤1023px), panneau mobile et footer plus bas. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}
/* V3 — BORDEAUX GRAPHITE : "CONTINENTAL" en bordeaux sur fonds clairs (§8 du
   brief V3 — lien direct avec la carte physique historique). Typo/taille/
   tracking/composition inchangés. Vérifié 7.83:1 (ivoire) / 8.30:1 (blanc
   chaud) — largement AA. */
.brand-lockup__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-brand-bordeaux);
}
.brand-lockup__tagline {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* "BAR · RESTAURANTE" reste discret, en graphite (§8/§9 du brief V3). */
  color: var(--color-brand-graphite);
  margin-top: 2px;
}
/* Variante fond sombre (footer, désormais bordeaux profond) : nom en ivoire
   (inchangé, 11.16:1), tagline en champagne discret — 5.06:1 sur
   --color-brand-bordeaux-dark, AA (§21 du brief V3). */
.brand-lockup--on-dark .brand-lockup__name { color: var(--color-warm-white); }
.brand-lockup--on-dark .brand-lockup__tagline { color: var(--color-brand-champagne); }
/* Footer : légèrement plus grand, cohérent avec l'ancien wordmark 26px. */
.site-footer .brand-lockup__name { font-size: 19px; }
.site-footer .brand-lockup__tagline { font-size: 10px; }
/* Panneau mobile : cible mobile explicite, indépendante du viewport exact. */
.mobile-menu-panel__head .brand-lockup__name { font-size: 15px; letter-spacing: .03em; }
.mobile-menu-panel__head .brand-lockup__tagline { font-size: 8px; letter-spacing: .08em; margin-top: 3px; }

.main-nav__link-list { display: flex; gap: 32px; }
.main-nav__link {
  font-size: var(--text-nav);
  color: var(--color-warm-gray);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.main-nav__link:hover { color: var(--color-warm-black); }
/* V3 — BORDEAUX GRAPHITE : soulignement actif en bordeaux (§9 du brief V3 :
   "active/hover → bordeaux lorsque pertinent et accessible"). */
.main-nav__link--active { color: var(--color-warm-black); border-bottom: 2px solid var(--color-brand-bordeaux); }
/* VENUE-BAND-01 : 6ᵉ lien (« Événements ») — libellés et bouton du header
   sur une seule ligne, et espacements resserrés entre 1024 et 1279px (sans
   cela, « Comment venir » / « La braise » / « Réserver une table » passaient
   sur deux lignes à 1024px). Tailles de police et structure inchangées. */
.main-nav__link,
.site-header__actions .btn { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__inner { padding-left: 40px; padding-right: 40px; }
  .site-header__brand-nav { gap: 32px; }
  .main-nav__link-list { gap: 20px; }
  .site-header__actions { gap: 20px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 560px;
}
.hero__content {
  padding: 72px var(--space-section-x-desktop);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__content .eyebrow { font-size: 12px; letter-spacing: .14em; margin-bottom: 16px; }
.hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h1-desktop);
  line-height: 1.14;
  color: var(--color-warm-black);
}
.hero__text {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--color-warm-gray);
  margin-top: 20px;
  max-width: 460px;
}
.hero__actions { display: flex; gap: 16px; margin-top: 32px; }
.hero__contact { display: flex; gap: 28px; margin-top: 28px; font-size: 14.5px; }

/* V3 — BORDEAUX GRAPHITE : filet décoratif en champagne (§16 du brief V3).
   Photo/structure/dimensions du hero inchangées — seule cette bordure de
   4px change de couleur. */
.hero__media {
  position: relative;
  background: var(--color-sand);
  border-top: 4px solid var(--color-brand-champagne);
}
.hero__media-inner,
.hero__media-inner--placeholder {
  width: 100%;
  height: 100%;
}
.hero__media-inner.hero__media-inner--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
}
.hero__media picture,
.hero__media > .hero__media-inner {
  height: 100%;
}
/* HERO-POLLO-01 : object-position biaisé vers le bas — la partie haute de
   la photo source (conduit métallique / carrelage, sans intérêt) doit être
   recadrée en priorité ; poulets + braises + grille restent visibles.
   Voir override mobile (≤767px) plus bas, cadrage différent (bande plus
   fine, la même valeur laisserait remonter la zone vide en haut). */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; }

/* ==========================================================================
   Layout générique de section
   ========================================================================== */
.section { padding: var(--space-section-y-desktop) var(--space-section-x-desktop); }
.section--alt { background: var(--color-light-clay); }
.section__head--rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
}

/* ==========================================================================
   Sobre Continental (about)
   ========================================================================== */
.about {
  padding: 56px var(--space-section-x-desktop);
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 56px;
  align-items: center;
  background: var(--color-warm-white);
}
.about__title { font-size: 27px; margin-bottom: 14px; max-width: 420px; }
.about__text-body { max-width: 400px; }
.about__media { position: relative; }
.about__media-inner { height: 260px; background: var(--color-sand); }
.about__media-inner--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
}
.about__media img { width: 100%; height: 260px; object-fit: cover; border-radius: 0; }
/* V3 — BORDEAUX GRAPHITE : petit accent décoratif en champagne (§16 du
   brief V3), pas une photo. */
.about__media-accent {
  position: absolute;
  bottom: -14px;
  left: -14px;
  width: 56px;
  height: 56px;
  background: var(--color-brand-champagne);
}

/* ==========================================================================
   Especialidades
   ========================================================================== */
.specialties { padding: 60px var(--space-section-x-desktop); }
/* HOME-REORDER-01 : titre ajouté sous le surtitre (même espacement que
   .menu-preview__head). Taille h2 standard (--text-h2-desktop / -mobile). */
.specialties__head .eyebrow { margin-bottom: 10px; }
.specialties__title { margin: 0; }
@media (max-width: 767px) {
  .specialties__title { font-size: var(--text-h2-mobile); }
}
.specialties__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-card-gap-desktop);
}
.card {
  background: var(--color-warm-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.card__media-inner { height: 140px; background: var(--color-sand); }
.card__media-inner--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
}
.card__media img { width: 100%; height: 140px; object-fit: cover; }
.card__body { padding: 22px 22px 24px; }
.card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3-desktop);
  color: var(--color-warm-black);
  margin-bottom: 6px;
}
.card__desc { font-size: 13.5px; line-height: 1.5; color: var(--color-warm-gray); margin-bottom: 12px; }
/* V3 — BORDEAUX GRAPHITE : "Ver la carta →" (Especialidades), lien éditorial
   secondaire — §15 du brief V3. */
.card__link { font-size: 13px; font-weight: 600; color: var(--color-brand-bordeaux); text-decoration: none; }
.card__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Vista previa de la carta (MENU-PAGE-01) — aperçu texte, plus de photos/
   placeholders ici : voir menu-teaser-card. La carte complète vit sur sa
   propre page (/carta/, /fr/carte/, /en/menu/) — voir plus bas "Página carta
   completa".
   ========================================================================== */
.menu-preview { padding: 64px var(--space-section-x-desktop); background: var(--color-warm-white); }
.menu-preview__head { margin-bottom: 36px; }
.menu-preview__head .eyebrow { margin-bottom: 10px; }

.menu-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-card-gap-desktop);
  margin-bottom: 32px;
}
.menu-teaser-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 22px 20px;
}
.menu-teaser-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-warm-black);
  margin: 0 0 8px;
}
.menu-teaser-card__desc { font-size: 13.5px; line-height: 1.55; color: var(--color-warm-gray); margin: 0; }
/* V3 — BORDEAUX GRAPHITE : prix en bordeaux (§12 du brief V3, "tous les prix
   du menu" — inclut l'aperçu "La carta" de la home). */
.menu-teaser-card__price {
  font: 600 12px var(--font-mono-label);
  color: var(--color-brand-bordeaux);
  margin: 12px 0 0;
}
.menu-preview__cta { display: inline-flex; }

/* ==========================================================================
   La brasa
   ========================================================================== */
.brasa {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: var(--color-warm-black);
  min-height: 420px;
}
.brasa__media { background: var(--color-sand); display: flex; align-items: center; justify-content: center; padding: 60px; }
.brasa__media picture, .brasa__media-inner { width: 100%; height: 100%; }
.brasa__media img { width: 100%; height: 100%; object-fit: cover; }
.brasa__content { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
/* V3 — BORDEAUX GRAPHITE : fond de section désormais graphite (via
   --color-warm-black, voir tokens.css) — contraste volontaire avec les
   photos (§17 du brief V3). Photo/structure/texte/CTA inchangés, seules les
   couleurs suivent la nouvelle hiérarchie. Le bordeaux tombe à 1.77:1 sur ce
   fond (illisible) : filet et lien passent en champagne (6.67:1, AA). */
.brasa__rule { width: 40px; height: 3px; background: var(--color-brand-champagne); margin-bottom: 20px; }
.brasa__content .eyebrow { margin-bottom: 12px; }
.brasa__content .section__title { font-size: 26px; margin-bottom: 14px; }
.brasa__content .section__text { max-width: 380px; }
/* BRASA-MENU-LINK-01 : CTA secondaire éditorial, même logique que
   .card__link (13px/600/flèche, underline au hover) mais en variante
   "on-dark" — champagne, seul accent lisible sur le nouveau fond graphite. */
.brasa__link {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand-champagne);
  text-decoration: none;
  width: fit-content;
}
.brasa__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Galería (bento asimétrico) — GALLERY-COHERENCE-01
   Grille en placement automatique dense (grid-auto-flow: dense) plutôt que
   des positions nth-child figées : le nombre de cellules peut désormais
   varier (6/8/9/10...) sans toucher au CSS, seule content.gallery.cells
   (dans content/{lang}.json) doit changer. `size` détermine seulement
   l'étendue (span) de la cellule, pas sa position — le navigateur comble
   les vides automatiquement.
   ========================================================================== */
.gallery { padding: 64px var(--space-section-x-desktop); background: var(--color-cream); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
  gap: 12px;
}
.gallery__cell {
  background: var(--color-sand);
  overflow: hidden;
}
.gallery__cell--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  text-align: center;
}
.gallery__cell picture, .gallery__cell-inner { width: 100%; height: 100%; display: block; }
.gallery__cell img { width: 100%; height: 100%; object-fit: cover; }
.gallery__cell--large { grid-column: span 2; grid-row: span 2; }
.gallery__cell--vertical { grid-row: span 2; }

/* ==========================================================================
   Ambiente
   ========================================================================== */
.ambiance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}
.ambiance__content { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.ambiance__content .section__title { font-size: 24px; margin-bottom: 14px; }
.ambiance__content .section__text { margin-bottom: 18px; max-width: 400px; }
.ambiance__tags {
  display: flex;
  gap: 14px;
  font: 600 11px var(--font-mono-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-warm-gray);
}
.ambiance__media { background: var(--color-warm-white); display: flex; align-items: center; justify-content: center; }
.ambiance__media picture, .ambiance__media-inner { width: 100%; height: 100%; }
.ambiance__media img { width: 100%; height: 100%; object-fit: cover; }
.ambiance__media-inner--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  background: var(--color-sand);
}

/* ==========================================================================
   Información práctica + ubicación
   ========================================================================== */
.location {
  padding: 56px var(--space-section-x-desktop);
  background: var(--color-warm-white);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.location__info .eyebrow { margin-bottom: 20px; }
.location__list { display: flex; flex-direction: column; gap: 16px; }
/* V3 — BORDEAUX GRAPHITE : micro-label éditorial en bordeaux (§20 du brief
   V3) — "Dirección" / "Teléfono" / "Horario". */
.location__item dt {
  font: 600 10.5px var(--font-mono-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-brand-bordeaux);
}
.location__item dd { font-size: 15px; color: var(--color-warm-black); margin-top: 4px; }
/* Horaires : 2 lignes compactes (jour(s) fermé + jour(s) ouverts), pas de
   répétition jour par jour. `days` en 600 pour scanner rapidement, le tiret
   cadratin et le point médian viennent directement du contenu (content/*.json). */
.location__hours { display: flex; flex-direction: column; gap: 2px; }
.location__hours-row { margin: 0; }
.location__hours-days { font-weight: 600; }
.location__map {
  height: 200px;
  background: var(--color-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
}
/* MAPS-CAPTURE-01 : capture de carte réelle — même convention picture/img
   que le reste du site (voir mediaBlock()). object-fit: cover + centrage
   par défaut suffisent (vérifié : repère Continental + littoral + port
   restent visibles au ratio desktop comme mobile — voir rapport). */
.location__map picture,
.location__map-inner { width: 100%; height: 100%; display: block; }
.location__map img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Footer + réservation
   ========================================================================== */
/* V3 — BORDEAUX GRAPHITE : footer en bordeaux profond, signature visuelle de
   V3 (§21 du brief). Pas de dégradé, pas de texture, pas de bordure
   décorative — seul le fond change. Voir .brand-lockup--on-dark et
   --color-footer-muted (tokens.css) pour le contraste des textes
   secondaires sur ce nouveau fond. */
.site-footer { background: var(--color-brand-bordeaux-dark); padding: 56px var(--space-section-x-desktop); }

.site-footer__reserve {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__brand-title { display: flex; align-items: center; gap: 28px; }
.site-footer__title { font-size: 24px; }
.site-footer__reserve-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 28px;
}
/* Textes secondaires du footer : --color-footer-muted (#8f827c) sur
   --color-warm-black (#110c0a) = contraste 5.23:1, conforme AA (≥4.5:1
   pour texte normal). Remplace les anciens tons rgba(blanc, alpha) qui
   n'avaient pas été vérifiés au contraste. */
/* FOOTER-NAV-WRAP-01 : passage à la ligne autorisé (à 320 px, les 5 liens FR
   + 4 gaps de 24 px dépassaient la largeur disponible) ; nowrap sur chaque
   lien pour ne jamais couper un intitulé ("Comment venir") en deux. */
.footer-nav__link-list { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-nav__link { font-size: 13px; color: var(--color-footer-muted); text-decoration: none; white-space: nowrap; }
.footer-nav__link:hover { color: var(--color-warm-white); }
.site-footer__contact { font-size: 13px; color: var(--color-footer-muted); }
.site-footer__copyright { font-size: 12px; color: var(--color-footer-muted); }
/* Indicateur staging discret (Phase 5A) — même ton que le copyright,
   juste un contour en label (--radius-pill, réservé aux labels, jamais aux
   boutons) pour le distinguer sans attirer l'attention. Disparaît de lui-
   même en production (ALLOW_INDEXING=true), voir stagingBadge() dans page.mjs. */
.staging-badge {
  font: 600 10.5px var(--font-mono-label);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-footer-muted);
  border: 1px solid var(--color-footer-muted);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.site-footer .lang-switch { color: var(--color-footer-muted); }
.site-footer .lang-switch__item--active { color: var(--color-warm-white); }

.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.site-footer__legal-links, .site-footer__social {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--color-footer-muted);
}
.site-footer__legal-links a { color: inherit; text-decoration: none; }
.site-footer__legal-links a:hover { color: var(--color-warm-white); }
.site-footer__social { gap: 16px; }
/* FOOTER-SOCIAL-01 : même poids visuel que .site-footer__legal-links a
   (taille/couleur héritées de .site-footer__social, même hover). */
.site-footer__social-link { color: inherit; text-decoration: none; }
.site-footer__social-link:hover { color: var(--color-warm-white); }

/* ==========================================================================
   PHASE 3 — Responsive (390 / 768 / 1024 / 1440)
   ==========================================================================
   Principe : les règles ci-dessus (desktop 1440, validées Phase 2) restent
   la valeur par défaut, non modifiée. Tout le responsive vit dans des
   media queries `max-width`, organisées ici par breakpoint croissant.

   Breakpoints retenus (documentés aussi dans QA.md / README.md) :
     - ≤ 1023px : header compact + menu hamburger (voir §8 QA.md — la nav
       complète ne tient pas confortablement sous 1024px avec 5 liens +
       sélecteur de langue + CTA ; testé empiriquement).
     - 768–1023px : palier "tablette" — grilles de cartes à 2 colonnes,
       galerie 3 colonnes, header toujours compact (hérite du palier ci-dessus).
     - ≤ 767px : mobile, calé sur la maquette 390px du handoff.
     - ≤ 359px : repli pour très petits écrans (320px) si une disposition
       en ligne (photo + texte) devient trop étroite.
   ========================================================================== */

/* --- Éléments mobiles : masqués par défaut (desktop), révélés en media query --- */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  padding: 8px;
  color: var(--color-warm-black);
  cursor: pointer;
  border-radius: 4px;
}
.hamburger:hover { background: color-mix(in srgb, var(--color-warm-black) 5%, transparent); }
.hamburger__icon { font-size: 22px; line-height: 1; }

.header-mobile-reserve { display: none; }

.mobile-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--color-warm-white);
  padding: 20px 22px;
  box-shadow: var(--shadow-menu-panel);
  overflow-y: auto;
  box-sizing: border-box;
}
/* Nécessaire : sans cette règle, [hidden] (UA stylesheet, faible priorité)
   pourrait être repris par le display:flex ci-dessus selon l'ordre de
   cascade — on la rend explicite pour garantir l'état fermé. */
.mobile-menu-panel[hidden] { display: none; }

.mobile-menu-panel__head { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-panel__close {
  background: none;
  border: none;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--color-warm-black);
  cursor: pointer;
  border-radius: 4px;
}
.mobile-menu-panel__close:hover { background: color-mix(in srgb, var(--color-warm-black) 5%, transparent); }

.mobile-menu-panel__nav { margin-top: 16px; }
.mobile-menu-panel__link-list { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu-panel__link {
  display: block;
  font-size: 19px;
  color: var(--color-warm-black);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-border);
  min-height: 44px;
  box-sizing: border-box;
}

.mobile-menu-panel__lang { margin-top: 24px; font-size: 15px; }
.mobile-menu-panel__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
  font-size: 14px;
}
.mobile-menu-panel__reserve { margin-top: auto; width: 100%; }

.btn--block { width: 100%; }

/* --- Navigation active : header desktop ET panneau mobile --- */
/* V3 — BORDEAUX GRAPHITE : même logique que .main-nav__link--active plus
   haut (§9 du brief V3). */
.main-nav__link.is-active-nav { color: var(--color-warm-black); border-bottom: 2px solid var(--color-brand-bordeaux); }
.mobile-menu-panel__link.is-active-nav { color: var(--color-brand-bordeaux); border-bottom-color: var(--color-brand-bordeaux); }

/* --- Blocage du scroll pendant que le menu mobile est ouvert --- */
html.menu-open,
html.menu-open body {
  overflow: hidden;
}
html.menu-open body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* ==========================================================================
   ≤ 1023px — header compact (hamburger), commun tablette + mobile
   ========================================================================== */
@media (max-width: 1023px) {
  .site-header { height: var(--header-height-mobile); }
  .site-header__inner {
    padding: 0 20px;
    justify-content: space-between;
  }
  .hamburger { display: inline-flex; }
  .header-mobile-reserve { display: inline-flex; }
  .site-header__brand-nav .main-nav { display: none; }
  .site-header__actions { display: none; }
  /* Lockup mobile/tablette (Brand Alignment §7) : deux lignes conservées,
     tailles réduites. La hauteur du header (--header-height-mobile, 62px)
     reste suffisante avec le flex centré verticalement — pas besoin de la
     porter à 66px, vérifié visuellement à 320/360/390/430/768px. */
  .site-header .brand-lockup__name { font-size: 15px; letter-spacing: .03em; }
  .site-header .brand-lockup__tagline { font-size: 8px; letter-spacing: .08em; margin-top: 3px; }

  #inicio, #carta, #brasa, #galeria, #ubicacion, .menu-category {
    scroll-margin-top: var(--header-height-mobile);
  }
}

/* Un peu plus d'air horizontal à partir de la tablette (même header compact). */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__inner { padding: 0 32px; }
}

/* ==========================================================================
   768–1023px — palier tablette (interpolation mobile ↔ desktop)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .section,
  .hero__content,
  .about,
  .specialties,
  .menu-preview,
  .brasa__content,
  .gallery,
  .ambiance__content,
  .location {
    padding-left: 40px;
    padding-right: 40px;
  }
  .hero { grid-template-columns: 1fr 0.9fr; }

  /* Cartes : layout desktop (image en haut) conservé, grille resserrée à 2
     colonnes plutôt que 3 — évite les colonnes trop étroites pour le texte. */
  .specialties__grid,
  .menu-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Página carta completa : l'override 1 colonne (tablette + mobile,
     ≤1023px) vit dans le bloc "MENU-PAGE-01" en fin de fichier, groupé avec
     le reste de ses règles pour éviter tout conflit d'ordre de cascade. */

  /* Galerie : 3 colonnes, placement automatique dense (voir bloc desktop
     pour le détail — même logique, moins de colonnes). */
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 180px;
  }

  .about { grid-template-columns: 1fr 0.9fr; gap: 32px; }
  .ambiance { grid-template-columns: 1fr 1fr; }
  .location { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ==========================================================================
   ≤ 767px — mobile (référence 390px du handoff)
   ========================================================================== */
@media (max-width: 767px) {
  .site-header__inner { padding: 14px 16px; }

  /* Layout général : une seule colonne, paddings mobiles des tokens. */
  .hero,
  .about,
  .brasa,
  .ambiance {
    display: block;
  }

  /* --- Hero --- */
  .hero__content {
    padding: var(--space-section-y-mobile) var(--space-section-x-mobile);
    order: 2;
  }
  .hero__media {
    order: 1;
    height: 180px;
  }
  /* HERO-POLLO-01 : bande beaucoup plus fine qu'en desktop (180px) — un
     recadrage plus bas (68% au lieu de 80%) garde poulets + braises
     identifiables sans laisser remonter la zone vide du haut de la photo. */
  .hero__media img { object-position: center 68%; }
  .hero__content .eyebrow { font-size: var(--text-eyebrow); margin-bottom: 12px; }
  .hero__title { font-size: var(--text-h1-mobile); line-height: 1.2; }
  .hero__text { font-size: 14px; margin-top: 14px; max-width: none; }
  .hero__actions { flex-direction: column; gap: 12px; margin-top: 22px; }
  .hero__actions .btn { width: 100%; }
  .hero__contact { flex-direction: column; gap: 6px; margin-top: 18px; font-size: 13.5px; }

  /* --- Sobre Continental --- */
  .about {
    padding: var(--space-section-y-mobile) var(--space-section-x-mobile);
  }
  .about__title { font-size: var(--text-h2-mobile); max-width: none; }
  .about__text-body { max-width: none; font-size: 13.5px; }
  .about__media { margin-top: 18px; }
  .about__media-inner { height: 170px; }
  .about__media img { height: 170px; } /* ABOUT-MOBILE-IMG-FIX-01 : la photo suivait encore la hauteur desktop (260px) et débordait de 90px sur la section 02 */
  .about__media-accent { width: 40px; height: 40px; bottom: -10px; left: -10px; }

  /* --- Especialidades : cartes empilées, photo à gauche / contenu à droite --- */
  .specialties { padding: var(--space-section-y-mobile) var(--space-section-x-mobile); }
  .specialties__grid { grid-template-columns: 1fr; gap: var(--space-card-gap-mobile); }
  .card { display: flex; flex-direction: row; align-items: stretch; }
  .card__media { flex: none; width: 110px; }
  .card__media-inner,
  .card__media img { height: 100%; }
  .card__body { padding: 14px 16px; flex: 1; min-width: 0; }
  .card__title { font-size: var(--text-h3-mobile); }
  .card__desc { font-size: 12.5px; }

  /* --- La carta (aperçu homepage) --- */
  .menu-preview { padding: var(--space-section-y-mobile) var(--space-section-x-mobile); }
  .menu-preview__grid { grid-template-columns: 1fr; gap: var(--space-card-gap-mobile); margin-bottom: 24px; }
  .menu-preview__cta { width: 100%; justify-content: center; }

  /* --- La brasa : texte d'abord, image en dessous --- */
  .brasa { padding: 32px var(--space-section-x-mobile); }
  .brasa__content { padding: 0; order: 1; }
  .brasa__media { order: 2; height: 140px; border-radius: var(--radius-sm); margin-top: 18px; padding: 0; }
  .brasa__rule { width: 32px; margin-bottom: 12px; }
  .brasa__content .eyebrow { margin-bottom: 10px; }
  .brasa__content .section__title { font-size: var(--text-h2-mobile); margin-bottom: 8px; }
  .brasa__content .section__text { font-size: 13px; max-width: none; }
  .brasa__link { margin-top: 14px; font-size: 12.5px; }

  /* --- Galería : 2 colonnes, placement automatique dense. La cellule
     "large" (brochette) occupe toute la largeur (span 2) ; "vertical"
     (entrée) garde une cellule plus haute (span 2 lignes) ; le reste
     s'écoule automatiquement. --- */
  .gallery { padding: var(--space-section-y-mobile) var(--space-section-x-mobile); }
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 140px;
    gap: 8px;
  }
  .gallery__cell--large { grid-column: span 2; grid-row: span 2; }
  .gallery__cell--vertical { grid-row: span 2; }

  /* --- Ambiente --- */
  .ambiance { padding: var(--space-section-y-mobile) var(--space-section-x-mobile); }
  .ambiance__content { padding: 0; }
  .ambiance__content .section__title { font-size: var(--text-h2-mobile); }
  .ambiance__content .section__text { font-size: 13px; max-width: none; }
  .ambiance__tags { flex-wrap: wrap; }
  .ambiance__media { margin-top: 16px; height: 260px; } /* AMBIANCE-PHOTO-SWAP-01 : 130 → 260px, verre visible en entier */
  .ambiance__media-inner--placeholder { height: 260px; }

  /* --- Información práctica --- */
  .location {
    padding: var(--space-section-y-mobile) var(--space-section-x-mobile);
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .location__map { height: 150px; margin-bottom: 14px; }
  .location__map-wrap .btn { width: 100%; }

  /* --- Footer : empilé, bouton principal pleine largeur --- */
  .site-footer { padding: 32px var(--space-section-x-mobile); }
  .site-footer__reserve { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 28px; }
  .site-footer__brand-title { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-footer__title { font-size: var(--text-h2-mobile); }
  .site-footer__reserve-actions { flex-direction: column; width: 100%; gap: 10px; }
  .site-footer__reserve-actions .btn { width: 100%; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 20px; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 16px; margin-top: 16px; }
  .site-footer__legal-links, .site-footer__social { flex-wrap: wrap; }
}

/* ==========================================================================
   ≤ 359px — repli très petits écrans (320px)
   ========================================================================== */
@media (max-width: 359px) {
  /* La disposition "photo à gauche / contenu à droite" devient trop étroite
     en dessous de 360px : on repasse en carte verticale (photo au-dessus). */
  .card {
    flex-direction: column;
  }
  .card__media {
    width: 100%;
  }
  .card__media-inner {
    height: 130px;
  }
  .card__media img {
    height: 130px;
  }
}
.site-footer__social-pending { cursor: default; }

/* ==========================================================================
   PHASE 4 — Pages légales (aviso legal / privacidad / cookies)
   Même design system que le reste du site (tokens, header, footer
   inchangés) — une seule colonne, largeur de lecture maîtrisée.
   ========================================================================== */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--space-section-y-desktop);
  padding-bottom: var(--space-section-y-desktop);
}
.legal-page__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h1-desktop);
  color: var(--color-warm-black);
  margin-bottom: 20px;
}
/* Bandeau d'avertissement obligatoire : contenu légal non finalisé. */
/* V3 — BORDEAUX GRAPHITE : dernier filet bronze du site retiré (audit §28
   du brief V3), remplacé par champagne pour rester cohérent. */
.legal-page__notice {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-warm-black);
  background: var(--color-light-clay);
  border-left: 3px solid var(--color-brand-champagne);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 28px;
}
.legal-page__intro {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-warm-gray);
  margin-bottom: 28px;
}
.legal-page__sections {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.legal-section {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-border);
}
.legal-section:last-child { border-bottom: none; }
.legal-section__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3-desktop);
  color: var(--color-warm-black);
  margin-bottom: 6px;
}
.legal-section__value {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-warm-gray);
}
.legal-page__back {
  display: inline-block;
  margin-top: 36px;
}
/* PRIVACY-POLICY-01 : contenu légal riche (paragraphes, listes, identité du
   responsable). Tokens V3 uniquement ; les informations non confirmées
   ([À CONFIRMER…]) ressortent en bordeaux pour ne jamais passer pour des
   faits. */
.legal-page__updated {
  font-size: 13px;
  color: var(--color-warm-gray);
  margin: -12px 0 28px;
}
.legal-section__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-warm-gray);
}
.legal-section__body > * + * { margin-top: 10px; }
.legal-section__body ul { list-style: disc; padding-left: 20px; }
.legal-section__body li + li { margin-top: 6px; }
.legal-section__body a { overflow-wrap: anywhere; }
.legal-facts { display: grid; gap: 8px; margin: 0; }
.legal-facts dt { font-weight: 600; color: var(--color-warm-black); }
.legal-facts dd { margin: 0; }
.legal-placeholder {
  font-weight: 600;
  color: var(--color-brand-bordeaux);
}

@media (max-width: 767px) {
  .legal-page {
    padding-top: var(--space-section-y-mobile);
    padding-bottom: var(--space-section-y-mobile);
    padding-left: var(--space-section-x-mobile);
    padding-right: var(--space-section-x-mobile);
  }
  .legal-page__title { font-size: var(--text-h1-mobile); }
  .legal-section__label { font-size: var(--text-h3-mobile); }
  .legal-section__value, .legal-page__intro, .legal-section__body { font-size: 13.5px; }
}

/* ==========================================================================
   MENU-PAGE-01 — Página carta completa (/carta/, /fr/carte/, /en/menu/)
   Même design system (tokens, header, footer) que le reste du site — même
   logique "desktop d'abord" que les blocs ci-dessus (base = 1440px,
   @media (max-width: …) resserre progressivement). Aucune couleur/police en
   dur ici : tout vient de tokens.css.
   ========================================================================== */
.menu-page {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: var(--space-section-y-desktop);
  padding-bottom: var(--space-section-y-desktop);
}
.menu-page__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h1-desktop);
  color: var(--color-warm-black);
  margin-bottom: 32px;
}

/* 2 colonnes par défaut (desktop) — voir §6 du brief ("possibilité de 2
   colonnes selon les catégories"). Resserré à 1 colonne en tablette/mobile
   (voir @media (min-width:768px) and (max-width:1023px) plus haut, et le
   bloc ≤767px ci-dessous). */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 48px;
  align-items: start;
}

.menu-category__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3-desktop);
  color: var(--color-warm-black);
  margin: 0 0 4px;
}
.menu-category__subtitle {
  font-size: 12.5px;
  font-style: italic;
  color: var(--color-warm-gray);
  margin: 0 0 14px;
}
.menu-category__items { display: flex; flex-direction: column; gap: 14px; }

.menu-item {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.menu-item:last-child { border-bottom: none; padding-bottom: 0; }
.menu-item__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.menu-item__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-warm-black);
}
.menu-item__weight {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-warm-gray);
  margin-left: 8px;
}
/* Prix jamais coupés (§11 du brief) : pas de wrap, ne rétrécit jamais. */
/* V3 — BORDEAUX GRAPHITE : TOUS les prix du menu en bordeaux (§12 du brief
   V3) — vérifié ≥5.93:1 sur tous les fonds concernés (ivoire/argile claire/
   sable). Ne couvre pas le prix "Copa/Verre/Glass" des vins, rendu
   séparément via .menu-item__price-secondary (voir plus bas + page.mjs) —
   introduit spécifiquement pour ne pas recolorer les vraies descriptions
   partageant auparavant le même champ `desc`. */
.menu-item__price {
  font: 600 14px var(--font-mono-label);
  color: var(--color-brand-bordeaux);
  white-space: nowrap;
  flex-shrink: 0;
}
.menu-item__price-secondary {
  font: 600 13px var(--font-mono-label);
  color: var(--color-brand-bordeaux);
  margin: 4px 0 0;
}
.menu-item__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-warm-gray);
  margin: 4px 0 0;
}

/* Bloc "Carnes a la brasa" + "Pollo a la brasa" — hiérarchie commerciale
   (priorités 1 et 2, §5 du brief) mise en avant visuellement, sans dupliquer
   le HTML : voir menuFeaturedBlock() dans page.mjs (regroupe les catégories
   consécutives `layout: "featured"` des données). */
/* V3 — BORDEAUX GRAPHITE : fond argile clair conservé (§13 du brief V3),
   filet vertical en bordeaux. */
.menu-featured {
  grid-column: 1 / -1;
  background: var(--color-light-clay);
  border-left: 3px solid var(--color-brand-bordeaux);
  border-radius: var(--radius-sm);
  padding: 28px 32px;
}
.menu-featured__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* Catégories longues (Pizzas, Postres, `layout: "wide"`) : pleine largeur,
   items en 2 colonnes internes sur desktop pour éviter un bloc trop haut. */
.menu-category--wide { grid-column: 1 / -1; }
.menu-category--wide .menu-category__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
}

/* MENU-CONSOLIDATION-01 : petit repère au-dessus de la 1re catégorie d'un
   groupe ("Vinos" / "Bebidas") — réutilise .eyebrow (déjà défini plus haut
   dans ce fichier), juste un espacement dédié. */
.menu-category__group-label { margin-bottom: 8px; }

/* MENU-CONSOLIDATION-01 : "Paellas por encargo" — offre complémentaire sur
   réservation, visible mais volontairement secondaire (même fond que
   .menu-supplement, pas de couleur d'alerte ni de badge). */
.menu-category--cta {
  background: var(--color-light-clay);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
}
.menu-category--cta .menu-category__text {
  font-size: 14.5px;
  color: var(--color-warm-gray);
  margin: 0 0 16px;
}

.menu-supplement {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--color-light-clay);
  border-radius: var(--radius-sm);
}
.menu-supplement__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.menu-supplement__label { font-size: 13px; font-weight: 600; color: var(--color-warm-black); }
/* V3 — BORDEAUX GRAPHITE : même logique que .menu-item__price. */
.menu-supplement__price { font: 600 13px var(--font-mono-label); color: var(--color-brand-bordeaux); white-space: nowrap; flex-shrink: 0; }
.menu-supplement__options {
  margin-top: 6px;
  padding-left: 18px;
  list-style: disc;
  font-size: 12.5px;
  color: var(--color-warm-gray);
}
.menu-supplement__desc { margin-top: 6px; font-size: 12.5px; color: var(--color-warm-gray); }

/* Menú del día (§7 du brief) — bloc légèrement distinct : fond sable, titre
   fort, prix bien visible. Pas de style publicitaire criard (pas de couleur
   d'alerte, pas de badge/ruban). */
.menu-del-dia {
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  margin-bottom: 40px;
}
.menu-del-dia__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h2-desktop);
  color: var(--color-warm-black);
  margin: 0 0 8px;
}
/* V3 — BORDEAUX GRAPHITE : même logique que .menu-item__price. */
.menu-del-dia__price {
  font: 700 28px var(--font-mono-label);
  color: var(--color-brand-bordeaux);
  margin: 0 0 10px;
}
.menu-del-dia__desc { font-size: 14.5px; color: var(--color-warm-gray); margin: 0 0 6px; }
.menu-del-dia__note { font-size: 13px; font-style: italic; color: var(--color-warm-gray); margin: 0; }

/* Para llevar + Reservas (§8 du brief) */
.menu-footer-block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.menu-footer-block__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3-desktop);
  color: var(--color-warm-black);
  margin: 0 0 8px;
}
.menu-footer-block__text { font-size: 14.5px; color: var(--color-warm-gray); margin: 0; }

/* 1 seule colonne en dessous de 1024px (tablette + mobile) — les 2 colonnes
   sont réservées au desktop large. Regroupé ici (au lieu du bloc tablette
   768–1023px plus haut) : ce fichier applique "dernière règle gagne" à
   spécificité égale, donc les overrides de grille doivent rester groupés au
   même endroit, après la règle de base, pour ne pas se faire écraser. */
@media (max-width: 1023px) {
  .menu-grid { grid-template-columns: 1fr; }
  .menu-featured__grid { grid-template-columns: 1fr; }
  .menu-category--wide .menu-category__items { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .menu-page {
    padding-top: var(--space-section-y-mobile);
    padding-bottom: var(--space-section-y-mobile);
    padding-left: var(--space-section-x-mobile);
    padding-right: var(--space-section-x-mobile);
  }
  .menu-page__title { font-size: var(--text-h1-mobile); margin-bottom: 22px; }
  .menu-grid { gap: 28px; margin-bottom: 32px; }
  .menu-featured { padding: 20px 18px; }
  .menu-featured__grid { gap: 22px; }
  .menu-category__title { font-size: var(--text-h3-mobile); }
  .menu-item__name { font-size: 14px; }
  .menu-del-dia { padding: 24px 18px; margin-bottom: 28px; }
  .menu-del-dia__title { font-size: var(--text-h2-mobile); }
  .menu-del-dia__price { font-size: 24px; }
  .menu-footer-block { grid-template-columns: 1fr; gap: 22px; padding-top: 24px; }
}

/* ==========================================================================
   REVIEWS-LANDING-01 — /avis/ (page technique QR code, hors navigation V2)
   Mobile-first par construction : c'est le seul contexte d'usage réel
   (scan → lecture immédiate → clic). Réutilise uniquement les tokens
   existants — aucune nouvelle couleur, aucune nouvelle police.
   ========================================================================== */
.reviews-page-body { background: var(--color-cream); margin: 0; }
.reviews-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 24px;
}
.reviews-page .brand-lockup { align-items: center; }
.reviews-page__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  color: var(--color-warm-black);
  margin: 4px 0 0;
}
.reviews-page__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-warm-gray);
  max-width: 340px;
}
.reviews-page__cta { margin-top: 4px; }
/* V3 — BORDEAUX GRAPHITE : accent bordeaux (§22 du brief V3). */
.reviews-page__thanks {
  font-size: 13px;
  color: var(--color-brand-bordeaux);
  margin: 0;
}

@media (min-width: 480px) {
  .reviews-page__title { font-size: 30px; }
}

/* ==========================================================================
   Alquiler de sala — VENUE-BAND-01 (05/11/2026) : bandeau bordeaux profond
   pleine largeur, remplace la petite carte crème (VENUE-HIRE-01). Même
   famille que « La brasa » : filet champagne (.brasa__rule), eyebrow /
   titre / texte « on-dark », bouton .btn--primary graphite comme dans le
   footer (lui aussi sur bordeaux profond). Pas de photo : la composition
   repose sur des listes typographiques séparées par des filets champagne,
   à la manière d'une carte. Tokens uniquement, aucune couleur en dur hors
   des transparences déjà utilisées sur fond sombre (footer).
   Contrastes sur --color-brand-bordeaux-dark (#542E36) : warm-white 11.1:1,
   texte on-dark (75 %) 7.1:1, formules (85 %) 8.5:1, champagne 5.1:1 (AA, labels 11px en
   capitales — mêmes usages que le footer).
   ========================================================================== */
#alquiler-sala { scroll-margin-top: var(--header-height-desktop); }
.venue {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    "intro  details"
    "action details";
  grid-template-rows: auto 1fr;
  column-gap: 72px;
  background: var(--color-brand-bordeaux-dark);
  padding-top: 72px;
  padding-bottom: 72px;
}
.venue__intro { grid-area: intro; }
.venue__intro .brasa__rule { display: block; }
.venue__intro .eyebrow { margin-bottom: 12px; }
.venue__title { font-size: 30px; line-height: 1.2; margin: 0 0 16px; }
.venue__desc { margin: 0; max-width: 460px; }

.venue__details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-self: center;
}
.venue__label {
  font: 600 var(--text-eyebrow) var(--font-mono-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-brand-champagne);
  margin: 0 0 6px;
}
.venue__list { margin: 0; padding: 0; list-style: none; }
.venue__list li {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--color-warm-white);
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-brand-champagne) 35%, transparent);
}
.venue__list li:first-child { border-top: 1px solid color-mix(in srgb, var(--color-brand-champagne) 35%, transparent); }
/* Formules : même liste, plus discrète (corps de texte, pas de titre). */
.venue__list--options li {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0;
  color: rgba(254, 251, 248, .85);
}

.venue__action {
  grid-area: action;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 32px;
}
.venue__cta { text-align: center; }
.venue__cta-note {
  margin: 0;
  font: 600 var(--text-eyebrow) var(--font-mono-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-footer-muted);
}

/* Tablette 768–1023px : deux colonnes conservées, resserrées. */
@media (min-width: 768px) and (max-width: 1023px) {
  #alquiler-sala { scroll-margin-top: var(--header-height-mobile); }
  .venue { column-gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  .venue__title { font-size: 26px; }
  .venue__list li { font-size: 16px; padding: 10px 0; }
  .venue__list--options li { font-size: 13.5px; }
}

/* Mobile ≤767px : une colonne, ordre texte → listes → bouton. */
@media (max-width: 767px) {
  #alquiler-sala { scroll-margin-top: var(--header-height-mobile); }
  .venue {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "details" "action";
    grid-template-rows: auto;
    padding: 40px var(--space-section-x-mobile);
  }
  .venue__title { font-size: 24px; margin-bottom: 10px; }
  .venue__desc { font-size: 13px; max-width: none; }
  .venue__details { margin-top: 28px; gap: 24px; }
  .venue__list li { font-size: 16px; padding: 10px 0; }
  .venue__list--options li { font-size: 13.5px; }
  .venue__action { align-items: stretch; margin-top: 28px; }
  .venue__cta { width: 100%; padding-left: 16px; padding-right: 16px; }
  .venue__cta-note { text-align: center; }
}