/* =========================================================
   LE BISTROT DU FROMAGER — v2 « La Belle Écriture »
   Papier vieilli · vichy rouge · boiseries · calligraphie.
   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 {
  --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(179,57,47,.5) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(90deg, rgba(179,57,47,.5) 0 12px, transparent 12px 24px),
    #faf4e6;
}
.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(28,24,18,.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(28,18,8,.14) 0 2px, transparent 2px 8px, rgba(255,230,180,.06) 8px 10px, transparent 10px 24px),
    linear-gradient(160deg, #6f4a2c, #5a3a22 55%, #432a17);
  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(28,24,18,.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 fromage : ordinateur uniquement ----------
   Choix de Mathieu le 03/08 sur maquette-curseur.html (variante F4, l'emmental
   3D penché mordu au clic). Il remplace l'ancien curseur plume (point + anneau
   vichy qui suivaient la souris), jugé pas assez visible : ses deux <div> et
   son pilotage JS sont supprimés.
   La pointe du quartier est le point de clic (hotspot 2 3). Sur les liens et
   les boutons il se penche davantage, au clic il lui manque une bouchée.
   Le dessin n'est pas animé : il reste actif en mouvement réduit.
   Écrans tactiles : le bloc @media ne s'applique pas, rien ne change. */
.cursor, .cursor-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  body, body * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ffe07a'/><stop offset='1' stop-color='%23eeb43a'/></linearGradient></defs><g transform='rotate(-9 14 14)'><path d='M3 4 L28 12 L30 17 L6 9 Z' fill='%23d99b29'/><path d='M28 12 L30 17 L16 31 L13 29 Z' fill='%23c8871f'/><path d='M3 4 L28 12 L13 29 Z' fill='url(%23g)' stroke='%23b97f1c' stroke-width='1.2' stroke-linejoin='round'/><ellipse cx='14' cy='13' rx='2.7' ry='2.2' fill='%23c07f1a'/><path d='M11.6 12.2 a2.7 2.2 0 0 1 4.6 -0.6' stroke='%23ffe9a8' stroke-width='.8' fill='none'/><ellipse cx='10.5' cy='19' rx='1.8' ry='1.5' fill='%23c07f1a'/><ellipse cx='16.5' cy='20.5' rx='2' ry='1.7' fill='%23c07f1a'/><ellipse cx='8.5' cy='9.5' rx='1.2' ry='1' fill='%23c07f1a'/></g></svg>") 2 3, auto;
  }
  body a, body button, body summary, body [role="button"], body .plat-cliquable {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ffe68e'/><stop offset='1' stop-color='%23f2bc45'/></linearGradient></defs><g transform='rotate(-20 14 14)'><path d='M3 4 L28 12 L30 17 L6 9 Z' fill='%23d99b29'/><path d='M28 12 L30 17 L16 31 L13 29 Z' fill='%23c8871f'/><path d='M3 4 L28 12 L13 29 Z' fill='url(%23g)' stroke='%23b97f1c' stroke-width='1.2' stroke-linejoin='round'/><ellipse cx='14' cy='13' rx='2.7' ry='2.2' fill='%23c07f1a'/><ellipse cx='10.5' cy='19' rx='1.8' ry='1.5' fill='%23c07f1a'/><ellipse cx='16.5' cy='20.5' rx='2' ry='1.7' fill='%23c07f1a'/></g></svg>") 2 3, pointer;
  }
  body:active, body *:active {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ffe07a'/><stop offset='1' stop-color='%23eeb43a'/></linearGradient></defs><g transform='rotate(-9 14 14)'><path d='M3 4 L20 9.5 L19 15 L23 13 L28 12 L30 17 L16 31 L13 29 Z' fill='%23c8871f'/><path d='M3 4 L20 9.5 L18.5 14.5 L22.5 12.8 L28 12 L13 29 Z' fill='url(%23g)' stroke='%23b97f1c' stroke-width='1.2' stroke-linejoin='round'/><ellipse cx='12' cy='14.5' rx='2.4' ry='2' fill='%23c07f1a'/><ellipse cx='10' cy='20' rx='1.6' ry='1.4' fill='%23c07f1a'/><ellipse cx='15.5' cy='21.5' rx='1.8' ry='1.5' fill='%23c07f1a'/></g></svg>") 2 3, auto;
  }
  /* La saisie garde son curseur système, sinon on ne voit plus où on écrit. */
  body input, body textarea, body select { cursor: auto; }
  body input[type="button"], body input[type="submit"] { 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(243,233,214,.94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(28,24,18,.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 ---------- */
.menu {
  position: fixed; inset: 0; z-index: 95; background: var(--wine-deep);
  display: flex; align-items: center; overflow-y: auto;
  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); }
/* fixed et non absolute : le menu defile (overflow-y: auto), et en absolu les
   deux frises se calaient sur le CONTENU — la frise du bas traversait alors le
   milieu de l'ecran des qu'on faisait defiler le menu (constate par Mathieu le
   03/08). En fixed elles restent collees aux bords de l'ecran ; le clip-path
   d'ouverture du menu continue de s'appliquer, l'animation est inchangee. */
.menu::before, .menu::after {
  content: ""; position: fixed; left: 0; right: 0; height: 22px; z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(179,57,47,.55) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, rgba(179,57,47,.55) 0 8px, transparent 8px 16px),
    #faf4e6;
}
.menu::before { top: 0; } .menu::after { bottom: 0; }
.menu { display: block; }
.menu .contenu {
  min-height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 76px clamp(22px, 7vw, 120px) 56px; width: 100%;
}

/* ---------- Le drapeau de langue, en haut à droite du menu (Mathieu, 05/08) ----------
   Les 10 landings ont déjà le leur ; les pages du site français n'avaient rien.
   Quelqu'un qui atterrit sur une page qu'il ne lit pas doit pouvoir en sortir.
   Il montre la langue de la page — français ici, puisque le site principal
   n'existe qu'en français — et mène au portail des dix langues.
   Posé DANS le menu et non sur la page : le haut de l'écran est déjà occupé par
   le doigt d'imprimeur à droite et le pavé « service non-stop » à gauche. */
.menu-langue {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 9px; border-radius: 999px;
  background: rgba(250,244,230,.1); border: 1px solid rgba(250,244,230,.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #f3e9d6; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s, transform .25s, border-color .25s;
  min-height: 44px;   /* zone tactile confortable */
}
.menu-langue:hover, .menu-langue:focus-visible { background: rgba(250,244,230,.22); border-color: rgba(250,244,230,.6); transform: translateY(-1px); }
.menu-langue .fl { display: block; width: 26px; height: 18px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.6); flex: 0 0 auto; }
.menu-langue .fl svg { width: 100%; height: 100%; display: block; }
/* Le chevron dit que ça ouvre un choix, pas que ça bascule tout seul. */
.menu-langue .chev { opacity: .75; font-size: .8rem; line-height: 1; }
@media (max-width: 640px) {
  .menu-langue { top: 12px; right: 12px; font-size: .66rem; padding: 6px 11px 6px 8px; }
  .menu-langue .fl { width: 23px; height: 16px; }
}
/* 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(243,233,214,.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); }
/* Le voile monte plus haut et va plus au noir : les photos des tuiles sont
   claires par endroits (la planche, la nappe) et le mot s'y perdait — demande
   de lisibilité de Mathieu, 05/08. */
.menu-tuile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 24%, rgba(20,13,8,.5) 58%, rgba(16,10,6,.92) 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: #fdf8ec;
  /* Trois couches : un halo noir serré qui décolle la lettre de la photo, un
     halo large qui l'assoit, et un trait clair qui redessine le contour. */
  text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.85), 0 0 34px rgba(0,0,0,.6);
  -webkit-text-stroke: .6px rgba(255,255,255,.35);
  paint-order: stroke fill;
}
.menu ul { width: 100%; }
.menu li { overflow: hidden; }
.menu li + li { border-top: 1px solid rgba(243,233,214,.16); }
.menu ul a {
  display: flex; align-items: baseline; gap: 16px; font-family: var(--plume);
  font-size: clamp(2.3rem, 8.5vw, 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; }
.menu .num { font-family: var(--display); font-style: italic; font-size: clamp(.9rem, 2.4vw, 1.15rem); color: var(--brass-2); }
.menu-pied {
  margin-top: 26px; font-family: var(--display); font-style: italic;
  font-size: clamp(.95rem, 2.6vw, 1.1rem); color: rgba(243,233,214,.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%); }
/* Le placard : grand titre posé en haut de la bannière */
.b-tete {
  position: absolute; top: clamp(10px, 2.2svh, 30px); left: 0; right: 0; z-index: 6;
  text-align: center; padding-inline: 14px;
}
.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: #c8332a;
  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); color: var(--creme); font-weight: 500; line-height: 1; text-shadow: 0 3px 18px rgba(0,0,0,.75); }
.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;
  color: var(--creme); text-shadow: 0 4px 24px rgba(0,0,0,.85);
}
.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;
}
.b-infos { font-style: italic; color: rgba(250,244,230,.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,244,230,.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(22,17,12,.84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(250,244,230,.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,244,230,.1); transform: translateY(-1px); }
.barre-app .cel svg { width: 22px; height: 22px; }
.barre-app .cel.plein { background: var(--vichy); }
.barre-app .cel.plein:hover { background: #c4483d; }
.barre-app .etoile-or { color: #e8c87e; font-size: 1.25rem; line-height: 1; }

/* ---------- La cellule Itinéraire de la barre du bas (Mathieu, 09/08) ----------
   Elle remplace le bouton « Menu ». Le marcheur est DESCENDU de la bannière avec
   son SVG intact : le offset-path de « .iti-anim .marcheur », plus bas dans ce
   fichier, cite les coordonnées du trait en dur. Changer le viewBox ou le « d »
   du pointillé sans refaire l'autre ferait marcher le bonhomme à côté du chemin.
   Disposition en ligne et non en colonne : la barre reste basse, c'est ce que
   Mathieu a demandé en disant d'alléger. */
/* Le marcheur AU-DESSUS du mot, comme il l'était dans la bannière — pas côte à
   côte (Mathieu, 09/08, en regardant le rendu). La cellule reste sur une seule
   hauteur de barre : le dessin fait 30 px de haut, le mot 12, ça tient dans les
   56 px de « .cel ». Elle prend une part et demie pour que le tracé respire à
   côté du burger et de Menu. */
/* Les deux cases font EXACTEMENT la même largeur : « flex: 1 » de part et
   d'autre, aucune ne tire la couverture (Mathieu, 09/08). Menu porte un gris
   discret, Itinéraire le rouge de la maison — même dessin, deux poids. */
/* « flex: 1 1 0 » et « min-width: 0 » : sans eux, la case la plus chargée en
   contenu gagne quelques pixels sur l'autre — 132 contre 136 à la mesure. */
.barre-app .cel-carte,
.barre-app .cel-iti { flex: 1 1 0; min-width: 0; }
.barre-app .cel-carte { background: rgba(250,244,230,.13); }
.barre-app .cel-carte:hover { background: rgba(250,244,230,.22); }
.barre-app .cel-iti {
  flex-direction: column; gap: 1px;
  /* Padding latéral IDENTIQUE à celui de « .cel » (4 px) : avec flex-basis à 0,
     la répartition se fait sur la boîte de contenu et le padding s'ajoute
     par-dessus — deux paddings différents donnaient deux cases inégales. */
  background: var(--vichy); padding: 5px 4px 6px;
}
.barre-app .cel-iti:hover { background: #c4483d; transform: translateY(-1px); }
.barre-app .cel-iti .iti-anim { display: block; line-height: 0; filter: none; }
/* Plus spécifique que « .barre-app .cel svg », qui impose 22 px à toutes les
   icônes. Le dessin prend toute la largeur utile de la case : il reste de la
   place dans le cadre, autant que le marcheur en profite. */
.barre-app .cel-iti .iti-anim svg { display: block; width: clamp(100px, 31vw, 140px); height: auto; overflow: visible; }
.barre-app .cel-iti .iti-mot {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.64rem, 2.2vw, .78rem); letter-spacing: .02em;
  text-transform: none; color: var(--creme);
  text-shadow: none; animation: none; white-space: nowrap;
}
.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,244,230,.1); }
.burger.dans-barre span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #e8c87e; 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); }
/* Les pages de contenu portent leur burger EN HAUT et n'ont donc pas besoin de
   « avec-barre », qui déplace en plus l'origine d'ouverture du menu vers le coin
   bas-gauche — ce qui ferait jaillir le menu depuis un bouton qui n'est pas là.
   Cette classe-ci ne réserve que la place de la barre d'itinéraire. */
body.avec-barre-iti { padding-bottom: 104px; }
/* Sans cette ligne, la barre recouvre le dernier lien du menu ouvert
   (« Nous trouver ») — vu à l'écran avant publication le 09/08. */
body.avec-barre-iti .menu .contenu { padding-bottom: 150px; }
/* Barre d'itinéraire seule : pas de burger à sa gauche, elle prend toute la largeur. */
.barre-app.barre-iti-seule { max-width: 420px; }
body.avec-barre { padding-bottom: 104px; }
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(28,24,18,.6),
    inset 0 0 0 2px #b98a3e,
    inset 0 0 0 4.5px #fdf8ec,
    inset 0 0 0 6px rgba(109,34,51,.8);
  transform: rotate(-5deg);
  transition: transform .25s;
}
.macaron-or:hover { transform: rotate(-5deg) scale(1.06); }
.macaron-or .n {
  font-family: var(--display); font-weight: 600; font-size: 2.05rem; line-height: 1;
  color: var(--wine);
}
.macaron-or .n i { font-style: normal; font-size: .95rem; 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 d'or « Spritz N°1 » : métal brillant, reflet qui balaie, néon qui palpite */
.ecusson-spritz {
  /* Même plan que le macaron de note (retour Mathieu 29/07) : 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. */
  position: absolute; top: calc(29svh - 15px); bottom: auto; left: 12px; z-index: 7;
  width: 142px; height: 142px; 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-spritz::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-spritz .coupe { width: 30px; height: 30px; color: #6b4715; filter: drop-shadow(0 1px 2px rgba(255,240,200,.8)); }
.ecusson-spritz b {
  font-family: var(--plume); font-weight: 400; font-size: 2.7rem; line-height: .9;
  color: #ff5e0d;
  animation: spritz-neon .8s ease-in-out infinite alternate;
}
@keyframes spritz-neon {
  from { text-shadow: 0 0 5px rgba(255,106,19,.95), 0 0 14px rgba(255,110,20,.8), 0 0 28px rgba(255,140,40,.65), 0 1px 2px rgba(90,40,0,.9); }
  to   { text-shadow: 0 0 2px rgba(255,106,19,.45), 0 0 5px rgba(255,110,20,.3), 0 1px 2px rgba(90,40,0,.9); }
}
.ecusson-spritz 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-spritz { width: 164px; height: 164px; left: 28px; top: calc(27svh - 17px); bottom: auto; } .ecusson-spritz b { font-size: 3.1rem; } }

/* Médaillon givré : la clim, sur la photo de la salle */
.ecusson-clim {
  position: absolute; bottom: clamp(190px, 26svh, 260px); right: 10px; z-index: 7;
  width: 126px; height: 126px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 34% 28%, #f6fcff 0%, #dcf0fa 48%, #abd9ef 100%);
  box-shadow:
    0 16px 38px -10px rgba(0,25,45,.6),
    inset 0 0 0 2.5px #7fc4e8,
    inset 0 0 0 5.5px rgba(255,255,255,.85),
    inset 0 0 0 7px #abd9ef;
  transform: rotate(5deg);
}
.ecusson-clim .flocon { width: 25px; height: 25px; color: #2E86C1; animation: flocon-tourne 16s linear infinite; }
@keyframes flocon-tourne { to { transform: rotate(360deg); } }
.ecusson-clim b { font-family: var(--plume); font-weight: 400; font-size: 2.1rem; line-height: .9; color: #1F6FA8; }
.ecusson-clim i {
  font-style: normal; font-family: var(--display); font-weight: 700;
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;
  color: #155a86; margin-top: 2px; margin-left: .2em;
}
@media (min-width: 700px) { .ecusson-clim { width: 142px; height: 142px; right: 30px; bottom: 24svh; } }
/* Pendant la diapo des spritz, la note s'efface pour laisser la vedette à la coupe */
.banniere.sur-spritz .macaron-or { opacity: 0; pointer-events: none; }
.macaron-or { transition: opacity .8s ease, transform .25s; }
.article-corps figure { position: relative; }
.article-corps figure .ecusson-spritz { 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(109,34,51,.10) 45%, transparent 70%);
  will-change: transform;
}
.bouteilles {
  position: absolute; bottom: -2vh; left: 50%; transform: translateX(-50%);
  width: min(1100px, 140vw); color: rgba(28,24,18,.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(28,24,18,.45);
  padding: 10px 10px 12px;
  box-shadow: 0 16px 32px -22px rgba(28,24,18,.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(28,24,18,.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(179,57,47,.6) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, rgba(179,57,47,.6) 0 4px, transparent 4px 8px),
    #faf4e6;
  box-shadow: inset 0 0 0 2px var(--creme), inset 0 0 0 3px rgba(28,24,18,.4), 0 3px 6px -2px rgba(28,24,18,.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(179,57,47,.16) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(90deg, rgba(179,57,47,.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(28,24,18,.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(28,24,18,.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(179,57,47,.5) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, rgba(179,57,47,.5) 0 8px, transparent 8px 16px),
    #faf4e6;
  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(28,24,18,.6), 0 0 2px rgba(28,24,18,.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(179,57,47,.55) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, rgba(179,57,47,.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(28,24,18,.5); position: relative;
}
.devise .assiette::before {
  content: ""; position: absolute; inset: 22px; opacity: .35;
  background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(109,34,51,.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(28,24,18,.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(28,24,18,.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(28,24,18,.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(28,24,18,.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(28,24,18,.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(28,24,18,.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(28,24,18,.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(179,57,47,.55) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(90deg, rgba(179,57,47,.55) 0 7px, transparent 7px 14px),
    #faf4e6;
}
.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(243,233,214,.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(243,233,214,.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: #191512; color: rgba(243,233,214,.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(243,233,214,.14); }
body.sombre .brand { color: var(--paper); }
body.sombre .brand small { color: var(--brass-2); }
body.sombre .burger { background: #241d17; border-color: rgba(243,233,214,.45); }
body.sombre .burger span { background: var(--paper); }
body.sombre .burger:hover { background: #2c231b; }
body.sombre ::selection { background: var(--brass-2); color: #191512; }
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(243,233,214,.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(243,233,214,.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(243,233,214,.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(243,233,214,.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(243,233,214,.3); align-items: baseline; }
body:not(.sombre) .plat { border-color: rgba(28,24,18,.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(243,233,214,.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(243,233,214,.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(28,24,18,.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(243,233,214,.6); color: var(--paper); }
body.sombre .btn:hover { background: rgba(243,233,214,.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; }
  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; }

/* ---------- Enseigne neon des horaires (infos.html) ---------- */
.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);
  /* 22 et non 34 en haut : le néon remonte dans la vitrine pour laisser la
     place à la pastille verte posée dessous (demande de Mathieu, 04/08). */
  padding: 22px 22px 26px;
}
.neon-horaires {
  font-family: var(--plume); font-weight: 400;
  font-size: clamp(3.2rem, 13vw, 5rem); line-height: .95;
  display: inline-block; transform: rotate(-2deg);
}
.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; }
}
.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; }
.enseigne-horaires .sept-sur-sept {
  display: inline-block; margin-top: 12px; padding: 5px 16px 4px;
  border: 1.5px solid rgba(232,200,126,.55); border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: #e8c87e;
}
.enseigne-horaires .etat-detail { margin-top: 14px; font-style: italic; color: rgba(243,233,214,.78); font-size: .98rem; }

/* Dock a quatre boutons : libelles legerement plus compacts */
.barre-app.quatre .cel { font-size: clamp(.74rem, 2.45vw, .92rem); padding-inline: 2px; }

/* La ligne d horaires de la banniere devient un raccourci vers Nous trouver */
.b-infos-lien { color: inherit; display: inline-block; }
.b-infos-lien:hover .b-infos { text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 14px rgba(255,196,106,.5); }

/* Bouton Itineraire de l enseigne neon (infos.html) — visible ouvert COMME ferme */
.btn-neon-itineraire {
  position: relative; overflow: hidden;
  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; letter-spacing: .02em;
  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;
  animation: iti-pulse 2.6s ease-in-out infinite;
}
.btn-neon-itineraire::after {
  content: ""; position: absolute; top: -40%; left: -70%; width: 42%; height: 180%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: rotate(10deg);
  animation: iti-reflet 3.4s ease-in-out infinite;
}
@keyframes iti-reflet { 0% { left: -70%; } 55% { left: 130%; } 100% { left: 130%; } }
@keyframes iti-pulse {
  0%, 100% { box-shadow: 0 14px 30px -12px rgba(179,57,47,.75), inset 0 1px 0 rgba(255,255,255,.3); }
  50% { box-shadow: 0 14px 34px -10px rgba(214,86,74,.95), 0 0 22px rgba(214,86,74,.4), inset 0 1px 0 rgba(255,255,255,.3); }
}
.btn-neon-itineraire:hover { transform: translateY(-2px) scale(1.02); }
.btn-neon-itineraire svg { width: 22px; height: 22px; }
.btn-neon-itineraire .chevron { font-family: inherit; transition: transform .25s; }
.btn-neon-itineraire:hover .chevron { transform: translateX(4px); }
@media (max-width: 600px) { .btn-neon-itineraire { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .btn-neon-itineraire, .btn-neon-itineraire::after { animation: none; } }

/* Ligne 7 jours sur 7, SOUS la vitrine (demande Mathieu) */
.enseigne-horaires .sous-vitrine {
  max-width: 580px; margin: 14px auto 0; text-align: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 3.6vw, 1.2rem); letter-spacing: .04em; color: var(--ink);
}
.enseigne-horaires .sous-vitrine b { color: var(--vichy-fonce, #b3392f); }

/* ---------- Calendrier hebdomadaire des horaires (infos.html) ---------- */
.calendrier-horaires { padding: 18px var(--gutter) 6px; }
.cal-semaine {
  max-width: 580px; margin: 0 auto; list-style: none; padding: 10px 0;
  background: var(--creme); border: 1px solid rgba(28,24,18,.4); border-radius: 14px;
  box-shadow: 0 16px 32px -24px rgba(28,24,18,.55);
}
.cal-semaine li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 20px; font-family: var(--display); font-size: 1.02rem;
}
.cal-semaine li + li { border-top: 1px dashed rgba(28,24,18,.22); }
.cal-semaine .j { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.cal-semaine .h { font-variant-numeric: tabular-nums; color: var(--ink-2); letter-spacing: .02em; white-space: nowrap; }
.cal-semaine li.aujourdhui { background: rgba(179,57,47,.09); border-radius: 10px; }
.cal-semaine li.aujourdhui .j, .cal-semaine li.aujourdhui .h { color: #8e2a21; font-weight: 700; }
.tag-jour {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--vichy); color: var(--creme); border-radius: 999px; padding: 3px 9px 2px;
}
@media (max-width: 430px) {
  .cal-semaine li { padding: 10px 14px; font-size: .92rem; gap: 8px; }
  .tag-jour { font-size: .56rem; padding: 2px 7px 1px; letter-spacing: .1em; }
}

/* ---------- La carte d adresse, ecrite comme une adresse ---------- */
.adresse-bloc { padding: 12px var(--gutter) 22px; }
.carte-adresse {
  max-width: 580px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  background: var(--creme); border: 1px solid rgba(28,24,18,.4); border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 16px 32px -24px rgba(28,24,18,.55);
  transition: transform .25s, box-shadow .25s;
}
.carte-adresse:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -24px rgba(28,24,18,.6); }
.carte-adresse .pastille {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #d6564a, #8e2a21); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(179,57,47,.8);
}
.carte-adresse .pastille svg { width: 24px; height: 24px; }
.carte-adresse .lignes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carte-adresse .qui { font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.carte-adresse .rue { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 3.8vw, 1.3rem); color: var(--ink); }
.carte-adresse .quartier { font-style: italic; font-size: .88rem; color: var(--ink-3); }
.carte-adresse .voir {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--vichy-fonce, #b3392f);
  border-bottom: 1.5px solid rgba(179,57,47,.5); padding-bottom: 2px; white-space: nowrap;
}
@media (max-width: 560px) { .carte-adresse .voir { display: none; } }

/* ---------- Photos des plats sur la carte ---------- */
.plat.avec-photo { grid-template-columns: auto 1fr auto; align-items: center; }
.plat.avec-photo .desc { grid-column: 2 / -1; }
.plat-photo {
  grid-row: 1 / span 2; align-self: center;
  border: none; background: none; padding: 0; cursor: pointer; line-height: 0;
}
.plat-photo img {
  width: 74px; height: 74px; object-fit: cover; display: block;
  border-radius: 12px; border: 1px solid rgba(28,24,18,.4);
  box-shadow: 0 8px 16px -10px rgba(28,24,18,.6);
  transition: transform .25s;
}
.plat-photo:hover img { transform: scale(1.06) rotate(-1.5deg); }
@media (max-width: 430px) { .plat-photo img { width: 64px; height: 64px; } }

/* 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(28,24,18,.5); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
}
.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 .fermer {
  position: absolute; top: -14px; right: -8px; 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);
}

/* Legende de l agrandissement : nom calligraphie + description en dessous */
.plat-zoom .zoom-nom { display: block; }
.plat-zoom .zoom-desc {
  display: block; margin-top: 2px; 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;
}

/* ---------- Banniere v2026-08-02 : titre a gauche, pile vivante a droite ---------- */
.burger.flottant { position: fixed; top: 14px; left: 14px; z-index: 400; }
.b-gauche { position: absolute; left: clamp(14px, 4vw, 40px); top: clamp(64px, 9vh, 96px); z-index: 5; max-width: 54%; }
.b-gauche .placard { display: inline-block; border: 2.5px solid rgba(250,244,230,.95); padding: 8px 16px; }
.b-gauche .placard b { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 5.2vw, 2.5rem); color: #faf4e6; line-height: 1; }
.b-gauche .plume-titre { font-family: var(--plume); font-size: clamp(2rem, 6.8vw, 3.3rem); color: #e8c87e; line-height: 1; margin-top: 4px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.b-gauche .kicker { display: block; font-family: var(--display); font-weight: 600; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: #d9c9a0; margin-top: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.pile-droite { position: absolute; right: clamp(12px, 3vw, 30px); top: clamp(14px, 3.5vh, 30px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 46%; }
.duo-nav { display: flex; gap: 10px; }
.duo-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(250,244,230,.14); border: 1px solid rgba(250,244,230,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #faf4e6; font-family: var(--display); font-weight: 600; font-size: .9rem; transition: background .25s, transform .25s; }
.duo-nav a:hover { background: rgba(250,244,230,.26); transform: translateY(-2px); }
.duo-nav svg { width: 16px; height: 16px; }
.neon-open { font-family: var(--plume); font-size: clamp(2.5rem, 8.5vw, 3.9rem); line-height: .9; color: #fff3dd; transform: rotate(-3deg); text-shadow: 0 0 4px #fff, 0 0 10px #ffb300, 0 0 24px #ff9100, 0 0 48px #ff6d00, 0 0 85px rgba(255,110,0,.85); animation: neon-buzz-orange 3.1s linear infinite; }
@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; } }
.neon-acclim { font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 3.4vw, 1.4rem); 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; }
/* La température sous la clim + le souffle froid (vaguelettes qui filent vers le nuage) — Mathieu 03/08 */
.temp-clim { display: inline-flex; align-items: center; gap: 8px; margin-top: -4px; 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); }
.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; } }
@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; } }
/* ---------- La colonne V2 de la pile (validée Mathieu 03/08) : capsule clim + pastille + itinéraire à 208 px, Open centré ---------- */
.pile-droite .neon-open { align-self: center; -webkit-text-stroke: 1.1px #fff8ec; paint-order: stroke fill; text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 16px #ffb300, 0 0 30px #ff9100, 0 0 60px #ff6d00, 0 0 110px rgba(255,110,0,.95); }

/* ---------- « service / non-stop » sous le néon Open (Mathieu, 05/08) ----------
   Deux lignes, comme il l'a demandé : le mot « service » puis « non-stop »
   dessous. Même feu orange que le Open, en plus petit et sans le grésillement —
   le néon buzze, sa légende ne doit pas clignoter avec lui, ce serait illisible.
   Le bloc s'allume et s'éteint AVEC le néon : annoncer un service continu porte
/* Le bloc qui tient le Open et sa legende : en colonne et CENTRE, sinon le
   Open (un span inline) se colle a gauche et se retrouve desaxe du reste de
   la pile — constate par Mathieu sur capture, 23 px d'ecart mesures. */
.bloc-open { display: flex; flex-direction: column; align-items: center; gap: 0; }
/* « service non-stop » : EXACTEMENT le neon Open — meme police, MEME TAILLE,
   meme tube de verre, meme halo, meme gresillement. Rien d'autre. */
.neon-nonstop, .badge-nonstop {
  font-family: var(--plume); font-weight: 400;
  font-size: clamp(2.5rem, 8.5vw, 3.9rem); line-height: .9;
  color: #fff3dd; transform: rotate(-3deg);
  letter-spacing: 0; text-transform: none;
  -webkit-text-stroke: 1.1px #fff8ec; paint-order: stroke fill;
  text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 16px #ffb300, 0 0 30px #ff9100, 0 0 60px #ff6d00, 0 0 110px rgba(255,110,0,.95);
  animation: neon-buzz-orange 3.1s linear infinite;
  display: flex; flex-direction: column; align-items: center;
}
.neon-nonstop i, .badge-nonstop i { font-style: normal; letter-spacing: 0; }
/* M2 validée par Mathieu le 03/08 : PLUS D'ENCADRÉS — textes nus sur le même
   axe centré, la lisibilité sur photo claire est portée par un halo sombre
   derrière chaque lettre au lieu du verre dépoli. */
.capsule-clim { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.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); }
.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); }
.pill-dispo { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #d9f0b5; font-family: var(--display); font-weight: 600; font-size: .92rem; }
.pill-dispo .col span { text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 0 20px rgba(0,0,0,.8); }
/* Itinéraire resserré (172 px) et remonté : sans encadré, la pleine largeur
   flottait et le bloc semblait décroché vers le bas (retour Mathieu 03/08). */
.iti-anim.iti-avec-mot { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: normal; margin-top: -8px; }
/* Largeur explicite et pas 100 % : sans attribut width, un svg vaut 300 px
   intrinsèques et fausse le shrink-to-fit de la pile (Open plus centré). */
.iti-anim.iti-avec-mot svg { width: 172px; max-width: 100%; }
.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; } }
.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; } /* même taille que la 1re ligne, règle Mathieu 03/08 */
/* La même pastille, posée dans la vitrine de la page « Nous trouver », juste
   sous le néon (04/08). Le fond y est déjà sombre : le halo noir de la version
   bannière n'a plus lieu d'être, il alourdirait le texte. */
/* La même légende que sous le néon de l'accueil, posée dans la vitrine de
   « Nous trouver ». Le fond y est déjà sombre : pas besoin du halo noir. */

.pill-dispo.pill-vitrine { margin-top: 10px; font-size: .98rem; }
.pill-dispo.pill-vitrine .col span { text-shadow: none; }
.iti-anim { display: inline-block; line-height: 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.iti-anim svg { width: clamp(135px, 32vw, 180px); height: auto; overflow: visible; }
.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; }
@media (prefers-reduced-motion: reduce) { .neon-open, .neon-nonstop, .badge-nonstop, .neon-acclim, .pill-dispo .pt, .iti-anim .pointille, .iti-anim .pin-or, .temp-clim .vent path, .iti-mot { animation: none; } }
@media (max-width: 640px) {
  .b-gauche { top: 74px; bottom: auto; left: 14px; max-width: 46%; }
  .b-gauche .placard { padding: 5px 10px; border-width: 2px; }
  .b-gauche .placard b { font-size: 1.15rem; }
  .b-gauche .plume-titre { font-size: 1.55rem; margin-top: 3px; }
  .b-gauche .kicker { font-size: .5rem; letter-spacing: .18em; margin-top: 6px; }
  .pile-droite { max-width: 52%; gap: 10px; }
  .neon-open, .neon-nonstop, .badge-nonstop { font-size: 2.3rem; }
  .neon-acclim { font-size: .92rem; letter-spacing: .16em; }
  .temp-clim { font-size: .8rem; letter-spacing: .1em; margin-top: -3px; }
  .temp-clim .vent { width: 26px; }
  .pill-dispo { font-size: .82rem; padding: 7px 13px; }
  .iti-anim.iti-avec-mot svg { width: 156px; }
  .capsule-clim .neon-acclim { font-size: .98rem; }
  .iti-mot { font-size: .6rem; letter-spacing: .07em; }
}

/* ---------- Reglages finaux Mathieu 02/08 15h, revus 03/08 : titre plus gros + horaires dessous ---------- */
.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(8px, 1.4vh, 14px); text-align: center; }
.titre-haut {
  margin: 0; text-align: center;
  font-family: var(--plume); font-weight: 400;
  /* UNE SEULE LIGNE, exigence de Mathieu du 04/08 : sur son téléphone le titre
     passait à la ligne et mangeait 88 px avant la première information utile.
     Mesuré : « Le Bistrot du Fromager » fait 8,76 fois la taille de police en
     largeur ; à 42 px il réclamait 368 px pour 355 disponibles, il débordait de
     13 px. La formule garde toujours une marge, quelle que soit la largeur. */
  font-size: min(5rem, calc(10.8vw - 2px)); line-height: .95; color: #e8c87e;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255,255,255,.7);
  text-shadow: 0 0 14px rgba(232,200,126,.5), 0 3px 10px rgba(0,0,0,.7);
  /* La « triche » : étiré en hauteur de 10 %, il grossit à l'œil sans gagner en largeur. */
  transform: scaleY(1.1); transform-origin: top center;
}
.tete-banniere .b-infos { font-size: clamp(.85rem, 2.7vw, 1.08rem); padding: 0 8px; }
.banniere .pile-droite { top: clamp(134px, 19.5svh, 195px); }
.macaron-or.dans-pile {
  position: static; width: 88px; height: 88px; transform: rotate(-4deg);
  background: rgba(253,248,236,.42);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  box-shadow: 0 10px 24px -12px rgba(28,24,18,.75), inset 0 0 0 1.5px rgba(185,138,62,.85), inset 0 0 0 3.5px rgba(253,248,236,.5);
}
.macaron-or.dans-pile .n { font-size: 1.45rem; text-shadow: 0 1px 3px rgba(253,248,236,.7); }
.macaron-or.dans-pile .etoiles { font-size: .58rem; }
.macaron-or.dans-pile .src { font-size: .48rem; }
.banniere.sur-spritz .macaron-or.dans-pile { opacity: 1; pointer-events: auto; }
@media (max-width: 640px) {
  .titre-haut { font-size: min(2.6rem, calc(10.8vw - 2px)); }
  /* Le titre passant de deux lignes à une, ~46 px se libèrent : toute la pile
     remonte d'autant plutôt que de laisser un trou sous le titre. */
  .banniere .pile-droite { top: clamp(112px, 14svh, 150px); max-width: 62%; gap: 16px; }
  .macaron-or.dans-pile { width: 76px; height: 76px; }
  .macaron-or.dans-pile .n { font-size: 1.2rem; }
}

/* L estampille de note : en haut a gauche sous le titre, clic vers NOS avis (Mathieu 02/08) */
.macaron-or.dans-pile.estampille-gauche {
  /* NE REMONTE PAS avec la pile : consigne de Mathieu du 04/08, seule la
     colonne de droite (clim, pastille, itineraire) profite de la place liberee
     par le titre passe sur une ligne. L'estampille garde sa hauteur. */
  position: absolute; top: clamp(134px, 19.5svh, 195px); left: clamp(12px, 3vw, 30px); right: auto; z-index: 6;
}
@media (max-width: 640px) {
  .macaron-or.dans-pile.estampille-gauche { top: clamp(168px, 21svh, 205px); left: 12px; }
}

/* La médaille Best Spritz S4 (choix Mathieu 02/08) : orange Aperol, centrée sous la pile */
.medaille-spritz {
  position: absolute; left: 50%; bottom: clamp(158px, 23svh, 240px); z-index: 6;
  transform: translateX(-50%) rotate(-4deg);
  overflow: hidden; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ffd28f 0%, #ff9a2e 40%, #ff6d00 70%, #c24e00 100%);
  box-shadow: 0 16px 38px -14px rgba(0,0,0,.85), inset 0 3px 8px rgba(255,255,255,.65), inset 0 -8px 16px rgba(140,50,0,.6);
}
.medaille-spritz b { font-family: var(--plume); font-weight: 400; font-size: 1.7rem; line-height: .9; color: #fff; text-shadow: 0 1px 4px rgba(140,50,0,.7); }
.medaille-spritz i { font-style: normal; font-family: var(--display); font-weight: 700; font-size: .54rem; letter-spacing: .26em; color: #ffe6c4; margin-top: 3px; }
.medaille-spritz::after { content: ""; position: absolute; top: -30%; left: -80%; width: 50%; height: 160%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%); transform: rotate(8deg); animation: medaille-brille 2.9s ease-in-out infinite; }
@media (max-width: 640px) { .medaille-spritz { width: 96px; height: 96px; bottom: clamp(178px, 26svh, 240px); } .medaille-spritz b { font-size: 1.45rem; } }
@media (prefers-reduced-motion: reduce) { .medaille-spritz::after { animation: none; } }

/* La medaille Best Spritz n apparait QUE sur la diapo des spritz (Mathieu 02/08 15h30) */
.medaille-spritz { opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.banniere.sur-spritz .medaille-spritz { opacity: 1; pointer-events: auto; }

/* ---------- Le bouton manicule : retour a l accueil, partout sauf l accueil (valide Mathieu 02/08) ---------- */
.btn-retour {
  position: fixed; top: 106px; right: 18px; z-index: 350;
  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;
}
/* ---------- « Service non-stop », en haut à gauche, face au doigt ----------
   Ordre de Mathieu du 05/08 : le doigt d'imprimeur tient le haut à droite, ce
   pavé tient le haut à gauche, en opposition. Sur TOUTES les pages et TOUTES
   les langues — sauf l'accueil, où l'information vit déjà sous le néon Open, et
   où le haut à gauche est occupé par le macaron 4,8.
   Même hauteur que le doigt (106 px) pour que les deux se répondent au pixel. */
/* Le meme neon, pose en haut a gauche, face au doigt d'imprimeur.
   La taille vient de la regle commune ci-dessus : on ne la touche pas. */
.badge-nonstop {
  position: fixed; top: 92px; left: 14px; z-index: 349;
  align-items: flex-start;
  pointer-events: none;   /* decoratif : il ne doit jamais voler un clic */
}

/* ---------- Le marcheur du menu, à côté de « Nous trouver » ----------
   Idée de Mathieu, 04/08, en remplacement d'un itinéraire flottant sur toutes
   les pages qu'il a lui-même écarté pour ne pas alourdir l'affichage : le doigt
   d'imprimeur attire le clic, le menu s'ouvre, et là le petit bonhomme marche.
   Il remplace la mention « 37 rue Droite », qui ne disait rien à personne.
   Même dessin, mêmes ors que l'itinéraire de l'accueil : une seule voix. */
.menu-marcheur { display: inline-block; vertical-align: middle; width: 78px; height: 26px; margin-left: 10px; overflow: visible; }
.menu-marcheur .pointille { stroke-dasharray: 1 7; animation: mm-chemin 2.2s linear infinite; }
@keyframes mm-chemin { to { stroke-dashoffset: -16; } }
.menu-marcheur .marcheur {
  offset-path: path('M5 17 C 18 7, 38 21, 58 15');
  offset-rotate: 0deg; animation: mm-marche 4s linear infinite;
}
@keyframes mm-marche {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-marcheur .pointille, .menu-marcheur .marcheur { animation: none; }
}

.btn-retour:hover { transform: scale(1.08); }
.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); } }
.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; } }
@media (prefers-reduced-motion: reduce) { .btn-retour .manicule, .btn-retour .rond { animation: none; } }

/* Le portail trou noir (02/08) a ete RETIRE le 03/08 : rendu mobile defaillant,
   decision Mathieu. La manicule reste, clic = navigation directe. La demo
   complete survit dans maquette-retour.html (banc d'essai, hors paquet). */

/* ---------- Le marcheur de l itineraire (M2 valide Mathieu 02/08) : il marche sur le pointille ---------- */
.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; }
}
@media (prefers-reduced-motion: reduce) { .iti-anim .marcheur { animation: none; opacity: 0; } }