/* =========================================================
   LA CAVE DU FROMAGER — maison.css
   Système graphique COMMUN aux deux maisons (arbitrage de
   Mathieu, 29/07/2026 : « le même site, on tranche »).
   Transplanté depuis le Bistrot du Fromager
   (Bistrot/site/assets/css/style-v2.css) : mêmes classes,
   mêmes formes, même calligraphie, mêmes boutons. Seuls les
   accents ont bougé — la pierre, le vin sombre et la bougie
   d'une cave voûtée à la place du papier de bistrot et du
   rouge tomate de la nappe vichy.

   Ce qu'on ne fait PAS dans ce fichier :
   - renommer une classe (les pages des deux maisons se copient) ;
   - inventer un composant : on habite le système, on n'en crée pas ;
   - modifier le bloc CAVE en fin de fichier sans lire son en-tête.

   Pensé téléphone d'abord : tout fonctionne au doigt, le curseur
   et la parallaxe n'existent que sur ordinateur.
   Règle d'or : jamais de texte clair sur fond clair.
   ========================================================= */

:root {
  /* PALETTE IDENTIQUE À CELLE DU BISTROT, à la virgule près.
     Mathieu, 30/07 : « je veux vraiment une identité similaire ».
     Une version « pierre et vin sombre » avait été essayée puis
     refusée : elle éloignait les deux maisons au lieu de les
     rapprocher. Toute retouche de ces valeurs se fait des deux
     côtés ou pas du tout. */

  --paper:   #f3e9d6;
  --paper-2: #e8dcc0;
  --paper-3: #ddcda8;
  --creme:   #faf4e6;
  --ink:     #1c1812;
  --ink-2:   #3a3328;
  --ink-3:   #6b6151;
  --wine:      #6d2233;
  --wine-deep: #4d1722;
  --vichy:       #b3392f;
  --vichy-fonce: #8e2b23;
  --brass:   #a87c3c;
  --brass-2: #c89a52;
  --bois-clair: #6f4a2c;
  --bois:       #5a3a22;
  --bois-fonce: #432a17;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --plume:   "Pinyon Script", "Snell Roundhand", cursive;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* Transitions fluides entre les pages (navigateurs récents) */
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--display);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.66;
  font-size: 17.5px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 880px) { body { font-size: 18.5px; } }

/* Grain de papier, très discret */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--vichy); color: var(--creme); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
em { font-style: italic; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Calligraphie ---------- */
.plume { font-family: var(--plume); font-weight: 400; line-height: 1.1; letter-spacing: 0; }
.annotation {
  font-family: var(--plume); color: var(--wine);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  transform: rotate(-3.5deg); display: inline-block; line-height: 1.15;
}
.annotation.laiton { color: var(--brass); }

/* Enluminures qui s'écrivent au défilement */
.trace path {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: var(--long, 600); stroke-dashoffset: var(--long, 600);
}
.on .trace path, .trace.on path { animation: ecrit 2.4s cubic-bezier(.4,0,.25,1) forwards; }
.on .trace.t2 path { animation-delay: .5s; }
@keyframes ecrit { to { stroke-dashoffset: 0; } }

/* ---------- Motifs ---------- */
.vichy {
  background:
    repeating-linear-gradient(0deg, rgba(140,47,43,.5) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(90deg, rgba(140,47,43,.5) 0 12px, transparent 12px 24px),
    #faf5ea;
}
.etiq-pot {
  display: inline-block; background: var(--creme);
  border: 2px solid var(--vichy);
  border-radius: 50% 50% 50% 50% / 14% 14% 14% 14%;
  padding: 7px 20px;
  font-family: var(--display); font-size: .82rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; color: var(--vichy-fonce);
  box-shadow: 0 2px 0 rgba(23,19,16,.18);
}
.moulure { position: relative; padding: 14px; }
@media (min-width: 880px) { .moulure { padding: 16px; } }
.moulure::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(23,15,7,.16) 0 2px, transparent 2px 8px, rgba(255,230,180,.06) 8px 10px, transparent 10px 24px),
    linear-gradient(160deg, #6a4527, #55361f 55%, #3f2714);
  box-shadow:
    inset 0 0 0 3px rgba(255,226,170,.18),
    inset 0 0 0 5px rgba(24,14,6,.45),
    inset 0 0 0 6px rgba(255,226,170,.12),
    0 18px 40px -22px rgba(23,19,16,.55);
}
.moulure > * { position: relative; z-index: 2; }
.moulure .interieur { border: 1px solid rgba(24,14,6,.5); box-shadow: inset 0 0 0 1px rgba(255,226,170,.14); }

/* ---------- Curseur plume : DÉSACTIVÉ sur le site de la Cave ----------
   Le système du Bistrot masque le curseur de la souris (cursor: none) et le
   remplace par un point bordeaux de 10 px suivi d'un anneau. Sur les photos
   sombres d'une cave voûtée, ce point disparaît : Mathieu a signalé le 30/07
   qu'il ne voyait plus sa souris en se promenant sur le site.

   Sur un site dont l'objet est de faire cliquer « Réserver » et « Itinéraire »,
   un visiteur qui cherche son curseur est un client perdu. On garde donc le
   curseur natif du système, partout.

   Rien n'est supprimé : le balisage (#cur, #ring) et le script restent en
   place, seul l'habillage est neutralisé. Pour réactiver l'effet un jour,
   il suffit de restaurer ce bloc depuis ..\Bistrot\site\assets\css\style-v2.css. */
.cursor, .cursor-ring { display: none !important; }
body.curseur-actif,
body.curseur-actif a,
body.curseur-actif button { cursor: auto; }
body.curseur-actif a,
body.curseur-actif button { cursor: pointer; }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--gutter);
  transition: background .4s, box-shadow .4s;
}
.site-header.scrolled { background: rgba(241,232,213,.94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(23,19,16,.18); }
.brand { font-family: var(--plume); font-size: clamp(1.4rem, 4.5vw, 2rem); color: var(--ink); line-height: 1; }
.brand small {
  display: block; font-family: var(--display); font-size: clamp(.6rem, 1.8vw, .78rem);
  letter-spacing: .24em; text-transform: uppercase; color: var(--vichy-fonce); font-weight: 600; margin-top: 4px;
}
.burger {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--creme); border: 1px solid var(--ink);
  padding: 15px 13px; min-width: 52px; min-height: 48px;
  justify-content: center; align-items: center; transition: background .3s;
}
.burger span { display: block; width: 26px; height: 1.5px; background: var(--ink); transition: transform .4s cubic-bezier(.7,0,.3,1), opacity .3s; }
.burger:hover { background: var(--paper-2); }
body.menu-ouvert .burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
body.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
body.menu-ouvert .burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
/* Menu ouvert : l'enseigne passe en clair sur le fond bordeaux, jamais de sombre sur sombre */
body.menu-ouvert .site-header { background: transparent; box-shadow: none; backdrop-filter: none; }
body.menu-ouvert .brand { color: var(--paper); }
body.menu-ouvert .brand small { color: var(--brass-2); }

/* ---------- Menu plein écran ---------- */
/* Le défilement appartient à .contenu, PAS au panneau. Quand c'était le
   panneau qui défilait, son ::after en bottom:0 se plaçait à hauteur d'écran
   dans un contenu plus haut : le galon vichy traversait le menu en plein
   milieu, en travers des libellés. Mesuré le 03/08 : panneau 720 px,
   contenu 1294 px, galon à 720 px du haut. Le même défaut existe au Bistrot. */
.menu {
  position: fixed; inset: 0; z-index: 95; background: var(--wine-deep);
  display: flex; align-items: center; overflow: hidden;
  clip-path: circle(0 at calc(100% - 56px) 44px);
  transition: clip-path .8s cubic-bezier(.8,0,.2,1), visibility 0s .8s;
  visibility: hidden;
}
body.menu-ouvert .menu { clip-path: circle(150% at calc(100% - 56px) 44px); visibility: visible; transition: clip-path .8s cubic-bezier(.8,0,.2,1); }
.menu::before, .menu::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22px;
  background:
    repeating-linear-gradient(0deg, rgba(140,47,43,.55) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, rgba(140,47,43,.55) 0 8px, transparent 8px 16px),
    #faf5ea;
}
.menu::before { top: 0; } .menu::after { bottom: 0; }
.menu { display: block; }
.menu .contenu {
  min-height: 100%; max-height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 76px clamp(22px, 7vw, 120px) 56px; width: 100%;
}
/* Deux grandes tuiles photo : la carte et la galerie, l'accès direct */
.menu-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.menu-tuile {
  position: relative; display: block; aspect-ratio: 1 / .78; overflow: hidden;
  border: 1px solid rgba(241,232,213,.5);
  transform: translateY(24px); opacity: 0;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s;
}
body.menu-ouvert .menu-tuile { transform: none; opacity: 1; }
body.menu-ouvert .menu-tuile:nth-child(2) { transition-delay: .07s; }
.menu-tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.6,.2,1); }
.menu-tuile:hover img { transform: scale(1.06); }
.menu-tuile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(23,17,12,.75) 100%);
}
.menu-tuile span {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2;
  white-space: nowrap;
  font-family: var(--plume); font-size: clamp(1.8rem, 6.5vw, 2.8rem); color: var(--creme);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.menu ul { width: 100%; }
.menu li { overflow: hidden; }
.menu li + li { border-top: 1px solid rgba(241,232,213,.16); }
.menu ul a {
  display: flex; align-items: baseline; gap: 16px; font-family: var(--plume);
  font-size: clamp(2rem, 7.4vw, 4.4rem); line-height: 1.35; color: var(--paper);
  transform: translateY(110%); transition: transform .7s cubic-bezier(.2,.7,.2,1), color .3s, padding-left .3s;
  padding: 4px 0;
}
body.menu-ouvert .menu ul a { transform: none; }
.menu li:nth-child(1) a { transition-delay: .1s; } .menu li:nth-child(2) a { transition-delay: .16s; }
.menu li:nth-child(3) a { transition-delay: .22s; } .menu li:nth-child(4) a { transition-delay: .28s; }
.menu li:nth-child(5) a { transition-delay: .34s; }
.menu ul a:hover { color: var(--brass-2); padding-left: 10px; }
/* Le libelle du menu ne se coupe jamais : « Les fromages » passait a la ligne
   et decalait toute la liste. Le complement, lui, peut respirer sur deux
   lignes s'il le faut — il est en petit et n'entraine pas la calligraphie. */
.menu ul a > :first-child, .menu ul a { white-space: nowrap; }
.menu .num {
  font-family: var(--display); font-style: italic;
  font-size: clamp(.82rem, 2.2vw, 1.15rem); color: var(--brass-2);
  white-space: normal; text-align: right; flex: 1 1 auto; min-width: 0;
}
.menu-pied {
  margin-top: 26px; font-family: var(--display); font-style: italic;
  font-size: clamp(.95rem, 2.6vw, 1.1rem); color: rgba(241,232,213,.8);
  opacity: 0; transition: opacity .6s .4s;
}
body.menu-ouvert .menu-pied { opacity: 1; }

/* ---------- Bannière d'accueil : fondu de photos, note et itinéraire ---------- */
.banniere { position: relative; height: min(86svh, 780px); min-height: 560px; overflow: hidden; background: var(--ink); }
.banniere .b-s { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.banniere .b-s.on { opacity: 1; }
.banniere .b-s img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .banniere .b-s.on img { animation: b-zoom 9s ease-out forwards; }
  @keyframes b-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
}
.b-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,13,9,.5) 0%, rgba(18,13,9,.12) 34%, rgba(18,13,9,.18) 55%, rgba(18,13,9,.82) 100%); }
/* ---------- La tête de bannière (03/08) ----------
   Le titre et la ligne d'horaires vivent DANS UN SEUL conteneur, en colonne
   centrée, posée en haut de la bannière. Avant, la ligne « Ouvre à 19h00 ·
   Fermé le jeudi · règlement en espèces ou par chèque » était collée au bas
   de la bannière, à 132 px du dock : elle disait l'essentiel là où personne
   ne regarde. Elle passe sous le titre.

   Le z-index reste sous celui de la pile et des médailles : le titre n'est
   pas cliquable, il ne doit jamais couvrir ce qui l'est. */
.tete-banniere {
  position: absolute; top: clamp(10px, 2.5vh, 24px); left: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 1.1vh, 12px); text-align: center;
}
.tete-banniere .b-infos { font-size: clamp(.85rem, 2.7vw, 1.08rem); padding: 0 8px; }
/* Le kicker vit maintenant dans une colonne flex à gouttière : sa marge
   propre s'ajouterait à la gouttière et décollerait le bloc. */
.tete-banniere .b-kicker { margin-top: 0; }
.b-kicker {
  display: block; margin-top: 9px; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: clamp(.74rem, 2.8vw, 1.08rem);
  letter-spacing: .13em; text-transform: uppercase; color: #9c3126;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.9), 1px -1px 0 rgba(255,255,255,.9),
    -1px 1px 0 rgba(255,255,255,.9), 1px 1px 0 rgba(255,255,255,.9),
    0 3px 12px rgba(0,0,0,.5);
}
.b-titre {
  font-size: clamp(2.2rem, 8.5vw, 4.8rem); font-weight: 500; line-height: 1;
  /* Or brossé + contour blanc, demandés par Mathieu le 03/08. */
  color: #f0d9a0;
  background: linear-gradient(178deg, #fdf3d4 4%, #f0d199 34%, #d8ac63 58%, #f6e3b4 78%, #cfa055 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.1px rgba(255,255,255,.92);
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.8)) drop-shadow(0 0 2px rgba(0,0,0,.55));
}
.b-titre .grand-plume {
  display: block; font-family: var(--plume); font-weight: 400;
  font-size: clamp(3.8rem, 14.5vw, 8.5rem); line-height: .95; margin-top: -.03em;
  /* La calligraphie prend le même or et le même contour, un peu plus épais :
     ses pleins et déliés sont fins, un trait trop léger disparaîtrait. */
  color: #f0d9a0;
  background: linear-gradient(178deg, #fdf3d4 4%, #f0d199 34%, #d8ac63 58%, #f6e3b4 78%, #cfa055 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,.95);
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 22px rgba(0,0,0,.85)) drop-shadow(0 0 3px rgba(0,0,0,.6));
}
/* La triche du Bistrot, reprise telle quelle : corps de police plus grand ET
   étirement vertical de 10 %. Le titre grossit à l'œil sans gagner un seul
   pixel en largeur — donc aucun risque de débordement, ni sur téléphone ni
   sur la ligne descriptive. Le texte du h1, lui, ne bouge pas d'un caractère :
   il est calé sur les requêtes réellement tapées. */
.tete-banniere .b-titre {
  font-size: clamp(2.35rem, 8.9vw, 5.05rem);
  transform: scaleY(1.1); transform-origin: top center;
  /* Un élément étiré déborde de sa boîte de mise en page sans que rien en
     dessous ne le sache : le dixième gagné en hauteur retombe pile sur la
     ligne suivante. On rend ce dixième en marge, exprimé en em pour qu'il
     suive le corps de police à toutes les largeurs. Mesuré au navigateur :
     titre de 3,05 em de haut, donc 0,305 em de débordement. */
  margin-bottom: .32em;
}
.tete-banniere .b-titre .grand-plume { font-size: clamp(4rem, 15.2vw, 8.95rem); }
.b-contenu {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: 0 var(--gutter) 132px;
  /* Ce bloc couvre la bannière entière alors qu'il ne contient plus qu'un
     numéro de téléphone en bas. Il vient après la tête de bannière dans le
     document et au même plan : sans cela il lui passe devant et intercepte
     le pointeur sur tout le titre. Seuls ses propres enfants restent
     cliquables — le lien d'appel et son suivi de conversion ne changent pas. */
  pointer-events: none;
}
.b-contenu > * { pointer-events: auto; }
.b-infos { font-style: italic; color: rgba(250,245,234,.96); font-size: clamp(1.02rem, 3vw, 1.25rem); text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.b-points { position: absolute; bottom: 108px; left: 0; right: 0; z-index: 6; display: flex; gap: 8px; justify-content: center; }
.b-points i { width: 8px; height: 8px; border-radius: 50%; background: rgba(250,245,234,.4); transition: background .3s, transform .3s; }
.b-points i.on { background: var(--creme); transform: scale(1.3); }

/* ---------- Dock d'application : barre flottante arrondie en bas ---------- */
.barre-app {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 300;
  display: flex; align-items: stretch; gap: 4px; padding: 8px;
  background: rgba(20,15,11,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(250,245,234,.16); border-radius: 24px;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.75);
  max-width: 560px; margin-inline: auto;
}
.barre-app .cel {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 7px 4px 8px; border-radius: 16px;
  background: transparent; color: var(--creme);
  font-family: var(--display); font-weight: 600; font-size: clamp(.85rem, 2.9vw, .98rem);
  transition: background .25s, transform .25s;
}
.barre-app .cel:hover { background: rgba(250,245,234,.1); transform: translateY(-1px); }
.barre-app .cel svg { width: 22px; height: 22px; }
/* Ordre de Mathieu, 04/08 : le rouge va sur RÉSERVER — c'est l'action qui
   compte — et MENU prend l'or de la calligraphie du nom. L'itinéraire garde
   son contour, il reste tout aussi visible sans monopoliser la couleur. */
.barre-app .cel.plein { background: var(--vichy); }
.barre-app .cel.plein:hover { background: #a63b34; }

/* MENU, dans l'or du titre : dégradé brossé, texte sombre pour le contraste. */
.barre-app .cel.or {
  background: linear-gradient(176deg, #fdf3d4 2%, #f0d199 30%, #d8ac63 60%, #f6e3b4 82%, #cfa055 100%);
  color: #2a1d10;
  border-color: rgba(120, 88, 36, .5);
}
.barre-app .cel.or svg { stroke: #2a1d10; }
.barre-app .cel.or:hover {
  background: linear-gradient(176deg, #fff8e2 2%, #f6dcaa 30%, #e0b872 60%, #fbeec5 82%, #d9ab60 100%);
}
.barre-app .etoile-or { color: #e3c37c; font-size: 1.25rem; line-height: 1; }
.burger.dans-barre {
  flex: 0 0 58px; min-width: 58px; min-height: 56px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: none; padding: 0;
  transition: background .25s;
}
.burger.dans-barre:hover { background: rgba(250,245,234,.1); }
.burger.dans-barre span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #e3c37c; transition: transform .4s cubic-bezier(.7,0,.3,1), opacity .3s; }
body.menu-ouvert .burger.dans-barre span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-ouvert .burger.dans-barre span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
body.avec-barre { padding-bottom: 92px; }
body.avec-barre .banniere { height: 100svh; }
body.avec-barre .menu .contenu { padding-bottom: 150px; }
/* Le menu plein écran jaillit désormais du burger, en bas à gauche */
body.avec-barre .menu { clip-path: circle(0 at 48px calc(100% - 48px)); }
body.avec-barre.menu-ouvert .menu { clip-path: circle(160% at 48px calc(100% - 48px)); }

/* Cachet de la note : papier gravé de la maison, cliquable vers la fiche Google */
.macaron-or {
  position: absolute; top: 29svh; left: 12px; right: auto; z-index: 7;
  width: 112px; height: 112px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 35% 30%, #fdf8ec 0%, #f3e7cf 58%, #e4d1a8 100%);
  box-shadow:
    0 12px 30px -10px rgba(23,19,16,.6),
    inset 0 0 0 2px #b3893f,
    inset 0 0 0 4.5px #fdf8ec,
    inset 0 0 0 6px rgba(106,32,48,.8);
  transform: rotate(-5deg);
  transition: transform .25s;
}
.macaron-or:hover { transform: rotate(-5deg) scale(1.06); }
/* 2,05 rem debordait de la pastille sur telephone (Mathieu, 04/08) : le
   « 4,6/5 » touchait le bord dore. On descend a 1,72 rem et on laisse la
   taille grandir avec l'ecran, jamais au-dela de l'ancienne valeur. */
.macaron-or .n {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.55rem, 6.4vw, 2.05rem); line-height: 1;
  color: var(--wine);
}
.macaron-or .n i { font-style: normal; font-size: .8em; font-weight: 500; color: var(--brass); }
.macaron-or .etoiles { color: #c2902e; font-size: .78rem; letter-spacing: .14em; }
.macaron-or .src {
  font-family: var(--display); font-style: italic; font-size: .58rem; font-weight: 600;
  color: var(--ink-2); text-align: center; line-height: 1.25; padding-inline: 10px;
}
@media (min-width: 700px) { .macaron-or { width: 130px; height: 130px; top: 27svh; left: 28px; } }

/* Médaille de laiton : métal brillant, reflet qui balaie la surface.
   Reprise de la médaille « Spritz N°1 » du Bistrot, dont le néon orange et
   le pictogramme de coupe étaient propres à cette maison. Ici le composant
   est générique et se pose sur une diapo de bannière comme le macaron.

   RÈGLE : cette médaille n'affiche QU'UN FAIT VÉRIFIÉ de
   Cave\DONNEES-VERIFIEES.md (« Plus de 35 ans », « Cave voûtée »…).
   Jamais un superlatif, jamais une distinction inventée. */
.ecusson-or {
  /* Même plan que le macaron de note : bord gauche et centre vertical
     alignés sur .macaron-or, la médaille et la note se remplacent au
     même endroit au changement de photo. */
  /* Meme taille et meme plan que le macaron de note : Mathieu les veut
     identiques, l'un sous l'autre a gauche. */
  position: absolute; top: 29svh; bottom: auto; left: 12px; z-index: 7;
  width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 32% 26%, #fdf0c0 0%, #efc979 36%, #cb9940 66%, #92672a 100%);
  box-shadow:
    0 18px 44px -12px rgba(0,0,0,.8),
    inset 0 3px 8px rgba(255,255,255,.7),
    inset 0 -8px 16px rgba(88,57,16,.6),
    inset 0 0 0 3px rgba(255,240,200,.65),
    inset 0 0 0 5.5px rgba(122,86,38,.6);
  transform: rotate(-6deg);
}
.ecusson-or::after {
  content: ""; position: absolute; top: -30%; left: -80%; width: 50%; height: 160%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%);
  transform: rotate(8deg);
  animation: medaille-brille 2.7s ease-in-out infinite;
}
@keyframes medaille-brille { 0% { left: -80%; } 55% { left: 135%; } 100% { left: 135%; } }
.ecusson-or .pictogramme { width: 30px; height: 30px; color: #6b4715; filter: drop-shadow(0 1px 2px rgba(255,240,200,.8)); }
.ecusson-or b {
  font-family: var(--plume); font-weight: 400; font-size: 2.7rem; line-height: .9;
  color: #5d3c0f;
  text-shadow: 0 1px 0 rgba(255,240,200,.75), 0 2px 5px rgba(90,60,10,.45);
}
.ecusson-or i {
  font-style: normal; font-family: var(--display); font-weight: 700;
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: #4a3110; margin-top: 3px; margin-left: .26em;
}
@media (min-width: 700px) { .ecusson-or { width: 130px; height: 130px; left: 28px; top: 27svh; bottom: auto; } .ecusson-or b { font-size: 2.3rem; } }
/* Pendant la diapo qui porte la médaille, la note s'efface : les deux
   occupent le même emplacement, jamais l'un par-dessus l'autre. */
.banniere.sur-ecusson .macaron-or { opacity: 0; pointer-events: none; }
.macaron-or { transition: opacity .8s ease, transform .25s; }
.article-corps figure { position: relative; }
.article-corps figure .ecusson-or { bottom: auto; top: 14px; left: 14px; transform: rotate(-6deg) scale(.82); transform-origin: top left; }

/* En-tête posé sur la bannière : enseigne en clair tant qu'on n'a pas défilé */
.site-header.sur-banniere:not(.scrolled) .brand { color: var(--creme); text-shadow: 0 2px 10px rgba(0,0,0,.75); }
.site-header.sur-banniere:not(.scrolled) .brand small { color: var(--brass-2); text-shadow: 0 1px 6px rgba(0,0,0,.85); }

/* ---------- Hero ---------- */
.hero {
  display: grid; place-items: center; text-align: center;
  position: relative; overflow: hidden; padding: 102px 0 14px;
}
@media (min-width: 880px) { .hero { padding: 130px 0 30px; } }
.halo {
  position: absolute; inset: -20%;
  background: radial-gradient(ellipse 60% 45% at 50% 40%, rgba(200,154,82,.28) 0%, rgba(106,32,48,.10) 45%, transparent 70%);
  will-change: transform;
}
.bouteilles {
  position: absolute; bottom: -2vh; left: 50%; transform: translateX(-50%);
  width: min(1100px, 140vw); color: rgba(23,19,16,.13); will-change: transform;
}
.hero-inner { position: relative; z-index: 2; padding-inline: var(--gutter); }
.hero .sur {
  display: inline-block;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(.95rem, 2.8vw, 1.3rem); letter-spacing: .18em;
  text-transform: uppercase; color: var(--vichy-fonce);
}
.hero h1 { font-size: clamp(2.5rem, 9vw, 6.8rem); margin: .15em 0 0; color: var(--ink); font-weight: 500; }
.hero .grand-plume {
  font-family: var(--plume); font-size: clamp(3.6rem, 16vw, 12rem);
  color: var(--wine); line-height: .92; display: block; margin-top: -.06em; font-weight: 400;
}
.hero .sous {
  max-width: 640px; margin: 24px auto 0; color: var(--ink-2);
  font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-style: italic; line-height: 1.55;
}
.hero .flourish { width: min(400px, 72vw); margin: 4px auto 0; color: var(--brass); display: block; }
/* Ligne d'informations écrite à la main, rien qui ressemble à un bouton */
.infos-ligne {
  margin-top: 26px; font-style: italic;
  font-size: clamp(1.02rem, 2.8vw, 1.3rem); color: var(--ink-2);
}
.infos-ligne .point { color: var(--brass); font-style: normal; padding-inline: .35em; }
.lien-avis {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 44px;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 2.6vw, 1.15rem); color: var(--wine);
  border-bottom: 1.5px solid var(--brass); padding-bottom: 2px;
  transition: color .3s, gap .3s;
}
.lien-avis:hover { color: var(--vichy-fonce); gap: 14px; }
.lien-avis .etoile { color: var(--vichy); font-style: normal; }

/* ---------- Présentation : le texte après le défilant ---------- */
.presentation { text-align: center; padding: clamp(36px, 7vw, 80px) 0 clamp(28px, 5vw, 50px); }
.presentation .grande-ligne {
  font-style: italic; color: var(--ink-2);
  font-size: clamp(1.22rem, 3.6vw, 1.7rem); line-height: 1.5;
  max-width: 680px; margin: 0 auto;
}

/* ---------- Les envies : polaroids à faire défiler au pouce ---------- */
.envies { padding: clamp(16px, 3vw, 50px) 0 clamp(30px, 5vw, 70px); }
.envies .entete { text-align: center; margin-bottom: 18px; padding-inline: var(--gutter); }
.envies .entete .titre-plume { font-family: var(--plume); font-size: clamp(2rem, 7vw, 3.2rem); color: var(--wine); line-height: 1.1; }
.envies-piste {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px var(--gutter) 26px;
  scrollbar-width: none;
}
.envies-piste::-webkit-scrollbar { display: none; }
.envie {
  flex: 0 0 min(72vw, 300px); scroll-snap-align: center;
  position: relative; display: block; background: var(--creme);
  border: 1px solid rgba(23,19,16,.45);
  padding: 10px 10px 12px;
  box-shadow: 0 16px 32px -22px rgba(23,19,16,.6);
  transform: rotate(-1.6deg);
  transition: transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s;
}
.envie:nth-child(even) { transform: rotate(1.4deg); }
.envie:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 24px 44px -24px rgba(23,19,16,.65); }
/* Punaise vichy en haut du polaroid */
.envie::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; z-index: 2;
  background:
    repeating-linear-gradient(0deg, rgba(140,47,43,.6) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, rgba(140,47,43,.6) 0 4px, transparent 4px 8px),
    #faf5ea;
  box-shadow: inset 0 0 0 2px var(--creme), inset 0 0 0 3px rgba(23,19,16,.4), 0 3px 6px -2px rgba(23,19,16,.5);
}
.envie img { width: 100%; aspect-ratio: 1 / 1.04; object-fit: cover; }
.envie .legende {
  font-family: var(--plume); font-size: clamp(1.35rem, 4.5vw, 1.6rem);
  color: var(--wine); text-align: center; margin-top: 8px; line-height: 1.1;
}
/* Dernière carte : l'invitation vers la galerie */
.envie.vers-galerie {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 100%;
  background:
    repeating-linear-gradient(0deg, rgba(140,47,43,.16) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(90deg, rgba(140,47,43,.16) 0 12px, transparent 12px 24px),
    var(--creme);
}
.envie.vers-galerie .grand { font-family: var(--plume); font-size: clamp(1.9rem, 6vw, 2.5rem); color: var(--wine); line-height: 1.1; }
.envie.vers-galerie .fleche { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--vichy-fonce); border-bottom: 1.5px solid var(--vichy); padding-bottom: 2px; }
@media (min-width: 1024px) {
  .envies-piste { padding-inline: max(var(--gutter), calc((100vw - 1180px) / 2)); }
  .envie { flex-basis: 250px; }
}

/* ---------- Bandeau défilant ---------- */
.marquee { overflow: hidden; padding: 16px 0; white-space: nowrap; border-block: 1px solid rgba(23,19,16,.35); }
.marquee .track { display: inline-flex; align-items: center; gap: 16px; animation: defile 32s linear infinite; padding-right: 16px; }
.marquee.inverse .track { animation-direction: reverse; }
.marquee .mot {
  background: var(--creme); border: 1.5px solid var(--vichy);
  border-radius: 50% 50% 50% 50% / 16% 16% 16% 16%;
  padding: 4px 18px; font-family: var(--plume); font-size: clamp(1.2rem, 3vw, 1.45rem); color: var(--vichy-fonce);
}
.marquee .sep { font-family: var(--display); font-style: italic; color: var(--creme); text-shadow: 0 1px 0 rgba(23,19,16,.3); font-size: 1.1rem; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Révélation au défilement ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1); }
.reveal.on { opacity: 1; transform: none; }

/* ---------- Chapitres ---------- */
.chapitre {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(22px, 5vw, 90px);
  padding: clamp(34px, 7vw, 130px) 0;
  align-items: center;
}
@media (min-width: 880px) {
  .chapitre { grid-template-columns: 1fr 1fr; }
  .chapitre.inverse .txt { order: 2; } .chapitre.inverse .media-bois { order: 1; }
}
.lettrine { font-family: var(--plume); font-size: clamp(2.8rem, 8vw, 5rem); color: var(--brass); line-height: 1; display: block; }
.chapitre h2 { font-size: clamp(1.8rem, 5.4vw, 3.6rem); margin: 8px 0 20px; color: var(--ink); }
.chapitre h2 em { color: var(--wine); }
.chapitre p { color: var(--ink-2); max-width: 520px; font-size: clamp(1.05rem, 2.6vw, 1.12rem); }
.souligne { position: relative; display: inline-block; }
.souligne .trace { position: absolute; left: -2%; bottom: -12px; width: 104%; color: var(--vichy); }
.lien-txt {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; min-height: 48px;
  font-family: var(--display); font-style: italic; font-size: clamp(1.08rem, 2.4vw, 1.2rem); font-weight: 500;
  color: var(--vichy-fonce); border-bottom: 1.5px solid var(--vichy); padding-bottom: 4px;
  transition: gap .3s, color .3s;
}
.lien-txt:hover { gap: 22px; color: var(--wine); }

.media-bois { position: relative; }
.media-bois .interieur { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
@media (max-width: 879px) { .media-bois .interieur { aspect-ratio: 4 / 4.4; } }
.media-bois .interieur img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.chapitre:hover .interieur img { transform: scale(1.06); }
.coin-nappe {
  position: absolute; top: 0; right: 0; width: 78px; height: 78px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background:
    repeating-linear-gradient(0deg, rgba(140,47,43,.5) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, rgba(140,47,43,.5) 0 8px, transparent 8px 16px),
    #faf5ea;
  opacity: .92;
}
.media-bois .etiquette {
  position: absolute; bottom: 14px; left: 14px;
  font-family: var(--plume); font-size: clamp(1.3rem, 3vw, 1.6rem);
  letter-spacing: 0; text-transform: none; font-weight: 400; padding: 3px 22px;
}
.mot-travers {
  position: absolute; z-index: 3; right: -8px; bottom: 34px;
  font-family: var(--plume); font-size: clamp(2rem, 5.5vw, 3.6rem); color: var(--creme);
  text-shadow: 0 2px 10px rgba(23,19,16,.6), 0 0 2px rgba(23,19,16,.85);
  transform: rotate(-6deg);
}

/* ---------- Devise ---------- */
.devise { padding: clamp(46px, 10vw, 140px) 0; text-align: center; position: relative; }
.devise::before {
  content: ""; position: absolute; inset: 0; opacity: .16;
  background:
    repeating-linear-gradient(0deg, rgba(140,47,43,.55) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, rgba(140,47,43,.55) 0 14px, transparent 14px 28px);
}
.devise .inner { position: relative; z-index: 2; }
.devise .assiette {
  width: min(640px, 92vw); margin: 0 auto; background: var(--creme);
  border: 1px solid var(--ink); border-radius: 6px;
  padding: clamp(28px, 6vw, 60px);
  box-shadow: 0 24px 50px -30px rgba(23,19,16,.5); position: relative;
}
.devise .assiette::before {
  content: ""; position: absolute; inset: 22px; opacity: .35;
  background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(106,32,48,.35) 34px 35px);
}
.devise .assiette > * { position: relative; }
.devise .seal { width: clamp(80px, 18vw, 100px); height: auto; margin: 0 auto 20px; color: var(--wine); animation: tourne 26s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.devise p.latin { font-family: var(--plume); font-size: clamp(1.9rem, 5.5vw, 3.4rem); color: var(--ink); line-height: 1.25; }
.devise p.latin em { color: var(--wine); font-style: normal; }
.devise cite { display: block; margin-top: 14px; font-style: italic; font-family: var(--display); font-size: clamp(.9rem, 2vw, 1rem); color: var(--ink-3); }
.devise .paraphe { width: 170px; margin: 8px auto 0; color: var(--wine); display: block; }

/* ---------- Avis ---------- */
.avis { padding: clamp(44px, 9vw, 130px) 0; }
.avis .entete { text-align: center; margin-bottom: clamp(30px, 5vw, 52px); }
.avis h2 { font-size: clamp(1.9rem, 5vw, 3.4rem); margin-top: 14px; }
.avis h2 em { color: var(--wine); }
.avis-grille { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 880px) { .avis-grille { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.carte-avis {
  background: var(--creme); border: 1px solid rgba(23,19,16,.4);
  border-top: 5px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--vichy) 0 10px, var(--creme) 10px 20px) 5;
  padding: 24px; transition: transform .3s, box-shadow .3s;
}
.carte-avis:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -20px rgba(23,19,16,.5); }
.carte-avis .etoiles { color: var(--vichy); letter-spacing: .16em; margin-bottom: 10px; }
.carte-avis p { font-style: italic; color: var(--ink-2); font-size: .98rem; }
.carte-avis .qui { margin-top: 14px; font-family: var(--plume); font-size: 1.35rem; color: var(--vichy-fonce); }
.carte-avis .qui small { display: block; font-family: var(--display); font-style: italic; font-size: .82rem; color: var(--ink-3); margin-top: 2px; }
.avis .actions { display: flex; gap: 14px; justify-content: center; margin-top: clamp(28px, 5vw, 44px); flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 12px 28px; font-family: var(--display); font-weight: 500;
  font-size: clamp(.95rem, 2vw, 1.05rem); letter-spacing: .04em;
  border: 1.5px solid var(--ink); background: var(--creme); color: var(--ink);
  transition: transform .3s, box-shadow .3s, background .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(23,19,16,.5); }
.btn.vin { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.btn.vin:hover { background: var(--wine-deep); }

/* ---------- Buffet infos pratiques ---------- */
.buffet { padding: clamp(40px, 9vw, 130px) 0; }
.buffet .meuble { padding: clamp(14px, 3vw, 30px); }
.buffet .interieur { background: var(--paper-2); padding: clamp(22px, 5vw, 56px); }
.buffet h2 { font-size: clamp(1.9rem, 5.2vw, 3.6rem); color: var(--ink); }
.buffet h2 .plume { color: var(--wine); font-size: 1.25em; vertical-align: -.08em; }
.buffet .chapo { color: var(--ink-2); max-width: 560px; margin-top: 10px; font-size: clamp(1rem, 2.2vw, 1.1rem); font-style: italic; }
.tiroirs { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: clamp(24px, 5vw, 40px); }
@media (min-width: 700px) { .tiroirs { grid-template-columns: 1fr 1fr; gap: 14px; } }
.tiroir {
  display: block; background: var(--creme); border: 1px solid rgba(23,19,16,.4);
  padding: 20px 20px 20px 54px; position: relative;
  transition: transform .35s, box-shadow .35s;
}
.tiroir:hover { transform: translateX(8px); box-shadow: -8px 10px 24px -16px rgba(23,19,16,.5); }
.tiroir::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 14px; height: 14px;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8c98a, #a87c3c 60%, #7a5626);
  box-shadow: 0 2px 4px rgba(23,19,16,.4);
}
.tiroir .k { font-family: var(--plume); font-size: clamp(1.3rem, 3vw, 1.55rem); color: var(--vichy-fonce); margin-bottom: 2px; line-height: 1.1; }
.tiroir .v { font-family: var(--display); font-size: clamp(1.05rem, 2.4vw, 1.2rem); font-weight: 500; color: var(--ink); }
.tiroir small { display: block; font-family: var(--display); font-style: italic; font-size: .92rem; color: var(--ink-3); margin-top: 4px; }
.tiroir .stars { color: var(--vichy); letter-spacing: .14em; }
a.tiroir .v::after { content: " →"; color: var(--vichy-fonce); }

/* ---------- La vie de la maison (Instagram) ---------- */
.insta { padding: clamp(40px, 8vw, 120px) 0; background: var(--paper-2); }
.insta .entete { text-align: center; margin-bottom: clamp(26px, 5vw, 44px); }
.insta h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
.insta h2 .plume { color: var(--wine); font-size: 1.2em; }
.insta .entete p { font-style: italic; color: var(--ink-2); margin-top: 8px; }
.insta-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .insta-grille { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .insta-grille { grid-template-columns: repeat(6, 1fr); } }
.insta-grille a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(23,19,16,.4); }
.insta-grille img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.6,.2,1); }
.insta-grille a:hover img { transform: scale(1.07); }
.insta .action { text-align: center; margin-top: clamp(24px, 5vw, 40px); }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--wine-deep); color: var(--paper); text-align: center; }
.site-footer .lisere {
  height: 22px;
  background:
    repeating-linear-gradient(0deg, rgba(140,47,43,.55) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(90deg, rgba(140,47,43,.55) 0 7px, transparent 7px 14px),
    #faf5ea;
}
.site-footer .signature { font-family: var(--plume); font-size: clamp(2rem, 5vw, 3rem); color: var(--brass-2); padding-top: 32px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 18px var(--gutter) 0; }
.footer-nav a {
  font-family: var(--display); font-style: italic; font-size: 1rem;
  color: rgba(241,232,213,.85); min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent; transition: color .3s, border-color .3s;
}
.footer-nav a:hover { color: var(--brass-2); border-color: var(--brass-2); }
.site-footer .txt { padding: 10px 20px 36px; font-family: var(--display); font-style: italic; font-size: .95rem; color: rgba(241,232,213,.8); }
.site-footer .txt b { color: var(--brass-2); font-weight: 500; }
.site-footer .txt a { text-decoration: underline; text-underline-offset: 3px; }
.evin { display: block; margin-top: 8px; font-style: italic; font-size: .82rem; opacity: .75; }

/* =========================================================
   PAGES INTÉRIEURES — thème sombre « fin de soirée »
   Fond marron très foncé presque anthracite, texte papier,
   mêmes vichy, boiseries et calligraphie que l'accueil.
   ========================================================= */
body.sombre { background: #171310; color: rgba(241,232,213,.88); }
body.sombre h1, body.sombre h2, body.sombre h3, body.sombre h4 { color: var(--paper); }
body.sombre .site-header.scrolled { background: rgba(25,21,18,.94); box-shadow: 0 1px 0 rgba(241,232,213,.14); }
body.sombre .brand { color: var(--paper); }
body.sombre .brand small { color: var(--brass-2); }
body.sombre .burger { background: #221b15; border-color: rgba(241,232,213,.45); }
body.sombre .burger span { background: var(--paper); }
body.sombre .burger:hover { background: #2a211a; }
body.sombre ::selection { background: var(--brass-2); color: #171310; }
body.sombre .lien-txt { color: var(--brass-2); border-color: var(--brass); }
body.sombre .lien-txt:hover { color: var(--paper); }
body.sombre .annotation { color: var(--brass-2); }
body.sombre .marquee { border-color: rgba(241,232,213,.25); }

/* ---------- Tête de page : écriteau, calligraphie, photo ---------- */
.page-tete { padding: 116px var(--gutter) 0; text-align: center; max-width: 940px; margin: 0 auto; }
.page-tete h1 { font-size: clamp(2rem, 6.5vw, 3.8rem); margin-top: 18px; line-height: 1.05; }
.page-tete h1 .plume {
  display: block; font-family: var(--plume); font-weight: 400;
  font-size: clamp(3rem, 11vw, 6.2rem); line-height: .98; margin-top: .04em;
  color: var(--brass-2);
}
body:not(.sombre) .page-tete h1 .plume { color: var(--wine); }
.page-tete .chapo {
  margin: 16px auto 0; max-width: 660px; font-style: italic;
  font-size: clamp(1.02rem, 2.7vw, 1.3rem); color: rgba(241,232,213,.8); line-height: 1.6;
}
body:not(.sombre) .page-tete .chapo { color: var(--ink-2); }

.page-photo { max-width: 1020px; margin: clamp(24px, 5vw, 46px) auto 0; padding-inline: var(--gutter); }
.page-photo .cadre { position: relative; }
.page-photo .interieur { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
@media (min-width: 880px) { .page-photo .interieur { aspect-ratio: 21 / 10; } }
.page-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sections de page ---------- */
.section-page { padding: clamp(38px, 7vw, 100px) 0; }
.section-page .wrap-etroit { max-width: 860px; margin: 0 auto; padding-inline: var(--gutter); }
body.sombre .chapitre p { color: rgba(241,232,213,.78); }
body.sombre .chapitre h2 em { color: var(--brass-2); }
body.sombre .souligne .trace { color: var(--brass-2); }
body.sombre .sur-plume { color: var(--brass-2); }

/* ---------- Rubriques de carte (plats & vins) ---------- */
.rubrique { margin-top: clamp(42px, 8vw, 76px); }
.rubrique:first-child { margin-top: 0; }
.rubrique h2 { font-size: clamp(1.7rem, 4.6vw, 2.7rem); margin: 6px 0 8px; }
.rubrique .note { font-style: italic; color: rgba(241,232,213,.62); max-width: 580px; font-size: .98rem; }
body:not(.sombre) .rubrique .note { color: var(--ink-3); }
.plats { margin-top: 14px; }
.plat { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 13px 0; border-bottom: 1px dotted rgba(241,232,213,.3); align-items: baseline; }
body:not(.sombre) .plat { border-color: rgba(23,19,16,.35); }
.plat .nom { font-weight: 500; font-size: clamp(1.02rem, 2.6vw, 1.15rem); color: var(--paper); }
body:not(.sombre) .plat .nom { color: var(--ink); }
.plat .nom .star { color: var(--brass-2); }
.plat .prix { font-weight: 500; color: var(--brass-2); white-space: nowrap; font-size: clamp(1rem, 2.4vw, 1.1rem); }
body:not(.sombre) .plat .prix { color: var(--wine); }
.plat .desc { grid-column: 1 / -1; font-style: italic; font-size: .9rem; color: rgba(241,232,213,.55); }
body:not(.sombre) .plat .desc { color: var(--ink-3); }
.groupe-vins h3 { font-family: var(--plume); font-weight: 400; font-size: clamp(1.7rem, 4.5vw, 2.2rem); color: var(--brass-2); margin-top: clamp(28px, 5vw, 40px); }
body:not(.sombre) .groupe-vins h3 { color: var(--wine); }

/* ---------- Bande photo dans le contenu ---------- */
.bande-photo { margin: clamp(32px, 6vw, 56px) 0; }
.bande-photo .interieur { position: relative; overflow: hidden; aspect-ratio: 16 / 8; }
.bande-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mur de photos (galerie) : polaroids ---------- */
.mur-photos { columns: 2; column-gap: 12px; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 880px) { .mur-photos { columns: 3; column-gap: 18px; } }
.mur-photos figure {
  break-inside: avoid; margin: 0 0 14px; background: var(--creme);
  padding: 8px 8px 4px; border: 1px solid rgba(0,0,0,.55);
  box-shadow: 0 12px 26px -16px rgba(0,0,0,.8);
}
.mur-photos img { width: 100%; display: block; }
.mur-photos figcaption {
  font-family: var(--plume); font-size: clamp(1.15rem, 3vw, 1.4rem);
  color: var(--wine); text-align: center; padding: 6px 4px 8px; line-height: 1.1;
}

/* ---------- Note globale (page avis) ---------- */
.note-globale { text-align: center; margin-bottom: clamp(28px, 5vw, 44px); }
.note-globale .chiffre { font-family: var(--plume); font-size: clamp(4rem, 14vw, 6.5rem); color: var(--wine); line-height: 1; }
.note-globale .etoiles { color: var(--vichy); letter-spacing: .2em; font-size: 1.3rem; }
.note-globale .sous { font-style: italic; color: var(--ink-3); margin-top: 6px; }
body.sombre .note-globale .chiffre, body.sombre .note-globale .etoiles { color: var(--brass-2); }
body.sombre .note-globale .sous { color: rgba(241,232,213,.7); }

/* ---------- Cartes du journal ---------- */
.cartes-journal { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 880px) { .cartes-journal { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.carte-post { display: block; background: var(--creme); border: 1px solid rgba(0,0,0,.5); box-shadow: 0 14px 30px -20px rgba(0,0,0,.8); transition: transform .35s, box-shadow .35s; }
.carte-post:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgba(0,0,0,.85); }
.carte-post .visuel { aspect-ratio: 16 / 10; overflow: hidden; margin: 8px 8px 0; }
.carte-post .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-post .corps { padding: 14px 18px 18px; }
.carte-post .date { font-family: var(--plume); font-size: 1.25rem; color: var(--vichy-fonce); }
.carte-post h3 { color: var(--ink); font-size: 1.2rem; margin-top: 4px; }
.carte-post p { color: var(--ink-2); font-size: .95rem; margin-top: 6px; font-style: italic; }

/* ---------- Article (journal, mentions) ---------- */
.article-corps { max-width: 720px; margin: 0 auto; padding-inline: var(--gutter); }
.article-corps p { margin: 0 0 1.15em; color: var(--ink-2); font-size: clamp(1.05rem, 2.6vw, 1.15rem); line-height: 1.75; }
.article-corps h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 1.6em 0 .6em; }
.article-corps h2::before { content: "✦ "; color: var(--brass); }
.article-corps blockquote {
  font-family: var(--plume); font-size: clamp(1.6rem, 4.5vw, 2.2rem); color: var(--wine);
  line-height: 1.3; margin: 1.4em 0; padding-left: 22px; border-left: 2px solid var(--vichy);
}
.article-corps figure { margin: 1.6em 0; background: var(--creme); padding: 8px 8px 4px; border: 1px solid rgba(23,19,16,.5); }
.article-corps figcaption { font-family: var(--plume); font-size: 1.3rem; color: var(--wine); text-align: center; padding: 6px 4px 8px; }
.article-corps .encadre {
  background: var(--paper-2); border: 1px dashed var(--wine);
  padding: 16px 20px; margin: 1.4em 0; font-style: italic; font-size: .98rem; color: var(--ink-2);
}

/* ---------- Clôture centrée ---------- */
.cloture { text-align: center; padding: clamp(30px, 6vw, 60px) var(--gutter) clamp(50px, 8vw, 90px); }
.cloture .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
body.sombre .btn { background: transparent; border-color: rgba(241,232,213,.6); color: var(--paper); }
body.sombre .btn:hover { background: rgba(241,232,213,.1); }
body.sombre .btn.vin { background: var(--vichy); border-color: var(--vichy); color: var(--creme); }
body.sombre .btn.vin:hover { background: var(--vichy-fonce); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .trace path { stroke-dashoffset: 0 !important; }
  .cursor, .cursor-ring { display: none !important; }
  body.curseur-actif, body.curseur-actif a, body.curseur-actif button { cursor: auto; }
  html { scroll-behavior: auto; }
}

/* Les <picture> des images responsives ne participent pas a la mise en page. */
picture { display: contents; }
/* Les attributs width/height des images responsives servent au ratio, jamais a
   figer la hauteur : sans ceci, height="2000" etire les polaroids en portrait
   (bug vu sur la piste "De quoi vous donner faim", retour Mathieu 29/07).
   Les regles de classe qui posent height:100% (banniere, tuiles, grilles)
   gardent la main, leur specificite est superieure. */
picture > img { height: auto; }


/* =========================================================
   =========================================================
   BLOC CAVE — mécanique propre à La Cave du Fromager
   =========================================================
   Tout ce qui précède est le système commun aux deux maisons,
   transplanté du Bistrot. Tout ce qui suit n'existe QUE chez
   la Cave, parce que la Cave a trois choses que le Bistrot n'a
   pas : on y réserve, on y répond au téléphone, et on n'y règle
   ni par carte ni sans être prévenu.

   Trois ajouts de fond, dans cet ordre :
   1. accessibilité — lien d'évitement, focus visible, 48 px partout ;
   2. le dock — bouton Réserver primaire, Itinéraire, lien téléphone ;
   3. l'encart modal de confirmation de réservation (.encart-resa).

   Rien ici ne redéfinit une classe du système commun autrement que
   pour la compléter. Une valeur qui doit changer pour les DEUX
   maisons se change PLUS HAUT, pas ici.
   ========================================================= */

/* ---------- 1. Accessibilité ----------------------------- */

/* Lien d'évitement : premier élément du <body>, invisible tant
   qu'il n'a pas le focus, envoie au <main id="contenu">. */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 12px 22px;
  background: var(--wine-deep); color: var(--creme);
  font-family: var(--display); font-weight: 500;
}
.evitement:focus { left: 8px; top: 8px; }

/* Focus visible au clavier. Absent du système du Bistrot : sans lui,
   un visiteur au clavier ne sait jamais où il se trouve. */
:focus-visible { outline: 3px solid var(--brass-2); outline-offset: 2px; }
/* Sur les fonds sombres (menu plein écran, dock, pied de page), le
   laiton manque de contraste : on passe à la crème. */
.menu :focus-visible,
.barre-app :focus-visible,
.site-footer :focus-visible { outline-color: var(--creme); }

/* Zones tactiles : le système commun est à 48 px presque partout,
   deux exceptions restaient à 44. On les remonte. */
.footer-nav a, .lien-avis { min-height: 48px; }

/* Masqué à l'oeil, lu par les lecteurs d'écran. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------- 2. Le dock : réserver, y aller, appeler ------- */

/* Le dock de la Cave porte QUATRE cellules là où le Bistrot en a
   trois : burger, Réserver, Itinéraire, Appeler. L'ordre est imposé
   (Réserver en primaire) et ne se rejoue pas page par page. */

/* Réserver est un <button> — il ouvre l'encart, il ne navigue pas.
   On neutralise la bordure native pour qu'il ait exactement
   l'allure des <a> voisins. */
.barre-app button.cel {
  border: 0; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}

/* Le primaire du système, .cel.plein, sert ici à Réserver. */
.barre-app .cel.plein { background: var(--wine); }
.barre-app .cel.plein:hover { background: var(--vichy); }

/* Itinéraire : secondaire, jamais effacé — c'est le geste le plus
   fréquent des clients (483 demandes en 30 jours contre 24
   réservations). Un filet crème le détache du fond du dock. */
.barre-app .cel.contour { box-shadow: inset 0 0 0 1px rgba(250,245,234,.34); }

/* À 360-400 px, quatre cellules et un burger tiennent tout juste :
   on resserre les gouttières plutôt que de tronquer un libellé. */
@media (max-width: 400px) {
  .barre-app { gap: 3px; padding: 6px; }
  .barre-app .cel { font-size: .78rem; padding-inline: 2px; gap: 2px; }
  .barre-app .cel svg { width: 20px; height: 20px; }
  .burger.dans-barre { flex: 0 0 48px; min-width: 48px; }
}

/* Lien téléphone : discret, souligné, jamais déguisé en bouton. Il se
   pose sous les actions du premier écran et dans l'encart. */
.lien-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 4px 8px;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.12rem); color: var(--wine);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: var(--brass);
  transition: color .3s;
}
.lien-tel:hover { color: var(--vichy-fonce); }
/* Sur photo ou fond sombre : crème, sinon il disparaît. */
.banniere .lien-tel,
body.sombre .lien-tel,
.site-footer .lien-tel { color: var(--creme); text-decoration-color: var(--brass-2); }
.banniere .lien-tel:hover,
body.sombre .lien-tel:hover,
.site-footer .lien-tel:hover { color: #fff; }

/* Horaires du jour, écrits par maison.js dans [data-horaires-jour] et
   [data-horaires-note]. Le texte du HTML sert de repli : il ne doit
   jamais être vide, et jamais contredire ce que le script écrira. */
.b-infos [data-horaires-jour] { font-style: normal; font-weight: 600; color: var(--creme); }
.infos-ligne [data-horaires-jour] { font-style: normal; font-weight: 600; color: var(--ink); }
[data-horaires-note] { font-style: italic; }

/* ---------- 3. L'encart de confirmation « Réserver » ------ */

/* Pourquoi un encart et pas un lien direct vers Zenchef : le règlement
   sur place se fait en espèces ou par chèque, et la réservation en
   ligne demande une empreinte bancaire de 40 € par couvert en
   garantie. Les deux se disent AVANT le widget, sinon Zenchef
   contredit le site trois secondes plus tard.
   maison.js gère l'ouverture, la fermeture, Échap et la conversion. */
.encart-resa {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; padding: 16px;
}
.encart-resa[hidden] { display: none; }
.encart-fond {
  position: absolute; inset: 0;
  background: rgba(23,19,16,.78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.encart-boite {
  position: relative; z-index: 1;
  width: min(94vw, 460px); max-height: calc(100svh - 32px); overflow-y: auto;
  background: var(--creme); border: 1px solid var(--ink);
  box-shadow: 0 34px 74px -28px rgba(0,0,0,.85);
  padding: clamp(28px, 6vw, 40px) clamp(18px, 5vw, 30px) clamp(20px, 4vw, 28px);
  text-align: center;
}
/* Le liseré du pied de page, repris en tête de l'encart : c'est la
   signature de la maison, elle rattache la boîte au reste du site. */
.encart-boite::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(140,47,43,.55) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(90deg, rgba(140,47,43,.55) 0 7px, transparent 7px 14px),
    #faf5ea;
}
.encart-boite > * { position: relative; }
.encart-boite h2 { font-size: clamp(1.5rem, 5vw, 2rem); color: var(--ink); margin-bottom: 4px; }
.encart-boite h2 .plume { color: var(--wine); font-size: 1.3em; vertical-align: -.08em; }
.encart-boite p { color: var(--ink-2); font-size: 1rem; margin-top: 12px; }
.encart-boite .btn { width: 100%; margin-top: 18px; }
.encart-boite .petit { font-size: .92rem; font-style: italic; color: var(--ink-3); }
.encart-fermer {
  position: absolute; top: 10px; right: 6px; z-index: 3;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink);
  font-family: var(--display); font-size: 1.9rem; line-height: 1;
}
.encart-fermer:hover { color: var(--vichy-fonce); }
body.sans-defilement { overflow: hidden; }

/* Encart de paiement : le rappel espèces/chèque. Il se pose dans
   l'encart de réservation ET en clair dans les pages. Textes exacts
   imposés, voir _partials/SYSTEME-GRAPHIQUE.md. */
.encart-paiement {
  background: var(--paper-2); border-left: 4px solid var(--wine);
  padding: 12px 16px; margin-top: 16px;
  font-family: var(--display); font-size: .98rem; color: var(--ink-2);
  text-align: left;
}
.encart-paiement strong { color: var(--vichy-fonce); font-weight: 600; }
body.sombre .encart-paiement { background: rgba(241,232,213,.09); color: rgba(241,232,213,.86); border-left-color: var(--brass); }
body.sombre .encart-paiement strong { color: var(--brass-2); }

/* Encadré de rappel utilisable hors article. Mêmes valeurs que
   .article-corps .encadre : à l'intérieur d'un article, la règle plus
   spécifique du système commun garde la main, à l'identique. */
.encadre {
  background: var(--paper-2); border: 1px dashed var(--wine);
  padding: 16px 20px; margin: 1.4em 0;
  font-style: italic; font-size: .98rem; color: var(--ink-2);
}
body.sombre .encadre { background: rgba(241,232,213,.07); border-color: var(--brass); color: rgba(241,232,213,.82); }

/* ---------- 4. Deux conséquences du dock ------------------ */

/* La Cave n'a pas d'en-tête fixe : la navigation est entièrement dans
   le dock, en bas. Chez le Bistrot, .page-tete réserve 116 px en haut
   pour passer sous la barre fixe — ici cette barre n'existe pas, et
   ces 116 px deviennent un trou en haut du premier écran, là où le
   téléphone a le moins de place. On les ramène à une respiration.
   Écrit avec :has() : le jour où une page pose un .site-header, la
   valeur du système commun revient d'elle-même. Un navigateur qui ne
   connaît pas :has() ignore la règle et garde les 116 px — jamais de
   titre passé sous une barre. */
body:not(:has(.site-header)) .page-tete { padding-top: clamp(30px, 7vw, 58px); }

/* Le macaron de note est réglé pour la bannière (top: 29svh, mesuré
   sur la hauteur de l'écran). Posé dans la photo d'une page
   intérieure, ce 29svh tombe n'importe où selon le téléphone. Dans un
   .page-photo, il se cale sur le coin bas-gauche du cadre. */
.page-photo .macaron-or { top: auto; bottom: 14px; left: 14px; }
@media (min-width: 700px) { .page-photo .macaron-or { bottom: 22px; left: 22px; } }

/* L'écusson des 39 ans accompagne le macaron dans le cadre : à sa droite, même
   ligne, même taille. Sans cette règle il héritait de sa position d'accueil
   (top: 29svh) et tombait au milieu de la photo, à moitié sous le dock.
   Les deux médailles vont ensemble sur toutes les pages — homogénéité
   demandée par Mathieu le 04/08. */
.page-photo .ecusson-or {
  top: auto; bottom: 14px; left: calc(14px + 112px + 10px); right: auto;
  width: 112px; height: 112px;
}
@media (min-width: 700px) {
  .page-photo .ecusson-or { bottom: 22px; left: calc(22px + 130px + 12px); width: 130px; height: 130px; }
}
/* Sous 430 px, deux médailles côte à côte mangent la photo : on ne garde que
   la note, qui est ce qui fait venir. */
@media (max-width: 430px) { .page-photo .ecusson-or { display: none; } }

/* ---------- Dernier mot sur les images ------------------- */
/* Répétition volontaire de la règle du système commun : elle doit
   rester la dernière du fichier. L'attribut height d'une image
   responsive sert au ratio, jamais à figer une hauteur — les règles
   de classe qui posent height:100% restent prioritaires, leur
   spécificité est supérieure. */
picture { display: contents; }
picture > img { height: auto; }

/* ---------- Les deux médailles du bandeau ----------
   Demande de Mathieu (30/07) : la note et l'ancienneté visibles EN PERMANENCE
   pendant tout le défilement, même taille, l'une au-dessus de l'autre, à
   gauche. Avant, l'écusson vivait dans une diapo — il n'apparaissait qu'un
   temps et faisait disparaître le macaron. La colonne les tient toutes deux :
   chacune reprend sa place dans le flux, plus de superposition possible. */
.b-medailles {
  /* MEME clamp que .pile-droite (03/08) : les deux colonnes descendent du
     meme montant sous la tete de banniere. Une valeur qui ne bouge que d un
     cote et l autre colonne passe sous le titre. */
  position: absolute; top: clamp(134px, 19.5svh, 195px); left: 12px; z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.b-medailles .macaron-or,
.b-medailles .ecusson-or {
  /* RELATIVE, surtout pas STATIC. Le reflet de l'écusson est un ::after en
     position absolue, découpé par l'overflow: hidden du cercle. En static, il
     cessait de se repérer sur la médaille et prenait la bannière entière comme
     référence : une barre blanche traversait la photo et le macaron du dessus. */
  position: relative; top: auto; left: auto; right: auto;
  width: 112px; height: 112px; flex: 0 0 auto;
  overflow: hidden;
}
/* Pastilles DROITES, demande de Mathieu (30/07). Les deux médailles étaient
   inclinées en sens contraire pour éviter l'effet autocollant ; posées l'une
   sous l'autre, l'inclinaison donnait surtout l'impression qu'elles allaient
   glisser. On les redresse, et on empêche toute autre règle de les repencher. */
.b-medailles .macaron-or,
.b-medailles .ecusson-or { transform: none; }
.b-medailles .macaron-or:hover { transform: scale(1.06); }
.b-medailles .ecusson-or:hover { transform: none; }
@media (max-width: 560px) {
  /* Le top est pose plus bas, dans le bloc 640 px commun a la pile. */
  .b-medailles { gap: 10px; }
  .b-medailles .macaron-or,
  .b-medailles .ecusson-or { width: 88px; height: 88px; }
}
/* L'échange macaron/écusson n'a plus lieu d'être : les deux restent. */
.banniere.sur-ecusson .macaron-or { opacity: 1; }

/* Les textes de l'écusson étaient calibrés pour un disque de 142 px. Ramené à
   112 px pour égaler le macaron, « 39 ans » et « depuis 1987 » débordaient du
   cercle et se faisaient couper par l'overflow: hidden. On redimensionne les
   deux lignes, on resserre l'interlettrage de l'année, et on autorise la
   médaille à se réduire encore sur petit écran. */
.b-medailles .ecusson-or b { font-size: 2.05rem; line-height: .88; }
/* « SINCE 1987 » agrandi le 03/08 à la demande de Mathieu : il était
   presque illisible sous le nombre d'années. */
.b-medailles .ecusson-or i { font-size: .74rem; letter-spacing: .12em; margin-top: 3px; margin-left: .12em; }
.b-medailles .ecusson-or .pictogramme { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .b-medailles .ecusson-or b { font-size: 1.6rem; }
  .b-medailles .ecusson-or i { font-size: .62rem; letter-spacing: .09em; }
}

/* Le zoom lent des photos accentuait le recadrage sur des images verticales :
   on l'adoucit, et on cadre un peu au-dessus du centre pour garder la voûte
   plutôt que le plateau de la table. */
@media (prefers-reduced-motion: no-preference) {
  .banniere .b-s.on img { animation: b-zoom 12s ease-out forwards; }
  @keyframes b-zoom { from { transform: scale(1); } to { transform: scale(1.03); } }
}
.banniere .b-s img { object-position: center 42%; }

/* ---------- Bandeau : photos ENTIÈRES sur ordinateur ----------
   Demande de Mathieu (30/07) : « je ne veux pas que ce soit zoomé sur le site
   web, on ne voit pas les photos ». Ses sept photos sont verticales ; la
   bannière fait 780 px de haut sur un écran large, donc un cadrage en cover
   n'en montrait plus que le tiers central.

   Sur ordinateur, la photo passe donc en « contain » : elle s'affiche en
   entier, rien n'est coupé. Les côtés sont comblés par un agrandissement
   flouté de la MÊME image (le dérivé 800 px, déjà téléchargé, donc aucun
   poids en plus), ce qui évite les deux bandes noires.

   Sur téléphone, on ne touche à rien : l'écran est vertical comme les photos,
   le cadrage en cover les remplit parfaitement, et c'est 99 % du trafic. */
@media (min-width: 900px) {
  .banniere .b-s::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: var(--fond) center / cover no-repeat;
    filter: blur(34px) brightness(.5) saturate(.85);
    transform: scale(1.15);
  }
  .banniere .b-s picture { position: relative; z-index: 1; display: block; height: 100%; }
  .banniere .b-s img { object-fit: contain; object-position: center; }
  /* Le zoom lent agrandirait l'image et la ferait déborder du cadre :
     il n'a de sens que sur un cadrage en cover. */
  .banniere .b-s.on img { animation: none; transform: none; }
}

/* ==========================================================================
   LA PILE VIVANTE — COLONNE V2
   --------------------------------------------------------------------------
   Reprise de la colonne du Bistrot validee par Mathieu le 03/08 sur maquette
   a trois variantes (CONTRAT-SEO-SITE, section 6, mise a jour du soir).
   Colonne stricte de 208 px, 196 px sur mobile : capsule clim, pastille et
   itineraire alignes au meme bord, neon centre au-dessus.

   Nos differences, voulues par Mathieu :
     - le neon suit les horaires de la Cave (service du soir, jeudi ferme) et
       affiche « at 19h00 » tant que le service n a pas commence ;
     - la pastille est un BOUTON qui ouvre l encart de reglement, lequel mene
       a Zenchef, jamais le lien direct ;
     - 22 degres, temperature de consigne donnee par Mathieu pour la Cave.
   Le nuage du souffle froid a ete retire sur son ordre : ne pas le remettre.
   ========================================================================== */
/* La pile et la colonne de medailles descendent ENSEMBLE, aux memes valeurs :
   le titre a grandi et occupe la tete de banniere. Si une seule des deux
   descend, l autre passe sous le titre. */
.pile-droite {
  position: absolute; right: clamp(12px, 3vw, 30px); top: clamp(134px, 19.5svh, 195px);
  z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 46%;
}

/* ---- Le neon, centre sur la colonne, trait epaissi et halo double ---- */
.neon-open {
  align-self: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.1rem, 7.6vw, 3.4rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: .12em;
  color: #fff3dd; transform: rotate(-2deg);
  -webkit-text-stroke: 1.1px #fff8ec; paint-order: stroke fill;
  /* SOCLE COMMUN, calibré pour les écrans sRGB — Chrome sur Android, la
     plupart des PC. Six couches d'ombre : deux blanches pour le tube, quatre
     orangées pour le halo. Elles s'additionnent en clair. */
  text-shadow:
    0 0 3px #fff, 0 0 7px #fff, 0 0 12px #ffd27a,
    0 0 22px #ffb300, 0 0 40px #ff9100, 0 0 72px #ff6d00,
    0 0 120px rgba(255, 110, 0, .95);
  animation: neon-buzz-orange 3.1s linear infinite;
}

/* POURQUOI L'IPHONE BRILLE PLUS QUE LE SAMSUNG, ET CE QU'ON EN FAIT.
   Safari rend les couleurs dans l'espace P3 de l'écran iPhone : un orange
   saturé y sort bien plus lumineux que le même code hexadécimal ramené au
   sRGB de Chrome sur Android. Le CSS est identique, c'est l'écran et le
   moteur qui diffèrent — rien à corriger côté iPhone.
   La parade : là où le P3 est disponible, on écrit les couleurs en P3 et on
   ALLÈGE légèrement le halo (l'iPhone était « un peu trop néon »). Partout
   ailleurs, le socle ci-dessus fait le travail et a été renforcé. */
@supports (color: color(display-p3 1 1 1)) {
  .neon-open {
    text-shadow:
      0 0 3px color(display-p3 1 1 1),
      0 0 7px color(display-p3 1 1 1 / .9),
      0 0 14px color(display-p3 1 .78 .35 / .85),
      0 0 26px color(display-p3 1 .66 .1 / .7),
      0 0 48px color(display-p3 1 .52 0 / .55),
      0 0 90px color(display-p3 1 .42 0 / .45);
  }
}
@keyframes neon-buzz-orange { 0%, 6%, 9%, 14%, 46%, 51.5%, 82%, 86%, 100% { opacity: 1; } 7% { opacity: .35; } 8% { opacity: 1; } 12% { opacity: .7; } 47% { opacity: .15; } 48% { opacity: 1; } 49% { opacity: .5; } 50% { opacity: 1; } 51% { opacity: .3; } 83% { opacity: .45; } 84% { opacity: 1; } 85% { opacity: .6; } }

/* L heure d ouverture, sous le neon, tant que le service n a pas commence.
   « at » en anglais comme le neon, l heure a la francaise comme on la dit ici. */
.neon-heure {
  align-self: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 3.4vw, 1.45rem); letter-spacing: .1em;
  color: #fff3dd; margin-top: -6px;
  text-shadow: 0 0 4px #fff, 0 0 12px #ffb300, 0 0 28px #ff8c00, 0 0 55px rgba(255,110,0,.7);
  animation: neon-buzz-orange 3.1s linear infinite; animation-delay: .4s;
}

/* Le jeudi et apres la fermeture : rouge, et plus aucune promesse. */
.neon-open.ferme { font-size: clamp(2.6rem, 8.6vw, 4rem); }
.neon-open.ferme {
  color: #ffe2e2; -webkit-text-stroke: 1.1px #ffecec;
  text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 16px #ff5a4a, 0 0 30px #e63020, 0 0 60px #c01808, 0 0 110px rgba(190,20,10,.95);
  animation-name: neon-buzz-rouge; animation-duration: 3.6s;
  font-size: clamp(1.7rem, 5.6vw, 2.6rem);
}
@keyframes neon-buzz-rouge { 0%, 11%, 15%, 54%, 59%, 88%, 92%, 100% { opacity: 1; } 12% { opacity: .4; } 13% { opacity: 1; } 14% { opacity: .65; } 55% { opacity: .25; } 56% { opacity: 1; } 57.5% { opacity: .5; } 89% { opacity: .6; } 90% { opacity: 1; } 91% { opacity: .4; } }

/* ---- La capsule clim : PLUS D ENCADRE, un halo sombre derriere les lettres ----
   Revirement de Mathieu le 03/08 (soiree), etat final v20260803d du Bistrot :
   les capsules de verre mangeaient l ecran. Le conteneur flex RESTE, c est lui
   qui tient la clim et la temperature ensemble ; ne disparaissent que le fond,
   la bordure, le rayon, le padding, la largeur fixe, le flou et l ombre portee.
   La lisibilite sur photo claire est desormais portee par deux couches d ombre
   noire posees AVANT les couches neon, lettre par lettre. */
.capsule-clim {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.neon-acclim {
  font-family: var(--display); font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #eafbff;
  text-shadow: 0 0 4px #fff, 0 0 10px #37e0ff, 0 0 24px #00c8ff, 0 0 50px #00a6ff, 0 0 85px rgba(0,150,255,.85);
  animation: neon-buzz-bleu 2.4s linear infinite;
}
.capsule-clim .neon-acclim { font-size: 1.06rem; text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.8), 0 0 4px #fff, 0 0 10px #37e0ff, 0 0 24px #00c8ff, 0 0 50px #00a6ff, 0 0 85px rgba(0,150,255,.85); }
@keyframes neon-buzz-bleu { 0%, 17%, 21%, 58%, 63%, 91%, 95%, 100% { opacity: 1; } 18% { opacity: .3; } 19% { opacity: 1; } 20% { opacity: .6; } 59% { opacity: .2; } 60% { opacity: 1; } 61.5% { opacity: .45; } 92% { opacity: .55; } 93% { opacity: 1; } 94% { opacity: .35; } }
.temp-clim {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: clamp(.84rem, 2.6vw, 1.02rem);
  letter-spacing: .14em; color: #d9f4ff;
  text-shadow: 0 0 6px rgba(120,215,255,.95), 0 0 16px rgba(0,166,255,.6);
}
.capsule-clim .temp-clim { margin-top: 0; text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.8), 0 0 6px rgba(120,215,255,.95), 0 0 16px rgba(0,166,255,.6); }
.temp-clim .vent { width: 30px; height: auto; overflow: visible; filter: drop-shadow(0 0 4px rgba(80,200,255,.75)); }
.temp-clim .vent path { stroke-dasharray: 10 7; animation: souffle-froid 1.5s linear infinite; }
.temp-clim .vent .v2 { animation-duration: 2s; }
.temp-clim .vent .v3 { animation-duration: 1.1s; }
@keyframes souffle-froid { to { stroke-dashoffset: -17; } }

/* ---- La pastille : PLUS D ENCADRE non plus. Chez nous c est un BOUTON. ----
   Comme la clim : ni fond, ni bordure, ni rayon, ni flou, ni ombre portee.
   C est un <button>, donc les habits par defaut du navigateur se retirent
   explicitement (appearance, background, border, padding) — le Bistrot n a
   pas ce probleme, sa pastille est un <span>.
   La hauteur de 48 px reste : c est une zone tactile, pas une decoration. */
.pill-dispo {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0;
  -webkit-appearance: none; appearance: none; background: none; border: 0;
  color: #d9f0b5; font-family: var(--display); font-weight: 600; font-size: .92rem;
  cursor: pointer; text-align: left; text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.pill-dispo:hover, .pill-dispo:focus-visible { color: #eaf8cf; transform: translateY(-2px); }
/* Sans bordure, le focus clavier n a plus de repere : on lui en rend un. */
.pill-dispo:focus-visible { outline: 2px solid rgba(151,196,89,.95); outline-offset: 5px; border-radius: 10px; }
/* Le halo sombre est porte par les lettres elles-memes, pas par un cadre. */
.pill-dispo .col span { text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 0 20px rgba(0,0,0,.8); }
.pill-dispo .pt { width: 9px; height: 9px; border-radius: 50%; background: #97c459; display: inline-block; animation: pulse-pt 1.6s ease-in-out infinite; flex: 0 0 auto; }
@keyframes pulse-pt { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pill-dispo .col { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.pill-dispo .sous-ligne { opacity: .92; margin-top: 1px; font-size: 1em; }

/* ---- L itineraire, a la largeur de la colonne, avec son mot d appel ----
   PIEGE vecu a l integration cote Bistrot : un <svg> sans attribut width vaut
   300 px intrinseques ; avec une largeur en pourcentage, le calcul de la pile
   absolue se fait sur ces 300 px et le neon « centre » part de travers. D ou
   une largeur EXPLICITE en pixels, jamais un pourcentage seul. */
.iti-anim { display: inline-block; line-height: 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.iti-anim svg { height: auto; overflow: visible; }
/* Resserre a 172 px et remonte de 8 px (Mathieu 03/08 soiree) : sans encadre,
   la pleine largeur de 208 px flottait et le bloc semblait decroche vers le bas. */
.iti-anim.iti-avec-mot { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: normal; margin-top: -8px; }
.iti-anim.iti-avec-mot svg { width: 172px; max-width: 100%; }
/* Le mot doit rester PLUS ETROIT que les textes au-dessus de lui : regle de
   Mathieu, c est ce qui tient la colonne debout maintenant qu il n y a plus
   de cadre pour la dessiner. */
.iti-mot {
  font-family: var(--display); font-weight: 600; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: #f3e9d6;
  text-shadow: 0 1px 6px rgba(0,0,0,.85), 0 0 14px rgba(232,200,126,.45);
  animation: mot-respire 2.6s ease-in-out infinite; white-space: nowrap;
}
@keyframes mot-respire { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.iti-anim .pointille { stroke-dasharray: 0.5 8; stroke-dashoffset: 0; animation: iti-marche 1.1s linear infinite; }
@keyframes iti-marche { to { stroke-dashoffset: -8.5; } }
.iti-anim .pin-or { animation: pin-pose 2.4s ease-in-out infinite; }
@keyframes pin-pose { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.iti-anim:hover .pointille { animation-duration: .45s; }
/* Le marcheur suit EXACTEMENT la courbe du pointille : copie caractere pour
   caractere du d ci-dessus, sinon il marche a cote du chemin. */
.iti-anim .marcheur {
  offset-path: path('M24 48 C 58 16, 100 64, 148 57.5');
  offset-rotate: 0deg;
  animation: marche-chemin 4.4s linear infinite;
}
@keyframes marche-chemin {
  0% { offset-distance: 0%; opacity: 0; }
  5% { opacity: 1; }
  88% { opacity: 1; }
  96%, 100% { offset-distance: 100%; opacity: 0; }
}

/* ---- Ou commencent les deux colonnes, selon la largeur ----------------------
   MEMES VALEURS pour la pile et pour les medailles a chaque palier : si une
   seule des deux descend, l autre passe sous le titre.

   Le Bistrot pose clamp(134px, 19.5svh, 195px) au bureau et
   clamp(168px, 21svh, 205px) sous 640 px. Sa tete de banniere tient en DEUX
   lignes : un titre calligraphie court et la ligne d horaires.
   La notre en compte QUATRE — « La Cave », « du Fromager » en Pinyon, la
   ligne descriptive du h1 (calee sur les requetes reelles, elle ne bouge pas)
   et le rappel Fondue / Raclette / Cave voutee. Mesure au navigateur, tete
   comprise entre le haut de la banniere et son dernier pixel :

     375 px de large ....... la tete finit a 243 px
     320 px ................ 252 px (la ligne descriptive passe a deux lignes)
     660 px ................ 307 px
     753 px ................ 339 px
     1009 px ............... 376 px, et la calligraphie mord encore sur la pile
     1425 px ............... 376 px, couloir large, plus aucun contact

   Les valeurs du Bistrot conviennent donc telles quelles a partir d environ
   1140 px, ou le couloir entre les medailles et la pile est plus large que le
   titre. En dessous, les colonnes passent sous la tete : c est la seule sortie,
   retrecir le couloir couperait la calligraphie et la retrecir elle-meme
   reviendrait sur l agrandissement demande. */
@media (max-width: 640px) {
  .pile-droite { top: clamp(258px, 32.5svh, 300px); max-width: 62%; gap: 10px; }
  .b-medailles { top: clamp(258px, 32.5svh, 300px); }
  .neon-open { font-size: 2.3rem; }
  .neon-open.ferme { font-size: 1.6rem; }
  .neon-heure { font-size: 1rem; margin-top: -4px; }
  .iti-anim.iti-avec-mot svg { width: 156px; }
  .capsule-clim .neon-acclim { font-size: .98rem; }
  .temp-clim { font-size: .8rem; letter-spacing: .1em; }
  .temp-clim .vent { width: 26px; }
  .pill-dispo { font-size: .82rem; }
  .iti-mot { font-size: .6rem; letter-spacing: .07em; }
}
/* Tablettes et petits portables : le couloir entre les deux colonnes n est pas
   encore plus large que la calligraphie (mesure a 753 px : « du Fromager »
   s arrete a 648 px, la pile commence a 558 px). Meme sortie que sur telephone,
   les deux colonnes passent sous la tete. Les tailles, elles, restent celles
   du bureau : seul le point de depart bouge. */
@media (min-width: 641px) and (max-width: 1139px) {
  .pile-droite,
  .b-medailles { top: clamp(340px, 44svh, 400px); }
}
@media (prefers-reduced-motion: reduce) {
  .neon-open, .neon-heure, .neon-acclim, .pill-dispo .pt, .iti-anim .pointille,
  .iti-anim .pin-or, .temp-clim .vent path, .iti-mot, .iti-anim .marcheur { animation: none; }
  .iti-anim .marcheur { opacity: 0; }
}

/* ==========================================================================
   5. BANDEAU DE CONSENTEMENT (CNIL)
   --------------------------------------------------------------------------
   Habillage du bloc _partials/bandeau-consentement.html. La mécanique est
   dans maison.js (§10), les textes dans le partiel. Rien ici ne pilote de
   comportement : on ne cache jamais un bouton en CSS, on ne le grise jamais,
   on ne joue jamais sur le contraste pour orienter le choix. Le fichier
   graphique n'est pas le bon endroit pour tricher, et il n'y a pas de bon
   endroit pour tricher.

   Verre dépoli sombre, filet d'or, Fraunces : le bandeau est le frère du
   dock qui vit juste en dessous. Les deux se lisent comme un seul objet.
   ========================================================================== */

.cdf-cookies {
  position: fixed; left: 12px; right: 12px;
  /* Page sans dock (cas théorique) : on se pose au ras du bas. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 380; /* au-dessus du dock (300), sous l'encart de réservation (400) */
  max-width: 560px; margin-inline: auto;
  padding: 14px 16px 12px;
  background: rgba(20, 15, 11, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(232, 200, 126, .34);
  border-radius: 24px;
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .85);
  color: var(--creme);
  font-family: var(--display);
  transition: transform .5s cubic-bezier(.22, .9, .3, 1.12), opacity .35s ease;
}

/* LE DÉCALAGE QUI COMPTE. Le dock est fixe à 12 px du bas et mesure
   ~74 px (56 px de cellule + 2 × 8 px de rembourrage + le filet) : son
   bord haut est donc à ~86 px. Le bandeau démarre à 96 px, ce qui laisse
   dix pixels d'air et garantit que ni Itinéraire ni Réserver ne sont
   jamais recouverts — 483 demandes d'itinéraire sur 30 jours, c'est le
   geste le plus fréquent du site, il ne se cache pas derrière un
   bandeau de cookies. env() ajoute l'encoche des iPhone par-dessus. */
body.avec-barre .cdf-cookies { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

.cdf-cookies[hidden] { display: none; }
/* État replié : hors écran, inerte, non focalisable au clavier. */
.cdf-cookies.range { transform: translateY(180%); opacity: 0; pointer-events: none; }

.cdf-cookies-titre {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 600;
  font-size: .95rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-2);
}
.cdf-cookies-texte {
  margin: 0;
  font-size: clamp(.92rem, 2.8vw, 1rem); line-height: 1.5;
  color: rgba(250, 245, 234, .92);
}

/* Les deux boutons : MÊME base, à la propriété près. Toute la
   déclaration de forme et de taille est ici, commune ; seules les
   couleurs se séparent en dessous. C'est volontaire — on ne peut pas
   dégrader l'un sans dégrader l'autre. */
.cdf-cookies-boutons { display: flex; gap: 10px; margin-top: 13px; }
.cdf-cookies-btn {
  flex: 1 1 0; width: 50%; min-width: 0; min-height: 48px;
  padding: 10px 12px; border-radius: 16px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.9rem, 2.9vw, 1rem); letter-spacing: .02em;
  text-align: center; cursor: pointer;
  transition: background .25s, box-shadow .25s, transform .2s;
}
.cdf-cookies-btn:active { transform: scale(.97); }
/* Refuser : filet crème plein sur verre sombre. Contraste du texte
   crème sur (20,15,11) largement au-delà du seuil AA. */
.cdf-cookies .cdf-refuser {
  background: transparent; border: 1.5px solid rgba(250, 245, 234, .58);
  color: var(--creme);
}
.cdf-cookies .cdf-refuser:hover { background: rgba(250, 245, 234, .12); }
/* Accepter : or plein, texte encre. Même taille, couleur différente —
   l'asymétrie de couleur à taille égale est la limite pratiquée sur
   les deux maisons, on ne va pas plus loin. */
.cdf-cookies .cdf-accepter {
  background: var(--brass-2); border: 1.5px solid var(--brass-2);
  color: var(--ink);
}
.cdf-cookies .cdf-accepter:hover { background: #d8ac63; border-color: #d8ac63; }

.cdf-cookies-pied {
  margin: 9px 0 0; text-align: center;
  font-size: .74rem; line-height: 1.45; color: rgba(250, 245, 234, .66);
}
.cdf-cookies-pied a {
  color: var(--brass-2);
  text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap;
}
.cdf-cookies :focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; }

/* Très petits téléphones : le dock se resserre à 400 px, le bandeau
   aussi. Les deux boutons restent côte à côte et de même largeur —
   les empiler donnerait au second une position d'accessoire. */
@media (max-width: 400px) {
  .cdf-cookies { left: 8px; right: 8px; padding: 12px 13px 10px; }
  .cdf-cookies-texte { font-size: .88rem; }
  .cdf-cookies-btn { font-size: .86rem; padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cdf-cookies { transition: opacity .3s ease; }
  .cdf-cookies.range { transform: none; }
  .cdf-cookies-btn:active { transform: none; }
}

/* =========================================================
   LE BOUTON MANICULE
   Ordre de Mathieu du 03/08 : la Cave doit l'avoir comme le
   Bistrot. Repris de Bistrot/site/assets/css/style-v2.css
   v20260803d (sections .btn-retour, manicule-pousse,
   manicule-rond), valeurs copiées à l'identique — même or,
   même ombre, mêmes durées.
   LE PORTAIL TROU NOIR QUI L'ACCOMPAGNAIT A ÉTÉ RETIRÉ le
   03/08 : défaillant sur téléphone, retiré aussi au Bistrot.
   Le bouton navigue directement. Ne pas le remettre.

   Pourquoi ce bouton n'est pas un ornement : l'extension
   d'URL finale est active sur les campagnes, donc des clics
   PAYÉS atterrissent directement sur les pages intérieures.
   Sans lui, ces visiteurs n'ont aucun chemin de retour vers
   l'accueil. Il n'existe donc QUE sur les douze pages
   intérieures, JAMAIS sur les deux accueils.

   La seule adaptation Cave : le burger du Bistrot est dans un
   en-tête HAUT, le nôtre est dans le dock du BAS (.barre-app).
   Le bouton se pose donc AU-DESSUS du burger et non dessous ;
   il reste centré sur lui, et maison.js recale au pixel à
   chaque redimensionnement.
   ========================================================= */

.btn-retour {
  /* Mathieu, 03/08 : « il est en haut à droite sur le site, omniprésent ».
     Les deux maisons partagent une seule identité : on reprend la géométrie
     exacte du Bistrot (top 106, right 18), et non le calage bas-gauche sur
     le burger du dock que j'avais inventé pour la Cave. Le manicule vit
     donc sous le burger de l'en-tête, visible sans avoir à défiler, et il
     reste absent des deux accueils : on n'y retourne pas, on y est. */
  position: fixed; z-index: 350;   /* au-dessus du dock (300), sous le bandeau cookies (380) */
  top: 106px; right: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, #fdf0c0 0%, #efc979 45%, #cb9940 80%, #a87c3a 100%);
  border: 1px solid #4a3110;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.8), inset 0 2px 5px rgba(255,255,255,.6), inset 0 -4px 8px rgba(88,57,16,.45);
  cursor: pointer; transition: transform .25s;
}
.btn-retour:hover { transform: scale(1.08); }
/* La vieille main typographique ☜ pointe vers l'arrière. Le but assumé :
   on se demande ce que c'est, on appuie. */
.btn-retour .manicule { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: #241a12; display: inline-block; animation: manicule-pousse 1.5s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes manicule-pousse { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-6px); } 55% { transform: translateX(1px); } }
/* À chaque poussée, deux cercles concentriques débordent du bouton. */
.btn-retour .rond { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(203,153,64,.85); opacity: 0; pointer-events: none; animation: manicule-rond 1.5s ease-out infinite; }
.btn-retour .rond.r2 { border-width: 1.5px; animation-delay: .18s; }
@keyframes manicule-rond { 0%, 24% { opacity: 0; transform: scale(1); } 30% { opacity: .95; transform: scale(1.02); } 85% { opacity: 0; transform: scale(1.65); } 100% { opacity: 0; } }
.btn-retour:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 4px; }

/* Le bandeau cookies (z-index 380, bas de l'écran) recouvrirait le bouton
   à la première visite — c'est-à-dire précisément pour le visiteur venu
   d'une annonce. Tant qu'il est là, le bouton monte au-dessus de lui. */
body:has(#cdf-cookies:not([hidden])) .btn-retour { bottom: 210px; }

/* ---------- Le portail trou noir : RETIRÉ le 03/08 ----------
   Ordre de Mathieu : il ne fonctionnait pas sur téléphone, et le même défaut
   avait déjà fait retirer l'effet côté Bistrot. Le bouton .btn-retour reste,
   avec son manicule et ses ronds ; seule l'animation de transition est
   partie. Ne pas la remettre. */

/* ---------- L'agrandissement ---------- */
.plat-zoom { border: none; padding: 0; background: transparent; max-width: min(92vw, 720px); }
.plat-zoom::backdrop { background: rgba(23,19,14,.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.plat-zoom figure {
  margin: 0; background: var(--creme); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(23,19,16,.5); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
  position: relative;
}
.plat-zoom .cadre-photo img, .plat-zoom .cadre-photo picture img {
  width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; background: #17130e;
}
.plat-zoom figcaption {
  font-family: var(--plume); font-size: clamp(1.5rem, 5vw, 1.9rem); color: var(--wine);
  text-align: center; padding: 12px 18px 16px;
}
.plat-zoom .zoom-nom { display: block; }
.plat-zoom .zoom-prix {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 3vw, 1.15rem); color: var(--brass-3); margin-top: 2px;
}
.plat-zoom .zoom-desc {
  display: block; margin-top: 4px; padding-bottom: 4px;
  font-family: var(--display); font-style: italic;
  font-size: clamp(.9rem, 2.8vw, 1rem); color: var(--ink-2); line-height: 1.4;
}
.plat-zoom .fermer {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--vichy); color: var(--creme); font-size: 1.7rem; line-height: 1;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.7);
}

/* ═══════════════════════════════════════════════════════════════════════
   TÊTE DE PAGE SERRÉE — v20260803e
   Mathieu, 03/08 : « arrête de me faire des pavés, des tartines de texte
   en haut là où on ne voit rien, les gens marchent au visuel, on a trois
   secondes pour les draguer ».
   Mesuré avant : 371 px de titre sur un écran de 812, soit 51 % de l'écran
   mobile avant la première photo. Le chapeau descend SOUS la photo.
   ═══════════════════════════════════════════════════════════════════════ */

.page-tete.serree { padding-top: 84px; padding-bottom: 0; }
.page-tete.serree h1 { font-size: clamp(1.5rem, 5vw, 2.9rem); margin-top: 10px; line-height: 1.02; }
.page-tete.serree h1 .plume { font-size: 1.12em; margin-top: 1px; }
.page-tete.serree .etiq-pot { margin-bottom: 2px; }
.page-tete.serree + .page-photo { margin-top: 14px; }

/* Le chapeau, chassé de la tête, se repose sous la photo. */
.chapo-apres {
  max-width: 62ch; margin: 18px auto 0; padding-inline: var(--gutter);
  text-align: center; font-size: clamp(.95rem, 2.6vw, 1.05rem);
  line-height: 1.6; color: var(--ink-2);
}
body.sombre .chapo-apres { color: rgba(241,232,213,.72); }

@media (max-width: 480px) {
  .page-tete.serree { padding-top: 76px; }
  .page-tete.serree h1 .plume { font-size: 1.05em; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BANDE DE COULEUR — les retours de marché
   Mathieu, 03/08 : « les photos de retour de marché avec les légumes,
   c'est pour agrémenter un peu le site, ça fait de la couleur, ça fait
   un joli visuel, ça peut faire des backgrounds ».
   Une bande pleine largeur qui coupe le texte, avec un mot posé dessus.
   ═══════════════════════════════════════════════════════════════════════ */

.bande-marche {
  position: relative; margin: clamp(34px, 6vw, 62px) 0;
  min-height: clamp(190px, 30vw, 320px); overflow: hidden;
  border-radius: 14px; display: grid; place-items: center;
  isolation: isolate;
}
.bande-marche img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.bande-marche::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(23,19,16,.18), rgba(23,19,16,.58));
}
.bande-marche .mot {
  font-family: var(--plume); font-size: clamp(1.8rem, 6vw, 3.2rem);
  color: #fdf6e6; text-align: center; line-height: 1.05;
  padding: 0 1rem; text-shadow: 0 2px 12px rgba(0,0,0,.75), 0 0 40px rgba(0,0,0,.5);
}
.bande-marche .mot small {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: .32em; letter-spacing: .16em; text-transform: uppercase;
  margin-top: 8px; color: #f0e3c8; text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

/* ═══════════════════════════════════════════════════════════════════════
   BANDEROLE DE PHOTOS — sous le titre, dès le premier clic
   Mathieu, 03/08 : « quand tu cliques sur menu en haut, une belle photo
   qui nous fait envie, voire une banderole de photos, plusieurs photos
   en dessous le titre menu ».
   Sur téléphone : un ruban qui se pousse au doigt, calé au repère.
   Sur ordinateur : tout tient de front, rien à faire.
   ═══════════════════════════════════════════════════════════════════════ */

.banderole-photos {
  display: flex; gap: 10px; margin: 14px 0 0;
  padding-inline: var(--gutter); padding-bottom: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.banderole-photos::-webkit-scrollbar { display: none; }
.banderole-photos figure {
  margin: 0; flex: 0 0 clamp(178px, 52vw, 260px); scroll-snap-align: center;
  position: relative; border-radius: 13px; overflow: hidden;
  border: 1px solid rgba(23,19,16,.35);
  box-shadow: 0 12px 26px -18px rgba(23,19,16,.85);
}
.banderole-photos img {
  width: 100%; height: clamp(140px, 34vw, 200px); object-fit: cover; display: block;
  transition: transform .5s;
}
.banderole-photos a:hover img, .banderole-photos figure:hover img { transform: scale(1.05); }
.banderole-photos figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--display); font-weight: 600;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fdf6e6; padding: 22px 10px 8px; text-align: center;
  background: linear-gradient(rgba(23,19,16,0), rgba(23,19,16,.82));
}
.banderole-photos a { display: block; line-height: 0; }

@media (min-width: 900px) {
  .banderole-photos {
    max-width: 1120px; margin-inline: auto; overflow: visible;
    justify-content: center; gap: 12px;
  }
  .banderole-photos figure { flex: 1 1 0; min-width: 0; }
  /* La deuxième et la quatrième descendent d'un cran : une rangée trop
     droite ressemble à un catalogue, pas à une table. */
  .banderole-photos figure:nth-child(even) { transform: translateY(14px); }
}

/* ---------- Les petites photos en cascade dans le corps ----------
   « puis là tu commences en cascade avec des petites photos par-ci
   par-là qui donnent envie ». Elles s'appuient sur le texte, alternées
   à gauche et à droite, et se rangent au-dessus sur téléphone. */
.photo-cascade { margin: clamp(22px, 4vw, 34px) 0; }
.photo-cascade figure {
  margin: 0; border-radius: 13px; overflow: hidden;
  border: 1px solid rgba(23,19,16,.35);
  box-shadow: 0 16px 34px -22px rgba(23,19,16,.9);
  position: relative;
}
.photo-cascade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cascade figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--plume); font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  color: #fdf6e6; padding: 26px 12px 10px; text-align: center;
  background: linear-gradient(rgba(23,19,16,0), rgba(23,19,16,.8));
}
@media (min-width: 760px) {
  .photo-cascade { max-width: 46%; }
  .photo-cascade.gauche { float: left; margin-right: clamp(20px, 3vw, 32px); }
  .photo-cascade.droite { float: right; margin-left: clamp(20px, 3vw, 32px); }
  .photo-cascade.gauche figure { transform: rotate(-1.2deg); }
  .photo-cascade.droite figure { transform: rotate(1.2deg); }
}
/* Une rubrique qui suit une cascade ne doit pas s'enrouler autour. */
.rubrique { clear: both; }

/* ============================================================
   L'ENSEIGNE DE LA PAGE « NOUS TROUVER » — 04/08
   Le néon est fait pour briller sur une photo sombre, celle de la bannière
   d'accueil. Posé tel quel sur le fond crème de cette page, il devenait
   invisible : crème pâle sur crème. Il lui faut donc son propre panneau
   sombre, comme une vraie enseigne accrochée au mur.
   ============================================================ */
.enseigne-bloc { padding: 0; border: 0; }
.enseigne {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(26px, 6vw, 44px) clamp(16px, 5vw, 40px) clamp(22px, 5vw, 38px);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(70, 48, 30, .55) 0%, transparent 70%),
    linear-gradient(178deg, #241a12 0%, #17100a 55%, #1e150e 100%);
  border: 1px solid rgba(203, 153, 64, .38);
  box-shadow: 0 22px 46px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 236, 190, .1);
}
.enseigne .neon-open { align-self: center; }
.enseigne .neon-detail {
  margin: 0; text-align: center;
  font-family: var(--display); font-style: italic;
  font-size: clamp(.95rem, 3.2vw, 1.15rem); line-height: 1.4;
  color: rgba(250, 244, 230, .92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

/* ============================================================
   L'ENSEIGNE DE « NOUS TROUVER » — vitrine, 04/08
   Reprise de celle du Bistrot, qui est la bonne : un néon a besoin de nuit
   derrière lui. Ma première version le posait sur le fond crème de la page,
   il était illisible. Cadre bois, fond de cave, néon rouge quand c'est fermé,
   or quand c'est ouvert, et le bouton Itinéraire DANS le cadre.
   ============================================================ */
.enseigne-horaires { padding: 6px var(--gutter) 10px; }
.enseigne-horaires .vitrine {
  max-width: 580px; margin: 0 auto; text-align: center;
  background: radial-gradient(circle at 50% 18%, #2e2419 0%, #171008 72%);
  border: 10px solid #3a2d20; border-radius: 20px;
  box-shadow: inset 0 0 46px rgba(0,0,0,.8), inset 0 0 0 1px rgba(232,200,126,.12),
              0 22px 44px -24px rgba(28,24,18,.75);
  padding: 34px 22px 26px;
}
.neon-horaires {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 9.5vw, 3.8rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: .12em;
  display: inline-block; transform: rotate(-1.5deg);
}
.neon-horaires.ouvert { color: #ffc46a; animation: neon-ouvert 2s steps(1) infinite; }
.neon-horaires.ferme  { color: #ff6a72; animation: neon-ferme 2.8s steps(1) infinite; }
@keyframes neon-ouvert {
  0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(255,177,78,.95), 0 0 18px rgba(255,150,40,.8), 0 0 42px rgba(255,140,30,.55), 0 2px 3px rgba(60,30,0,.9); }
  55% { opacity: .96; text-shadow: 0 0 3px rgba(255,177,78,.55), 0 0 8px rgba(255,150,40,.35), 0 2px 3px rgba(60,30,0,.9); }
  58% { opacity: 1; text-shadow: 0 0 6px rgba(255,177,78,.95), 0 0 18px rgba(255,150,40,.8), 0 0 42px rgba(255,140,30,.55), 0 2px 3px rgba(60,30,0,.9); }
  61% { opacity: .9; text-shadow: 0 0 2px rgba(255,177,78,.4), 0 2px 3px rgba(60,30,0,.9); }
  64% { opacity: 1; text-shadow: 0 0 6px rgba(255,177,78,.95), 0 0 18px rgba(255,150,40,.8), 0 0 42px rgba(255,140,30,.55), 0 2px 3px rgba(60,30,0,.9); }
}
@keyframes neon-ferme {
  0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(255,106,114,.9), 0 0 16px rgba(255,80,90,.7), 0 0 36px rgba(255,60,70,.45), 0 2px 3px rgba(60,0,6,.9); }
  50% { opacity: .55; text-shadow: 0 0 2px rgba(255,106,114,.35), 0 2px 3px rgba(60,0,6,.9); }
}
@media (prefers-reduced-motion: reduce) { .neon-horaires.ouvert, .neon-horaires.ferme { animation: none; } }

/* Même écart iPhone / Samsung sur la vitrine : sur écran P3 le rouge du tube
   sort beaucoup plus vif. On allège là où le P3 existe, on garde le socle
   renforcé ailleurs. */
@supports (color: color(display-p3 1 1 1)) {
  .neon-horaires.ferme {
    color: color(display-p3 1 .44 .46);
  }
  .neon-horaires.ouvert {
    color: color(display-p3 1 .78 .42);
  }
}
.enseigne-horaires .grande-heure {
  margin-top: 16px; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 4.4vw, 1.55rem); letter-spacing: .04em; color: #f3e9d6;
}
.enseigne-horaires .grande-heure b { color: #ffc46a; font-weight: 600; }
/* Le jeudi n'est pas une note de bas de page : c'est ce qui fait revenir un
   client bredouille. Il est dit dans la vitrine, en clair. */
.enseigne-horaires .jour-ferme {
  display: inline-block; margin-top: 12px; padding: 5px 16px 4px;
  border: 1.5px solid rgba(255,106,114,.55); border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: #ff9aa0;
}
.enseigne-horaires .etat-detail { margin-top: 14px; font-style: italic; color: rgba(243,233,214,.78); font-size: .98rem; }
.enseigne-horaires .sous-vitrine {
  max-width: 580px; margin: 14px auto 0; text-align: center;
  font-style: italic; color: var(--ink-2); font-size: .95rem;
}
.enseigne-horaires .sous-vitrine b { color: var(--vichy-fonce); font-style: normal; font-weight: 600; }
.btn-neon-itineraire {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 20px; min-height: 54px; padding: 14px 34px;
  background: linear-gradient(135deg, #d6564a 0%, #b3392f 55%, #8e2a21 100%);
  color: #fff; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 1.08rem;
  box-shadow: 0 14px 30px -12px rgba(179,57,47,.75), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .25s, box-shadow .25s;
}
.btn-neon-itineraire svg { width: 22px; height: 22px; }
.btn-neon-itineraire:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(179,57,47,.85); }

/* Les deux boutons de l'écriteau reprennent exactement l'habillage de ceux
   du bandeau : même taille, même graisse, couleurs inversées. */
.cdf-ecriteau .cdf-refuser {
  background: rgba(250, 245, 234, .06); border: 1.5px solid rgba(28, 24, 18, .45); color: var(--ink);
}
.cdf-ecriteau .cdf-refuser:hover { background: rgba(28, 24, 18, .07); }
.cdf-ecriteau .cdf-accepter {
  background: #e8c87e; border: 1.5px solid #e8c87e; color: #241a12;
}
.cdf-ecriteau .cdf-accepter:hover { background: #d8ac63; border-color: #d8ac63; }

/* ============================================================
   ÉCRITEAU DE RATTRAPAGE — 04/08
   Une seule relance après le premier refus. Les deux boutons ont la même
   taille, la même graisse et la même zone tactile : c'est ce qui rend
   l'écriteau acceptable devant la CNIL. Aucune ruse de contraste, aucun
   bouton grisé, et fermer par la croix vaut refus maintenu.
   ============================================================ */
.cdf-ecriteau-fond {
  position: fixed; inset: 0; z-index: 420;
  display: grid; place-items: center; padding: 18px;
  background: rgba(20, 14, 9, .74);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease;
}
.cdf-ecriteau-fond.montre { opacity: 1; }
.cdf-ecriteau-fond[hidden] { display: none; }
.cdf-ecriteau {
  position: relative;
  background: var(--creme); color: var(--ink);
  border: 1px solid rgba(28, 24, 18, .5); border-radius: 18px;
  max-width: 460px; width: 100%; max-height: 86svh; overflow: auto;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85);
  transform: translateY(14px) scale(.98); transition: transform .3s ease;
}
.cdf-ecriteau-fond.montre .cdf-ecriteau { transform: none; }
.cdf-ecriteau h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--wine); margin: 0 0 12px; padding-right: 30px;
}
.cdf-ecriteau p { font-size: .96rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; }
.cdf-ecriteau p b { color: var(--vichy-fonce); font-weight: 600; }
.cdf-ecriteau .cdf-ecriteau-signature {
  font-family: var(--plume); font-size: 1.3rem; line-height: 1.15;
  color: var(--wine); text-align: right; margin: 6px 0 0;
}
.cdf-ecriteau .cdf-cookies-boutons { margin-top: 16px; }
.cdf-ecriteau-fermer {
  position: absolute; top: 8px; right: 10px;
  width: 40px; height: 40px; background: none; border: 0;
  font-size: 1.7rem; line-height: 1; color: var(--ink-3); cursor: pointer;
}
.cdf-ecriteau-fermer:hover { color: var(--vichy-fonce); }

/* ============================================================
   CARTE — le titre passé SOUS les photos (Mathieu, 04/08)
   L'encadré « Menu » et le titre calligraphié occupaient tout le premier
   écran de la page la plus consultée du site. Ils sont retirés : on entre
   par les plats, le titre vient après et porte le bœuf en tête.
   ============================================================ */
.page-tete.apres-photos {
  padding-top: 6px;
  padding-bottom: 4px;
}
.page-tete.apres-photos h1 {
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  line-height: 1.12;
}
.page-tete.apres-photos h1 .plume {
  display: block;
  font-family: var(--plume);
  font-size: clamp(2.1rem, 7.4vw, 3.6rem);
  line-height: .98;
  margin-top: .04em;
}
/* Le paragraphe qui vend la viande à qui cherchait un steakhouse. */
.chapo-boeuf {
  max-width: 62ch;
  margin: 14px auto 0;
  text-align: center;
  font-size: clamp(.95rem, 2.9vw, 1.08rem);
  line-height: 1.55;
  color: var(--ink-2);
}

/* ============================================================
   LA VEDETTE DE LA BANDEROLE (Mathieu, 04/08)
   La première vignette — le bœuf — passe en grand format à gauche. Elle doit
   arrêter l'œil de quelqu'un qui cherchait un steakhouse et qui vient de
   tomber chez un fromager : c'est le seul plat de la carte qui lui parle.
   ============================================================ */
.banderole-photos.avec-vedette figure:first-child {
  flex: 0 0 clamp(238px, 70vw, 380px);
  border-width: 2px;
  border-color: rgba(176, 139, 79, .85);
  box-shadow: 0 16px 34px -16px rgba(23, 19, 16, .9);
}
/* La légende de la vedette est plus grande, à proportion de sa vignette. */
.banderole-photos.avec-vedette figure:first-child figcaption {
  font-size: clamp(.82rem, 2.5vw, 1rem);
  letter-spacing: .12em;
  padding-bottom: 12px;
}
/* Le badge « Best seller », en haut à gauche de la vedette. Il ne recouvre
   jamais la légende, qui vit en bas. */
.badge-vedette {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 5px 11px; border-radius: 20px;
  background: linear-gradient(178deg, #fdf3d4 4%, #f0d199 38%, #d8ac63 100%);
  color: #3b2a12; border: 1px solid rgba(74, 49, 16, .5);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.6rem, 1.9vw, .72rem); letter-spacing: .13em;
  text-transform: uppercase; line-height: 1;
  box-shadow: 0 6px 14px -6px rgba(23, 19, 16, .8);
}

/* ============================================================
   LE BOUTON RÉSERVER ATTIRE L'ŒIL (Mathieu, 04/08)
   Même balayage lumineux que la médaille des 39 ans. C'est le bouton qui
   rapporte : il doit se distinguer des deux autres du dock sans crier.
   Le voile passe SOUS le libellé (z-index) et ne gêne aucun clic
   (pointer-events: none) — sinon le geste le plus important du site serait
   intercepté par un effet décoratif.
   ============================================================ */
.barre-app .cel.plein,
.barre-actions a.principal,
.barre-actions .principal {
  position: relative;
  overflow: hidden;
}
.barre-app .cel.plein::after,
.barre-actions a.principal::after,
.barre-actions .principal::after {
  content: ""; position: absolute; top: -40%; left: -85%;
  width: 45%; height: 180%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: rotate(8deg);
  animation: reserver-brille 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
/* Le contenu du bouton repasse devant le voile. */
.barre-app .cel.plein > *,
.barre-actions a.principal > *,
.barre-actions .principal > * { position: relative; z-index: 1; }

@keyframes reserver-brille {
  0%   { left: -85%; }
  45%  { left: 140%; }
  100% { left: 140%; }
}

/* Personne n'impose une animation à qui n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  .barre-app .cel.plein::after,
  .barre-actions a.principal::after,
  .barre-actions .principal::after { animation: none; opacity: 0; }
}