/* 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; }
@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; }
@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); }
.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: 62%; position: relative; }
.troupeau__nurserie img { border-radius: 0; border: var(--filet-net); }
.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; }

.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; }
.etapes .ardoise { position: relative; z-index: 1; margin-bottom: 18px; background: var(--lait); color: var(--encre); }

.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; right: -10px; top: 26px; }

.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); }
.magasin__photo .ardoise { position: absolute; left: -16px; bottom: 30px; 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; }
.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; }
  .courbe__jalons li { position: static; width: auto; 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 { right: 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; }

/* ─────────────────────────────────────────────────────────────────────────────
   Commander et retirer au magasin.

   La liste des fromages arrive du serveur, donc elle n'a pas de hauteur connue
   au chargement : les cartes se posent sur une grille qui respire, et la ligne
   d'etat garde sa place pour que rien ne saute quand la liste arrive.

   Les cibles tactiles des boutons de quantite tiennent 44 px : c'est un geste
   repete, souvent debout dans une cuisine, parfois a une main.
   ───────────────────────────────────────────────────────────────────────────── */
.etapes-commande { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: clamp(22px, 2.4vw, 36px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: etc; }
.etapes-commande > li { counter-increment: etc; }
.etapes-commande h3 { font-family: var(--f-titre); font-size: clamp(19px, 1.1vw + 15px, 23px); font-weight: 500; margin: 0 0 8px; }
.etapes-commande h3::before { content: counter(etc) ". "; color: var(--feuille); }
.etapes-commande p { margin: 0; color: var(--cendre); }

.commande { margin-top: clamp(26px, 3vw, 40px); }
.commande__mot { margin: 0; padding: 22px 0; color: var(--cendre); }
.commande__liste { display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.cmd-art { background: var(--blanc); border: 1px solid var(--filet); border-radius: 4px; padding: clamp(18px, 1.6vw, 24px); display: flex; flex-direction: column; gap: 8px; }
.cmd-art--epuise { background: var(--sable); border-style: dashed; }
.cmd-art__nom { font-family: var(--f-titre); font-size: clamp(18px, 1vw + 14px, 21px); font-weight: 500; margin: 0; }
.cmd-art__prix { margin: 0; font-weight: 600; }
.cmd-art__dit { margin: 0; color: var(--cendre); font-size: 15px; }
.cmd-art__mentions { margin: 0; color: var(--cendre); font-size: 13.5px; line-height: 1.5; }
.cmd-art__epuise { margin: 6px 0 0; font-weight: 600; color: var(--cendre); }

.cmd-art__nb { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.cmd-art__q { min-width: 2ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmd-art__nb--pris .cmd-art__q { color: var(--foret); }
.cmd-nb { width: 44px; height: 44px; border-radius: 3px; border: 1px solid var(--filet); background: var(--lait); color: var(--encre); font: inherit; font-size: 19px; line-height: 1; cursor: pointer; transition: background .25s cubic-bezier(.16, 1, .3, 1), border-color .25s cubic-bezier(.16, 1, .3, 1); }
.cmd-nb:hover:not(:disabled) { background: var(--feuille-clair); border-color: var(--feuille); }
.cmd-nb:disabled { opacity: .4; cursor: default; }

/* ⚠️ L'attribut hidden ne cache RIEN quand une règle pose un display : le pied
   du panier est en flex, la liste en grid, et tous deux restaient visibles une
   fois vides. Le site traite déjà ce piège sur le menu mobile. */
.commande__pied[hidden], .commande__liste[hidden], .cmd-tunnel[hidden] { display: none; }
.commande__pied { margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(18px, 2vw, 28px); }
.commande__total { margin: 0; font-family: var(--f-titre); font-size: clamp(20px, 1.2vw + 16px, 26px); font-weight: 500; }
.commande__note { margin: 0; flex-basis: 100%; color: var(--cendre); font-size: 13.5px; }

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

/* Le tunnel de commande : l'heure de retrait, les coordonnées, la confirmation.
   Il s'ouvre sous la liste plutôt que dans une fenêtre : sur un téléphone, une
   fenêtre modale cache le panier qu'on vient de remplir et rend le retour
   incertain. */
.cmd-tunnel { margin-top: clamp(26px, 3vw, 40px); padding: clamp(22px, 2.4vw, 34px); background: var(--blanc); border: 1px solid var(--filet); border-radius: 4px; }
.cmd-tunnel__form { display: grid; gap: clamp(14px, 1.6vw, 20px); max-width: 560px; }
.cmd-recap { list-style: none; margin: 0; padding: 0 0 clamp(6px, 1vw, 12px); display: grid; gap: 4px; }
.cmd-recap li { color: var(--cendre); }
.cmd-champ { margin: 0; display: grid; gap: 6px; }
.cmd-champ label { font-size: 14.5px; font-weight: 600; }
.cmd-champ input, .cmd-champ select { width: 100%; min-height: 48px; padding: 11px 13px; font: inherit; color: var(--encre); background: var(--lait); border: 1px solid var(--filet); border-radius: 3px; }
.cmd-champ input:focus-visible, .cmd-champ select:focus-visible { outline: 2px solid var(--feuille); outline-offset: 1px; }
.cmd-retour { justify-self: start; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--cendre); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cmd-retour:hover { color: var(--foret); }

.cmd-fait h3 { font-family: var(--f-titre); font-size: clamp(20px, 1.2vw + 16px, 26px); font-weight: 500; margin: 0 0 10px; }
.cmd-fait p { margin: 0 0 10px; }
.cmd-fait__note { padding: 12px 14px; background: var(--sable); border-left: 3px solid var(--feuille); color: var(--cendre); font-size: 14px; }

/* La carte d'un fromage, avec sa photo. Les photos n'ont pas le même format
   d'origine : un rapport fixe et un recadrage centré évitent que la grille
   tangue d'une carte à l'autre, sans jamais étirer l'image. */
.cmd-art { padding: 0; overflow: hidden; }
.cmd-art__photo { margin: 0; background: var(--sable); }
.cmd-art__photo img { display: block; width: 100%; height: clamp(150px, 16vw, 200px); object-fit: cover; }
.cmd-art__corps { padding: clamp(16px, 1.6vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.cmd-art__format { margin: 2px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmd-art__format label { font-size: 14px; font-weight: 600; color: var(--cendre); }
.cmd-art__format select { flex: 1 1 140px; min-height: 44px; padding: 8px 10px; font: inherit; color: var(--encre); background: var(--lait); border: 1px solid var(--filet); border-radius: 3px; }
.cmd-art__nb { padding-top: 10px; }

/* Le panier : une ligne par fromage et par format, modifiable sur place. */
.cmd-panier__titre { font-family: var(--f-titre); font-size: clamp(19px, 1.1vw + 15px, 23px); font-weight: 500; margin: 0; flex-basis: 100%; }
.cmd-panier__lignes { list-style: none; margin: 0; padding: 0; flex-basis: 100%; display: grid; gap: 2px; }
.cmd-ligne { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px clamp(12px, 1.4vw, 20px); padding: 10px 0; border-bottom: 1px solid var(--filet); }
.cmd-ligne:last-child { border-bottom: 0; }
.cmd-ligne__quoi { min-width: 0; }
.cmd-ligne__prix { color: var(--cendre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmd-ligne__nb { display: flex; align-items: center; gap: 8px; }

@media (max-width: 520px) {
  /* Le nom sur sa ligne, le prix et les boutons sous lui : trois colonnes dans
     420 px donnaient un nom coupé en deux et des lignes hautes d’un tiers
     d’écran. */
  .cmd-ligne { grid-template-columns: 1fr auto; row-gap: 6px; padding: 12px 0; }
  .cmd-ligne__quoi { grid-column: 1 / -1; }
  .cmd-ligne__prix { grid-column: 1; align-self: center; }
  .cmd-ligne__nb { grid-column: 2; }
}
/* ⚠️ Sans ceci, la liste du tiroir hérite du flex: 1 1 auto et étire ses lignes
   sur toute la hauteur restante : une ligne de panier occupait un tiers de
   l’écran. */
.cmd-tiroir .cmd-panier__lignes { align-content: start; }

/* ─────────────────────────────────────────────────────────────────────────────
   Le calendrier de retrait : les jours à gauche, les heures du jour choisi à
   droite. Deux colonnes sur un écran large, empilées sur un téléphone, où la
   colonne des heures passe sous le mois.

   Les cibles tactiles tiennent 44 px : on choisit une date debout, souvent
   d'une main.
   ───────────────────────────────────────────────────────────────────────────── */
.cmd-cal { display: grid; gap: 14px; }
.cmd-cal__titre { margin: 0; font-size: 14.5px; font-weight: 600; }
.cmd-cal__corps { display: grid; gap: clamp(18px, 2.4vw, 32px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .cmd-cal__corps { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); } }

.cmd-cal__grille { background: var(--lait); border: 1px solid var(--filet); border-radius: 4px; padding: 12px; }
.cmd-cal__mois { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cmd-cal__mois strong { font-family: var(--f-titre); font-size: 17px; font-weight: 500; }
.cmd-cal__fleche { width: 44px; height: 44px; border: 1px solid var(--filet); border-radius: 3px; background: var(--blanc); color: var(--encre); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: background .25s cubic-bezier(.16, 1, .3, 1); }
.cmd-cal__fleche:hover:not(:disabled) { background: var(--feuille-clair); }
.cmd-cal__fleche:disabled { opacity: .3; cursor: default; }

.cmd-cal__sem, .cmd-cal__jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cmd-cal__sem { margin-bottom: 4px; }
.cmd-cal__sem span { text-align: center; font-size: 12px; font-weight: 600; color: var(--cendre); padding: 4px 0; }
.cmd-cal__jour { aspect-ratio: 1; min-width: 0; border: 0; border-radius: 3px; background: var(--blanc); color: var(--encre); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1); }
.cmd-cal__jour:hover:not(:disabled) { background: var(--feuille-clair); }
.cmd-cal__jour:disabled { background: transparent; color: var(--cendre); opacity: .35; cursor: default; }
.cmd-cal__jour--choisi, .cmd-cal__jour--choisi:hover:not(:disabled) { background: var(--foret); color: var(--craie); font-weight: 600; }

.cmd-cal__jourNom { margin: 0 0 10px; font-family: var(--f-titre); font-size: 17px; font-weight: 500; }
.cmd-cal__jourNom::first-letter, .cmd-cal__mois strong::first-letter { text-transform: uppercase; }
.cmd-cal__aide { margin: 0; color: var(--cendre); }
.cmd-cal__creneaux { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); max-height: 320px; overflow-y: auto; }
.cmd-cal__heure { min-height: 44px; padding: 10px 12px; border: 1px solid var(--filet); border-radius: 3px; background: var(--blanc); color: var(--encre); font: inherit; cursor: pointer; transition: background .25s cubic-bezier(.16, 1, .3, 1), border-color .25s cubic-bezier(.16, 1, .3, 1); }
.cmd-cal__heure:hover { border-color: var(--feuille); background: var(--feuille-clair); }
.cmd-cal__heure--choisi, .cmd-cal__heure--choisi:hover { background: var(--foret); border-color: var(--foret); color: var(--craie); font-weight: 600; }
.cmd-cal__mal { margin: 0; grid-column: 1 / -1; padding: 10px 12px; background: var(--sable); border-left: 3px solid var(--foret); color: var(--encre); }

/* ─────────────────────────────────────────────────────────────────────────────
   Le panier qu'on retrouve partout : une pastille en haut à droite, un tiroir
   qui s'ouvre sur la droite.

   La pastille se place SOUS l'en-tête collante, pas dessus : elle doit rester
   atteignable sans masquer le menu ni le logo.
   ───────────────────────────────────────────────────────────────────────────── */
.cmd-pastille { position: fixed; top: clamp(76px, 10vh, 104px); right: clamp(12px, 2.4vw, 28px); z-index: 60; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--foret); color: var(--craie); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(31, 35, 29, .18); transition: background .25s cubic-bezier(.16, 1, .3, 1); }
.cmd-pastille:hover { background: var(--foret-fonce); }
.cmd-pastille svg { width: 20px; height: 20px; }
.cmd-pastille__n { font-variant-numeric: tabular-nums; }

.cmd-voile { position: fixed; inset: 0; z-index: 80; background: rgba(31, 35, 29, .42); }
.cmd-tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(420px, 92vw); padding: clamp(20px, 2.6vw, 32px); background: var(--lait); border-left: 1px solid var(--filet); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.cmd-tiroir[hidden], .cmd-voile[hidden], .cmd-pastille[hidden] { display: none; }
.cmd-tiroir__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.cmd-tiroir__titre { margin: 0; font-family: var(--f-titre); font-size: clamp(22px, 1.4vw + 18px, 28px); font-weight: 500; }
.cmd-tiroir__fermer { min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--cendre); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cmd-tiroir__fermer:hover { color: var(--foret); }
.cmd-tiroir .cmd-panier__lignes { flex: 1 1 auto; }
.cmd-tiroir .commande__total { font-family: var(--f-titre); font-size: clamp(19px, 1.1vw + 15px, 23px); font-weight: 500; margin: 0; }
.cmd-tiroir .bouton { justify-content: center; }

/* 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) {
  .cmd-tiroir { animation: cmd-entre .32s cubic-bezier(.16, 1, .3, 1); }
  @keyframes cmd-entre { from { transform: translateX(100%); } to { transform: none; } }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reprise visuelle du 26/10/2026, après relecture à l'écran.

   La pastille vit dans la barre : en flottant, elle tombait sur le bouton
   « Venir au magasin ». L'en-tête étant collante, elle reste visible au
   défilement, ce qui était tout l'objet.
   ───────────────────────────────────────────────────────────────────────────── */
/* ⚠️ COULEURS INVERSÉES dans la barre, et c'est une question de hiérarchie :
   le bouton « Venir au magasin » est déjà un plein vert, et deux pleins verts
   côte à côte se disputent l’œil. En contour, la pastille se lit tout aussi
   bien et laisse l’appel principal dominer. */
.cmd-pastille--barre { position: static; box-shadow: none; min-height: 44px; padding: 0 14px 0 12px; margin-left: auto; background: var(--blanc); color: var(--foret); box-shadow: inset 0 0 0 1.5px var(--foret); }
.cmd-pastille--barre:hover { background: var(--feuille-clair); color: var(--foret-fonce); box-shadow: inset 0 0 0 1.5px var(--foret-fonce); }
.barre__ligne .cmd-pastille--barre + .barre__action { margin-left: 10px; }
@media (max-width: 1080px) { .cmd-pastille--barre { margin-left: 0; } }

/* Une carte sans photo reçoit un cartouche : toutes les cartes ont alors la
   même anatomie, et la grille cesse d'étirer les plus courtes au gabarit des
   plus hautes. Ce n'est pas une fausse photo, c'est un aplat de la charte. */
.cmd-art__cartouche { height: clamp(150px, 16vw, 200px); display: grid; place-items: center; background: var(--sable); border-bottom: 1px solid var(--filet); }
.cmd-art__cartouche .ico { width: 42px; height: 42px; color: var(--feuille); opacity: .5; }

/* Le panier de la page devient un encart, à la largeur d'un texte : étalé sur
   toute la page, le nom d'un fromage et son prix se retrouvaient à un demi-mètre
   l'un de l'autre, et l'œil ne faisait plus le lien. */
.commande__pied { max-width: 760px; margin-left: auto; margin-right: auto; padding: clamp(20px, 2.4vw, 30px); background: var(--blanc); border: 1px solid var(--filet); border-radius: 4px; border-top: 1px solid var(--filet); }
.commande__pied .cmd-panier__lignes { margin-top: 6px; }
.commande__pied .cmd-ligne:first-child { border-top: 1px solid var(--filet); }
.commande__total { font-family: var(--f-titre); font-weight: 500; }

/* Resserrage des cartes : 500 px de haut pour un crottin, c'était une page de
   catalogue longue comme un bras pour douze fromages. */
.cmd-art__cartouche { height: clamp(110px, 11vw, 140px); }
.cmd-art__cartouche .ico { width: 36px; height: 36px; }
.cmd-art__photo img { height: clamp(110px, 11vw, 140px); }
.cmd-art__corps { gap: 6px; padding: clamp(14px, 1.3vw, 18px); }
.cmd-art__nom { font-size: clamp(17px, .9vw + 13px, 19px); }
.cmd-art__dit { font-size: 14.5px; line-height: 1.5; }
.cmd-art__mentions { font-size: 12.5px; line-height: 1.45; }
.cmd-art__prix--absent { font-weight: 400; color: var(--cendre); }
.cmd-art__nb { padding-top: 8px; }
.commande__note[hidden] { display: none; }

/* La mention commune à tous les fromages, dite une fois au lieu de douze. */
.commande__commun { max-width: 72ch; margin: 0 0 clamp(18px, 2vw, 26px); padding: 12px 16px; background: var(--sable); border-left: 3px solid var(--feuille); color: var(--cendre); font-size: 14.5px; }
.cmd-art__prix[hidden] { display: none; }