/* =========================================================
   Mon Poulet Adoré — couche de finition « éditoriale »
   Chargée en dernier. Objectif : passer d'un rendu « gabarit »
   (tout en cartes, titres timides) à un rendu de maison de
   qualité : typographie affirmée, filets plutôt que boîtes,
   respiration, variation de rythme.
   ========================================================= */

/* ---------------------------------------------------------
   1. TYPOGRAPHIE — Fraunces est une police variable : on
   exploite son axe optique (opsz) pour que les grands titres
   aient des empattements plus fins et un dessin plus élégant.
   --------------------------------------------------------- */
h1, h2 {
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  letter-spacing: -0.032em;
  line-height: 1.02;
}
h3, h4 { font-variation-settings: "opsz" 60; letter-spacing: -0.018em; }

.section-head h2,
.story__body h2,
.quality__body h2,
.provenance-section .provenance__body h2,
.interview__tete h2 {
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
}
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 5.1rem); }

/* Chapô : plus grand, plus aéré, largeur de lecture maîtrisée */
.section-head p,
.story__body > p,
.quality__body > p {
  font-size: clamp(1.05rem, 1.9vw, 1.18rem);
  line-height: 1.68;
  max-width: 58ch;
}
.section-head--center p { margin-inline: auto; }

/* Sur-titres : plus discrets, plus espacés — un détail de finition */
.eyebrow {
  font-size: .74rem;
  letter-spacing: .24em;
  margin-bottom: var(--space-5);
}

/* ---------------------------------------------------------
   2. DÉ-BOÎTER — remplacer les cartes par des filets et de
   l'espace. C'est le changement qui « déscolarise » le plus
   une mise en page.
   --------------------------------------------------------- */

/* Les 3 étapes : plus de cartes, un chiffre de grande taille
   et un filet supérieur, comme dans un magazine. */
.steps { gap: clamp(var(--space-5), 4vw, var(--space-7)); }
.step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-5) 0 0;
}
.step__num {
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
  color: var(--red);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-variation-settings: "opsz" 144;
  line-height: 1;
  margin-bottom: var(--space-4);
  display: block;
}
.step h3 { font-size: 1.45rem; }

/* La carte : plus de boîte englobante, juste le contenu */
.menu {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  padding-top: clamp(var(--space-6), 5vw, var(--space-8));
}
.menu__list li { border-bottom-color: var(--line); }
.menu__item--star { background: transparent; position: relative; }
.menu__item--star::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-4)); top: 0; bottom: 0;
  width: 3px; background: var(--red); border-radius: 2px;
}

/* Recettes et marchés : filets fins, pas d'ombre lourde */
.recipe { box-shadow: none; border-color: var(--line); }
.recipe[open] { box-shadow: none; border-color: var(--line-strong); }
.market-card {
  box-shadow: none;
  border-color: var(--line);
}
.market-card:hover { box-shadow: var(--shadow-md); }

/* Pied de « Réserver » : filet, pas carte */
.reserve__foot {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-6) 0 0;
}

/* ---------------------------------------------------------
   3. VARIER LE RYTHME — tout n'est plus centré. Certaines
   sections passent en alignement à gauche avec un filet,
   ce qui crée une alternance éditoriale.
   --------------------------------------------------------- */
.recipes .section-head--center,
.videos .section-head--center {
  text-align: left;
  margin-inline: 0;
  max-width: 40rem;
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-5);
}
.recipes .section-head--center p,
.videos .section-head--center p { margin-inline: 0; }
.recipes .section-head--center .eyebrow::before,
.videos .section-head--center .eyebrow::before { display: inline-block; }

/* ---------------------------------------------------------
   4. HERO — on retire la photo pivotée (effet un peu daté) et
   on laisse l'image filer vers le bord droit : cadrage
   asymétrique, beaucoup plus affirmé.
   --------------------------------------------------------- */
.hero__photo { rotate: 0deg; }

@media (min-width: 1100px) {
  /* L'image file jusqu'au bord droit de la fenêtre.
     On ne peut pas utiliser de pourcentage ici : il se rapporterait à
     la cellule de grille, pas au conteneur. On calcule donc la marge
     restante entre le conteneur et le bord de la fenêtre. */
  .hero__art {
    /* +18px : 100vw inclut la barre de défilement, pas la zone visible.
       Ce léger débordement garantit que l'image touche vraiment le bord
       (il est rogné sans dommage par overflow-x: hidden). */
    margin-right: calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--space-5) + 18px));
  }
  .hero__photo {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}

/* Chiffres du hero : alignés sur un filet, plus sobres */
.hero__meta dt {
  font-variation-settings: "opsz" 144;
  font-size: 1.9rem;
}
.hero__meta dd { font-size: .78rem; letter-spacing: .14em; }

/* ---------------------------------------------------------
   5. DÉTAILS DE FINITION
   --------------------------------------------------------- */

/* Liens de texte : soulignement fin qui s'anime */
.story__body a, .provenance__body a, .qa__a a, .step a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--ease);
}
.story__body a:hover, .provenance__body a:hover, .qa__a a:hover, .step a:hover {
  background-size: 100% 1px;
}

/* Boutons : moins « pilule », un rayon plus retenu = plus sérieux */
.btn { border-radius: var(--radius-md); letter-spacing: .01em; }
.nav__phone { border-radius: var(--radius-md); }

/* Citation d'ouverture : marque typographique plus fine */
.story__quote {
  border-left-width: 2px;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.38;
}

/* Étiquette sur la photo du savoir-faire : plus discrète */
.story__tag {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  font-size: .78rem; letter-spacing: .06em;
}

/* Pied de page : un filet haut pour asseoir la fin de page */
.site-footer { border-top: 3px solid var(--red); }

/* ---------------------------------------------------------
   6. RESPIRATION — les sections gagnent en amplitude sur
   grand écran ; l'espace est le premier signe de qualité.
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .section { padding-block: clamp(var(--space-9), 10vw, 150px); }
}

/* =========================================================
   7. BANDEAU « OÙ SOMMES-NOUS AUJOURD'HUI »
   Information vivante : le site répond à la première question
   que se pose un client — « où sont-ils, là, maintenant ? »
   ========================================================= */
.aujourdhui {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.aujourdhui[hidden] { display: none; }
.aujourdhui__inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
}
.aujourdhui__pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-mute); flex: none;
}
.aujourdhui--ouvert .aujourdhui__pastille {
  background: #1F8055;
  box-shadow: 0 0 0 0 rgba(31,128,85,.55);
  animation: pulseOuvert 2.4s ease-out infinite;
}
@keyframes pulseOuvert {
  70%  { box-shadow: 0 0 0 10px rgba(31,128,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,128,85,0); }
}
@media (prefers-reduced-motion: reduce) {
  .aujourdhui--ouvert .aujourdhui__pastille { animation: none; }
}
.aujourdhui__texte {
  margin: 0; font-weight: 600; color: var(--ink);
  font-size: clamp(.94rem, 1.7vw, 1.05rem);
}
.aujourdhui__lien {
  margin-left: auto; color: var(--red-deep); font-weight: 600;
  font-size: .92rem; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.aujourdhui__lien:hover { border-bottom-color: currentColor; }
@media (max-width: 560px) {
  .aujourdhui__lien { margin-left: 0; }
}

/* =========================================================
   8. BARRE D'APPEL FIXE (mobile)
   Sur téléphone, le pouce est en bas : l'action principale
   doit y être en permanence.
   ========================================================= */
.barre-appel { display: none; }

@media (max-width: 880px) {
  .barre-appel {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .barre-appel__tel {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
    min-height: 52px; border-radius: var(--radius-md);
    background: var(--red); color: #fff; text-decoration: none;
    font-weight: 600; font-size: 1.02rem;
    box-shadow: var(--shadow-md);
  }
  .barre-appel__tel svg { width: 19px; height: 19px; }
  .barre-appel__tel:active { background: var(--red-deep); }
  /* le pied de page ne doit pas passer sous la barre */
  .site-footer { padding-bottom: 84px; }
}

/* =========================================================
   9. NUMÉROTATION ÉDITORIALE DES SECTIONS
   Le numéro remplace le filet du sur-titre : repère de lecture
   discret qui structure la page comme un sommaire de magazine.
   ========================================================= */
.eyebrow[data-num] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}
.eyebrow[data-num]::before {
  content: attr(data-num);
  width: auto; height: auto; background: none;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--red);
  /* petit filet sous le numéro, aligné optiquement */
  border-bottom: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  padding-bottom: 2px;
}
/* les en-têtes centrés gardent le numéro centré avec le texte */
.section-head--center .eyebrow[data-num] { justify-content: center; }

/* =========================================================
   10. IMAGES WebP
   Chaque image est servie en WebP (~45 % plus léger) avec le
   JPEG en secours pour les navigateurs anciens. `display:
   contents` fait disparaître la balise <picture> du calcul de
   mise en page : la structure reste identique à avant.
   ========================================================= */
picture { display: contents; }

/* Emplacement précis sur chaque marché — l'information qui évite au client de chercher */
.market-card__lieu {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: var(--space-3);
  font-size: .93rem; color: var(--ink-soft); font-weight: 500;
}
.market-card__lieu::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 3px;
  background: var(--red);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* =========================================================
   11. CARTES MARCHÉ AVEC PHOTO EN FOND
   La photo de chaque ville habille sa vignette. Un voile
   dégradé garantit la lisibilité quelle que soit l'image.
   ========================================================= */
.market-card--photo {
  position: relative;
  overflow: hidden;
  background: #14100B;
  border-color: rgba(246,241,231,.14);
  min-height: 330px;
  isolation: isolate;
}

/* la balise <picture> est en display:contents ailleurs : on la rétablit ici */
.market-card__fond {
  display: block;
  position: absolute; inset: 0;
  z-index: 0;
}
.market-card__fond img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--ease), filter 400ms var(--ease);
  filter: brightness(.62) saturate(1.05);
}
.market-card--photo:hover .market-card__fond img {
  transform: scale(1.09);
  filter: brightness(.7) saturate(1.1);
}

/* voile : sombre en bas, léger en haut — le texte se lit toujours */
.market-card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(20,16,11,.34) 0%,
    rgba(20,16,11,.62) 42%,
    rgba(20,16,11,.88) 100%);
}

/* le contenu passe au-dessus du voile */
.market-card--photo > *:not(.market-card__fond) { position: relative; z-index: 2; }

/* liseré de marque en haut, conservé */
.market-card--photo::before { z-index: 3; }

/* textes en clair */
.market-card--photo .market-card__ico   { color: var(--gold-clair); }
.market-card--photo .market-card__day   { color: var(--gold-clair); }
.market-card--photo .market-card__town  { color: var(--cream); }
.market-card--photo .market-card__hours { color: var(--cream); }
.market-card--photo .market-card__lieu  { color: rgba(246,241,231,.92); }
.market-card--photo .market-card__note  { color: rgba(246,241,231,.78); }
.market-card--photo .market-card__more  { color: var(--cream); }
.market-card--photo .market-card__hours::before { background: var(--gold-clair); }
.market-card--photo .market-card__lieu::before  { background: var(--gold-clair); }

.market-card--photo:hover { box-shadow: var(--shadow-lg); border-color: rgba(246,241,231,.3); }

/* Le jour devient une pastille pleine : lisible sur n'importe quelle photo,
   là où un simple texte doré disparaissait sur les zones claires. */
.market-card--photo .market-card__day {
  display: inline-block;
  background: var(--cream);
  color: var(--red);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: .74rem;
  letter-spacing: .16em;
  box-shadow: 0 2px 10px rgba(20,16,11,.35);
}
/* l'icône faisait doublon avec la photo et se perdait dans l'image */
.market-card--photo .market-card__ico { display: none; }
/* voile un peu plus dense en haut, où se pose la pastille */
.market-card--photo::after {
  background: linear-gradient(180deg,
    rgba(20,16,11,.46) 0%,
    rgba(20,16,11,.66) 42%,
    rgba(20,16,11,.90) 100%);
}

/* la carte est en flex colonne : sans cela la pastille s'étire sur toute la largeur */
.market-card--photo .market-card__day { align-self: flex-start; width: fit-content; }

/* Vidéos hébergées sur le site : la balise <video> remplace la vignette au clic */
.video-embed video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; background: #000;
  display: block;
}

/* =========================================================
   12. BANDES VIDÉO PLEINE LARGEUR
   La vidéo devient un moment du défilement, pas une vignette :
   elle se lance quand elle entre à l'écran et s'arrête quand
   elle en sort — rien n'est téléchargé avant.
   ========================================================= */
.videoband {
  position: relative;
  height: clamp(380px, 56vw, 620px);
  overflow: hidden;
  background: #14100B;
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.videoband__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.78) saturate(1.06);
}
.videoband__voile {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(20,16,11,.30) 0%, rgba(20,16,11,.10) 34%,
    rgba(20,16,11,.55) 74%, rgba(20,16,11,.86) 100%);
}
.videoband__cap {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--space-5) clamp(var(--space-6), 5vw, var(--space-8));
  color: var(--cream);
}
.videoband__cap .eyebrow { color: var(--cream); }
.videoband__cap .eyebrow::before { background: var(--cream); }
.videoband__cap p {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.18; letter-spacing: -0.02em;
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(20,16,11,.5);
}

/* filet de marque en haut et en bas de la bande */
.videoband::before,
.videoband::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: var(--red); z-index: 3;
}
.videoband::before { top: 0; }
.videoband::after  { bottom: 0; }

/* mouvement réduit : on garde l'image d'aperçu, sans lecture */
@media (prefers-reduced-motion: reduce) {
  .videoband__media { filter: brightness(.8); }
}

/* Bouton de son sur les bandes vidéo — le son reste coupé par défaut
   (les navigateurs bloquent la lecture automatique avec le son). */
.videoband__son {
  position: absolute; z-index: 4;
  right: clamp(var(--space-4), 4vw, var(--space-7));
  bottom: clamp(var(--space-5), 4vw, var(--space-7));
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid rgba(246,241,231,.42);
  border-radius: var(--radius-pill);
  background: rgba(20,16,11,.52);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: .86rem; font-weight: 600; letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform var(--dur) var(--ease);
}
.videoband__son:hover { background: rgba(20,16,11,.72); border-color: var(--cream); transform: translateY(-2px); }
.videoband__son:active { transform: translateY(0); }
.videoband__son svg { width: 19px; height: 19px; flex: none; }

/* une seule icône visible selon l'état */
.videoband__son .ico-son { display: none; }
.videoband__son[aria-pressed="true"] .ico-son { display: block; }
.videoband__son[aria-pressed="true"] .ico-muet { display: none; }
.videoband__son[aria-pressed="true"] {
  background: var(--red); border-color: var(--red);
}
.videoband__son-txt { text-transform: uppercase; }

@media (max-width: 520px) {
  .videoband__son-txt { display: none; }
  .videoband__son { padding: 0 14px; }
}

/* =========================================================
   13. NOUS SUIVRE — les réseaux, en filets plutôt qu'en cartes
   ========================================================= */
.reseaux__grille {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.reseau {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "ico nom fleche" "ico pseudo fleche";
  align-items: center;
  column-gap: var(--space-4); row-gap: 2px;
  padding: var(--space-5) var(--space-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color .2s ease;
}
.reseau:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--red) 32%, #fff);
}
.reseau__ico {
  grid-area: ico;
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--red-soft); color: var(--red);
}
.reseau__ico svg { width: 24px; height: 24px; }
.reseau__nom {
  grid-area: nom;
  font-family: var(--font-display); font-variation-settings: "opsz" 60;
  font-size: 1.28rem; font-weight: 600; color: var(--ink); line-height: 1.1;
}
.reseau__pseudo {
  grid-area: pseudo;
  font-size: .92rem; color: var(--ink-mute);
}
.reseau__fleche {
  grid-area: fleche;
  width: 11px; height: 11px;
  border: solid var(--red); border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: translate var(--dur) var(--ease);
}
.reseau:hover .reseau__fleche { translate: 4px 0; }

/* TikTok : tant que le compte n'est pas fourni, le lien reste inactif */
.reseau--tiktok[href="#"] { opacity: .5; pointer-events: none; }

@media (max-width: 860px) { .reseaux__grille { grid-template-columns: 1fr; } }

/* =========================================================
   14. AUDIT DE COHÉRENCE — hiérarchie des moments forts
   Il y avait quatre bandeaux pleine largeur de hauteur quasi
   identique : on s'y perdait. Il en reste trois, différenciés.
   ========================================================= */

/* Les bandes vidéo deviennent les vrais temps forts */
.videoband { height: clamp(440px, 62vw, 720px); }

/* La citation reste basse et resserrée : une respiration, pas un temps fort */
.pullquote { padding-block: clamp(var(--space-7), 6vw, var(--space-8)); }
.pullquote blockquote { font-size: clamp(1.5rem, 4vw, 2.5rem); }

/* --- Parcours de commande en une ligne (au lieu de trois cartes) --- */
.parcours {
  list-style: none; margin: 0 0 var(--space-7); padding: var(--space-6) 0 0;
  border-top: 1px solid var(--line-strong);
  display: flex; flex-wrap: wrap; gap: var(--space-4) clamp(var(--space-5), 4vw, var(--space-8));
}
.parcours li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 1.05rem; color: var(--ink); font-weight: 500;
}
.parcours span {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
}
.parcours a { color: var(--red-deep); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid currentColor; }

/* --- Contact : la photo de l'enseigne en fond + le mot de la fin --- */
.contact { position: relative; overflow: hidden; isolation: isolate; }
.contact__fond {
  display: block; position: absolute; inset: 0; z-index: 0;
}
.contact__fond img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.34) saturate(.85);
}
.contact::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,16,11,.86) 0%, rgba(20,16,11,.78) 100%);
}
.contact > .container { position: relative; z-index: 2; }

.contact__mot {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display); font-variation-settings: "opsz" 144;
  font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.2; color: var(--gold-clair);
  max-width: 20ch;
}
.contact__horaires { font-size: 1.15rem; line-height: 1.5; }
.contact__horaires strong {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-display); font-size: 1.6rem; color: var(--cream); font-weight: 600;
}
.contact__renvoi { margin-top: var(--space-5); }
.contact__renvoi a {
  color: var(--gold-clair); font-weight: 600; font-size: .98rem;
  text-decoration: none; border-bottom: 1px solid currentColor;
}

/* CORRECTIF d'alignement : la ligne mise en avant gardait la marge négative
   de son ancien style en carte, ce qui la décalait de 16 px vers la gauche.
   Elle s'aligne désormais sur les autres ; le filet rouge se pose en dehors. */
.menu__item--star {
  margin-inline: 0;
  padding-inline: 0;
}
.menu__item--star::before {
  left: calc(-1 * var(--space-4));
}

/* la citation de fin ne doit pas laisser « famille. » seul sur sa ligne */
.contact__mot { max-width: 28ch; text-wrap: balance; }

/* =========================================================
   15. CADRAGE GRAND ÉCRAN
   Les vidéos sont verticales (720x1280). Étirées sur toute la
   largeur, on n'en voyait que 26 % de la hauteur. Elles ont
   désormais leur vrai format, dans un cadre, le texte à côté.
   ========================================================= */
.videoband {
  height: auto;
  display: block;
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
}
.videoband__fond {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(34px) brightness(.42) saturate(1.05);
  transform: scale(1.1);            /* évite les bords clairs du flou */
}
.videoband__inner {
  position: relative; z-index: 2;
  display: grid; gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
}
.videoband__cadre {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 340px; width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #14100B;
  box-shadow: var(--shadow-lg);
}
.videoband__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                /* le cadre a le ratio de la vidéo : aucune perte */
  filter: none;
}
.videoband__cap {
  position: relative; z-index: 2;
  max-width: none; margin: 0; padding: 0;
  text-align: center;
}
.videoband__cap .eyebrow { justify-content: center; }

/* le bouton de son se pose dans le cadre, plus dans toute la bande */
.videoband__son {
  right: var(--space-4); bottom: var(--space-4);
  min-height: 40px; padding: 0 14px; font-size: .8rem;
}

@media (min-width: 900px) {
  .videoband__inner {
    grid-template-columns: 340px 1fr;
    gap: clamp(var(--space-7), 5vw, var(--space-9));
  }
  .videoband__cadre { margin-inline: 0; }
  .videoband__cap { text-align: left; }
  .videoband__cap .eyebrow { justify-content: flex-start; }
  .videoband__cap p { max-width: 18ch; font-size: clamp(1.8rem, 3.4vw, 3rem); }
}

/* --- Le hero doit tenir dans l'écran --- */
@media (min-width: 1100px) {
  .hero__photo { max-height: 74svh; }
}

/* --- Longueur de ligne : 90 caractères, c'était trop pour l'œil --- */
.qa__a, .recipe__intro, .recipe__body ul, .recipe__body ol { max-width: 68ch; }
.interview__wrap { max-width: 52rem; }

/* CORRECTIF longueur de ligne : l'unité « ch » se fonde sur la largeur du
   zéro, plus large que la moyenne — 68ch donnaient encore 93 caractères.
   Valeur explicite : ~38rem ≈ 70 caractères, la zone de confort. */
.qa__a, .recipe__intro, .recipe__body ul, .recipe__body ol { max-width: 38rem; }
.interview__wrap { max-width: 42rem; }
.recipes__grid { max-width: 42rem; }

/* =========================================================
   16. RETOUR À LA PRÉSENTATION MOBILE D'ORIGINE
   Le cadrage ne posait problème que sur grand écran. Sur
   téléphone, la vidéo reprend toute la largeur, le texte
   par-dessus — comme avant. Le cadre 9:16 et les deux
   colonnes ne s'appliquent qu'à partir de 900 px.
   ========================================================= */
@media (max-width: 899px) {
  .videoband {
    height: clamp(440px, 62vw, 720px);
    padding-block: 0;
    display: flex; align-items: flex-end;
  }
  .videoband__fond { display: none; }

  .videoband__inner {
    position: static;
    display: block;
    width: 100%;
    padding-inline: var(--space-5);
    padding-bottom: clamp(var(--space-5), 5vw, var(--space-7));
  }

  /* la vidéo redevient le fond plein cadre */
  .videoband__cadre {
    position: absolute; inset: 0;
    aspect-ratio: auto;
    max-width: none; width: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 0;
  }
  .videoband__voile {
    display: block;
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
      rgba(20,16,11,.30) 0%, rgba(20,16,11,.10) 34%,
      rgba(20,16,11,.55) 74%, rgba(20,16,11,.86) 100%);
  }
  .videoband__cap {
    position: relative; z-index: 2;
    text-align: left;
    padding: 0;
  }
  .videoband__cap .eyebrow { justify-content: flex-start; }
  .videoband__cap p { max-width: 22ch; }

  /* le bouton de son revient dans le coin de la bande */
  .videoband__son {
    right: var(--space-5);
    bottom: clamp(var(--space-5), 5vw, var(--space-7));
    min-height: 46px; padding: 0 18px; font-size: .86rem;
    z-index: 4;
  }
}

/* sur grand écran le voile n'a plus lieu d'être : la vidéo est dans son cadre */
@media (min-width: 900px) { .videoband__voile { display: none; } }

/* CORRECTIF — bouton de son inopérant sur téléphone.
   `.videoband__cadre` portait `z-index: 0`, ce qui crée un contexte
   d'empilement : le `z-index: 4` du bouton restait prisonnier à
   l'intérieur, et la légende (z-index 2) captait le clic.
   En repassant le cadre à `auto`, il ne crée plus de contexte :
   vidéo (auto) < voile (1) < légende (2) < bouton (4). */
@media (max-width: 899px) {
  .videoband__cadre { z-index: auto; }
}

/* ============================================================
   FAQ — pages ville
   Réponses courtes et factuelles, lisibles par les visiteurs
   comme par les moteurs de réponse (schéma FAQPage).
   Style : filets fins, pas de cartes, conforme au reste du site.
   ============================================================ */
.faq {
  max-width: 46rem;
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color 220ms var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--red); }
/* le chevron est décoratif : dessiné en CSS, il pivote à l'ouverture */
.faq__q::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 260ms var(--ease);
}
.faq__item[open] .faq__q { color: var(--red); }
.faq__item[open] .faq__q::after { transform: translateY(2px) rotate(-135deg); }
.faq__r {
  padding: 0 0 var(--space-5);
  max-width: 40rem;
}
.faq__r p {
  margin: 0;
  color: var(--ink-soft);
  line-height: var(--leading-body);
}
.faq__q:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* la FAQ reste ouverte et lisible à l'impression */
@media print {
  .faq__r { display: block !important; }
}