/* =========================================================================
   MOMA — Sections principales
   Toutes les regles ci-dessous sont mobile-first. Les recompositions
   tablette et desktop sont regroupees dans responsive.css.
   ========================================================================= */

/* =========================================================================
   HERO
   Mobile : la photographie occupe tout le cadre, le texte est pose dessus
   sur un degrade sombre ancre en bas.
   La photo (facade du restaurant, store banne MOMA et parasol) est cadree
   en 4/5 nativement : object-position remonte le point d'interet pour
   conserver l'enseigne et la terrasse visibles quel que soit le format.
   ========================================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(91svh, 48rem);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
  background-color: var(--c-green-darkest);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Le <picture> doit porter la hauteur lui aussi : sans cela, le height:100%
   de l'image se resoudrait contre une hauteur auto et serait ignore. */
.hero__media picture {
  display: block;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Degrade de lisibilite. Sans lui, le texte creme ne serait pas garanti
   au-dessus des zones claires de la photo (parasol, mur de pierre). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(28, 36, 22, 0.88) 0%,
    rgba(28, 36, 22, 0.68) 34%,
    rgba(28, 36, 22, 0.32) 62%,
    rgba(28, 36, 22, 0.08) 100%
  );
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  color: var(--c-cream);
}

.hero__eyebrow {
  color: var(--c-ocre);
}

/* Le titre entier reprend l'italique editorial de la maquette : plus de
   distinction de couleur sur une partie du texte, l'italique porte deja
   l'accent. */
.hero__title {
  max-width: 16ch;
  font-size: clamp(2.3rem, 1.75rem + 3vw, 4rem);
  font-style: italic;
  font-weight: 650;
  color: var(--c-cream);
}

/* Simple accroche, tres en retrait : le sous-titre accompagne le hero, il
   ne rivalise plus avec le titre. Passe de finition : encore allege
   (0,78rem/66% -> 0,72rem/62%) ; contraste verifie a 5,6:1 sur le point le
   plus sombre du degrade, marge de securite gardee au-dessus du seuil AA
   de 4,5:1 pour du petit texte. */
.hero__text {
  margin-top: var(--sp-5);
  max-width: 34ch;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(241, 234, 213, 0.62);
}

.hero__actions {
  margin-top: var(--sp-7);
}

/* Icones des CTA du hero : reservees au telephone (D-26), ou elles suivent
   la maquette de reference. Masquees par defaut pour que tablette et
   desktop restent pixel identiques ; revelees dans responsive.css. */
.hero__actions .btn__icon {
  display: none;
}

/* Trait decoratif sous le titre : n'existe visuellement que sur telephone
   (D-26), style complet dans responsive.css. */
.hero__rule {
  display: none;
}

/* =========================================================================
   HISTOIRE / PHILOSOPHIE
   ========================================================================= */
/* Creme chaud, plus soutenu que l'en-tete et que le fond de page
   (--bg-histoire, voir variables.css pour la gradation en trois valeurs et
   les contrastes) : la premiere section se detache franchement de
   l'en-tete, sans rupture de palette. */
.histoire {
  background-color: var(--bg-histoire);
}

/* =========================================================================
   EPICERIE
   Fond ocre clair, texte fonce (.is-warm) — voir variables.css pour les
   contrastes calcules.
   ========================================================================= */
.epicerie {
  background-color: var(--bg-epicerie);
}

/* Liste de produits sans prix : chaque ligne separee par un filet fin,
   jamais de puce — registre plus editorial qu'une liste de courses. */
.epicerie-list {
  margin-top: var(--sp-6);
  list-style: none;
}

.epicerie-list li {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: var(--t-md);
}

.epicerie-list li:last-child {
  border-bottom: 0;
}

/* =========================================================================
   CARTE
   Refonte v3 (D-17) : plus aucune photo dans la carte, section resserree,
   une seule colonne (liste des plats). Voir DECISIONS.md.
   ========================================================================= */
/* Fond vert profond (finition v4, plus proche de la maquette) : la carte
   redevient un moment a part dans la page, comme le hero. Voir
   .is-dark .tab / .is-dark .dish* dans components.css pour les contrastes
   recalcules sur ce fond. */
.carte {
  background-color: var(--bg-dark);
}

/* =========================================================================
   TRAITEUR
   Fond bois clair (--bg-traiteur), texte fonce (.is-warm) — refonte v3,
   D-17. Remplace l'ancien fond sombre terracotta (D-16, abandonne) : la
   maquette de reference place Epicerie et Traiteur dans le meme registre
   chaud et clair.
   ========================================================================= */
.traiteur {
  background-color: var(--bg-traiteur);
}

/* Section concise, sans photo (finition v4) : le texte est centre et
   volontairement etroit, l'unique bouton porte tout l'appel a l'action. */
.traiteur__inner {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.traiteur__inner .prose {
  margin-inline: auto;
}

.traiteur__inner .eyebrow {
  justify-content: center;
}

.traiteur__inner .btn {
  margin-top: var(--sp-2);
}

/* =========================================================================
   AVIS
   ========================================================================= */
.avis {
  padding-block: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  background-color: var(--c-green);
  color: var(--on-dark);
  text-align: center;
}

/* Version minimale (finition v4) : note, un avis, un bouton — tres discrets,
   la preuve sociale ne doit jamais peser plus lourd que la carte ou les
   horaires. */
.avis__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 34rem;
  margin-inline: auto;
}

/* =========================================================================
   NOUS TROUVER
   ========================================================================= */
/* « Nous trouver » suit « Avis », deux sections sombres consecutives dont
   l'ecart de valeur (1,21) est du meme ordre que celui, juge tout juste
   perceptible, entre l'en-tete et Philosophie. On applique donc ici la meme
   convention que l'en-tete : un filet clair porte la separation lorsque la
   difference de fond seule ne suffit pas. */
.trouver {
  background-color: var(--c-green-darkest);
  color: var(--on-dark);
  border-top: 1px solid var(--line-light);
}

.trouver__inner {
  display: grid;
  gap: var(--sp-7);
}

.trouver__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.trouver__actions:empty {
  display: none;
  margin-top: 0;
}

.trouver__actions:not(:has(a:not([hidden]))) {
  display: none;
  margin-top: 0;
}

.trouver__directions {
  margin-top: var(--sp-3);
  font-size: var(--t-sm);
}

.trouver__figure {
  display: grid;
  gap: var(--sp-4);
}

/* =========================================================================
   PAGES LEGALES
   Mise en page sobre, en pleine largeur de lecture. L'en-tete etant fixe,
   la page compense sa hauteur.
   ========================================================================= */
.page-legal {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
}

.page-legal h1 {
  margin-bottom: var(--sp-6);
}

.page-legal section + section {
  margin-top: var(--sp-7);
}

.page-legal h2 {
  margin-bottom: var(--sp-4);
}

.page-legal h3 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  color: var(--ink);
}

.page-legal .prose {
  max-width: none;
}

.page-legal code {
  padding: 0.15em 0.4em;
  background-color: rgba(35, 51, 42, 0.08);
  border-radius: var(--r-sm);
  font-size: 0.9em;
}

/* Encadre d'avertissement : signale par un mot ET par un filet, jamais
   par la seule couleur. */
.legal-note {
  margin-bottom: var(--sp-7);
  padding: var(--sp-5);
  background-color: rgba(247, 168, 37, 0.10);
  border-left: 4px solid var(--c-terracotta);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink);
}

/* Liste de definitions : chaque terme au-dessus de sa valeur sur mobile,
   en deux colonnes des la tablette. */
.legal-list {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
}

.legal-list dt {
  font-weight: 650;
  color: var(--ink);
}

.legal-list dd {
  margin: 0 0 var(--sp-3);
  color: var(--ink-soft);
}

/* Tableau : defile horizontalement dans son propre conteneur plutot que
   de faire deborder la page. */
.table-scroll {
  overflow-x: auto;
  margin-top: var(--sp-4);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
}

.table-scroll[tabindex="0"]:focus-visible {
  outline-offset: 3px;
}

.legal-table {
  width: 100%;
  min-width: 42rem;
  font-size: var(--t-sm);
  text-align: left;
}

.legal-table caption {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  border-bottom: 1px solid var(--line-dark);
}

.legal-table th,
.legal-table td {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: top;
  border-bottom: 1px solid var(--line-dark);
}

.legal-table thead th {
  font-weight: 700;
  color: var(--ink);
  background-color: rgba(35, 51, 42, 0.05);
}

.legal-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.legal-table td {
  color: var(--ink-soft);
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
  border-bottom: 0;
}

.legal-back {
  margin-top: var(--sp-7);
}

@media (min-width: 48em) {
  .legal-list {
    grid-template-columns: minmax(12rem, auto) 1fr;
  }

  .legal-list dt {
    grid-column: 1;
  }

  .legal-list dd {
    grid-column: 2;
    margin-bottom: 0;
  }
}