/* GÉNÉRÉ PAR tools/build.py — ne pas éditer site/assets/css/main.css à la main.
   La source est assets-src/css/main.css.tpl + la config. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-vf-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-vf-italic-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dmsans-vf-latin.woff2') format('woff2');
  font-weight: 100 1000; font-style: normal; font-display: swap;
}

:root {
  --creme: #FBF8EE;
  --sable: #EEF0EA;
  --dragee: #F2C230;
  --caramel: #2E302C;
  --terracotta: #B4532F;
  --terracotta-fonce: #8F3F22;
  --encre: #3E554C;
  --texte: #2A2B27;
  --texte-doux: #5E625A;
  --ligne: #E2E3DA;
  --blanc: #FFFFFF;
  --accent-rgb: 180, 83, 47;
  --encre-rgb: 62, 85, 76;
  --ombre-nav: 0 18px 40px -18px rgba(180, 83, 47, .45);
  --ombre-carte: 0 20px 25px -5px rgba(180, 83, 47, .16), 0 8px 10px -6px rgba(180, 83, 47, .16);
  --ombre-haut: 0 20px 25px -5px rgba(180, 83, 47, .40), 0 8px 10px -6px rgba(180, 83, 47, .40);
  --ombre-encre: 0 18px 40px -12px rgba(62, 85, 76, .5);
  --oeil: #B0512E;
  --sur-accent: #FFFFFF;
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
  --r-carte: 4px;
  --r-grande: 0px;
  --r-champ: 2px;
  --r-blob: 4px;
  --r-blob-2: 4px;
  --lent: 0.7s cubic-bezier(.22, .61, .36, 1);
  --vif: 0.25s cubic-bezier(.33, 1, .68, 1);
  --cran: 0.08s;
  --photo-filtre: saturate(1.1) contrast(1.04) sepia(0.03);
  --photo-filtre-survol: saturate(1.177) contrast(1.05) sepia(0.000);
  --photo-zoom: 1.06;
  --photo-duree: 1.1s;
  --graisse-corps: 400;
}

/* ---------- socle --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* iOS gonfle le texte à la rotation si on ne le lui interdit pas */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font: var(--graisse-corps, 400) 15px/1.65 var(--sans);
  color: var(--texte);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  /* jamais de graisse ni d'italique synthétisées : on ne charge que ce qu'on a */
  font-synthesis: none;
  /* `hidden` d'abord : Safari < 16 ignore `clip` et la page pourrait
     défiler latéralement ; `clip` ensuite car il n'installe pas de
     conteneur de défilement (et ne casse donc pas position: sticky) */
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* le flash gris du navigateur est remplacé par nos propres états :active
   (voir le bloc « tactile » en fin de feuille) — jamais retiré sans contrepartie */
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.contenant { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

::selection { background: var(--dragee); color: var(--blanc); }

/* ---------- boutons : une seule pièce -------------------------------------
   La pastille flèche détachée était la signature Kultúra : elle coupait
   chaque bouton en deux sans rien apporter. Retirée du HTML lui-même
   (sections.py), pas seulement masquée — aucun reliquat dans le balisage. */
.bouton {
  display: inline-flex; align-items: center;
  text-align: center;
}
.bouton .lib {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  /* --sur-accent : la couleur du LIBELLÉ sur l'accent. Blanche par
     défaut ; une peau à accent clair (laiton, safran) la passe à l'encre,
     sinon l'étiquette du bouton tombe sous le seuil de lecture. */
  background: var(--dragee); color: var(--sur-accent, var(--blanc));
  font: 400 14.5px/1.4 var(--sans);
  letter-spacing: .012em;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .55);
  transition:
    background var(--vif), color var(--vif), border-color var(--vif),
    transform var(--vif), box-shadow var(--vif);
}
.bouton:hover .lib {
  background: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -18px rgba(0, 0, 0, .6);
}
.bouton:active .lib { transform: translateY(0); }

.bouton--verre .lib {
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .5);
}
.bouton--verre:hover .lib {
  background: rgba(255, 255, 255, .95);
  border-color: transparent;
  color: var(--texte);
}

.bouton--blanc .lib { background: var(--blanc); color: var(--terracotta); }
.bouton--blanc:hover .lib { background: var(--sable); color: var(--terracotta-fonce); }

/* ---------- nav pilule flottante ------------------------------------------ */
.nav {
  position: fixed; inset: 14px 24px auto;
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 9px 22px 9px 16px;
  background: var(--blanc);
  border-radius: 999px;
  box-shadow: 0 6px 24px -12px rgba(51, 33, 26, .18);
  transition: box-shadow var(--vif), transform var(--vif);
  max-width: 1372px; margin-inline: auto;
}
.nav.est-posee { box-shadow: var(--ombre-nav); }
.nav-logo { display: inline-flex; align-items: center; gap: 9px; }
.nav-logo svg { width: 34px; height: 34px; color: var(--terracotta); }
.nav-logo .mot {
  font: 400 21px/1 var(--serif);
  color: var(--terracotta);
  letter-spacing: .02em;
}
.nav-liens { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-liens a {
  display: inline-block;
  padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 400;
  transition: background var(--vif), color var(--vif);
}
.nav-liens a:hover { color: var(--terracotta); }
.nav-liens a.actif, .nav-liens a[aria-current="page"] { background: var(--sable); color: var(--texte); }
.nav-note {
  font-size: 12.5px; color: var(--texte-doux);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.nav-note::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #7FA173;
}
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 999px; place-items: center; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ''; display: block; width: 18px; height: 2px;
  background: var(--texte); border-radius: 2px;
  transition: transform var(--vif), opacity var(--vif);
}
.nav-burger span { position: relative; }
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after  { position: absolute; top: 6px; }
.nav.est-ouverte .nav-burger span { background: transparent; }
.nav.est-ouverte .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
.nav.est-ouverte .nav-burger span::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-tiroir {
  display: none;
  /* le haut suit la hauteur RÉELLE de la barre (mesurée en JS dans --h-nav) :
     une police plus grande ou une encoche ne doit jamais faire passer le
     tiroir sous l'enseigne */
  position: fixed; z-index: 55; inset: calc(var(--h-nav, 68px) + 14px) 24px auto;
  background: var(--blanc); border-radius: 28px;
  box-shadow: var(--ombre-nav);
  padding: 18px;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity var(--vif), transform var(--vif);
}
.nav-tiroir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nav-tiroir a { display: block; padding: 12px 16px; border-radius: 14px; font-size: 15px; }
.nav-tiroir a.actif, .nav-tiroir a:hover { background: var(--sable); color: var(--terracotta); }
.nav-tiroir.est-ouvert { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 1023px) {
  .nav-liens, .nav-note { display: none; }
  .nav-burger { display: grid; }
  .nav-tiroir { display: block; }
}

/* ---------- héros d'accueil ----------------------------------------------- */
.heros {
  position: relative;
  margin: 0 12px;
  border-radius: 0 0 var(--r-grande) var(--r-grande);
  overflow: hidden;
  /* ligne vh D'ABORD : Safari < 15.4 ne connaît pas svh et jetterait la
     seconde. Sur mobile, 100vh compte la barre d'URL rétractée — svh prend
     la hauteur *petite*, donc le héros ne déborde jamais au chargement. */
  min-height: 92vh;
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: center;
}
.heros-fond { position: absolute; inset: 0; }
.heros-fond img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.07);
  animation: heros-zoom 2.2s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes heros-zoom { to { transform: scale(1); } }
.heros-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(25, 17, 21, .55) 0%,
    rgba(25, 17, 21, .38) 45%,
    rgba(25, 17, 21, .72) 100%);
}
.heros-corps {
  position: relative; z-index: 1;
  text-align: center; color: var(--blanc);
  padding: 150px 24px 40px;
  max-width: 760px; margin-inline: auto;
}
.heros h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.04;
  margin-bottom: 22px;
  text-wrap: balance;
}
.heros-corps p {
  font-size: 14.5px; line-height: 1.75;
  color: rgba(255, 255, 255, .88);
  max-width: 520px; margin: 0 auto 26px;
}
.heros-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.heros-chiffres {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 26px 8vw 34px;
  text-align: center; color: var(--blanc);
}
.heros-chiffres .valeur {
  font: 400 clamp(26px, 2.6vw, 36px)/1.1 var(--serif);
  display: inline-flex; align-items: baseline; justify-content: center; gap: 2px;
}
.heros-chiffres .valeur sup { font-size: .55em; transform: translateY(-4px); color: var(--dragee); }
.heros-chiffres .legende { font-size: 12.5px; color: rgba(255, 255, 255, .78); margin-top: 5px; }
.heros-chiffres > div { position: relative; }
/* Kultúra posait ici une pilule vide entre chaque chiffre : sur la photo
   elle ne sépare rien et se lit comme un défaut d'affichage. Retirée. */
/* Sur téléphone le héros doit tenir dans l'écran — sinon les chiffres, donc
   la preuve sociale, tombent sous la ligne de flottaison. Les trois chiffres
   restent une rangée compacte plutôt qu'une colonne de 200 px. */
@media (max-width: 720px) {
  .heros { min-height: 86vh; min-height: 86svh; }
  .heros-corps { padding: 104px 22px 18px; }
  .heros h1 { font-size: clamp(34px, 9.4vw, 52px); margin-bottom: 16px; }
  .heros-corps p { font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
  .heros-chiffres {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px 20px 26px;
  }
  .heros-chiffres .valeur { font-size: 25px; }
  .heros-chiffres .legende { font-size: 10.5px; line-height: 1.3; margin-top: 4px; }
}
@media (max-width: 480px) {
  .heros-actions { width: 100%; gap: 10px; }
  .heros-actions .bouton { flex: 1 1 0; min-width: 0; }
  .heros-actions .bouton .lib { flex: 1; justify-content: center; padding-inline: 14px; }
}
@media (max-width: 360px) {
  .heros-corps { padding-top: 88px; padding-inline: 18px; }
  .heros-chiffres { padding: 12px 18px 16px; }
  /* le paragraphe est le plus gros bloc du héros : c'est lui qu'on resserre
     en premier, plutôt que de rendre les boutons illisibles */
  .heros-corps p { font-size: 13px; line-height: 1.5; margin-bottom: 18px; }
  /* un libellé qui passe à la ligne double la hauteur du bouton et fait
     déborder le héros : on resserre la lettre plutôt que d'empiler.
     « Découvrir la carte » tenait à 4 px près — d'où le padding à 8 px. */
  .heros-actions .bouton .lib {
    font-size: 13px; padding: 13px 8px; letter-spacing: 0;
  }
}

/* ---------- bande héros des pages intérieures ------------------------------ */
.bande-heros {
  margin: 0 12px;
  border-radius: 0 0 var(--r-grande) var(--r-grande);
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(255, 255, 255, .14), transparent 55%),
    var(--caramel);
  color: var(--blanc);
  text-align: center;
  padding: 170px 24px 92px;
}
.bande-heros h1 { font-size: clamp(38px, 4.6vw, 58px); line-height: 1.05; }
/* sur fond caramel, l'œil-de-perdrix passe au blanc — la terracotta du socle
   n'y tiendrait pas le contraste */
.bande-heros .sur-titre {
  color: var(--blanc);
  margin-bottom: 14px;
}
.bande-heros .sur-titre::before,
.bande-heros .sur-titre::after { background: rgba(255, 255, 255, .55); }
.fil {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 16px;
  font-size: 13.5px; color: rgba(255, 255, 255, .85);
}
.fil a:hover { color: var(--blanc); text-decoration: underline; }
.fil-sep { width: 14px; height: 1px; background: rgba(255, 255, 255, .55); }

/* ---------- sections ------------------------------------------------------- */
.section { padding: 96px 0; }
.section--sable { background: var(--sable); }
.section-tete { text-align: center; max-width: 620px; margin: 0 auto 46px; }

/* l'œil-de-perdrix Les Gourmands : capitales espacées, tirets miroir de part
   et d'autre. Née dans la peau « forno », promue au socle — c'est de la
   qualité de mise en page, pas une signature de marque : sans elle le
   sur-titre retombe en phrase molle qu'on lit comme un paragraphe égaré. */
.sur-titre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oeil);
  margin-bottom: 12px;
}
.sur-titre::before,
.sur-titre::after {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--dragee);
}
.section-tete h2, .titre-serif {
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.12;
  color: var(--terracotta);
}
.section-tete .intro { color: var(--texte-doux); font-size: 14px; margin: 14px auto 0; max-width: 520px; }
.section-pied { display: flex; justify-content: center; margin-top: 42px; }

/* ---------- comptoir (rangée éventail) ------------------------------------- */
.eventail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
}
.eventail a { display: block; }
.eventail .photo {
  border-radius: var(--r-carte);
  overflow: hidden;
  aspect-ratio: 3 / 3.4;
  box-shadow: var(--ombre-carte);
}
.eventail .photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.eventail a:hover .photo img { transform: scale(1.05); }
.eventail .etiquette { font-size: 14px; font-weight: 400; padding: 10px 4px; }
.eventail a:nth-child(odd)  { display: flex; flex-direction: column-reverse; }
.eventail a:nth-child(even) { margin-top: 34px; }
@media (max-width: 900px) {
  .eventail { grid-template-columns: repeat(2, 1fr); }
  .eventail a:nth-child(even) { margin-top: 24px; }
}
@media (max-width: 540px) {
  .eventail { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---------- fidélité -------------------------------------------------------- */
.fidelite { text-align: center; }
.fidelite-visuel {
  width: min(680px, 100%);
  margin: 40px auto 34px;
  border-radius: var(--r-grande);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  aspect-ratio: 16 / 9;
}
.fidelite-visuel img { width: 100%; height: 100%; object-fit: cover; }
.fidelite-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 860px; margin: 0 auto 40px;
}
.fidelite-points h6 {
  font: 400 14px/1.55 var(--sans);
  color: var(--texte);
  margin: 0;
  padding: 18px 20px;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 999px;
}
@media (max-width: 800px) {
  .fidelite-points { grid-template-columns: 1fr; max-width: 420px; }
}

/* ---------- cartes cadeaux (blob sur papier quadrillé) ---------------------- */
.cadeau {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}
.cadeau-scene {
  position: relative;
  padding: 34px;
  background-image:
    linear-gradient(var(--ligne) 1px, transparent 1px),
    linear-gradient(90deg, var(--ligne) 1px, transparent 1px);
  background-size: 30px 30px;
  border-radius: 12px;
}
.cadeau-scene img {
  width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover;
  border-radius: var(--r-blob-2);
  box-shadow: var(--ombre-carte);
}
.cadeau-texte .sur-titre { margin-bottom: 10px; }
.cadeau-texte h2 { font-size: clamp(30px, 3.2vw, 42px); color: var(--terracotta); margin-bottom: 18px; }
.cadeau-texte p { color: var(--texte-doux); font-size: 14px; max-width: 46ch; }
.cadeau-texte .bouton { margin-top: 10px; }
@media (max-width: 900px) {
  .cadeau { grid-template-columns: 1fr; gap: 34px; }
  .cadeau-scene { max-width: 440px; margin-inline: auto; }
}

/* ---------- aperçu de la carte ---------------------------------------------- */
.categories {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.categorie {
  position: relative;
  border-radius: var(--r-carte);
  overflow: hidden;
  aspect-ratio: 3 / 3.7;
  box-shadow: var(--ombre-carte);
}
.categorie img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.categorie:hover img { transform: scale(1.05); }
.categorie::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(25, 17, 21, .55) 100%);
}
.categorie-pied {
  position: absolute; z-index: 1; inset: auto 12px 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92);
  border-radius: 999px;
  padding: 11px 18px;
  transition: background var(--vif), color var(--vif);
}
.categorie-pied .nom { font: 400 15.5px/1.2 var(--serif); color: var(--texte); }
.categorie:hover .categorie-pied { background: var(--blanc); }
.categorie:hover .categorie-pied .nom { color: var(--terracotta); }
@media (max-width: 900px) { .categories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .categories { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ---------- galerie ---------------------------------------------------------- */
.galerie {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 60px; align-items: center;
}
.galerie-texte .sur-titre { margin-bottom: 10px; }
.galerie-texte h2 { font-size: clamp(30px, 3.2vw, 42px); color: var(--terracotta); margin-bottom: 18px; }
.galerie-texte p { color: var(--texte-doux); font-size: 14px; max-width: 44ch; }
.galerie-texte .mots { margin: 22px 0 26px; display: grid; gap: 10px; }
.galerie-texte .mots span {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px;
}
/* un trait, pas une flèche : ces lignes ne mènent nulle part */
.galerie-texte .mots span::before {
  content: ''; flex: none;
  width: 18px; height: 1.5px; margin-top: .55em;
  background: var(--dragee);
}
.galerie-mur {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.galerie-mur .bloc { border-radius: var(--r-carte); overflow: hidden; box-shadow: var(--ombre-carte); }
.galerie-mur .bloc img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.galerie-mur .bloc:hover img { transform: scale(1.05); }
.galerie-mur .bloc:nth-child(1) { aspect-ratio: 3 / 3.6; }
.galerie-mur .bloc:nth-child(2) { aspect-ratio: 3 / 2.4; align-self: end; border-radius: var(--r-blob); }
.galerie-mur .bloc:nth-child(3) { aspect-ratio: 3 / 2.4; }
.galerie-mur .bloc:nth-child(4) { aspect-ratio: 3 / 3.6; }
@media (max-width: 900px) {
  .galerie { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- contact ----------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: start; }
/* même piège que le pied : un e-mail insécable donnait à la colonne un
   min-content de 325 px sur un écran de 320 (Firefox) */
.contact > *, .galerie > *, .cadeau > *, .trouver-corps > * { min-width: 0; }
.canal .corps { overflow-wrap: anywhere; }
.contact-tete { grid-column: 1 / -1; max-width: 640px; }
.contact-tete h2 { font-size: clamp(30px, 3.2vw, 42px); color: var(--terracotta); margin-bottom: 14px; }
.contact-tete p { color: var(--texte-doux); font-size: 14px; }
.contact-canaux { display: grid; gap: 14px; }
.canal {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 12px 22px 12px 12px;
  background: var(--creme);
  transition: border-color var(--vif), box-shadow var(--vif), transform var(--vif);
}
.canal:hover { border-color: var(--dragee); box-shadow: var(--ombre-carte); transform: translateY(-2px); }
.canal .pastille {
  flex: none; width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid var(--dragee);
  color: var(--terracotta);
  display: grid; place-items: center;
}
.canal .pastille svg { width: 19px; height: 19px; }
.canal .corps { flex: 1; min-width: 0; }
.canal .corps .role { font-size: 12.5px; color: var(--texte-doux); }
.canal .corps .valeur { font-size: 14.5px; font-weight: 400; }

.contact-carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-carte);
  padding: 26px;
  box-shadow: var(--ombre-carte);
}
.contact-carte h3 { font: 500 16px/1.3 var(--sans); margin-bottom: 18px; }
.contact-carte .champ { margin-bottom: 14px; }
.contact-carte input, .contact-carte textarea {
  width: 100%;
  font: 300 14px/1.5 var(--sans); color: var(--texte);
  padding: 13px 16px;
  border: 1px solid var(--ligne);
  border-radius: var(--r-champ);
  background: var(--blanc);
  outline: none;
  transition: border-color var(--vif), box-shadow var(--vif);
}
.contact-carte textarea { min-height: 110px; resize: vertical; }
.contact-carte input:focus, .contact-carte textarea:focus {
  border-color: var(--dragee);
  box-shadow: 0 0 0 3px rgba(203, 166, 143, .22);
}
.contact-carte ::placeholder { color: #B9A99C; }
.contact-carte .envoi { display: flex; justify-content: flex-end; margin-top: 4px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------- nous trouver (carte sombre) ----------------------------------------- */
.trouver {
  position: relative;
  margin: 0 12px 12px;
  border-radius: var(--r-grande);
  overflow: hidden;
  color: var(--blanc);
}
.trouver-fond { position: absolute; inset: 0; }
.trouver-fond img { width: 100%; height: 100%; object-fit: cover; }
.trouver-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(25, 17, 21, .88) 20%, rgba(25, 17, 21, .55) 100%);
}
.trouver-corps {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 46px; align-items: center;
  padding: 72px 8%;
}
.trouver h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 18px; }
.trouver p { color: rgba(255, 255, 255, .82); font-size: 14px; max-width: 46ch; }
.trouver .bouton { margin-top: 12px; }
.trouver-infos { display: grid; gap: 12px; }
.info-ligne {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 14px 18px;
}
.info-ligne svg { width: 18px; height: 18px; flex: none; color: var(--dragee); }
.info-ligne .quoi { font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.info-ligne .detail { font-size: 14px; }
@media (max-width: 900px) {
  .trouver-corps { grid-template-columns: 1fr; padding: 52px 7%; }
}

/* ---------- filtres + grille d'articles (pages carte & comptoir) ----------------- */
.filtres {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.filtres .pilule {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px; color: var(--texte);
  transition: background var(--vif), color var(--vif), border-color var(--vif);
}
.filtres .pilule:hover { border-color: var(--dragee); color: var(--terracotta); }
.filtres .pilule.actif { background: var(--dragee); color: var(--blanc); }
.filtres .note { margin-left: auto; font-size: 12.5px; color: var(--texte-doux); }
@media (max-width: 720px) { .filtres .note { display: none; } }

.articles {
  display: grid;
  /* le nombre de colonnes est un réglage de section (menu-grille.colonnes) :
     3 met l'assiette en avant, 4 privilégie le survol d'ensemble */
  grid-template-columns: repeat(var(--articles-cols, 4), 1fr);
  gap: 20px;
}
.article {
  background: var(--blanc);
  border-radius: var(--r-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  display: flex; flex-direction: column;
  transition: transform var(--vif), box-shadow var(--vif), opacity .45s ease;
  position: relative;
}
.article:hover { transform: translateY(-5px); box-shadow: var(--ombre-haut); }
.article .visuel { aspect-ratio: 1 / 1; overflow: hidden; }
.article .visuel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.article:hover .visuel img { transform: scale(1.06); }
.article .badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--terracotta); color: var(--blanc);
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em;
  padding: 5px 12px; border-radius: 999px;
}
.article .corps { padding: 18px 18px 22px; text-align: center; flex: 1; display: flex; flex-direction: column; }
.article .nom { font: 400 18.5px/1.25 var(--serif); color: var(--texte); }
.article .desc { font-size: 12.5px; color: var(--texte-doux); margin: 7px auto 0; max-width: 30ch; }
.article .prix {
  margin-top: 12px;
  font: 400 17px/1 var(--serif); color: var(--terracotta);
}
.article .servi {
  margin: 16px auto 0;
  display: inline-flex; align-items: center;
}
.article .servi .lib {
  padding: 10px 22px; border-radius: 999px;
  background: var(--dragee); color: var(--blanc); font-size: 13px;
  transition: background var(--vif);
}
.article:hover .servi .lib { background: var(--terracotta); }
.article.est-cache { display: none; }
.article.va-partir { opacity: 0; transform: scale(.96); }
.article.arrive { opacity: 0; transform: scale(.96); transition: none; }
/* on ne descend jamais en dessous du réglage choisi : min() garde 3 colonnes
   pour une grille à 4, mais n'en invente pas une de plus pour une grille à 3 */
@media (max-width: 1000px) { .articles { grid-template-columns: repeat(min(var(--articles-cols, 4), 3), 1fr); } }
@media (max-width: 760px)  { .articles { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 440px)  { .articles { grid-template-columns: 1fr; } }

/* ---------- pied de page ---------------------------------------------------------- */
.pied {
  margin: 12px;
  border-radius: var(--r-grande);
  background:
    radial-gradient(120% 160% at 15% -30%, rgba(255, 255, 255, .12), transparent 55%),
    var(--caramel);
  color: var(--blanc);
  padding: 64px 6% 28px;
}
.pied-grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
  gap: 40px;
}
/* `1fr` vaut `minmax(auto, 1fr)` : sans ce min-width, la colonne ne peut pas
   descendre sous le min-content de son contenu. Firefox donne au champ email
   sa largeur intrinsèque (attribut size) et la colonne débordait de 48 px sur
   téléphone — invisible sous Chromium, bien réel sous Gecko. */
.pied-grille > * { min-width: 0; }
.pied-news form { min-width: 0; }
.pied-marque svg { width: 44px; height: 44px; color: var(--blanc); }
.pied-marque .mot { font: 400 30px/1.2 var(--serif); display: block; margin: 12px 0 6px; }
.pied-marque p { font-size: 13px; color: rgba(255, 255, 255, .75); max-width: 30ch; }
.pied-social { display: flex; gap: 10px; margin-top: 18px; }
.pied-social a {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  display: grid; place-items: center;
  transition: background var(--vif), border-color var(--vif);
}
.pied-social a:hover { background: rgba(255, 255, 255, .15); border-color: var(--blanc); }
.pied-social svg { width: 16px; height: 16px; }
.pied h4 { font: 500 15px/1.3 var(--sans); margin-bottom: 16px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied ul a { font-size: 13.5px; color: rgba(255, 255, 255, .82); transition: color var(--vif); }
.pied ul a:hover { color: var(--blanc); }
.pied-news p { font-size: 13px; color: rgba(255, 255, 255, .75); }
.pied-news form { display: flex; margin-top: 14px; }
.pied-news input {
  flex: 1; min-width: 0;
  font: 300 13.5px/1.5 var(--sans); color: var(--texte);
  padding: 12px 16px;
  border: 0; outline: none;
  border-radius: 999px 0 0 999px;
}
.pied-news button {
  padding: 0 18px;
  border-radius: 0 999px 999px 0;
  background: rgba(255, 255, 255, .25);
  color: var(--blanc);
  transition: background var(--vif);
}
.pied-news button:hover { background: rgba(255, 255, 255, .4); }
.pied-news button svg { width: 16px; height: 16px; }
.pied-bas {
  margin-top: 46px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255, 255, 255, .75);
}
@media (max-width: 960px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pied-grille { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- toast ------------------------------------------------------------------- */
.toast {
  position: fixed; z-index: 90;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--texte); color: var(--creme);
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 999px;
  box-shadow: 0 18px 40px -12px rgba(25, 17, 21, .5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--vif), transform var(--vif);
}
.toast.est-la { opacity: 1; transform: translate(-50%, 0); }

/* ---------- apparitions au défilement ------------------------------------------------ */
.rev { opacity: 0; transform: translateY(30px); }
.est-revele .rev,
.rev.est-la {
  opacity: 1; transform: none;
  transition: opacity var(--lent), transform var(--lent);
}
.rev[data-cran="1"] { transition-delay: calc(var(--cran) * 1); }
.rev[data-cran="2"] { transition-delay: calc(var(--cran) * 2); }
.rev[data-cran="3"] { transition-delay: calc(var(--cran) * 3); }
.rev[data-cran="4"] { transition-delay: calc(var(--cran) * 4); }

/* ---------- interrupteurs de motion (pilotés par la config) -------------- */
html[data-apparitions="off"] .rev {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
html[data-apparitions="off"] .mot-anim {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
html[data-zoom-heros="off"] .heros-fond img { animation: none; transform: none; }

/* ==========================================================================
   L'APPÉTIT — commun à TOUS les sites, pas seulement la pizzeria.
   Toute la photographie partage un étalonnage (réglable dans theme.photos)
   pour que des sources disparates lisent comme une seule cuisine, et zoome
   lentement au survol : on se penche sur l'assiette, on ne clique pas.
   ========================================================================== */
.article .visuel img,
.eventail .photo img,
.galerie-mur .bloc img,
.fidelite-visuel img,
.categorie img,
.cadeau-scene img,
.heros-fond img,
.trouver-fond img {
  filter: var(--photo-filtre);
}
.article .visuel img,
.eventail .photo img,
.galerie-mur .bloc img,
.categorie img {
  transition: transform var(--photo-duree) cubic-bezier(.22, .61, .36, 1),
              filter .8s ease;
}
.article:hover .visuel img,
.eventail a:hover .photo img,
.galerie-mur .bloc:hover img,
.categorie:hover img {
  transform: scale(var(--photo-zoom));
  filter: var(--photo-filtre-survol);
}

/* le héros reste lisible sans noyer la photo sous un voile */
.heros h1 { text-shadow: 0 2px 26px rgba(0, 0, 0, .5); }
.heros-corps p { text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }

/* ---- les titres se lèvent mot à mot (geste Les Gourmands) ----------------
   Le balisage est émis pour tous les sites : l'animation aussi, désormais.
   Le bloc ne fond pas — seuls les mots montent sous leur masque. */
.rev.titre-mots { opacity: 1; transform: none; }
.titre-mots .mot-masque {
  display: inline-block;
  overflow: hidden;
  padding: .12em .05em .16em;
  margin: -.12em -.05em -.16em;
}
.titre-mots .mot-anim {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform 1s cubic-bezier(.22, .61, .36, 1) var(--mot-delai, 0s),
    opacity .6s ease var(--mot-delai, 0s);
}
.titre-mots.est-la .mot-anim { transform: none; opacity: 1; }

/* ---- composition du héros : ancrée à gauche (heros.composition) ----------
   L'alignement à gauche vaut à toutes les tailles, mais les ESPACEMENTS de
   cette composition sont réservés au grand écran : un sélecteur à attribut
   pèse plus lourd qu'une classe, et sans cette borne il écrasait la
   compaction mobile — le héros repassait à 846 px sur un écran de 568. */
.heros[data-compo="gauche"] .heros-fond::after {
  background:
    linear-gradient(100deg,
      rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .46) 44%, rgba(0, 0, 0, .06) 78%),
    linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, transparent 32%, rgba(0, 0, 0, .56) 100%);
}
.heros[data-compo="gauche"] .heros-corps { text-align: left; margin: 0; max-width: 860px; }
.heros[data-compo="gauche"] .heros-corps p { margin-inline: 0; max-width: 46ch; }
.heros[data-compo="gauche"] .heros-actions { justify-content: flex-start; }
.heros[data-compo="gauche"] .heros-chiffres { text-align: left; }
.heros[data-compo="gauche"] .heros-chiffres .valeur { justify-content: flex-start; }

@media (min-width: 721px) {
  .heros[data-compo="gauche"] .heros-corps {
    padding: 170px clamp(24px, 6vw, 80px) 34px clamp(28px, 7vw, 100px);
  }
  .heros[data-compo="gauche"] .heros-chiffres {
    display: flex; flex-wrap: wrap;
    gap: 20px clamp(32px, 5vw, 70px);
    padding: 26px clamp(28px, 7vw, 100px) 48px;
  }
}

/* ==========================================================================
   variante « forno » — la déclinaison pizzeria (theme.style: "forno").
   Même ossature, silhouette plus franche : angles courts à la place des
   pilules, ronds de pizza pour l'éventail et la scène cadeau, vichy en
   fond de nappe, titres plus charpentés.
   ========================================================================== */
html[data-style="forno"] h1, html[data-style="forno"] h2,
html[data-style="forno"] h3, html[data-style="forno"] h4,
html[data-style="forno"] .nav-logo .mot,
html[data-style="forno"] .pied-marque .mot,
html[data-style="forno"] .article .nom,
html[data-style="forno"] .heros-chiffres .valeur,
html[data-style="forno"] .categorie-pied .nom { font-weight: 600; }

/* nav « ardoise » (barre 08 du catalogue) : plus d'îlot pilule — un bandeau
   d'ardoise pleine largeur, wordmark et liens à la craie (--fonte-craie),
   actif souligné d'un trait ondulé, note dans un cadre tracé à la main.
   Tout est piloté par la palette : encre = l'ardoise, creme = la craie,
   dragee = la craie de couleur. */
html[data-style="forno"] .nav {
  inset: 0 0 auto;
  max-width: none;
  border-radius: 0;
  padding: 11px clamp(20px, 4vw, 44px);
  background: var(--encre);
  color: var(--creme);
  border-bottom: 0;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4);
}
html[data-style="forno"] .nav.est-posee { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4), var(--ombre-nav); }
html[data-style="forno"] .nav-logo svg { color: var(--creme); }
html[data-style="forno"] .nav-logo .mot {
  font: 700 26px/1 var(--fonte-craie, var(--serif));
  color: var(--creme);
}
html[data-style="forno"] .nav-liens { gap: 20px; }
html[data-style="forno"] .nav-liens a {
  border-radius: 0;
  padding: 6px 3px;
  font: 500 18px/1.3 var(--fonte-craie, var(--serif));
  letter-spacing: .01em;
  color: var(--creme);
}
html[data-style="forno"] .nav-liens a:hover {
  color: var(--creme);
  text-decoration: underline wavy 2px var(--dragee);
  text-decoration-color: color-mix(in srgb, var(--creme) 55%, transparent);
  text-underline-offset: 7px;
}
html[data-style="forno"] .nav-liens a.actif,
html[data-style="forno"] .nav-liens a[aria-current="page"] {
  background: transparent;
  color: var(--dragee);
  text-decoration: underline wavy 2px var(--dragee);
  text-underline-offset: 7px;
}
html[data-style="forno"] .nav-note {
  /* repli plein d'abord : un navigateur sans color-mix garde une craie
     lisible plutôt qu'une couleur invalide (donc héritée) */
  color: var(--creme);
  color: color-mix(in srgb, var(--creme) 85%, transparent);
  font: 500 15px/1.3 var(--fonte-craie, var(--serif));
  border: 1.5px dashed var(--dragee);
  border-color: color-mix(in srgb, var(--creme) 50%, transparent);
  border-radius: 7px;
  padding: 4px 12px;
}
html[data-style="forno"] .nav-burger span,
html[data-style="forno"] .nav-burger span::before,
html[data-style="forno"] .nav-burger span::after { background: var(--creme); }
html[data-style="forno"] .nav.est-ouverte .nav-burger span { background: transparent; }
html[data-style="forno"] .nav-tiroir {
  inset: var(--h-nav, 64px) 0 auto;
  border-radius: 0 0 16px 16px;
  background: var(--encre);
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5);
}
html[data-style="forno"] .nav-tiroir a {
  border-radius: 9px;
  font: 500 19px/1.3 var(--fonte-craie, var(--serif));
  color: var(--creme);
}
html[data-style="forno"] .nav-tiroir a.actif,
html[data-style="forno"] .nav-tiroir a:hover {
  background: transparent;
  color: var(--dragee);
  text-decoration: underline wavy 2px var(--dragee);
  text-underline-offset: 6px;
}
html[data-style="forno"] .bouton .lib,
html[data-style="forno"] .bouton .fleche,
html[data-style="forno"] .article .servi .lib,
html[data-style="forno"] .article .servi .fleche,
html[data-style="forno"] .filtres .pilule,
html[data-style="forno"] .pied-social a { border-radius: 11px; }
html[data-style="forno"] .article .badge { border-radius: 7px; }
html[data-style="forno"] .fidelite-points h6 { border-radius: 14px; }
html[data-style="forno"] .canal,
html[data-style="forno"] .info-ligne { border-radius: 16px; }
html[data-style="forno"] .canal .pastille { border-radius: 12px; }
html[data-style="forno"] .categorie-pied { border-radius: 12px; }
html[data-style="forno"] .categorie-pied .fleche { border-radius: 9px; }
html[data-style="forno"] .pied-news input { border-radius: 11px 0 0 11px; }
html[data-style="forno"] .pied-news button { border-radius: 0 11px 11px 0; }
html[data-style="forno"] .contact-carte input,
html[data-style="forno"] .contact-carte textarea { border-radius: 10px; }
html[data-style="forno"] .toast { border-radius: 12px; }

/* l'éventail devient une rangée de disques — le motif pizza */
html[data-style="forno"] .eventail .photo {
  border-radius: 999px; aspect-ratio: 1 / 1;
}
html[data-style="forno"] .eventail .etiquette { text-align: center; }

/* la photo « à part » du collage devient un disque elle aussi */
html[data-style="forno"] .galerie-mur .bloc:nth-child(2) {
  border-radius: 999px; aspect-ratio: 1 / 1;
}

/* l'œil-de-perdrix et le rythme des sections sont passés au socle : tous les
   sites en héritent désormais (voir « sections » plus haut). */

/* ---- l'appétit d'abord : la photo domine, chaude et lente -----------------
   Grille à 3 colonnes (l'assiette est plus grande), cadrage 4/4.4, léger
   étalonnage chaud unifié sur toute la photographie, zooms paresseux. */
html[data-style="forno"] .article .visuel { aspect-ratio: 4 / 4.4; }
html[data-style="forno"] .article {
  transition:
    transform .45s cubic-bezier(.22, .61, .36, 1),
    box-shadow .45s cubic-bezier(.22, .61, .36, 1),
    opacity .3s ease;
}
html[data-style="forno"] .article:hover { transform: translateY(-6px); }
html[data-style="forno"] .article .nom { font-size: 21px; }
html[data-style="forno"] .article .desc { font-size: 13px; }
html[data-style="forno"] .article .prix { font-size: 19px; margin-top: 14px; }

/* la composition ancrée à gauche est passée au socle (heros.composition) ;
   ici ne restent que les touches propres au four : l'accroche à la craie,
   le titre plus charpenté, les chiffres à la couleur de la braise. */
html[data-style="forno"] .heros-kicker {
  display: inline-block;
  font: 600 clamp(20px, 2vw, 26px)/1.2 var(--fonte-craie, var(--serif));
  color: var(--dragee);
  transform: rotate(-1.6deg);
  margin-bottom: 16px;
}
html[data-style="forno"] .heros h1 {
  font-size: clamp(46px, 6.4vw, 88px);
  line-height: 1.02;
  margin-bottom: 24px;
}
html[data-style="forno"] .heros-corps p { font-size: 15.5px; }
html[data-style="forno"] .heros-chiffres .valeur { font-size: clamp(30px, 3vw, 46px); }
html[data-style="forno"] .heros-chiffres .valeur sup { color: var(--dragee); }
html[data-style="forno"] .heros-chiffres .legende {
  margin-top: 7px;
  color: rgba(255, 255, 255, .82);
}
/* sur téléphone le héros doit tenir dans l'écran : on serre le pas et les
   chiffres redeviennent une rangée compacte plutôt qu'une colonne de 200 px */
@media (max-width: 720px) {
  html[data-style="forno"] .heros-corps {
    padding: 96px clamp(20px, 6vw, 34px) 16px;
  }
  html[data-style="forno"] .heros h1 { font-size: clamp(36px, 10vw, 54px); margin-bottom: 16px; }
  html[data-style="forno"] .heros-kicker { font-size: 18px; margin-bottom: 10px; }
  html[data-style="forno"] .heros-corps p { font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
  html[data-style="forno"] .heros-chiffres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px clamp(20px, 6vw, 34px) 26px;
  }
  html[data-style="forno"] .heros-chiffres .valeur { font-size: 25px; }
  html[data-style="forno"] .heros-chiffres .legende { font-size: 10.5px; line-height: 1.3; }
}
/* très petits écrans (iPhone SE 320×568) : le forno surcharge le socle, il
   lui faut donc sa propre passe de resserrage */
@media (max-width: 360px) {
  html[data-style="forno"] .heros-corps { padding-top: 84px; }
  html[data-style="forno"] .heros-chiffres { padding-bottom: 18px; gap: 8px; }
  html[data-style="forno"] .heros-chiffres .legende { font-size: 10px; }
  /* Safari coupe ce paragraphe une ligne plus bas que Chromium et Gecko —
     22 px d'écart mesurés sur un écran de 568. La règle du socle à 13 px
     existait déjà, mais la peau, plus spécifique, la recouvrait. */
  html[data-style="forno"] .heros-corps p {
    font-size: 13px; line-height: 1.5; margin-bottom: 18px;
  }
}

/* deux boutons côte à côte tenaient à 3 px près : plutôt que de les laisser
   passer à la ligne (66 px de héros en plus), ils se partagent la largeur */
@media (max-width: 480px) {
  html[data-style="forno"] .heros-actions { width: 100%; gap: 10px; }
  html[data-style="forno"] .heros-actions .bouton { flex: 1 1 0; min-width: 0; }
  html[data-style="forno"] .heros-actions .bouton .lib {
    width: 100%; justify-content: center; padding-inline: 14px; font-size: 14px;
  }
}

/* ---- les boutons : une seule pièce -----------------------------------------
   La pastille flèche héritée de Kultúra coupait chaque bouton en deux et
   n'apportait rien : le forno la retire. Reste un bloc franc qui se soulève
   au survol ; le secondaire s'inverse en plein (verre → crème) plutôt que
   de pâlir. Bordure transparente sur le plein pour que les deux boutons
   gardent exactement la même hauteur. */
html[data-style="forno"] .bouton { gap: 0; }
html[data-style="forno"] .bouton .fleche,
html[data-style="forno"] .article .servi .fleche { display: none; }
html[data-style="forno"] .bouton .lib {
  padding: 15px 34px;
  border: 1.5px solid transparent;
  border-radius: 11px;
  background: var(--terracotta);
  color: var(--blanc);
  font: 500 14.5px/1.4 var(--sans);
  letter-spacing: .015em;
  box-shadow: 0 12px 26px -14px rgba(26, 12, 6, .75);
  transition:
    background .3s cubic-bezier(.33, 1, .68, 1),
    color .3s cubic-bezier(.33, 1, .68, 1),
    border-color .3s cubic-bezier(.33, 1, .68, 1),
    transform .3s cubic-bezier(.33, 1, .68, 1),
    box-shadow .3s cubic-bezier(.33, 1, .68, 1);
}
html[data-style="forno"] .bouton:hover .lib {
  background: var(--terracotta-fonce);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -16px rgba(26, 12, 6, .8);
}
html[data-style="forno"] .bouton:active .lib { transform: translateY(0); }
html[data-style="forno"] .bouton:focus-visible .lib {
  outline: 2px solid var(--dragee);
  outline-offset: 3px;
}

/* le secondaire, sur photo : contour clair qui se remplit au survol */
html[data-style="forno"] .bouton--verre .lib {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .55);
  color: var(--blanc);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-style="forno"] .bouton--verre:hover .lib {
  background: rgba(255, 255, 255, .95);
  border-color: transparent;
  color: var(--encre);
}
html[data-style="forno"] .bouton--blanc .lib {
  background: var(--blanc);
  color: var(--terracotta);
}
html[data-style="forno"] .bouton--blanc:hover .lib {
  background: var(--sable);
  color: var(--terracotta-fonce);
}

/* la pilule « servi en salle » suit la même règle */
html[data-style="forno"] .article .servi { gap: 0; }
html[data-style="forno"] .article .servi .lib {
  padding: 11px 26px;
  border-radius: 11px;
  background: var(--terracotta);
}
html[data-style="forno"] .article:hover .servi .lib { background: var(--terracotta-fonce); }

/* la scène cadeau : nappe vichy au lieu du papier quadrillé */
html[data-style="forno"] .cadeau-scene {
  /* le vichy : repli sur --ligne (opaque, toujours valide) puis la version
     teintée pour les navigateurs qui savent mélanger */
  background-image:
    linear-gradient(0deg, transparent 0 7px, var(--ligne) 7px 14px),
    linear-gradient(90deg, transparent 0 7px, var(--ligne) 7px 14px);
  background-image:
    linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--dragee) 28%, transparent) 7px 14px),
    linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--dragee) 28%, transparent) 7px 14px);
  background-size: 28px 28px;
  border-radius: 16px;
}
html[data-style="forno"] .cadeau-scene img { aspect-ratio: 1 / 1; }

/* ==========================================================================
   SECTIONS AJOUTÉES — horaires, avis, FAQ, prestations, prose.
   Elles ouvrent le moteur au-delà du café : un garage a des horaires et des
   prestations, pas une carte. Chaque peau peut les retoucher, mais elles
   sont utilisables telles quelles.
   ========================================================================== */

/* ---- horaires : la première chose qu'on cherche sur un site de commerce -- */
.horaires { max-width: 720px; margin-inline: auto; }
.horaires--avec-photo {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 46px; align-items: center;
  max-width: none;
}
.horaires--avec-photo > * { min-width: 0; }
.horaires-photo { border-radius: var(--r-carte); overflow: hidden; box-shadow: var(--ombre-carte); }
.horaires-photo img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.ligne-horaire {
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--ligne);
  font-size: 15px;
}
.ligne-horaire:last-of-type { border-bottom: 0; }
.ligne-horaire .jours { font-weight: 500; }
.ligne-horaire .pointilles {
  flex: 1; height: 0;
  border-bottom: 1.5px dotted var(--ligne);
  transform: translateY(-4px);
}
.ligne-horaire .heures { font-variant-numeric: tabular-nums; color: var(--terracotta); }
.ligne-horaire.est-ferme { color: var(--texte-doux); }
.ligne-horaire.est-ferme .heures { color: var(--texte-doux); font-style: italic; }
/* le jour courant, marqué par le JS */
.ligne-horaire.est-aujourdhui {
  /* --blanc plutôt que --sable : la section elle-même peut être sur sable,
     et un surlignage de la couleur du fond ne surligne rien */
  background: var(--blanc);
  border-radius: 10px;
  padding-inline: 14px;
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .45);
}
.ligne-horaire.est-aujourdhui .jours::after {
  content: '•'; color: var(--terracotta); margin-left: 8px;
}
.horaires-note { margin-top: 18px; font-size: 13px; color: var(--texte-doux); }
@media (max-width: 860px) {
  .horaires--avec-photo { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- avis : la preuve sociale ------------------------------------------- */
.avis-grille {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.avis-grille > * { min-width: 0; }
.avis-carte {
  margin: 0;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-carte);
  padding: 26px 24px 22px;
  box-shadow: var(--ombre-carte);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--vif), box-shadow var(--vif);
}
.avis-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-haut); }
.avis-note { display: flex; gap: 3px; font-size: 15px; color: var(--dragee); line-height: 1; }
.avis-note .etoile.vide { opacity: .28; }
.avis-carte blockquote {
  margin: 0; font-size: 15px; line-height: 1.62;
  /* la citation typographique, sans guillemets droits dans le contenu */
  quotes: '«\00a0' '\00a0»';
}
.avis-carte blockquote::before { content: open-quote; color: var(--dragee); }
.avis-carte blockquote::after  { content: close-quote; color: var(--dragee); }
.avis-carte figcaption {
  margin-top: auto; font-size: 13px; font-weight: 500;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.avis-source { font-weight: 400; color: var(--texte-doux); }
.avis-source::before { content: '— '; }
@media (max-width: 900px) { .avis-grille { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---- FAQ : <details> natifs, donc accessibles et sans JavaScript --------- */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 10px; }
.faq-item {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-carte);
  overflow: hidden;
  transition: border-color var(--vif), box-shadow var(--vif);
}
.faq-item[open] { border-color: var(--dragee); box-shadow: var(--ombre-carte); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 54px 18px 22px;
  font: 500 15.5px/1.45 var(--sans);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* le chevron est dessiné en CSS : deux traits qui pivotent à l'ouverture */
.faq-item summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: rotate(45deg);
  transition: transform var(--vif);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:hover { color: var(--terracotta); }
.faq-reponse {
  padding: 0 22px 20px;
  font-size: 14.5px; line-height: 1.65; color: var(--texte-doux);
  max-width: 62ch;
}

/* ---- prestations : le moteur au-delà de la restauration ----------------- */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.services > * { min-width: 0; }
.service {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-carte);
  padding: 20px;
  transition: transform var(--vif), box-shadow var(--vif), border-color var(--vif);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); border-color: var(--dragee); }
.service-photo { flex: none; width: 92px; border-radius: 12px; overflow: hidden; }
.service-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.service-corps { flex: 1; min-width: 0; }
.service-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.service-tete h3 { font: 400 19px/1.25 var(--serif); color: var(--texte); }
.service-duree { font-size: 12.5px; color: var(--texte-doux); }
.service-corps p { font-size: 13.5px; color: var(--texte-doux); margin: 6px 0 0; }
.service-prix { margin-top: 10px; font: 400 17px/1 var(--serif); color: var(--terracotta); }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }

/* ---- prose ------------------------------------------------------------- */
.bloc-texte { font-size: 15px; line-height: 1.75; }
.bloc-texte.texte--etroit { max-width: 68ch; margin-inline: auto; }
.bloc-texte p { margin-bottom: 1.1em; }
.bloc-texte.texte--deux { column-gap: 46px; }
@media (min-width: 861px) {
  .bloc-texte.texte--deux { column-count: 2; max-width: none; }
  /* un paragraphe ne doit pas être coupé entre deux colonnes */
  .bloc-texte.texte--deux p { break-inside: avoid; }
}

/* ==========================================================================
   TACTILE & TÉLÉPHONES — ce bloc vient en dernier pour gagner sur les peaux.
   Discipline reprise de Les Gourmands : le survol n'existe pas au doigt, la
   zone tactile fait 44 px, l'encoche est respectée, et iOS ne doit jamais
   zoomer sur un champ de formulaire.
   ========================================================================== */

/* --- l'encoche et les bords arrondis (iPhone, Android à trous) ------------ */
.nav {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
html[data-style="forno"] .nav {
  padding-left: max(clamp(20px, 4vw, 44px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 4vw, 44px), env(safe-area-inset-right));
}
.pied { margin-bottom: max(12px, env(safe-area-inset-bottom)); }
.toast { bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px)); }

/* --- le tiroir mobile est un monde clos ---------------------------------- */
.nav-tiroir {
  max-height: calc(100vh - 110px);
  max-height: calc(100svh - 110px);
  overflow-y: auto;
  /* arriver au bout du tiroir ne doit pas passer le volant à la page */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- iOS zoome dès qu'un champ fait moins de 16 px : jamais --------------- */
@media (pointer: coarse) {
  .contact-carte input,
  .contact-carte textarea,
  .pied-news input { font-size: 16px; }

  /* 44 px minimum sous le doigt (WCAG 2.5.8 / HIG) */
  .filtres .pilule { min-height: 44px; padding-inline: 22px; }
  .nav-liens a, .nav-tiroir a { min-height: 44px; display: flex; align-items: center; }
  .nav-logo { min-height: 44px; }
  .pied ul a { display: inline-flex; align-items: center; min-height: 40px; }
  .canal { padding-block: 14px; }
  /* le fil d'Ariane reste visuellement fin : on agrandit la zone tactile
     par du padding compensé, sans bouger la mise en page */
  .fil a { padding: 11px 8px; margin: -11px -8px; }
}

/* --- au doigt, le survol n'existe pas : il collerait après le tap --------- */
@media (hover: none) {
  .article:hover,
  html[data-style="forno"] .article:hover,
  .canal:hover { transform: none; }
  .article:hover .visuel img,
  .eventail a:hover .photo img,
  .categorie:hover img,
  .galerie-mur .bloc:hover img,
  html[data-style="forno"] .article:hover .visuel img,
  html[data-style="forno"] .eventail a:hover .photo img,
  html[data-style="forno"] .galerie-mur .bloc:hover img { transform: none; }
  html[data-style="forno"] .bouton:hover .lib { transform: none; }
  .bouton:hover .fleche svg { transform: none; }

  /* on rend la sensation autrement : la pression répond tout de suite */
  .bouton:active .lib,
  .bouton:active .fleche,
  html[data-style="forno"] .bouton:active .lib,
  .filtres .pilule:active { transform: scale(.97); }
  .article:active { transform: scale(.99); }
  .canal:active { transform: scale(.99); }
}

/* --- paysage court (téléphone couché) : le héros ne doit pas tout manger -- */
@media (max-height: 520px) and (orientation: landscape) {
  .heros { min-height: 460px; }
  .heros-corps { padding-top: 96px; }
  html[data-style="forno"] .heros-corps { padding-top: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
  .mot-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .heros-fond img { animation: none; transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   LE VOCABULAIRE NOCTURNE
   Neuf sections et deux gestes ajoutés au socle. Rien ici ne dépend d'une
   peau : la peau « nocturne » plus bas ne fait que les habiller autrement.
   ========================================================================== */

/* ---- gestes de titre : « voile » ------------------------------------------
   Au lieu de lever le mot sous son masque, on ouvre un rideau latéral. Le
   mot ne bouge pas — c'est le cadrage qui s'élargit. Beaucoup plus calme,
   et adapté aux très grandes casses où un mot qui monte de 115 % parcourt
   une distance ridicule à l'écran. */
html[data-geste="voile"] .titre-mots .mot-anim {
  transform: none; opacity: 1; transition: none;
}
html[data-geste="voile"] .titre-mots .mot-masque {
  -webkit-clip-path: inset(0 101% 0 -2%);
  clip-path: inset(0 101% 0 -2%);
  transition:
    -webkit-clip-path .85s cubic-bezier(.76, 0, .24, 1) var(--mot-delai, 0s),
    clip-path .85s cubic-bezier(.76, 0, .24, 1) var(--mot-delai, 0s);
}
html[data-geste="voile"] .titre-mots.est-la .mot-masque {
  -webkit-clip-path: inset(0 -2% 0 -2%);
  clip-path: inset(0 -2% 0 -2%);
}

/* ---- entrée des blocs : « gauche » ---------------------------------------
   Les blocs arrivent du bord au lieu de monter. Combiné au voile, plus rien
   ne « saute » verticalement : la page se dévoile par la marge. */
html[data-entree="gauche"] .rev { transform: translateX(-26px); }
html[data-entree="gauche"] .est-revele .rev,
html[data-entree="gauche"] .rev.est-la { transform: none; }
html[data-entree="gauche"] .rev.titre-mots { transform: none; }

/* ---- bandeau défilant ---------------------------------------------------- */
.defile {
  overflow: hidden;
  border-top: 1px solid var(--dragee);
  border-bottom: 1px solid var(--dragee);
  padding: 18px 0;
  /* pas de vitesse par défaut dans le JS : la config la pose en style inline */
  --defile-duree: 38s;
}
.defile-piste { display: flex; width: max-content; animation: defile-glisse var(--defile-duree) linear infinite; }
.defile-suite { display: flex; align-items: center; }
.defile-mot {
  font: 400 clamp(19px, 2.4vw, 31px)/1 var(--serif);
  color: var(--terracotta);
  white-space: nowrap;
}
.defile-sep { padding: 0 26px; color: var(--dragee); font-size: 20px; }
@keyframes defile-glisse { to { transform: translateX(-50%); } }
/* survol : on ralentit plutôt que d'arrêter net — un texte qui s'immobilise
   d'un coup se lit comme un bug */
.defile:hover .defile-piste { animation-duration: calc(var(--defile-duree) * 2.6); }

/* ---- sommaire numéroté --------------------------------------------------- */
.somm-liste { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.somm-liste li { border-top: 1px solid var(--dragee); }
.somm-liste li:last-child { border-bottom: 1px solid var(--dragee); }
.somm-liste a, .somm-inerte {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 22px 4px;
  transition: background var(--vif), padding-left var(--vif);
}
.somm-liste a:hover { background: var(--sable); padding-left: 18px; }
.somm-num {
  font: 500 12px/1 var(--sans); letter-spacing: .16em;
  color: var(--terracotta);
}
.somm-nom { font: 400 clamp(21px, 2.6vw, 30px)/1.1 var(--serif); min-width: 0; }
.somm-note { font-size: 13px; color: var(--texte-doux); text-align: right; min-width: 0; }

/* ---- la carte en liste (aucune photo) ------------------------------------ */
.cl-grille { display: grid; gap: 54px 60px; }
.cl-grille[data-colonnes="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-rubrique { min-width: 0; }
.cl-rubrique-nom {
  font: 500 11.5px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracotta);
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--dragee);
}
.cl-note { font-size: 13px; font-style: italic; color: var(--texte-doux); margin: 10px 0 0; }
.cl-lignes { list-style: none; margin: 14px 0 0; padding: 0; }
.cl-ligne { padding: 15px 0; border-bottom: 1px solid var(--dragee); }
.cl-ligne:last-child { border-bottom: 0; }
.cl-tete { display: flex; align-items: baseline; gap: 10px; }
.cl-nom {
  font: 400 clamp(17px, 1.5vw, 20px)/1.25 var(--serif);
  min-width: 0;
  /* un nom de cuvée peut être long et sans espace : il se coupe plutôt que
     de pousser le prix hors de la ligne */
  overflow-wrap: anywhere;
}
.cl-marque {
  display: inline-block; margin-left: 10px;
  font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta);
  border: 1px solid var(--dragee); border-radius: var(--r-champ);
  padding: 4px 7px; vertical-align: middle;
}
/* le point de conduite : un trait pointillé élastique. Des points tapés à la
   main ne s'aligneraient à aucune largeur d'écran. */
.cl-conduite {
  flex: 1 1 auto; min-width: 24px;
  border-bottom: 1px dotted var(--dragee);
  transform: translateY(-4px);
}
.cl-prix { font: 500 15px/1 var(--sans); color: var(--texte); white-space: nowrap; }
.cl-desc { font-size: 13.5px; color: var(--texte-doux); margin: 6px 0 0; max-width: 62ch; }

/* ---- récit à image collante ---------------------------------------------- */
.recit-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; }
.recit-colle {
  position: sticky;
  top: calc(var(--h-nav, 68px) + 36px);
  align-self: start;
  display: grid; gap: 16px;
}
.recit-vue { overflow: hidden; border-radius: var(--r-carte); }
.recit-vue img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: var(--photo-filtre); }
.recit-texte { display: grid; gap: 64px; }
.recit-chapitre { min-width: 0; }
.recit-num {
  display: block; margin-bottom: 14px;
  font: 500 12px/1 var(--sans); letter-spacing: .18em; color: var(--terracotta);
}
.recit-chapitre h3 { font-size: clamp(23px, 2.6vw, 32px); line-height: 1.15; margin-bottom: 14px; }
.recit-chapitre p { color: var(--texte-doux); max-width: 58ch; }

/* ---- citation ------------------------------------------------------------ */
.citation .contenant { max-width: 900px; }
.citation figure { margin: 0; text-align: center; }
.cit-texte {
  margin: 0;
  font: 400 clamp(25px, 3.6vw, 44px)/1.28 var(--serif);
  color: var(--terracotta);
}
.cit-source {
  margin-top: 26px;
  font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte-doux);
}

/* ---- duo de photos décalées ---------------------------------------------- */
.duo-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.duo-vue { margin: 0; min-width: 0; }
.duo-vue:nth-child(2) { margin-top: 72px; }
.duo-cadre { overflow: hidden; border-radius: var(--r-carte); }
.duo-cadre img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: var(--photo-filtre);
  transition: transform var(--photo-duree) cubic-bezier(.22, .61, .36, 1);
}
.duo-vue:hover .duo-cadre img { transform: scale(var(--photo-zoom)); }
.duo-vue figcaption { margin-top: 14px; font-size: 13px; color: var(--texte-doux); }

/* ---- agenda -------------------------------------------------------------- */
.ag-liste { list-style: none; margin: 0; padding: 0; }
.ag-ligne {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto 108px;
  align-items: center; gap: 26px;
  padding: 26px 0;
  border-top: 1px solid var(--dragee);
}
.ag-ligne:last-child { border-bottom: 1px solid var(--dragee); }
.ag-date { display: block; text-align: center; }
.ag-jour { display: block; font: 400 34px/1 var(--serif); color: var(--terracotta); }
.ag-mois {
  display: block; margin-top: 4px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--texte-doux);
}
.ag-corps { min-width: 0; }
.ag-corps h3 { font-size: 21px; line-height: 1.2; }
.ag-corps p { margin: 6px 0 0; font-size: 13.5px; color: var(--texte-doux); }
.ag-heure { font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--texte-doux); white-space: nowrap; }
.ag-vignette { overflow: hidden; border-radius: var(--r-carte); }
.ag-vignette img { width: 108px; height: 76px; object-fit: cover; filter: var(--photo-filtre); }

/* ---- équipe (au monogramme) ---------------------------------------------- */
.eq-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}
.eq-fiche { min-width: 0; }
.eq-monogramme, .eq-portrait {
  width: 96px; height: 96px; margin-bottom: 20px;
  border-radius: 999px; overflow: hidden;
}
.eq-monogramme {
  display: grid; place-items: center;
  border: 1px solid var(--terracotta);
  font: 400 30px/1 var(--serif); color: var(--terracotta);
  letter-spacing: .04em;
}
.eq-portrait img { width: 100%; height: 100%; object-fit: cover; }
.eq-nom { font-size: 22px; }
.eq-role {
  margin: 6px 0 12px;
  font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracotta);
}
.eq-mot { font-size: 13.5px; color: var(--texte-doux); margin: 0; }

/* ---- bande photo pleine largeur ------------------------------------------ */
.bande-photo {
  position: relative;
  min-height: 62vh;
  min-height: 62svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.bp-fond { position: absolute; inset: 0; }
.bp-fond img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filtre); }
.bp-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, .62), rgba(10, 9, 8, .78));
}
.bp-corps {
  position: relative; z-index: 1;
  width: min(760px, calc(100% - 48px));
  text-align: center; color: var(--blanc);
}
.bp-corps h2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; color: var(--blanc); }
.bp-legende { margin: 18px 0 0; color: rgba(255, 255, 255, .82); font-size: 15px; }

/* ---- l'index de défilement (pastilles de section) ------------------------
   Une colonne de repères sur le bord gauche, qui suit la lecture. Purement
   décoratif : `aria-hidden` côté JS, la navigation reste dans la barre. */
.index-scroll {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: none; gap: 14px; flex-direction: column;
}
.index-scroll button {
  width: 9px; height: 9px; padding: 0; border-radius: 999px;
  background: var(--dragee);
  transition: background var(--vif), transform var(--vif);
}
.index-scroll button.actif { background: var(--terracotta); transform: scale(1.5); }
@media (min-width: 1280px) { .index-scroll { display: flex; } }

/* ==========================================================================
   PEAU « NOCTURNE » — cave à manger, lumière basse
   Une peau sombre, typographique et anguleuse. Elle ne change pas seulement
   les couleurs : elle change la COMPOSITION (titres à gauche et numérotés,
   filets à la place des cartes, barre-rail à la place de l'îlot-pilule) et
   le MOUVEMENT (voile latéral, entrée par la marge). C'est ce qu'il faut
   pour qu'un site ne s'entende pas comme un cousin de flânerie.
   ========================================================================== */

/* ---- typographie --------------------------------------------------------- */
html[data-style="nocturne"] h1,
html[data-style="nocturne"] h2,
html[data-style="nocturne"] h3 { letter-spacing: -.012em; }
html[data-style="nocturne"] .nav-logo .mot,
html[data-style="nocturne"] .pied-marque .mot {
  text-transform: uppercase; letter-spacing: .34em;
  font-size: 15px; font-weight: 500;
}
/* la marque respire : la dernière lettre ne doit pas coller au bord à cause
   de sa propre chasse ajoutée à droite */
html[data-style="nocturne"] .nav-logo .mot { padding-right: .34em; }

/* ---- géométrie : le filet remplace la carte ------------------------------ */
html[data-style="nocturne"] .article,
html[data-style="nocturne"] .canal,
html[data-style="nocturne"] .info-ligne,
html[data-style="nocturne"] .contact-carte,
html[data-style="nocturne"] .categorie-pied {
  background: transparent;
  border: 1px solid var(--dragee);
  box-shadow: none;
}
html[data-style="nocturne"] .article:hover {
  border-color: var(--terracotta); transform: none;
}
html[data-style="nocturne"] .section { padding: 116px 0; }

/* ---- l'en-tête de section : à gauche, numéroté --------------------------
   Le compteur vit sur .section-tete et se lit dans l'œil-de-perdrix, qui est
   son enfant : au moment où le pseudo-élément est rendu, l'incrément du
   parent a déjà eu lieu. Aucune numérotation à tenir à la main dans la
   config, donc aucune à corriger quand une section bouge. */
html[data-style="nocturne"] body { counter-reset: chapitre; }
html[data-style="nocturne"] .section-tete {
  counter-increment: chapitre;
  text-align: left; max-width: none; margin: 0 0 58px;
}
html[data-style="nocturne"] .section-tete .intro {
  margin: 16px 0 0; max-width: 58ch; font-size: 15px;
}
html[data-style="nocturne"] .section-tete h2,
html[data-style="nocturne"] .titre-serif {
  font-size: clamp(30px, 4.2vw, 54px);
  color: var(--texte);
}
html[data-style="nocturne"] .sur-titre { justify-content: flex-start; gap: 16px; }
html[data-style="nocturne"] .sur-titre::before {
  content: counter(chapitre, decimal-leading-zero);
  width: auto; height: auto; background: none;
  font: 500 11px/1 var(--sans); letter-spacing: .16em;
  color: var(--oeil);
}
html[data-style="nocturne"] .sur-titre::after { width: 72px; }

/* ---- la barre-rail ------------------------------------------------------- */
html[data-nav="rail"] .nav {
  inset: 0 0 auto; max-width: none; margin: 0;
  padding: 20px clamp(20px, 4vw, 48px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: background var(--vif), border-color var(--vif), padding var(--vif);
}
html[data-nav="rail"] .nav.est-posee {
  background: var(--creme);
  border-bottom-color: var(--dragee);
  box-shadow: none;
  padding-top: 13px; padding-bottom: 13px;
}
html[data-nav="rail"] .nav-logo .mot { color: var(--texte); }
html[data-nav="rail"] .nav-liens { gap: 30px; }
html[data-nav="rail"] .nav-liens a {
  position: relative; padding: 6px 0; border-radius: 0;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte);
}
html[data-nav="rail"] .nav-liens a.actif,
html[data-nav="rail"] .nav-liens a[aria-current="page"] { background: none; color: var(--terracotta); }
/* le soulignement se trace au survol au lieu d'apparaître d'un bloc */
html[data-nav="rail"] .nav-liens a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--terracotta);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--vif);
}
html[data-nav="rail"] .nav-liens a:hover::after,
html[data-nav="rail"] .nav-liens a.actif::after { transform: scaleX(1); }
html[data-nav="rail"] .nav-liens a:hover { color: var(--terracotta); }
html[data-nav="rail"] .nav-note { color: var(--texte-doux); }
html[data-nav="rail"] .nav-action {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 20px;
  border: 1px solid var(--terracotta); color: var(--terracotta);
  font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--vif), color var(--vif);
}
html[data-nav="rail"] .nav-action:hover { background: var(--terracotta); color: var(--encre); }
html[data-nav="rail"] .nav-burger span,
html[data-nav="rail"] .nav-burger span::before,
html[data-nav="rail"] .nav-burger span::after { background: var(--texte); }
html[data-nav="rail"] .nav.est-ouverte .nav-burger span { background: transparent; }
html[data-nav="rail"] .nav-tiroir {
  inset: var(--h-nav, 64px) 0 auto;
  border-radius: 0; background: var(--creme);
  border-bottom: 1px solid var(--dragee);
  box-shadow: none; padding: 10px clamp(20px, 4vw, 48px) 24px;
}
html[data-nav="rail"] .nav-tiroir a {
  border-radius: 0; padding: 15px 0;
  border-bottom: 1px solid var(--dragee);
  font: 500 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
html[data-nav="rail"] .nav-tiroir a.actif,
html[data-nav="rail"] .nav-tiroir a:hover { background: none; color: var(--terracotta); }
html[data-nav="rail"] .tiroir-action a { color: var(--terracotta); }
/* L'action reste dans la barre à toutes les tailles, burger compris : mesurée
   à 320 px, elle laisse encore 21 px avant le burger, et c'est le bouton qui
   rapporte. Elle est reprise dans le tiroir pour qui l'ouvre. */

/* ---- le héros pleine page ------------------------------------------------
   Composition « plein » : la photo prend tout l'écran, le texte se pose en
   bas à gauche. Réservée au grand écran pour les ESPACEMENTS — l'attribut
   [data-compo] l'emporte sur les règles de classe du bloc mobile, et sans
   cette barrière il écraserait la compaction du héros sur téléphone. */
.heros[data-compo="plein"] {
  margin: 0; border-radius: 0;
  min-height: 100vh;
  min-height: 100svh;
  justify-content: flex-end;
}
.heros[data-compo="plein"] .heros-fond::after {
  /* deux voiles superposés : un dégradé vertical pour la barre et les
     chiffres, un dégradé latéral pour la colonne de texte. Sans le second,
     la lisibilité du titre dépend de ce qu'il y avait à gauche du cadre. */
  background:
    linear-gradient(100deg, rgba(6, 6, 6, .82) 0%, rgba(6, 6, 6, .46) 42%, rgba(6, 6, 6, .06) 74%),
    linear-gradient(180deg, rgba(6, 6, 6, .62) 0%, rgba(6, 6, 6, .18) 34%, rgba(6, 6, 6, .93) 100%);
}
.heros[data-compo="plein"] .heros-corps { text-align: left; max-width: none; }
.heros[data-compo="plein"] .heros-corps p { margin-left: 0; }
.heros[data-compo="plein"] .heros-actions { justify-content: flex-start; }
.heros[data-compo="plein"] .heros-kicker { justify-content: flex-start; }
@media (min-width: 721px) {
  .heros[data-compo="plein"] .heros-corps {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
    padding: 0 0 76px;
  }
  .heros[data-compo="plein"] h1 { font-size: clamp(52px, 8.2vw, 116px); max-width: 14ch; }
  .heros[data-compo="plein"] .heros-corps p { max-width: 46ch; font-size: 15.5px; }
  .heros[data-compo="plein"] .heros-chiffres {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
    grid-template-columns: repeat(3, auto);
    justify-content: start; gap: 64px;
    text-align: left; padding: 0 0 44px;
  }
  .heros[data-compo="plein"] .heros-chiffres .valeur { justify-content: flex-start; }
}
html[data-style="nocturne"] .heros-chiffres .valeur { color: var(--blanc); }
html[data-style="nocturne"] .heros-chiffres .valeur sup { color: rgba(255, 255, 255, .62); }

/* le filet + le mot au-dessus du grand titre */
html[data-style="nocturne"] .heros-kicker {
  display: inline-flex; align-items: center; gap: 16px;
  font: 500 11.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  /* blanc, pas laiton : posé sur une photographie, l'accent n'a aucun
     contraste garanti — l'étalonnage du cliché change à chaque client.
     Le filet, lui, reste laiton : c'est un décor, pas une information. */
  color: var(--blanc);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
  margin-bottom: 26px;
}
html[data-style="nocturne"] .heros-kicker::after { background: var(--terracotta); opacity: 1; }
html[data-style="nocturne"] .heros-kicker::after {
  content: ''; width: 58px; height: 1px; background: currentColor; opacity: .5;
}

/* ---- boutons : anguleux, remplis d'encre --------------------------------- */
html[data-style="nocturne"] .bouton .lib {
  border-radius: 0;
  font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 17px 30px;
}
html[data-style="nocturne"] .bouton:not(.bouton--verre) .lib {
  background: var(--terracotta); color: var(--sur-accent, var(--blanc));
}
html[data-style="nocturne"] .bouton:not(.bouton--verre):hover .lib {
  background: var(--blanc); color: var(--encre);
}
html[data-style="nocturne"] .bouton--verre .lib {
  background: transparent; border: 1px solid var(--blanc); color: var(--blanc);
}
html[data-style="nocturne"] .bouton--verre:hover .lib {
  background: var(--blanc); color: var(--encre);
}

/* ---- la bande de page : un filet, pas un bloc de couleur ----------------- */
html[data-style="nocturne"] .bande-heros {
  margin: 0; border-radius: 0;
  background: var(--creme);
  border-bottom: 1px solid var(--dragee);
  text-align: left;
  padding: 178px 0 64px;
}
html[data-style="nocturne"] .bande-heros > * {
  width: min(1180px, calc(100% - 48px)); margin-inline: auto;
}
html[data-style="nocturne"] .bande-heros h1 {
  font-size: clamp(42px, 7vw, 92px); color: var(--texte);
}
/* la bande de page n'est pas une section numérotée : son œil-de-perdrix
   retrouve un filet devant, sinon il affiche « 00 » — le compteur n'a jamais
   été incrémenté ici. Et il passe en display:flex : `margin-inline:auto` ne
   centre pas une boîte de niveau ligne, l'étiquette restait collée au bord. */
html[data-style="nocturne"] .bande-heros .sur-titre {
  display: flex; color: var(--oeil);
}
html[data-style="nocturne"] .bande-heros .sur-titre::before {
  content: ''; width: 34px; height: 1px; background: var(--dragee);
  font-size: 0;
}
html[data-style="nocturne"] .bande-heros .sur-titre::after { background: var(--dragee); }

/* ---- filtres, formulaires, pied ------------------------------------------ */
html[data-style="nocturne"] .filtres .pilule {
  border-radius: 0; border: 1px solid var(--dragee); background: transparent;
  font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
html[data-style="nocturne"] .filtres .pilule.actif {
  background: var(--terracotta); color: var(--encre); border-color: var(--terracotta);
}
html[data-style="nocturne"] .contact-carte input,
html[data-style="nocturne"] .contact-carte textarea,
html[data-style="nocturne"] .pied-news input {
  border-radius: 0; background: transparent;
  border: 1px solid var(--dragee); color: var(--texte);
}
html[data-style="nocturne"] .pied-news button { border-radius: 0; }
html[data-style="nocturne"] .pied { border-top: 1px solid var(--dragee); }
html[data-style="nocturne"] .pied-social a {
  border-radius: 0; border: 1px solid var(--dragee); background: transparent;
}
html[data-style="nocturne"] .pied-social a:hover {
  border-color: var(--terracotta); color: var(--terracotta);
}
html[data-style="nocturne"] .trouver { border-radius: 0; margin: 0; }
html[data-style="nocturne"] .defile { border-color: var(--dragee); }
html[data-style="nocturne"] .defile-mot { color: var(--texte); }
html[data-style="nocturne"] .defile-sep { color: var(--terracotta); }
html[data-style="nocturne"] .recit-vue,
html[data-style="nocturne"] .duo-cadre,
html[data-style="nocturne"] .ag-vignette { border-radius: 0; }
html[data-style="nocturne"] .eq-monogramme { border-radius: 0; }
html[data-style="nocturne"] .eq-portrait { border-radius: 0; }

/* ==========================================================================
   LES NOUVELLES SECTIONS SUR PETIT ÉCRAN
   Chaque grille de ce fichier a son point de bascule : une colonne « auto »
   de 108 px ou un `1fr` non borné se transforme en débordement horizontal
   dès que le contenu est plus large que la place. min-width: 0 partout où
   une grille contient du texte insécable.
   ========================================================================== */
@media (max-width: 1100px) {
  .recit-corps { gap: 40px; }
  .recit-texte { gap: 48px; }
}
@media (max-width: 900px) {
  /* l'image collante n'a plus de colonne où se coller : elle redevient une
     image normale, en tête du récit */
  .recit-corps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .recit-colle { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recit-vue img { aspect-ratio: 4 / 3; }
}
@media (max-width: 860px) {
  .cl-grille[data-colonnes="2"] { grid-template-columns: minmax(0, 1fr); }
  .cl-grille { gap: 44px; }
  .eq-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  /* la vignette et l'heure quittent la ligne d'agenda : à cette largeur elles
     compriment le titre jusqu'à la colonne d'une lettre */
  .ag-ligne { grid-template-columns: 62px minmax(0, 1fr); gap: 18px; }
  .ag-heure, .ag-vignette { display: none; }
  .ag-jour { font-size: 27px; }
}
@media (max-width: 720px) {
  .defile { padding: 14px 0; }
  .defile-sep { padding: 0 16px; }
  .somm-liste a, .somm-inerte { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 17px 2px; }
  .somm-note { display: none; }
  .somm-liste a:hover { padding-left: 8px; }
  .duo-corps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .duo-vue:nth-child(2) { margin-top: 0; }
  .recit-colle { grid-template-columns: minmax(0, 1fr); }
  .recit-chapitre h3 { font-size: 22px; }
  .citation .cit-texte { font-size: clamp(22px, 6.4vw, 30px); }
  .bande-photo { min-height: 54vh; min-height: 54svh; }
  .eq-liste { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .eq-monogramme, .eq-portrait { width: 72px; height: 72px; margin-bottom: 14px; }
  .cl-desc { font-size: 13px; }
  .index-scroll { display: none; }
}
@media (max-width: 480px) {
  .cl-tete { flex-wrap: wrap; }
  /* à cette largeur le point de conduite ne conduit plus rien : le prix
     passe sous le nom, et le pointillé disparaît plutôt que de laisser
     une ligne de points orpheline */
  .cl-conduite { display: none; }
  .cl-prix { width: 100%; margin-top: 2px; color: var(--terracotta); }
  .cl-marque { margin-left: 8px; }
}

/* la peau nocturne resserre son propre rythme : 116 px de section, c'est une
   respiration de grand écran */
@media (max-width: 900px) {
  html[data-style="nocturne"] .section { padding: 76px 0; }
  html[data-style="nocturne"] .section-tete { margin-bottom: 40px; }
  html[data-style="nocturne"] .bande-heros { padding: 128px 0 44px; }
}
@media (max-width: 720px) {
  html[data-style="nocturne"] .section { padding: 62px 0; }
  html[data-style="nocturne"] .nav-logo .mot { font-size: 13px; letter-spacing: .26em; }
  html[data-style="nocturne"] .bande-heros { padding: 112px 0 36px; }
  html[data-style="nocturne"] .bouton .lib { padding: 16px 22px; letter-spacing: .12em; }
  /* le héros plein garde toute la hauteur, mais son texte remonte du bas :
     collé à l'arête il passe sous la barre de gestes iOS */
  .heros[data-compo="plein"] { min-height: 92vh; min-height: 92svh; }
  .heros[data-compo="plein"] .heros-corps { padding: 104px 22px 30px; }
  .heros[data-compo="plein"] h1 { font-size: clamp(36px, 11vw, 58px); }
}

/* la pastille verte de la note de barre appartient à la peau claire : sur le
   rail sombre elle devient un point laiton, du même vocabulaire que le reste */
html[data-style="nocturne"] .nav-note {
  font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
html[data-style="nocturne"] .nav-note::before { background: var(--terracotta); }

/* ---- nocturne : les derniers blocs clairs passent au noir ---------------- */
/* Le pied de la peau maison est une carte caramel posée sur la crème. Ici la
   page EST sombre : le caramel se lit comme une tache lie-de-vin. Un filet
   suffit à marquer la fin. */
html[data-style="nocturne"] .pied {
  margin: 0; border-radius: 0;
  background: var(--sable);
  color: var(--texte);
  border-top: 1px solid var(--dragee);
  padding-top: 76px;
}
html[data-style="nocturne"] .pied-marque svg { color: var(--terracotta); }
html[data-style="nocturne"] .pied-marque .mot { color: var(--texte); margin-top: 0; }

/* le voile de « nous trouver » doit tenir sur une enseigne au néon : les
   photographies de nuit ont des zones saturées où un voile à 55 % ne fait
   plus rien */
html[data-style="nocturne"] .trouver-fond::after {
  background: linear-gradient(100deg, rgba(6, 6, 6, .94) 22%, rgba(6, 6, 6, .72) 100%);
}
html[data-style="nocturne"] .info-ligne {
  background: rgba(255, 255, 255, .04);
  border-color: var(--dragee);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-style="nocturne"] .info-ligne svg { color: var(--terracotta); }

/* dans une composition alignée à gauche, un bouton centré sous la section
   sort du rang */
html[data-style="nocturne"] .section-pied { justify-content: flex-start; }

/* la colonne collante ne doit jamais dépasser l'écran : au-delà elle cesse
   de coller et redevient une colonne ordinaire qui défile */
.recit-colle {
  max-height: calc(100vh - var(--h-nav, 68px) - 80px);
  max-height: calc(100svh - var(--h-nav, 68px) - 80px);
  grid-auto-rows: minmax(0, 1fr);
}
.recit-colle .recit-vue { min-height: 0; }
.recit-colle .recit-vue img { height: 100%; aspect-ratio: auto; }
@media (max-width: 900px) {
  /* rendue à l'horizontale, la contrainte de hauteur n'a plus de sens */
  .recit-colle { max-height: none; grid-auto-rows: auto; }
  .recit-colle .recit-vue img { height: auto; aspect-ratio: 4 / 3; }
}

/* ---- derniers ajustements de la peau nocturne ---------------------------- */
/* La barre-rail flotte sur la photographie du héros. Un voile propre à la
   barre, plutôt qu'un héros assombri : le cliché garde sa lumière, et la
   lisibilité des liens ne dépend plus de ce qu'il y a derrière eux. */
html[data-nav="rail"] .nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
  transition: opacity var(--vif);
}
html[data-nav="rail"] .nav.est-posee::before { opacity: 0; }

/* la marque du pied n'est pas celle de la barre : même dessin, autre échelle */
html[data-style="nocturne"] .pied-marque .mot {
  font-size: 22px; letter-spacing: .3em;
}
/* les derniers rayons codés en dur de la peau claire */
html[data-style="nocturne"] .info-ligne,
html[data-style="nocturne"] .avis-carte,
html[data-style="nocturne"] .faq-item,
html[data-style="nocturne"] .service,
html[data-style="nocturne"] .horaires-photo,
html[data-style="nocturne"] .fidelite-visuel,
html[data-style="nocturne"] .galerie-mur .bloc,
html[data-style="nocturne"] .eventail .photo,
html[data-style="nocturne"] .article .visuel,
html[data-style="nocturne"] .toast { border-radius: 0; }

/* Les blocs encore blancs de la peau claire. Repérés en énumérant, page par
   page, tout élément dont le fond calculé est clair alors que la page est
   sombre — plus fiable que l'œil, qui en laisse toujours passer un. */
html[data-style="nocturne"] .faq-item,
html[data-style="nocturne"] .service,
html[data-style="nocturne"] .avis-carte,
html[data-style="nocturne"] .horaires-liste {
  background: transparent;
  border: 1px solid var(--dragee);
  box-shadow: none;
}
html[data-style="nocturne"] .faq-item summary::after,
html[data-style="nocturne"] .avis-note .etoile { color: var(--terracotta); }
html[data-style="nocturne"] .service-prix { color: var(--terracotta); }
/* la ligne du jour : un liseré laiton plutôt qu'un pavé blanc */
html[data-style="nocturne"] .ligne-horaire.est-aujourdhui {
  background: rgba(200, 155, 60, .1);
  box-shadow: inset 2px 0 0 var(--terracotta);
  color: var(--texte);
}

/* Sur téléphone, deux boutons côte à côte coupent « Réserver une table » en
   deux lignes et les deux boutons n'ont plus la même hauteur. Empilés, ils
   tiennent chacun sur une ligne et offrent une cible pleine largeur. */
@media (max-width: 480px) {
  html[data-style="nocturne"] .heros-actions {
    flex-direction: column; align-items: stretch; width: 100%;
  }
  html[data-style="nocturne"] .heros-actions .bouton,
  html[data-style="nocturne"] .heros-actions .bouton .lib { width: 100%; }
}

/* Derniers arrondis codés en dur de la peau claire : la pilule du canal de
   contact et sa pastille. `--r-carte: 0` ne les atteint pas — ils valent
   999px en dur. */
html[data-style="nocturne"] .canal { border-radius: 0; }
html[data-style="nocturne"] .canal .pastille { border-radius: 0; }
html[data-style="nocturne"] .canal:hover {
  border-color: var(--terracotta); box-shadow: none; transform: none;
}
/* le bloc horaires est centré dans la peau maison ; ici tout est aligné à
   gauche, un tableau centré sous un titre à gauche flotte */
html[data-style="nocturne"] .horaires { max-width: 620px; margin-inline: 0; }
html[data-style="nocturne"] .horaires-liste { padding: 4px 22px 22px; }
html[data-style="nocturne"] .ligne-horaire { border-color: var(--dragee); }

/* La bande photo doit tenir dans une page de nuit. Un cliché de plein jour
   (une vigne au matin) y perce comme une fenêtre ouverte : on l'assombrit
   nettement plus, et on lui retire de la couleur — la photographie devient
   une texture, ce qu'elle est ici. */
html[data-style="nocturne"] .bp-fond img { filter: saturate(.42) contrast(1.14) brightness(.62); }
html[data-style="nocturne"] .bp-fond::after {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(10, 9, 8, .45), rgba(10, 9, 8, .88)),
    linear-gradient(180deg, rgba(10, 9, 8, .72), rgba(10, 9, 8, .86));
}
/* la FAQ suit l'alignement général de la peau */
html[data-style="nocturne"] .faq { max-width: 760px; margin-inline: 0; }

/* ==========================================================================
   SÉLECTEUR DE PALETTE
   Le client essaie les thèmes sur son propre site. Neutre de peau : chaque
   peau ne fait qu'en ajuster la forme, plus bas.
   ========================================================================== */
.pal { position: relative; }
.pal-bouton {
  display: inline-flex; align-items: center; gap: 9px;
  /* 44 px : la cible tactile minimale, comme les autres commandes */
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--ligne); border-radius: 999px;
  font-size: 12.5px; color: var(--texte-doux);
  transition: border-color var(--vif), color var(--vif);
}
.pal-bouton:hover { border-color: var(--terracotta); color: var(--terracotta); }
/* le jeton montre les trois couleurs qui font l'identité : le fond, l'accent
   posé dessus, et le texte. Un simple carré d'accent ne dirait rien du
   contraste, qui est justement ce qu'on choisit. */
.pal-jeton {
  width: 20px; height: 20px; flex: none;
  border-radius: 999px;
  /* un anneau de la couleur du texte, un champ de la couleur du fond, un
     point d'accent au centre. À 20 px, trois bandes en diagonale devenaient
     une tache : la cible concentrique reste lisible. */
  border: 1px solid var(--j-texte, #222);
  background: radial-gradient(circle at 50% 50%,
    var(--j-accent, #999) 0 40%, var(--j-fond, #fff) 40% 100%);
}
.pal-liste {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  list-style: none; margin: 0; padding: 7px;
  min-width: 188px;
  background: var(--creme);
  border: 1px solid var(--ligne); border-radius: var(--r-champ);
  box-shadow: var(--ombre-carte);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--vif), transform var(--vif);
}
.pal.est-ouvert .pal-liste { opacity: 1; transform: none; pointer-events: auto; }
.pal-choix {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 44px; padding: 0 11px;
  border-radius: calc(var(--r-champ) - 3px);
  font-size: 13.5px; color: var(--texte); text-align: left;
  transition: background var(--vif);
}
.pal-choix:hover { background: var(--sable); }
.pal-choix[aria-pressed="true"] { color: var(--terracotta); }
.pal-choix[aria-pressed="true"] .pal-nom { font-weight: 500; }
.pal-nom { min-width: 0; }
/* sous 1024 px la barre passe au burger : le sélecteur garde sa place, mais
   perd son libellé — le jeton se suffit */
/* Sur téléphone la barre passe au burger et le sélecteur se retrouve au
   milieu : un tiroir ancré à `right: 0` du bouton sortait de l'écran par la
   gauche (mesuré à -28 px sur un iPhone 14). On l'ancre alors au bord de la
   FENÊTRE, pas au bouton. */
@media (max-width: 1023px) {
  .pal-lib { display: none; }
  .pal-bouton { padding: 0 10px; }
  .pal-liste {
    position: fixed;
    top: calc(var(--h-nav, 64px) + 8px);
    right: 12px; left: auto;
    min-width: min(220px, calc(100vw - 24px));
  }
}

/* ---- la barre-rail par-dessus la photographie ----------------------------
   Tant qu'elle flotte sur le héros, la barre écrit en BLANC, quelle que soit
   la palette : sous elle il y a une photo, pas le fond du site. Dès qu'elle
   se pose, elle reprend les couleurs du thème. Sans cette bascule, une
   palette claire donne du texte foncé sur une photo sombre. */
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-logo .mot,
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a,
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-note,
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .pal-bouton { color: #FFFFFF; }
/* Sur la photographie, l'accent n'est PAS une option : sa clarté dépend de
   la palette, celle du cliché de personne. Le blanc et le trait sont les
   seules marques qui tiennent sur les quatre thèmes. */
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a.actif,
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a[aria-current="page"],
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action { color: #FFFFFF; }
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action { border-color: rgba(255, 255, 255, .6); }
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action:hover {
  background: #FFFFFF; color: var(--encre); border-color: #FFFFFF;
}
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a::after { background: #FFFFFF; }
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-note::before { background: #FFFFFF; }
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .pal-bouton { border-color: rgba(255, 255, 255, .45); }
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-burger span,
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-burger span::before,
html[data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-burger span::after { background: #FFFFFF; }
html[data-nav="rail"] body.a-heros .nav:not(.est-posee).est-ouverte .nav-burger span { background: transparent; }
/* une page intérieure n'a pas de photo derrière la barre : elle est « posée »
   dès le premier pixel (classe ajoutée au chargement par le JS de défilement,
   mais le repli statique évite l'éclair blanc avant que le script tourne) */
html[data-nav="rail"] body:not(.a-heros) .nav { background: var(--creme); border-bottom-color: var(--dragee); }
html[data-nav="rail"] body:not(.a-heros) .nav::before { opacity: 0; }

/* ---- nocturne : le survol s'inverse au lieu de blanchir -------------------
   `background: var(--blanc)` au survol disparaissait sur une palette claire.
   L'inversion texte/fond fonctionne dans les deux sens. */
html[data-style="nocturne"] .bouton:not(.bouton--verre):hover .lib {
  background: var(--texte); color: var(--creme);
}
html[data-style="nocturne"] .ligne-horaire.est-aujourdhui {
  background: rgba(var(--accent-rgb), .1);
}
/* le sélecteur au vocabulaire de la peau : anguleux, en capitales espacées */
html[data-style="nocturne"] .pal-bouton {
  border-radius: 0; border-color: var(--dragee);
  font: 500 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
html[data-style="nocturne"] .pal-jeton { border-radius: 0; }
html[data-style="nocturne"] .pal-liste { border-radius: 0; border-color: var(--dragee); }
html[data-style="nocturne"] .pal-choix { border-radius: 0; }

/* ==========================================================================
   PETITS LIBELLÉS À L'ACCENT : --oeil, jamais --terracotta
   Mesuré sur la page rendue, quatre palettes × six pages : ces étiquettes
   font 10 à 13 px et tombaient entre 3,78 et 4,19 sur les palettes claires.
   `--oeil` est l'accent déjà poussé jusqu'à 4.5:1 par le moteur ; sur les
   palettes assez contrastées il vaut exactement `--terracotta`, donc rien
   ne bouge là où rien n'allait mal.
   ========================================================================== */
.somm-num,
.recit-num,
.cl-rubrique-nom,
.cl-marque,
.eq-role,
.service-prix,
.ligne-horaire .heures,
.avis-note .etoile,
.nav-action,
.pal-choix[aria-pressed="true"] { color: var(--oeil); }
.cl-marque { border-color: var(--oeil); }
html[data-nav="rail"] .nav-action { border-color: var(--oeil); }
html[data-nav="rail"] .nav-action:hover { background: var(--oeil); color: var(--sur-accent, var(--blanc)); }
html[data-style="nocturne"] .service-prix,
html[data-style="nocturne"] .avis-note .etoile,
html[data-style="nocturne"] .faq-item summary::after { color: var(--oeil); }

/* ---- le pied : il n'est plus forcément sombre ---------------------------
   `.pied` de la peau maison est une carte caramel, d'où le texte en blanc
   codé en dur. La peau nocturne le pose sur `--sable`, qui suit la palette :
   sur les thèmes clairs, ces blancs devenaient invisibles (mesuré à 1,14). */
html[data-style="nocturne"] .pied ul a,
html[data-style="nocturne"] .pied-baseline,
html[data-style="nocturne"] .pied-news p,
html[data-style="nocturne"] .pied-bas,
html[data-style="nocturne"] .pied-mentions { color: var(--texte-doux); }
html[data-style="nocturne"] .pied h4,
html[data-style="nocturne"] .pied-news h4 { color: var(--texte); }
html[data-style="nocturne"] .pied ul a:hover { color: var(--oeil); }
html[data-style="nocturne"] .pied-social a { color: var(--texte-doux); }
html[data-style="nocturne"] .pied-bas,
html[data-style="nocturne"] .pied-filet { border-color: var(--dragee); }

/* la bande de page hérite du blanc de la peau maison : sur un fond crème,
   tout enfant sans couleur propre y disparaît */
html[data-style="nocturne"] .bande-heros { color: var(--texte); }
html[data-style="nocturne"] .bande-heros .fil { color: var(--texte-doux); }
html[data-style="nocturne"] .bande-heros .fil-sep { background: var(--dragee); }
/* le reste des blancs codés en dur du pied maison */
html[data-style="nocturne"] .pied-social a { border-color: var(--dragee); }
html[data-style="nocturne"] .pied-social a:hover {
  background: transparent; border-color: var(--oeil); color: var(--oeil);
}
html[data-style="nocturne"] .pied-bas { border-top-color: var(--dragee); color: var(--texte-doux); }
html[data-style="nocturne"] .pied-news button {
  background: var(--terracotta); color: var(--sur-accent, var(--blanc));
}
html[data-style="nocturne"] .pied-news button:hover { background: var(--texte); color: var(--creme); }
html[data-style="nocturne"] .pied-news input { color: var(--texte); }
html[data-style="nocturne"] .pied-news input::placeholder { color: var(--texte-doux); }
html[data-style="nocturne"] .pied-marque p { color: var(--texte-doux); }
/* Les trois derniers accents de la barre-rail. Leurs règles portent le
   préfixe html[data-nav="rail"] et l'emportaient donc sur la correction
   générique plus haut : il faut les reprendre à la même spécificité. */
html[data-nav="rail"] .nav-liens a.actif,
html[data-nav="rail"] .nav-liens a[aria-current="page"],
html[data-nav="rail"] .nav-liens a:hover,
html[data-nav="rail"] .nav-action,
html[data-nav="rail"] .nav-tiroir a.actif,
html[data-nav="rail"] .nav-tiroir a:hover,
html[data-nav="rail"] .tiroir-action a { color: var(--oeil); }
html[data-nav="rail"] .nav-liens a::after { background: var(--oeil); }

/* ==========================================================================
   LE VOCABULAIRE DE LA RIVIERA — ajouté au socle avec la peau du même nom
   Le mot appuyé, le héros en deux moitiés, la pastille, l'histoire et le
   bandeau d'appel. Neutres de peau : la peau « riviera » plus bas ne fait
   que les habiller.
   ========================================================================== */

/* le mot appuyé (`*mot*` dans la config) : l'italique suffit au socle, la
   couleur appartient à chaque peau */
.titre-mots em { font-style: italic; }

/* ---- héros « moitie » : un aplat d'encre à gauche, la photo à droite ------ */
.heros[data-compo="moitie"] {
  margin: 0; border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--encre);
  min-height: 100vh;
  min-height: 100svh;
}
.heros[data-compo="moitie"] .heros-fond { position: relative; grid-column: 2; grid-row: 1 / span 2; overflow: hidden; }
/* l'image ne dicte pas la hauteur de la rangée : une photo en portrait
   étirait le héros à 1 110 px sur un écran de 900 */
.heros[data-compo="moitie"] .heros-fond img { position: absolute; inset: 0; }
/* le voile ne sert plus la lisibilité (le texte est sur l'aplat) : il fond
   seulement la photo dans l'encre du côté où elle la touche */
.heros[data-compo="moitie"] .heros-fond::after {
  background: linear-gradient(120deg, rgba(var(--encre-rgb), .62) 0%, rgba(var(--encre-rgb), 0) 55%);
}
.heros[data-compo="moitie"] .heros-corps {
  grid-column: 1; grid-row: 1; align-self: center;
  text-align: left; margin: 0; max-width: none;
  padding: 150px clamp(28px, 5vw, 72px) 34px clamp(28px, 8vw, 120px);
}
.heros[data-compo="moitie"] h1,
.heros[data-compo="moitie"] .heros-corps p { text-shadow: none; }
.heros[data-compo="moitie"] .heros-corps p { margin-left: 0; max-width: 44ch; }
.heros[data-compo="moitie"] .heros-actions { justify-content: flex-start; }
.heros[data-compo="moitie"] .heros-kicker { justify-content: flex-start; }
/* trois colonnes égales plutôt qu'un flex : les légendes en capitales
   espacées sont longues, et le troisième chiffre tombait seul à la ligne */
.heros[data-compo="moitie"] .heros-chiffres {
  grid-column: 1; grid-row: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(18px, 3vw, 40px);
  text-align: left;
  margin: 0 clamp(28px, 5vw, 72px) 0 clamp(28px, 8vw, 120px);
  padding: 28px 0 52px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.heros[data-compo="moitie"] .heros-chiffres .valeur { justify-content: flex-start; }
.heros[data-compo="moitie"] .heros-pastille {
  position: relative; right: auto; bottom: auto;
  grid-column: 2; grid-row: 1 / span 2;
  align-self: end; justify-self: end;
  margin: 0 6% 44px 0;
}
/* Sur téléphone, deux moitiés empilées dépassaient l'écran (818 px pour
   568 sur un iPhone SE) : le héros doit y tenir entier. La photo passe en
   fond plein et l'encre monte du bas en dégradé — l'aplat devient un voile,
   le texte s'y pose, et la pastille rejoint le coin haut. */
@media (max-width: 860px) {
  .heros[data-compo="moitie"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 86vh; min-height: 86svh;
  }
  /* la colonne 2 du grand écran n'existe plus : sans ce placement, la photo
     partait dans une colonne implicite, hors du cadre */
  .heros[data-compo="moitie"] .heros-fond { position: absolute; inset: 0; grid-column: 1 / -1; grid-row: 1 / -1; }
  .heros[data-compo="moitie"] .heros-fond::after {
    background: linear-gradient(180deg,
      rgba(var(--encre-rgb), .5) 0%, rgba(var(--encre-rgb), .2) 22%,
      rgba(var(--encre-rgb), .86) 50%, rgba(var(--encre-rgb), .97) 100%);
  }
  .heros[data-compo="moitie"] .heros-corps { grid-column: 1; grid-row: 1; align-self: end; padding: 96px 22px 6px; position: relative; }
  .heros[data-compo="moitie"] .heros-chiffres { grid-column: 1; grid-row: 2; margin: 0 22px; padding: 16px 0 24px; position: relative; }
  .heros[data-compo="moitie"] .heros-pastille {
    position: absolute; top: calc(var(--h-nav, 64px) + 14px); right: 16px;
    grid-column: 1; grid-row: 1;
    width: 84px; height: 84px; margin: 0;
  }
  .heros[data-compo="moitie"] .heros-pastille .pastille-valeur { font-size: 20px; margin: 3px 0 2px; }
  .heros[data-compo="moitie"] .heros-pastille .pastille-haut,
  .heros[data-compo="moitie"] .heros-pastille .pastille-bas { font-size: 8.5px; }
}
/* sur un écran court, le texte remonte jusqu'au coin de la pastille : un
   tampon qui recouvre le nom de la maison fait plus de tort que son absence */
@media (max-width: 860px) and (max-height: 700px) {
  .heros[data-compo="moitie"] .heros-pastille { display: none; }
}

/* ---- la pastille : un tampon rond posé sur la photo ------------------------ */
.heros-pastille {
  position: absolute; right: 6%; bottom: 40px; z-index: 2;
  width: 132px; height: 132px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--dragee); color: var(--encre);
  font-family: var(--serif); text-align: center; line-height: 1;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .55);
}
/* seul l'anneau tourne : un texte qui tourne ne se lit plus */
.heros-pastille::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  border: 1px dashed currentColor; opacity: .5;
  animation: pastille-tour 26s linear infinite;
}
@keyframes pastille-tour { to { transform: rotate(360deg); } }
.pastille-haut, .pastille-bas {
  font: 600 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.pastille-valeur { font-size: 30px; font-weight: 600; margin: 5px 0 4px; }

/* ---- histoire : deux photos qui se chevauchent, le récit à côté ---------- */
.hist-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px); align-items: center;
}
.hist-vues { position: relative; min-height: 520px; }
.hist-vue {
  position: absolute; overflow: hidden;
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
}
.hist-vue img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filtre); }
.hist-vue--1 { top: 0; left: 0; width: 70%; height: 78%; }
.hist-vue--2 { right: 0; bottom: 0; width: 52%; height: 56%; border: 6px solid var(--creme); }
.section--sable .hist-vue--2 { border-color: var(--sable); }
.hist-texte .sur-titre { justify-content: flex-start; }
.hist-texte h2 {
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1;
  color: var(--terracotta); margin-bottom: 22px;
}
.hist-texte p { color: var(--texte-doux); max-width: 52ch; }
.hist-texte .bouton { margin-top: 14px; }
.histoire--sombre { background: var(--encre); color: rgba(255, 255, 255, .8); }
.histoire--sombre .hist-vue--2 { border-color: var(--encre); }
.histoire--sombre .hist-texte h2 { color: var(--blanc); }
.histoire--sombre .hist-texte p { color: rgba(255, 255, 255, .78); }
/* l'œil dérivé est calculé pour un fond clair : sur l'encre, du blanc */
.histoire--sombre .sur-titre { color: rgba(255, 255, 255, .88); }
.histoire--sombre .sur-titre::before,
.histoire--sombre .sur-titre::after { background: rgba(255, 255, 255, .45); }
@media (max-width: 860px) {
  .hist-corps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hist-vues { min-height: 360px; }
}

/* ---- bandeau d'appel ------------------------------------------------------- */
.bandeau { background: var(--caramel); color: var(--blanc); padding: 76px 0; }
.bandeau-corps {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px 40px; flex-wrap: wrap;
}
.bandeau-corps > div:first-child { min-width: 0; flex: 1 1 420px; }
.bandeau h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; }
.bandeau-texte { margin: 10px 0 0; opacity: .82; max-width: 52ch; }
@media (max-width: 720px) { .bandeau { padding: 56px 0; } }

/* ==========================================================================
   PEAU « RIVIERA » — bistrot méditerranéen, plein midi
   Portée à la main depuis « Little Lemon » (Willie Conway, licence MIT —
   voir SOURCES.md). Aplat de sauge, citron en accent, serif légère aux mots
   appuyés en italique, angles presque droits, têtes de section à gauche
   avec leur bouton en regard. Claire et solaire : l'inverse de la nocturne.
   ========================================================================== */

html[data-style="riviera"] h1,
html[data-style="riviera"] h2,
html[data-style="riviera"] h3 { font-weight: 300; letter-spacing: -.012em; }
html[data-style="riviera"] .section { padding: 104px 0; }

/* ---- têtes de section : à gauche, le bouton de la section en regard ------ */
html[data-style="riviera"] .section-tete { text-align: left; max-width: 640px; margin: 0 0 48px; }
html[data-style="riviera"] .section-tete .intro { margin: 16px 0 0; max-width: 56ch; font-size: 15px; }
html[data-style="riviera"] .section-tete h2,
html[data-style="riviera"] .titre-serif { font-size: clamp(36px, 4vw, 56px); line-height: 1.06; color: var(--texte); }
html[data-style="riviera"] .titre-mots em { color: var(--encre); }
html[data-style="riviera"] .sur-titre { justify-content: flex-start; gap: 12px; letter-spacing: .24em; font-weight: 600; }
html[data-style="riviera"] .sur-titre::before { width: 26px; height: 1.5px; background: var(--terracotta); }
html[data-style="riviera"] .sur-titre::after { display: none; }
@media (min-width: 861px) {
  html[data-style="riviera"] .section > .contenant {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px;
  }
  html[data-style="riviera"] .section > .contenant > * { grid-column: 1 / -1; min-width: 0; }
  html[data-style="riviera"] .section > .contenant > .section-tete { grid-column: 1; grid-row: 1; }
  html[data-style="riviera"] .section > .contenant > .section-pied {
    grid-column: 2; grid-row: 1; align-self: end;
    margin: 0 0 48px;
  }
}
@media (max-width: 860px) {
  html[data-style="riviera"] .section { padding: 72px 0; }
  html[data-style="riviera"] .section-pied { justify-content: flex-start; }
}

/* ---- boutons : presque droits, en capitales ------------------------------- */
html[data-style="riviera"] .bouton .lib {
  border-radius: 2px;
  font: 600 12.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 32px;
  background: var(--dragee); color: var(--encre);
  box-shadow: none;
}
html[data-style="riviera"] .bouton:hover .lib {
  background: var(--encre); color: var(--creme);
  box-shadow: 0 10px 26px -12px rgba(var(--encre-rgb), .55);
}
html[data-style="riviera"] .bouton--verre .lib {
  background: transparent; color: var(--blanc);
  border: 1.5px solid rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-style="riviera"] .bouton--verre:hover .lib {
  background: rgba(255, 255, 255, .1); border-color: var(--blanc); color: var(--blanc); box-shadow: none;
}
/* « blanc » devient le bouton au trait : sur la crème, un bouton blanc ne se
   verrait pas */
html[data-style="riviera"] .bouton--blanc .lib {
  background: transparent; color: var(--encre); border: 1.5px solid var(--encre);
  padding: 13px 26px;
}
html[data-style="riviera"] .bouton--blanc:hover .lib { background: var(--encre); color: var(--creme); }

/* ---- la barre : un rail, crème une fois posée ----------------------------- */
html[data-style="riviera"] .nav-logo .mot { font: 600 27px/1 var(--serif); letter-spacing: -.01em; color: var(--encre); }
html[data-style="riviera"][data-nav="rail"] .nav.est-posee,
html[data-style="riviera"][data-nav="rail"] body:not(.a-heros) .nav {
  background: rgba(251, 248, 238, .97);
  background: color-mix(in srgb, var(--creme) 96%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--ligne);
}
html[data-style="riviera"][data-nav="rail"] .nav-liens { gap: 34px; }
html[data-style="riviera"][data-nav="rail"] .nav-liens a { font: 500 12px/1 var(--sans); letter-spacing: .1em; }
html[data-style="riviera"][data-nav="rail"] .nav-liens a::after { height: 1.5px; background: var(--dragee); }
html[data-style="riviera"][data-nav="rail"] .nav-liens a.actif,
html[data-style="riviera"][data-nav="rail"] .nav-liens a[aria-current="page"],
html[data-style="riviera"][data-nav="rail"] .nav-liens a:hover { color: var(--encre); }
html[data-style="riviera"][data-nav="rail"] .nav-action {
  border: 0; border-radius: 2px;
  background: var(--encre); color: var(--creme);
  font: 600 11.5px/1 var(--sans); letter-spacing: .1em;
}
html[data-style="riviera"][data-nav="rail"] .nav-action:hover { background: var(--terracotta); color: var(--blanc); }
/* sur le héros, l'action prend le citron : l'encre s'y confondrait avec l'aplat */
html[data-style="riviera"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action {
  background: var(--dragee); color: var(--encre); border: 0;
}
html[data-style="riviera"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action:hover {
  background: var(--blanc); color: var(--encre);
}
html[data-style="riviera"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a::after { background: var(--dragee); }
html[data-style="riviera"] .nav-note { font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
html[data-style="riviera"] .nav-note::before { background: var(--dragee); }
html[data-style="riviera"][data-nav="rail"] .nav-tiroir { background: var(--creme); border-bottom-color: var(--ligne); }
html[data-style="riviera"][data-nav="rail"] .nav-tiroir a { border-bottom-color: var(--ligne); font: 400 26px/1.1 var(--serif); letter-spacing: 0; text-transform: none; }
html[data-style="riviera"][data-nav="rail"] .nav-tiroir a.actif,
html[data-style="riviera"][data-nav="rail"] .nav-tiroir a:hover { color: var(--encre); font-style: italic; }
html[data-style="riviera"][data-nav="rail"] .tiroir-action a { color: var(--oeil); }

/* ---- le héros ----------------------------------------------------------------- */
html[data-style="riviera"] .heros-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase;
  color: var(--dragee); margin-bottom: 26px;
}
html[data-style="riviera"] .heros-kicker::before { content: ''; width: 32px; height: 1px; background: currentColor; }
html[data-style="riviera"] .heros h1 { font-size: clamp(60px, 7.6vw, 116px); line-height: .96; letter-spacing: -.025em; margin-bottom: 14px; }
html[data-style="riviera"] .heros h1 em { color: var(--dragee); }
html[data-style="riviera"] .heros-corps .heros-lieu {
  font: 500 clamp(13px, 1.3vw, 16px)/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); margin: 0 0 32px;
}
html[data-style="riviera"] .heros-corps p { font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .78); margin-bottom: 38px; }
html[data-style="riviera"] .heros-chiffres .valeur { font-size: clamp(30px, 2.8vw, 40px); font-weight: 600; color: var(--dragee); }
html[data-style="riviera"] .heros-chiffres .legende {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
@media (max-width: 860px) {
  html[data-style="riviera"] .heros-kicker { margin-bottom: 14px; font-size: 11px; }
  html[data-style="riviera"] .heros h1 { font-size: clamp(44px, 12.5vw, 72px); margin-bottom: 10px; }
  html[data-style="riviera"] .heros-corps .heros-lieu { margin-bottom: 14px; font-size: 12px; }
  html[data-style="riviera"] .heros-corps p { font-size: 14px; line-height: 1.55; margin-bottom: 20px; }
  html[data-style="riviera"] .heros-chiffres .valeur { font-size: 26px; }
  html[data-style="riviera"] .heros-chiffres .legende { font-size: 10px; }
}
/* deux boutons côte à côte passaient chacun sur deux lignes : empilés, ils
   tiennent sur une ligne et donnent une cible pleine largeur */
@media (max-width: 480px) {
  html[data-style="riviera"] .heros-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  html[data-style="riviera"] .heros-actions .bouton,
  html[data-style="riviera"] .heros-actions .bouton .lib { width: 100%; }
  html[data-style="riviera"] .heros-actions .bouton .lib { padding: 14px 20px; }
}

/* ---- la bande des pages intérieures : l'aplat de sauge, texte à gauche --- */
html[data-style="riviera"] .bande-heros {
  margin: 0; border-radius: 0;
  background: var(--encre);
  text-align: left;
  padding: 176px 0 84px;
}
html[data-style="riviera"] .bande-heros > * { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
html[data-style="riviera"] .bande-heros h1 { font-size: clamp(50px, 6.4vw, 92px); line-height: 1; }
html[data-style="riviera"] .bande-heros h1 em { color: var(--dragee); }
html[data-style="riviera"] .bande-heros .sur-titre { display: flex; color: var(--dragee); }
html[data-style="riviera"] .bande-heros .sur-titre::before { background: var(--dragee); }
html[data-style="riviera"] .bande-heros .fil { justify-content: flex-start; }
@media (max-width: 720px) { html[data-style="riviera"] .bande-heros { padding: 124px 0 52px; } }

/* ---- la carte : cartes blanches, nom et prix sur la même ligne ----------- */
html[data-style="riviera"] .article { box-shadow: none; }
html[data-style="riviera"] .article:hover { transform: translateY(-6px); box-shadow: 0 20px 44px -18px rgba(var(--encre-rgb), .28); }
html[data-style="riviera"] .article .visuel { aspect-ratio: 4 / 3; }
html[data-style="riviera"] .article .corps {
  text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px; align-content: start;
  padding: 20px 22px 24px;
}
html[data-style="riviera"] .article .nom { grid-column: 1; grid-row: 1; font: 600 21px/1.2 var(--serif); }
html[data-style="riviera"] .article .prix {
  grid-column: 2; grid-row: 1; margin: 0;
  font: 600 20px/1.2 var(--serif); color: var(--terracotta); white-space: nowrap;
}
html[data-style="riviera"] .article .desc { grid-column: 1 / -1; margin: 8px 0 0; max-width: none; font-size: 13.5px; line-height: 1.6; }
html[data-style="riviera"] .article .servi { grid-column: 1 / -1; margin: 16px 0 0; }
html[data-style="riviera"] .article .servi .lib { border-radius: 2px; background: var(--encre); }
html[data-style="riviera"] .article .badge {
  background: var(--dragee); color: var(--encre);
  border-radius: 1px; padding: 5px 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
html[data-style="riviera"] .filtres .pilule {
  border-radius: 2px; border: 1.5px solid var(--ligne);
  font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 18px;
}
html[data-style="riviera"] .filtres .pilule:hover { border-color: var(--encre); color: var(--encre); }
html[data-style="riviera"] .filtres .pilule.actif { background: var(--encre); border-color: var(--encre); color: var(--blanc); }

/* ---- l'histoire : sur l'aplat, le mot appuyé au citron -------------------- */
html[data-style="riviera"] .histoire--sombre .titre-mots em,
html[data-style="riviera"] .histoire--sombre .sur-titre { color: var(--dragee); }
html[data-style="riviera"] .histoire--sombre .sur-titre::before { background: var(--dragee); }
html[data-style="riviera"] .hist-texte h2 { font-size: clamp(34px, 3.8vw, 52px); }
html[data-style="riviera"] .hist-vue { box-shadow: none; }

/* ---- les avis : filet citron à gauche, la citation en italique ----------- */
html[data-style="riviera"] .avis-carte {
  border: 0; border-left: 4px solid var(--dragee);
  box-shadow: none; padding: 32px 30px 28px;
}
html[data-style="riviera"] .avis-carte:hover { box-shadow: 0 16px 36px -20px rgba(var(--encre-rgb), .3); }
html[data-style="riviera"] .avis-carte blockquote { font: italic 400 19px/1.6 var(--serif); color: var(--texte); }
html[data-style="riviera"] .avis-carte blockquote::before,
html[data-style="riviera"] .avis-carte blockquote::after { color: var(--terracotta); }
html[data-style="riviera"] .avis-carte figcaption {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--encre);
}
html[data-style="riviera"] .avis-source { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* ---- horaires, trouver, FAQ : les angles suivent -------------------------- */
html[data-style="riviera"] .ligne-horaire.est-aujourdhui { border-radius: 2px; box-shadow: inset 3px 0 0 var(--dragee); }
html[data-style="riviera"] .horaires-photo { box-shadow: none; }
html[data-style="riviera"] .trouver { margin: 0; border-radius: 0; }
html[data-style="riviera"] .trouver-fond::after {
  background: linear-gradient(100deg, rgba(var(--encre-rgb), .95) 25%, rgba(var(--encre-rgb), .62) 100%);
}
html[data-style="riviera"] .info-ligne { border-radius: 2px; }
html[data-style="riviera"] .info-ligne svg { color: var(--dragee); }
html[data-style="riviera"] .faq-item { border-radius: 2px; }
html[data-style="riviera"] .faq-item[open] { border-color: var(--encre); }

/* ---- le bandeau : plein citron, bouton d'encre ------------------------------ */
html[data-style="riviera"] .bandeau { background: var(--dragee); color: var(--encre); padding: 84px 0; }
html[data-style="riviera"] .bandeau h2 { font-weight: 400; }
html[data-style="riviera"] .bandeau .titre-mots em { color: var(--encre); }
html[data-style="riviera"] .bandeau-texte { color: var(--encre); opacity: .8; }
html[data-style="riviera"] .bandeau .bouton .lib { background: var(--encre); color: var(--creme); padding: 18px 40px; }
html[data-style="riviera"] .bandeau .bouton:hover .lib { background: var(--texte); color: var(--blanc); }

/* ---- le pied : charbon, pleine largeur -------------------------------------- */
html[data-style="riviera"] .pied {
  margin: 0; border-radius: 0;
  background: var(--caramel);
  padding: 80px max(6%, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(6%, env(safe-area-inset-left));
}
html[data-style="riviera"] .pied-marque .mot { font: 600 34px/1.1 var(--serif); }
html[data-style="riviera"] .pied-marque svg { color: var(--dragee); }
html[data-style="riviera"] .pied h4 { font: 700 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
html[data-style="riviera"] .pied ul a { color: rgba(255, 255, 255, .62); }
html[data-style="riviera"] .pied ul a:hover { color: var(--dragee); }
html[data-style="riviera"] .pied-social a { border-radius: 2px; border-color: rgba(255, 255, 255, .22); }
html[data-style="riviera"] .pied-social a:hover { background: var(--dragee); border-color: var(--dragee); color: var(--encre); }
html[data-style="riviera"] .pied-news input { border-radius: 2px 0 0 2px; }
html[data-style="riviera"] .pied-news button { border-radius: 0 2px 2px 0; background: var(--dragee); color: var(--encre); }
html[data-style="riviera"] .pied-news button:hover { background: var(--blanc); }
html[data-style="riviera"] .pied-bas { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }

/* ---- sélecteur de palette et toast -------------------------------------- */
html[data-style="riviera"] .pal-bouton,
html[data-style="riviera"] .pal-liste,
html[data-style="riviera"] .pal-choix,
html[data-style="riviera"] .toast { border-radius: 2px; }

/* ==========================================================================
   LE VOCABULAIRE DU VERMEIL — ajouté au socle avec la peau du même nom
   Le diptyque autour de l'initiale, la carte en liste autour d'une photo.
   ========================================================================== */

/* ---- diptyque : deux textes en regard, la grande initiale au milieu ------ */
.dip-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.dip-col h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.1; color: var(--terracotta); margin-bottom: 20px; }
.dip-col p { color: var(--texte-doux); max-width: 44ch; }
.dip-col--gauche { text-align: right; }
.dip-col--gauche p { margin-left: auto; }
.dip-col .bouton { margin-top: 10px; }
.dip-centre { position: relative; display: grid; place-items: center; min-height: 420px; padding: 0 12px; }
/* l'initiale est un décor (aria-hidden) : dégradé dans la lettre, qui
   s'efface vers le bas. Sans background-clip, le repli est un trait. */
.dip-initiale {
  font: 700 clamp(220px, 26vw, 400px)/.8 var(--serif);
  color: transparent;
  -webkit-text-stroke: 1px var(--dragee);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .04) 85%);
  -webkit-background-clip: text; background-clip: text;
  user-select: none;
}
.dip-centre::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--terracotta) 18%, var(--terracotta) 82%, transparent);
}
@media (max-width: 900px) {
  .dip-corps { grid-template-columns: minmax(0, 1fr); gap: 40px; text-align: center; }
  .dip-col--gauche { text-align: center; }
  .dip-col p { margin-inline: auto; }
  .dip-centre { order: -1; min-height: 0; }
  .dip-initiale { font-size: 170px; }
  .dip-centre::after { display: none; }
}

/* ---- la carte en liste autour d'une photo -------------------------------- */
.cl-grille[data-photo] {
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1fr);
  align-items: start;
}
.cl-photo { min-width: 0; }
.cl-photo img {
  width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover;
  border-radius: var(--r-carte); filter: var(--photo-filtre);
}
@media (max-width: 1000px) {
  .cl-grille[data-photo] { grid-template-columns: minmax(0, 1fr); }
  .cl-photo { width: 100%; max-width: 420px; margin-inline: auto; }
}

/* ==========================================================================
   PEAU « VERMEIL » — table gastronomique, or sur noir
   Portée à la main depuis « Gericht » (Arnob Mahmud, licence MIT — voir
   SOURCES.md). Noir profond, or pâle, une serif droite et haute ; chaque
   titre annoncé par une ligne manuscrite et un couvert dessiné ; photos
   dans un cadre d'or décalé. Centrée, solennelle : la maison qu'on
   réserve pour une date.
   ========================================================================== */

html[data-style="vermeil"] body {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--accent-rgb), .06), transparent 70%),
    var(--creme);
}
html[data-style="vermeil"] h1,
html[data-style="vermeil"] h2,
html[data-style="vermeil"] h3 { letter-spacing: .03em; }
html[data-style="vermeil"] .section { padding: 112px 0; }

/* ---- la ligne manuscrite et son couvert --------------------------------- */
html[data-style="vermeil"] .sur-titre {
  flex-direction: column; gap: 12px;
  font: 700 22px/1.3 var(--serif); letter-spacing: .04em; text-transform: none;
  color: var(--texte);
}
html[data-style="vermeil"] .sur-titre::before { display: none; }
/* le couvert : une cuillère dessinée ici, posée en masque pour prendre
   l'or de la palette */
html[data-style="vermeil"] .sur-titre::after {
  width: 46px; height: 10px;
  background: var(--terracotta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 10'%3E%3Cellipse cx='6.5' cy='5' rx='6' ry='3.4'/%3E%3Cpath d='M12 4.3h31.5a.7.7 0 0 1 0 1.4H12z'/%3E%3Ccircle cx='43.6' cy='5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 10'%3E%3Cellipse cx='6.5' cy='5' rx='6' ry='3.4'/%3E%3Cpath d='M12 4.3h31.5a.7.7 0 0 1 0 1.4H12z'/%3E%3Ccircle cx='43.6' cy='5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-style="vermeil"] .section-tete { max-width: 720px; margin-bottom: 56px; }
html[data-style="vermeil"] .section-tete h2,
html[data-style="vermeil"] .titre-serif { font-size: clamp(40px, 5vw, 64px); line-height: 1.15; color: var(--terracotta); }
html[data-style="vermeil"] .section-tete .intro { font-size: 15px; max-width: 54ch; }
html[data-style="vermeil"] .titre-mots em { font-style: normal; color: var(--texte); }

/* ---- boutons : crème sur noir, la serif en gras --------------------------- */
html[data-style="vermeil"] .bouton .lib {
  border-radius: 1px;
  font: 700 16.5px/1.5 var(--serif); letter-spacing: .04em;
  padding: 11px 30px;
  background: var(--texte); color: var(--encre);
  box-shadow: none;
}
html[data-style="vermeil"] .bouton:hover .lib { background: var(--terracotta); color: var(--encre); box-shadow: none; }
html[data-style="vermeil"] .bouton--verre .lib,
html[data-style="vermeil"] .bouton--blanc .lib {
  background: transparent; color: var(--terracotta);
  border: 1px solid var(--terracotta);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-style="vermeil"] .bouton--verre:hover .lib,
html[data-style="vermeil"] .bouton--blanc:hover .lib { background: var(--terracotta); color: var(--encre); }

/* ---- la barre ----------------------------------------------------------- */
html[data-style="vermeil"] .nav-logo .mot {
  font: 700 25px/1 var(--serif); letter-spacing: .26em; text-transform: uppercase;
  color: var(--terracotta); padding-right: .26em;
}
html[data-style="vermeil"][data-nav="rail"] .nav.est-posee,
html[data-style="vermeil"][data-nav="rail"] body:not(.a-heros) .nav {
  background: var(--creme); border-bottom-color: var(--ligne);
}
html[data-style="vermeil"][data-nav="rail"] .nav::before { display: none; }
html[data-style="vermeil"][data-nav="rail"] .nav-liens { gap: 36px; }
html[data-style="vermeil"][data-nav="rail"] .nav-liens a {
  font: 400 14.5px/1 var(--sans); letter-spacing: .04em; text-transform: none;
}
html[data-style="vermeil"][data-nav="rail"] .nav-liens a,
html[data-style="vermeil"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a { color: var(--texte); }
html[data-style="vermeil"][data-nav="rail"] .nav-liens a:hover,
html[data-style="vermeil"][data-nav="rail"] .nav-liens a.actif,
html[data-style="vermeil"][data-nav="rail"] .nav-liens a[aria-current="page"],
html[data-style="vermeil"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a:hover,
html[data-style="vermeil"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a[aria-current="page"] { color: var(--terracotta); }
html[data-style="vermeil"][data-nav="rail"] .nav-liens a::after,
html[data-style="vermeil"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a::after { background: var(--terracotta); }
html[data-style="vermeil"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-logo .mot { color: var(--terracotta); }
html[data-style="vermeil"][data-nav="rail"] .nav-action,
html[data-style="vermeil"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action {
  border: 1px solid var(--terracotta); border-radius: 1px;
  color: var(--terracotta); background: transparent;
  font: 700 15.5px/1 var(--serif); letter-spacing: .04em; text-transform: none;
}
html[data-style="vermeil"][data-nav="rail"] .nav-action:hover,
html[data-style="vermeil"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action:hover {
  background: var(--terracotta); color: var(--encre); border-color: var(--terracotta);
}
html[data-style="vermeil"][data-nav="rail"] .nav-tiroir a { font: 700 24px/1.1 var(--serif); letter-spacing: .03em; text-transform: none; }
html[data-style="vermeil"][data-nav="rail"] .nav-tiroir a.actif,
html[data-style="vermeil"][data-nav="rail"] .nav-tiroir a:hover { color: var(--terracotta); }

/* ---- le héros : l'image dans son cadre d'or décalé -------------------------- */
html[data-style="vermeil"] .heros[data-compo="moitie"] { background: transparent; }
html[data-style="vermeil"] .heros-kicker {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  font: 700 22px/1.3 var(--serif); letter-spacing: .04em;
  color: var(--texte); margin-bottom: 22px;
}
html[data-style="vermeil"] .heros-kicker::after {
  content: ''; width: 46px; height: 10px; background: var(--terracotta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 10'%3E%3Cellipse cx='6.5' cy='5' rx='6' ry='3.4'/%3E%3Cpath d='M12 4.3h31.5a.7.7 0 0 1 0 1.4H12z'/%3E%3Ccircle cx='43.6' cy='5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 10'%3E%3Cellipse cx='6.5' cy='5' rx='6' ry='3.4'/%3E%3Cpath d='M12 4.3h31.5a.7.7 0 0 1 0 1.4H12z'/%3E%3Ccircle cx='43.6' cy='5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-style="vermeil"] .heros h1 {
  font-size: clamp(54px, 6.4vw, 100px); line-height: 1.08; font-weight: 700;
  color: var(--terracotta); text-shadow: none; margin-bottom: 22px;
}
html[data-style="vermeil"] .heros h1 em { font-style: normal; color: var(--texte); }
html[data-style="vermeil"] .heros-corps p { font-size: 16px; line-height: 1.8; color: var(--texte-doux); margin-bottom: 34px; text-shadow: none; }
html[data-style="vermeil"] .heros-corps .heros-lieu {
  font: 400 13px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 26px;
}
html[data-style="vermeil"] .heros-chiffres .valeur { color: var(--terracotta); font-weight: 700; }
html[data-style="vermeil"] .heros-chiffres .legende { color: var(--texte-doux); }
html[data-style="vermeil"] .heros-pastille { background: transparent; color: var(--terracotta); border: 1px solid var(--terracotta); box-shadow: none; }
@media (min-width: 861px) {
  html[data-style="vermeil"] .heros[data-compo="moitie"] .heros-fond {
    overflow: visible;
    margin: 150px clamp(48px, 7vw, 120px) 96px clamp(24px, 3vw, 44px);
  }
  html[data-style="vermeil"] .heros[data-compo="moitie"] .heros-fond::before {
    content: ''; position: absolute; inset: -22px 22px 22px -22px;
    border: 1px solid var(--terracotta);
  }
  html[data-style="vermeil"] .heros[data-compo="moitie"] .heros-fond::after { display: none; }
  /* le zoom d'entrée déborderait du cadre : l'image arrive en fondu */
  html[data-style="vermeil"] .heros[data-compo="moitie"] .heros-fond img {
    animation: vermeil-fondu 1.4s ease both; transform: none;
  }
  html[data-style="vermeil"] .heros[data-compo="moitie"] .heros-chiffres { border-top-color: var(--ligne); }
  html[data-style="vermeil"] .heros[data-compo="moitie"] .heros-pastille { margin: 0 calc(clamp(48px, 7vw, 120px) - 40px) 56px 0; }
}
@keyframes vermeil-fondu { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 860px) {
  html[data-style="vermeil"] .heros h1 { font-size: clamp(46px, 13vw, 72px); margin-bottom: 14px; }
  html[data-style="vermeil"] .heros-kicker { font-size: 19px; margin-bottom: 14px; }
  html[data-style="vermeil"] .heros-corps p { font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }
}
@media (max-width: 480px) {
  html[data-style="vermeil"] .heros-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  html[data-style="vermeil"] .heros-actions .bouton,
  html[data-style="vermeil"] .heros-actions .bouton .lib { width: 100%; }
}

/* ---- la bande des pages intérieures ------------------------------------- */
html[data-style="vermeil"] .bande-heros {
  margin: 0; border-radius: 0; background: transparent;
  border-bottom: 1px solid var(--ligne);
  padding: 176px 24px 76px;
}
html[data-style="vermeil"] .bande-heros h1 { font-size: clamp(50px, 6.4vw, 92px); font-weight: 700; color: var(--terracotta); }
html[data-style="vermeil"] .bande-heros .sur-titre { color: var(--texte); }
@media (max-width: 720px) { html[data-style="vermeil"] .bande-heros { padding: 128px 20px 52px; } }

/* ---- la carte en liste : le nom en or, un trait court, le prix ----------- */
html[data-style="vermeil"] .cl-grille { gap: 48px clamp(32px, 4vw, 60px); }
html[data-style="vermeil"] .cl-rubrique-nom {
  font: 600 clamp(32px, 3.2vw, 44px)/1.2 var(--serif); letter-spacing: .04em; text-transform: none;
  color: var(--texte); border: 0; padding: 0; margin: 0 0 8px; text-align: center;
}
html[data-style="vermeil"] .cl-note { text-align: center; }
html[data-style="vermeil"] .cl-ligne { border: 0; padding: 13px 0; }
html[data-style="vermeil"] .cl-nom { font: 700 clamp(20px, 1.7vw, 23px)/1.25 var(--serif); letter-spacing: .03em; color: var(--terracotta); flex: 1 1 auto; }
html[data-style="vermeil"] .cl-conduite { flex: 0 1 72px; border-bottom: 1px solid var(--terracotta); transform: translateY(-6px); }
html[data-style="vermeil"] .cl-prix { font: 700 21px/1 var(--serif); color: var(--texte); }
html[data-style="vermeil"] .cl-desc { font-size: 14px; letter-spacing: .02em; }
html[data-style="vermeil"] .cl-marque { border-color: var(--terracotta); border-radius: 1px; }
html[data-style="vermeil"] .cl-photo { position: relative; padding: 0 0 0 18px; }
html[data-style="vermeil"] .cl-photo::before {
  content: ''; position: absolute; inset: 18px 18px -18px 0; border: 1px solid var(--terracotta);
}
html[data-style="vermeil"] .cl-photo img { position: relative; border-radius: 0; }
/* sous 480 px le socle passe le prix à la ligne : ici le nom et le prix
   tiennent ensemble, seul le trait disparaît */
@media (max-width: 480px) {
  html[data-style="vermeil"] .cl-tete { flex-wrap: nowrap; }
  html[data-style="vermeil"] .cl-prix { width: auto; margin: 0 0 0 auto; padding-left: 14px; color: var(--texte); }
}
/* la barre d'un téléphone : l'action tient sur une ligne à côté du nom */
@media (max-width: 480px) {
  html[data-style="vermeil"] .nav-logo .mot { font-size: 20px; letter-spacing: .18em; padding-right: .18em; }
  html[data-style="vermeil"][data-nav="rail"] .nav-action { white-space: nowrap; font-size: 14px; padding: 0 12px; }
}

/* ---- diptyque ------------------------------------------------------------ */
html[data-style="vermeil"] .dip-col h2 { font-size: clamp(40px, 4.6vw, 64px); }
html[data-style="vermeil"] .dip-col p { font-size: 15px; line-height: 1.85; }

/* ---- citation : les guillemets d'or, la signature en regard -------------- */
html[data-style="vermeil"] .citation figure::before {
  content: '\201C'; display: block;
  font: 700 120px/.7 var(--serif); color: var(--terracotta);
  margin-bottom: 18px;
}
html[data-style="vermeil"] .cit-texte { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.45; color: var(--texte); letter-spacing: .02em; }
html[data-style="vermeil"] .cit-source {
  font: 400 clamp(24px, 2.4vw, 32px)/1.2 var(--serif); letter-spacing: .04em; text-transform: none;
  color: var(--terracotta);
}

/* ---- galerie : portraits cernés d'un filet d'or ---------------------------- */
html[data-style="vermeil"] .eventail { gap: 26px; }
html[data-style="vermeil"] .eventail a:nth-child(odd) { display: block; }
html[data-style="vermeil"] .eventail a:nth-child(even) { margin-top: 0; }
html[data-style="vermeil"] .eventail .photo {
  border-radius: 0; aspect-ratio: 301 / 447; box-shadow: none;
  border: 1px solid rgba(var(--accent-rgb), .2); position: relative;
}
html[data-style="vermeil"] .eventail .photo::after {
  content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); transition: background var(--vif);
}
html[data-style="vermeil"] .eventail a:hover .photo::after { background: rgba(0, 0, 0, 0); }
html[data-style="vermeil"] .eventail .etiquette {
  font: 700 21px/1.3 var(--serif); letter-spacing: .04em; color: var(--terracotta);
  text-align: center; padding: 16px 4px 0;
}

/* ---- horaires : la photo dans son cadre ---------------------------------- */
html[data-style="vermeil"] .horaires-liste { background: transparent; }
html[data-style="vermeil"] .ligne-horaire { border-color: var(--ligne); font-size: 15.5px; }
html[data-style="vermeil"] .ligne-horaire .jours { font: 700 21px/1.2 var(--serif); letter-spacing: .03em; color: var(--terracotta); }
html[data-style="vermeil"] .ligne-horaire .heures { color: var(--texte); }
html[data-style="vermeil"] .ligne-horaire .pointilles { border-bottom: 1px solid var(--ligne); }
html[data-style="vermeil"] .ligne-horaire.est-aujourdhui {
  background: rgba(var(--accent-rgb), .07); border-radius: 0;
  box-shadow: inset 2px 0 0 var(--terracotta);
}
html[data-style="vermeil"] .ligne-horaire.est-aujourdhui .jours::after { color: var(--terracotta); }
html[data-style="vermeil"] .horaires-photo {
  overflow: visible; border-radius: 0; box-shadow: none; position: relative;
  margin: 22px 0 0 22px;
}
html[data-style="vermeil"] .horaires-photo::before {
  content: ''; position: absolute; inset: -22px 22px 22px -22px; border: 1px solid var(--terracotta);
}
html[data-style="vermeil"] .horaires-photo img { position: relative; }
html[data-style="vermeil"] .horaires-note { color: var(--texte-doux); }

/* ---- cartes photo, avis, FAQ : les derniers blocs blancs passent au noir -- */
html[data-style="vermeil"] .article,
html[data-style="vermeil"] .avis-carte,
html[data-style="vermeil"] .faq-item,
html[data-style="vermeil"] .service {
  background: var(--sable); border: 1px solid var(--ligne); border-radius: 0; box-shadow: none;
}
html[data-style="vermeil"] .article .nom,
html[data-style="vermeil"] .service-tete h3 { color: var(--terracotta); font-weight: 700; }
html[data-style="vermeil"] .filtres .pilule { border-radius: 1px; border-color: var(--ligne); }
html[data-style="vermeil"] .filtres .pilule.actif { background: var(--terracotta); color: var(--encre); }

/* ---- le pied --------------------------------------------------------------- */
html[data-style="vermeil"] .pied {
  margin: 0; border-radius: 0;
  background: var(--caramel);
  border-top: 1px solid var(--ligne);
  padding: 84px max(6%, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(6%, env(safe-area-inset-left));
}
html[data-style="vermeil"] .pied-marque .mot {
  font: 700 30px/1.1 var(--serif); letter-spacing: .26em; text-transform: uppercase; color: var(--terracotta);
}
html[data-style="vermeil"] .pied h4 { font: 600 26px/1.2 var(--serif); letter-spacing: .04em; color: var(--terracotta); }
html[data-style="vermeil"] .pied ul a { color: var(--texte-doux); }
html[data-style="vermeil"] .pied ul a:hover { color: var(--terracotta); }
html[data-style="vermeil"] .pied-social a { border-radius: 1px; border-color: var(--ligne); }
html[data-style="vermeil"] .pied-social a:hover { background: transparent; border-color: var(--terracotta); color: var(--terracotta); }
html[data-style="vermeil"] .pied-news { border: 1px solid rgba(var(--accent-rgb), .3); padding: 26px 24px; }
html[data-style="vermeil"] .pied-news input {
  border-radius: 0; background: transparent; color: var(--texte);
  border: 1px solid rgba(var(--accent-rgb), .45);
}
html[data-style="vermeil"] .pied-news input::placeholder { color: var(--texte-doux); }
html[data-style="vermeil"] .pied-news button { border-radius: 0; background: var(--texte); color: var(--encre); }
html[data-style="vermeil"] .pied-news button:hover { background: var(--terracotta); }
html[data-style="vermeil"] .pied-bas { border-top-color: var(--ligne); color: var(--texte-doux); }
html[data-style="vermeil"] .pal-bouton,
html[data-style="vermeil"] .pal-liste,
html[data-style="vermeil"] .pal-choix,
html[data-style="vermeil"] .toast { border-radius: 1px; }

/* ==========================================================================
   LE VOCABULAIRE DE LA BRASSERIE — ajouté au socle avec la peau du même nom
   La vignette dans la carte en liste, le tampon posé sur l'histoire.
   ========================================================================== */

/* ---- carte en liste : une vignette à gauche du plat ------------------------ */
.cl-ligne--photo {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 20px; align-items: start;
}
.cl-vignette { grid-row: 1 / span 2; }
.cl-vignette img {
  width: 88px; height: 88px; object-fit: cover;
  border-radius: var(--r-carte); filter: var(--photo-filtre);
}
.cl-ligne--photo .cl-tete,
.cl-ligne--photo .cl-desc { grid-column: 2; }
@media (max-width: 480px) {
  .cl-ligne--photo { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .cl-vignette img { width: 64px; height: 64px; }
}

/* ---- le tampon sur l'histoire ------------------------------------------- */
.hist-pastille { right: -18px; bottom: auto; top: 38%; }
@media (max-width: 860px) { .hist-pastille { right: 8px; top: auto; bottom: -24px; width: 104px; height: 104px; } }

/* ==========================================================================
   PEAU « BRASSERIE » — la grande salle, les cuivres et le service
   Portée à la main depuis « Grilli » (codewithsadee, licence MIT — voir
   SOURCES.md). Une capitale romaine pour les titres, des sur-titres en
   capitales très espacées posés sur un losange entre deux filets, des
   boutons cerclés qui se remplissent par le bas, la carte en liste avec
   ses vignettes. Aucune couleur n'est codée : la même peau tient la crème
   et le bordeaux du jour comme le noir et l'or de la nuit.
   ========================================================================== */

html[data-style="brasserie"] h1,
html[data-style="brasserie"] h2,
html[data-style="brasserie"] h3 { letter-spacing: .01em; }
html[data-style="brasserie"] .section { padding: 112px 0; }
html[data-style="brasserie"] .titre-mots em { font-style: normal; color: var(--terracotta); }

/* ---- sur-titre : capitales espacées sur le losange ------------------------ */
html[data-style="brasserie"] .sur-titre {
  flex-direction: column; gap: 10px;
  font: 700 12px/1.3 var(--sans); letter-spacing: .38em;
  padding-left: .38em;
}
html[data-style="brasserie"] .sur-titre::before { display: none; }
html[data-style="brasserie"] .sur-titre::after,
html[data-style="brasserie"] .heros-kicker::after {
  content: ''; width: 100px; height: 10px; background: var(--dragee);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 4.5h41v1H0zM59 4.5h41v1H59z'/%3E%3Cpath d='M50 .8 54.2 5 50 9.2 45.8 5zM50 2.2 47.2 5 50 7.8 52.8 5z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 4.5h41v1H0zM59 4.5h41v1H59z'/%3E%3Cpath d='M50 .8 54.2 5 50 9.2 45.8 5zM50 2.2 47.2 5 50 7.8 52.8 5z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-style="brasserie"] .section-tete { max-width: 700px; margin-bottom: 58px; }
html[data-style="brasserie"] .section-tete h2,
html[data-style="brasserie"] .titre-serif { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.15; color: var(--texte); }
html[data-style="brasserie"] .section-tete .intro { font-size: 15.5px; line-height: 1.75; max-width: 56ch; }

/* ---- boutons : cerclés, remplis par le bas au survol ---------------------- */
html[data-style="brasserie"] .bouton .lib {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 0;
  border: 2px solid var(--terracotta);
  background: transparent; color: var(--terracotta);
  font: 700 12px/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  padding: 15px 40px 15px calc(40px + .3em);
  box-shadow: none;
  transition: color .45s ease, border-color var(--vif);
}
html[data-style="brasserie"] .bouton .lib::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; bottom: 100%; width: 220%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--terracotta);
  transform: translateX(-50%);
  transition: bottom .55s cubic-bezier(.33, 1, .68, 1);
}
html[data-style="brasserie"] .bouton:hover .lib {
  background: transparent; color: var(--sur-accent, var(--blanc));
  transform: none; box-shadow: none;
}
html[data-style="brasserie"] .bouton:hover .lib::before { bottom: -80%; }
/* « blanc » : le bouton plein, qui se vide à l'encre au survol */
html[data-style="brasserie"] .bouton--blanc .lib { background: var(--terracotta); color: var(--sur-accent, var(--blanc)); }
html[data-style="brasserie"] .bouton--blanc .lib::before { background: var(--texte); }
html[data-style="brasserie"] .bouton--blanc:hover .lib { color: var(--creme); border-color: var(--texte); }
/* sur la photographie : le blanc et le cuivre, jamais l'accent du thème */
html[data-style="brasserie"] .heros .bouton .lib,
html[data-style="brasserie"] .trouver .bouton .lib,
html[data-style="brasserie"] .bande-photo .bouton .lib {
  border-color: var(--dragee); color: #FFFFFF;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-style="brasserie"] .heros .bouton .lib::before,
html[data-style="brasserie"] .trouver .bouton .lib::before { background: var(--dragee); }
html[data-style="brasserie"] .heros .bouton:hover .lib,
html[data-style="brasserie"] .trouver .bouton:hover .lib { color: var(--encre); }

/* ---- la barre ------------------------------------------------------------- */
html[data-style="brasserie"] .nav-logo .mot {
  font: 400 27px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase;
  padding-right: .14em; color: var(--texte);
}
html[data-style="brasserie"][data-nav="rail"] .nav.est-posee,
html[data-style="brasserie"][data-nav="rail"] body:not(.a-heros) .nav {
  background: var(--creme); border-bottom-color: var(--ligne);
}
html[data-style="brasserie"][data-nav="rail"] .nav-liens { gap: 30px; }
html[data-style="brasserie"][data-nav="rail"] .nav-liens a {
  font: 700 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: 10px 0;
}
html[data-style="brasserie"][data-nav="rail"] .nav-liens a,
html[data-style="brasserie"][data-nav="rail"] .nav-liens a:hover,
html[data-style="brasserie"][data-nav="rail"] .nav-liens a.actif,
html[data-style="brasserie"][data-nav="rail"] .nav-liens a[aria-current="page"] { color: var(--texte); }
/* le soulignement Grilli : deux filets qui s'ouvrent depuis le centre */
html[data-style="brasserie"][data-nav="rail"] .nav-liens a::after,
html[data-style="brasserie"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a::after {
  height: 5px; background: none;
  border-block: 1px solid var(--dragee);
  transform: scaleX(.2); transform-origin: center; opacity: 0;
  transition: transform var(--vif), opacity var(--vif);
}
html[data-style="brasserie"][data-nav="rail"] .nav-liens a:hover::after,
html[data-style="brasserie"][data-nav="rail"] .nav-liens a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }
html[data-style="brasserie"][data-nav="rail"] .nav-action {
  border: 2px solid var(--terracotta); border-radius: 0; background: transparent;
  color: var(--terracotta);
  font: 700 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  padding: 0 20px;
}
html[data-style="brasserie"][data-nav="rail"] .nav-action:hover { background: var(--terracotta); color: var(--sur-accent, var(--blanc)); }
html[data-style="brasserie"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action { border-color: var(--dragee); color: #FFFFFF; }
html[data-style="brasserie"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action:hover { background: var(--dragee); color: var(--encre); }
html[data-style="brasserie"][data-nav="rail"] .nav-tiroir a { font: 400 26px/1.1 var(--serif); letter-spacing: .04em; text-transform: none; }
html[data-style="brasserie"][data-nav="rail"] .nav-tiroir a.actif,
html[data-style="brasserie"][data-nav="rail"] .nav-tiroir a:hover { color: var(--terracotta); }
html[data-style="brasserie"] .pal-bouton { border-radius: 0; }
/* nom espacé + sélecteur de thème + action + burger : 383 px pour un écran
   de 320. Sur téléphone l'action passe dans le tiroir, où elle figure déjà. */
@media (max-width: 420px) {
  html[data-style="brasserie"] .nav-logo .mot { font-size: 21px; letter-spacing: .08em; padding-right: .08em; }
  html[data-style="brasserie"][data-nav="rail"] .nav-action { display: none; }
}

/* ---- le héros : plein écran, centré, la capitale en très grand ------------ */
html[data-style="brasserie"] .heros { margin: 0; border-radius: 0; min-height: 100vh; min-height: 100svh; }
html[data-style="brasserie"] .heros-fond::after {
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(var(--encre-rgb), .38), rgba(var(--encre-rgb), .72)),
    linear-gradient(180deg, rgba(var(--encre-rgb), .55), rgba(var(--encre-rgb), .1) 30%, rgba(var(--encre-rgb), .6));
}
html[data-style="brasserie"] .heros-corps { max-width: 900px; }
html[data-style="brasserie"] .heros-kicker {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 700 12.5px/1.3 var(--sans); letter-spacing: .4em; text-transform: uppercase;
  padding-left: .4em; color: #FFFFFF; margin-bottom: 22px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
html[data-style="brasserie"] .heros h1 { font-size: clamp(54px, 8.4vw, 124px); line-height: 1; margin-bottom: 20px; color: #FFFFFF; }
/* sur la photo, le mot appuyé reste blanc : le cuivre du thème clair y perdait tout contraste */
html[data-style="brasserie"] .heros h1 em { color: #FFFFFF; }
html[data-style="brasserie"] .heros-corps p { font-size: 16.5px; line-height: 1.75; max-width: 540px; margin-bottom: 38px; }
html[data-style="brasserie"] .heros-pastille { background: var(--dragee); color: var(--encre); width: 128px; height: 128px; }
html[data-style="brasserie"] .heros-pastille .pastille-valeur { font-size: 26px; font-weight: 400; }
@media (max-width: 720px) {
  html[data-style="brasserie"] .heros { min-height: 86vh; min-height: 86svh; }
  html[data-style="brasserie"] .heros h1 { font-size: clamp(46px, 13vw, 70px); margin-bottom: 14px; }
  html[data-style="brasserie"] .heros-kicker { letter-spacing: .28em; padding-left: .28em; font-size: 11px; margin-bottom: 16px; }
  html[data-style="brasserie"] .heros-corps p { font-size: 14.5px; line-height: 1.6; margin-bottom: 26px; }
  html[data-style="brasserie"] .heros-pastille { width: 88px; height: 88px; right: 14px; bottom: 16px; }
  html[data-style="brasserie"] .heros-pastille .pastille-valeur { font-size: 18px; margin: 2px 0; }
  html[data-style="brasserie"] .heros-pastille .pastille-haut,
  html[data-style="brasserie"] .heros-pastille .pastille-bas { font-size: 8px; }
  html[data-style="brasserie"] .bouton .lib { padding: 14px 24px 14px calc(24px + .2em); letter-spacing: .2em; }
}
@media (max-width: 720px) and (max-height: 700px) {
  html[data-style="brasserie"] .heros-pastille { display: none; }
}
@media (max-width: 480px) {
  html[data-style="brasserie"] .heros-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  html[data-style="brasserie"] .heros-actions .bouton,
  html[data-style="brasserie"] .heros-actions .bouton .lib { width: 100%; }
}

/* ---- la bande des pages intérieures -------------------------------------- */
html[data-style="brasserie"] .bande-heros {
  margin: 0; border-radius: 0;
  background: var(--caramel);
  padding: 180px 24px 88px;
}
html[data-style="brasserie"] .bande-heros h1 { font-size: clamp(50px, 6.6vw, 96px); }
html[data-style="brasserie"] .bande-heros .sur-titre { color: var(--dragee); }
html[data-style="brasserie"] .bande-heros .sur-titre::after { background: var(--dragee); }
@media (max-width: 720px) { html[data-style="brasserie"] .bande-heros { padding: 128px 20px 56px; } }

/* ---- les spécialités : l'image sur une bande hachurée --------------------- */
html[data-style="brasserie"] .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
html[data-style="brasserie"] .categorie {
  overflow: visible; border-radius: 0; box-shadow: none; aspect-ratio: auto;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 30px;
}
/* la bande : un hachurage fin à l'accent, derrière le haut de l'image */
html[data-style="brasserie"] .categorie::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 46%; height: 72%;
  background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), .32) 0 1px, transparent 1px 8px);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
html[data-style="brasserie"] .categorie:hover::before { transform: translateX(-50%) rotateY(180deg); }
html[data-style="brasserie"] .categorie::after { display: none; }
html[data-style="brasserie"] .categorie img {
  position: relative; width: 84%; height: auto; aspect-ratio: 3 / 3.8;
  filter: var(--photo-filtre);
}
html[data-style="brasserie"] .categorie-pied {
  position: static; background: none; border-radius: 0; padding: 22px 0 0;
  flex-direction: column; gap: 10px;
}
html[data-style="brasserie"] .categorie-pied .nom { font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--serif); color: var(--texte); }
/* sous le nom, un court filet de cuivre qui s'allonge au survol */
html[data-style="brasserie"] .categorie-pied::after {
  content: ''; width: 36px; height: 1px; background: var(--dragee); transition: width var(--vif);
}
html[data-style="brasserie"] .categorie:hover .categorie-pied::after { width: 72px; }
html[data-style="brasserie"] .categorie:hover .categorie-pied { background: none; }
html[data-style="brasserie"] .categorie:hover .categorie-pied .nom { color: var(--terracotta); }
@media (max-width: 760px) {
  html[data-style="brasserie"] .categories { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin-inline: auto; }
}

/* ---- la carte en liste : vignettes, pointillés de cuivre ------------------ */
html[data-style="brasserie"] .cl-grille { gap: 50px clamp(36px, 5vw, 80px); }
html[data-style="brasserie"] .cl-rubrique-nom {
  text-align: center; border-bottom: 0; padding-bottom: 0; margin-bottom: 8px;
  font: 400 clamp(26px, 2.4vw, 32px)/1.2 var(--serif); letter-spacing: .02em; text-transform: none; color: var(--texte);
}
html[data-style="brasserie"] .cl-note { text-align: center; }
html[data-style="brasserie"] .cl-ligne { border-bottom: 0; padding: 16px 0; }
html[data-style="brasserie"] .cl-nom { font: 400 clamp(20px, 1.8vw, 24px)/1.25 var(--serif); }
html[data-style="brasserie"] .cl-conduite { border-bottom: 1px dashed var(--dragee); transform: translateY(-7px); }
html[data-style="brasserie"] .cl-prix { font: 400 21px/1 var(--serif); color: var(--terracotta); }
html[data-style="brasserie"] .cl-desc { font-size: 14px; line-height: 1.6; }
html[data-style="brasserie"] .cl-marque {
  border: 0; border-radius: 0; background: var(--terracotta); color: var(--sur-accent, var(--blanc));
  font: 400 12px/1.4 var(--serif); letter-spacing: .08em; padding: 1px 8px 0;
}
html[data-style="brasserie"] .cl-vignette img { border-radius: 18px; }
@media (max-width: 480px) {
  html[data-style="brasserie"] .cl-tete { flex-wrap: nowrap; }
  html[data-style="brasserie"] .cl-prix { width: auto; margin: 0 0 0 auto; padding-left: 12px; }
  html[data-style="brasserie"] .cl-marque { display: none; }
}

/* ---- l'histoire ------------------------------------------------------------ */
html[data-style="brasserie"] .hist-texte h2 { font-size: clamp(36px, 4.2vw, 56px); color: var(--texte); }
html[data-style="brasserie"] .hist-texte .sur-titre { align-items: flex-start; padding-left: 0; }
html[data-style="brasserie"] .hist-vue { border-radius: 0; box-shadow: none; }
html[data-style="brasserie"] .hist-vue--2 { border-width: 8px; }
html[data-style="brasserie"] .hist-pastille { background: var(--dragee); color: var(--encre); }

/* ---- le témoignage : la bande photo en grande citation --------------------- */
html[data-style="brasserie"] .bande-photo { min-height: 70vh; min-height: 70svh; }
html[data-style="brasserie"] .bp-fond::after { background: rgba(var(--encre-rgb), .72); }
html[data-style="brasserie"] .bp-corps h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.35; }
html[data-style="brasserie"] .bp-corps h2::before {
  content: '\201C'; display: block; font: 400 110px/.6 var(--serif); color: var(--dragee); margin-bottom: 26px;
}
html[data-style="brasserie"] .bp-legende {
  font: 700 12px/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--dragee); margin-top: 30px;
}

/* ---- horaires, nous trouver -------------------------------------------------- */
html[data-style="brasserie"] .ligne-horaire .jours { font: 400 20px/1.2 var(--serif); }
html[data-style="brasserie"] .ligne-horaire .pointilles { border-bottom: 1px dashed var(--dragee); }
html[data-style="brasserie"] .ligne-horaire.est-aujourdhui {
  background: transparent; border-radius: 0; box-shadow: inset 0 0 0 1px var(--dragee);
}
html[data-style="brasserie"] .horaires-photo { border-radius: 0; box-shadow: none; }
html[data-style="brasserie"] .trouver { margin: 0; border-radius: 0; }
html[data-style="brasserie"] .trouver-fond::after { background: linear-gradient(100deg, rgba(var(--encre-rgb), .92) 25%, rgba(var(--encre-rgb), .6)); }
html[data-style="brasserie"] .info-ligne { border-radius: 0; border-color: rgba(255, 255, 255, .2); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- cartes photo, avis, FAQ : les coins suivent -------------------------- */
html[data-style="brasserie"] .article,
html[data-style="brasserie"] .avis-carte,
html[data-style="brasserie"] .faq-item,
html[data-style="brasserie"] .service { border-radius: 0; box-shadow: none; }
html[data-style="brasserie"] .filtres .pilule { border-radius: 0; font: 700 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
html[data-style="brasserie"] .filtres .pilule.actif { background: var(--terracotta); color: var(--sur-accent, var(--blanc)); }

/* ---- le pied --------------------------------------------------------------- */
html[data-style="brasserie"] .pied {
  margin: 0; border-radius: 0; background: var(--caramel);
  padding: 88px max(6%, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(6%, env(safe-area-inset-left));
}
html[data-style="brasserie"] .pied-marque .mot { font: 400 32px/1.1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
html[data-style="brasserie"] .pied h4 { font: 700 11.5px/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--dragee); }
html[data-style="brasserie"] .pied-social a { border-radius: 0; }
html[data-style="brasserie"] .pied-social a:hover { background: var(--dragee); border-color: var(--dragee); color: var(--encre); }
html[data-style="brasserie"] .pied-news input { border-radius: 0; }
html[data-style="brasserie"] .pied-news button { border-radius: 0; background: var(--dragee); color: var(--encre); }
html[data-style="brasserie"] .pied-news button:hover { background: #FFFFFF; }
html[data-style="brasserie"] .pal-liste,
html[data-style="brasserie"] .pal-choix,
html[data-style="brasserie"] .toast { border-radius: 0; }