/* Polices auto-hébergées, récupérées par outils/polices.cjs. Ne pas modifier à la main. */
@font-face {
  font-family: 'Zodiak';
  src: url('polices/zodiak-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('polices/zodiak-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('polices/general-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('polices/general-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('polices/general-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Les Biquettes de l'Archevêque : maquette Caelestis
   Palette tirée de la ferme : garrigue (le pâturage au-dessus du village),
   pousse et prairie (l'herbe de printemps), lait cru, et le bleu lavande des
   murs du magasin gardé en deux touches.
   Titres Zodiak, texte General Sans. */

:root {
  --lait: #FAF8F3;
  --sable: #EFECE3;
  --vert-pastel: #D9E6D2;
  --foret: #2F4A37;
  --foret-fonce: #22382A;
  --feuille: #3F6A43;
  --feuille-fonce: #335739;
  --feuille-clair: #C3D6BC;
  --encre: #1F231D;
  --cendre: #5A5F55;
  --craie: #F3F1EA;
  --blanc: #FFFFFF;
  --filet: rgba(31, 35, 29, .15);
  --filet-clair: rgba(243, 241, 234, .22);

  --f-titre: 'Zodiak', Georgia, 'Times New Roman', serif;
  --f-texte: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --conteneur: 1240px;
  --gouttiere: clamp(16px, 4vw, 48px);
  --pad-s: clamp(40px, 2.6vw + 28px, 80px);
  --pad-m: clamp(48px, 7vw + 16px, 136px);
  --pad-l: clamp(56px, 9vw + 20px, 180px);
  --filet-net: 1px solid rgba(31, 35, 29, .17);
  --filet-clair-net: 1px solid rgba(243, 241, 234, .22);
  --rayon: 0px;
  --rayon-champ: 4px;
  --rayon-pilule: 999px;
  --entete-h: 124px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--lait);
  color: var(--encre);
  font: 400 17px/1.55 var(--f-texte);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 4.7vw, 68px); line-height: .96; letter-spacing: -.022em; }
h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.04; letter-spacing: -.016em; }
h3 { font-size: clamp(21px, 1.6vw, 24px); line-height: 1.18; letter-spacing: -.005em; }
strong, b { font-weight: 600; }
em, i { font-style: normal; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--feuille-clair); color: var(--encre); }

.hors-ecran {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--feuille); color: var(--blanc); padding: 10px 16px; border-radius: var(--rayon);
  font-weight: 600; text-decoration: none;
}
.evitement:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--feuille); outline-offset: 3px; }

.conteneur { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { position: relative; padding-block: var(--pad-m); }
.section--s { padding-block: var(--pad-s); }
.section--l { padding-block: var(--pad-l); }
.fond-lait { background: var(--lait); }
.fond-sable { background: var(--sable); }
.fond-vert { background: var(--vert-pastel); }
.fond-foret { background: var(--foret); color: var(--craie); }
.fond-encre { background: var(--encre); color: var(--craie); }

/* Les textes attenues sur un fond sombre. Depuis Caelestis Studio, Laura peut
   poser le fond ardoise ou foret sur n'importe quelle section : la cendre
   (#5A5F55) y tombait a 2,4:1 et l'encre du chiffre a 1:1, donc invisible.
   Mesure dans la page, pas a l'oeil. */
.fond-foret .chapo, .fond-encre .chapo,
.fond-foret .hero__chapo, .fond-encre .hero__chapo,
.fond-foret .texte-cendre, .fond-encre .texte-cendre,
.fond-foret .gamme__intro p, .fond-encre .gamme__intro p,
.fond-foret .carte-infos__bloc p, .fond-encre .carte-infos__bloc p,
.fond-foret .carte-infos__avis span, .fond-encre .carte-infos__avis span,
.fond-foret .avis__volume, .fond-encre .avis__volume { color: #C9CCC2; }
.fond-foret .chiffre-phrase, .fond-encre .chiffre-phrase,
.fond-foret .avis__volume a, .fond-encre .avis__volume a { color: var(--craie); }

/* Matière : grain très léger sur les fonds sombres */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* Icônes au trait */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico--plein { fill: currentColor; stroke: none; }
.ico--s { width: 16px; height: 16px; }
.ico--l { width: 24px; height: 24px; }

/* Étiquette ardoise : le dispositif signature, comme celles de la vitrine */
.ardoise {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--encre); color: var(--craie);
  font: 700 15px/1.2 var(--f-titre); letter-spacing: .005em;
  padding: 7px 14px 8px 11px; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(242, 241, 231, .14);
}
.ardoise::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--feuille-clair);
}

.ardoise--claire { background: var(--lait); color: var(--encre); box-shadow: inset 0 0 0 1px rgba(30, 34, 25, .18); }
.ardoise--claire::before { background: var(--feuille); }
.ardoise--nue::before { display: none; }
.ardoise--nue { padding-left: 14px; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px/1.1 var(--f-texte); letter-spacing: .005em;
  padding: 15px 24px; border-radius: 2px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.bouton--plein { background: var(--foret); color: var(--craie); }
.bouton--plein:hover { background: var(--foret-fonce); }
.fond-foret .bouton--plein, .fond-encre .bouton--plein,
.carte--foret .bouton--plein, .signature__carte .bouton--plein, .banniere .bouton--plein { background: var(--craie); color: var(--foret); }
.fond-foret .bouton--plein:hover, .fond-encre .bouton--plein:hover,
.carte--foret .bouton--plein:hover, .signature__carte .bouton--plein:hover, .banniere .bouton--plein:hover { background: var(--blanc); color: var(--foret-fonce); }
.bouton--plein { background: var(--foret); color: var(--blanc); }
.bouton--plein:hover { background: var(--foret-fonce); }
.bouton--ligne { border-color: currentColor; background: transparent; }
.bouton--ligne:hover { background: var(--encre); color: var(--craie); border-color: var(--encre); }
.fond-foret .bouton--ligne:hover, .fond-encre .bouton--ligne:hover, .carte--foret .bouton--ligne:hover,
.banniere .bouton--ligne:hover { background: var(--craie); color: var(--foret); border-color: var(--craie); }


/* Lien de suite. L icone fleche a ete retiree partout le 21/10/2026 : le nom de
   la classe reste pour ne pas reecrire les quatorze liens, et le survol ne joue
   plus que sur le soulignement, puisqu il n y a plus d icone a decaler. */
.lien-fleche {
  display: inline-flex; align-items: center;
  font-weight: 600; color: var(--feuille); text-decoration: none;
  border-bottom: 1.5px solid rgba(78, 118, 38, .35); padding-bottom: 2px;
  transition: border-color .2s ease;
}
.lien-fleche:hover { border-color: var(--feuille); }
.fond-foret .lien-fleche, .fond-encre .lien-fleche, .fond-encre .lien-fleche, .fond-encre .lien-fleche { color: var(--feuille-clair); border-color: rgba(180, 216, 76, .42); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; }
.barre { background: rgba(31, 35, 29, .46); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-bottom-color: rgba(243, 241, 234, .2); }
.bandeau-infos { background: var(--foret); color: var(--craie); font-size: 14px; }
.bandeau-infos__ligne { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.bandeau-infos p { margin: 0; display: flex; align-items: center; gap: 8px; }
.bandeau-infos a { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.bandeau-infos a:hover { color: var(--feuille-clair); }
.bandeau-infos__liens { display: flex; align-items: center; gap: 20px; }
.bandeau-infos__reseaux { display: flex; gap: 14px; }
.statut {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
  font-weight: 600; font-size: 13px; padding: 3px 10px 3px 9px; border-radius: var(--rayon-pilule);
  background: rgba(255, 255, 255, .12);
}
.statut:empty { display: none; }
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cendre); }
.statut[data-etat="ouvert"]::before { background: var(--feuille-clair); box-shadow: 0 0 0 3px rgba(195, 214, 188, .22); }
.statut[data-etat="ferme"]::before { background: rgba(242, 241, 231, .55); }
.statut--pose { margin-left: 0; background: var(--sable); color: var(--encre); }
.statut--pose[data-etat="ouvert"]::before { background: var(--feuille); box-shadow: 0 0 0 3px rgba(63, 106, 67, .2); }
.statut--pose[data-etat="ferme"]::before { background: var(--cendre); }

.barre { position: relative; background: var(--lait); border-bottom: var(--filet-net); }

.barre__ligne { display: flex; align-items: center; gap: 32px; min-height: 84px; transition: min-height .25s ease; }
.entete--compacte .barre__ligne { min-height: 68px; }
.marque { display: block; margin-right: auto; }
.marque img { height: 62px; width: auto; transition: height .25s ease; }
.entete--compacte .marque img { height: 50px; }
.menu ul { display: flex; gap: 6px; }
.menu a {
  display: block; padding: 10px 14px; text-decoration: none; font-weight: 500; font-size: 16px;
  position: relative; transition: color .2s ease;
}
.menu a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--feuille); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.menu a:hover { color: var(--feuille); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { font-weight: 600; }
.burger { display: none; }

.menu-mobile { display: none; }

@media (max-width: 1280px) {
  .bandeau-infos__saison { display: none; }
}
@media (max-width: 1080px) {
  .bandeau-infos__horaires-long { display: none; }
}
@media (max-width: 960px) {
  :root { --entete-h: 108px; }
  .menu, .barre__action { display: none; }
  .bandeau-infos__reseaux { display: none; }
  .burger {
    display: inline-flex; align-items: center; gap: 10px; background: none; border: 1.5px solid var(--encre);
    border-radius: var(--rayon); padding: 10px 14px; font-weight: 600; cursor: pointer;
  }
  .burger__traits { display: grid; gap: 4px; }
  .burger__traits span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
  .burger[aria-expanded="true"] .burger__traits span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__traits span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger__traits span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .menu-mobile {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--lait); border-bottom: 1px solid var(--filet); border: var(--filet-net);
    padding: 8px var(--gouttiere) 24px;
  }
  .menu-mobile[hidden] { display: none; }
  .menu-mobile ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--filet); text-decoration: none; font: 700 22px/1.2 var(--f-titre); }
  .menu-mobile ul a[aria-current="page"] { color: var(--feuille); }
  .menu-mobile__actions { display: grid; gap: 10px; margin-top: 20px; }
  .marque img { height: 52px; }
  .barre__ligne { min-height: 72px; }
}
@media (max-width: 560px) {
  .bandeau-infos { font-size: 13px; }
  .bandeau-infos__horaires { display: none !important; }
  .bandeau-infos__ligne { justify-content: space-between; }
}

/* ---------- Héros d'accueil ---------- */
.hero { position: relative; overflow: hidden; background: var(--lait); }
.hero__media { position: relative; height: clamp(420px, 44vw, 720px); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.hero__etiquette { position: absolute; left: 0; right: 0; top: clamp(18px, 2.2vw, 34px); }
.hero__contenu { padding-block: clamp(34px, 3.6vw, 60px) 0; }
.hero__texte { max-width: 44em; margin-inline: auto; text-align: center; }
.hero h1 { margin: 0 0 14px; font-size: clamp(34px, 4.4vw, 62px); }
.hero__chapo { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; max-width: 32em; margin-inline: auto; color: var(--cendre); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero__media img { animation: hero-zoom 2.4s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
}

/* Carte d'infos à cheval sur le héros */
.carte-infos {
  position: relative; z-index: 5; margin-top: clamp(26px, 2.6vw, 38px);
  display: grid; grid-template-columns: 1.3fr 1.05fr 1.15fr .8fr; gap: 0;
  background: var(--lait); border-radius: 0; border: var(--filet-net);
}
.carte-infos__bloc { padding: 24px 24px; display: flex; gap: 12px; align-items: flex-start; }
.carte-infos__bloc + .carte-infos__bloc { border-left: 1px solid var(--filet); }
.carte-infos__bloc .ico { color: var(--feuille); margin-top: 3px; }
.carte-infos__titre { display: block; font: 700 16.5px/1.25 var(--f-titre); margin-bottom: 4px; }
.carte-infos__bloc p { font-size: 15px; line-height: 1.5; color: var(--cendre); margin: 0; }
.carte-infos__bloc a { color: var(--feuille); font-weight: 600; text-decoration: none; }
.carte-infos__bloc a:hover { text-decoration: underline; }
.carte-infos__laura img { width: 64px; height: 64px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--filet); }
.note {
  display: inline-flex; align-items: center; gap: 3px; font: 700 26px/1 var(--f-titre); color: var(--encre);
}
.note .ico { width: 18px; height: 18px; color: var(--feuille); margin: 0; }
.carte-infos__avis { flex-direction: column; justify-content: center; gap: 6px; text-decoration: none; transition: background-color .2s ease; border-radius: 0; }
.carte-infos__avis:hover { background: var(--sable); }
.carte-infos__avis span { font-size: 15px; color: var(--cendre); }

@media (max-width: 1100px) {
  .carte-infos { grid-template-columns: 1fr 1fr; }
  .carte-infos__bloc:nth-child(3) { border-left: 0; }
  .carte-infos__bloc:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .carte-infos__avis { border-radius: 0; }
}
@media (max-width: 720px) {
  /* Sur petit écran, le texte passe sous la photo : plus de remontée ni d'en-tête translucide */
                .hero__media { height: auto; }
  .hero__media img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .hero__etiquette { position: static; margin-top: 18px; }
  .hero__texte { text-align: left; }
  .hero__actions { justify-content: stretch; }
  .hero h1 { text-shadow: none; margin-top: 18px; }
  .hero__chapo { text-shadow: none; }
  .hero__actions .bouton { flex: 1 1 100%; }
  /* Plus de remontee ici : en pile, le texte et les boutons passent sous la photo,
     et ces -72px recouvraient le second bouton du heros, invisible et incliquable. */
  .carte-infos { grid-template-columns: 1fr; margin-top: 24px; }
  .carte-infos__bloc { padding: 20px; }
  .carte-infos__bloc + .carte-infos__bloc { border-left: 0; border-top: 1px solid var(--filet); }
  .carte-infos__avis { border-radius: 0; flex-direction: row; align-items: center; gap: 12px; }
}

/* ---------- Bannière des pages intérieures ---------- */
.banniere { position: relative; overflow: hidden; color: var(--blanc); background: var(--foret); }
.banniere__media { position: absolute; inset: 0; }
.banniere__media img { width: 100%; height: 100%; object-fit: cover; }
.banniere__voile { position: absolute; inset: 0; background: rgba(17, 21, 15, .50); }

.banniere__contenu { position: relative; z-index: 2; padding-block: clamp(56px, 7vw, 112px) clamp(72px, 8vw, 128px); }
.banniere h1 { margin: 16px 0 14px; max-width: 14em; }
.banniere p { font-size: clamp(17px, 1.3vw, 19px); max-width: 36em; margin: 0; }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.ariane li { display: inline-flex; align-items: center; gap: 6px; }
.ariane a { text-decoration: none; opacity: .85; }
.ariane a:hover { opacity: 1; text-decoration: underline; }
.ariane .ico { width: 14px; height: 14px; opacity: .7; }

/* ---------- Grilles éditoriales ---------- */
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 40px; align-items: center; }
.c-7 { grid-column: span 7; } .c-6 { grid-column: span 6; } .c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; } .c-8 { grid-column: span 8; }
.debut-8 { grid-column: 8 / span 5; }
.aligne-haut { align-items: start; }
/* Deux blocs qui se suivent ne portent jamais leur photo du même côté : la page
   pencherait d’un seul bord. L’ordre du code ne bouge pas, donc le téléphone garde
   le titre avant la photo. */
@media (min-width: 901px) {
  .grille--media-gauche > figure { order: -1; }
}
@media (max-width: 900px) {
  .grille > * { grid-column: 1 / -1 !important; }
}
.chapo { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--encre); }
.texte-cendre { color: var(--cendre); }
.titre-bloc { margin-bottom: 24px; }
.mesure { max-width: 36em; }

/* ---------- Accueil : bienvenue ---------- */
.bienvenue { padding-top: calc(var(--pad-m) + 8px); }
.bienvenue h2 { margin-bottom: 22px; }
.labels { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 30px; padding: 16px 0; border-block: 1px solid var(--filet); font-size: 15px; }
.labels span { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.labels .ico { color: var(--feuille); }
.duo-photos { position: relative; padding-bottom: 72px; }
.duo-photos__grande { border-radius: 0; border: var(--filet-net); }
.duo-photos__petite {
  position: absolute; left: -24px; bottom: 0; width: 56%;
  border: 6px solid var(--lait); border-radius: 0; border: var(--filet-net);
}
.duo-photos .ardoise { position: absolute; right: 18px; top: -16px; }
@media (max-width: 900px) {
  .duo-photos__petite { left: -8px; width: 52%; }
}

/* ---------- Accueil : l'ardoise du magasin ---------- */
.gamme { overflow: hidden; }
.gamme h2 { margin-bottom: 20px; }
.gamme__intro p { color: var(--cendre); }
.gamme__intro .chiffre-phrase { color: var(--encre); }
.chiffre-phrase strong { font: 700 1.9em/1 var(--f-titre); color: var(--feuille); letter-spacing: -.01em; }
.fond-foret .chiffre-phrase strong, .fond-encre .chiffre-phrase strong { color: var(--feuille-clair); }
.gamme__vitrine { margin-top: 0; position: relative; }
.gamme__vitrine img { border-radius: 0; }
.gamme__vitrine .ardoise { position: absolute; left: 0; bottom: 0; }

.tableau-noir { position: relative; }
.tableau-noir__surface {
  position: relative; isolation: isolate; background: var(--encre);
  padding: clamp(32px, 3.8vw, 56px) clamp(24px, 3.6vw, 56px);
  box-shadow: inset 0 0 0 1px rgba(242, 241, 231, .12);
}
.tableau-noir__titre { font: 700 clamp(24px, 2.2vw, 32px)/1.1 var(--f-titre); color: var(--craie); text-align: center; margin: 0 0 6px; }
.tableau-noir__sous { text-align: center; color: rgba(242, 239, 232, .62); font-size: 15px; margin: 0 0 28px; }
.tableau-noir__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.tableau-noir__liste li { border-top: 1px solid rgba(242, 241, 231, .2); padding-top: 14px; }
.tableau-noir__liste h3 { font-size: 20px; color: var(--craie); margin-bottom: 6px; }
.tableau-noir__liste p { color: rgba(242, 239, 232, .7); font-size: 15px; line-height: 1.5; margin: 0; }
.tableau-noir__pied { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(242, 241, 231, .2); text-align: center; color: rgba(242, 239, 232, .78); font-size: 15px; }
.tableau-noir__pied strong { color: var(--feuille-clair); font-weight: 600; }
@media (max-width: 640px) { .tableau-noir__liste { grid-template-columns: 1fr; } }

/* ---------- Accueil : moment signature (photo qui déborde et citation) ---------- */
.signature { padding-block: var(--pad-l); overflow: hidden; }
.signature__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.signature__photo { grid-column: 4 / -1; grid-row: 1; margin-right: calc(-1 * max(var(--gouttiere), (100vw - var(--conteneur)) / 2)); position: relative; overflow: hidden; border-radius: 0; }
.signature__photo img { width: 100%; transform: scale(1.08); will-change: transform; }
.signature__photo .ardoise { position: absolute; top: 9%; right: max(28%, 120px); }
.signature__carte {
  grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 2;
  background: var(--foret); color: var(--craie); padding: clamp(28px, 3.5vw, 56px); border-radius: 0; border: var(--filet-net);
}
.signature__carte blockquote { margin: 0 0 22px; font: 400 clamp(24px, 2.2vw, 32px)/1.25 var(--f-titre); color: var(--blanc); letter-spacing: -.01em; }
.signature__carte blockquote::before { content: "«\00a0"; color: var(--feuille-clair); }
.signature__carte blockquote::after { content: "\00a0»"; color: var(--feuille-clair); }
.signature__source { font-size: 15px; color: rgba(242, 239, 232, .75); margin-bottom: 26px; }
.signature__source strong { color: var(--craie); }
@media (max-width: 900px) {
  .signature__photo { grid-column: 1 / -1; margin-right: calc(-1 * var(--gouttiere)); }
  .signature__photo .ardoise { right: 20px; top: 12px; }
  .signature__carte { grid-column: 1 / -1; grid-row: 2; margin-top: -48px; margin-inline: 8px; }
}

/* ---------- Avis ---------- */
.avis__note { margin: 0; font: 400 clamp(64px, 7vw, 104px)/.9 var(--f-titre); letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 6px; }
.avis__note .ico { width: clamp(32px, 3vw, 44px); height: clamp(32px, 3vw, 44px); color: var(--feuille); }
.avis__volume { font-size: 18px; margin: 14px 0 26px; color: var(--cendre); }
.avis__volume a { color: var(--encre); }
.avis__liste li { padding-block: 26px; border-top: 1px solid var(--filet); }
.avis__liste li:last-child { border-bottom: 1px solid var(--filet); }
.avis__liste blockquote { margin: 0 0 10px; font: 400 clamp(20px, 1.7vw, 25px)/1.35 var(--f-titre); }
.avis__liste blockquote::before { content: "«\00a0"; color: var(--feuille); }
.avis__liste blockquote::after { content: "\00a0»"; color: var(--feuille); }
.avis__meta { font-size: 14px; color: var(--cendre); display: flex; align-items: center; gap: 8px; }
.etoiles { display: inline-flex; gap: 1px; color: var(--feuille); }
.fond-encre .etoiles, .fond-foret .etoiles, .fond-encre .etoiles, .fond-encre .etoiles { color: var(--feuille-clair); }
.etoiles .ico { width: 14px; height: 14px; }

/* ---------- Pré-pied : horaires et formulaire ---------- */
.prepied__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.carte { background: var(--lait); border-radius: 0; padding: clamp(24px, 3vw, 44px); border: var(--filet-net); }
.carte--foret { background: var(--foret); color: var(--craie); }
.carte h2 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 22px; }
.horaires { width: 100%; border-collapse: collapse; font-size: 16px; margin-bottom: 24px; }
.horaires th { text-align: left; font-weight: 500; padding: 9px 0; }
.horaires td { text-align: right; padding: 9px 0; font-variant-numeric: tabular-nums; }
.horaires tr + tr th, .horaires tr + tr td { border-top: 1px solid var(--filet-clair); }
.horaires .repos td { opacity: .7; }
.horaires--clair tr + tr th, .horaires--clair tr + tr td { border-top-color: var(--filet); }
.horaires--clair tr.aujourdhui th::after { background: var(--feuille); color: var(--blanc); }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { font-weight: 700; }
@media (max-width: 560px) {
  .horaires { font-size: 15px; }
  .horaires tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .horaires th { flex: 1 1 auto; padding-bottom: 2px; }
  .horaires td { margin-left: auto; white-space: nowrap; padding-top: 2px; }
  .horaires tr + tr th, .horaires tr + tr td { border-top: 0; }
  .horaires tr + tr { border-top: 1px solid var(--filet-clair); }
  .horaires--clair tr + tr { border-top-color: var(--filet); }
  .horaires .repos td { white-space: normal; }
}
.horaires tr.aujourdhui th::after { content: "aujourd’hui"; margin-left: 10px; font: 600 11px/1 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; background: var(--feuille-clair); color: var(--encre); padding: 4px 7px; border-radius: var(--rayon-pilule); vertical-align: 2px; }
.coordonnees { display: grid; gap: 12px; margin-bottom: 26px; }
.coordonnees a, .coordonnees p { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; margin: 0; }
.coordonnees a:hover { text-decoration: underline; }
.coordonnees .ico { margin-top: 3px; color: var(--feuille-clair); }
.carte--foret .bouton { margin-right: 10px; margin-top: 6px; }

/* Formulaires */
.formulaire { display: grid; gap: 16px; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.champ label span { font-weight: 400; color: var(--cendre); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid rgba(30, 34, 25, .22); border-radius: var(--rayon);
  background: var(--blanc); font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--foret); box-shadow: 0 0 0 3px rgba(78, 118, 38, .18); }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--cendre); }
.consentement input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--foret); flex: none; }
.formulaire__message { display: none; padding: 14px 16px; background: var(--sable); border-left: 3px solid var(--feuille); color: var(--foret-fonce); font-weight: 500; }
.formulaire__message.visible { display: block; }
.formulaire__message--erreur { border-left-color: #a84232; background: #faf1ee; color: #6a2718; }
button[aria-busy="true"] { opacity: .6; cursor: progress; }
@media (max-width: 900px) { .prepied__grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .formulaire__ligne { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.pied { padding-top: var(--pad-m); padding-bottom: 28px; font-size: 15px; }
.pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 40px; }
.pied__logo { display: inline-block; margin-bottom: 18px; }
.pied__logo img { height: 74px; width: auto; }
.pied h2 { font: 700 18px/1.2 var(--f-titre); margin-bottom: 16px; }
.pied p, .pied li { color: var(--cendre); }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--feuille); }
.pied ul li + li { margin-top: 8px; }
.pied__reseaux { display: flex; gap: 12px; margin-top: 18px; }
.pied__reseaux a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--filet); border-radius: 50%; }
.pied__reseaux a:hover { border-color: var(--feuille); }
.pied__labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pied__labels span { font-size: 13px; font-weight: 600; padding: 6px 10px; border: 1px solid var(--filet); border-radius: var(--rayon-pilule); }
.pied__bas { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 14px; color: var(--cendre); }
.pied__bas nav { display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 980px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; gap: 32px; } }

/* Barre d'action mobile */
.barre-mobile { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: 68px; }
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--lait); border-top: var(--filet-net);
  }
  .barre-mobile .bouton { padding: 13px 10px; }
  .barre-mobile .bouton--ligne { border-color: var(--foret); color: var(--foret); }
}

/* ---------- La ferme ---------- */
.portrait__photo { position: relative; }
.portrait__photo img { border-radius: 0; border: var(--filet-net); }
.portrait__photo .ardoise { position: absolute; left: -14px; bottom: 28px; max-width: 80%; white-space: normal; }
.exergue-citation { font: 700 clamp(34px, 3.6vw, 52px)/1 var(--f-titre); color: var(--feuille); letter-spacing: -.02em; margin: 30px 0 8px; }
.exergue-citation::before { content: "«\00a0"; }
.exergue-citation::after { content: "\00a0»"; }
.exergue-source { font-size: 14px; color: var(--cendre); margin-bottom: 0; }

.frise { position: relative; }
.frise li { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding-bottom: 34px; }
.frise li::before { content: ""; position: absolute; left: 157px; top: 10px; bottom: -6px; width: 1.5px; background: rgba(78, 118, 38, .35); }
.frise li:last-child::before { display: none; }
.frise__date { font: 700 17px/1.3 var(--f-titre); color: var(--feuille); text-align: right; padding-right: 22px; position: relative; }
.frise__date::after {
  content: ""; position: absolute; right: -7px; top: 5px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--sable); border: 2.5px solid var(--feuille);
}
.frise li:last-child .frise__date::after { background: var(--feuille); border-color: var(--feuille-fonce); }
.frise h3 { margin-bottom: 6px; }
.frise p { color: var(--cendre); margin: 0; }
@media (max-width: 560px) {
  .frise li { grid-template-columns: 1fr; gap: 4px; padding-left: 26px; }
  .frise li::before { left: 5px; }
  .frise__date { text-align: left; padding-right: 0; }
  .frise__date::after { right: auto; left: -27px; }
}
.colle { position: sticky; top: calc(var(--entete-h) + 24px); }
.bulle {
  position: relative; background: var(--lait); border-radius: 0; padding: 22px 24px; margin-top: 28px; border: var(--filet-net);
}
.bulle::after { content: ""; position: absolute; left: 34px; bottom: -12px; border: 12px solid transparent; border-top-color: var(--lait); border-bottom: 0; }
.bulle blockquote { margin: 0 0 8px; font: 400 20px/1.35 var(--f-titre); }
.bulle p { font-size: 14px; color: var(--cendre); margin: 0; display: flex; gap: 8px; align-items: center; }
.radio {
  margin-top: 40px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  background: var(--foret); color: var(--craie); border-radius: 0; padding: 20px 22px;
}
.radio__ico { width: 48px; height: 48px; border-radius: 50%; background: var(--feuille-clair); color: var(--encre); display: grid; place-items: center; }
.radio p { margin: 0; font-size: 14px; color: rgba(242, 239, 232, .8); }
.radio strong { display: block; font: 700 18px/1.25 var(--f-titre); color: var(--blanc); margin-bottom: 4px; }
.radio audio { grid-column: 1 / -1; width: 100%; height: 40px; }
.radio a { color: var(--feuille-clair); }

.fiche { margin: 0; border-top: 1.5px solid var(--encre); }
.fiche div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.fiche dt { font: 600 12.5px/1.6 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--feuille); padding-top: 2px; }
.fiche dd { margin: 0; font-size: 16px; }
.fiche dd strong { font: 700 19px/1.2 var(--f-titre); }
@media (max-width: 480px) { .fiche div { grid-template-columns: 1fr; gap: 2px; } }
.troupeau__photos { position: relative; padding-bottom: clamp(96px, 9vw, 140px); }
/* 03/11/2026 : Laura a retiré « la seule blanche du troupeau » et la photo qui
   se promenait par-dessus. La réserve du bas n'attend plus personne, et sans
   ce modificateur la colonne gardait 140 px de blanc. */
.troupeau__photos--seule { padding-bottom: 0; }
.troupeau__photos > img { border-radius: 0; border: var(--filet-net); }
.anecdote {
  position: absolute; right: 0; bottom: 0; z-index: 4; width: min(420px, 74%);
  background: var(--lait); border-radius: 0; border: var(--filet-net); display: grid; grid-template-columns: 1fr; overflow: hidden;
  border: 1px solid var(--filet);
}
.anecdote img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; }
.troupeau__nurserie { margin-top: 40px; width: 100%; position: relative; }
.troupeau__nurserie img { border-radius: 0; border: var(--filet-net); aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%; }
.troupeau__nurserie .ardoise { position: absolute; left: 14px; bottom: -14px; }
@media (max-width: 900px) { .troupeau__nurserie { width: 100%; margin-top: 40px; } }
.anecdote div { padding: 18px 20px; }
.anecdote h3 { font-size: 19px; margin-bottom: 6px; }
.anecdote p { font-size: 14.5px; line-height: 1.5; color: var(--cendre); margin: 0; }
@media (max-width: 900px) {
  .troupeau__photos { padding-bottom: 0; }
  .anecdote { position: relative; right: auto; bottom: auto; width: 100%; margin-top: -40px; margin-left: 12px; width: calc(100% - 24px); }
}

.journee { overflow: hidden; }
.section.journee { padding-block: var(--pad-m) var(--pad-s); }

.section.journee .conteneur { justify-content: flex-start !important; }
.journee__intro { max-width: 40em; color: var(--cendre); margin: 18px 0 44px; }
/* Cinq etapes sur six colonnes : trois cartes d'un tiers, puis deux de moitie.
   Aucune rangee ne reste trouee, et la photo la plus large (568px) tient sous la
   source de 600px, donc aucune image etiree. */
.etapes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 44px) clamp(20px, 2vw, 32px); counter-reset: etape; position: relative; }
.etapes > li { grid-column: span 2; }
.etapes > li:nth-child(4), .etapes > li:nth-child(5) { grid-column: span 3; }

.etapes li { position: relative; }
/* 03/11/2026 : l'étiquette de l'étape était en lait sur encre, parce que la
   bande vivait sur fond forêt. Les sections sombres sont parties, et une
   étiquette crème sur du sable ne se voit plus. Elle reprend l'ardoise de la
   maison, sombre, qui se lit sur les deux. */
.etapes .ardoise { position: relative; z-index: 1; margin-bottom: 18px; }

.etapes img { border-radius: 0; margin-bottom: 16px; }
.etapes h3 { font-size: 20px; margin-bottom: 6px; }
.etapes p { font-size: 15px; line-height: 1.5; color: var(--cendre); margin: 0; }
@media (max-width: 1000px) {
  .etapes { grid-template-columns: repeat(5, 260px); overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gouttiere)); padding-right: var(--gouttiere); }
  .etapes > li, .etapes > li:nth-child(4), .etapes > li:nth-child(5) { grid-column: auto; }
  .etapes li { scroll-snap-align: start; }
  .etapes::before { right: auto; width: 1340px; }
}

.liste-cochee li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--filet); }
.liste-cochee li:last-child { border-bottom: 1px solid var(--filet); }
.liste-cochee .ico { color: var(--feuille); margin-top: 3px; }
.fond-foret .liste-cochee li, .fond-encre .liste-cochee li { border-color: var(--filet-clair); }
.fond-foret .liste-cochee .ico, .fond-encre .liste-cochee .ico { color: var(--feuille-clair); }
.gardiennes__photo { position: relative; }
.gardiennes__photo img { border-radius: 0; border: var(--filet-net); }
.gardiennes__photo .ardoise { position: absolute; left: 14px; bottom: 14px; background: var(--encre); color: var(--craie); padding: 8px 15px 9px 13px; }

.nom { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.nom__logo { width: 100%; background: var(--lait); padding: clamp(18px, 2vw, 28px); border: var(--filet-net); }
.nom__texte { max-width: 44em; }
.nom h2 { margin-bottom: 16px; }
@media (max-width: 760px) { .nom { grid-template-columns: 1fr; } .nom__logo { max-width: 220px; } }

/* ---------- Où nous trouver ---------- */
.pratique { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 30px; }
.pratique li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--filet); font-size: 15.5px; line-height: 1.45; }
.pratique .ico { color: var(--feuille); margin-top: 1px; }
.pratique strong { display: block; }
@media (max-width: 560px) { .pratique { grid-template-columns: 1fr; } }
.saison-note { margin-top: 22px; padding: 16px 18px; background: var(--sable); border-left: 3px solid var(--feuille); border-radius: 0; font-size: 15.5px; }
.magasin__photo { position: relative; }
.magasin__photo img { border-radius: 0; border: var(--filet-net); }
/* ⚠️ « ENTRÉE DU MAGASIN » SE POSE EN HAUT, PAS EN BAS. Au bas de la photo,
   l'étiquette recouvrait justement le tapis au logo posé devant la porte, le
   seul endroit de l'image qui montre cette entrée. Retour de Laura le
   03/11/2026 : « décaler la légende entrée du magasin ». */
.magasin__photo .ardoise { position: absolute; left: -16px; top: 26px; max-width: 86%; white-space: normal; }

/* La saison du lait : une courbe qui se lit mois par mois */
.saison { margin-top: 44px; }
.courbe { margin: 0; --haut-bulle: 112px; }
.courbe__cadre { position: relative; padding-top: var(--haut-bulle); }
.courbe svg { display: block; width: 100%; height: clamp(160px, 17vw, 230px); }

/* La lecture au survol : une etiquette qui suit le curseur le long de l'annee */
.courbe__bulle {
  position: absolute; left: 0; bottom: calc(100% - var(--haut-bulle) + 16px);
  width: min(300px, 78vw); margin: 0; padding: 13px 16px 14px;
  background: var(--foret); color: var(--craie); border-radius: var(--rayon-champ);
  font-size: 14px; line-height: 1.45; transition: transform .12s ease-out;
}
.courbe__bulle strong { font: 700 15px/1.2 var(--f-titre); }
.courbe__dire { display: block; margin-top: 5px; color: rgba(243, 241, 234, .82); }
.courbe__tag { display: none; }
.courbe__bulle.est-courant .courbe__tag {
  display: inline-block; margin-left: 9px; vertical-align: 2px;
  background: var(--feuille-clair); color: var(--encre);
  font: 600 12px/1 var(--f-texte); letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 7px; border-radius: var(--rayon-pilule);
}
.courbe__survol { position: absolute; inset: 0; pointer-events: none; opacity: .75; transition: opacity .2s; }
.courbe--lue .courbe__survol { opacity: 1; }
.courbe__regle {
  position: absolute; left: var(--px, 50%); top: calc(var(--haut-bulle) - 14px); bottom: 0;
  width: 1px; background: var(--feuille); opacity: .5; transition: left .1s linear;
}
.courbe__point {
  position: absolute; left: var(--px, 50%); top: calc(var(--haut-bulle) + var(--py, 0px));
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--foret); box-shadow: 0 0 0 3px var(--sable);
  transition: left .1s linear, top .1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .courbe__bulle, .courbe__regle, .courbe__point { transition: none; }
}
.courbe__jalons { position: relative; height: 124px; margin-top: 12px; }
.courbe__jalons li {
  position: absolute; top: 0; width: min(230px, 26vw);
  font-size: 14.5px; line-height: 1.45; color: var(--cendre);
}
.courbe__jalons li::before { content: ""; display: block; width: 1.5px; height: 18px; background: var(--feuille); margin-bottom: 10px; }
.courbe__jalons strong { display: block; font: 700 17px/1.25 var(--f-titre); color: var(--encre); margin-bottom: 4px; }
.jalon--droite { left: var(--x); padding-left: 14px; max-width: calc(100% - var(--x)); }
.jalon--gauche { right: calc(100% - var(--x)); padding-right: 14px; text-align: right; max-width: var(--x); }
.jalon--gauche::before { margin-left: auto; }
.jalon--centre { left: var(--x); transform: translateX(-50%); text-align: center; }
.jalon--centre::before { margin: 0 auto 10px; }
.jalon--txt-droite > span { display: block; text-align: left; }
.jalon--txt-gauche > span { display: block; text-align: right; }
.courbe__mois { display: grid; grid-template-columns: repeat(12, 1fr); border-top: 1px solid var(--filet); }
.courbe__mois li + li { border-left: 1px solid var(--filet); }
.courbe__mois .hors-saison { color: var(--cendre); background: rgba(31, 35, 29, .035); }
.courbe__mois button {
  display: block; width: 100%; padding: 12px 4px; border: 0; background: none; color: inherit;
  font: 600 13px/1.35 var(--f-texte); font-style: normal; letter-spacing: .04em; text-align: center;
  cursor: pointer; transition: background .25s, color .25s;
}
.courbe__mois button.actif { background: var(--feuille-clair); color: var(--encre); }
.courbe__mois button.en-cours { background: var(--foret); color: var(--craie); }
.courbe__mois button:focus-visible { outline: 2px solid var(--foret); outline-offset: -3px; }
.vitrine { margin-top: clamp(36px, 4vw, 60px); }
.vitrine h3 { font-size: clamp(21px, 1.8vw, 26px); margin-bottom: 20px; }
.vitrine__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.vitrine--pile .vitrine__grille { grid-template-columns: 1fr; gap: 22px; }
.vitrine__grille strong { display: block; font: 700 17px/1.3 var(--f-titre); margin-bottom: 6px; }
.vitrine__grille p { font-size: 15px; line-height: 1.5; color: var(--cendre); margin: 0; }
.vitrine__grille div { padding-top: 16px; border-top: 2px solid var(--feuille); }
@media (max-width: 860px) {
  .courbe__jalons { position: static; height: auto; display: grid; gap: 14px; }
  /* ⛔ `max-width` ÉTAIT OUBLIÉ DANS LE REPLI (corrigé le 30/10/2026). Les
     jalons calés sur la courbe portent `max-width: var(--x)` ou son
     complément, soit la distance du mois sur le tracé : une fois remis en
     liste, le premier gardait 90 px de large et sa phrase s'écrivait sur huit
     lignes d'un ou deux mots. `position: static` ne défait pas une largeur. */
  .courbe__jalons li { position: static; width: auto; max-width: none; text-align: left; padding: 0; }
  .courbe__jalons li::before { display: none; }
  .courbe__mois { grid-template-columns: repeat(6, 1fr); }
  .courbe__mois li:nth-child(7) { border-left: 0; }
  .courbe { --haut-bulle: 96px; }
  .courbe__bulle { width: min(280px, 88vw); font-size: 13.5px; padding: 11px 14px 12px; }
  .vitrine__grille { grid-template-columns: 1fr; }
}
.courbe__aide { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--cendre); }

.etal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); align-items: start; margin-top: 48px; }
.etal__col > li + li { margin-top: clamp(36px, 3.4vw, 52px); }
.etal figure { margin: 0 0 16px; position: relative; }
.etal img { border-radius: 0; width: 100%; }
.etal figure .ardoise { position: absolute; left: 0; bottom: 0; }
.etal h3 { margin: 22px 0 8px; }
.etal p { color: var(--cendre); font-size: 16px; margin: 0; }
.etal .dispo { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--feuille); }
@media (max-width: 760px) {
  /* Sur petit écran, chaque fiche se replie : photo à gauche, texte à droite */
  .etal { grid-template-columns: 1fr; gap: 0; }
  .etal__col > li + li, .etal__col + .etal__col { margin-top: 26px; }
  /* Photo flottante : le texte se cale à côté, puis dessous s'il est plus long */
  .etal li { overflow: hidden; }
  .etal figure { float: left; width: 38%; margin: 0 16px 10px 0; }
  .etal figure .ardoise { position: static; display: inline-flex; margin-top: 8px; transform: none; font-size: 13px; }
  .etal h3 { margin: 0 0 6px; font-size: 19px; }
  .etal p { font-size: 15px; }
  .etal .dispo { margin-top: 8px; font-size: 13px; }
}

.epicerie__liste { columns: 2 150px; column-gap: 24px; margin: 22px 0 30px; }
@media (max-width: 560px) { .epicerie__liste li { font-size: 15px; padding: 6px 0; } }
.epicerie__liste li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; break-inside: avoid; }
.epicerie__liste .ico { color: var(--feuille); margin-top: 3px; }
.encadres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.encadre { background: var(--lait); border-radius: 0; padding: 20px 22px; border: 1px solid var(--filet); }
.fond-foret .encadre, .fond-encre .encadre { background: transparent; border-color: var(--filet-clair); }
.fond-foret .encadre h3, .fond-encre .encadre h3 { color: var(--blanc); }
.fond-foret .encadre p, .fond-encre .encadre p { color: rgba(243, 241, 234, .78); }
.encadre h3 { font-size: 19px; margin-bottom: 6px; }
.encadre p { font-size: 15px; color: var(--cendre); margin: 0; }
@media (max-width: 560px) { .encadres { grid-template-columns: 1fr; } }
.epicerie__photos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.epicerie__photos img { border-radius: 0; border: var(--filet-net); }

@media (max-width: 760px) { .epicerie__photos img:nth-child(2) { margin-bottom: 0; } }

.revendeurs li { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--filet); }
.revendeurs li:last-child { border-bottom: 1px solid var(--filet); }
.revendeurs strong { display: block; font: 700 19px/1.25 var(--f-titre); }
.revendeurs span { color: var(--cendre); font-size: 15px; }
.revendeurs a { flex: none; display: inline-flex; gap: 6px; align-items: center; color: var(--feuille); font-weight: 600; font-size: 15px; text-decoration: none; }
.revendeurs a:hover { text-decoration: underline; }
.trajets { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 1100px) { .trajets { grid-template-columns: 1fr; } }
.trajets div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--filet); font-size: 16px; }
.trajets dt { color: var(--encre); }
.trajets dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .trajets { grid-template-columns: 1fr; } }
.note-source { font-size: 13.5px; color: var(--cendre); margin-top: 12px; }
.carte-geo { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.carte-geo iframe { display: block; width: 100%; height: clamp(320px, 38vw, 480px); border: 0; filter: saturate(.85); }
.carte-geo__bouton { position: absolute; left: max(var(--gouttiere), calc((100vw - var(--conteneur)) / 2)); bottom: 28px; z-index: 2; border: var(--filet-net); }

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); margin-top: 36px; }
.faq div { padding: 22px 0; border-top: 1px solid var(--filet); }
.faq h3 { font-size: 20px; margin-bottom: 8px; }
.faq p { color: var(--cendre); margin: 0; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

/* Pages légales */
.legal h2 { font-size: clamp(21px, 1.7vw, 25px); margin: 36px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--cendre); }
.legal a { color: var(--feuille); font-weight: 500; }
.ariane--sombre a, .ariane--sombre li { color: var(--cendre); }

/* ---------- Contact ---------- */
.contact__coord h2 { color: var(--blanc); font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 18px; }
.tel-geant { display: inline-flex; align-items: center; gap: 12px; font: 700 clamp(28px, 2.8vw, 38px)/1 var(--f-titre); color: var(--blanc); text-decoration: none; margin: 4px 0 8px; letter-spacing: -.01em; }
.tel-geant:hover { color: var(--feuille-clair); }
.contact__coord .coordonnees { margin-top: 22px; }
.reseaux-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.reseaux-ligne a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--filet-clair); border-radius: var(--rayon-pilule); text-decoration: none; font-size: 15px; }
.reseaux-ligne a:hover { border-color: var(--feuille-clair); color: var(--feuille-clair); }

/* ---------- Apparitions au défilement (le contenu reste visible sans JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .apparait { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
  .js .apparait.vu { opacity: 1; transform: none; }
  .js .apparait.d1 { transition-delay: .08s; } .js .apparait.d2 { transition-delay: .16s; } .js .apparait.d3 { transition-delay: .24s; } .js .apparait.d4 { transition-delay: .32s; }
}

/* Dans l'editeur de Caelestis Studio, tout est visible tout de suite : on ne vise pas
   un texte qui apparait, et une section masquee puis remise ne doit pas revenir invisible. */
.studio-edition .apparait { opacity: 1 !important; transform: none !important; transition: none !important; }
.studio-edition [data-parallaxe] { transform: none !important; }

/* ---------- Ajustements mobiles généraux ---------- */
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .duo-photos { padding-bottom: 56px; }
  .portrait__photo .ardoise, .magasin__photo .ardoise { left: 10px; }
  .gardiennes__photo .ardoise { left: 10px; bottom: 10px; }
  .carte-geo__bouton { left: var(--gouttiere); bottom: 16px; }
}

/* Découvrez notre univers : un aperçu des deux comptes */
.reseaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(32px, 3.4vw, 50px); }
.reseau {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--craie); border: var(--filet-net); padding: clamp(18px, 1.8vw, 26px);
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.reseau:hover { border-color: var(--feuille); transform: translateY(-2px); }
.reseau:focus-visible { outline: 2px solid var(--foret); outline-offset: 3px; }
.reseau__tete { display: flex; align-items: center; gap: 13px; min-width: 0; }
.reseau__tete .ico { color: var(--feuille); flex: none; width: 26px; height: 26px; }
.reseau__id { min-width: 0; }
.reseau__id strong { display: block; font: 700 17px/1.3 var(--f-titre); overflow-wrap: anywhere; }
.reseau__compte { display: block; margin-top: 2px; font-size: 14px; color: var(--cendre); }
.reseau__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: clamp(16px, 1.6vw, 22px) 0; }
.reseau__grille img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.reseau__pied {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15.5px; color: var(--feuille);
}
@media (prefers-reduced-motion: reduce) {
  .reseau, .reseau__pied .ico { transition: none; }
  .reseau:hover { transform: none; }
}
@media (max-width: 820px) { .reseaux { grid-template-columns: 1fr; } }

/* Version anglaise : les quelques textes portes par le CSS */
html[lang^="en"] .horaires tr.aujourdhui th::after { content: "today"; }
html[lang^="en"] .signature__carte blockquote::before,
html[lang^="en"] .avis__liste blockquote::before,
html[lang^="en"] .exergue-citation::before { content: "\201c"; }
html[lang^="en"] .signature__carte blockquote::after,
html[lang^="en"] .avis__liste blockquote::after,
html[lang^="en"] .exergue-citation::after { content: "\201d"; }

/* Le sélecteur de langue, dans le bandeau et dans le menu mobile */
.langue { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bandeau-infos__liens .langue { padding-left: 14px; border-left: 1px solid rgba(243, 241, 234, .22); }
.langue--mobile { justify-content: center; gap: 9px; padding: 12px 16px; border: var(--filet-net); font-weight: 600; text-decoration: none; color: var(--encre); }
.langue--mobile:hover { border-color: var(--feuille); }

/* Le carrousel des étapes, sur mobile : dire qu'il y a une suite, et la laisser deviner */
.journee__glisse { display: none; }
@media (max-width: 1000px) {
  .etapes { -webkit-overflow-scrolling: touch; }
  .journee__glisse {
    display: flex; align-items: center; gap: 9px; margin: 4px 0 0;
    font-size: 14px; font-weight: 600; color: var(--feuille);
  }
  .journee__glisse .ico { animation: glisse 2.4s ease-in-out infinite; }
}
@keyframes glisse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .journee__glisse .ico { animation: none; } }

/* Fin de la page ferme : le texte se cale au milieu de la photo, qui reste en paysage */
.bloc-fin { align-items: center; }
.bloc-fin__photo img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 760px) { .bloc-fin__photo img { aspect-ratio: 4 / 3; } }

/* Carte Google derrière une façade : l'iframe dépose des cookies, elle attend un clic */
.carte-geo__facade {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: clamp(320px, 38vw, 480px); padding: 28px;
  background: var(--vert-pastel); border: 0; border-top: var(--filet-net); border-bottom: var(--filet-net);
  cursor: pointer; text-align: center; color: var(--encre);
  transition: background-color .2s ease;
}
.carte-geo__facade:hover { background: var(--feuille-clair); }
.carte-geo__facade:focus-visible { outline: 2px solid var(--foret); outline-offset: -4px; }
.carte-geo__repere .ico { color: var(--feuille); width: 34px; height: 34px; }
.carte-geo__action { font: 700 19px/1.25 var(--f-titre); text-decoration: underline; text-underline-offset: 5px; }
.carte-geo__mention { font-size: 14px; line-height: 1.5; color: var(--cendre); max-width: 34em; }

/* Rappel de réouverture : le seul dispositif du site qui ramène un client trois mois plus tard */
.rappel {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 52px); align-items: start;
  margin-top: clamp(40px, 4.4vw, 64px); padding: clamp(26px, 2.8vw, 40px);
  background: var(--foret); color: var(--craie); border-radius: var(--rayon);
}
.rappel h3 { font-size: clamp(22px, 2vw, 28px); color: var(--craie); margin-bottom: 12px; }
.rappel__texte p { font-size: 16px; line-height: 1.6; color: rgba(243, 241, 234, .84); margin: 0; }
.rappel__form { display: grid; gap: 16px; }
.rappel__form label { color: var(--craie); }
.rappel__form .champ input {
  background: rgba(243, 241, 234, .07); border-color: rgba(243, 241, 234, .34); color: var(--craie);
}
.rappel__form .champ input::placeholder { color: rgba(243, 241, 234, .45); }
.rappel__form .champ input:focus { border-color: var(--craie); box-shadow: 0 0 0 3px rgba(243, 241, 234, .22); }
.rappel__form .consentement { color: rgba(243, 241, 234, .78); }
.rappel__form .bouton--plein { background: var(--craie); color: var(--foret); justify-self: start; }
.rappel__form .bouton--plein:hover { background: var(--blanc); }
.rappel .formulaire__message { color: var(--feuille-clair); }
@media (max-width: 860px) { .rappel { grid-template-columns: 1fr; } }

/* Fiche d'une bête : les chiffres du contrôle laitier, rattachés chacun à ce qu'ils donnent */
.fiche-bete { margin: clamp(26px, 2.6vw, 36px) 0 0; padding: clamp(22px, 2.2vw, 30px); background: var(--lait); border: var(--filet-net); }
.fiche-bete__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.fiche-bete__tete strong { font: 700 clamp(24px, 2.2vw, 30px)/1.1 var(--f-titre); }
.fiche-bete__sous { font-size: 14.5px; color: var(--cendre); }
.fiche-bete__exergue { margin: 14px 0 20px; font: 700 clamp(19px, 1.7vw, 23px)/1.3 var(--f-titre); color: var(--feuille-fonce); }
.fiche-bete__mesures { margin: 0; display: grid; gap: 0; }
.fiche-bete__mesures div { display: grid; grid-template-columns: 11em 1fr; gap: 6px 18px; padding: 13px 0; border-top: 1px solid var(--filet); }
.fiche-bete__mesures dt { font-size: 15px; color: var(--cendre); }
.fiche-bete__mesures dd { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.fiche-bete__mesures b { font: 700 19px/1 var(--f-titre); font-variant-numeric: tabular-nums; flex: none; min-width: 2.2em; }
.fiche-bete__mesures span { font-size: 15px; line-height: 1.5; color: var(--cendre); }
.fiche-bete__pied { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--filet); font-size: 15px; line-height: 1.6; color: var(--cendre); }
@media (max-width: 620px) {
  .fiche-bete__mesures div { grid-template-columns: 1fr; }
  .fiche-bete__mesures dd { flex-direction: column; gap: 3px; }
}

/* Colonnes calées au milieu, et un conteneur plus étroit pour un dispositif seul en scène */
.aligne-centre { align-items: center; }
.conteneur--etroit { max-width: 1000px; }

/* Bande de respiration : une phrase posée sur une photo, pleine largeur */
.bande { position: relative; display: grid; place-items: center; min-height: clamp(300px, 30vw, 440px); overflow: hidden; }
.bande__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.bande::after { content: ""; position: absolute; inset: 0; background: rgba(27, 31, 25, .52); }
.bande__texte { position: relative; z-index: 1; text-align: center; padding-block: clamp(40px, 5vw, 72px); }
.bande__texte p {
  margin: 0 auto; max-width: 19em; color: var(--blanc);
  font: 400 clamp(21px, 2.3vw, 33px)/1.42 var(--f-titre);
  text-wrap: balance;
}
@media (max-width: 760px) { .bande__fond { object-position: 50% 62%; } }

/* ---------- Relief de mise en page ---------- */

/* Trois échelles de titre au lieu d'une : tous les h2 faisaient 44 px, rien ne primait. */
.titre-fort { font-size: clamp(36px, 4.4vw, 64px); line-height: .98; letter-spacing: -.022em; }
.titre-menu { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.012em; }

/* Blocs décalés : 22 titres sur 27 démarraient sur la même verticale. */
.depart-2 { grid-column: 2 / span 5; }
.depart-3 { grid-column: 3 / span 6; }
.depart-fin { grid-column: 6 / -1; }
@media (max-width: 900px) {
  .depart-2, .depart-3, .depart-fin { grid-column: 1 / -1; }
}

/* Chevauchement : une image qui mord sur la section d'au-dessus. */
.mord-haut { align-self: start; margin: clamp(-150px, -9vw, -60px) 0 0; position: relative; z-index: 2; }
@media (max-width: 900px) { .mord-haut { margin-top: 0; } }


/* les li portent le contexte d'empilement, sinon le numéro passe sous le fond de section */
.frise > li, .etapes > li { position: relative; isolation: isolate; }

/* Cibles tactiles sur telephone : releve du 20/10/2026, plusieurs liens tombaient
   entre 20 et 22px de haut, sous les 24px que demande le critere WCAG 2.5.8.
   On ajoute de la hauteur de frappe sans toucher au rendu de bureau. */
@media (max-width: 760px) {
  .bandeau-infos__liens a { padding-top: 8px; padding-bottom: 8px; }
  .pied nav a, .pied__grille li a { display: inline-block; padding-top: 7px; padding-bottom: 7px; }
  .ariane a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
  .revendeurs a { padding-top: 6px; padding-bottom: 6px; }
}
/* Le telephone en paysage depasse 760px et retombait dans les regles de bureau :
   on vise le doigt lui-meme, quelle que soit la largeur. */
@media (pointer: coarse) {
  .consentement input { width: 24px; height: 24px; margin-top: 1px; }
  .ariane a, .pied nav a, .pied__grille li a, .revendeurs a { padding-top: 6px; padding-bottom: 6px; }
}

/* Deux photos posees dans des sections qui n'en avaient aucune. */
.avis__photo img, .revendeurs__photo img { width: 100%; height: auto; border: var(--filet-net); }
.revendeurs__photo { position: relative; max-width: 560px; }
.revendeurs__photo .ardoise { position: absolute; left: 14px; bottom: -14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   v2 : LA COUCHE DE COMPOSITION
   Le socle au-dessus ne bouge pas : palette, Zodiak et General Sans, boutons,
   champs, icônes, utilitaires. Ce qui change ici, c'est la composition, parce
   que c'est elle qui faisait daté, pas la teinte ni la lettre.
   Trois décisions tiennent tout le fichier :
     1. une seule barre en haut, au lieu de deux ;
     2. la photo touche le bord de l'écran, au lieu de vivre dans une boîte ;
     3. un seul dispositif fort par page, les autres s'effacent.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --entete-h: 76px;
  /* Les sections respirent plus mais sont moins nombreuses : le total baisse. */
  --pad-s: clamp(44px, 3vw + 26px, 84px);
  --pad-m: clamp(64px, 6vw + 24px, 128px);
  --pad-l: clamp(80px, 8vw + 28px, 168px);
  /* La distance entre le bord de l'écran et la colonne de texte. Sert aux
     scènes, dont la photo sort du conteneur et le texte y reste calé. */
  --marge-grille: max(var(--gouttiere), calc(50vw - var(--conteneur) / 2));
}

/* ---------- En-tête : une barre ----------
   La v1 : bandeau 40 px plus barre 109 px, et une barre d'actions fixe de
   68 px en bas, soit 28 pour cent du premier écran mobile pris par le chrome. */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 243, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .entete { background: var(--lait); }
}
.entete--compacte { border-bottom-color: var(--filet); }
.entete__ligne {
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px);
  min-height: var(--entete-h); transition: min-height .3s ease;
}
.entete--compacte .entete__ligne { min-height: 64px; }

.marque { display: flex; align-items: center; gap: 13px; margin-right: auto; text-decoration: none; }
.marque img { height: 44px; width: auto; transition: height .3s ease; }
.entete--compacte .marque img { height: 38px; }
/* Le nom en lettres à côté de la marque dessinée : le PNG manuscrit est flou
   sous 120 px, et seul il ne dit pas le nom de la ferme. */
.marque__nom { display: grid; font: 700 18px/1.08 var(--f-titre); letter-spacing: -.015em; }
.marque__nom span { font: 400 13.5px/1.2 var(--f-texte); letter-spacing: .01em; color: var(--cendre); }

.menu ul { display: flex; gap: 2px; }
.menu a {
  display: block; padding: 9px 13px; text-decoration: none; white-space: nowrap;
  font: 500 15.5px/1.1 var(--f-texte); color: var(--encre);
  position: relative; transition: color .2s ease;
}
.menu a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1.5px;
  background: var(--feuille); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { font-weight: 600; }

.entete__actions { display: flex; align-items: center; gap: 12px; }
/* La pastille dit l'état en un mot et garde la phrase en infobulle : la phrase
   entière tenait sur deux lignes et prenait plus de large que le menu. */
.entete__actions .statut {
  margin-left: 0; background: var(--sable); color: var(--encre);
  font-size: 12.5px; white-space: nowrap;
}
.entete__actions .statut[data-etat="ouvert"]::before { background: var(--feuille); box-shadow: 0 0 0 3px rgba(63, 106, 67, .18); }
.entete__actions .statut[data-etat="ferme"]::before { background: var(--cendre); }
.langue {
  text-decoration: none; font: 600 13px/1 var(--f-texte); letter-spacing: .06em;
  padding: 7px 9px; color: var(--cendre); transition: color .2s ease;
}
.langue:hover { color: var(--encre); }
.entete__appel { padding: 12px 20px; font-size: 15px; }
/* Le bouton Menu perd son cadre et son mot : trois traits suffisent. */
.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--encre); }
.burger__traits { display: grid; gap: 5px; width: 22px; }
.burger__traits span { height: 1.5px; background: currentColor; transition: transform .3s ease, opacity .2s ease; }

/* ---------- Héros : la photo tient le premier écran ----------
   Elle n'est couverte par rien, comme décidé le 08/10. Elle gagne simplement
   la place que lui prenaient le bandeau et la carte d'infos à quatre colonnes.
   78 pour cent de la hauteur d'écran : le haut du titre se devine en bas, ce
   qui appelle le défilement sans l'imposer. */
.hero { background: var(--lait); overflow: clip; }
.hero__media { height: min(78svh, 740px); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__contenu { padding-block: clamp(36px, 4.4vw, 76px) clamp(8px, 1vw, 20px); }
.hero__texte { max-width: none; margin-inline: 0; text-align: left; display: grid; justify-items: start; }
.hero .ardoise {
  background: none; color: var(--cendre); padding: 0 0 2px;
  font: 600 13px/1.2 var(--f-texte); letter-spacing: .12em; text-transform: uppercase;
}
.hero h1 { margin: 14px 0 18px; font-size: clamp(38px, 5.4vw, 68px); max-width: 15em; }
.hero__chapo { margin: 0; max-width: 34em; margin-inline: 0; font-size: clamp(18px, 1.45vw, 21px); }
.hero__actions { justify-content: flex-start; margin-top: 30px; }

/* La révélation du héros : un recadrage, pas un zoom. Le zoom à 1,06 de la v1
   est le mouvement d'accueil des thèmes de 2015. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__media img { animation: hero-cadrage 1.5s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes hero-cadrage {
    from { clip-path: inset(7% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* ---------- Bannière des pages intérieures ---------- */
.banniere__voile {
  background: linear-gradient(to top, rgba(17, 21, 15, .74) 0%, rgba(17, 21, 15, .42) 46%, rgba(17, 21, 15, .14) 100%);
}
.banniere__contenu { padding-block: clamp(96px, 13vw, 210px) clamp(44px, 5vw, 76px); }
.banniere h1 { font-size: clamp(34px, 4.6vw, 62px); }
.banniere--courte .banniere__contenu { padding-block: clamp(80px, 10vw, 150px) clamp(40px, 4.4vw, 64px); }

/* ---------- La scène : le dispositif de base de la v2 ----------
   Un texte calé sur la colonne du conteneur, une photo qui va jusqu'au bord de
   l'écran. Remplace les figures en boîte avec un filet de 1 px, qui étaient le
   motif le plus répété du site : 20 règles de CSS en posaient un. */
.scene { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.scene__texte { padding-block: var(--pad-m); }
.scene__media { position: relative; align-self: stretch; min-height: clamp(300px, 40vw, 620px); }
.scene__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ C’EST LA CLASSE QUI DIT LE CÔTÉ, PAS L’ORDRE DU CODE. Sans ces deux
   lignes, « media-droite » ne faisait rien quand la figure était écrite avant le
   texte : la scène gardait sa photo à gauche et le contrôle des côtés criait. */
.scene--media-droite .scene__media { order: 2; }
.scene--media-droite .scene__texte { order: 1; }
.scene--media-droite .scene__texte { padding-left: var(--marge-grille); padding-right: clamp(24px, 4vw, 72px); }
.scene--media-gauche .scene__texte { padding-right: var(--marge-grille); padding-left: clamp(24px, 4vw, 72px); order: 2; }
.scene--media-gauche .scene__media { order: 1; }
/* La légende se pose sur la photo, en bas, du côté intérieur. */
.scene__media figcaption { position: absolute; bottom: 0; left: 0; }
.scene figure { margin: 0; }
.scene__texte > :last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .scene { grid-template-columns: 1fr; }
  .scene__texte { padding: var(--pad-s) var(--gouttiere) !important; order: 2 !important; }
  .scene__media { order: 1 !important; min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- La planche : une photo pleine largeur, une phrase ---------- */
.bande__fond img { object-position: 50% 54%; }
.bande__texte { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.22; }

/* ---------- Les photos sortent de leurs boîtes ----------
   La v1 : 2 images bord à bord sur 157 fichiers, tout le reste encadré. */
.portrait__photo img, .gardiennes__photo img, .magasin__photo img,
.revendeurs__photo img, .signature__photo img, .avis__photo img,
.troupeau__photos img, .duo-photos img, .gamme__vitrine img,
.epicerie__photos img, .etal img, .bloc-fin__photo img,
.scene__media img, figure img { border: 0; box-shadow: none; }
.carte, .carte--foret { border: 0; }

/* ---------- L'étiquette ardoise : rare, donc lisible ----------
   Elle passait de signature à tic : 26 occurrences sur 4 pages, 11 sur la
   seule page de la ferme. Une par page ici, posée sur le dispositif de la page. */
.ardoise { padding: 8px 15px 9px 13px; font-size: 14px; }
figure .ardoise { margin: 0; }

/* ---------- La gamme en liste typographique ----------
   Remplace le tableau noir encadré, qui lisait comme une carte de restaurant
   de 2014 : un bloc sombre, un filet intérieur, six entrées sur deux colonnes. */
/* Trois colonnes, pas quatre : six familles sur quatre colonnes laissaient
   deux trous au second rang. Trois par trois, la liste se referme. */
.familles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(32px, 4vw, 72px); margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1000px) { .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .familles { grid-template-columns: 1fr; } }
.familles li { padding: 22px 0; border-top: 1px solid var(--filet-clair); }
.familles h3 { margin: 0 0 6px; font-size: clamp(20px, 1.6vw, 23px); }
.familles p { margin: 0; font-size: 16px; line-height: 1.5; }
.fond-foret .familles p, .fond-encre .familles p { color: #C9CCC2; }

.c-12 { grid-column: span 12; }

/* ---------- Les sections repliées les unes dans les autres ----------
   Trois sections de la page de la ferme sont devenues des sous-parties, là où
   elles avaient leur sens : le nom chez Laura, la chronique dans l'histoire, le
   contrôle laitier dans le troupeau. Elles gardent de l'air au-dessus d'elles,
   sans quoi elles se collent à ce qui précède. */
.repli { margin-top: clamp(48px, 5.4vw, 92px); padding-top: clamp(36px, 3.6vw, 56px); border-top: 1px solid var(--filet); }
.fond-foret .repli, .fond-encre .repli { border-top-color: var(--filet-clair); }
.apres-portrait { margin-top: clamp(32px, 3.4vw, 54px); padding-top: clamp(26px, 2.6vw, 38px); border-top: 1px solid var(--filet); }
.apres-portrait > :last-child { margin-bottom: 0; }
.ecoute-dans-histoire { margin-top: clamp(44px, 5vw, 86px); padding-top: clamp(34px, 3.4vw, 52px); border-top: 1px solid var(--filet); }
.controle-dans-troupeau { margin-top: clamp(44px, 5vw, 86px); padding-top: clamp(34px, 3.4vw, 52px); border-top: 1px solid var(--filet); }
.controle-dans-troupeau .texte-cendre { margin-bottom: 0; }
/* La photo du quai de traite ne doit pas s'étirer sur toute la fiche. */
.fiche-bete .revendeurs__photo { max-width: 420px; }
.fiche-bete .revendeurs__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- L'étal : une seule grille, un seul rapport de forme ----------
   La v1 posait six fiches dans deux sections et trois colonnes indépendantes :
   les images gardaient leur rapport d'origine, donc trois hauteurs par rang et
   des titres qui ne tombaient pas sur la même ligne. */
.etal-grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3.4vw, 56px) clamp(24px, 2.6vw, 44px);
  margin: clamp(36px, 4vw, 68px) 0 0; padding: 0; list-style: none;
}
.etal-grille figure { margin: 0 0 20px; position: relative; }
.etal-grille img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.etal-grille figcaption { position: absolute; left: 0; bottom: 0; }
.etal-grille h3 { margin: 0 0 8px; }
.etal-grille p { margin: 0 0 12px; color: var(--cendre); font-size: 16px; }
.etal-grille .dispo {
  display: inline-block; font: 600 13px/1 var(--f-texte);
  letter-spacing: .07em; text-transform: uppercase; color: var(--feuille);
}
@media (max-width: 1000px) { .etal-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .etal-grille { grid-template-columns: 1fr; } }

/* ⚠️ Le socle attend un <div> autour de chaque couple dt/dd. Les fiches écrites
   sans ce div se collaient les unes aux autres : ici le couple se tient tout
   seul, en deux colonnes, et se referme en une seule sur petit écran. */
.fiche:not(:has(div)) {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 40px);
}
.fiche:not(:has(div)) dt {
  grid-column: 1; padding: 18px 0 18px; border-top: 1px solid var(--filet);
}
.fiche:not(:has(div)) dd {
  grid-column: 2; padding: 18px 0; border-top: 1px solid var(--filet);
  color: var(--cendre);
}
@media (max-width: 700px) {
  .fiche:not(:has(div)) { grid-template-columns: 1fr; }
  .fiche:not(:has(div)) dt { grid-column: 1; padding-bottom: 2px; }
  .fiche:not(:has(div)) dd { grid-column: 1; border-top: 0; padding-top: 0; }
}

/* ---------- Le pied ---------- */
.pied__nom {
  display: grid; text-decoration: none; margin-bottom: 18px;
  font: 700 23px/1.06 var(--f-titre); letter-spacing: -.016em;
}
.pied__nom span { font: 400 16px/1.2 var(--f-texte); color: var(--cendre); }

/* ---------- Le mouvement ----------
   Une montée de 16 px et un fondu, décalés de 80 ms dans une même rangée.
   Jamais sur un bloc entier, jamais de soulèvement au survol, jamais de
   compteur animé : ils rendraient le site plus artificiel, pas moins. */
@media (prefers-reduced-motion: no-preference) {
  .js .apparait { transform: translateY(16px); transition-duration: .62s; }
  /* Le tracé de la courbe de saison se dessine quand elle entre dans l'écran. */
  .js .courbe__trace { stroke-dasharray: var(--longueur, 2400); stroke-dashoffset: var(--longueur, 2400); }
  .js .courbe.vu .courbe__trace { transition: stroke-dashoffset 1.25s cubic-bezier(.33, 1, .68, 1); stroke-dashoffset: 0; }
  .js .courbe__aplat { opacity: 0; transition: opacity .8s ease .5s; }
  .js .courbe.vu .courbe__aplat { opacity: 1; }
  /* La journée à la chèvrerie glisse à l'horizontale : voir plus bas, le
     dispositif vaut pour toutes les largeurs et ne dépend pas du script. */
}

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .menu { display: none; }
  .burger { display: block; }
  .entete__appel { display: none; }
  .entete__actions .statut { display: none; }
  .langue { display: none; }
}
@media (max-width: 720px) {
  .hero__media { height: min(64svh, 520px); }
  .hero__media img { height: 100%; object-position: 50% 60%; }
  .hero__contenu { padding-block: 30px 4px; }
  .hero .ardoise { position: static; margin: 0; }
  .hero__actions .bouton { flex: 1 1 100%; }
  .marque__nom { font-size: 16px; }
  .marque__nom span { font-size: 12.5px; }
  .marque img { height: 38px; }
}

/* ---------- La journée à la chèvrerie : cinq moments qui glissent ----------
   Cinq photos en grand, côte à côte. Le rail s'épingle et défile en entier,
   écran fixe, bureau ET téléphone (bloc GSAP de app.js, « La pellicule ...
   s'épingle », demandé le 31/10/2026). Ce bloc CSS reste le repli sans GSAP ou
   en mouvement réduit : un glissement natif simple. La v1 les empilait sur
   2 062 px de haut, la section la plus longue du site pour 144 mots.
   ⚠️ Un premier essai de défilement horizontal lié au défilement vertical SANS
   épingler a été retiré : la page descendait, et la dernière photo n'était vue
   de personne. L'épinglage règle cela, et pendant le pin le script coupe ce
   défilement natif (overflow-x caché, touch-action vertical) pour que le doigt
   ne se batte pas avec le scrub.
   ⚠️ pan-y reste dans touch-action (repli), sans quoi le doigt ne ferait plus
   défiler la page verticalement quand il part d'une carte. */
@media (min-width: 0px) {
  /* Le rail file jusqu'au bord droit de l'ecran, hors de la grille du texte.
     ⚠️ Ce n'est pas un effet : c'est ce qui RACCOURCIT LA COURSE. A 1707 px,
     elle tombe de 324 a 139 px, et le pilotage peut enfin partir tard (le
     temps de regarder la premiere photo) tout en finissant quand le rail est
     encore en vue. Les deux a la fois etaient impossibles sur 1 240 px utiles.
     La section porte « overflow: hidden », sans quoi 100vw, barre de
     defilement comprise, ferait deborder la page vers la droite. */
  .journee, .fabrication { overflow: hidden; }
  .journee .etapes,
  .fabrication .etapes {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--gouttiere));
    margin-right: calc(-1 * max(var(--gouttiere), (100vw - var(--conteneur)) / 2));
    padding-inline: var(--gouttiere);
    scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom;
  }
  .journee .etapes::-webkit-scrollbar,
  .fabrication .etapes::-webkit-scrollbar { display: none; }
  .journee .etapes > li,
  .fabrication .etapes > li { flex: 0 0 min(74vw, 300px); scroll-snap-align: start; min-width: 0; }
  .journee .etapes > li img,
  .fabrication .etapes > li img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
}

.banniere--courte .banniere__media img { max-height: 62vh; }

/* Le fond ne défile plus derrière le tiroir : sinon la page part toute seule
   quand on fait glisser le doigt sur le panneau. */
.tiroir-ouvert, .tiroir-ouvert body { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
}

/* Pellicule épinglée : la section se fixe, le rail glisse par transform.
   Le titre a déjà scrollé hors vue : on le retire du flux pour que le
   chapô + rail + pied se centrent verticalement dans le viewport. */
.rail-epingle { position: relative; overflow: hidden; }
.rail-epingle > .conteneur {
  display: flex; flex-direction: column; justify-content: center;
  height: 100vh; height: 100dvh; box-sizing: border-box;
  padding-top: 16px; padding-bottom: 24px;
}
.rail-epingle .titre-fort { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.rail-epingle .journee__intro { margin-bottom: 12px; }

/* 05/11/2026 : sur les pellicules épinglées (journée à la chèvrerie ET
   fabrication, même mécanique), le titre restait collé au haut de la section
   (titre en absolu, top: 0) pendant que le chapô se centrait plus bas, d'où un
   grand vide entre le titre et le sous-titre. Le titre revient dans le flux :
   le padding haut de la section devient sa marge, et le sous-titre se pose
   juste en dessous. Le titre défile proprement hors vue quand la pellicule
   s'épingle, comme avant. */
.section.journee.rail-epingle .titre-fort,
.section.fabrication.rail-epingle .titre-fort { position: static; opacity: 1; margin-top: 0; pointer-events: auto; }
.section.journee.rail-epingle .journee__intro,
.section.fabrication.rail-epingle .journee__intro { margin-top: 16px; margin-bottom: 20px; }

/* 05/11/2026 : au repos, pellicule épinglée, le rail restait collé en haut avec
   trop de blanc en dessous (titre et chapô déjà défilés hors vue). Le rail se
   centre maintenant dans la hauteur restante par marges auto : sur grand écran
   il se pose au milieu et le blanc se répartit, sur petit écran où il remplit
   déjà la hauteur les marges auto tombent à zéro, donc rien ne se coupe et le
   titre garde sa marge au-dessus. Pas de requête média : les marges auto font
   le tri toutes seules. */
.section.journee.rail-epingle .etapes,
.section.fabrication.rail-epingle .etapes { margin-top: auto; margin-bottom: auto; }
.rail-epingle .etapes {
  display: flex; gap: 16px; width: max-content;
  will-change: transform;
  padding-right: var(--gouttiere, 16px);
}
.rail-epingle .journee__glisse { display: none; }

/* ── Les flèches de la pellicule ───────────────────────────────────────────
   Demandées par Laura le 03/11/2026 : « est-ce qu'il y a la possibilité
   d'ajouter un bouton flèche pour faire défiler les photos à droite ? ». Le
   rail glissait au doigt, et sur grand écran il avançait au défilement de la
   page une fois la section épinglée : deux gestes que rien n'annonçait, et
   aucun moyen de le piloter à la souris.
   ⚠️ LES FLÈCHES NE SE MONTRENT QUE SI LE RAIL DÉPASSE. Posées en dur, elles
   restaient là sur un rail qui tient tout entier, et cliquer ne faisait rien :
   c'est le script qui retire l'attribut `hidden`, après mesure. */
.rail-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
/* Les flèches se posent à gauche et à droite du rail, centrées sur les photos. */
.rail-fleches { display: flex; gap: 10px; margin-left: auto; }
.rail-epingle .rail-fleches {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  margin: 0; padding: 0 12px; pointer-events: none; z-index: 3;
}
.rail-epingle .rail-fleche { pointer-events: auto; }
.rail-epingle .rail-pied { margin-top: 0; }
.rail-fleche {
  width: 46px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--craie); border: 1px solid rgba(242, 239, 232, .4); border-radius: 50%;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.rail-fleche .ico { width: 20px; height: 20px; }
.rail-fleche:hover, .rail-fleche:focus-visible { background: var(--craie); color: var(--foret); border-color: var(--craie); }
.rail-fleche[disabled] { opacity: .3; cursor: default; }
.rail-fleche[disabled]:hover { background: transparent; color: var(--craie); border-color: rgba(242, 239, 232, .4); }
.rail-fleche--arriere .ico { transform: rotate(180deg); }

.epingle__barre {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(0,0,0,.12);
  pointer-events: none; z-index: 2;
}
.epingle__barre span {
  display: block; height: 100%; width: 0;
  background: var(--encre, #2b2520);
  transition: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA DIRECTION, troisième passe du 26/10/2026 : « l'affiche »

   Relevé au Playwright sur les trois références données par Célestin, dans le
   code réel, pas à l'impression :

   · cambiumfarms.com  SangBleue OG LIGHT en display, 56 à 100 px, capitales,
                       posée aux coins bas d'une photo plein cadre qui change.
                       Navigation blanche transparente, aucun fond. Un SCEAU
                       circulaire gravé, centré en haut. Zéro boîte.
   · rapport…upadi.ca  GSAP, Lenis, ScrollTrigger, barba. Display à 81 px,
                       interligne 0,95, capitales. Photos en formes ORGANIQUES
                       (une arche, un rectangle qui sort par la gauche) sur
                       aplats saturés. Zéro ombre portée.
   · nakahora-bokujou  Crème #F6F4F1 et vert forêt #3E603B, exactement notre
                       palette. Capitales latines très espacées et CENTRÉES en
                       titres de section. Marque dessinée au trait. Rayon 2 px.

   CE QUI MANQUAIT À LA PASSE PRÉCÉDENTE, et que celle-ci corrige :
     1. le héros était un en-tête, pas une AFFICHE ;
     2. la display était en graisse 700, un bélier ; les trois références sont
        en graisse légère, en capitales, très espacées ;
     3. aucune marque : une référence sur trois a un sceau, une autre une bête
        dessinée au trait ; nous avions un PNG flou de 44 px ;
     4. toutes les photos étaient rectangulaires ; deux références sur trois
        cadrent au moins une image dans une forme.

   ⛔ Tenu : pas de shader, pas de loader à compteur, pas de dégradé décoratif,
   pas d'ombre portée, pas d'italique, pas de tiret cadratin.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --creme: #F6F4F1;          /* relevé sur nakahora */
  --creme-fonce: #EDE9E2;
  --brun-noir: #1A1E16;
  --olive: #3E603B;          /* relevé sur nakahora */
  --olive-clair: #9DB38C;

  /* ⚠️ LE PLANCHER DU CLAMP EST CE QUE VOIT LE TÉLÉPHONE, et c'est par là que
     la mise en page se gâte. À 390 px, 11vw vaut 43 px : le terme fluide ne
     gagne jamais, donc la valeur retenue est le PLANCHER, qui était calé pour
     un écran de bureau. Deux sections voisines apportaient chacune 112 px,
     soit 224 px de vide à la jointure, plus du quart d'un écran de téléphone.
     Mesuré le 27/10/2026, c'est l'origine des « marges trop grandes ».
     Les planchers descendent, les termes fluides et les plafonds ne bougent
     pas : à 1280 px, 11vw vaut 141 px et le bureau garde exactement ce qu'il
     avait. Le repère visé est de 88 à 120 px de blanc à une jointure. */
  --air-s: clamp(2.5rem, 6vw, 6rem);
  --air-m: clamp(3.5rem, 11vw, 11rem);
  --air-l: clamp(4.5rem, 18vw, 16rem);

  --rayon: 14px;
  --rayon-champ: 14px;
  --sortie: cubic-bezier(.16, 1, .3, 1);

  /* La lettre de l'affiche : Zodiak en graisse 400, capitales, très espacée. */
  --affiche: 400 var(--affiche-taille, clamp(30px, 5.4vw, 86px))/0.98 var(--f-titre);
}

body { background: var(--creme); }
/* ⚠️ LES TROIS FONDS CLAIRS ÉTAIENT RAMENÉS À LA MÊME COULEUR, et c'est la
   vraie cause du « le fond est le même sur toute la page ». La ligne disait
   « .fond-lait, .fond-sable, .fond-vert { background: var(--creme) } » : une
   page pouvait alterner ses classes sans rien changer à l'écran, et c'est
   exactement ce qui est arrivé à une première tentative d'alternance, qui
   n'a produit aucun effet visible.
   Le sable prend donc le second sol de la direction, « creme-fonce », déjà
   employé par les cartes et par l'affiche : ce n'est pas une couleur de plus,
   c'est celle qui existait et qu'on n'utilisait pas. */
.fond-lait { background: var(--creme); }
/* ⚠️ DEUX SOLS, PAS TROIS. Le sable et le vert partagent le second : une
   troisième teinte claire se remarquerait comme une hésitation, là où une
   alternance entre deux se lit comme un rythme. Le vert de la v1 n'a pas de
   place dans cette direction, qui tient sur le crème et le brun. */
.fond-sable, .fond-vert { background: var(--creme-fonce); }
.fond-foret, .fond-encre { background: var(--brun-noir); color: #EFEDE7; }
.section { padding-block: var(--air-m); }
.section--s { padding-block: var(--air-s); }
.section--l { padding-block: var(--air-l); }
.scene__texte { padding-block: var(--air-m); }

/* ---------- La navigation, transparente sur l'affiche ----------
   Sur la page d'accueil elle flotte sur la photo, en blanc, sans fond : c'est
   le code de Cambium. Partout ailleurs elle garde son crème. */
/* ⚠️ OPAQUE, PAS TRANSLUCIDE. A 90 %, le texte qui passe dessous se lit a
   travers : mesure du 30/10, 15 niveaux de gris d'ecart dans une barre qui
   devrait etre unie. Le flou cense l'empecher ne s'applique pas sur l'accueil,
   ou la regle du hero le coupe, et ailleurs il etale sans masquer. */
.entete { background: var(--creme); }
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .entete { background: var(--creme); }
}
body:has(.hero) .entete {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body:has(.hero) .entete:not(.entete--compacte) .menu a,
body:has(.hero) .entete:not(.entete--compacte) .marque__nom,
body:has(.hero) .entete:not(.entete--compacte) .marque__nom span,
body:has(.hero) .entete:not(.entete--compacte) .langue,
body:has(.hero) .entete:not(.entete--compacte) .burger { color: #FFFFFF; }
body:has(.hero) .entete:not(.entete--compacte) .marque img { filter: brightness(0) invert(1); }
body:has(.hero) .entete:not(.entete--compacte) .statut { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
body:has(.hero) .entete:not(.entete--compacte) .bouton--plein { background: #FFFFFF; color: var(--brun-noir); }
body:has(.hero) .entete.entete--compacte {
  background: var(--creme); border-bottom-color: var(--filet);
}
/* La navigation prend le registre des références : capitales, très espacées. */
.menu a, .langue {
  font: 600 12px/1.2 var(--f-texte); letter-spacing: .16em; text-transform: uppercase;
}
.menu a { padding: 10px 14px; }
.menu a::after { bottom: 4px; }
.entete__appel {
  font: 600 12px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 22px;
}

/* ---------- LE SCEAU ----------
   Une référence sur trois a un sceau gravé, une autre une bête au trait. Ici,
   la marque dessinée de la ferme au centre d'un anneau de texte.
   ⚠️ Le <textPath> est permis ICI parce que la page charge ses polices. Dans un
   FICHIER de logo livré, le texte se vectorise, sinon il tombe sur Times. */
.sceau { display: grid; place-items: center; width: clamp(130px, 13vw, 186px); aspect-ratio: 1; position: relative; }
.sceau svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sceau circle { fill: none; stroke: currentColor; stroke-width: .6; opacity: .8; }
.sceau text {
  fill: currentColor; font-family: var(--f-texte); font-size: 12px;
  font-weight: 600; letter-spacing: .95px; text-transform: uppercase;
}
.sceau__marque { width: 46%; height: auto; position: relative; z-index: 2; filter: brightness(0) invert(1); }
.sceau__lieu {
  position: absolute; z-index: 2; bottom: 17%; left: 0; right: 0; text-align: center;
  font: 600 12px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase;
  color: currentColor; opacity: .85;
}
@media (prefers-reduced-motion: no-preference) {
  .sceau svg { animation: sceau-tourne 44s linear infinite; }
  @keyframes sceau-tourne { to { transform: rotate(360deg); } }
}

/* ---------- 1. LE HÉROS EN AFFICHE ----------
   Photo plein cadre sur la hauteur de l'écran. Le nom se scinde et file aux
   deux coins bas, en graisse légère et capitales espacées. Le sceau au centre
   haut. Une invitation à descendre, soulignée, au centre bas. Aucune boîte. */
.hero {
  /* ⚠️ L en-tete est sticky, donc il occupe sa hauteur dans le flux : sans cette
     remontee, une bande creme restait au-dessus de la photo. */
  margin-top: calc(-1 * var(--entete-h));
  height: 100svh; min-height: 640px; display: grid; position: relative; overflow: clip;
}
.hero__media { position: absolute; inset: 0; height: auto; z-index: 0; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(16, 18, 14, .30);
}
.hero__media img { height: 100%; object-position: 50% 56%; }

.hero__contenu {
  position: relative; z-index: 2; display: grid; align-content: space-between;
  /* ⚠️ Le bas doit degager la carte pratique, qui remonte de 5vw sur la photo :
     sans cette marge, elle rognait la seconde ligne du nom. */
  padding-block: clamp(92px, 11vh, 146px) clamp(104px, 13vh, 168px);
  color: #FFFFFF;
}
.hero__sceau { justify-self: center; color: #FFFFFF; }
/* Le nom se scinde et file aux deux coins bas, l'invitation à descendre au
   milieu. Le h1 passe en display:contents pour que ses deux moitiés deviennent
   des cases de la grille : son nom accessible reste « Les Biquettes de
   l'Archevêque », et les deux surtitres restent en dehors de lui. */
.hero__affiche {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  column-gap: clamp(20px, 4vw, 64px); row-gap: 10px; width: 100%;
}
.hero__sur {
  font: 600 12px/1.2 var(--f-texte); letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .84); margin: 0; align-self: end;
}
.hero__sur--g { grid-column: 1; grid-row: 1; }
.hero__sur--d { grid-column: 2; grid-row: 1; text-align: right; }
.hero__titre { margin: 0; display: contents; }
.hero__grand {
  display: block; margin: 0; color: #FFFFFF; grid-row: 2;
  font: var(--affiche); letter-spacing: .035em; text-transform: uppercase;
  --affiche-taille: clamp(27px, 4.7vw, 74px);
}
.hero__grand--g { grid-column: 1; }
.hero__grand--d { grid-column: 2; text-align: right; }

/* Chaque ligne monte derrière un masque : le geste d'ouverture du top. */
.hero__grand .mot { display: block; overflow: hidden; }
.hero__grand .mot > span { display: block; will-change: transform; }

.hero__chapo, .hero .ardoise, .hero__actions, .hero__descendre { display: none; }

/* ---------- 3. LA PROFONDEUR PAR CHEVAUCHEMENT ----------
   La carte pratique remonte sur la photo : l'information la plus demandée passe
   devant l'image. ⚠️ Seulement au-dessus de 900 px ; en pile elle recouvrait un
   bouton du héros, défaut déjà corrigé le 20/10 sur la v1. */
.carte-pratique {
  position: relative; z-index: 4; background: var(--brun-noir); color: #EFEDE7;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.carte-pratique > * { padding: clamp(26px, 2.6vw, 42px); }
.carte-pratique > * + * { border-left: 1px solid rgba(239, 237, 231, .14); }
.carte-pratique dt {
  font: 600 12px/1.2 var(--f-texte); letter-spacing: .2em; text-transform: uppercase;
  color: var(--olive-clair); margin-bottom: 14px;
}
.carte-pratique dd { margin: 0; font: 400 16px/1.55 var(--f-texte); color: #C7C6BC; }
.carte-pratique dd strong {
  font: 400 clamp(19px, 1.6vw, 25px)/1.2 var(--f-titre); color: #FFFFFF;
  display: block; margin-bottom: 7px; letter-spacing: .005em;
}
.carte-pratique a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 901px) { .carte-pratique { margin-top: clamp(-5.5vw, -5vw, -58px); } }
@media (max-width: 900px) {
  .carte-pratique { grid-template-columns: 1fr; margin-top: 0; }
  .carte-pratique > * + * { border-left: 0; border-top: 1px solid rgba(239, 237, 231, .14); }
}

/* ---------- 4. L'ARCHE ----------
   Deux références sur trois cadrent au moins une photo dans une forme. L'arche
   dit le clocher du village, qui est déjà dans la marque de la ferme. */
.arche { border-radius: 50vw 50vw var(--rayon) var(--rayon); overflow: hidden; }
.arche img { width: 100%; height: 100%; object-fit: cover; }
.scene__media.arche { margin-block: var(--air-s); }
@media (min-width: 901px) {
  .scene--media-droite .scene__media.arche { margin-right: clamp(24px, 4vw, 72px); }
  .scene--media-gauche .scene__media.arche { margin-left: clamp(24px, 4vw, 72px); }
}

/* ---------- Les titres de section, centrés et espacés (code nakahora) ------- */
.titre-centre { text-align: center; }
.titre-centre .sur {
  display: block; margin-bottom: 20px;
  font: 600 12px/1.2 var(--f-texte); letter-spacing: .26em; text-transform: uppercase;
  color: var(--olive);
}
.titre-centre h2 {
  font: 400 clamp(26px, 3.4vw, 50px)/1.12 var(--f-titre);
  letter-spacing: .04em; text-transform: uppercase; margin: 0;
}
.titre-centre p {
  max-width: 34em; margin: clamp(20px, 2.4vw, 32px) auto 0;
  color: var(--cendre); font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.6;
}

/* ---------- 2. LE MOMENT ÉPINGLÉ ----------
   ⚠️ RETIRÉ LE 28/10/2026 avec le rail de la gamme, que le résumé de Laura a
   remplacé sur l'accueil. Le dispositif fort de la page est désormais son
   portrait, et la bande de cartes qui glisse au doigt vit sur la page des
   chèvres (la journée) et sur celle des fromages (la fabrication). */

@media (max-width: 999px) {

}

/* ---------- LA BANDE DE MÉDIA : le rythme vient d'elle ----------
   Pleine largeur, pleine hauteur, une phrase posée dessus, en lettre légère. */
.bande { min-height: clamp(440px, 82svh, 800px); display: grid; align-items: center; }
.bande__fond { position: absolute; inset: 0; }
.bande__fond img { width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ LE VOILE EST PASSÉ DE .42 À .55 LE 03/11/2026, avec les quatre photos de
   bande. Les précédentes étaient sombres et d'automne ; celles de Laura sont
   prises en plein soleil, ciel bleu et herbe verte. Mesure de
   outils/contraste-bandes.cjs au dixième centile clair derrière le texte :
   3,18 sur « les chèvres sortent… », pour un seuil AA de 4,5. Le voile ne se
   règle pas à l'œil, il se mesure : une photo claire posée ici demande qu'on
   repasse ce contrôle. */
.bande::after { content: ""; position: absolute; inset: 0; background: rgba(16, 18, 14, .55); }
.bande__texte { position: relative; z-index: 2; text-align: center; color: #FFFFFF; }
.bande__texte blockquote, .bande__texte p {
  margin: 0 auto; max-width: 17em;
  font: 400 clamp(24px, 3.2vw, 50px)/1.22 var(--f-titre); letter-spacing: .01em;
}
.bande__texte .exergue-source {
  margin-top: 26px; max-width: none;
  font: 600 12px/1.4 var(--f-texte); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* ---------- La grille cassée ---------- */
@media (min-width: 901px) {
  .descend { margin-top: 6vw; }
}

/* ---------- Le mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .apparait { transform: translateY(22px); transition-duration: 1s; transition-timing-function: var(--sortie); }
  .js .hero__media img { animation: none; }
}

/* ---------- Les transitions de page natives ---------- */
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: sortie-page .3s ease both; }
  ::view-transition-new(root) { animation: entree-page .5s var(--sortie) both; }
  @keyframes sortie-page { to { opacity: 0; } }
  @keyframes entree-page { from { opacity: 0; } }
}

/* ---------- Reprises sur le socle ---------- */
.bouton { border-radius: var(--rayon); }
.champ input, .champ textarea { border-radius: var(--rayon); }
.carte { background: var(--creme-fonce); }
.carte--foret { background: var(--brun-noir); color: #EFEDE7; }
.pied.fond-vert { background: var(--brun-noir); color: #EFEDE7; }
.pied.fond-vert a, .pied.fond-vert h2 { color: #EFEDE7; }
.pied.fond-vert p, .pied.fond-vert li { color: #9F9E94; }
.pied__labels span, .pied__reseaux a { border-color: rgba(239, 237, 231, .26); color: #9F9E94; }
.pied__nom { font-weight: 400; letter-spacing: .03em; text-transform: uppercase; font-size: clamp(19px, 1.6vw, 24px); }
.titre-fort, h2 { font-weight: 400; letter-spacing: .02em; }
.titre-fort { font-size: clamp(32px, 4.6vw, 70px); line-height: 1.04; }
h2 { font-size: clamp(27px, 3.2vw, 46px); line-height: 1.1; }
.familles li { border-top-color: rgba(239, 237, 231, .18); }
.etal-grille img, .scene__media img { border-radius: var(--rayon); }
.avis__note { font-weight: 400; }

@media (max-width: 900px) {
  .hero { height: 100svh; min-height: 560px; }
  .hero__contenu { padding-block: clamp(84px, 13vh, 120px) clamp(28px, 5vh, 44px); }
  .hero__affiche { grid-template-columns: 1fr; gap: 20px; }
  .hero__bord--fin { justify-items: start; text-align: left; }
  .hero__grand { --affiche-taille: clamp(32px, 10.5vw, 62px); }
  .hero__descendre { display: none; }
  .arche { border-radius: 40vw 40vw var(--rayon) var(--rayon); }
}

/* ⚠️ Le pied est passé au brun presque noir : la cendre du socle y tombait à
   2,58:1 sur « de l'Archevêque ». Mesuré, pas estimé. */
.pied__nom span { color: #A8A79C; }

/* ⚠️ Plancher de 12 px tenu sur toutes les capitales espacées. Le balayage des
   32 formats en comptait 144 sous le seuil après la première passe : le code
   des références tient au suivi et à la graisse, pas à la petitesse. */
.sceau text { font-size: 5.4px; } /* dessin vectoriel, pas du texte courant */

/* ═══════════════════════════════════════════════════════════════════════════
   LES QUATRE AUTRES PAGES
   Chacune prend la direction, et chacune reçoit UN geste qui lui appartient.
   Le même dispositif répété de page en page redeviendrait un gabarit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- La bannière, en affiche courte ----------
   Même grammaire que le héros de l'accueil, sur deux tiers de l'écran : le
   titre en lettre légère et capitales espacées, posé en bas de la photo. */
.banniere { height: 68svh; min-height: 440px; display: grid; }
.banniere__media { position: absolute; inset: 0; }
.banniere__media img { width: 100%; height: 100%; object-fit: cover; }
.banniere__contenu {
  align-self: end; padding-block: 0 clamp(40px, 6vh, 76px);
  display: grid; justify-items: start; gap: 14px;
}
.banniere h1 {
  margin: 0; font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 76px); line-height: .98; max-width: 16em;
}
.banniere p {
  max-width: 34em; font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
.ariane ol { font: 600 12px/1.2 var(--f-texte); letter-spacing: .18em; text-transform: uppercase; }
.ariane .ico { width: 12px; height: 12px; }
.banniere--courte { height: 54svh; min-height: 380px; }

/* ---------- LA FERME : le texte-masque ----------
   Un mot géant qui laisse voir la garrigue à travers ses lettres. Le choix de
   la photo fait tout : il faut de la matière et de la lumière, donc le troupeau
   sous le village. Repli en couleur pleine si le découpage n'est pas connu. */
.masque { text-align: center; }
/* ⚠️ LA MATIERE SE CHOISIT A LA MESURE, PAS AU GOUT. Sur les dix-sept photos
   de la ferme, celle-ci a le plus fort ecart-type (82) et zero pixel brule sur
   la bande qui sert de fond au texte : un pixel brule donne une lettre blanche,
   donc invisible sur le creme. Le troupeau entier aligne sous le village, ce
   que le commentaire de ce dispositif demandait depuis le debut.
   ⚠️ C'est la version ASSOMBRIE qui sert, pas la photo d'origine : sur elle,
   le dixieme le plus clair des lettres tombait a 1,59 de contraste sur le
   creme, et les reflets d'herbe percaient le mot. Voir photos-laura.cjs.
   L'URL est relative au FICHIER CSS, servi a la racine : elle vaut donc pour
   les pages francaises comme pour /en/. */
.masque { --matiere: url('images/matiere-troupeau-1024w.jpg'); }
.masque__mot {
  margin: 0; font-family: var(--f-titre); font-weight: 400;
  font-size: clamp(48px, 13.4vw, 188px); line-height: .86; letter-spacing: .01em;
  text-transform: uppercase; color: var(--brun-noir);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .masque__mot {
    background-image: var(--matiere); background-size: 150% auto; background-position: center 72%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .masque__mot { animation: matiere-respire 26s ease-in-out infinite alternate; }
    @keyframes matiere-respire { from { background-size: 150% auto; } to { background-size: 168% auto; } }
  }
}
.masque__dit {
  max-width: 30em; margin: clamp(26px, 3vw, 44px) auto 0;
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--cendre);
}

/* ---------- NOS FROMAGES : l'étal en grille cassée ----------
   Une colonne sur deux descend, et les fiches cessent de se lire comme une
   rangée de cases. Code relevé chez UPA DI, qui décale ses blocs. */
@media (min-width: 1001px) {
  .etal-grille > li:nth-child(3n+2) { margin-top: 5vw; }
  .etal-grille > li:nth-child(3n) { margin-top: 2.5vw; }
}

/* ---------- LE MAGASIN : la courbe se trace au défilement ----------
   Le geste de données de la page. L'aplat sous le tracé monte juste après. */
@media (prefers-reduced-motion: no-preference) {
  .js .courbe__trait { stroke-dasharray: var(--longueur, 2600); stroke-dashoffset: var(--longueur, 2600); }
  .js .courbe.vu .courbe__trait { transition: stroke-dashoffset 1.4s cubic-bezier(.33, 1, .68, 1); stroke-dashoffset: 0; }
  .js .courbe svg > path:first-of-type { opacity: 0; transition: opacity .9s ease .55s; }
  .js .courbe.vu svg > path:first-of-type { opacity: 1; }
}

/* ---------- CONTACT : la bande qui ferme la page ---------- */
.contact__bande { min-height: clamp(320px, 46svh, 520px); }

@media (max-width: 900px) {
  .banniere { height: 58svh; min-height: 360px; }
  .banniere--courte { height: 48svh; min-height: 320px; }
  .masque__mot { font-size: clamp(44px, 19vw, 150px); }
}

/* ---------- Le sur-titre des scènes ----------
   La petite capitale suivie qui annonce la scène, comme sur l'accueil. C'est
   elle qui donne le même rythme d'une page à l'autre. */
.sur-titre {
  display: block; margin-bottom: 18px;
  font: 600 12px/1.2 var(--f-texte); letter-spacing: .26em; text-transform: uppercase;
  color: var(--olive);
}
.fond-foret .sur-titre, .fond-encre .sur-titre { color: var(--olive-clair); }
.fond-foret .titre-centre h2, .fond-encre .titre-centre h2 { color: #FFFFFF; }
.fond-foret .titre-centre p, .fond-encre .titre-centre p { color: #A9A89D; }

/* La mention commune, dite une fois au lieu de douze. */
.mention-commune {
  max-width: 48em; margin: clamp(26px, 3vw, 40px) auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.6; color: var(--cendre);
  padding-bottom: clamp(26px, 3vw, 40px); border-bottom: 1px solid var(--filet);
}

/* Les vides se resserrent : l'air est une respiration, pas un trou. */
.section--l { padding-block: var(--air-m); }

/* ═══════════════════════════════════════════════════════════════════════════
   LA COHÉRENCE, relevée sur l'aperçu Crema (26/10/2026)
   Célestin : « il est visuellement très beau, tout concorde, corrèle ».
   Relevé au Playwright : ce qui fait concorder, ce n'est pas un effet, c'est la
   RÉPÉTITION de trois dispositifs, à l'identique, d'une section à l'autre.
     1. un surtitre à pastille, partout, même forme et même couleur ;
     2. une entête de section à deux colonnes, titre à gauche, chapô à droite,
        alignés sur leur ligne de base, dans toutes les sections ;
     3. une légende de photo sous l'image, dans la même forme que le surtitre.
   La v2 mélangeait quatre registres de titre et trois rythmes de colonnes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Le surtitre à pastille, dispositif répété du site. */
.sur-titre, .titre-centre .sur {
  display: flex; align-items: center; gap: .7em;
  margin: 0 0 20px; text-transform: none; letter-spacing: .01em;
  font: 600 14px/1.3 var(--f-texte); color: var(--cendre);
}
.sur-titre::before, .titre-centre .sur::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--olive); flex: none;
}
.fond-foret .sur-titre, .fond-encre .sur-titre,
.fond-foret .titre-centre .sur, .fond-encre .titre-centre .sur,

.fond-foret .sur-titre::before, .fond-encre .sur-titre::before,
.fond-foret .titre-centre .sur::before, .fond-encre .titre-centre .sur::before,

/* 2. L'entête de section à deux colonnes, la même dans toute la page. */
.entete-section { display: grid; gap: var(--air-s); margin-bottom: clamp(34px, 4vw, 64px); }
@media (min-width: 900px) {
  .entete-section { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px); align-items: end; }
  .entete-section > :last-child { padding-bottom: .4em; }
}
.entete-section h2 { margin: 0; }
.entete-section p { margin: 0; color: var(--cendre); font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.6; }
.fond-foret .entete-section p, .fond-encre .entete-section p { color: #A9A89D; }

/* Les titres centrés rejoignent le rythme de gauche : un seul alignement par
   page, sinon chaque section paraît venir d'un autre site. */
.titre-centre { text-align: left; }
.titre-centre h2 { text-transform: none; letter-spacing: .005em; }
.titre-centre p { margin-inline: 0; max-width: 46em; }
.mention-commune { text-align: left; margin-inline: 0; max-width: 62em; }

/* 3. La légende sous la photo, dans la forme du surtitre. */
.scene__media figcaption, .etal-grille figcaption {
  position: static; display: flex; align-items: center; gap: .7em;
  margin-top: 16px; padding: 0; background: none; color: var(--cendre);
  font: 600 13px/1.4 var(--f-texte); letter-spacing: .01em; text-transform: none;
}
.scene__media figcaption::before, .etal-grille figcaption::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--olive); flex: none;
}
.scene__media.arche figcaption { padding-inline: clamp(24px, 4vw, 72px); }

/* Le bouton en pilule, comme la référence : il adoucit une page très droite. */
.bouton { border-radius: var(--rayon-pilule); padding: 15px 28px; }
.entete__appel { border-radius: var(--rayon-pilule); }

/* Les entêtes déjà écrites (surtitre, titre, chapô) prennent le rythme à deux
   colonnes sans toucher au balisage : placement explicite dans la grille. */
@media (min-width: 900px) {
  .titre-centre {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(32px, 4vw, 72px); align-items: end;
  }
  .titre-centre .sur { grid-column: 1; grid-row: 1; }
  .titre-centre h2 { grid-column: 1; grid-row: 2; }
  .titre-centre p { grid-column: 2; grid-row: 2; margin: 0 0 .5em; }
}

/* ⚠️ Deux sections sont passées au brun presque noir (la journée à la chèvrerie,
   la saison du lait). Tout ce qui s'écrit en cendre y tombait à 2,58:1, mesuré
   sur dix-sept textes. La variable se redéfinit DANS la section sombre : chaque
   règle qui lit var(--cendre) suit, sans avoir à les énumérer une par une. */
.fond-foret, .fond-encre {
  --cendre: #A9A89D;
  --filet: rgba(239, 237, 231, .18);
}
.fond-foret h2, .fond-foret h3, .fond-foret h4,
.fond-encre h2, .fond-encre h3, .fond-encre h4 { color: #FFFFFF; }
.fond-foret .ardoise, .fond-encre .ardoise { background: rgba(239, 237, 231, .12); color: #EFEDE7; }
/* ⛔ LES INTITULÉS DES JALONS ÉTAIENT INVISIBLES, mesuré à 1,03:1 le
   30/10/2026, et sur TOUTES les largeurs, pas seulement au téléphone.
   `.courbe__jalons strong` porte `color: var(--encre)` : la couleur était
   juste tant que la courbe vivait sur la page du magasin, en clair. Le
   28/10 elle a déménagé sur « L'année d'une chèvre », en fond forêt, et
   « Fin février », « Mars » et « Fin novembre » s'écrivaient en encre sur
   brun-noir. ⚠️ `--encre` est une couleur FIXE, elle ne suit pas la
   redéfinition de `--cendre` juste au-dessus : un texte qui lit une
   variable non redéfinie traverse les fonds sans que rien ne le signale, et
   `contraste-texte.cjs` ne regardait pas cet élément. */
.fond-foret .courbe__jalons strong,
.fond-encre .courbe__jalons strong { color: #FFFFFF; }

/* Deux restes, mesurés : la carte sombre du contact n'héritait pas de la
   redéfinition, et la pastille du mois en cours portait du clair sur du clair. */
.carte--foret { --cendre: #A9A89D; --filet: rgba(239, 237, 231, .18); }
.carte--foret .sur-titre { color: #A9A89D; }
.carte--foret .sur-titre::before { background: var(--olive-clair); }
.courbe__mois[aria-current], .courbe__mois--courant, .courbe__tag {
  color: var(--brun-noir);
}

/* Le surtitre prend toute la largeur de sa case : dans une grille, il se
   retrouvait en colonne étroite à côté du titre et se cassait en deux lignes. */
.sur-titre, .titre-centre .sur { width: 100%; grid-column: 1 / -1; }
@media (min-width: 900px) {
  .titre-centre .sur { grid-column: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE HÉROS, QUATRIÈME RÉGLAGE (26/10/2026)
   Célestin : le sceau ne tourne plus et reste en haut du rond ; le nom et les
   surtitres descendent sous la photo ; les informations pratiques suivent le
   nom. Plus rien n'empiète sur l'image, qui ne porte que le sceau.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le sceau est fixe. Un sceau gravé ne tourne pas. */
.sceau svg { animation: none; }

/* Le héros ne porte que la photo et le sceau, posé en haut et centré. */
.hero__contenu { align-content: start; justify-items: center; padding-block: clamp(44px, 7vh, 96px) 0; }
.hero__media::after { background: rgba(16, 18, 14, .18); }

/* Le nom, sous la photo, sur le crème : il reprend la couleur du texte. */
.affiche { padding-block: clamp(44px, 6vw, 92px) clamp(32px, 4vw, 56px); }
.affiche .hero__grand { color: var(--encre); }
.affiche .hero__sur { color: var(--cendre); }
.affiche .hero__affiche { align-items: end; }

/* La carte pratique ne remonte plus sur la photo : elle suit le nom. */
@media (min-width: 901px) { .carte-pratique { margin-top: 0; } }
.carte-pratique { margin-bottom: clamp(16px, 2vw, 28px); }

/* Le sceau respire sous la barre : il la frôlait à 1440. */
.hero__contenu { padding-block: clamp(64px, 11vh, 140px) 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   RETOUCHES DU 26/10/2026 AU SOIR
   ═══════════════════════════════════════════════════════════════════════════ */

/* 2. Le nom se lit dans l'ordre : les deux moitiés s'empilent à gauche au lieu
      de se répondre d'un bord à l'autre, où l'œil devait sauter le vide. */
.affiche .hero__affiche { grid-template-columns: 1fr auto; row-gap: 18px; }
.affiche .hero__grand { grid-column: 1; grid-row: auto; text-align: left; }
.affiche .hero__sur--g { grid-column: 1; grid-row: 1; }
.affiche .hero__sur--d { grid-column: 2; grid-row: 1; align-self: center; }
.affiche .hero__titre { display: contents; }

/* 3. Le début de la page cessait d'être une suite de blancs : le nom et les
      informations pratiques forment une bande de sable sous la photo. */
.affiche, .bande-infos { background: var(--creme-fonce); }
.affiche { padding-bottom: clamp(26px, 3vw, 40px); }
.bande-infos { padding-bottom: clamp(44px, 6vw, 92px); }
.carte-pratique { margin-bottom: 0; }

/* La bande de sable court d'un bord à l'autre : la carte pratique vit dans la
   section du nom, pas dans un conteneur posé dessous qui laissait deux bandes
   crème sur les côtés. */
.bande-infos { background: none; padding-bottom: 0; margin-top: clamp(30px, 4vw, 56px); }
.affiche { padding-bottom: clamp(44px, 6vw, 88px); }

/* ---------- LA LISTE DE SERVICE ----------
   Le code du vrai métier, relevé chez Crema : un titre à gauche, les lignes à
   droite séparées par des filets, et le moment à l'extrémité droite en accent.
   Remplace les trois colonnes numérotées 01, 02, 03, qui sont le motif le plus
   générique du web et se repèrent au premier coup d'œil.
   ⚠️ Aucun compteur : c'est le numéro en gros qui trahit le gabarit. */
.service { display: grid; gap: clamp(36px, 4vw, 64px); }
@media (min-width: 900px) {
  .service { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(44px, 5vw, 96px); align-items: start; }
}
.service__dire h2 { margin: 0 0 20px; }
.service__dire p { margin: 0; color: var(--cendre); font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.65; }
.service__liste { list-style: none; margin: 0; padding: 0; }
.service__liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 16px 28px; padding: clamp(22px, 2.4vw, 32px) 0; border-top: 1px solid var(--filet);
}
.service__liste li:last-child { border-bottom: 1px solid var(--filet); }
.service__liste h3 {
  margin: 0 0 7px; font-weight: 400; letter-spacing: .01em;
  font-size: clamp(20px, 1.7vw, 26px);
}
.service__liste p { margin: 0; color: var(--cendre); font-size: 16px; line-height: 1.55; }
.service__quand {
  font: 600 13px/1.4 var(--f-texte); letter-spacing: .12em; text-transform: uppercase;
  color: var(--olive-clair); white-space: nowrap;
}
@media (max-width: 560px) {
  .service__liste li { grid-template-columns: 1fr; }
  .service__quand { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE VISUELLE : LES MODULES QUI RESTAIENT ORDINAIRES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Les champs, en filet plutôt qu'en boîte ----------
   Une boîte grise par champ, c'est le formulaire par défaut du web. Un filet
   sous le champ, qui s'épaissit et prend l'accent à la saisie, est le code des
   sites soignés, et il allège énormément une page de contact. */
.champ input, .champ textarea, .champ select,
.formulaire input, .formulaire textarea, .formulaire select {
  background: none; border: 0; border-bottom: 1px solid var(--filet);
  border-radius: 0; padding: 14px 2px; width: 100%;
  font-size: 17px; color: var(--encre); transition: border-color .3s var(--sortie);
}
.champ input:focus, .champ textarea:focus, .champ select:focus,
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus {
  outline: none; border-bottom-color: var(--olive); border-bottom-width: 2px; padding-bottom: 13px;
}
.champ label, .formulaire label {
  font: 600 12px/1.3 var(--f-texte); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cendre); margin-bottom: 2px; display: block;
}
.champ textarea, .formulaire textarea { min-height: 7em; resize: vertical; }
.consentement { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--cendre); }
/* ⚠️ LA CASE FAIT 24 px, ET C'EST UNE MESURE, PAS UN GOÛT. Relevée à 18 × 18
   au balayage du 27/10/2026, seule cible marquée « grave » des 32 formats : la
   WCAG 2.2 (2.5.8) demande 24 px au minimum pour une cible tactile, et c'est
   la case du consentement, donc celle qu'il faut pouvoir cocher du pouce.
   `flex: none` l'empêche de se laisser écraser par la phrase à côté. */
.consentement input {
  width: 24px; height: 24px; flex: none;
  border-bottom: 0; padding: 0; margin-top: 1px; accent-color: var(--olive);
}
.consentement span { text-transform: none; letter-spacing: 0; font: inherit; }

/* ---------- Le pied, avec une hiérarchie ----------
   Quatre colonnes de même poids ne se lisent pas. La marque tient la première,
   large, et les trois autres deviennent des listes de même rang. */
.pied__grille { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 72px); }
.pied__nom { font-size: clamp(22px, 2vw, 30px); line-height: 1.08; letter-spacing: .02em; }
.pied__nom span { font: 400 15px/1.3 var(--f-texte); letter-spacing: .06em; text-transform: uppercase; color: #A8A79C; margin-top: 6px; }
.pied h2 {
  font: 600 12px/1.3 var(--f-texte); letter-spacing: .18em; text-transform: uppercase;
  color: #A8A79C; margin-bottom: 18px;
}
.pied a { text-decoration: none; transition: color .25s ease; }
.pied a:hover { color: #FFFFFF; }
.pied__labels span { border-radius: var(--rayon-pilule); font-size: 12.5px; }
@media (max-width: 760px) { .pied__grille { grid-template-columns: 1fr; } }

/* ---------- La page de contact ----------
   La carte des coordonnées finissait haut et laissait un demi-écran vide sous
   le formulaire. Les deux colonnes se tiennent désormais, et la carte reste en
   vue pendant qu'on remplit. */
@media (min-width: 900px) {
  .contact__coord { position: sticky; top: calc(var(--entete-h) + 32px); }
}
.tel-geant { font-family: var(--f-titre); font-weight: 400; letter-spacing: .01em; }

/* ⚠️ Les intitulés de champ en capitales suivies sont passés en cendre : sur le
   rappel de réouverture, qui est sur fond vert, ils tombaient à 4,07:1 (et à
   1,49 sur la version anglaise). Sur fond sombre, ils s'éclaircissent. */
.fond-foret .champ label, .fond-encre .champ label, .carte--foret .champ label,
.rappel label, .fond-foret .formulaire label, .fond-encre .formulaire label,
.fond-foret .consentement, .fond-encre .consentement, .rappel .consentement { color: #C9CCC2; }
.fond-foret .champ input, .fond-encre .champ input, .rappel input,
.fond-foret .champ textarea, .fond-encre .champ textarea {
  color: #EFEDE7; border-bottom-color: rgba(239, 237, 231, .3);
}
.fond-foret .champ input:focus, .fond-encre .champ input:focus, .rappel input:focus {
  border-bottom-color: var(--olive-clair);
}

/* ⚠️ Deux défauts de la passe sur les champs, vus à la capture.
   1. La case de consentement est une PHRASE, pas un intitulé : les capitales
      suivies la rendaient illisible. Elle sort de la règle des intitulés.
   2. La carte des coordonnées ne collait pas : étirée par la grille, elle
      n'avait aucune place pour glisser. align-self: start lui en donne. */
.consentement, .formulaire .consentement, .champ .consentement {
  text-transform: none; letter-spacing: 0; font: 400 15px/1.55 var(--f-texte);
  color: var(--cendre); margin-bottom: 0;
}
/* ⚠️ CETTE RÈGLE NE REDIT PLUS LA TAILLE. Elle portait 18 × 18 et arrivait
   APRÈS celle qui en demande 24 : quatre règles visaient ce même sélecteur dans
   la feuille servie, et la dernière gagnait en silence. La taille se décide à
   un seul endroit, plus haut ; ici ne reste que la couleur. */
.consentement input { accent-color: var(--olive); }
@media (min-width: 900px) { .contact__coord { align-self: start; } }

/* ---------- La frise de l'histoire ----------
   Un trait vertical avec des pastilles creuses, c'est l'extension « timeline »
   des thèmes WordPress. Ici : la date en petites capitales suivies à gauche, un
   filet par étape, et rien d'autre. La lecture est la même, le registre non. */
.frise { position: relative; margin: 0; padding: 0; list-style: none; }
.frise::before { display: none; }
.frise li {
  display: grid; gap: 6px 32px; padding: clamp(22px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--filet); position: relative;
}
.frise li::before, .frise li::after { display: none; }
.frise li:last-child { border-bottom: 1px solid var(--filet); }
@media (min-width: 760px) {
  .frise li { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); align-items: baseline; }
}
.frise__date {
  font: 600 12px/1.4 var(--f-texte); letter-spacing: .16em; text-transform: uppercase;
  color: var(--olive); text-align: left; position: static; width: auto;
}
.frise h3 { margin: 0 0 7px; font-weight: 400; letter-spacing: .01em; font-size: clamp(19px, 1.5vw, 24px); }
.frise p { margin: 0; color: var(--cendre); font-size: 16px; line-height: 1.55; }

/* ---------- La liste de l'épicerie ----------
   Dix coches vertes à la file font catalogue de services informatiques. Deux
   colonnes de lignes séparées par un filet font une liste de maison. */
.epicerie__liste { display: grid; gap: 0; margin: clamp(22px, 2.4vw, 32px) 0 0; }
@media (min-width: 620px) { .epicerie__liste { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); } }
.epicerie__liste li {
  display: block; padding: 13px 0; border-top: 1px solid var(--filet);
  font-size: 16px; color: var(--encre);
}
.epicerie__liste li .ico { display: none; }

/* ---------- Le rayon, pleine largeur ----------
   03/11/2026, retour de Laura : « j'aurais aimé faire une section plus grande
   pour mettre le nom des producteurs ». Treize produits, chacun sur deux
   lignes, ne tenaient pas dans la demi-colonne d'une scène.
   ⚠️ EN COLONNES DE TEXTE, PAS EN GRILLE. Treize lignes sur une grille de
   trois colonnes laissent deux cases vides à la dernière rangée. Le flux en
   colonnes les répartit tout seul, quel que soit le nombre de produits qu'elle
   ajoute ensuite depuis le Studio.
   ⚠️ UN PRODUCTEUR VIDE NE LAISSE PAS DE LIGNE BLANCHE : `span:empty` le
   retire, le temps que Laura remplisse les noms. */
.epicerie__rayons { margin-top: clamp(36px, 4vw, 64px); }
.epicerie__rayons .titre-menu { margin: 0 0 6px; }
.epicerie__rayons .sous-titre-menu { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: clamp(15px, 1.4vw, 18px); color: var(--encre-douce, #7a7265); font-weight: 400; }
.epicerie__rayons .epicerie__liste { display: block; columns: 3; column-gap: clamp(28px, 3.4vw, 64px); margin: 0; }
@media (max-width: 900px) { .epicerie__rayons .epicerie__liste { columns: 2; } }
@media (max-width: 560px) { .epicerie__rayons .epicerie__liste { columns: 1; } }
.epicerie__rayons .epicerie__liste li { display: block; break-inside: avoid; padding: 13px 0; border-top: 1px solid var(--filet); }
.epicerie__rayons .epicerie__liste strong { display: block; font-weight: 500; font-size: 16px; color: var(--encre); }
.epicerie__rayons .epicerie__liste span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--cendre); }
.epicerie__rayons .epicerie__liste span:empty { display: none; }
.epicerie__rayons .epicerie__liste li:nth-child(5),
.epicerie__rayons .epicerie__liste li:nth-child(10) { break-after: column; }
@media (max-width: 900px) {
  .epicerie__rayons .epicerie__liste li:nth-child(5),
  .epicerie__rayons .epicerie__liste li:nth-child(10) { break-after: auto; }
}

.fournisseurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 18px 0 30px; list-style: none; padding: 0; }
.fournisseurs li { padding: 18px 12px; text-align: center; border: 1px solid var(--filet); font: 400 15px/1.4 var(--f-titre); color: var(--cendre); }
@media (max-width: 900px) { .fournisseurs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .fournisseurs { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Les questions ----------
   Elles gardent leurs deux colonnes, mais la question prend le poids et la
   réponse s'efface : on lit la liste des questions d'abord. */
.faq h3 { font-weight: 400; letter-spacing: .01em; }
.faq p { color: var(--cendre); }

/* Les pastilles de la frise vivaient sur .frise__date::after, pas sur la ligne :
   elles flottaient encore au bord droit après le changement de gabarit. */
.frise__date::after, .frise li:last-child .frise__date::after { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   DEUXIÈME PASSE VISUELLE : L'ACCUEIL ET LE MAGASIN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Le bloc pratique du magasin ----------
   Six cases à icône sur deux colonnes, c'est la grille « fonctionnalités » des
   pages de logiciel. Elle devient une liste d'équipements : un filet par ligne,
   l'icône réduite et effacée à gauche, le fait et sa précision sur une ligne.
   C'est le code des fiches d'hôtel et de gîte, et il se lit plus vite. */
.pratique { display: grid; gap: 0; margin-top: clamp(26px, 3vw, 40px); }
@media (min-width: 760px) { .pratique { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 3.4vw, 56px); } }
.pratique > * {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start;
  gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--filet);
}
.pratique .ico { width: 17px; height: 17px; color: var(--cendre); margin-top: 3px; grid-row: span 2; }
.pratique strong, .pratique h3 {
  grid-column: 2; margin: 0; font: 600 16px/1.4 var(--f-texte); color: var(--encre);
}
.pratique p, .pratique span:not(.ico) { grid-column: 2; margin: 0; color: var(--cendre); font-size: 15px; line-height: 1.5; }

/* ---------- Le tableau des horaires ----------
   Il avait déjà le bon code, le filet et l'heure à l'extrémité : on l'aligne
   juste sur le reste, intitulés en capitales suivies et jour en lettre claire. */
.horaires { width: 100%; border-collapse: collapse; }
.horaires th, .horaires td { padding: 15px 0; border-top: 1px solid var(--filet); font-weight: 400; }
.horaires th { text-align: left; font-size: 16px; }
.horaires td { text-align: right; color: var(--cendre); font-size: 15.5px; }
.horaires tr:last-child th, .horaires tr:last-child td { border-bottom: 1px solid var(--filet); }

/* ---------- Les avis de l'accueil ----------
   La colonne de gauche flottait seule en haut d'un grand vide : la note, le
   volume et le bouton se tiennent maintenant, et la liste part du même bord. */
.avis .grille { align-items: start; }
.avis__note { font-size: clamp(44px, 5.4vw, 78px); line-height: .9; margin: 0 0 10px; }
.avis__note .ico { width: 22px; height: 22px; }
.avis__volume { margin: 0; font-size: 15.5px; color: var(--cendre); }
.avis__liste { margin: 0; padding: 0; list-style: none; }
.avis__liste li { padding: clamp(22px, 2.4vw, 30px) 0; border-top: 1px solid var(--filet); }
.avis__liste li:last-child { border-bottom: 1px solid var(--filet); }
.avis__liste blockquote {
  margin: 0 0 12px; font-family: var(--f-titre); font-weight: 400;
  font-size: clamp(18px, 1.5vw, 23px); line-height: 1.4; letter-spacing: .005em;
}
.avis__meta { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--cendre); }
.etoiles .ico { width: 13px; height: 13px; color: var(--olive); }

/* ⚠️ Un SVG appelé en <img> n hérite PAS de currentColor : il se rend dans sa
   propre couleur, donc en noir. Le filtre reste le seul moyen de le passer en
   blanc sur la photo du héros. Il n a plus d effet de bord : le tracé est
   monochrome, là où le PNG avait des bruns et des verts. */
.sceau__marque { filter: brightness(0) invert(1); }

/* ═══════════════════════════════════════════════════════════════════════════
   LA COMPOSITION, 26/10/2026 AU SOIR
   Célestin : « il y a pas mal de choses que tu pourrais centrer, aligner, pour
   le rendre beaucoup plus beau. Le titre des Biquettes, le décaler un peu à
   droite pour le centrer, gauche-droite. Pareil en dessous, et le paragraphe,
   tu le mets en dessous, centré. »
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. LE SURTITRE S'ALIGNE SUR SON TITRE.
      ⚠️ Défaut mesuré sur toutes les sections : la pastille de 7 px et son
      espace poussaient le TEXTE du surtitre 17 px plus à droite que le titre
      qu'il surmonte. À l'œil, chaque section paraissait commencer deux fois.
      La pastille sort donc dans la gouttière, comme une puce suspendue, et le
      texte retrouve la colonne. Le débord est borné par la gouttière elle-même
      pour qu'il ne touche jamais le bord de l'écran sur un téléphone. */
.sur-titre::before {
  margin-left: calc(-1 * min(7px + .7em, var(--gouttiere) - 4px));
}

/* 2. LE NOM DE LA FERME, CENTRÉ.
      La ligne d'épaule reste tendue d'un bord à l'autre : c'est elle qui donne
      sa largeur à l'affiche, et le nom se pose au milieu, comme sur une
      étiquette. */
.affiche .hero__affiche { justify-items: center; }
.affiche .hero__grand { grid-column: 1 / -1; text-align: center; }
.affiche .hero__sur--g { justify-self: start; }
.affiche .hero__sur--d { justify-self: end; }
@media (max-width: 900px) {
  /* ⚠️ La grille de l'affiche porte deux classes, la media query du socle
     une seule : sans cette reprise, les deux surtitres restaient cote a cote
     et se cassaient en quatre lignes sur un telephone. */
  .affiche .hero__affiche { grid-template-columns: 1fr; }
  .affiche .hero__sur--g, .affiche .hero__sur--d {
    grid-column: 1; grid-row: auto; justify-self: center; text-align: center;
  }
}

/* 3. LE MOT DE LA FERME, CENTRÉ, SON PARAGRAPHE DESSOUS.
      Il flottait à droite du titre, dans une colonne que rien ne retenait. */
.titre-centre { text-align: center; }
.titre-centre .sur { justify-content: center; }
.titre-centre p { margin-inline: auto; max-width: 38em; }
@media (min-width: 900px) {
  .titre-centre { display: block; }
  .titre-centre h2, .titre-centre p { margin-inline: auto; }
  .titre-centre p { margin-top: clamp(20px, 2.4vw, 32px); }
}

/* ⚠️ Le bloc du nom héritait d'un centrage venu d'une règle plus haute, sur les
   deux langues. L'alignement se pose ici explicitement, et la bande des
   informations retrouve la pleine largeur du conteneur plutôt que d'être
   imbriquée dans un second, qui la rétrécissait. */
.affiche, .affiche .hero__affiche, .affiche .hero__grand, .affiche .hero__sur { text-align: left; }
.affiche .hero__sur--d { text-align: right; }
.affiche .bande-infos { max-width: var(--conteneur); margin-inline: auto; padding-inline: 0; }

/* Le nom se cale au bord de la colonne : une règle plus haute posait
   justify-items: center sur le contenu du héros, et la moitié du nom restait
   centrée dans sa case même une fois le texte aligné à gauche. */
.affiche .hero__affiche { justify-items: start; }
.affiche .hero__grand, .affiche .hero__sur--g { justify-self: start; }
.affiche .hero__sur--d { justify-self: end; }

/* ---------- Le bouton de commande à ras bord ----------
   Il s'arrêtait à la gouttière du conteneur, donc à cent pixels du bord sur un
   grand écran. Collé au bord et sur toute la hauteur de la barre, il devient le
   point d'ancrage de l'en-tête : c'est le code de Cambium, dont le bouton de
   réservation touche le coin. */
.entete__appel {
  align-self: stretch; display: inline-flex; align-items: center;
  border-radius: 0; padding-inline: clamp(20px, 2.4vw, 36px);
  margin-right: calc(-1 * max(var(--gouttiere), (100vw - var(--conteneur)) / 2));
  margin-block: calc(-1 * clamp(8px, 1vw, 14px));
}
.entete__actions { gap: clamp(10px, 1.4vw, 18px); }
/* Sur la page d'accueil, la barre est transparente : le bouton reste le seul
   aplat de l'en-tête, en blanc sur la photo. */
body:has(.hero) .entete:not(.entete--compacte) .entete__appel {
  background: #FFFFFF; color: var(--brun-noir);
}
@media (max-width: 980px) { .entete__appel { margin-right: 0; } }

/* Le bouton ne montait pas jusqu'en haut : son align-self jouait dans la boîte
   des actions, qui se dimensionne sur son contenu. C'est elle qui doit
   s'étirer d'abord. */
.entete__actions { align-self: stretch; }
.entete__appel { margin-block: 0; height: 100%; }

/* ⚠️ La chronique radio est passée sur le brun, et deux blocs y gardaient leur
   propre fond clair avec le texte éclairci de la section : l'avis tombait à
   1,1:1 et sa source à 2,25. Sur fond sombre, ils renoncent à leur aplat et se
   tiennent au filet, comme le reste du site. */
.fond-foret .bulle, .fond-encre .bulle,
.fond-foret .radio, .fond-encre .radio {
  background: none; border: 1px solid rgba(239, 237, 231, .2); border-radius: var(--rayon);
}
.fond-foret .bulle::after, .fond-encre .bulle::after { display: none; }
.fond-foret .bulle blockquote, .fond-encre .bulle blockquote,
.fond-foret .radio strong, .fond-encre .radio strong { color: #FFFFFF; }
.fond-foret .bulle p, .fond-encre .bulle p,
.fond-foret .radio p, .fond-encre .radio p { color: #A9A89D; }
.fond-foret .radio__ico, .fond-encre .radio__ico {
  background: rgba(239, 237, 231, .12); color: #EFEDE7;
}
.fond-foret .etoiles .ico, .fond-encre .etoiles .ico { color: var(--olive-clair); }

/* 3. PLUS DE SURTITRES À PASTILLE. Ils sont retirés du balisage ; leurs règles
      ne servent plus et le point sous les légendes de photo part avec eux. */
.scene__media figcaption::before, .etal-grille figcaption::before { display: none; }
.scene__media figcaption, .etal-grille figcaption { gap: 0; }

/* ⚠️ Le script insère la pastille AVANT le bloc des actions, donc avant l'état,
   la langue et le bouton. Elle n'est pas en position fixe dans ce cas mais
   posée dans la barre : c'est l'ordre du flux qu'il faut changer, pas le
   placement. Elle passe en dernier, colle au bord et prend la hauteur de la
   barre ; le bouton Commander se range juste à sa gauche. */
.entete__ligne { align-items: stretch; }
.entete__ligne > .marque, .entete__ligne > .menu { align-self: center; }
.entete__actions { order: 5; }

/* Les entêtes de section n'ont plus de surtitre : le titre remonte en première
   rangée, sinon la grille gardait une rangée vide à sa place. */
@media (min-width: 900px) {
  .titre-centre h2 { grid-row: 1; }
  .titre-centre p { grid-row: 1; }
}

/* L'entête de section garde l'alignement à gauche du reste du site : sans son
   surtitre, elle retombait au centre, et une section centrée au milieu de
   pages alignées à gauche se voit. */
.titre-centre, .titre-centre h2, .titre-centre p { text-align: left; }
.titre-centre p { margin-inline: 0; }

/* ---------- LE CONTRÔLE LAITIER ----------
   La fiche vivait dans un cadre, avec deux étiquettes à pastille, une photo en
   vignette dont la légende mordait l'image, et des chiffres nus posés au milieu
   d'un tableau dont on ne savait ni l'unité ni le sens. Elle devient une scène,
   et ses mesures une liste à filets qui dit l'unité et ce que le chiffre veut
   dire : le vocabulaire du reste du site. */
.bete__nom {
  margin: 0; font-weight: 400; letter-spacing: .01em;
  font-size: clamp(34px, 4vw, 58px); line-height: 1.02;
}
.bete__sous {
  margin: 10px 0 0; font: 600 12px/1.4 var(--f-texte);
  letter-spacing: .18em; text-transform: uppercase; color: var(--cendre);
}
.bete__annee {
  margin: clamp(22px, 2.4vw, 32px) 0 0; padding-bottom: clamp(22px, 2.4vw, 32px);
  border-bottom: 1px solid var(--filet);
  font-family: var(--f-titre); font-weight: 400; letter-spacing: .005em;
  font-size: clamp(21px, 1.8vw, 28px); color: var(--olive);
}
.bete__mesures { margin: 0; }
.bete__mesures > div {
  display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  gap: 4px clamp(18px, 2vw, 32px); padding: clamp(18px, 1.8vw, 24px) 0;
  border-bottom: 1px solid var(--filet);
}
.bete__mesures dt { font-size: 16px; }
.bete__mesures dd { margin: 0; display: grid; gap: 4px; }
.bete__mesures b {
  font-family: var(--f-titre); font-weight: 400; letter-spacing: .005em;
  font-size: clamp(19px, 1.5vw, 23px); font-variant-numeric: tabular-nums;
}
.bete__mesures span { font-size: 15.5px; line-height: 1.55; color: var(--cendre); }
.bete__pied {
  margin: clamp(24px, 2.6vw, 34px) 0 0; font-size: 16px; line-height: 1.65; color: var(--cendre);
}

/* Plus aucun point nulle part : l'étiquette ardoise portait encore le sien. */
.ardoise::before { display: none; }
.ardoise { padding-left: 15px; }

/* ⚠️ LE BOUTON DE COMMANDE SE REMASQUE SUR TÉLÉPHONE.
      Cette feuille passe APRÈS composition.css, et le `display: inline-flex`
      posé plus haut pour étirer le bouton à la hauteur de la barre a écrasé le
      `display: none` de la media query mobile du socle, à spécificité égale.
      Mesuré à 390 px avec un panier rempli : la marque (90 px), le bloc des
      actions resté complet (223 px) et la pastille du panier (75 px) tenaient
      la même barre, soit 436 px de contenu dans 390 px de fenêtre et 46 px de
      débordement horizontal de toute la page, 76 px à 360 px.
      Le menu mobile porte déjà son propre bouton « Commander ». */
/* Reprise portee a 1150 px, voir le bloc de la barre en fin de feuille. */
@media (max-width: 1150px) {
  .entete__appel { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES DEUX CENTRAGES DEMANDÉS, RÉTABLIS LE 27/10/2026
   ⚠️ Ils avaient été défaits par la passe qui a retiré les surtitres à
   pastille : son commentaire remet « l'alignement à gauche du reste du site ».
   Mesuré avant ce bloc, sur l'accueil en 1440 px, encre mesurée au Range :
   le nom de la ferme à 100 px du bord gauche et 781 px du droit, le manifeste
   à 0 contre 653. Les deux sont demandés centrés, et annoncés comme tels.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. LE NOM DE LA FERME, CENTRÉ SOUS LA PHOTO.
      La ligne d'épaule reste tendue d'un bord à l'autre : le lieu à gauche,
      le lait et le troupeau à droite. */
.affiche .hero__affiche { justify-items: center; }
.affiche .hero__grand {
  grid-column: 1 / -1; justify-self: center; text-align: center;
}
.affiche .hero__sur--g { justify-self: start; text-align: left; }
.affiche .hero__sur--d { justify-self: end; text-align: right; }
@media (max-width: 900px) {
  /* ⚠️ La grille de l'affiche porte deux classes, la media query du socle une
     seule : sans cette reprise, les deux surtitres restaient côte à côte et se
     cassaient en quatre lignes sur un téléphone. */
  .affiche .hero__affiche { grid-template-columns: 1fr; }
  .affiche .hero__sur--g, .affiche .hero__sur--d {
    grid-column: 1; grid-row: auto; justify-self: center; text-align: center;
  }
}

/* 2. LE MANIFESTE CENTRÉ, SON PARAGRAPHE DESSOUS.
      Il tenait une colonne de gauche, le paragraphe flottant à sa droite. */
.titre-centre--seul, .titre-centre--seul h2, .titre-centre--seul p { text-align: center; }
.titre-centre--seul .sur { justify-content: center; }
@media (min-width: 900px) {
  /* Une seule colonne : le paragraphe passe sous le titre au lieu de lui
     tenir compagnie. La règle qui les posait tous deux en `grid-row: 1`
     n'opère plus, la grille n'existe pas. */
  .titre-centre--seul { display: block; }
  .titre-centre--seul h2, .titre-centre--seul p { margin-inline: auto; }
  .titre-centre--seul p { margin-top: clamp(20px, 2.4vw, 32px); max-width: 38em; }
}
@media (min-width: 1000px) {
  body { transition: padding-right .45s var(--sortie); }
}

/* ---------- LE SÉCHOIR DANS LA SECTION DU SERVICE ----------
   La colonne de gauche portait un titre, un chapô, puis 400 px de vide pendant
   que les trois étapes couraient à droite. La photo tient ce vide et répond au
   chapô : « la liste suit ce qui sort du séchoir ». */
.service__vue { margin: clamp(28px, 3vw, 40px) 0 0; }
.service__vue img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rayon); aspect-ratio: 4 / 5; object-fit: cover;
}
.service__vue figcaption {
  margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--cendre);
}
/* Sur fond sombre, la légende se tient au gris clair de la section. */
.fond-foret .service__vue figcaption, .fond-encre .service__vue figcaption { color: #A9A89D; }
@media (max-width: 900px) {
  /* En une colonne, la photo passe après les étapes plutôt qu'entre le chapô
     et elles : le texte qui explique reste d'un seul tenant. */
  .service { display: grid; }
  .service__dire { display: contents; }
  .service__vue { order: 3; margin-top: 0; }
  .service__liste { order: 2; }
}
/* Les trois étapes accompagnent la hauteur de la photo au lieu de s'arrêter à
   son tiers. Le plafond évite la liste distendue : au-delà, c'est l'air qui se
   voit, plus les étapes. */
@media (min-width: 900px) {
  .service { align-items: stretch; }
  .service__liste {
    display: flex; flex-direction: column; justify-content: space-between;
    gap: clamp(8px, 1.4vw, 28px);
  }
  .service__liste li { max-height: 190px; }
}

/* La mention réglementaire rend son filet : celui des fiches, juste dessous,
   disait déjà la séparation, et deux traits parallèles de longueurs
   différentes se remarquaient plus que la mention elle-même. */
.mention-commune { padding-bottom: 0; border-bottom: 0; }

/* ---------- LA FAÇADE DE LA CARTE ----------
   Elle se règle sur son contenu plutôt que sur la hauteur de la carte à venir,
   et le bouton d'itinéraire cesse d'être seul dans un coin. */
.carte-geo__facade { height: clamp(210px, 22vw, 290px); gap: 12px; }
.carte-geo__bouton { bottom: clamp(16px, 1.6vw, 24px); }
#magasin { padding-bottom: 0; }
#epicerie { padding-top: var(--air-s); }

/* ---------- LE ROND DE LA CHRONIQUE EST UN BOUTON ----------
   Il en avait l'apparence sans en être un : cliquer dessus ne faisait rien.
   Il pilote maintenant la lecture, et il en prend les marques. */
.radio__ico {
  border: 0; padding: 0; cursor: pointer; font: inherit;
  transition: background-color .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1);
}
.radio__ico:hover { background: var(--feuille); }
.radio__ico:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.radio__ico:active { transform: scale(.94); }
/* Pendant la lecture, le rond passe à la couleur pleine de la marque. */
.radio__ico--joue { background: var(--feuille); }
.fond-foret .radio__ico:hover, .fond-encre .radio__ico:hover,
.fond-foret .radio__ico--joue, .fond-encre .radio__ico--joue {
  background: rgba(239, 237, 231, .3); color: #FFFFFF;
}
/* Le lecteur natif ne reparaît que si le navigateur a refusé la lecture : le
   script lui rend alors ses commandes, et il reprend sa place sous le texte. */
.radio audio:not([controls]) { display: none; }
.radio__temps {
  margin-top: 8px; font-variant-numeric: tabular-nums;
  font-size: 13.5px; letter-spacing: .04em;
}
.radio__temps[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRE TIENT SA LARGEUR
   ⚠️ Mesure de la largeur reclamee par ses morceaux, compression empechee le
   temps du relevé : 1269 px. Elle ne tenait donc qu'a partir de 1280, et en
   dessous le navigateur comprimait le seul element compressible, le logo, qui
   tombait a 0 x 44 px a 1000 px de fenetre pendant que la barre debordait de
   100 px. Le nom ecrit a cote du logo masquait le probleme en se repliant sur
   trois lignes, par-dessus « Accueil ».
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. LE LOGO NE SE COMPRIME PLUS, JAMAIS. */
.marque { flex: 0 0 auto; min-width: 0; }
.marque img { flex: 0 0 auto; }

/* 2. SOUS 1150 PX, LE BURGER. Le menu, le bouton, l'etat et la langue passent
      au menu deroulant, qui les porte deja tous. */
@media (max-width: 1150px) {
  .menu { display: none; }
  .burger { display: block; }
  .entete__actions .statut { display: none; }
  .langue { display: none; }
}

/* 3. DE 1150 A 1280 PX, LE MENU SE RESSERRE. Il reclame 611 px a lui seul,
      soit 122 px par entree : en rapprochant les entrees et en rendant une
      partie de l'interlettrage, il rentre sans se replier. */
@media (min-width: 1151px) and (max-width: 1280px) {
  /* Le padding des liens est le seul poste vraiment gras : 13 px de chaque
     cote sur cinq liens, 130 px a lui seul. A 8 px, le menu rend 50 px. */
  .menu a { padding-inline: 8px; }
  .entete__ligne { gap: 16px; }
  .entete__actions { gap: 10px; }
  .entete__appel { padding-inline: 20px; }
}

/* ---------- LA PAGE INTROUVABLE ----------
   Le projet dédié servait la page par défaut de Vercel, « NOT_FOUND » sur fond
   blanc, sans navigation ni nom de ferme : un visiteur qui se trompe d'adresse
   sortait du site. Celle-ci porte l'en-tête et le pied comme toute page, et
   propose les cinq chemins plutôt qu'un seul retour à l'accueil. */
.egarement { margin: clamp(26px, 3vw, 40px) 0; padding: 0; }
.egarement li { border-top: 1px solid var(--filet); }
.egarement li:last-child { border-bottom: 1px solid var(--filet); }
.egarement a {
  display: block; padding: clamp(16px, 1.8vw, 22px) 0;
  font-family: var(--f-titre); font-weight: 400; letter-spacing: .005em;
  font-size: clamp(19px, 1.7vw, 25px); text-decoration: none; color: var(--encre);
  transition: color .3s var(--sortie), padding-left .3s var(--sortie);
}
.egarement a:hover { color: var(--olive); padding-left: 10px; }

/* ---------- LES CIBLES DU POUCE ----------
   Relevé au balayage des 32 formats : le bouton du menu mesurait 42 × 35 et
   les liens du pied 34 de haut. Les deux passent la hauteur minimale de la
   WCAG 2.2 (24 px), mais restent sous les 44 que recommandent Apple et
   Google, et ce sont justement les cibles qu'on vise d'un pouce, en marchant,
   sur le bord de l'écran.
   ⚠️ LA ZONE GRANDIT SANS QUE LE DESSIN BOUGE : on agit sur le remplissage et
   sur une hauteur minimale, jamais sur la taille du trait ni du texte, sinon
   l'en-tête et le pied se déforment pour une raison qui ne se voit pas. */
.burger { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
@media (max-width: 900px) {
  .pied nav a, .pied__grille li a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-top: 0; padding-bottom: 0;
  }
}

/* ---------- LA COUPURE ENTRE DEUX SECTIONS DE MÊME FOND ----------
   Relevé au téléphone le 27/10/2026 : jusqu'à QUATRE sections de suite sur le
   même fond, sur la page des fromages, et aucune ne portait de filet. Elles se
   lisaient comme un seul long défilement, et c'est le reproche « on ne voit
   pas les séparations ».

   ⚠️ LE FILET N'APPARAÎT QUE LÀ OÙ IL MANQUE QUELQUE CHOSE. Un changement de
   fond sépare déjà : lui ajouter un trait ferait deux séparations pour une
   coupure. Le sélecteur d'adjacence ne le pose donc qu'entre deux voisines de
   même fond, et il disparaît tout seul le jour où l'une d'elles change de
   teinte, y compris depuis le Studio. */
.fond-lait + .fond-lait,
.fond-sable + .fond-sable,
.fond-sable + .fond-vert,
.fond-vert + .fond-sable,
.fond-creme + .fond-creme,
.fond-foret + .fond-foret,
.fond-encre + .fond-encre,
.fond-vert + .fond-vert { border-top: 1px solid var(--filet); }
.fond-foret + .fond-foret,
.fond-encre + .fond-encre,
.fond-vert + .fond-vert { border-top-color: rgba(239, 237, 231, .16); }

/* Une section sans classe de fond hérite du fond de la page, qui est le lait :
   elle se touche donc aussi bien avec une autre section nue qu'avec une
   section explicitement en lait. Les trois cas portent le même filet, sans
   quoi une jointure sur trois restait invisible. */
section:not([class*="fond-"]) + section:not([class*="fond-"]),
section:not([class*="fond-"]) + .fond-lait,
.fond-lait + section:not([class*="fond-"]) { border-top: 1px solid var(--filet); }

/* ---------- DEUX COLONNES LÀ OÙ UNE LISTE S'ÉTIRE ----------
   Relevé au téléphone le 27/10/2026 : l'épicerie déroulait dix lignes d'un
   seul tenant, et le pied six liens de 44 px, soit près de 600 px de listes à
   la file. Des phrases courtes empilées sur une colonne, c'est ce qui donne
   l'impression de page simpliste : la densité manque, pas le contenu.

   ⚠️ LA BASCULE SE FAIT À 620 px POUR L'ÉPICERIE, et c'était le seuil : le
   téléphone restait donc toujours sur une colonne. On le descend, comme pour
   le catalogue des fromages.

   ⚠️ LES CIBLES GARDENT LEURS 44 px DE HAUT : on gagne de la place en largeur,
   jamais en rapprochant deux liens que le pouce doit distinguer. */
@media (max-width: 619px) {
  .epicerie__liste { grid-template-columns: 1fr 1fr; column-gap: clamp(14px, 4vw, 24px); }
  .epicerie__liste li { font-size: 14.5px; line-height: 1.4; }
}
@media (max-width: 760px) {
  .pied nav ul, .pied__grille ul {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(14px, 4vw, 24px);
  }
  /* ⛔ ET UNE SEULE COLONNE TANT QUE DEUX NE TIENNENT PAS (30/10/2026).
     La liste « Nous trouver » réclame 342 px : 232,7 pour l'adresse, dont la
     deuxième ligne « 26700 La Garde-Adhémar » ne se coupe pas, 94,8 pour le
     numéro, plus la gouttière. Sous 376 px le conteneur n'en offre que 288 à
     308, et `1fr 1fr` ne rétrécit pas : une piste vaut au moins sa min-content.
     ⚠️ LE DÉFAUT NE S'ARRÊTAIT PAS AU PIED. L'item de `.pied__grille` garde
     `min-width: auto`, donc la piste du parent grandissait à 341,5 px elle
     aussi : le nom de la ferme, les labels et les trois listes se calaient
     tous sur cette largeur, et LA PAGE ENTIÈRE défilait de travers, 358 px
     pour 320. Un seul `ul` trop large déréglait les cinq pages.
     ⚠️ À 360 et 375 px la page ne défilait pas, parce que le débordement
     tenait encore dans l'écran : le texte sortait simplement de 14 px dans la
     gouttière de droite. Un défaut d'alignement, pas de défilement, et c'est
     pour ça qu'aucun contrôle ne l'a nommé.
     Le `minmax(0, 1fr)` ci-dessus et la coupure des mots longs ci-dessous
     sont les garde-fous : le jour où une adresse ou un courriel s'allonge, la
     piste cède plutôt que de pousser toute la page. */
  .pied__grille ul a { overflow-wrap: anywhere; }
  /* ⚠️ ET LE COURRIEL PREND LA RANGÉE ENTIÈRE. Sans cela il héritait d'une
     demi-largeur, soit 160 px pour une adresse qui en demande 256, et se
     coupait en « biquetteslarcheveque@g / mail.com » sur tous les téléphones,
     alors qu'il tient sur une ligne dès qu'on lui donne les deux colonnes.
     La coupure reste le garde-fou de 320 px, elle cesse d'être la règle.
     Viser le lien plutôt que son rang : un élément ajouté dans la liste
     depuis le Studio ne déplacerait pas la règle. */
  .pied__grille ul li:has(a[href^="mailto:"]) { grid-column: 1 / -1; }
}
@media (max-width: 375px) {
  .pied nav ul, .pied__grille ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- UN TITRE DE SCÈNE RESPIRE AVANT SON TEXTE ----------
   Mesuré le 27/10/2026, au téléphone comme au bureau : trois titres de scène
   touchaient leur premier paragraphe, écart de 0 px, quand les trois autres
   en avaient 24. La différence tenait à la classe « titre-bloc », qui porte
   la marge et que ces trois-là n'ont pas.
   ⚠️ LA RÈGLE NE VISE QUE CEUX QUI N'ONT PAS LA CLASSE : poser la marge sur
   tous les titres de scène la doublerait là où elle existe déjà. */
.scene__texte > h2:not(.titre-bloc) { margin-bottom: 24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRE DES FERMETURES
   Posee au-dessus de l'entete, dans le flux. Elle ne parait que lorsqu'une
   fermeture approche : `hidden` est le mecanisme, retire par le script.
   ═══════════════════════════════════════════════════════════════════════════ */
.bandeau-fermeture {
  background: var(--brun-noir);
  color: var(--creme);
  /* ⚠️ Le z-index passe au-dessus de l'entete collante (50) : sans lui, la
     barre glisse DERRIERE elle au defilement au lieu de sortir par le haut. */
  position: relative; z-index: 51;
}
.bandeau-fermeture[hidden] { display: none; }
.bandeau-fermeture .conteneur {
  padding-block: clamp(11px, 1.1vw, 15px);
  display: flex; justify-content: center; text-align: center;
}
.bandeau-fermeture span {
  font: 500 14.5px/1.5 var(--f-texte);
  letter-spacing: .02em;
  max-width: 62em;
}
@media (max-width: 700px) {
  /* La phrase passe sur deux lignes : on lui laisse l'air de les tenir. */
  .bandeau-fermeture .conteneur { padding-block: 12px; }
  .bandeau-fermeture span { font-size: 14px; line-height: 1.45; }
}

/* ---------- LA PAGE DE LA FERME, RESSERRÉE AU TÉLÉPHONE ----------
   Mesurée à 15,1 écrans, pour un repère de 9. Avant de toucher au texte, on
   prend tout ce qui se gagne sans perdre un mot : la frise pesait 1 202 px à
   elle seule, la fiche technique 723, et la bande photo 692 pour dix mots.

   ⚠️ LA FRISE NE PASSE PAS EN DEUX COLONNES, et ce n'est pas un oubli : ses
   étiquettes sont des phrases (« Il y a plus de quarante ans »), pas des
   années. Une colonne latérale les casserait sur quatre lignes et la frise
   serait plus haute qu'avant. On resserre donc sa respiration, sans toucher
   à sa forme. */
@media (max-width: 760px) {
  .frise li { padding-block: 15px; gap: 4px 32px; }
  .frise h3 { margin-bottom: 4px; }
  /* La fiche passe en deux colonnes : ses intitulés sont des mots courts
     (« Race », « Pâturage », « Fourrage »), contrairement aux étiquettes de
     la frise. Chaque ligne tient alors sur une hauteur au lieu de deux. */
  .fiche div { grid-template-columns: minmax(0, 7.2em) minmax(0, 1fr); padding-block: 9px; gap: 4px 14px; align-items: baseline; }
  /* ⚠️ 12 px EST UN PLANCHER, PAS UNE PRÉFÉRENCE. Descendu à 11,5 pour gagner
     une poignée de pixels, l'intitulé repassait sous la limite du site : huit
     textes sous 12 px au relevé, là où il n'y en avait aucun. On resserre la
     lettre, jamais le corps. */
  .fiche dt { font-size: 12px; letter-spacing: .08em; }
  /* Les mesures de Blanchette suivent la fiche : leurs intitulés sont courts
     eux aussi (« Cellules », « Taux butyreux »), et la règle de 560 px les
     empilait sur deux hauteurs. */
  .bete__mesures > div { grid-template-columns: minmax(0, 8em) minmax(0, 1fr); gap: 3px 14px; padding-block: 13px; }
  .bete__mesures dt { font-size: 14px; }
  /* La bande photo garde sa force à 56svh : c'est une respiration, et à
     82svh elle prenait presque un écran entier pour une seule phrase. */
  .bande { min-height: clamp(360px, 56svh, 560px); }
}

/* La sortie au bout de la liste de service : la section qui explique comment
   commander doit permettre de commander. Elle s'aligne sur la liste, pas sur
   le texte d'introduction, pour clore l'énumération plutôt que la section. */
.service__sortie { margin: clamp(22px, 2.4vw, 32px) 0 0; grid-column: 1 / -1; }

/* ---------- 2. Les trois étapes de la commande se tiennent ----------
   Étirées sur la hauteur de la photo du séchoir, elles laissaient 400 px de
   vide entre deux lignes de texte : trois îlots dans le noir. Elles forment
   un bloc, calé au centre de la hauteur de la colonne de gauche. */
@media (min-width: 900px) {
  .service { align-items: start; }
  .service__liste { display: block; align-self: center; }
  .service__liste li { max-height: none; }
}

/* ---------- 3. Le bouton d'itinéraire rejoint le texte de la carte ----------
   Collé au coin bas gauche de la façade pendant que le repère, l'action et
   la mention se centraient : deux compositions sur un seul aplat. Il se
   centre sous la mention, et la façade lui réserve sa place. */
.carte-geo__facade { padding-bottom: clamp(88px, 8vw, 108px); }
.carte-geo__bouton { left: 50%; translate: -50% 0; }

/* ---------- 4. Le nom de la ferme resserré sur téléphone ----------
   Les deux lignes du nom sont deux cases de grille : l'écart de 18 px prévu
   entre le surtitre et le nom s'ajoutait aussi entre les deux lignes du nom,
   qui flottaient l'une sous l'autre. */
@media (max-width: 900px) {
  .affiche .hero__grand + .hero__grand { margin-top: -8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRE REMISE D'APLOMB, 27/10/2026
   Trois passes successives y avaient empilé des intentions contraires : le
   bouton voulait être une pilule puis un pavé collé au coin, le panier un
   aplat puis rien, et la zone de pouce du menu avait rendu le bouton à trois
   traits visible sur tous les écrans, menu complet compris.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. LE BOUTON À TROIS TRAITS NE SE MONTRE QU'AVEC LE MENU REPLIÉ.
      ⚠️ La règle des cibles du pouce lui posait « display: grid » hors de
      toute requête de média : elle écrasait le « display: none » et le menu
      déroulant doublait le menu complet sur un écran d'ordinateur. La zone de
      44 px reste, le placement grid passe là où le bouton s'affiche. */
.burger { display: none; }
@media (max-width: 1150px) { .burger { display: grid; } }

/* 2. LE BOUTON D'APPEL REDEVIENT UNE PILULE DANS LA BARRE.
      Étiré sur toute la hauteur et collé au bord, il faisait un pavé blanc
      qui coupait la barre en deux et mangeait le coin. Il reprend la forme de
      tous les boutons du site et se range dans la gouttière, avec le reste. */
.entete__ligne { align-items: center; }
.entete__actions { align-self: center; }
.entete__appel {
  align-self: center; height: auto;
  border-radius: var(--rayon-pilule);
  padding: 13px clamp(20px, 2vw, 30px);
  margin-right: 0; margin-block: 0;
}

/* ---------- LES REVENDEURS : LA PHOTO PREND LE VIDE ----------
   La section portait le titre et deux phrases à gauche, la liste des trois
   commerces et la photo empilées à droite : 210 px de contenu d'un côté
   contre 700 de l'autre, donc 490 px de vide mesurés sous le titre. Les deux
   blocs se répartissent maintenant la ligne, photo d'un côté, le propos et
   les adresses de l'autre, centrés l'un sur l'autre.
   ⚠️ La photo plafonne à 800 px de large à la source : elle tient la moitié
   de la grille, jamais davantage, sinon elle se tire. */
/* La photo se tient à droite : la vitrine, juste au-dessus, porte la sienne à
   gauche, et deux blocs qui se suivent ne penchent jamais du même bord. */
#revendeurs .revendeurs__photo { grid-column: 8 / span 5; max-width: none; }
#revendeurs .revendeurs__bloc { grid-column: 2 / span 5; }
#revendeurs .revendeurs__bloc .titre-bloc { margin-top: 0; }
#revendeurs .revendeurs { margin-top: clamp(20px, 2vw, 28px); }
#revendeurs .revendeurs li { padding: clamp(14px, 1.4vw, 19px) 0; }
#revendeurs .note-source { margin-top: clamp(16px, 1.6vw, 22px); }
@media (max-width: 1100px) {
  #revendeurs .revendeurs__photo { grid-column: 7 / -1; }
  #revendeurs .revendeurs__bloc { grid-column: 1 / span 6; }
}
@media (max-width: 900px) {
  /* Le propos passe devant : on lit ce que la section annonce avant de voir
     le bocal. */
  #revendeurs .revendeurs__bloc { grid-column: 1 / -1; order: 1; }
  #revendeurs .revendeurs__photo { grid-column: 1 / -1; order: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA GAMME, L'ÉTAL DE LA PAGE DES FROMAGES, 28/10/2026
   Le click and collect est abandonné (la cliente le trouve lourd à tenir) :
   la page ne vend plus, elle montre. L'étal reprend ce que le catalogue avait
   de juste : une fiche sans aplat ni cadre, un filet qui la sépare de sa
   voisine, le nom en serif et la vignette carrée.
   ⚠️ La photo n'est posée que quand elle montre vraiment le fromage. Sur
   douze, quatre en ont une ; les huit autres portent le sceau de la ferme sur
   une tuile crème, qui se lit comme une marque et non comme une image
   manquante. Les photos par fromage viendront avec la séance photo.
   ⚠️ DOUZE FICHES TOMBENT JUSTE sur deux, trois et quatre colonnes : aucune
   rangée creuse, à aucune largeur. Un fromage de plus ou de moins laisserait
   un trou au bout de la grille, à surveiller quand la cliente en ajoute un.
   ═══════════════════════════════════════════════════════════════════════════ */
.gamme-liste {
  display: grid; gap: 0; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  margin-top: clamp(28px, 3vw, 44px);
}
.gamme-art {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--filet);
  padding: clamp(22px, 2.2vw, 30px) clamp(16px, 1.6vw, 24px);
  transition: background-color .4s var(--sortie);
}
.gamme-art:hover { background: rgba(26, 30, 22, .035); }
.gamme-art__photo { margin: 0 0 18px; aspect-ratio: 1; overflow: hidden; border-radius: var(--rayon); }
.gamme-art__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gamme-art__photo--sceau { display: grid; place-items: center; background: var(--creme-fonce); }
.gamme-art__photo--sceau img { width: 56%; height: auto; object-fit: contain; opacity: .3; }
/* ⚠️ UNE TUILE AU SCEAU REDEVIENT UNE PHOTO DÈS QU'ON LUI EN POSE UNE. Laura a
   écrit le 03/11/2026 « dans le catalogue je n'arrive pas à rajouter les photos
   manquantes » : les sept tuiles sans portrait n'avaient aucun repère Studio.
   Elles en ont un désormais, et ces deux lignes défont le sceau au moment où la
   photo arrive. Le repère se lit sur le fichier servi : le sceau est le seul
   SVG de la grille, tout le reste est une photo. */
.gamme-art__photo--sceau img:not([src$=".svg"]) { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.gamme-art__photo--sceau:has(img:not([src$=".svg"])) { display: block; background: none; }
.gamme-art__nom {
  font-family: var(--f-titre); font-weight: 500; margin: 0;
  font-size: clamp(20px, 1.6vw, 25px); line-height: 1.15;
}
.gamme-art__dit { margin: 8px 0 0; color: var(--cendre); font-size: 15px; }
.mention-commune {
  margin: clamp(22px, 2.4vw, 32px) 0 0; color: var(--cendre);
  font-size: 14.5px; line-height: 1.6; text-align: center;
}
/* Deux colonnes dès le téléphone : une seule faisait douze écrans de liste. */
@media (max-width: 700px) {
  .gamme-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gamme-art { padding: 18px 12px 16px; }
  .gamme-art__nom { font-size: 17px; }
  .gamme-art__dit { font-size: 13.5px; line-height: 1.45; }
  .gamme-art__photo { margin-bottom: 12px; }
  .mention-commune { text-align: left; }
}

/* ═══ LE RÉSUMÉ DE L'ACCUEIL ════════════════════════════════════════════════
   Les trois portes du site, demandées par Laura le 28/10/2026. Elles reprennent
   exactement la fiche de la gamme, dont elles ont la forme, et deviennent
   cliquables en entier. Elles ont pris la place du rail de la gamme.
   ⚠️ TROIS COLONNES IMPOSÉES, pas `auto-fill` : trois fiches dans la grille de
   la gamme donnaient quatre colonnes sur un grand écran, donc une case vide.
   ⚠️ CES RÈGLES VIENNENT APRÈS le repli à deux colonnes de `.gamme-liste`,
   qui a la même spécificité : la dernière écrite gagne. */
.resume-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
a.gamme-art { color: inherit; text-decoration: none; }
a.gamme-art .gamme-art__nom {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: var(--filet);
  transition: text-decoration-color .4s var(--sortie);
}
a.gamme-art:hover .gamme-art__nom { text-decoration-color: currentColor; }
@media (max-width: 760px) {
  /* ⚠️ TROIS CASES EMPILÉES FAISAIENT 1 200 px À ELLES SEULES, soit un écran
     et demi de téléphone pour trois phrases. Deux colonnes de 46vw rendaient
     les phrases illisibles, et laissaient une case vide au bout. La fiche se
     replie donc en ligne, comme celles de la gamme : vignette à gauche, nom
     et phrase à droite. */
  /* ⛔ MÊME DÉFAUT QUE LA GAMME, corrigé le 30/10/2026 : la phrase tombait dans
     la colonne de 96 px et s'écrivait sur six lignes de deux mots. Les trois
     portes pesaient 1 154 px pour soixante-quinze mots. Zones nommées. */
  .resume-liste { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
  /* ⚠️ LA VIGNETTE DE 108 px ETAIT UN MAUVAIS COMPROMIS. Elle economisait la
     hauteur de trois cases carrees (1 200 px), mais elle rendait les photos
     en timbres-postes poses a cote du texte : trois images qu'on ne regarde
     pas, et c'est ce que Celestin appelle « neutre, sans ame ».
     La photo reprend toute la largeur, en bande 2/1 : 196 px de haut au lieu
     de 393, donc 860 px pour les trois cases contre 1 200 pour des carres.
     L'image redevient une image sans que la page s'allonge. */
  .resume-liste .gamme-art {
    display: block; padding: 0;
    margin-inline: calc(var(--gouttiere) * -1);
  }
  .resume-liste .gamme-art__photo { margin: 0 0 16px; aspect-ratio: 2 / 1; }
  .resume-liste .gamme-art__photo img { width: 100%; height: 100%; object-fit: cover; }
  .resume-liste .gamme-art__nom,
  .resume-liste .gamme-art__dit { margin-inline: var(--gouttiere); }
  .resume-liste .gamme-art__nom { font-size: 21px; }
  .resume-liste .gamme-art__dit { font-size: 15px; line-height: 1.5; }
}

/* ═══ LA GAMME, PAR FAMILLE ═════════════════════════════════════════════════
   Vingt-huit références depuis le 28/10/2026, dans les quatre familles du
   catalogue imprimé de Laura : les classiques, les formes et préparations, les
   aromates enrobés et les aromates fourrés.
   ⚠️ CHAQUE FAMILLE POSE SON NOMBRE DE COLONNES, en variable. `auto-fill`
   choisissait le nombre selon la largeur, et laissait une fiche seule au bout
   d'une rangée dès qu'il tombait sur quatre colonnes pour neuf fromages. Neuf
   vont sur trois colonnes, huit sur quatre, deux sur deux : aucune rangée
   n'est à moitié vide, à aucune largeur. Un fromage ajouté depuis le Studio
   demande donc de revoir le `--colonnes` de SA famille. */
.gamme-liste--famille { grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr)); }
.gamme-famille + .gamme-famille { margin-top: clamp(34px, 3.4vw, 52px); }
.gamme-famille__nom {
  font-family: var(--f-titre); font-weight: 500; margin: 0;
  font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2;
  padding-bottom: 12px; border-bottom: 2px solid var(--feuille);
}
.gamme-famille__dit { margin: 10px 0 0; color: var(--cendre); font-size: 15px; max-width: 54em; }
@media (max-width: 860px) {
  /* Sous 860 px, la fiche se replie en ligne : vignette à gauche, nom et
     phrase à droite. Il n'y a plus de colonnes, donc plus de rangée
     incomplète, et les noms longs cessent de se couper en quatre.
     ⛔ LE REPLI METTAIT LA PHRASE DANS LA COLONNE DE LA VIGNETTE (30/10/2026).
     L'article a TROIS enfants (figure, titre, phrase) pour deux colonnes : la
     grille place le troisième à la ligne suivante, colonne 1, large de 76 px.
     « Pour les amateurs de caractère » s'écrivait sur quatre lignes d'un ou
     deux mots, vingt-huit fois, et c'est ce qui faisait les 7 117 px de la
     section. Les zones nommées l'évitent, et elles ne dépendent pas du nombre
     d'enfants : un quatrième élément ajouté un jour ne redéplacerait rien. */
  .gamme-liste--famille { grid-template-columns: 1fr; }
  .gamme-liste--famille .gamme-art {
    display: grid; grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "vignette nom" "vignette dit";
    column-gap: 16px; row-gap: 4px; align-content: center; padding: 14px 0;
  }
  .gamme-liste--famille .gamme-art__photo { grid-area: vignette; margin: 0; align-self: center; }
  .gamme-liste--famille .gamme-art__nom { grid-area: nom; align-self: end; font-size: 17px; }
  .gamme-liste--famille .gamme-art__dit { grid-area: dit; align-self: start; font-size: 13.5px; line-height: 1.45; }
}

/* ═══ LA GAMME SUR TÉLÉPHONE : UNE MOSAÏQUE, PAS UNE LISTE ══════════════════
   30/10/2026. Vingt-huit vignettes de 76 px alignées à la file, c'est un
   inventaire, pas une vitrine : la page des fromages faisait 14,8 écrans et le
   fromage, qui est le sujet, tenait un douzième de la largeur. Deux colonnes
   rendent à la photo 170 px de côté, soit cinq fois sa surface, et la page
   raccourcit quand même.
   ⚠️ LA PHRASE DE LA FICHE SE TAIT ICI, et c'est un arbitrage, pas un oubli :
   vingt-huit phrases de huit mots font deux cent vingt mots de légende sur un
   écran de téléphone, par-dessus les quatre textes de famille qui disent déjà
   ce qui distingue chaque groupe. Elle reste dans le code, dans le Studio et
   sur toute largeur au-dessus de 700 px.
   ⚠️ SAUF QUAND LA FICHE N'A PAS DE PHOTO : les cinq qui portent le sceau de la
   ferme n'ont que leur phrase pour se décrire, la taire laisserait un nom seul
   sous une tuile crème. */
@media (max-width: 700px) {
  .gamme-liste--famille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }
  .gamme-liste--famille .gamme-art {
    display: flex; flex-direction: column;
    padding: 18px 0 22px;
  }
  /* ⚠️ `align-self` POSÉ POUR LA GRILLE DU REPLI AGIT ICI SUR L'AXE
     HORIZONTAL : dans une colonne flex, la traverse est la largeur, et le
     `end` qui calait le nom en bas de sa rangée le collait au bord droit de
     la vignette. Les trois éléments reprennent toute la largeur. */
  .gamme-liste--famille .gamme-art > * { align-self: stretch; }
  .gamme-liste--famille .gamme-art__photo { margin: 0 0 12px; }
  .gamme-liste--famille .gamme-art__nom { font-size: 16.5px; line-height: 1.2; }
  /* ⚠️ LA PHRASE ETAIT MASQUEE FAUTE DE PLACE, et « Poivre » tout seul sous
     une photo ne dit rien que la photo ne dise deja. Le filtre par famille a
     rendu quatre ecrans : on n'affiche plus vingt-huit fiches d'un coup mais
     huit ou neuf, et chacune peut redire ce qu'elle est. */
  .gamme-liste--famille .gamme-art__dit {
    display: block; margin-top: 6px; font-size: 13px; line-height: 1.45;
  }
}

/* La mention commune touchait le filet de la première famille, et son
   centrage jurait avec des titres de famille alignés à gauche. */
.mention-commune + .gamme-famille { margin-top: clamp(30px, 3vw, 46px); }
.gamme-liste--famille ~ * .mention-commune,
#gamme .mention-commune { text-align: left; }

/* ---------- L'EXERGUE TIENT SUR UNE LIGNE ----------
   ⚠️ Mesure : cette citation reclame 18,1 px de large par pixel de taille,
   guillemets compris. La taille qui tient sur une ligne vaut donc la largeur
   de la colonne divisee par 18,1 : 53 px pour une colonne de 960, 39 px pour
   720, 30 px pour 550. Un clamp a 2,5vw passe sous les trois avec de la marge.
   Le plancher a 24 px rend deux lignes lisibles sur telephone, ce qui vaut
   mieux qu'une ligne qu'on ne lit plus. */
.exergue-citation {
  /* 5,3 % de la colonne : juste sous le seuil de 5,35 % ou la citation se
     replie. Le plafond garde l'ampleur voulue sur les larges colonnes, et le
     plancher rend deux lignes lisibles sur telephone, ce qui vaut mieux
     qu'une ligne qu'on ne lit plus. */
  font-size: clamp(22px, 5.3cqw, 46px);
}
/* Le conteneur a mesurer, sans quoi cqw retombe sur la fenetre. */
.exergue-citation { container-type: inline-size; }
.scene__texte, .c-5, .c-6, .c-7, .c-8 { container-type: inline-size; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA CARTE PRATIQUE, AFFINÉE
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. LE FILET NE TOUCHE PLUS LES BORDS. Bord à bord il dessinait un tableau ;
      posé sur la hauteur du texte seulement, il sépare sans quadriller. */
.carte-pratique > * + * { border-left: 0; }
@media (min-width: 901px) {
  .carte-pratique > * + * { position: relative; }
  .carte-pratique > * + *::before {
    content: ''; position: absolute; left: 0;
    top: clamp(28px, 2.8vw, 44px); bottom: clamp(28px, 2.8vw, 44px);
    border-left: 1px solid rgba(239, 237, 231, .12);
  }
}

/* 2. PLUS D'AIR, et davantage en hauteur qu'en largeur : c'est le vide au-dessus
      et au-dessous qui pose une information, pas celui qui l'encadre. */
.carte-pratique > * { padding: clamp(34px, 3.4vw, 56px) clamp(26px, 2.6vw, 42px); }

/* 3. LE CONTRASTE PASSE DE 1,4 À 2,1. Le titre prend de l'ampleur, le texte
      se retire : l'oeil sait alors dans quel ordre lire. */
.carte-pratique dd strong {
  font-size: clamp(22px, 2vw, 31px); line-height: 1.15;
  margin-bottom: 10px; letter-spacing: .002em;
}
.carte-pratique dd { font-size: 14.5px; line-height: 1.6; color: #A9A89D; }

/* 4. L'ÉTIQUETTE SE FAIT OUBLIER. Elle nommait sa colonne en capitales très
      espacées, trois fois de suite ; elle reste utile, elle cesse d'être la
      première chose qu'on voit. */
.carte-pratique dt {
  font-size: 12px; letter-spacing: .14em; margin-bottom: 12px;
  color: rgba(157, 179, 140, .72);
}

/* 5. LE LIEN SE TIENT AU TEXTE plutôt que de crier en blanc souligné. */
.carte-pratique a {
  color: #EFEDE7; text-decoration-color: rgba(239, 237, 231, .4);
  text-underline-offset: 4px;
}
.carte-pratique a:hover { text-decoration-color: #EFEDE7; }

/* Les trois cellules partagent les rangées de la carte : l'étiquette, le titre
   et le texte s'alignent d'une colonne à l'autre, qu'un titre tienne sur une
   ligne ou sur deux. */
@media (min-width: 901px) {
  /* Deux lignes de hauteur pour le titre : « Du mercredi au samedi » en tient
     une, « 397 chemin de Fonteron » en tient deux, et sans cela la ligne
     d'horaires se posait 55 px plus haut que ses voisines. */
  .carte-pratique dd strong { min-height: 2.3em; }
}

/* ---------- L'ACCENT NE SE FAIT PLUS COUPER ----------
   ⚠️ Interlignage 0,98 et masque en overflow: hidden : la boite de ligne fait
   76 px pour une police de 77,76, et le chapeau du « Ê » sortait par le haut.
   Le masque gagne de la hauteur, la marge negative la rend : l'accent passe
   sans que rien ne bouge a l'ecran. */
.hero__grand .mot { padding-top: .22em; margin-top: -.22em; }

/* ---------- LE BANDEAU PRATIQUE SE CENTRE ---------- */
.carte-pratique { text-align: center; }
.carte-pratique dd strong { min-height: 2.3em; }
@media (min-width: 901px) {
  /* Le filet suit le centrage : cale a gauche d'un contenu centre, il
     paraitrait oublie. */
  .carte-pratique > * + *::before { left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LE TÉLÉPHONE, PASSE DU 30 OCTOBRE 2026
   ───────────────────────────────────────────────────────────────────────────
   Reproche de Célestin : « manque de photos, ou trop de texte sur téléphone ».
   Le relevé par section, à 390 px, a donné le même verdict en chiffres : sept
   sections portaient du texte seul, la gamme tenait 8,4 écrans pour des
   vignettes de 76 px, et la part de média d'une section moyenne tombait sous
   30 %. Ce qui suit ne retire pas un mot : ça rend à la photo la place que la
   gouttière et les marges lui prenaient.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- 1. LES PHOTOS VONT D'UN BORD À L'AUTRE ----------
   ⚠️ C'EST LE GESTE QUI CHANGE LE PLUS LE REGISTRE, et il ne coûte aucun
   pixel de hauteur : une photo encadrée de 16 px de crème de chaque côté se
   lit comme une illustration dans un document ; la même, posée bord à bord,
   se lit comme une image. Le relevé du 26/10 comptait 2 images à fond perdu
   sur 157, et vingt règles qui posaient un filet autour des autres.
   ⚠️ L'ARCHE RESTE ENCADRÉE : sa forme EST le cadre, l'étendre aux bords la
   couperait sur les côtés et il ne resterait qu'un rectangle.
   ⚠️ La légende, elle, garde la gouttière : un texte collé au bord de l'écran
   se lit mal, et rien n'oblige la légende à suivre la photo. */
/* LES MARGES DES FIGURES SORTENT DU HTML, et passent AVANT la règle de bord
   à bord : à spécificité égale, c'est la dernière écrite qui gagne, et une
   marge nulle posée après aurait annulé la marge négative.
   ⛔ C'EST CE QUI A FAIT ÉCHOUER LE PREMIER BORD À BORD. Sept figures
   portaient `style="margin:0"` en attribut. Un style en ligne bat toute
   feuille sans `!important` : la largeur de la règle s'appliquait, la marge
   négative non, et la photo partait vers la droite au lieu de s'étendre vers
   la gauche. La page défilait de travers sur dix-huit formats sans qu'aucun
   contrôle de section ne le voie, parce que chaque section, prise seule,
   restait dans ses bornes.
   ⚠️ Le repère : une valeur posée en attribut n'est modifiable NI par une
   requête de média, NI par le Studio. Ce qui doit varier avec la largeur vit
   dans la feuille. */
.conteneur .grille > figure,
.conteneur figure.revendeurs__photo { margin: 0; }
.troupeau__nurserie { margin-inline: 0; margin-bottom: 0; }

/* ⛔ LA RÈGLE NE SORT QUE DU CONTENEUR, JAMAIS DE L'ÉCRAN. Premier jet :
   `.scene__media` figurait dans la liste. Or une scène n'est PAS dans
   `.conteneur` : elle occupe déjà toute la largeur, sa photo touchait déjà
   les deux bords. Lui ajouter deux gouttières l'a poussée de -16 px à
   droite comme à gauche, et la page s'est mise à défiler de travers sur les
   dix-huit formats, 221 débordements au balayage. ⚠️ Le repère à retenir :
   une photo se décale de la gouttière QUAND SON PARENT LA PORTE, et c'est
   `.conteneur` qui la porte. Le sélecteur le dit, plutôt qu'une liste de
   classes qu'il faut tenir à jour et vérifier une par une. */
@media (max-width: 760px) {
  .conteneur figure.magasin__photo,
  .conteneur figure.bloc-fin__photo,
  .conteneur figure.revendeurs__photo,
  .conteneur figure.troupeau__nurserie,
  .conteneur .grille > figure.c-5,
  .conteneur .grille > figure.c-6 {
    margin-inline: calc(-1 * var(--gouttiere));
    width: calc(100% + 2 * var(--gouttiere));
    max-width: none;
    border-radius: 0;
  }
  .conteneur figure.magasin__photo img,
  .conteneur figure.bloc-fin__photo img,
  .conteneur figure.revendeurs__photo img,
  .conteneur figure.troupeau__nurserie img,
  .conteneur .grille > figure.c-5 img,
  .conteneur .grille > figure.c-6 img {
    border-radius: 0; width: 100%;
  }
  .conteneur figure.magasin__photo figcaption,
  .conteneur figure.bloc-fin__photo figcaption,
  .conteneur figure.revendeurs__photo figcaption,
  .conteneur figure.troupeau__nurserie figcaption,
  .conteneur .grille > figure.c-5 figcaption,
  .conteneur .grille > figure.c-6 figcaption {
    padding-inline: var(--gouttiere);
  }
}

/* ---------- 2. LA CARTE PRATIQUE CESSE DE TENIR UN ÉCRAN ----------
   Trois entrées de huit mots occupaient 580 px sur un téléphone, soit les
   deux tiers d'un écran pour des horaires que le pied et la barre d'actions
   répètent déjà. Deux causes mesurées, toutes deux pensées pour le bureau :
   ⚠️ `min-height: 2.3em` sur le titre de chaque entrée. Il aligne les trois
   colonnes l'une sur l'autre quand elles sont CÔTE À CÔTE ; empilées, il
   ajoute une demi-ligne de vide sous chacune et n'aligne plus rien. La règle
   de la ligne 1611 s'en gardait déjà par un `min-width: 901px`, celle qui la
   répétait plus bas avait perdu sa garde.
   ⚠️ Le rembourrage vertical de `clamp(34px, 3.4vw, 56px)` : à 390 px le
   terme fluide vaut 13 px, donc c'est le plancher de 34 qui sort, calé pour
   un écran large. Le piège du plancher de clamp, déjà relevé le 27/10. */
@media (max-width: 900px) {
  .carte-pratique dd strong { min-height: 0; margin-bottom: 6px; }
  .carte-pratique > * { padding: 20px var(--gouttiere); }
  .carte-pratique dt { margin-bottom: 7px; }
}

/* ---------- 3. LA PHOTO INTERCALAIRE ----------
   Une photo posée AU MILIEU d'une colonne de texte, pas à côté. « Moi, c'est
   Laura » tenait deux écrans de téléphone pour un seul portrait, placé tout
   en haut : passé le premier écran, il ne restait que des paragraphes. Le
   relevé écran par écran le disait sans ambiguïté, deux écrans de suite à
   0 % d'image sur la page d'accueil.
   ⚠️ Elle respire des deux côtés, sinon elle se lit comme une illustration
   collée au paragraphe qui la précède plutôt que comme une respiration. */
.scene__intercalaire {
  margin: clamp(30px, 3.4vw, 52px) 0;
  border-radius: var(--rayon); overflow: hidden;
}
/* ⚠️ COUCHÉE DANS LA COLONNE, DEBOUT SUR LE TÉLÉPHONE. La photo est un
   portrait de 1080 par 1350 : posée telle quelle dans une colonne de 560 px,
   elle faisait 690 px de haut et prenait le pas sur le portrait de Laura qui
   tient la scène juste à côté. Le 4/3 en fait une respiration. Au téléphone,
   où elle est seule à l'écran et bord à bord, elle garde son format.
   ⚠️ ET LE CADRAGE REMONTE. Centré, le 3/2 coupait la tête de la fromagère
   et ne gardait que l'avant-bras : une photo tronquée au milieu du visage se
   lit comme un recadrage raté, pas comme un cadrage. Le 4/3 descendu à 18 %
   prend le visage, le bras, la louche et les moules, c'est-à-dire le geste
   entier. La zone est en pourcentage, jamais en pixels. */
.scene__intercalaire img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 18%;
}
@media (max-width: 760px) {
  .scene__intercalaire img { aspect-ratio: auto; height: auto; }
}
/* ⚠️ `.scene figure { margin: 0 }` vit plus haut dans la feuille et pèse plus
   lourd qu'une classe seule : la largeur passait, la marge négative non, et
   la photo sortait par la droite. Le sélecteur descend donc dans la scène. */
@media (max-width: 760px) {
  .scene figure.scene__intercalaire {
    margin-inline: calc(-1 * var(--gouttiere));
    width: calc(100% + 2 * var(--gouttiere));
    border-radius: 0;
  }
}

/* ---------- 4. LA DEVANTURE SOUS LES AVIS ----------
   ⚠️ CADRÉE, PAS LIBRE : la photo est un portrait de 1000 par 1333 et la
   colonne des avis fait 460 px sur grand écran. Laissée à son rapport, elle
   descendait 150 px plus bas que les trois témoignages d'à côté et tirait la
   section vers le bas. Le 4/5 garde la porte, l'enseigne et la plaque. */
.avis__photo {
  margin: clamp(26px, 2.6vw, 38px) 0 0;
  border-radius: var(--rayon); overflow: hidden;
}
/* ⚠️ UN SEUL RAPPORT, ET COUCHÉ. En 4/5 la colonne de gauche descendait
   400 px plus bas que les trois témoignages d'à côté, et la section se
   terminait sur un angle vide. Le 5/4 la ramène à hauteur, et le cadrage
   centré garde la porte, les deux pancartes et la plaque : ce qui part en
   haut, c'est l'enseigne, qui se lit déjà sur la photo du magasin. */
.avis__photo img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
@media (max-width: 760px) {
  .avis__photo {
    margin-inline: calc(-1 * var(--gouttiere));
    width: calc(100% + 2 * var(--gouttiere));
    border-radius: 0;
  }
}


/* ---------- 6. UN COURRIEL NE POUSSE PLUS SA CARTE HORS DE L'ÉCRAN ----------
   30/10/2026. Dernier débordement du site à 320 px, après celui du pied.
   `biquetteslarcheveque@gmail.com` ne porte aucun point de coupure : sa
   min-content vaut 256 px, et la carte sombre du contact n'offre que 264 px
   entre ses rembourrages, icône de 24 px et gouttière de 12 comprises. Le
   lien sortait donc de 24 px, et la page défilait de travers.
   ⚠️ `.coordonnees a` est un conteneur flex : son texte garde `min-width:
   auto` et refuse de rétrécir tant qu'on ne le libère pas. Les deux vont
   ensemble, comme pour toute carte qui déborde.
   ⚠️ La coupure ne se voit QUE quand elle sert : au-dessus de 320 px le
   courriel tient sur une ligne, et rien ne change. */
.coordonnees a, .coordonnees p { min-width: 0; }
.coordonnees a > span, .coordonnees p > span { min-width: 0; overflow-wrap: anywhere; }


/* ---------- LA BANDE ORPHELINE SOUS LA CARTE PRATIQUE (30/10/2026) ----------
   ⚠️ MESURE : la carte pratique, en aplat sombre, finissait a 1406 px ; sa
   section continuait jusqu'a 1450 en creme FONCE (237,233,226), puis la
   section suivante ouvrait sur 56 px de creme CLAIR (#F6F4F1). Deux cremes
   voisins separes par une ligne nette : l'oeil y lit une mini-section vide de
   100 px, et c'est exactement ce que Celestin a photographie.
   Sur telephone, l'aplat sombre touche donc le bas de sa section : la
   transition se fait d'un coup, du sombre au creme, sans bande intermediaire. */
@media (max-width: 760px) {
  .affiche { padding-bottom: 0; }
  .affiche .bande-infos { margin-bottom: 0; }
}


/* ---------- LA PHOTO DE LA FRISE FLOTTAIT AU MILIEU DU VIDE (30/10/2026) ----
   ⚠️ En colonne de droite sur grand ecran, elle passe sous la frise au
   telephone : centree, a 92vw, avec du creme tout autour et plus de 100 px de
   vide au-dessus et au-dessous. Une photo posee comme un timbre au centre
   d'une page ne porte rien, elle decore.
   Elle va d'un bord a l'autre, en bande : c'est le format qui dit un paysage,
   et le coteau du chemin de Fonteron en est un. */
@media (max-width: 760px) {
  .fond-lait .grille > figure.c-5 {
    margin-inline: calc(var(--gouttiere) * -1);
    margin-top: clamp(32px, 7vw, 56px);
  }
  .fond-lait .grille > figure.c-5 img {
    width: 100%; height: auto; aspect-ratio: 16 / 10;
    object-fit: cover; border-radius: 0 !important;
  }
}


/* ---------- LA FRISE REDEVIENT UNE CHRONOLOGIE (30/10/2026) ----------------
   ⚠️ Six etapes qui se suivent en date, titre, paragraphe, separees par des
   filets horizontaux : au telephone cela fait 1 300 px d'un mur de texte, et
   rien ne dit que ces six blocs forment une suite dans le temps. C'est le
   passage le plus plat de la page.
   Le filet vertical et les pastilles existaient, poses sur « .frise__date »,
   et ils avaient ete coupes le 26/10 parce qu'ils flottaient au bord droit
   apres un changement de gabarit : le principe etait bon, son accroche ne
   l'etait pas. Ils reviennent portes par la LIGNE, qui est le bon support,
   dans les deux gabarits.
   Les filets horizontaux partent : un filet vertical et des filets
   horizontaux font une grille, et une grille n'est pas une chronologie. */
.frise { padding-left: 28px; }
.frise li { border-top: 0; padding-block: clamp(16px, 2vw, 24px); }
.frise li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Le filet court de la premiere pastille a la derniere, jamais au-dela. */
.frise li::before {
  content: ''; display: block; position: absolute;
  left: -28px; top: 0; bottom: 0; width: 1px; background: var(--filet);
}
.frise li:first-child::before { top: .62em; }
.frise li:last-child::before { bottom: auto; height: .62em; }
/* La pastille se cale sur la premiere ligne de la date, pas sur la boite. */
.frise li::after {
  content: ''; display: block; position: absolute;
  left: -31.5px; top: .62em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--creme);
  box-shadow: inset 0 0 0 1px var(--olive);
}
/* L'etape de la reprise est le pivot de l'histoire : sa pastille est pleine. */
.frise li:nth-child(3)::after { background: var(--olive); }
@media (max-width: 760px) {
  .frise { padding-left: 24px; }
  .frise li::before { left: -24px; }
  .frise li::after { left: -27.5px; }
}


/* ---------- L'ANNONCE SUIT L'AXE DE SA SECTION (30/10/2026) ----------------
   « .sur-titre » est un flex, donc « text-align: center » ne l'atteint pas :
   c'est « justify-content » qui range ses enfants. Dans une scene centree, il
   se centre ; partout ailleurs il garde son depart a gauche. */
.masque .sur-titre, .titre-centre .sur-titre { justify-content: center; }


/* ---------- LA LIGNE D'HORAIRES QUI SE REPLIE (30/10/2026) -----------------
   ⚠️ MESURE : « Dimanche au mardi / la ferme travaille, magasin fermé » fait
   112 px au lieu de 56 a 320, 360 et 393 px, et ses deux cellules se
   recouvrent. Le gabarit du telephone passe la ligne en flex et pousse la
   valeur par « margin-left: auto » : quand elle ne tient plus, elle passe a la
   ligne EN RESTANT COLLEE A DROITE. Elle se lit alors comme un fragment
   orphelin, sous un filet qui parait dedouble. Le vendredi fait la meme chose
   des que sa pastille « aujourd'hui » elargit le jour.
   « space-between » tient les deux cas : cote a cote quand ca rentre, et la
   valeur au DEPART DE SA LIGNE quand elle se replie, la ou l'oeil la cherche. */
@media (max-width: 760px) {
  .horaires tr { justify-content: space-between; }
  .horaires td { margin-left: 0; }
  /* La phrase du repos n'est pas un horaire : elle se pose en note, discrete,
     sous son jour. */
  .horaires .repos td { font-size: 14.5px; opacity: .75; }
}


/* ═══ LA FOIRE AUX QUESTIONS SE REPLIE ══════════════════════════════════════
   ⚠️ MESURE DU 30/10/2026 : cinq questions ouvertes occupent 980 px au
   telephone, un ecran et demi sans une image ni rien a toucher. Repliees, on
   voit les cinq d'un coup et on ouvre celle qui concerne.
   « details » est natif : il marche sans JavaScript, les lecteurs d'ecran
   l'annoncent, et son texte RESTE DANS LE HTML, donc lisible par les moteurs
   comme par les assistants. Un repli ecrit en JavaScript aurait coute le
   referencement de ces reponses.
   ═══════════════════════════════════════════════════════════════════════════ */
.faq__item { padding: 0; border-top: 1px solid var(--filet); }
.faq > .faq__item:last-child { border-bottom: 1px solid var(--filet); }
.faq__item > summary {
  display: flex; align-items: baseline; gap: 18px; justify-content: space-between;
  padding: 20px 0; cursor: pointer; list-style: none;
  transition: color .3s var(--sortie);
}
/* Le triangle du navigateur est remplace par le signe dessine plus bas. */
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary h3 { margin: 0; font-size: clamp(18px, 1.5vw, 21px); }
.faq__item > summary:hover { color: var(--olive); }
.faq__item > summary:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
/* Le signe : deux traits, le vertical disparait a l'ouverture. Dessine plutot
   qu'importe, pour qu'il suive la couleur du texte et l'epaisseur du filet. */
.faq__item > summary::after {
  content: ''; flex: 0 0 auto; position: relative; top: -.1em;
  width: 13px; height: 13px; align-self: center;
  background:
    linear-gradient(currentColor, currentColor) center/13px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 13px no-repeat;
  opacity: .55; transition: transform .45s var(--sortie), opacity .3s ease;
}
.faq__item[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center/13px 1px no-repeat;
  transform: rotate(180deg); opacity: .85;
}
.faq__item > .faq__dit { padding: 0 0 22px; max-width: 46em; border-top: 0; }
.faq__dit p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] > .faq__dit { animation: faq-ouvre .45s var(--sortie); }
  @keyframes faq-ouvre { from { opacity: 0; transform: translateY(-6px); } }
}
/* La grille a deux colonnes n'a plus de sens : des lignes repliees se lisent
   d'affilee, et deux colonnes de questions font un formulaire. */
.faq { grid-template-columns: 1fr; margin-top: clamp(26px, 3vw, 36px); }


/* ---------- LE CHAMP, SOUS « LE FOIN VIENT D'ICI » (30/10/2026) -----------
   Elle coupe la plus longue traversee de la page et dit le propos : le foin
   pousse la. Bande large plutot que portrait, parce que c'est un paysage, et
   bord a bord au telephone comme les autres photos de la refonte. */
.champ-foin { margin: clamp(22px, 3vw, 34px) 0 0; }
.champ-foin img {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block; border-radius: var(--rayon);
}
@media (max-width: 760px) {
  .champ-foin {
    margin-inline: calc(var(--gouttiere) * -1);
  }
  .champ-foin img { border-radius: 0; aspect-ratio: 16 / 10; }
  .champ-foin figcaption { margin-inline: var(--gouttiere); }
}


/* ═══ L'APARTE QUI SE REPLIE SUR TELEPHONE ══════════════════════════════════
   Le signe n'apparait QUE lorsque le script a pris la main : sur grand ecran
   le bloc est ouvert et rien n'invite a cliquer, donc rien ne doit le laisser
   croire. C'est « data-replie » qui le dit, pose par app.js.
   ═══════════════════════════════════════════════════════════════════════════ */
.deplie > summary { list-style: none; }
.deplie > summary::-webkit-details-marker { display: none; }
.deplie:not([data-replie]) > summary { cursor: default; pointer-events: none; }
.deplie[data-replie] > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  cursor: pointer; padding: 9px 0 11px; min-height: 44px;
  transition: color .3s var(--sortie);
}
.deplie[data-replie] > summary:hover { color: var(--olive); }
.deplie[data-replie] > summary:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
.deplie[data-replie] > summary::after {
  content: 'Lire'; flex: 0 0 auto; align-self: center;
  font: 600 12px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive); border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.deplie[data-replie][open] > summary::after { content: 'Replier'; }
html[lang^="en"] .deplie[data-replie] > summary::after { content: 'Read'; }
html[lang^="en"] .deplie[data-replie][open] > summary::after { content: 'Close'; }
@media (prefers-reduced-motion: no-preference) {
  .deplie[open] > .deplie__dit { animation: faq-ouvre .45s var(--sortie); }
}


/* ---------- LES CIBLES TACTILES DES LIENS (30/10/2026) ---------------------
   Mesure au balayage : le lien-fleche fait 29 px de haut. On etend la ZONE,
   pas le dessin : le texte ne bouge pas.
   ⚠️ Le menu du telephone, lui, n'avait pas besoin d'aide : c'est un panneau
   a part, « .menu-mobile », dont les liens mesurent deja 52 a 55 px. Les
   26 px que le balayage signale appartiennent au menu horizontal, qui ne
   paraît qu'a partir de la tablette. */
@media (max-width: 760px) {
  .lien-fleche {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}


/* ═══ LE FILTRE PAR FAMILLE, SUR LA GAMME ═══════════════════════════════════
   Vingt-huit fiches deroulees font douze ecrans de telephone. Les familles
   existaient deja : la barre donne le moyen de n'en garder qu'une.
   ⚠️ Elle n'existe que si le script tourne, et c'est voulu : sans lui les
   vingt-huit fiches restent toutes la, dans leurs quatre familles. On perd le
   confort, jamais le contenu.
   ═══════════════════════════════════════════════════════════════════════════ */
.gamme-filtres {
  position: sticky; top: var(--entete-h); z-index: 20;
  /* Bord a bord : sans cela les fiches passent dessous par les cotes en
     defilant, et le filet ne traverse pas. */
  margin: clamp(26px, 3vw, 38px) calc(var(--gouttiere) * -1) clamp(14px, 2vw, 22px);
  padding: 10px var(--gouttiere) 11px;
  background: var(--creme);
  border-bottom: 1px solid var(--filet);
}
.gamme-filtres__rail {
  display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none;
  /* Les etiquettes touchent les bords de l'ecran plutot que de s'arreter a la
     gouttiere : on voit qu'il y en a d'autres a droite. */
  margin-inline: calc(var(--gouttiere) * -1);
  padding-inline: var(--gouttiere);
  -webkit-overflow-scrolling: touch;
}
.gamme-filtres__rail::-webkit-scrollbar { display: none; }
.gamme-filtre {
  flex: 0 0 auto; min-height: 44px; padding: 10px 17px;
  font: 600 12.5px/1.2 var(--f-texte); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cendre); background: none; cursor: pointer;
  border: 1px solid var(--filet); border-radius: var(--rayon-pilule);
  transition: color .3s var(--sortie), border-color .3s var(--sortie), background-color .3s var(--sortie);
}
.gamme-filtre:hover { color: var(--brun-noir); border-color: var(--brun-noir); }
.gamme-filtre:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
/* L'etiquette retenue : aplat sombre, comme la carte pratique. Un seul code
   de selection sur tout le site. */
.gamme-filtre[aria-pressed="true"] {
  color: var(--creme); background: var(--brun-noir); border-color: var(--brun-noir);
}
/* La famille masquee l'est par l'attribut « hidden » : on le rend effectif
   meme quand une regle d'affichage l'emporterait. */
.gamme-famille[hidden] { display: none; }
@media (max-width: 760px) {
  .gamme-filtres { top: calc(var(--entete-h) - 1px); }
  .gamme-filtre { padding: 10px 14px; font-size: 12px; letter-spacing: .08em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE DU 30/10/2026 : LA CARTE PRATIQUE DEVIENT TROIS BULLES
   Célestin : la bande sombre d'un bord à l'autre fait pâté. Elle se coupe en
   trois cartes posées côte à côte, arrondies et moins hautes. Trois objets
   légers se survolent du regard, un bloc plein se subit.
   ⚠️ Le fond quitte le conteneur pour aller sur chaque cellule, sinon le gap
   laisserait voir le sombre entre les bulles et rien n'aurait changé.
   ═══════════════════════════════════════════════════════════════════════════ */
.carte-pratique {
  background: none;
  gap: clamp(10px, 1.1vw, 18px);
  align-items: stretch;
}
.carte-pratique > * {
  background: var(--brun-noir);
  border-radius: clamp(16px, 1.5vw, 24px);
  padding: clamp(22px, 2.1vw, 32px) clamp(20px, 2vw, 28px);
}
/* Les filets séparaient les colonnes d'une bande. Entre deux bulles, c'est le
   vide qui sépare : le filet redoublerait le geste. */
.carte-pratique > * + *::before { content: none; }
.carte-pratique > * + * { border-left: 0; border-top: 0; }

/* La bulle est fine : le titre descend d'un cran et l'étiquette se resserre
   sur lui. Mesuré à 1440 px, la carte passe de 212 à 150 px de haut. */
.carte-pratique dt { margin-bottom: 9px; }
.carte-pratique dd strong {
  font-size: clamp(18px, 1.45vw, 23px); line-height: 1.22; margin-bottom: 7px;
}
.carte-pratique dd { font-size: 14px; }
/* Le titre tient sur une ligne à cette taille, dans les deux langues : la
   réserve de deux lignes posait une demi-ligne de vide sous chaque bulle. */
@media (min-width: 901px) { .carte-pratique dd strong { min-height: 0; } }

@media (max-width: 900px) {
  .carte-pratique > * { padding: 18px 22px; }
  .carte-pratique { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE DU 30/10/2026 : LE MOT GÉANT REDESCEND
   Célestin : à 188 px le mot passe sur deux lignes et devient grossier, sur un
   site de fromages de chèvre. Il garde sa matière, il perd son tapage : une
   seule ligne, à une taille d'affiche et non de panneau.
   La matière se lit encore à 86 px, vérifié sur la photo assombrie.
   ═══════════════════════════════════════════════════════════════════════════ */
.masque__mot {
  font-size: clamp(34px, 6.2vw, 86px); line-height: 1.02;
  letter-spacing: .02em; text-wrap: balance;
}
/* Le cadrage de la matière suit la taille : à 150 % le grain devenait trop
   large pour des lettres deux fois plus petites. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .masque__mot { background-size: 118% auto; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes matiere-respire { from { background-size: 118% auto; } to { background-size: 130% auto; } }
  }
}
@media (max-width: 900px) {
  .masque__mot { font-size: clamp(34px, 9vw, 60px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE DU 30/10/2026 : LES TITRES REDESCENDENT À LEUR LIGNE
   Célestin : un titre qui casse sur deux ou trois lignes fait grossier. Quatre
   réglages mesurés à 1440 px, pas une impression :
   le nom passe de 78 à 68 px (le plafond de la maison), les bannières de 72 à
   64, les titres forts de 66 à 54, le mot géant de 86 à 76.
   ⛔ LE BUG QUI RENDAIT LE PREMIER RÉGLAGE INUTILE. `--affiche` est déclarée
   sur :root avec `var(--affiche-taille, …)` : la substitution se fait LÀ, donc
   au niveau de :root, où --affiche-taille n'existe pas. Les deux redéfinitions
   posées sur .hero__grand (74 px sur bureau, 62 px sur téléphone) n'ont jamais
   rien changé, et c'est le repli de 5,4vw qui sortait partout. La taille se
   pose donc en clair sur l'élément.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero__grand { font-size: clamp(30px, 4.6vw, 68px); }
@media (max-width: 900px) { .hero__grand { font-size: clamp(31px, 9.4vw, 54px); } }

.banniere h1 { font-size: clamp(30px, 4.4vw, 64px); }

/* Le titre fort cessait de tenir sur sa colonne : « Le lait commande le
   calendrier » prenait trois lignes dans 598 px. À 54 il en prend deux, et les
   titres courts gardent leur ligne unique. */
.titre-fort { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.03; }

/* Le mot géant repasse sous le nom de la ferme : rien ne doit crier plus fort
   que la marque sur sa propre page. */
.masque__mot { font-size: clamp(34px, 5.4vw, 76px); }
@media (max-width: 900px) { .masque__mot { font-size: clamp(32px, 8.4vw, 56px); } }

/* La section du mot tenait 577 px pour trente mots. Elle se resserre : l'air
   qui entoure une phrase courte doit rester proportionné à la phrase. */
.manifeste.masque { padding-block: clamp(3rem, 7vw, 7rem); }
.masque__dit { margin-top: clamp(20px, 2.2vw, 32px); }

/* Le titre de bloc vit dans une colonne de 491 à 562 px, à côté d'une photo :
   à 46 px il y prenait trois lignes. Son plafond descend à 38, mesuré sur les
   trois plus longs du site. Le h2 pleine largeur, lui, garde ses 44. */
.titre-bloc { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.12; }

/* Les bulles s'affinent d'un dernier cran : le vide interne descend de 32 à 26,
   l'étiquette se colle à son titre. 139 px de haut au lieu de 212 au départ. */
.carte-pratique > * { padding: clamp(20px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px); }
.carte-pratique dt { margin-bottom: 8px; }
.carte-pratique dd strong { margin-bottom: 5px; }

/* Une phrase courte et centrée finissait sur un mot seul. `pretty` règle la
   dernière ligne sans toucher aux autres. */
.masque__dit, .exergue-citation p, blockquote p { text-wrap: pretty; }

/* ---------- LES BULLES RENTRENT DANS LA GOUTTIÈRE SUR TÉLÉPHONE ----------
   ⚠️ `.affiche .bande-infos` renonce à son rembourrage pour que la BANDE se
   cale au pixel sur la colonne de texte à partir de 1240 px. Sous cette
   largeur, le max-width ne mord plus et la règle envoyait les bulles bord à
   bord : leurs coins arrondis se faisaient couper par l'écran, et elles
   commençaient 30 px avant le nom de la ferme. */
@media (max-width: 1280px) { .affiche .bande-infos { padding-inline: var(--gouttiere); } }

/* Le nom tombait en trois lignes avec « DE » seul au milieu. Il tient en deux,
   une par moitié, comme sur bureau. */
@media (max-width: 900px) { .hero__grand { font-size: clamp(27px, 7.9vw, 46px); } }

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE DU 30/10/2026 : UN CRAN D'AIR EN MOINS, PAS UN MOT EN MOINS
   Célestin : alléger un peu les pages longues, sans rien retirer. Le relevé
   écran par écran dit où va la hauteur sur téléphone : nos chèvres tient
   13,5 écrans, dont 4 700 px de photos et 6 200 px de texte. Il n'y a donc
   pas de gras à couper, seulement de l'air à resserrer, et les photos ne se
   recadrent pas. Trois réglages, aucun contenu touché.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. L'AIR DES SECTIONS. Sur bureau il valait 158 px au-dessus et au-dessous,
      et le plancher de 56 px sortait sur tout téléphone (le terme fluide n'y
      vaut que 43 px). Un cran plus bas des deux côtés. */
:root { --air-m: clamp(2.9rem, 10vw, 10rem); --air-l: clamp(3.6rem, 16vw, 14rem); }

/* 2. LES BANDES PHOTO. 473 px sur un écran de 844, pour une phrase : elles
      ponctuent la page, elles n'ont pas à en prendre six dixièmes. */
@media (max-width: 900px) {
  .bande { min-height: clamp(330px, 48svh, 560px); }
  .banniere { height: 50svh; min-height: 340px; }
  .banniere--courte { height: 43svh; min-height: 300px; }
}

/* 3. LE CORPS SUR TÉLÉPHONE. L'interligne de 1,55 et la marge de 1em entre
      paragraphes ont été calés sur une colonne d'écran large. Sur 390 px, une
      page de 1 500 mots porte 220 lignes : chaque dixième d'interligne y pèse
      près de 200 px. 1,5 reste le repère de lisibilité, et la marge entre
      paragraphes garde une ligne pleine de respiration. */
@media (max-width: 760px) {
  body { line-height: 1.5; }
  p { margin-bottom: .9em; }
  .chapo { line-height: 1.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES FONDS SOMBRES QUITTENT LE SITE (3 novembre 2026)
   Demande de Célestin : « change les fonds de sections noires, je n'en veux
   pas dans ce site, laisse blanc et 1 section vert claire ». Les cinq
   sections en `fond-foret` (l'année d'une chèvre, la chronique, la journée à
   la ferme, la fabrication, la saison du magasin) passent en lait et sable,
   en alternance avec leurs voisines. Le vert pastel ne reste qu'aux avis de
   l'accueil, plus le pied sur toutes les pages.
   Ce qui suit rattrape les éléments qui comptaient sur un fond sombre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ UN DISQUE PLEIN, PAS UN CONTOUR CLAIR. Les flèches de la pellicule
   étaient en craie sur un contour translucide, juste tant que la bande vivait
   sur fond forêt. Sur du sable, elles disparaissaient ; posées par-dessus les
   photos du rail, un contour clair ne tiendrait pas davantage. Le disque crème
   se lit sur les deux. */
.rail-fleche {
  background: rgba(250, 248, 243, .94); color: var(--foret);
  border: 1px solid rgba(31, 35, 29, .12);
  box-shadow: 0 2px 10px rgba(31, 35, 29, .18);
}
.rail-fleche:hover, .rail-fleche:focus-visible { background: var(--foret); color: var(--craie); border-color: var(--foret); }
.rail-fleche[disabled] { opacity: .35; }
.rail-fleche[disabled]:hover { background: rgba(250, 248, 243, .94); color: var(--foret); border-color: rgba(31, 35, 29, .12); }

/* ---------- Les cinq services du magasin, trois puis deux, centrés ----------
   Demande de Célestin, 03/11/2026 : « remets en place comme sur la photo,
   3 en haut 2 en bas mais centré au milieu de section ». Ils vivaient dans la
   colonne de sept, sous le tableau des horaires : deux colonnes étroites, six
   rangs de texte serré, et toute la moitié droite de la section vide une fois
   la photo terminée. Ils sortent de la colonne et prennent la largeur.
   ⚠️ EN FLEX, PAS EN GRILLE. Cinq cases sur une grille de trois colonnes
   laissent un trou à droite du dernier rang. Le flux en ligne, lui, centre les
   deux qui restent sous les trois du haut : c'est exactement ce qui est
   demandé, et cela tient quel que soit le nombre de services. */
.pratique-rang { margin-top: clamp(30px, 3.4vw, 48px); }
.pratique-rang .pratique {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: clamp(28px, 3.4vw, 56px); row-gap: 0;
  margin-top: 0;
}
.pratique-rang .pratique > li { flex: 0 1 calc(33.333% - clamp(28px, 3.4vw, 56px)); min-width: 0; }
@media (max-width: 900px) { .pratique-rang .pratique > li { flex-basis: calc(50% - clamp(28px, 3.4vw, 56px)); } }
@media (max-width: 560px) { .pratique-rang .pratique > li { flex-basis: 100%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   L'ACCUEIL, TEL QUE LAURA L'A VU AU PREMIER CONTACT (30/10/2026)

   Demande de Laura, par Célestin : retrouver l'accueil de la première version,
   celui de apercus.caelestis.fr/biquettes-archeveque/. Les neuf blocs de cette
   page, avec leurs textes, dans l'ordre : le héros et sa carte pratique,
   « Bienvenue chez les biquettes », « Du frais au sec », l'ardoise du magasin,
   la phrase de Laura, les avis, les réseaux, les horaires et le formulaire.
   L'en-tête et le pied restent ceux de la v2.

   COMMENT CELA TIENT SANS TOUCHER LE RESTE DU SITE
   Le balisage de l'accueil porte les classes de la v1 sous le préfixe `av1-`, et
   cette feuille est chargée APRÈS direction.css. Elle n'est pas écrite à la main :
   chaque règle de src/style.css qui vise une de ces classes est reprise telle
   quelle, avec le préfixe. direction.css ne cible aucune classe `av1-`, donc rien
   ne se bat, et les autres pages ne changent pas d'un pixel.

   ⚠️ Ce qui reste hors du préfixe, exprès : `conteneur`, `ico`, `hors-ecran`,
   `apparait`, `fond-*` (le Studio les échange), `aujourdhui` et `en-cours` (le
   JS les pose). Les sélecteurs de app.js qui visent `.horaires`, `.carte` et
   `.formulaire__message` reconnaissent aussi leur jumeau `av1-`.
   ═══════════════════════════════════════════════════════════════════════════ */

.av1 {
  --pad-s: clamp(40px, 2.6vw + 28px, 80px);
  --pad-m: clamp(48px, 7vw + 16px, 136px);
  --pad-l: clamp(56px, 9vw + 20px, 180px);
  --rayon: 0px;
  --rayon-champ: 4px;
  background: var(--lait);
  color: var(--encre);
  font: 400 17px/1.55 var(--f-texte);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ⚠️ PAS DE RÈGLE `.av1 p` : la marge de base des paragraphes vient de la feuille v1
   plus haut, à spécificité zéro. Une règle `.av1 p` (0,1,1) battrait les marges de
   chaque composant (100 px de blanc sous la note 4,8/5 au premier essai). */
.av1 h1, .av1 h2, .av1 h3 {
  font-family: var(--f-titre); font-weight: 700; margin: 0; text-wrap: balance;
  text-transform: none; font-style: normal; color: inherit;
}
.av1 h1 { font-size: clamp(38px, 4.7vw, 68px); line-height: .96; letter-spacing: -.022em; }
.av1 h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.04; letter-spacing: -.016em; }
.av1 h3 { font-size: clamp(21px, 1.6vw, 24px); line-height: 1.18; letter-spacing: -.005em; }
.av1 strong, .av1 b { font-weight: 600; }

/* ---------- les fonds, rendus à la v1 (le Studio échange ces classes) ---------- */
.av1 .fond-lait { background: var(--lait); }
.av1 .fond-sable { background: var(--sable); }
.av1 .fond-vert { background: var(--vert-pastel); }
.av1 .fond-foret { background: var(--foret); color: var(--craie); }
.av1 .fond-encre { background: var(--encre); color: var(--craie); }
.av1 .fond-foret h2, .av1 .fond-foret h3, .av1 .fond-encre h2, .av1 .fond-encre h3 { color: var(--blanc); }

/* ---------- ce que la v1 a écrit, règle par règle ---------- */
.av1-section { position: relative; padding-block: var(--pad-m); }
.av1-section--l { padding-block: var(--pad-l); }
.fond-foret .av1-chapo, .fond-encre .av1-chapo, .fond-foret .av1-hero__chapo, .fond-encre .av1-hero__chapo, .fond-foret .av1-texte-cendre, .fond-encre .av1-texte-cendre, .fond-foret .av1-gamme__intro p, .fond-encre .av1-gamme__intro p, .fond-foret .av1-carte-infos__bloc p, .fond-encre .av1-carte-infos__bloc p, .fond-foret .av1-carte-infos__avis span, .fond-encre .av1-carte-infos__avis span, .fond-foret .av1-avis__volume, .fond-encre .av1-avis__volume { color: #C9CCC2; }
.fond-foret .av1-chiffre-phrase, .fond-encre .av1-chiffre-phrase, .fond-foret .av1-avis__volume a, .fond-encre .av1-avis__volume a { color: var(--craie); }
.av1-grain { position: relative; isolation: isolate; }
.av1-grain::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.av1-ardoise { display: inline-flex; align-items: center; gap: 9px; background: var(--encre); color: var(--craie); font: 700 15px/1.2 var(--f-titre); letter-spacing: .005em; padding: 7px 14px 8px 11px; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(242, 241, 231, .14); }
.av1-ardoise::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--feuille-clair); }
.av1-ardoise--claire { background: var(--lait); color: var(--encre); box-shadow: inset 0 0 0 1px rgba(30, 34, 25, .18); }
.av1-ardoise--claire::before { background: var(--feuille); }
.av1-ardoise--nue::before { display: none; }
.av1-ardoise--nue { padding-left: 14px; }
.av1-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px/1.1 var(--f-texte); letter-spacing: .005em; padding: 15px 24px; border-radius: 2px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.av1-bouton--plein { background: var(--foret); color: var(--craie); }
.av1-bouton--plein:hover { background: var(--foret-fonce); }
.fond-foret .av1-bouton--plein, .fond-encre .av1-bouton--plein, .av1-carte--foret .av1-bouton--plein, .av1-signature__carte .av1-bouton--plein, .banniere .av1-bouton--plein { background: var(--craie); color: var(--foret); }
.fond-foret .av1-bouton--plein:hover, .fond-encre .av1-bouton--plein:hover, .av1-carte--foret .av1-bouton--plein:hover, .av1-signature__carte .av1-bouton--plein:hover, .banniere .av1-bouton--plein:hover { background: var(--blanc); color: var(--foret-fonce); }
.av1-bouton--plein { background: var(--foret); color: var(--blanc); }
.av1-bouton--plein:hover { background: var(--foret-fonce); }
.av1-bouton--ligne { border-color: currentColor; background: transparent; }
.av1-bouton--ligne:hover { background: var(--encre); color: var(--craie); border-color: var(--encre); }
.fond-foret .av1-bouton--ligne:hover, .fond-encre .av1-bouton--ligne:hover, .av1-carte--foret .av1-bouton--ligne:hover, .banniere .av1-bouton--ligne:hover { background: var(--craie); color: var(--foret); border-color: var(--craie); }
.av1-lien-fleche { display: inline-flex; align-items: center; font-weight: 600; color: var(--feuille); text-decoration: none; border-bottom: 1.5px solid rgba(78, 118, 38, .35); padding-bottom: 2px; transition: border-color .2s ease; }
.av1-lien-fleche:hover { border-color: var(--feuille); }
.fond-foret .av1-lien-fleche, .fond-encre .av1-lien-fleche, .fond-encre .av1-lien-fleche, .fond-encre .av1-lien-fleche { color: var(--feuille-clair); border-color: rgba(180, 216, 76, .42); }
.av1-hero { position: relative; overflow: hidden; background: var(--lait); }
.av1-hero__media { position: relative; height: clamp(420px, 44vw, 720px); }
.av1-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.av1-hero__etiquette { position: absolute; left: 0; right: 0; top: clamp(18px, 2.2vw, 34px); }
.av1-hero__contenu { padding-block: clamp(34px, 3.6vw, 60px) 0; }
.av1-hero__texte { max-width: 44em; margin-inline: auto; text-align: center; }
.av1-hero h1 { margin: 0 0 14px; font-size: clamp(34px, 4.4vw, 62px); }
.av1-hero__chapo { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; max-width: 32em; margin-inline: auto; color: var(--cendre); }
.av1-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .js .av1-hero__media img { animation: hero-zoom 2.4s cubic-bezier(.16, 1, .3, 1) both; }
}
.av1-carte-infos { position: relative; z-index: 5; margin-top: clamp(26px, 2.6vw, 38px); display: grid; grid-template-columns: 1.3fr 1.05fr 1.15fr .8fr; gap: 0; background: var(--lait); border-radius: 0; border: var(--filet-net); }
.av1-carte-infos__bloc { padding: 24px 24px; display: flex; gap: 12px; align-items: flex-start; }
.av1-carte-infos__bloc + .av1-carte-infos__bloc { border-left: 1px solid var(--filet); }
.av1-carte-infos__bloc .ico { color: var(--feuille); margin-top: 3px; }
.av1-carte-infos__titre { display: block; font: 700 16.5px/1.25 var(--f-titre); margin-bottom: 4px; }
.av1-carte-infos__bloc p { font-size: 15px; line-height: 1.5; color: var(--cendre); margin: 0; }
.av1-carte-infos__bloc a { color: var(--feuille); font-weight: 600; text-decoration: none; }
.av1-carte-infos__bloc a:hover { text-decoration: underline; }
.av1-carte-infos__laura img { width: 64px; height: 64px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--filet); }
.av1-note { display: inline-flex; align-items: center; gap: 3px; font: 700 26px/1 var(--f-titre); color: var(--encre); }
.av1-note .ico { width: 18px; height: 18px; color: var(--feuille); margin: 0; }
.av1-carte-infos__avis { flex-direction: column; justify-content: center; gap: 6px; text-decoration: none; transition: background-color .2s ease; border-radius: 0; }
.av1-carte-infos__avis:hover { background: var(--sable); }
.av1-carte-infos__avis span { font-size: 15px; color: var(--cendre); }
@media (max-width: 1100px) {
  .av1-carte-infos { grid-template-columns: 1fr 1fr; }
  .av1-carte-infos__bloc:nth-child(3) { border-left: 0; }
  .av1-carte-infos__bloc:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .av1-carte-infos__avis { border-radius: 0; }
}
@media (max-width: 720px) {
  .av1-hero__media { height: auto; }
  .av1-hero__media img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .av1-hero__etiquette { position: static; margin-top: 18px; }
  .av1-hero__texte { text-align: left; }
  .av1-hero__actions { justify-content: stretch; }
  .av1-hero h1 { text-shadow: none; margin-top: 18px; }
  .av1-hero__chapo { text-shadow: none; }
  .av1-hero__actions .av1-bouton { flex: 1 1 100%; }
  .av1-carte-infos { grid-template-columns: 1fr; margin-top: 24px; }
  .av1-carte-infos__bloc { padding: 20px; }
  .av1-carte-infos__bloc + .av1-carte-infos__bloc { border-left: 0; border-top: 1px solid var(--filet); }
  .av1-carte-infos__avis { border-radius: 0; flex-direction: row; align-items: center; gap: 12px; }
}
.av1-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 40px; align-items: center; }
.av1-c-7 { grid-column: span 7; }
.av1-c-6 { grid-column: span 6; }
.av1-c-5 { grid-column: span 5; }
.av1-c-4 { grid-column: span 4; }
.av1-c-8 { grid-column: span 8; }
.av1-aligne-haut { align-items: start; }
@media (max-width: 900px) {
  .av1-grille > * { grid-column: 1 / -1 !important; }
}
.av1-chapo { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--encre); }
.av1-texte-cendre { color: var(--cendre); }
.av1-bienvenue { padding-top: calc(var(--pad-m) + 8px); }
.av1-bienvenue h2 { margin-bottom: 22px; }
.av1-labels { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 30px; padding: 16px 0; border-block: 1px solid var(--filet); font-size: 15px; }
.av1-labels span { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.av1-labels .ico { color: var(--feuille); }
main .av1-labels { justify-content: flex-start; align-items: center; text-align: left; }
.label-bienvenue { display: block; width: 140px; height: auto; margin-left: auto; }
.av1-duo-photos { position: relative; padding-bottom: 72px; }
.av1-duo-photos__grande { border-radius: 0; border: var(--filet-net); }
.av1-duo-photos__petite { position: absolute; left: -24px; bottom: 0; width: 56%; border: 6px solid var(--lait); border-radius: 0; border: var(--filet-net); }
.av1-duo-photos .av1-ardoise { position: absolute; right: 18px; top: -16px; }
/* 03/11/2026 : Laura a retiré la petite photo de mise bas, et le duo est devenu
   une photo seule. Sans ce modificateur, les 72 px réservés au cliché
   superposé restaient en blanc sous l'image, et la colonne de droite finissait
   plus bas que son texte. */
.av1-duo-photos--seule { padding-bottom: 0; }
@media (max-width: 900px) {
  .av1-duo-photos__petite { left: -8px; width: 52%; }
}
.av1-gamme { overflow: hidden; }
.av1-gamme h2 { margin-bottom: 20px; }
.av1-gamme__intro p { color: var(--cendre); }
.av1-gamme__intro .av1-chiffre-phrase { color: var(--encre); }
.av1-chiffre-phrase strong { font: 700 1.9em/1 var(--f-titre); color: var(--feuille); letter-spacing: -.01em; }
.fond-foret .av1-chiffre-phrase strong, .fond-encre .av1-chiffre-phrase strong { color: var(--feuille-clair); }
.av1-gamme__vitrine { margin-top: 0; position: relative; }
.av1-gamme__vitrine img { border-radius: 0; }
.av1-gamme__vitrine .av1-ardoise { position: absolute; left: 0; bottom: 0; }
.av1-tableau-noir { position: relative; }
.av1-tableau-noir__surface { position: relative; isolation: isolate; background: var(--encre); padding: clamp(32px, 3.8vw, 56px) clamp(24px, 3.6vw, 56px); box-shadow: inset 0 0 0 1px rgba(242, 241, 231, .12); }
.av1-tableau-noir__titre { font: 700 clamp(24px, 2.2vw, 32px)/1.1 var(--f-titre); color: var(--craie); text-align: center; margin: 0 0 6px; }
.av1-tableau-noir__sous { text-align: center; color: rgba(242, 239, 232, .62); font-size: 15px; margin: 0 0 28px; }
.av1-tableau-noir__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.av1-tableau-noir__liste li { border-top: 1px solid rgba(242, 241, 231, .2); padding-top: 14px; }
.av1-tableau-noir__liste h3 { font-size: 20px; color: var(--craie); margin-bottom: 6px; }
.av1-tableau-noir__liste p { color: rgba(242, 239, 232, .7); font-size: 15px; line-height: 1.5; margin: 0; }
.av1-tableau-noir__pied { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(242, 241, 231, .2); text-align: center; color: rgba(242, 239, 232, .78); font-size: 15px; }
.av1-tableau-noir__pied strong { color: var(--feuille-clair); font-weight: 600; }
@media (max-width: 640px) {
  .av1-tableau-noir__liste { grid-template-columns: 1fr; }
}
.av1-signature { padding-block: var(--pad-l); overflow: hidden; }
.av1-signature__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.av1-signature__photo { grid-column: 4 / -1; grid-row: 1; margin-right: calc(-1 * max(var(--gouttiere), (100vw - var(--conteneur)) / 2)); position: relative; overflow: hidden; border-radius: 0; }
.av1-signature__photo img { width: 100%; transform: scale(1.08); will-change: transform; }
/* ⚠️ L'ÉTIQUETTE SE POSE À CÔTÉ DU CLOCHER, ET SES COORDONNÉES SUIVENT LA
   PHOTO. Elle était calée à 9 % du haut et 28 % de la droite : sur la photo
   d'automne d'alors, cela la posait exactement contre le clocher, et c'est
   tout l'intérêt d'une légende qui dit « le clocher du village ». Laura a
   changé de photo depuis le Studio le 30/10/2026, le clocher est descendu au
   tiers gauche, et l'étiquette est restée seule dans le bleu : d'où son retour
   du 03/11, « déplacer la légende du clocher car j'ai changé de photo ».
   Ces valeurs visent SA photo. Une autre photo demandera de les reprendre,
   c'est le prix d'une légende qui désigne un point précis plutôt qu'un coin.
   ⚠️ LES MÊMES EN TÉLÉPHONE : l'image n'est pas recadrée, elle est seulement
   mise à l'échelle (`width: 100%`), donc un pourcentage tombe au même endroit
   de la photo quelle que soit la largeur. La parallaxe ne la déplace que de
   24 px au plus (voir app.js). */
.av1-signature__photo .av1-ardoise { position: absolute; bottom: 18px; left: 50%; top: auto; transform: translateX(-50%); }
.av1-signature__carte { grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 2; background: var(--foret); color: var(--craie); padding: clamp(28px, 3.5vw, 56px); border-radius: 0; border: var(--filet-net); }
.av1-signature__carte blockquote { margin: 0 0 22px; font: 400 clamp(24px, 2.2vw, 32px)/1.25 var(--f-titre); color: var(--blanc); letter-spacing: -.01em; }
.av1-signature__carte blockquote::before { content: "«\00a0"; color: var(--feuille-clair); }
.av1-signature__carte blockquote::after { content: "\00a0»"; color: var(--feuille-clair); }
.av1-signature__source { font-size: 15px; color: rgba(242, 239, 232, .75); margin-bottom: 26px; }
.av1-signature__source strong { color: var(--craie); }
@media (max-width: 900px) {
  .av1-signature__photo { grid-column: 1 / -1; margin-right: calc(-1 * var(--gouttiere)); }
  /* Sur un téléphone l'étiquette tient presque toute la largeur de la photo :
     elle passe SOUS le clocher plutôt qu'à côté, sinon elle sort du cadre. */
  .av1-signature__photo .av1-ardoise { left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); }
  .av1-signature__carte { grid-column: 1 / -1; grid-row: 2; margin-top: -48px; margin-inline: 8px; }
}
.av1-avis__note { margin: 0; font: 400 clamp(64px, 7vw, 104px)/.9 var(--f-titre); letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 6px; }
.av1-avis__note .ico { width: clamp(32px, 3vw, 44px); height: clamp(32px, 3vw, 44px); color: var(--feuille); }
.av1-avis__volume { font-size: 18px; margin: 14px 0 26px; color: var(--cendre); }
.av1-avis__volume a { color: var(--encre); }
.av1-avis__liste li { padding-block: 26px; border-top: 1px solid var(--filet); }
.av1-avis__liste li:last-child { border-bottom: 1px solid var(--filet); }
.av1-avis__liste blockquote { margin: 0 0 10px; font: 400 clamp(20px, 1.7vw, 25px)/1.35 var(--f-titre); }
.av1-avis__liste blockquote::before { content: "«\00a0"; color: var(--feuille); }
.av1-avis__liste blockquote::after { content: "\00a0»"; color: var(--feuille); }
.av1-avis__meta { font-size: 14px; color: var(--cendre); display: flex; align-items: center; gap: 8px; }
.av1-etoiles { display: inline-flex; gap: 1px; color: var(--feuille); }
.fond-encre .av1-etoiles, .fond-foret .av1-etoiles, .fond-encre .av1-etoiles, .fond-encre .av1-etoiles { color: var(--feuille-clair); }
.av1-etoiles .ico { width: 14px; height: 14px; }
.av1-prepied__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.av1-carte { background: var(--lait); border-radius: 0; padding: clamp(24px, 3vw, 44px); border: var(--filet-net); }
.av1-carte--foret { background: var(--foret); color: var(--craie); }
.av1-carte h2 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 22px; }
.av1-horaires { width: 100%; border-collapse: collapse; font-size: 16px; margin-bottom: 24px; }
.av1-horaires th { text-align: left; font-weight: 500; padding: 9px 0; }
.av1-horaires td { text-align: right; padding: 9px 0; font-variant-numeric: tabular-nums; }
.av1-horaires tr + tr th, .av1-horaires tr + tr td { border-top: 1px solid var(--filet-clair); }
.av1-horaires .repos td { opacity: .7; }
.av1-horaires tr.aujourdhui th, .av1-horaires tr.aujourdhui td { font-weight: 700; }
@media (max-width: 560px) {
  .av1-horaires { font-size: 15px; }
  .av1-horaires tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .av1-horaires th { flex: 1 1 auto; padding-bottom: 2px; }
  .av1-horaires td { margin-left: auto; white-space: nowrap; padding-top: 2px; }
  .av1-horaires tr + tr th, .av1-horaires tr + tr td { border-top: 0; }
  .av1-horaires tr + tr { border-top: 1px solid var(--filet-clair); }
  .av1-horaires .repos td { white-space: normal; }
}
.av1-horaires tr.aujourdhui th::after { content: "aujourd’hui"; margin-left: 10px; font: 600 11px/1 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; background: var(--feuille-clair); color: var(--encre); padding: 4px 7px; border-radius: var(--rayon-pilule); vertical-align: 2px; }
.av1-coordonnees { display: grid; gap: 12px; margin-bottom: 26px; }
.av1-coordonnees a, .av1-coordonnees p { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; margin: 0; }
.av1-coordonnees a:hover { text-decoration: underline; }
.av1-coordonnees .ico { margin-top: 3px; color: var(--feuille-clair); }
.av1-carte--foret .av1-bouton { margin-right: 10px; margin-top: 6px; }
.av1-formulaire { display: grid; gap: 16px; }
.av1-formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.av1-champ label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.av1-champ label span { font-weight: 400; color: var(--cendre); }
.av1-champ input, .av1-champ select, .av1-champ textarea { width: 100%; padding: 13px 14px; border: 1.5px solid rgba(30, 34, 25, .22); border-radius: var(--rayon); background: var(--blanc); font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.av1-champ textarea { min-height: 140px; resize: vertical; }
.av1-champ input:focus, .av1-champ select:focus, .av1-champ textarea:focus { outline: none; border-color: var(--foret); box-shadow: 0 0 0 3px rgba(78, 118, 38, .18); }
.av1-consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--cendre); }
.av1-consentement input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--foret); flex: none; }
.av1-formulaire__message { display: none; padding: 14px 16px; background: var(--sable); border-left: 3px solid var(--feuille); color: var(--foret-fonce); font-weight: 500; }
.av1-formulaire__message.visible { display: block; }
@media (max-width: 900px) {
  .av1-prepied__grille { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .av1-formulaire__ligne { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .barre-mobile .av1-bouton { padding: 13px 10px; }
  .barre-mobile .av1-bouton--ligne { border-color: var(--foret); color: var(--foret); }
}
.portrait__photo .av1-ardoise { position: absolute; left: -14px; bottom: 28px; max-width: 80%; white-space: normal; }
.troupeau__nurserie .av1-ardoise { position: absolute; left: 14px; bottom: -14px; }
.etapes .av1-ardoise { position: relative; z-index: 1; margin-bottom: 18px; background: var(--lait); color: var(--encre); }
.gardiennes__photo .av1-ardoise { position: absolute; right: -10px; top: 26px; }
.magasin__photo .av1-ardoise { position: absolute; left: -16px; bottom: 30px; max-width: 86%; white-space: normal; }
.etal figure .av1-ardoise { position: absolute; left: 0; bottom: 0; }
@media (max-width: 760px) {
  .etal figure .av1-ardoise { position: static; display: inline-flex; margin-top: 8px; transform: none; font-size: 13px; }
}
.contact__coord .av1-coordonnees { margin-top: 22px; }
@media (max-width: 720px) {
  .av1-duo-photos { padding-bottom: 56px; }
  .portrait__photo .av1-ardoise, .magasin__photo .av1-ardoise { left: 10px; }
  .gardiennes__photo .av1-ardoise { right: 10px; }
}
.av1-reseaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(32px, 3.4vw, 50px); }
.av1-reseau { display: flex; flex-direction: column; min-width: 0; background: var(--craie); border: var(--filet-net); padding: clamp(18px, 1.8vw, 26px); text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.av1-reseau:hover { border-color: var(--feuille); transform: translateY(-2px); }
.av1-reseau:focus-visible { outline: 2px solid var(--foret); outline-offset: 3px; }
.av1-reseau__tete { display: flex; align-items: center; gap: 13px; min-width: 0; }
.av1-reseau__tete .ico { color: var(--feuille); flex: none; width: 26px; height: 26px; }
.av1-reseau__id { min-width: 0; }
.av1-reseau__id strong { display: block; font: 700 17px/1.3 var(--f-titre); overflow-wrap: anywhere; }
.av1-reseau__compte { display: block; margin-top: 2px; font-size: 14px; color: var(--cendre); }
.av1-reseau__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: clamp(16px, 1.6vw, 22px) 0; }
.av1-reseau__grille img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.av1-reseau__pied { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15.5px; color: var(--feuille); }
@media (prefers-reduced-motion: reduce) {
  .av1-reseau, .av1-reseau__pied .ico { transition: none; }
  .av1-reseau:hover { transform: none; }
}
@media (max-width: 820px) {
  .av1-reseaux { grid-template-columns: 1fr; }
}
html[lang^="en"] .av1-horaires tr.aujourdhui th::after { content: "today"; }
html[lang^="en"] .av1-signature__carte blockquote::before, html[lang^="en"] .av1-avis__liste blockquote::before { content: "\201c"; }
html[lang^="en"] .av1-signature__carte blockquote::after, html[lang^="en"] .av1-avis__liste blockquote::after { content: "\201d"; }
.rappel__form .av1-champ input { background: rgba(243, 241, 234, .07); border-color: rgba(243, 241, 234, .34); color: var(--craie); }
.rappel__form .av1-champ input::placeholder { color: rgba(243, 241, 234, .45); }
.rappel__form .av1-champ input:focus { border-color: var(--craie); box-shadow: 0 0 0 3px rgba(243, 241, 234, .22); }
.rappel__form .av1-consentement { color: rgba(243, 241, 234, .78); }
.rappel__form .av1-bouton--plein { background: var(--craie); color: var(--foret); justify-self: start; }
.rappel__form .av1-bouton--plein:hover { background: var(--blanc); }
.rappel .av1-formulaire__message { color: var(--feuille-clair); }
.av1-aligne-centre { align-items: center; }
.av1-conteneur--etroit { max-width: 1000px; }
.av1-titre-fort { font-size: clamp(36px, 4.4vw, 64px); line-height: .98; letter-spacing: -.022em; }
@media (pointer: coarse) {
  .av1-consentement input { width: 24px; height: 24px; margin-top: 1px; }
}
.av1-avis__photo img { width: 100%; height: auto; border: var(--filet-net); }
.revendeurs__photo .av1-ardoise { position: absolute; left: 14px; bottom: -14px; }
.cmd-tiroir .av1-bouton { justify-content: center; }

/* ---------- ajout de cette passe, hors v1 : la zone des liens fléchés grandit sur téléphone ----------
   Le trait du lien ne bouge pas, c'est la cible qui passe à 44 px pour un pouce. */
@media (max-width: 900px) {
  .av1-lien-fleche { position: relative; min-height: 44px; border-bottom: 0; padding-bottom: 0; }
  .av1-lien-fleche::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1.5px; background: rgba(78, 118, 38, .35); }
  .av1-lien-fleche:hover::after { background: var(--feuille); }
}

/* ---------- ajout de cette passe, hors v1 : le résumé « chèvres, fromages, magasin » ----------
   Demandé par Laura pour remplacer l'ardoise (30/10/2026). Mêmes valeurs que le reste de la
   v1 : fond blanc, filet, angles droits, titres Zodiak 700. Trois cartes qui mènent chacune
   à une page ; une seule colonne sur téléphone. */
.av1-titre-centre { text-align: center; max-width: 40em; margin: 0 auto clamp(32px, 4vw, 56px); }
.av1-titre-centre p { color: var(--cendre); margin: 14px 0 0; font-size: clamp(17px, 1.3vw, 19px); }
.av1-portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.av1-porte { display: block; text-decoration: none; color: inherit; background: var(--blanc); border: 1px solid var(--filet); transition: border-color .2s ease; }
.av1-porte:hover { border-color: var(--feuille); }
.av1-porte__photo { margin: 0; overflow: hidden; }
.av1-porte__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.av1 .av1-porte__nom { font: 700 21px/1.18 var(--f-titre); padding: 22px 24px 0; letter-spacing: -.005em; }
.av1-porte__dit { padding: 8px 24px 26px; margin: 0; color: var(--cendre); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 900px) { .av1-portes { grid-template-columns: 1fr; } }

/* ---------- ajout de cette passe, hors v1 : « Moi, c'est Laura » et la frise de l'histoire ----------
   Demande de Laura, par Célestin (31/10/2026) : retrouver sur l'accueil sa présentation et
   l'histoire de la ferme, placées comme dans la version qu'elle avait éditée, avec l'origine
   du nom à l'intérieur. Rendu à la v1 : la colonne de texte à gauche (av1-c-7), le portrait en
   arche à droite (av1-c-5), la frise en dates suivies. Repères Studio identiques à la v2. */
.av1-laura__portrait { margin: 0; }
.av1-laura__portrait img, .av1-laura__geste img { display: block; width: 100%; height: auto; border-radius: 6px; }
.av1-laura__geste { margin: clamp(22px, 2.4vw, 32px) 0; }
.av1 .av1-laura__exergue {
  margin: clamp(24px, 2.6vw, 34px) 0 6px; padding: 0; border: 0;
  font: 700 clamp(22px, 2vw, 30px)/1.12 var(--f-titre); letter-spacing: -.01em; color: var(--encre);
}
.av1-laura__source { margin: 0; color: var(--cendre); font-size: 15px; }
/* Le bloc du nom porte le logo, demandé par Laura le 03/11/2026 : le dessin
   répond au texte, qui raconte d'où vient le clocher. Il reste petit, aligné
   sur la colonne, et ne se met jamais en bandeau. */
.av1-nom { margin-top: clamp(26px, 3vw, 40px); }
/* ⚠️ EN BLOC EN LIGNE, PAS EN BLOC. Posé en `display: block`, le logo se
   calait à gauche pendant que le texte du bloc est centré (retour de Célestin
   le 03/11/2026, capture à l'appui). En bloc en ligne, il suit l'alignement de
   son parent quel qu'il soit : il restera au-dessus du texte le jour où ce
   bloc passera à gauche, sans qu'on ait à y revenir. */
.av1-nom__logo { display: inline-block; width: clamp(104px, 11vw, 146px); height: auto; margin: 0 0 14px; color: var(--feuille); }
.av1-nom h3 { margin: 0 0 10px; }
.av1-nom p { margin: 0 0 10px; color: var(--cendre); }
.av1-nom p:last-child { margin-bottom: 0; }

/* Les deux photos de l'histoire, demandées par Laura le 03/11/2026 : la ferme
   d'avant et la ferme d'aujourd'hui, l'une sous l'autre.
   ⚠️ LA COLONNE N'EST PLUS COLLANTE. Avec une seule photo, `av1-colle` la
   gardait à hauteur de la frise ; à deux, la colonne devient plus haute que la
   fenêtre et le collant fige la seconde photo hors de l'écran. */
.av1-histoire__titre { text-align: center; margin-top: -12px; }
.av1-histoire__chapo { text-align: center; max-width: 46em; margin-inline: auto; margin-bottom: clamp(16px, 2vw, 28px); }
.av1-histoire__photos { display: grid; gap: clamp(18px, 2vw, 28px); align-content: start; margin-top: 48px; }
.av1-histoire__photos figure { position: relative; }
.av1-histoire__photos img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; }
.av1-histoire__photos .av1-ardoise { position: absolute; left: 0; bottom: 14px; }

/* La frise : un trait horizontal par étape, la date en petites capitales suivies. */
.av1-frise { list-style: none; margin: clamp(10px, 1.4vw, 20px) 0 0; padding: 0; }
.av1-frise li { display: grid; gap: 6px 32px; padding: clamp(22px, 2.4vw, 30px) 0; border-top: 1px solid var(--filet); }
.av1-frise li:last-child { border-bottom: 1px solid var(--filet); }
@media (min-width: 760px) { .av1-frise li { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); align-items: baseline; } }
.av1-frise__date { font: 600 12px/1.4 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--olive, var(--feuille)); }
.av1 .av1-frise h3 { margin: 0 0 7px; font-weight: 400; letter-spacing: .01em; font-size: clamp(19px, 1.5vw, 24px); }
.av1-frise p { margin: 0; color: var(--cendre); font-size: 16px; line-height: 1.55; }

/* Sur bureau, la colonne de texte est bien plus haute que la photo : le portrait de Laura et
   la vue de la ferme suivent la lecture au lieu de laisser un grand vide (le « colle » de la v2). */
@media (min-width: 900px) {
  .av1-laura__portrait, .av1-colle { position: sticky; top: clamp(84px, 8vh, 112px); align-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE CENTRAGE (30/10/2026)

   Demande de Célestin, pour Laura : centrer et aligner les textes, les boutons et
   les blocs sur tout le site, bureau comme téléphone, pour des textes plus lisibles
   et mieux ordonnés. Chargée en dernier : elle recouvre direction.css (éditorial,
   aligné à gauche) et accueil-v1.css.

   CE QUI SE CENTRE : les titres, les paragraphes, les citations, les légendes, les
   cartes, les boutons, les liens, les rangées de pastilles, les colonnes du pied.
   Tout ce qui est un bloc de texte à côté d'une photo se centre dans SA colonne.

   CE QUI RESTE À GAUCHE, exprès : ce qui est une donnée à lire ligne par ligne.
   Un tableau d'horaires, une fiche « race, troupeau, naissances », les champs et
   les étiquettes d'un formulaire, les questions d'une foire aux questions, la courbe
   de la saison. Centrés, ils perdraient l'alignement qui permet de les parcourir.

   ⚠️ LA LARGEUR DE LIGNE NE CHANGE PAS : un paragraphe centré ne se lit bien que
   court. Les plafonds de largeur restent, et les blocs qui les portent se centrent
   avec margin-inline:auto, sinon la colonne resterait collée à gauche.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- 1. le texte ---------- */
main, .pied, .prepied, .bande { text-align: center; }

/* Un bloc de texte à largeur bornée se centre dans sa colonne. */
main :is(h1, h2, h3, h4, p, blockquote, ul, ol):not([class*="hors-ecran"]) { margin-inline: auto; }
main figure:not(.scene__media, .signature__photo, [class*="portrait"], [class*="photo"]) { margin-inline: auto; }

/* ---------- 2. les colonnes de texte (grille ou flex) ---------- */
main :is(.scene__texte, .banniere__contenu, .hero__texte, .bloc-texte, .service, .gamme__intro, [class*="__texte"], [class*="__intro"], [class*="__corps"]) {
  justify-items: center; align-items: center; text-align: center;
}
main .banniere__contenu, main .hero__contenu { justify-items: center; text-align: center; }

/* ---------- 3. les boutons, les liens, les pastilles ---------- */
main :is(.hero__actions, .actions, [class*="actions"], .labels, [class*="labels"], .pastilles, .filtres, [class*="filtre"], [class*="onglets"], .gamme-filtres, .tags) {
  justify-content: center; text-align: center;
}
main :is(.lien-fleche, .bouton, .av1-lien-fleche, .av1-bouton, .etiquette) { margin-inline: auto; }
main :is(.bouton, .av1-bouton):not(.cmd-art *) { justify-self: center; }

/* ---------- 4. ce qui reste à gauche, exprès ---------- */
main :is(table, caption, form, input, textarea, select, label, details, summary, .horaires, .formulaire, .rappel__form,
         .faq, .faq__item, .courbe, .courbe *, dl.fiche, dl.bete__mesures, dl.trajets, .fiche, .bete__mesures, .trajets) {
  text-align: left;
}
main :is(table, form, details) { margin-inline: auto; }
.horaires td { text-align: right; }
main :is(.consentement) { text-align: left; }

/* La frise de l'histoire est une donnee datee : chaque etape se lit ligne par ligne,
   la date a gauche, le fait a droite. Centree, elle perdrait cet alignement. */
main .av1-frise { margin-inline: auto; width: 100%; }
main :is(.av1-frise, .av1-frise li, .av1-frise__date, .av1-frise h3, .av1-frise p) { text-align: left; }

/* ---------- 5. le pied de page ---------- */
.pied :is(.pied__grille, .pied__bas, .pied__reseaux, .pied__labels, [class*="pied__"]) { justify-content: center; justify-items: center; text-align: center; }
.pied__grille > * { justify-items: center; }
.pied :is(ul, nav) { justify-content: center; align-items: center; }
.pied__bas { flex-direction: column; gap: 14px; align-items: center; }
.pied__bas nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }

/* ---------- 6. les corrections du premier passage ---------- */

/* direction.css fixe `text-align: left` sur des classes précises : une règle posée sur la classe
   l'emporte sur l'héritage, il faut la recouvrir. */
main :is(.titre-centre, .titre-centre h2, .titre-centre p, .hero__texte, .hero__bord--fin, .mention-commune,
         .gamme-liste--famille ~ * .mention-commune, #gamme .mention-commune, .banniere__contenu, .banniere__contenu *) {
  text-align: center; justify-items: center;
}

/* Un titre qui porte une classe de colonne (c-5, c-6) est un élément de grille : avec
   margin-inline:auto il se resserrait sur son texte et se cassait en trois lignes
   (« Venir / à / la ferme »). Il occupe sa colonne, et son texte s'y centre. */
main :is(h1, h2, h3, h4):not(summary *) { width: 100%; }

/* Les rangées en ligne qui restaient à gauche. */
main :is(.av1-avis__meta, .av1-reseau__tete, .av1-reseau__pied, .av1-coordonnees a, .av1-coordonnees p,
         .av1-carte-infos__bloc, .av1-carte-infos__laura, .labels, .av1-labels, .pratique li, .liste-cochee li,
         .epicerie__liste li) {
  justify-content: center; text-align: center;
}
main .av1-reseau__tete { align-items: center; }
main .av1-reseau__id { text-align: center; }
main :is(.av1-formulaire, form) :is(.bouton, button[type="submit"], .av1-bouton) { margin-inline: auto; }
main :is(.av1-formulaire, form) > div:has(> button[type="submit"]) { display: flex; justify-content: center; }
main .av1-coordonnees { justify-items: center; }

/* ---------- 7. le téléphone : tout se centre, rien ne se colle à gauche ---------- */
@media (max-width: 900px) {
  main :is(.scene__texte, .banniere__contenu, [class*="__texte"], [class*="__intro"]) { padding-inline: var(--gouttiere); }
  main :is(.hero__actions, [class*="actions"]) { justify-content: center; }
  main :is(.hero__actions, [class*="actions"]) :is(.bouton, .av1-bouton) { flex: 0 1 auto; }
}

/* Le pied sur téléphone : l'adresse et le téléphone se rangeaient côte à côte (grille à deux
   colonnes) et l'adresse restait à gauche. Une colonne, tout centré. */
@media (max-width: 900px) {
  .pied__grille ul { justify-items: center; }
  .pied__grille ul:has(a[href^="mailto:"]) { grid-template-columns: minmax(0, 1fr); }
}

/* Les questions d'une foire aux questions restent à gauche, leur croix à droite : un titre
   en `margin-inline: auto` dans une ligne flex se centrait, et les questions courtes
   flottaient au milieu pendant que les longues restaient à gauche. */
main summary :is(h1, h2, h3, h4) { margin-inline: 0; text-align: left; width: auto; flex: 1 1 auto; }

/* Sur téléphone la gamme tient sur deux colonnes : une fiche seule en fin de rangée ne se
   colle pas à gauche à côté d'un trou, elle se centre sur toute la largeur. */
@media (max-width: 700px) {
  .gamme-liste--famille > .gamme-art:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px);
  }
}
/* L'invite « faites glisser » sous les rails. */
main :is([class*="glisse"], [class*="rail__aide"], [class*="indice"]) { text-align: center; justify-content: center; }

/* Les blocs à largeur de lecture (`mesure`, `legal`) se centrent dans la page, et le fil d'Ariane avec eux. */
main :is(.mesure, .legal, [class*="mesure"]) { margin-inline: auto; }
main :is(.ariane, .ariane ol, .ariane__liste) { justify-content: center; text-align: center; }