/* =========================================================================
   COMPONENTS — Briques BEM-like, scopées par préfixe de classe.
   Sommaire :
     1. .logo        — wordmark placeholder (TODO swap logo.svg)
     2. .header      — sticky, 2 états (transparent hero / solide scrollé)
     3. .nav         — horizontale ≥768px / burger <768px / overlay rouge
     4. .btn         — primary / secondary / pdf + états
     5. .pill        — système SLTD (s/l/t/d)
     6. .marquee     — bandeau « SALEMENT BON » défilant
     7. .footer      — adresse Marais, horaires, SLTD, réseaux
   ========================================================================= */


/* =========================================================================
   1. LOGO — wordmark officiel SALTED BOY (Impact), via masque CSS.
   Le glyphe est porté par le canal alpha de l'asset ; sa COULEUR suit
   currentColor → rouge sur header solide, crème sur fond sombre/transparent.
   Un seul asset, recoloration automatique selon le contexte.
   ========================================================================= */
.logo {
  --logo-h: 22px;
  display: inline-flex;
  align-items: center;
  height: var(--logo-h);
  text-decoration: none;
}

.logo__img {
  display: block;
  height: 100%;
  width: auto;
}

/* Bascule rouge/crème selon le contexte :
   défaut (header transparent, footer sombre) = crème · header solide/scrollé = rouge */
.logo__img--red { display: none; }

.header--solid .logo__img--red,
.header.is-scrolled .logo__img--red { display: block; }
.header--solid .logo__img--cream,
.header.is-scrolled .logo__img--cream { display: none; }


/* =========================================================================
   2 & 3. HEADER + NAV
   État par défaut (sur hero)  : transparent, texte/logo crème, scrim gradient.
   État scrollé (.is-scrolled) : fond crème, texte noir, logo rouge, ombre.
   La bascule est posée par main.js (classe .is-scrolled).
   ========================================================================= */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--color-cream);                 /* état hero : texte crème */
  --focus-color: var(--color-cream);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Scrim : dégradé noir→transparent pour lisibilité sur photo claire (Q1) */
.header::before {
  content: '';
  position: absolute;
  inset: 0 0 calc(var(--header-scrim-h) * -1) 0; /* déborde sous le header */
  background: linear-gradient(to bottom, var(--color-black-80), var(--color-black-00));
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: -1;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* --- État scrollé ----------------------------------------------------- */
.header.is-scrolled {
  background-color: var(--color-cream);
  color: var(--color-black);
  box-shadow: var(--header-shadow);
  --focus-color: var(--color-red);
}

.header.is-scrolled::before { opacity: 0; }

.header.is-scrolled .logo { color: var(--color-red); } /* logo rouge scrollé */

/* --- Variante SOLIDE (home) : crème dès le haut, pas de scrim -----------
   On NE supprime PAS l'état transparent+scrim du composant (réutilisé sur les
   pages à hero photo : Restaurant…). .header--solid force juste l'état clair. */
.header--solid {
  background-color: var(--color-cream);
  color: var(--color-black);
  --focus-color: var(--color-red);
}
.header--solid::before { opacity: 0; }      /* scrim off */
.header--solid .logo { color: var(--color-red); }
.header--solid.is-scrolled { box-shadow: var(--header-shadow); } /* scroll = ombre seule */

/* Boutons header — couleur d'outline selon l'état du header :
   transparent (autres pages) → crème · solide (home) → noir */
.header .nav__actions .btn--secondary {
  color: var(--color-cream);
  border-color: var(--color-cream);
}
.header--solid .nav__actions .btn--secondary {
  color: var(--color-black);
  border-color: var(--color-black);
}
.header--solid .nav__actions .btn--secondary:hover {
  background: var(--color-black);
  color: var(--color-cream);
}

/* --- Navigation ------------------------------------------------------- */
.nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-16);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  list-style: none;
  margin-inline: auto;     /* centre les liens entre le logo et les actions */
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.nav__link {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: currentColor;
  text-decoration: none;
  padding-block: var(--space-8);
  position: relative;
}

/* Soulignement animé discret (couche motion gère la transition) */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

/* --- Burger (mobile uniquement) --------------------------------------- */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;          /* cible tactile ≥44px */
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: currentColor;
}

.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

/* --- Overlay plein écran (mobile) — fond ROUGE (Q2) ------------------- */
.nav__overlay {
  position: fixed;
  inset: 0;                 /* full viewport SANS 100vw → pas de débordement scrollbar */
  width: 100%;              /* défensif : jamais > viewport */
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centrage vertical */
  align-items: center;      /* centrage horizontal du bloc de liens */
  gap: var(--space-24);
  padding: var(--space-24); /* marge de sécurité : les labels longs ne touchent pas les bords */
  background: var(--color-red);
  color: var(--color-cream);
  --focus-color: var(--color-cream);
  /* caché par défaut, piloté par [hidden] + .is-open via JS */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
}

.nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.nav__overlay-list {
  display: flex;
  flex-direction: column;
  align-items: center;      /* centrage via flex, pas via margin/text-align */
  gap: var(--space-24);
  list-style: none;
  padding: 0;               /* aucune sentinelle/padding ne décale le bloc */
  margin: 0;
  text-align: center;       /* redondance défensive */
}

.nav__overlay-link {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  color: var(--color-cream);
  text-decoration: none;
}

/* Bloc « Commander » dans l'overlay mobile — liens texte (pas de boutons colorés) */
.nav__overlay-order-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-16);
}
.nav__overlay-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: .65;
}
.nav__overlay-order {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  color: var(--color-cream);
  text-decoration: none;
}
.nav__overlay-order:hover { color: var(--color-cream); text-decoration: underline; text-underline-offset: .2em; }

.nav__overlay-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--color-cream);
  cursor: pointer;
}

/* Affichage responsive nav :
   <768  : burger + overlay
   ≥768  : liens horizontaux (décision phase A)
   ≥1024 : + les 2 boutons d'action (évite le tassement du header à 768 ;
           ils restent redondants avec les liens Menu/Restaurant/Contact) */
.nav__list,
.nav__actions { display: none; }
.nav__toggle { display: inline-flex; margin-left: auto; }

@media (min-width: 768px) {
  .nav__list { display: flex; }
  .nav__toggle { display: none; }
  .nav__overlay { display: none; } /* overlay = mobile only */
}

@media (min-width: 1024px) {
  .nav__actions { display: flex; }
}


/* =========================================================================
   4. BTN — boutons (CLAUDE.md §3.3 + ajout DA hover/active)
   Forme pill. États hover / focus-visible / active / disabled obligatoires.
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 44px;                  /* cible tactile */
  padding: var(--space-12) var(--space-24);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;               /* le libellé ne se casse jamais */
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* Hover / active (ajout DA) */
.btn:hover { transform: translateY(-2px); filter: brightness(.94); }
.btn:active { transform: translateY(0); filter: brightness(.9); }

.btn[disabled],
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  filter: none;
  pointer-events: none;
}

/* Primary : fond rouge, texte crème */
.btn--primary {
  background: var(--color-red);
  color: var(--color-cream);
  border-color: var(--color-red);
}

/* Secondary : outline. Bordure rouge sur fond clair, crème sur fond sombre/rouge.
   La couleur suit currentColor du contexte via les surfaces. Variantes explicites : */
.btn--secondary {
  background: transparent;
  color: var(--color-red);
  border-color: var(--color-red);
}

.btn--secondary:hover {
  background: var(--color-red);
  color: var(--color-cream);
}

/* Secondary sur fond sombre/rouge/hero : passe en outline crème (Q3) */
.surface-red .btn--secondary,
.surface-black .btn--secondary,
.hero .btn--secondary {
  color: var(--color-cream);
  border-color: var(--color-cream);
}

.surface-red .btn--secondary:hover,
.hero .btn--secondary:hover {
  background: var(--color-cream);
  color: var(--color-red);
}

.surface-black .btn--secondary:hover {
  background: var(--color-cream);
  color: var(--color-black);
}

/* PDF : même base que primary, prêt pour une icône (CLAUDE.md §3.3) */
.btn--pdf {
  background: var(--color-red);
  color: var(--color-cream);
  border-color: var(--color-red);
}


/* =========================================================================
   5. PILL — système SLTD (CLAUDE.md §2.8 / §3.4)
   Pastille outline arrondie : lettre + label.
   ========================================================================= */
.pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--color-red);          /* défaut : rouge sur clair */
  background: transparent;
  white-space: nowrap;
}

/* Sur surfaces sombres/rouges, la pill suit le texte crème */
.surface-red .pill,
.surface-black .pill { color: var(--color-cream); }

.pill__letter {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  line-height: 1;
}

.pill__label {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Variantes — réservées pour différenciation future (couleur d'accent identique
   en V1, hooks prêts). CLAUDE.md §3.4 : .pill--s/l/t/d. */
.pill--s,
.pill--l,
.pill--t,
.pill--d { /* hooks de variante — pas de divergence visuelle imposée en V1 */ }


/* =========================================================================
   6. MARQUEE — bandeau « SALEMENT BON » (CLAUDE.md §2.8 / §3.5)
   Séparateur « · » crème, ~30s/boucle, droite→gauche (Q6).
   Animation définie dans motion.css ; statique si reduced-motion.
   ========================================================================= */
.marquee {
  overflow: hidden;
  width: 100%;
  padding-block: var(--space-16);
  background: var(--color-red);
  color: var(--color-cream);
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  /* l'animation translate est posée dans motion.css */
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  padding-inline: var(--space-16);
}

/* Le séparateur « · » est inséré entre items via le markup (span aria-hidden). */
.marquee__sep {
  padding-inline: var(--space-16);
  color: var(--color-cream);
  opacity: .8;
}


/* =========================================================================
   7a. HOURS — bande « lieux + horaires » (au-dessus du footer). Surface crème.
   2 colonnes : icône + titre + adresse + horaires (réf Paput).
   ========================================================================= */
.hours__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  text-align: center;
}

@media (min-width: 768px) {
  .hours__grid { grid-template-columns: 1fr 1fr; gap: var(--space-64); }
}

.hours__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.hours__icon {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-16);
  color: var(--color-black);
}
.hours__icon svg { width: 100%; height: 100%; display: block; }

.hours__title {
  font-family: var(--font-display);     /* Impact */
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--color-red);
}

.hours__addr { font-size: var(--fs-body); }
.hours__time { font-weight: var(--fw-semi); }


/* =========================================================================
   7b. FOOTER (global, toutes pages) — fond ROUGE, texte crème (réf Paput).
   Bloc marque (wordmark + réseaux) + 3 colonnes.
   ========================================================================= */
.footer {
  background: var(--color-red);
  color: var(--color-cream);
  --focus-color: var(--color-cream);
  padding-block: var(--space-64) var(--space-48);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-32); }
}

/* Bloc marque */
.footer__brand .logo { --logo-h: 40px; }

.footer__socials {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--color-cream);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.footer__social svg { width: 20px; height: 20px; display: block; }
.footer__social:hover { background: var(--color-cream); color: var(--color-red); }

/* Colonnes */
.footer__col-title {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: var(--space-16);
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  font-size: var(--fs-body);
}

.footer__list a {
  color: var(--color-cream);
  text-decoration: none;
}
.footer__list a:hover { text-decoration: underline; text-underline-offset: .2em; }

.footer__addr { font-size: var(--fs-small); line-height: 1.5; opacity: .9; }
.footer__subtitle { margin-top: var(--space-32); }   /* espace avant un 2e titre de colonne (ex. Légal) */

/* Bas de footer */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  align-items: center;
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(243, 238, 218, .25);
  font-size: var(--fs-small);
}
.footer__legal .footer__copy { opacity: .85; }
.footer__legal a { color: var(--color-cream); text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }
.footer__legal .footer__www { margin-left: auto; }


/* =========================================================================
   8. SECTION-HEAD (CLAUDE.md §3.9) — eyebrow + titre display + intro courte
   ========================================================================= */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 60ch;
}

.section-head__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  opacity: .7;
}

.section-head__title { /* hérite de h2/h3 */ }

.section-head__intro {
  font-size: var(--fs-body-l);
}


/* =========================================================================
   9. MEDIA (CLAUDE.md §3.8) — blocs photo
     .media--full  : full-bleed (image en cover)
     .media--split : photo + texte côte à côte (≥768px)
   ========================================================================= */
.media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stand-in macro : zoom serré pour distinguer le produit du hero (même fichier
   pain-01 en attendant un 2e cadrage réel — cf. assets/img/PLACEHOLDERS.md) */
.media__img--macro {
  transform: scale(1.7);
  transform-origin: 55% 45%;
}

/* Full-bleed : conteneur déborde le container parent jusqu'aux bords viewport */
.media--full {
  position: relative;
  width: 100%;
}

/* Split : 1 colonne mobile → 2 colonnes ≥768px */
.media--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: center;
}

.media--split .media__figure {
  position: relative;
  aspect-ratio: 4 / 5;       /* ratio validé (Q6) */
  border-radius: var(--radius-card);
  overflow: hidden;
}

.media--split .media__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
}

.media__price {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
}

@media (min-width: 768px) {
  .media--split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
  }
  /* Variante : photo à droite */
  .media--split.media--reverse .media__figure { order: 2; }
}


/* =========================================================================
   10. HERO — accueil. Photo full-bleed en cover, 100dvh, contenu en bas.
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100vh;          /* fallback */
  min-height: 100dvh;         /* viewport dynamique mobile (Q6) */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-cream);
  --focus-color: var(--color-cream);
}

.hero__media,
.hero__media .media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Voile bas pour lisibilité du texte sur la photo (display only, pas du body) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-black-80), var(--color-black-00) 55%);
  pointer-events: none;
}

.hero__inner {
  position: relative;        /* au-dessus du voile */
  z-index: 1;
  width: 100%;
  padding-block: var(--space-64) var(--space-96);
}

.hero__title {
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  max-width: 16ch;
}

.hero__subtitle {
  margin-top: var(--space-16);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-regular);
  max-width: 38ch;
}

.hero__actions {
  margin-top: var(--space-32);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}


/* =========================================================================
   11. SLTD — mini-manifeste (CLAUDE.md §2.8). 4 lignes : pill + explication.
   Pensé pour surface sombre (noir).
   ========================================================================= */
.sltd__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  margin-top: var(--space-48);
}

@media (min-width: 768px) {
  .sltd__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-48); }
}

.sltd__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: flex-start;
}

.sltd__desc {
  font-size: var(--fs-body);
  max-width: 42ch;
  opacity: .9;
}


/* =========================================================================
   12. CTA-BAND — bloc d'appel drive-to-store (CTA Marais). Surface sombre.
   ========================================================================= */
.cta-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  text-align: left;
}

.cta-band__title {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1);
  max-width: 18ch;
}

.cta-band__text {
  font-size: var(--fs-body-l);
  max-width: 40ch;
}


/* =========================================================================
   13. PILLS-MARQUEE — bande de pills défilantes (home §2). Surface crème,
   edge-to-edge. Alternance stricte de 3 styles. Animation : motion.css.
   Filet haut/bas subtil pour démarquer du double-crème avec l'intro.
   ========================================================================= */
.pills-marquee {
  background: var(--color-cream);
  color: var(--color-black);
  --focus-color: var(--color-red);
  padding-block: var(--space-48);
  overflow: hidden;                       /* masque le défilement hors-cadre */

  /* Accents décoratifs LOCAUX à cette section uniquement — PAS dans la charte
     globale (settings.css §2.1 reste tri-chrome). Scopés au composant. */
  --pills-butter: #E8B23A;  /* jaune beurre (texte noir : 10,56:1) */
  --pills-toast:  #8A4B2F;  /* brun toasté (texte crème : 5,77:1) */
}

/* Sélecteur à 2 classes : bat .eyebrow (utilities) pour imposer le gras +
   annuler le max-width hérité de `p` (sinon le bloc reste à gauche). */
.pills-marquee .pills-marquee__eyebrow {
  max-width: none;                  /* annule p{max-width:65ch} → vrai centrage */
  text-align: center;
  margin-bottom: var(--space-32);
  font-weight: var(--fw-semi);      /* gras */
  opacity: 1;
}

.pills-marquee__track {
  display: flex;
  width: max-content;                     /* contenu = 2 groupes côte à côte */
  /* l'animation translateX est posée dans motion.css */
}

.pills-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-inline: var(--space-8);         /* évite le collage au raccord de boucle */
}

.pills-marquee__pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1rem, .85rem + .8vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);     /* -0.01em */
  line-height: 1;
  padding: 14px 28px;                      /* étiquette : hauteur contenue */
  border-radius: var(--radius-sticker);    /* ~18px — rectangle arrondi, pas full-round */
}

/* Variation de taille légère → rythme organique. Périodes 5 et 7 (coprimes
   avec le cycle couleur de 4) pour qu'aucune combinaison taille×couleur ne se
   répète régulièrement entre voisines. */
.pills-marquee__pill:nth-child(5n + 1) { font-size: clamp(1.125rem, .9rem + 1vw, 1.75rem); }
.pills-marquee__pill:nth-child(7n + 4) { font-size: clamp(.9rem, .8rem + .5vw, 1.25rem); }

/* Rotation « sticker collé à la main » : angles variés -3°..+3°, période 6
   (décalée des cycles couleur(2) et taille(4/7)). Transform sur le pill, la
   translation du défilement reste sur __track → aucune interférence. */
.pills-marquee__pill:nth-child(6n + 1) { transform: rotate(-2deg); }
.pills-marquee__pill:nth-child(6n + 2) { transform: rotate(2.5deg); }
.pills-marquee__pill:nth-child(6n + 3) { transform: rotate(-1.5deg); }
.pills-marquee__pill:nth-child(6n + 4) { transform: rotate(3deg); }
.pills-marquee__pill:nth-child(6n + 5) { transform: rotate(-2.5deg); }
.pills-marquee__pill:nth-child(6n)     { transform: rotate(1.5deg); }

/* 4 styles PLEINS, rotation red → black → butter → toast (boucle).
   Contrastes vérifiés WCAG AA :
     crème/rouge 5,42:1 · crème/noir 17,56:1 · NOIR/beurre 10,56:1 · crème/toast 5,77:1 */
.pills-marquee__pill--fill-red {
  background: var(--color-red);
  color: var(--color-cream);
}
.pills-marquee__pill--fill-black {
  background: var(--color-black);
  color: var(--color-cream);
}
.pills-marquee__pill--fill-butter {
  background: var(--pills-butter);
  color: var(--color-black);     /* texte NOIR : le beurre est clair (10,56:1) */
}
.pills-marquee__pill--fill-toast {
  background: var(--pills-toast);
  color: var(--color-cream);
}


/* =========================================================================
   14. HERO-ED — hero éditorial split (home). Surface crème.
   Structure : bloc 2 images → titre display géant (déborde) → grille 3 col.
   ========================================================================= */
.hero-ed {
  background: var(--color-cream);
  color: var(--color-black);
  padding-top: calc(var(--header-h) + var(--space-32));
  padding-bottom: var(--space-48);   /* resserré (était 64) — moins de vide sous la grille */
  overflow: hidden;          /* clippe le débordement du titre (pas de scroll H) */
}

/* --- 1. Bloc images (split 50/50 desktop, empilées mobile) ------------- */
.hero-ed__media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.hero-ed__figure {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.hero-ed__figure .media__img { width: 100%; height: 100%; }

@media (min-width: 768px) {
  .hero-ed__media { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
}

/* --- 2. Titre display géant (déborde, façon Gourou) ------------------- */
.hero-ed__title {
  display: flex;
  justify-content: space-between;    /* lettres réparties sur toute la largeur */
  align-items: baseline;
  width: 100%;
  margin-block: var(--space-24) var(--space-16);  /* titre→grille resserré */
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  color: var(--color-red);
  line-height: .9;
  /* taille contenue pour que les 9 lettres tiennent dans le container avec
     de l'espace à répartir → jamais de débordement */
  font-size: clamp(2.25rem, 13vw, 12rem);
}
.hero-ed__title span { display: block; }

/* --- 3. Grille 3 colonnes (empilées mobile) --------------------------- */
.hero-ed__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;        /* les 3 colonnes démarrent en haut */
}

@media (min-width: 768px) {
  .hero-ed__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-48);
  }
}

.hero-ed__col { display: flex; flex-direction: column; gap: var(--space-12); }

.hero-ed__baseline {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
}

.hero-ed__lead { font-size: var(--fs-body-l); }

.hero-ed__concept { font-size: var(--fs-body); }

/* Colonne C : index éditorial (numéro · label · flèche), filets fins,
   remplissage rouge « wipe » + flèche qui avance au hover/focus. */
.hero-ed__links {
  display: flex;
  flex-direction: column;
  border-top: 2px dashed var(--color-red);   /* filet pointillé rouge (cohérence menu) */
}

.hero-ed__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-12);      /* plus d'air vertical */
  border-bottom: 2px dashed var(--color-red);    /* pointillé rouge entre chaque + bas */
  color: var(--color-black);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: .04em;
  overflow: hidden;
}

/* Remplissage rouge qui balaie de la gauche */
.hero-ed__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 0;
}

/* Contenu au-dessus du wipe */
.hero-ed__link > * {
  position: relative;
  z-index: 1;
  transition: color var(--dur-fast) var(--ease-out);
}

.hero-ed__num {
  font-family: var(--font-display);   /* Impact */
  font-weight: var(--fw-black);
  font-size: 1.375rem;                /* numéro plus gros */
  line-height: 1;
  color: var(--color-red);
  min-width: 1.8em;
}

.hero-ed__label {
  flex: 1;
  font-family: var(--font-display);   /* Impact (raccord titre géant) */
  font-weight: var(--fw-black);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
}

.hero-ed__arrow {
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}

.hero-ed__link:hover::before,
.hero-ed__link:focus-visible::before { transform: scaleX(1); }

.hero-ed__link:hover,
.hero-ed__link:focus-visible { color: var(--color-cream); }

.hero-ed__link:hover .hero-ed__num,
.hero-ed__link:focus-visible .hero-ed__num { color: var(--color-cream); }

.hero-ed__link:hover .hero-ed__arrow,
.hero-ed__link:focus-visible .hero-ed__arrow { transform: translate(3px, -3px); }


/* =========================================================================
   15. MOMENT — section lifestyle (home). 2 polaroïds inclinés + légende.
   Surface crème. Cohérent « collé-à-la-main » avec les pills défilantes.
   ========================================================================= */
.moment {
  overflow-x: clip;   /* filet de sécurité : rotations/overlap → jamais de scroll H */
}

.moment__media {
  position: relative;          /* réf du fond typographique */
  display: flex;
  flex-direction: column;      /* mobile : empilées */
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
}

/* Fond typographique « SALEMENT BON » (4 lignes) DERRIÈRE les images.
   Déborde légèrement le bloc à g/d, jamais jusqu'aux bords de l'écran. */
.moment__backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 112%;                      /* léger débord latéral */
  max-width: calc(100vw - 80px);    /* marge écran ~40px min (pas full-bleed) */
  height: 100%;
  z-index: 0;                       /* derrière les images (z-index 1) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .1em;
  overflow: hidden;                 /* coupe le texte au bord du bloc */
  pointer-events: none;
  user-select: none;
}

.moment__backdrop-line {
  white-space: nowrap;
  font-family: var(--font-display); /* Impact */
  font-weight: var(--fw-black);
  font-size: clamp(1.75rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--color-red);
}

.moment__item {
  position: relative;
  z-index: 1;                  /* passe DEVANT le fond typographique */
  width: min(80%, 360px);      /* mobile : centré, contenu */
}

.moment__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;         /* carré (cf. réf) */
  border-radius: 30px;         /* cf. réf Bunta (.basic-section-image) */
  overflow: hidden;
  /* pas d'ombre portée (cf. réf) — photos posées à plat sur le crème */
}

.moment__figure .media__img { width: 100%; height: 100%; }

/* Rotations cf. réf : 1re (gauche) positive +3°, 2e (droite) négative -3° */
.moment__item--left  .moment__figure { transform: rotate(3deg); }
.moment__item--right .moment__figure { transform: rotate(-3deg); }

@media (min-width: 768px) {
  /* côte à côte, espacées, pair centrée ; photos jusqu'à 400px (cf. réf) */
  .moment__media { flex-direction: row; gap: var(--space-48); }
  .moment__item { flex: 0 1 400px; min-width: 0; width: auto; }
}

.moment__caption {
  margin: var(--space-32) auto 0;
  max-width: 46ch;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;          /* légende éditoriale (pas de typewriter importée) */
  font-weight: var(--fw-regular);
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);  /* plus petite que les images */
  line-height: 1.35;
}


/* =========================================================================
   16. STORY-TEASER — storytelling court (home). Surface noir, texte crème.
   Sans serif (charte) : titre Europa Grotesk Medium, l'effet éditorial vient
   de la mise en page (colonne aérée centrée, texte aligné à gauche).
   ========================================================================= */
.story-teaser__inner {
  max-width: 62ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.story-teaser__title {
  font-family: var(--font-body);      /* Europa Grotesk (PAS Impact display, PAS serif) */
  font-weight: var(--fw-semi);        /* Medium */
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: 1.12;
  max-width: 22ch;
}

.story-teaser__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 55ch;
}

.story-teaser__body p {
  font-size: var(--fs-body-l);
  max-width: none;                    /* annule p{max-width:65ch} (déjà borné à 55ch) */
}

.story-teaser__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 2px;
}

.story-teaser__link::after {
  content: '\2192';                   /* → */
  transition: transform var(--dur-fast) var(--ease-out);
}

.story-teaser__link:hover {
  color: var(--color-cream);          /* reste crème (rouge sur noir = trop faible) */
}
.story-teaser__link:hover::after { transform: translateX(4px); }


/* =========================================================================
   17. PITCH — bloc éditorial split (réf Paput) : accroche + texte + handle
   à gauche, 2 photos à droite. Surface crème.
   ========================================================================= */
.pitch__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}

@media (min-width: 768px) {
  .pitch__inner { grid-template-columns: .85fr 1.15fr; gap: var(--space-64); }
}

.pitch__title {
  font-family: var(--font-display);   /* Impact */
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--color-red);
}

.pitch__text {
  margin-top: var(--space-24);
  font-size: var(--fs-body-l);
  max-width: 44ch;
}
.pitch__text strong { font-weight: var(--fw-semi); }  /* Europa Medium */

.pitch__handle {
  display: inline-block;
  margin-top: var(--space-32);
  margin-left: 2.5rem;                /* décalé vers la droite (cf. réf Paput) */
  color: var(--color-red);
  font-family: var(--font-hand);      /* Permanent Marker (manuscrit) */
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  transform: rotate(-8deg);           /* monte vers la droite (cf. réf Paput) */
  transform-origin: left center;
}
.pitch__handle:hover { color: var(--color-red); }

/* Colonne droite : 2 photos portrait côte à côte, coins arrondis */
.pitch__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.pitch__figure {
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
}
.pitch__figure .media__img { width: 100%; height: 100%; }


/* =========================================================================
   18. APPETITE — « donner faim » : titre + slider d'images piloté au scroll.
   Le déplacement horizontal du track est calculé dans main.js. Surface crème.
   ========================================================================= */
.appetite {
  overflow-x: clip;          /* le track déborde → jamais de scroll horizontal */
  text-align: center;
}

.appetite__title {
  font-family: var(--font-display);   /* Impact */
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--color-black);
}

.appetite__sub {
  margin-top: var(--space-12);
  font-size: var(--fs-h3);
  color: var(--color-red);
  font-weight: var(--fw-semi);
}

/* Bande d'images */
.appetite__viewport {
  margin-block: var(--space-48);
  width: 100%;
  overflow: hidden;
}

.appetite__track {
  display: flex;
  gap: var(--space-16);
  width: max-content;
  will-change: transform;
}

.appetite__item {
  flex: 0 0 auto;
  width: clamp(200px, 22vw, 300px);
}

.appetite__figure {
  margin: 0;
  aspect-ratio: 3 / 4;        /* rectangle portrait (pas les arches de la réf) */
  border-radius: var(--radius-card);
  overflow: hidden;
}
.appetite__figure .media__img { width: 100%; height: 100%; }

.appetite__text {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--fs-body-l);
}


/* =========================================================================
   19. MENU (page menu.html) — reproduction du langage visuel du PDF.
   Surface crème. Blocs titres rouges, catégories trackées, prix alignés,
   encadré pointillé, wordmark vertical géant à droite.
   ========================================================================= */
.menu { position: relative; overflow-x: clip; }

.menu__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

@media (min-width: 900px) {
  .menu__layout { grid-template-columns: minmax(0, 1fr) clamp(140px, 16vw, 240px); gap: var(--space-48); }
}

/* www en haut à droite du contenu */
.menu__www-top {
  display: block;
  text-align: right;
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-16);
}

/* Bloc titre rouge (SALTED BREAD, DRINKS) */
.menu__banner {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding: .12em .4em .2em;
}

.menu__banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-16);
  margin-top: var(--space-48);
}

/* Liste directement sous un bandeau (SALT BREAD n'a pas de sous-catégorie) */
.menu__banner + .menu__list { margin-top: var(--space-24); }

/* Catégorie trackée (DIPS, DIP DRINKS, COFFEE…) */
.menu__cat {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body-l);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: var(--space-32) 0 var(--space-16);
}
.menu__cat--center { text-align: center; letter-spacing: .35em; }

/* Liste d'items : intitulé à gauche, prix à droite */
.menu__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-12); }
.menu__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.menu__name { color: var(--color-black); }
.menu__price { color: var(--color-black); white-space: nowrap; }

/* Encadré pointillé (DIPS) */
.menu__box {
  border: 2px dashed var(--color-red);
  border-radius: 4px;
  padding: var(--space-24) var(--space-32) var(--space-32);
  margin-top: var(--space-32);
}
.menu__box .menu__cat { margin-top: 0; }

/* Séparateur pointillé horizontal */
.menu__dash { border: 0; border-top: 2px dashed var(--color-red); margin: var(--space-32) 0; opacity: 1; }

/* LE COMBO — pill rouge centrée + ligne + prix */
.menu__combo { text-align: center; margin: var(--space-32) 0; }
.menu__combo-pill {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .1em .5em .18em;
}
.menu__combo-line {
  margin-top: var(--space-16);
  max-width: none;            /* annule p{max-width:65ch} → vrai centrage */
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-black);
}
.menu__combo-price {
  margin-top: var(--space-8);
  max-width: none;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  color: var(--color-black);
}

/* Note (petit texte) — sur bloc rouge (dip drinks) ou rouge simple (drinks) */
.menu__note {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.4;
}
.menu__note--boxed {
  background: var(--color-red);
  color: var(--color-cream);
  padding: .35em .6em;
  font-size: .72rem;
}
.menu__note--red { color: var(--color-red); }

.menu__catrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin: var(--space-32) 0 var(--space-16); }
.menu__catrow .menu__cat { margin: 0; }

/* DRINKS en 2 colonnes */
.menu__cols { display: grid; grid-template-columns: 1fr; gap: var(--space-16) var(--space-48); }
@media (min-width: 560px) { .menu__cols { grid-template-columns: 1fr 1fr; } }
.menu__cols .menu__cat:first-child { margin-top: var(--space-16); }

/* Localisation bas de menu */
.menu__loc {
  margin-top: var(--space-48);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-red);
  line-height: 1.8;
}

.menu__download { margin-top: var(--space-48); }

/* Wordmark vertical géant (droite) — décoratif */
.menu__wordmark {
  display: none;                      /* masqué sous 900px */
  color: var(--color-red);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  line-height: .78;
  letter-spacing: -.02em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(5rem, 15vw, 13rem);
  justify-self: end;
  align-self: start;
}
@media (min-width: 900px) { .menu__wordmark { display: block; } }


/* =========================================================================
   20. STORY (page a-propos / notre histoire) — hero titre + bandeau citation.
   Réutilise .section-head et .media--split pour les blocs narratifs.
   ========================================================================= */
.story-hero { text-align: left; }
.story-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--color-red);
}
.story-hero__lead {
  margin-top: var(--space-24);
  max-width: 46ch;
  font-size: var(--fs-body-l);
}

/* Bandeau citation plein rouge (casse le crème) */
.story-quote { position: relative; overflow: hidden; text-align: center; }

/* Filigrane typographique « SALEMENT BON » ton sur ton, DERRIÈRE le texte */
.story-quote__bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .04em;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.story-quote__bg-line {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3.5rem, 13vw, 10rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: rgba(5, 5, 0, .12);          /* assombrit le rouge → ton sur ton subtil */
}
.story-quote__bg-line:nth-child(even) { transform: translateX(-6%); }
.story-quote__bg-line:nth-child(odd)  { transform: translateX(4%); }

.story-quote__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 20ch;
  margin-inline: auto;
}


/* =========================================================================
   21. STORY-INTRO — en-tête éditorial page « Notre histoire » (réf Oxbow).
   Label lieu (haut droite) · grande phrase centrée · colonne texte · signature.
   Typo Europa Light (charte, pas de serif). Surface crème.
   ========================================================================= */
.story-intro { text-align: center; }

.story-intro__place {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-red);
}

.story-intro__title {
  margin: clamp(var(--space-48), 9vw, var(--space-128)) auto 0;
  max-width: min(94%, 1200px);           /* large : 3 lignes pleines */
  font-family: var(--font-body);
  font-weight: var(--fw-light);          /* Europa Light — éditorial aéré */
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.375rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  text-align: center;
}
/* Sauts de ligne forcés (3 lignes) uniquement ≥768px ; wrap naturel en mobile */
.story-intro__title .br-lg { display: none; }
@media (min-width: 768px) { .story-intro__title .br-lg { display: inline; } }

.story-intro__body {
  max-width: 48ch;
  margin: clamp(var(--space-48), 7vw, var(--space-96)) auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.story-intro__body p { max-width: none; font-size: var(--fs-body-l); }

.story-intro__statement {
  margin: clamp(var(--space-48), 8vw, var(--space-96)) auto 0;
  max-width: 30ch;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  line-height: 1.25;
  text-wrap: balance;
}


/* =========================================================================
   22. STORY-FEATURE — bloc « Oxbow » (page Notre histoire) :
   gros titre pleine largeur + ligne méta + 2 images + bloc texte centré.
   ========================================================================= */
.story-feature { overflow-x: clip; }

.story-feature__title {
  font-family: var(--font-display);   /* Impact */
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 15vw, 13rem);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--color-red);
  white-space: nowrap;                /* déborde à droite, aligné à gauche */
}

.story-feature__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-16);
  padding-bottom: var(--space-24);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-black);
}
.story-feature__pop {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  margin-left: auto;
  min-width: min(48%, 320px);
}
.story-feature__leader {
  flex: 1;
  align-self: center;
  border-bottom: 2px dotted currentColor;
  opacity: .6;
}

.story-feature__media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
@media (min-width: 768px) {
  .story-feature__media { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
}
.story-feature__figure {
  margin: 0;
  aspect-ratio: 2 / 3; /* format natif des photos livrées (portrait, pas de crop) */
  border-radius: var(--radius-card);
  overflow: hidden;
}
.story-feature__figure .media__img { width: 100%; height: 100%; }

.story-feature__text {
  max-width: 46ch;
  margin: clamp(var(--space-48), 8vw, var(--space-96)) auto 0;
}
.story-feature__heading {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);        /* Europa Medium — éditorial (charte) */
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  line-height: 1.2;
  margin-bottom: var(--space-24);
}
.story-feature__body { display: flex; flex-direction: column; gap: var(--space-24); }
.story-feature__body p { max-width: none; font-size: var(--fs-body-l); }


/* =========================================================================
   23. CONTACT (page contact.html) — créatif, on-brand (Impact géant,
   pointillés rouges, wipe hover, bandeau rouge + filigrane). Pas de formulaire.
   ========================================================================= */
.contact-hero { overflow-x: clip; }

.contact-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-black);
}
.contact-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 0 rgba(183, 0, 0, .5);
}

.contact-hero__eyebrow {
  display: block;
  margin-top: var(--space-32);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-red);
}

.contact-hero__title {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(4rem, 18vw, 15rem);
  line-height: .85;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-red);
}

.contact-hero__lead {
  margin-top: var(--space-32);
  max-width: 34ch;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.35;
}

/* --- Canaux de contact : index éditorial (num · label · email · desc · ↗) --- */
.contact-list { border-top: 2px dashed var(--color-red); }

.contact-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-32) var(--space-12);
  border-bottom: 2px dashed var(--color-red);
  color: var(--color-black);
  text-decoration: none;
  overflow: hidden;
}
.contact-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 0;
}
.contact-item > * { position: relative; z-index: 1; transition: color var(--dur-fast) var(--ease-out); }

.contact-item__num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.375rem;
  color: var(--color-red);
  min-width: 1.8em;
}
.contact-item__main { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); }
.contact-item__label {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
}
.contact-item__value {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  word-break: break-word;
}
.contact-item__desc { font-family: var(--font-body); font-size: var(--fs-small); }
.contact-item__arrow { font-size: 1.3em; transition: transform var(--dur-fast) var(--ease-out); }

.contact-item:hover::before,
.contact-item:focus-visible::before { transform: scaleX(1); }
.contact-item:hover, .contact-item:focus-visible,
.contact-item:hover .contact-item__num, .contact-item:focus-visible .contact-item__num { color: var(--color-cream); }
.contact-item:hover .contact-item__label, .contact-item:focus-visible .contact-item__label { opacity: .8; }
.contact-item:hover .contact-item__arrow, .contact-item:focus-visible .contact-item__arrow { transform: translate(4px, -4px); }

/* --- Réseaux : bandeau rouge + filigrane, grosses lignes + compteurs --- */
.contact-social { position: relative; overflow: hidden; }
.contact-social__inner { position: relative; z-index: 1; }
.contact-social__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: var(--space-24);
}
.contact-social__list { display: flex; flex-direction: column; }
.contact-social__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 2px solid rgba(243, 238, 218, .25);
  color: var(--color-cream);
  text-decoration: none;
}
.contact-social__item:first-child { border-top: 2px solid rgba(243, 238, 218, .25); }
.contact-social__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out);
}
.contact-social__count {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: .1em;
  opacity: .8;
}
.contact-social__item:hover .contact-social__name { transform: translateX(12px); }
.contact-social__cta { margin-left: auto; align-self: center; font-size: 1.5em; }


/* =========================================================================
   24. BTN-ORDER — boutons de commande aux couleurs des plateformes.
   Petit format, taille de texte = nav__link (fs-small).
   ========================================================================= */
.btn-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 2px solid transparent;      /* meme hauteur que la variante outline */
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-order:hover { transform: translateY(-2px); filter: brightness(.96); }
.btn-order:active { transform: translateY(0); }

/* « Voir le menu » — outline, meme format que les 2 boutons de commande */
.btn-order--outline {
  background: transparent;
  border-color: var(--color-black);
  color: var(--color-black);
}
.btn-order--outline:hover { filter: none; background: var(--color-black); color: var(--color-cream); }

.btn-order--deliveroo { background: #00CCBC; color: #ffffff; }   /* teal Deliveroo, texte blanc */


/* Boutons de commande sous la légende du « moment » (home) */
.moment__order {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-24);
}