/* =========================================================
   Mon Poulet Adoré — couche « signature »
   Chargée après styles-pro.css. Objectif : le niveau de
   finition des sites primés, sans changer l'identité —
   même crème, même rouge, même Fraunces. On ajoute du
   mouvement maîtrisé, pas des effets.
   Tout est écrit à la main dans les jetons existants.
   ========================================================= */

/* ---------------------------------------------------------
   0. COURBES — une seule signature de mouvement pour tout
   le site. C'est ce qui fait qu'un site « se tient ».
   --------------------------------------------------------- */
:root{
  --ease-sig:  cubic-bezier(.22, 1, .36, 1);   /* sortie longue, très douce */
  --ease-lame: cubic-bezier(.76, 0, .24, 1);   /* symétrique, pour les masques */
  --dur-sig: 720ms;
}

/* =========================================================
   0 bis. FLUIDITÉ — les trois vrais coupables du défilement
   qui accroche. Aucun n'est une animation : ce sont des
   effets de flou que le navigateur doit RECALCULER à chaque
   image. Les supprimer ne change presque rien à l'œil et
   change tout à la main.
   ========================================================= */

/* (1) L'en-tête fixe floutait tout ce qui passait dessous, 60 fois
   par seconde, sur toute la largeur de l'écran. Sur un fond crème,
   un aplat opaque est visuellement équivalent — et gratuit. */
.site-header.scrolled{
  background: var(--paper);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* (2) Même chose pour la barre d'appel fixe du téléphone. */
.barre-appel{
  background: var(--paper);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* (3) L'étiquette posée sur la photo d'Alexis se refloutait
   pendant la parallaxe de cette photo. */
.story__tag{
  background: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* `will-change` réserve de la mémoire graphique en permanence.
   GSAP le pose lui-même le temps d'une animation : le laisser en
   CSS sur des dizaines d'images ne fait que saturer le compositeur. */
[data-volet] img, .videoband__cadre, .videoband__fond,
.marches-medaillon{ will-change: auto; }

/* =========================================================
   0 ter. TRANSITIONS DE PAGE
   Le passage de l'accueil vers une page de marché se fait
   en fondu enchaîné, sans le clignotement blanc habituel.
   Deux lignes de CSS, prises en charge nativement — aucune
   bibliothèque, aucun surcoût. Les navigateurs qui ne
   connaissent pas ignorent la règle et naviguent comme avant.
   ========================================================= */
@view-transition{ navigation: auto; }

/* La page sortante s'éloigne et pivote, la page entrante arrive du
   premier plan. C'est un vrai déplacement dans la profondeur, pas un
   fondu — et c'est le navigateur qui le calcule, sans une ligne de
   JavaScript ni la moindre bibliothèque. */
::view-transition-old(root){
  animation: mpa-page-sort .58s cubic-bezier(.76, 0, .24, 1) both;
  transform-origin: 50% 45%;
}
::view-transition-new(root){
  animation: mpa-page-entre .76s cubic-bezier(.22, 1, .36, 1) both;
  transform-origin: 50% 45%;
}
@keyframes mpa-page-sort{
  to{ opacity: 0; transform: perspective(1400px) translateZ(-520px) rotateY(-13deg); }
}
@keyframes mpa-page-entre{
  from{ opacity: 0; transform: perspective(1400px) translateZ(560px) rotateY(11deg); }
}

/* Et surtout : la carte du marché sur laquelle on vient de cliquer
   se DÉPLACE jusqu'à devenir la photo de la page d'arrivée. Le
   navigateur relie les deux éléments parce qu'ils portent le même
   nom de transition — la carte ne disparaît pas, elle voyage.
   Le nom n'est posé qu'au clic : deux éléments le portant en même
   temps annuleraient l'effet. */
.market-card.est-choisie{ view-transition-name: marche-choisi; }
/* Sur téléphone, c'est la LIGNE ENTIÈRE qui voyage, pas seulement sa
   vignette : une image de 74 px qui se déplace, on ne la voit pas
   passer. Toute la ligne qui s'étire et devient la photo du village,
   ça se remarque. */
.marche-ligne.est-choisie{ view-transition-name: marche-choisi; }
.ville-hero__art{ view-transition-name: marche-choisi; }
::view-transition-group(marche-choisi){
  animation-duration: .78s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* Le fondu entre l'ancien et le nouveau contenu du groupe est étiré
   lui aussi, sinon la bascule se fait trop tôt et on perd le geste. */
::view-transition-old(marche-choisi),
::view-transition-new(marche-choisi){
  animation-duration: .78s;
}

/* =========================================================
   1. LE HERO RESTE CELUI D'ORIGINE
   Une version « plein cadre » a été essayée (photo touchant le
   bord de l'écran, titre de couverture) puis RETIRÉE : à
   l'usage, la mise en page d'origine — photo dans son cadre,
   texte à côté — proportionne bien mieux l'image et le texte
   sur un écran d'ordinateur. On n'y touche plus.
   ========================================================= */

/* =========================================================
   1 bis. RIDEAU D'ENTRÉE
   Un lever de rideau, pas une barre de chargement. Le nom
   s'inscrit, un filet d'or se trace, le panneau se retire
   vers le haut. Une fois par session seulement.
   ========================================================= */
.rideau{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--paper);
  will-change: transform;
}
.rideau[hidden]{ display: none; }
/* déjà vu dans cette session, ou mouvement réduit : jamais affiché */
html:not(.rideau-actif) .rideau{ display: none; }
.rideau__bloc{ text-align: center; padding: var(--space-6); }
/* Le logo ouvre l'entrée : il apparaît avant le nom, comme un
   cachet posé sur la page. Source 192 px affichée à 116 au plus,
   donc nette même sur écran haute densité. */
.rideau__logo{
  display: block;
  width: clamp(84px, 14vw, 116px);
  aspect-ratio: 1;
  margin: 0 auto var(--space-6);
  border-radius: clamp(18px, 3vw, 26px);
  overflow: hidden;
  background: #14100B;
  box-shadow: var(--shadow-md);
  opacity: 0;                       /* révélé par la timeline d'entrée */
}
.rideau__logo img{ width: 100%; height: 100%; display: block; object-fit: cover; }
.rideau__nom{
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: clamp(1.9rem, 5.6vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  display: flex; gap: .28em; justify-content: center; flex-wrap: wrap;
}
/* Chaque mot est masqué par son propre cadre : il monte depuis le bas.
   AUCUNE transformation posée ici : c'est GSAP qui écrit l'état de
   départ ET l'état d'arrivée. Un `translateY(105%)` en CSS créait un
   conflit d'unités avec l'animation, et le nom restait bloqué sous son
   masque. Corollaire heureux : si le JavaScript ne s'exécute pas, le
   nom est simplement lisible d'emblée. */
.rideau__mot{ display: block; overflow: hidden; }
.rideau__mot > span{ display: block; }
/* Masqué dès la toute première image, sinon le nom s'affiche en clair
   pendant les quelques millisèmes qui séparent le rendu du démarrage
   de GSAP. On masque par l'OPACITÉ et non par une transformation :
   c'est une transformation posée en CSS qui bloquait l'animation.
   La classe n'existe que quand le rideau doit se jouer — donc si le
   JavaScript ne s'exécute jamais, le nom reste lisible. */
html.rideau-actif .rideau__mot > span{ opacity: 0; }
/* Le filet se trace depuis le CENTRE vers les deux bords : c'est le
   geste d'un cachet qu'on appose, pas d'une barre de chargement qui
   se remplit. */
.rideau__filet{
  height: 1px; width: min(280px, 52vw);
  margin: var(--space-5) auto 0;
  background: linear-gradient(90deg,
    transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  transform: scaleX(0); transform-origin: center center;
}
/* Le logo tourne sur lui-même pour se présenter de face. */
.rideau__logo{ transform-style: preserve-3d; }
.rideau__sous{
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0;
}
/* pendant le rideau, la page dessous ne défile pas */
html.rideau-actif, html.rideau-actif body{ overflow: hidden; }

/* =========================================================
   2. CURSEUR
   Un disque discret qui double le pointeur et s'ouvre au
   survol des éléments actifs. Uniquement souris fine :
   invisible au doigt, invisible au clavier seul.
   ========================================================= */
.curseur{
  position: fixed; top: 0; left: 0; z-index: 9998;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  /* Pas de `mix-blend-mode` : il forcerait la recomposition de toute
     la page à chaque mouvement de souris. Le crème du site est assez
     clair pour qu'un simple trait d'encre suffise. */
  transition: width .34s var(--ease-sig), height .34s var(--ease-sig),
              margin .34s var(--ease-sig), background-color .34s var(--ease-sig),
              border-color .34s var(--ease-sig), opacity .3s linear;
}
.curseur--actif{ opacity: 1; }
.curseur--ouvert{
  width: 74px; height: 74px; margin: -37px 0 0 -37px;
  background: rgba(176, 32, 30, .10);
  border-color: var(--red);
}
/* sur fond sombre (bandes vidéo), on inverse */
.curseur--clair{ border-color: var(--cream); }
@media (hover: none), (pointer: coarse){ .curseur{ display: none; } }

/* =========================================================
   3. MARCHÉS — de quatre cartes identiques à un tableau
   de départs. C'est la section la plus consultée du site :
   elle doit se lire d'un coup d'œil, pas se parcourir.
   ========================================================= */
.markets{ position: relative; }

/* --- Deux présentations, une seule visible à la fois ---
   Sur ordinateur, les quatre cartes photo : c'est la présentation
   retenue, elle donne la Provence en un regard.
   Sur téléphone, la liste en tableau de départs : quatre cartes
   empilées y deviennent un tunnel à faire défiler. */
@media (min-width: 900px){
  .marches-liste{ display: none; }
}
@media (max-width: 899px){
  .markets__grid{ display: none; }
}
/* Le chapeau s'aligne sur la liste : un tableau de départs ne se
   présente pas sous un titre centré. */
.markets .section-head--center{
  text-align: left; margin-inline: 0;
  max-width: 34ch;
}
.markets .section-head--center .eyebrow{ justify-content: flex-start; }
.markets .section-head--center p{ margin-inline: 0; }
.marches-liste{
  position: relative;
  border-top: 1px solid var(--line-strong);
  margin-top: clamp(var(--space-6), 5vw, var(--space-8));
}
.marche-ligne{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num  ville  fleche"
    "num  lieu   fleche";
  align-items: center;
  column-gap: clamp(var(--space-4), 3vw, var(--space-6));
  padding: clamp(var(--space-5), 3.4vw, var(--space-7)) 0;
  border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
  isolation: isolate;
}
/* le voile crème qui monte au survol : le filet devient une ligne vivante */
.marche-ligne::before{
  content: ""; position: absolute; z-index: -1;
  left: calc(-1 * var(--space-5)); right: calc(-1 * var(--space-5));
  top: 0; bottom: 0;
  background: var(--paper);
  transform: scaleY(0); transform-origin: bottom center;
  transition: transform .52s var(--ease-sig);
}
.marche-ligne:hover::before,
.marche-ligne:focus-visible::before{ transform: scaleY(1); }

.marche-ligne__num{
  grid-area: num;
  font-family: var(--font-sans);
  font-size: .72rem; letter-spacing: .2em;
  color: var(--ink-mute);
  align-self: start;
  padding-top: .45em;
  min-width: 2.4em;
}
.marche-ligne__ville{
  grid-area: ville;
  /* Le jour se pose AU-DESSUS du nom, pas à côté : sans quoi la
     largeur variable de « Dimanche » décalerait chaque ville et le
     bord gauche des grands noms serait irrégulier. */
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .34em;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: clamp(2rem, 5.6vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.marche-ligne__jour{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(.78rem, 1.3vw, .88rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red);
}
.marche-ligne__lieu{
  grid-area: lieu;
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--ink-soft);
}
.marche-ligne__lieu b{ font-weight: 500; color: var(--ink); }
.marche-ligne__fleche{
  grid-area: fleche;
  width: 26px; height: 26px; flex: none;
  color: var(--ink-mute);
  transition: transform .5s var(--ease-sig), color .4s var(--ease-sig);
}
.marche-ligne:hover .marche-ligne__fleche{
  transform: translateX(10px); color: var(--red);
}
/* le marché du jour est signalé, pas décoré */
.marche-ligne--jour .marche-ligne__jour::after{
  content: "aujourd'hui";
  margin-left: .7em; padding: .28em .6em;
  border-radius: var(--radius-pill);
  background: var(--red); color: var(--cream);
  letter-spacing: .1em; font-size: .82em;
}

/* Sur écran tactile et petit écran, la vignette remplace la flèche :
   au doigt, une photo vaut mieux qu'un chevron. Sur ordinateur, la
   ligne reste purement typographique — le médaillon photo qui suivait
   le curseur a été retiré, il tirait l'œil hors de la lecture. */
.marche-ligne__vignette{
  display: none;
  grid-area: fleche;
  width: 74px; height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: none;
}
.marche-ligne__vignette img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* La liste ne s'affiche qu'en dessous de 900 px : la vignette y est
   donc toujours la bonne réponse, et la flèche n'a plus lieu d'être. */
@media (max-width: 899px){
  .marche-ligne__vignette{ display: block; }
  .marche-ligne__fleche{ display: none; }

  /* Le téléphone a droit à son volume : les quatre lignes se
     redressent l'une après l'autre en arrivant à l'écran, comme des
     panneaux posés à plat qu'on relève. Contrairement à la transition
     de page — que le navigateur peut refuser quand la page suivante
     tarde — celui-ci se joue TOUJOURS : il ne dépend de rien d'autre
     que du défilement. */
  /* Plus de perspective sur la liste : elle forçait la mise en couche
     graphique des quatre lignes en permanence, y compris quand rien
     ne bougeait. C'est ce qui faisait tousser le téléphone.

     AUCUNE 3D non plus sur les fiches recettes. Ce sont des accordéons : leur
     hauteur change quand on les ouvre. Une rotation en perspective
     avec le pivot en haut grossit énormément le bas d'un élément
     devenu grand — la recette s'affichait en énorme et débordait de
     l'écran des deux côtés. Une entrée en fondu, et rien d'autre. */

  /* Retour au doigt : la ligne s'enfonce vraiment sous la pression.
     C'est le seul effet que le visiteur DÉCLENCHE lui-même, donc le
     seul qu'il ne peut pas manquer. */
  .marche-ligne:active{
    transform: perspective(700px) rotateX(6deg) scale(.975);
    transition: transform .12s ease-out;
  }
}
@media (max-width: 520px){
  .marche-ligne{ column-gap: var(--space-4); }
  .marche-ligne__num{ display: none; }
  .marche-ligne__vignette{ width: 58px; height: 74px; }
}

/* =========================================================
   4. RESPIRATION DES TITRES
   Un titre collé au paragraphe qui le suit, c'est le défaut
   de finition qu'on voit sans savoir le nommer. Fraunces a
   une hauteur d'œil généreuse : il lui faut de l'air en bas.
   (La photo figée « sticky » a été essayée puis retirée ici :
   la colonne de texte est plus courte que l'image, elle
   n'aurait eu aucune course pour se déplacer.)
   ========================================================= */
.story__body h2,
.provenance-section .provenance__body h2,
.interview__tete h2{
  margin-bottom: clamp(var(--space-5), 2.4vw, var(--space-6));
}
.story__body .eyebrow{ margin-bottom: var(--space-4); }

/* =========================================================
   5. RÉVÉLATION DES PHOTOS — les images ne surgissent pas :
   elles se découvrent par le bas, derrière un volet, pendant
   que le cadrage se resserre. Le geste de l'imprimé.
   ========================================================= */
.anim-ready [data-volet]{
  clip-path: inset(0 0 100% 0);
}
/* =========================================================
   6. BANDES VIDÉO
   PLUS AUCUN `will-change` ici — c'est un piège à deux détentes.
   Il réserve de la mémoire graphique en permanence, ET il crée un
   contexte d'empilement, exactement comme une transformation.
   Résultat sur téléphone : le bouton « Son », posé dans le cadre
   avec un z-index de 4, se retrouvait enfermé dans ce contexte et
   passait SOUS la légende — le clic atterrissait sur le texte.
   GSAP pose lui-même `will-change` le temps de ses animations ;
   le déclarer en CSS n'apportait rien et cassait un bouton.
   ========================================================= */

/* =========================================================
   6 bis. LA CITATION — elle occupait le tiers d'un grand
   bandeau rouge. Une phrase mise en exergue doit remplir
   l'espace qu'on lui donne, sinon le bandeau ne sert à rien.
   ========================================================= */
.pullquote{ padding-block: clamp(var(--space-8), 11vh, 160px); }
.pullquote blockquote{
  font-size: clamp(1.9rem, 4.4vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 20ch;
  margin-inline: auto;
}
/* La signature ne suit PAS : elle reste une mention discrète. */
.pullquote__auteur{
  margin-top: clamp(var(--space-6), 4vh, var(--space-8));
}
.pullquote__mark{ margin-bottom: var(--space-5); }

/* =========================================================
   6 ter. LA MATIÈRE
   Un site crème parfaitement lisse ressemble à un écran.
   Un site crème qui a du grain ressemble à du papier. Tout
   ce qui suit est PEINT UNE FOIS puis mis en cache par le
   navigateur : aucun de ces effets ne coûte quoi que ce soit
   au défilement, contrairement aux flous supprimés plus haut.
   ========================================================= */

/* --- Grain de papier ---
   Une trame produite par le navigateur lui-même (aucune image à
   télécharger), posée sur une couche fixe qui ne se repeint jamais. */
html[data-texture="on"] body::before{
  content: "";
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  /* Volontairement SANS `mix-blend-mode` : un calque plein écran en
     mode fusion se recalcule à chaque repeint, exactement comme les
     flous qu'on vient de supprimer. Un simple voile en opacité donne
     le même papier et ne coûte qu'une seule peinture. */
  opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
/* Le grain est à z-index 1 : au-dessus des sections (qui sont toutes
   en flux normal) et EN DESSOUS de tout ce qui est fixe — en-tête,
   rideau, panneau. Il ne faut surtout pas toucher aux z-index de ces
   éléments-là : abaisser celui du rideau laissait l'en-tête passer
   par-dessus, et le rideau ne couvrait plus tout l'écran. */

/* --- Trame de fond des sections teintées ---
   Des filets horizontaux d'un demi-pixel, à 3 % d'opacité : on ne
   les voit pas, on sent que le fond n'est pas vide. */
html[data-texture="on"] .section--tint{
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(43, 33, 24, .028) 0 1px,
    transparent 1px 7px
  );
}

/* --- Cadre décalé sur la photo du savoir-faire ---
   Un filet d'or posé en retrait derrière l'image, comme un
   passe-partout d'encadreur. Deux lignes de CSS, aucun calque. */
@media (min-width: 900px){
  html[data-texture="on"] .savoir .story__media{ position: relative; }
  html[data-texture="on"] .savoir .story__media::before{
    content: "";
    position: absolute; z-index: -1;
    inset: 18px -18px -18px 18px;
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg);
    opacity: .5;
  }
}

/* --- Lettrine ---
   Le premier mot du récit d'Alexis démarre sur une capitale de
   trois lignes. C'est le geste d'imprimé le plus reconnaissable,
   et il ne coûte rien. */
/* Le paragraphe visé est celui qui SUIT le titre : `p:first-of-type`
   attrapait le sur-titre, qui est en flex — et `::first-letter` ne
   s'applique pas à un conteneur flex, la lettrine ne serait jamais
   apparue. */
html[data-texture="on"] .savoir .story__body h2 + p::first-letter{
  float: left;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: 3.42em;
  line-height: .84;
  margin: .06em .12em 0 0;
  color: var(--red);
}

/* --- Filet double ---
   Une ligne pleine doublée d'une ligne claire : la séparation
   d'un livre, pas d'un tableur. */
.markets .marches-liste,
.menu{
  border-top-width: 1px;
  box-shadow: 0 3px 0 -2px var(--line);
}

/* =========================================================
   5 bis. L'ÉCHELLE SUR ORDINATEUR
   Le site avait été calibré pour de grands écrans : la photo
   d'Alexis mesurait 675 px de haut, soit presque toute la
   hauteur utile d'un portable, et les titres montaient à
   59 px. Résultat, on ne voyait jamais une section entière —
   d'où l'impression que « tout est trop gros ». On borne donc
   les images à la HAUTEUR de l'écran, et on redescend les
   titres et le texte courant d'un cran. Le hero garde sa
   taille de couverture : c'est le seul endroit qui la mérite.
   ========================================================= */
@media (min-width: 1000px){
  /* La grande photo du récit ne dépasse plus les deux tiers de l'écran :
     une section doit tenir dans un regard.
     UNIQUEMENT celle-ci : elle porte un `aspect-ratio: 5/6`, donc
     borner sa hauteur borne aussi sa largeur et le cadrage est
     préservé. La photo de « Provenance », elle, n'a pas de rapport
     imposé : lui plafonner la hauteur l'écrasait en bandeau et
     recadrait la volaille sur une patte. Elle est déjà bornée à
     440 px de large par la feuille de sections — on n'y touche pas. */
  .savoir .story__photo{ max-height: min(62svh, 560px); }
  /* Le bloc média se règle sur la photo bornée, sinon le cadre d'or
     décalé se dessinerait autour d'une colonne vide. */
  .savoir .story__media{ width: fit-content; }

  /* Titres de section : 59 px, c'était une taille d'affiche. */
  .section-head h2,
  .story__body h2,
  .provenance-section .provenance__body h2,
  .interview__tete h2{
    font-size: clamp(2rem, 3.3vw, 2.95rem);
  }
  /* Texte courant : on revient à une taille de lecture. */
  .section-head p,
  .story__body > p{ font-size: 1.05rem; line-height: 1.62; }

  /* Les grands noms de villes suivent le même mouvement. */
  .marche-ligne__ville{ font-size: clamp(1.9rem, 3.6vw, 3rem); }
}

/* =========================================================
   6 quinquies. NUANCE DES FONDS
   Le site était crème du haut en bas. En descendant, on passe
   maintenant d'un crème chaud (le feu, la broche) à un crème
   rosé (la pierre de Provence) puis à un crème plus froid et
   plus net pour les parties pratiques. Personne ne le remarque
   consciemment ; tout le monde sent que la page respire.
   Ce ne sont que des dégradés de fond : peints une fois.
   ========================================================= */
:root{
  --paper-chaud: #FCF6E9;   /* vers l'or, la braise */
  --paper-rose:  #FBF2EC;   /* vers la terre cuite */
  --paper-froid: #F8F7F2;   /* vers la pierre, plus net */
}

/* Le savoir-faire : la chaleur de la broche */
.savoir{
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(198,137,47,.10), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-chaud) 100%);
}
/* Provenance : on quitte le feu pour la terre */
.provenance-section{
  background: linear-gradient(180deg, var(--paper-chaud) 0%, var(--paper-rose) 100%);
}
/* Réserver : la partie pratique, un fond plus net */
.reserve{
  background:
    radial-gradient(80% 60% at 88% 4%, rgba(158,59,46,.055), transparent 62%),
    linear-gradient(180deg, var(--paper-rose) 0%, var(--paper-froid) 100%);
}
/* Marchés : la pierre chaude des villages */
.markets.section--tint{
  background-color: var(--paper-2);
  background-image:
    radial-gradient(100% 80% at 50% 0%, rgba(198,137,47,.09), transparent 62%);
}
/* Recettes et ustensiles : retour au chaud */
.recipes{ background: linear-gradient(180deg, var(--paper-froid) 0%, var(--paper) 60%); }
.ustensiles{ background: linear-gradient(180deg, var(--paper) 0%, var(--paper-chaud) 100%); }

/* Un filet d'or sépare les grandes parties. Une ligne d'un pixel,
   jamais une bordure franche : c'est la différence entre un livre
   et un formulaire. */
.savoir, .reserve, .recipes{
  border-top: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
}

/* =========================================================
   6 sexies. TROIS VOLUMES
   La 3D n'est utilisée qu'à trois endroits — là où il y a un
   objet à regarder. Partout ailleurs elle ferait démonstration.
   Ce sont des transformations pures : la carte graphique s'en
   charge, aucune zone n'est repeinte, le défilement n'en sent
   rien passer.
   ========================================================= */

/* (1) Le hero — AUCUN effet. La parallaxe au curseur a été essayée
   puis retirée : elle déplaçait l'image de 26 px pour une marge
   d'agrandissement de 14 px, donc elle découvrait le fond du cadre
   et la photo paraissait mal calée. Le hero reste exactement celui
   de la version d'origine. */

/* (2) La bande vidéo — le cadre tourne pendant toute sa traversée.
   IMPÉRATIVEMENT au-dessus de 900 px : en dessous, la vidéo repasse
   en plein cadre et `.videoband__cadre` devient `position: absolute;
   inset: 0`. Lui appliquer une transformation en ferait le bloc de
   référence de son propre contenu — la vidéo se recroquevillait et la
   bande devenait un rectangle noir. */
@media (min-width: 900px){
  .videoband__inner{ perspective: 1300px; }
  .videoband__cadre{ transform-origin: 50% 50%; transform-style: preserve-3d; }
  /* Le reflet qui balaie la vitre. C'est ce détail qui fait lire la
     surface comme du verre plutôt que comme une image inclinée. */
  .reflet{
    position: absolute; inset: -20% -60%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg,
      transparent 38%,
      rgba(255, 252, 244, .30) 47%,
      rgba(255, 252, 244, .52) 50%,
      rgba(255, 252, 244, .30) 53%,
      transparent 62%);
  }

  /* (3) La rôtissoire — la pièce maîtresse bascule vers le lecteur */
  .ust-vedette{ perspective: 1500px; }
  .ust-vedette__img{ transform-origin: 50% 100%; }

  /* (4) Les cartes des marchés — elles s'inclinent vers le curseur,
     comme quatre cartons posés sur une table qu'on effleure. La
     photo de fond bouge un peu moins vite que la carte : c'est ce
     décalage qui donne l'épaisseur. */
  .markets__grid{ perspective: 1400px; }
  .market-card{
    transform-style: preserve-3d;
    transition: box-shadow .4s var(--ease-sig);
  }
  .market-card__fond{ transition: transform .5s var(--ease-sig); }
  .market-card:hover{ box-shadow: var(--shadow-lg); }
  /* le contenu texte remonte vers le lecteur pendant l'inclinaison */
  .market-card__day,
  .market-card__town,
  .market-card__more{ transform: translateZ(34px); }
  .market-card__hours,
  .market-card__lieu,
  .market-card__note{ transform: translateZ(18px); }
}

/* Sur écran tactile, aucune de ces trois inclinaisons : il n'y a pas
   de souris pour les piloter et le défilement prime. */
@media (hover: none), (pointer: coarse){
  .hero__badge-float{ will-change: auto; }
}

/* =========================================================
   6 septies. COMPOSITION DU TEXTE
   Trois propriétés récentes qui font le travail d'un metteur
   en pages : plus de titre qui laisse un mot seul sur la
   dernière ligne, plus de drapeau en dents de scie.
   ========================================================= */
h1, h2, h3, .rideau__nom, .marche-ligne__ville{ text-wrap: balance; }
p, li, blockquote, dd, figcaption{ text-wrap: pretty; }
.story__body p, .section-head p, .qa__a, .recipe__intro{
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* =========================================================
   7. FINITION — les micro-détails qui séparent « correct »
   de « soigné ». Ils ne se voient pas un par un ; ensemble
   ils changent tout.
   ========================================================= */

/* Liens de texte : le soulignement se trace, il n'apparaît pas */
.story__body a:not(.btn),
.section-head a:not(.btn),
.interview a:not(.btn),
.contact a:not(.btn):not(.contact__social){
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size .45s var(--ease-sig), color .3s var(--ease-sig);
}
.story__body a:not(.btn):hover,
.section-head a:not(.btn):hover,
.interview a:not(.btn):hover,
.contact a:not(.btn):not(.contact__social):hover{
  background-size: 100% 1px; color: var(--red);
}

/* Boutons : la flèche avance, le fond se creuse */
.btn{ transition: background-color .4s var(--ease-sig), color .4s var(--ease-sig),
                  transform .4s var(--ease-sig), box-shadow .4s var(--ease-sig); }
.btn:hover{ transform: translateY(-2px); }
.btn .btn-ico{ transition: transform .45s var(--ease-sig); }
.btn:hover .btn-ico{ transform: translateX(5px); }

/* Sur-titres numérotés : le filet se trace à l'arrivée du bloc */
.eyebrow::before{ transition: transform .8s var(--ease-sig); }

/* Photos : très léger rapprochement au survol, jamais brutal */
.market-card__fond img,
.recipe img,
.ust-vedette__img img{ transition: transform 1.1s var(--ease-sig); }
.market-card:hover .market-card__fond img,
.ust-vedette:hover .ust-vedette__img img{ transform: scale(1.035); }

/* Sélection de texte aux couleurs de la maison */
::selection{ background: var(--gold-soft); color: var(--ink); }

/* Barre de progression de lecture : un fil d'or en haut de page.
   Un seul pixel — on le sent plus qu'on ne le voit. */
.fil-lecture{
  position: fixed; top: 0; left: 0; z-index: 60;
  height: 2px; width: 100%;
  background: var(--red);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}

/* =========================================================
   7 bis. PANNEAU D'ESSAI
   N'apparaît que sur l'aperçu (pages.dev / localhost). Il sert
   à comparer les gammes de mouvement en conditions réelles
   plutôt que sur description.
   ========================================================= */
.essai{
  position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 70;
  font-family: var(--font-sans);
}
.essai__bouton{
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font: inherit; font-size: .78rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.essai__bouton:hover{ border-color: var(--ink); }
.essai__corps{
  margin-top: var(--space-3);
  width: min(300px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.essai__corps[hidden]{ display: none; }
.essai__ligne + .essai__ligne{ margin-top: var(--space-4); }
.essai__titre{
  display: block; margin-bottom: var(--space-2);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.essai__opts{ display: flex; flex-wrap: wrap; gap: 6px; }
.essai__opt{
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit; font-size: .82rem;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.essai__opt:hover{ border-color: var(--ink-mute); color: var(--ink); }
.essai__opt.est-actif{
  background: var(--red); border-color: var(--red); color: var(--cream);
}
.essai__note{
  margin: var(--space-4) 0 0;
  font-size: .74rem; line-height: 1.45; color: var(--ink-mute);
}

/* =========================================================
   8. RESPECT DU RÉGLAGE « MOUVEMENT RÉDUIT »
   Tout ce qui précède se désactive proprement.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .rideau{ display: none !important; }
  .curseur, .fil-lecture{ display: none !important; }
  /* le panneau d'essai reste accessible : c'est lui qui permet de
     rallumer les animations, il ne doit jamais disparaître */
  .anim-ready [data-volet]{ clip-path: none; }
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}