/* =========================================================
   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,
.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{
  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{ gap: clamp(var(--space-5), 4vw, var(--space-7)); }
/* 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{
  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{ margin-inline: 0; }
.recipes .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). */
  }
.hero__photo{
    aspect-ratio: 3 / 4;
    border-radius: 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{
  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{
  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; }
/* =========================================================
   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{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* TikTok : tant que le compte n'est pas fourni{ opacity: .5; pointer-events: none; }
/* =========================================================
   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; }
}

.ust__grille{
  display: grid;
  /* 20rem plutot que 15 : sur un conteneur de 1200 px on obtient
     3 colonnes, donc 3 + 3 pour six ustensiles. En 4 colonnes la
     seconde rangee restait bancale avec deux elements isoles. */
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-7) var(--space-6);
  margin-top: var(--space-8);
}
.ust{
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.ust__num{
  position: absolute;
  top: var(--space-4);
  right: 0;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--paper-3);
  line-height: 1;
  pointer-events: none;
}
.ust__cat{
  margin: 0 0 var(--space-2);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
}
.ust__nom{
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  max-width: 12em;
}
.ust__conseil{
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: var(--leading-body);
  max-width: 24rem;
}
.ust__lien{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--red-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--red-soft);
  padding-bottom: 2px;
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}
.ust__lien::after{ content: "→"; transition: transform 220ms var(--ease); }
.ust__lien:hover{ border-color: var(--red); }
.ust__lien:hover::after{ transform: translateX(4px); }
/* Tant qu'aucune adresse n'est fournie{
  color: var(--ink-mute);
  border-bottom-style: dashed;
  border-color: var(--line-strong);
  cursor: default;
}
/* La mention d'affiliation est une obligation légale : discrète, mais
   jamais cachée. */
.ust__mention{
  margin: var(--space-8) auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-mute);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
/* ---- Appel vers le calculateur, ce qui serait ecrit apres disparaitrait au prochain
   lancement du generateur. */
.calc-appel{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-5);
  margin-top: clamp(var(--space-7), 5vw, var(--space-9));
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background: var(--paper-2); border-left: 3px solid var(--red);
  border-radius: var(--radius-lg); text-decoration: none; color: var(--ink);
  transition: .18s;
}
.calc-appel:hover{ background: #F0E5D0; }
.calc-appel__t{ max-width: 40rem; line-height: var(--leading-body);
                 color: var(--ink-soft); font-size: .98rem; }
.calc-appel__t b{ display: block; font-family: var(--font-display);
                   font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 600;
                   color: var(--ink); margin-bottom: 4px; letter-spacing: -.01em; }
.calc-appel__b{ flex: 0 0 auto; font-weight: 600; font-size: .92rem;
                 color: var(--red); white-space: nowrap; }
.calc-appel__b::after{ content: " →"; }
/* ---- L'outil, mis a part dans le menu -----------------------------------
   Les autres entrees sont des ancres de la page d'accueil ; celle-ci mene
   ailleurs. On la detache donc : un filet vertical la separe, elle est plus
   petite, en ocre et non en encre, et son soulignement dore est neutralise.
   Elle se lit comme un a-cote{ position: relative; padding-left: var(--space-5); }
.nav__links .nav__outil::before{
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 1.1em;
  background: var(--line-strong);
}
.nav__links .nav__outil a{
  font-size: .82rem; font-weight: 600; color: var(--gold);
  letter-spacing: .01em; white-space: nowrap;
}
.nav__links .nav__outil a::after{ background: var(--gold); height: 1px; }
/* Menu telephone : meme logique, un filet au-dessus et une teinte differente. */
.nav-drawer__panel .drawer__outil{
  margin-top: var(--space-4); padding-top: var(--space-5);
  border-top: 1px solid var(--line-strong);
  font-size: .92rem; color: var(--gold);
}
/* ---- Correctifs d'audit (design), Marches et
   Ustensiles : `.section-head--center .eyebrow::before{ display:none }
 et
   celle-ci ne redeclarait pas `display`. */
.eyebrow[data-num]::before{ display: inline-block; }
/* 2. `--gold-clair` etait utilisee six fois mais definie nulle part : les
   pastilles d'horaires et epingles de lieu des cartes marche etaient
   invisibles depuis leur creation. */
:root{ --gold-clair: #E8C27A; }
/* 3. Le lien « Cuisson » du menu etait en or #C6892F sur creme : 2,87:1,
   sous le seuil AA (4,5:1). Or fonce = 4,9:1 a la meme taille. */
.nav__links .nav__outil a{ color: #96601A; }
.nav-drawer__panel .drawer__outil{ color: #96601A; }
/* 4. Zones tactiles : les liens « Voir le produit » (CTA d'affiliation) et
   « Tous nos marches » faisaient ~24 px de haut. On les amene a 44 px sans
   changer leur dessin : le padding etend la zone cliquable, pas le trait. */
.ust__lien, .aujourdhui__lien{
  display: inline-flex; align-items: center; min-height: 44px;
}
/* 5. Le badge IGP (argument de vente) etait a 9,9 px, illisible sur
   telephone. */
.menu__name em{ font-size: .74rem; }



/* Le menu comptait desormais 7 entrees : « Le savoir-faire » et « La
   rencontre » passaient sur deux lignes et dechiraient la barre. On interdit
   la cesure et on resserre l'espacement pour que tout tienne sur une ligne. */
.nav__links { gap: clamp(var(--space-4), 1.6vw, var(--space-6)); }
.nav__links a { white-space: nowrap; }


/* ---- Le marche du jour, dans le hero -----------------------------------
   L'information numero un d'un commerce ambulant etait sous le premier
   ecran. Rempli par script.js (meme calcul que le bandeau) ; masque sans
   JavaScript, ou le bandeau et son texte de repli restent la reference. */
.hero__jour {
  text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin: var(--space-5) 0 0; padding: .5rem 1rem;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: .92rem; font-weight: 600; color: var(--ink);
}
.hero__jour-pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); flex: 0 0 auto;
}
.hero__jour:hover { border-color: var(--gold); }
.hero__jour--ouvert .hero__jour-pastille {
  background: #2E9C57;
  animation: heroJourPulse 1.8s ease-in-out infinite;
}
@keyframes heroJourPulse {
  50% { box-shadow: 0 0 0 5px rgba(46, 156, 87, .18); }
}

/* ---- Correctifs d'affichage sur telephone ------------------------------
   1. Les trois pastilles de reseaux sociaux tenaient sur une seule ligne
   sans cesure : sur un ecran de 360 px, TikTok sortait du cadre. */
.contact__socials { flex-wrap: wrap; }

/* 2. La mascotte du bloc « Nos horaires » est posee en absolu, en debord du
   cadre. Sur grand ecran elle deborde dans le vide de la colonne ; une fois
   la grille empilee, elle retombait sur la pastille TikTok et se faisait
   couper par le bord de l'ecran. Sur telephone, on la remet dans le flux. */
@media (max-width: 880px) {
  .contact__mascot {
    position: static; rotate: 0deg;
    width: 72px; height: 72px;
    margin: 0 0 var(--space-4);
    box-shadow: none;
  }
}

/* 3. Le bouton d'appel du menu telephone heritait de `.nav-drawer a`
   (Fraunces 1,4 rem, aucun padding lateral, un filet dessous) : le numero
   passait a la ligne. La regle du bouton reprend la main. */
.nav-drawer__panel .btn {
  font-family: var(--font-sans); font-size: .98rem;
  padding: var(--space-4) var(--space-5);
  border-bottom: 0; text-align: center;
}

/* RACCORD RECETTES -> USTENSILES
   Chaque `.section` porte un padding vertical de 141 px sur grand écran.
   Deux sections qui se suivent additionnent donc leurs marges : 283 px de
   vide, ce qui se lit comme un trou quand les deux ont le même fond crème.
   On resserre uniquement CE raccord, sans toucher au rythme du reste du
   site. La classe est posée par ce script, pas par `:has()`, pour ne
   dépendre d'aucun support de navigateur. */
.section--serre { padding-bottom: clamp(var(--space-6), 3vw, var(--space-8)); }
.ustensiles { padding-top: clamp(var(--space-6), 3vw, var(--space-8)); }

/* Les photos produit ont des proportions très différentes : la pince est
   large et plate, la moufle presque deux fois plus haute que large. Une
   hauteur fixe avec `object-fit: contain` les remet toutes sur la même
   ligne de base, sans jamais les déformer ni les rogner. */
.ust__img {
  height: 11rem;
  margin-bottom: var(--space-4);
}
.ust__img picture { display: contents; }
/* PIÈGE : avec `width:auto; height:auto; max-height:100%` dans un conteneur
   flex, les images PLUS HAUTES QUE LARGES se réduisaient à zéro et
   disparaissaient — c'est exactement ce qui est arrivé à la fourchette et à
   la moufle, les deux seules au format vertical. Une boîte de dimensions
   explicites avec `object-fit: contain` est fiable quelle que soit la
   proportion, et `object-position` cale tout le monde sur la même ligne.
   Pas de `mix-blend-mode` : le fond des images est DÉJÀ le crème exact de
   la page, multiplier ne ferait que l'assombrir et dessiner un rectangle. */
.ust__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  display: block;
}

/* La vedette : un seul produit mis en avant, sans en faire une publicité.
   Fond légèrement teinté et filet rouge en tête — le vocabulaire du reste
   du site, jamais un encart marchand. */
.ust-vedette {
  display: grid;
  grid-template-columns: 15rem 1fr auto;
  gap: var(--space-6) var(--space-8);
  align-items: center;
  margin-top: var(--space-8);
  padding: var(--space-7);
  background: var(--paper-2);
  border-top: 3px solid var(--red);
}
/* La photo produit a été détourée puis posée sur le fond de ce bloc : le
   rectangle blanc du catalogue ne se voit pas, l'objet semble posé sur le
   papier. Le fichier est hébergé ici — aucune requête vers Amazon, donc
   aucune adresse IP de visiteur transmise à un tiers. */
.ust-vedette__img picture { display: contents; }
.ust-vedette__img img {
  width: 100%;
  height: auto;
  display: block;
}
.ust-vedette__nom {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
}
.ust-vedette__conseil {
  margin: 0;
  color: var(--ink-soft);
  line-height: var(--leading-body);
  max-width: 38rem;
}
.ust-vedette__conseil em { font-style: italic; color: var(--ink); }
/* Le paragraphe qui départage les deux appareils : un cran plus discret que
   l'argument principal, avec un filet qui le rattache aux deux boutons. */
.ust-vedette__choix {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: .96em;
}
.ust-vedette__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}
@media (max-width: 1040px) {
  .ust-vedette { grid-template-columns: 12rem 1fr; }
  .ust-vedette__actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
}

/* ------------------------------------------------------------------
   TÉLÉPHONE — fiches horizontales.
   En une colonne, chaque produit occupait une image pleine largeur PUIS
   son texte : la section faisait 3 600 px de haut, on scrollait sans fin.
   L'image passe à gauche en petite vignette, le texte à droite. C'est la
   disposition d'une liste de produits, et elle divise la hauteur par deux
   sans rien retirer du contenu.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .ust-vedette { grid-template-columns: 1fr; padding: var(--space-6); }
  .ust-vedette__img { max-width: 9.5rem; margin-inline: auto; }
  .ust-vedette__actions { grid-column: 1; }

  .ust__grille { gap: var(--space-6); }
  .ust {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    column-gap: var(--space-5);
    align-items: start;
  }
  .ust__img {
    grid-column: 1;
    grid-row: 1 / span 4;      /* la vignette longe tout le bloc de texte */
    height: 5.5rem;
    margin-bottom: 0;
    position: sticky;
    top: var(--space-5);
  }
  .ust__img img { object-position: center top; }
  .ust__cat, .ust__nom, .ust__conseil, .ust__lien { grid-column: 2; }
  .ust__nom { max-width: none; font-size: 1.18rem; }
  /* Le grand chiffre gênerait le texte dans une colonne étroite. */
  .ust__num { display: none; }
}

/* FIN USTENSILES (genere) */


/* ---- Espace pro (préprod). Le tiroir du téléphone doit pouvoir défiler et
   montrer tous ses liens : sur un iPhone, les six entrées en 1,4 rem plus les
   deux liens outils et le bouton d'appel dépassaient l'écran, et « Espace pro »
   restait invisible. Les deux liens outils se suivent sans second filet. ---- */
.nav-drawer__panel{ overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nav-drawer__panel .drawer__outil + .drawer__outil{ margin-top: 0; padding-top: var(--space-3); border-top: 0; }
@media (max-height: 820px){
  .nav-drawer a{ font-size: 1.2rem; padding: 10px 0; }
  .nav-drawer__panel{ padding-top: var(--space-5); gap: 4px; }
  .nav-drawer__panel .drawer__outil{ margin-top: var(--space-3); padding-top: var(--space-4); }
}