/* 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: 'Playfair Display';
  src: url('../fonts/playfair-vf-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-vf-italic-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-vf-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --creme: #FFFFFF;
  --sable: #FCF4F2;
  --dragee: #D62828;
  --caramel: #1D1D1D;
  --terracotta: #A81817;
  --terracotta-fonce: #3D5A2B;
  --encre: #1D1D1D;
  --texte: #1D1D1D;
  --texte-doux: #55504D;
  --ligne: #EDE1DE;
  --blanc: #FFFFFF;
  --accent-rgb: 168, 24, 23;
  --encre-rgb: 29, 29, 29;
  --ombre-nav: 0 18px 40px -18px rgba(168, 24, 23, .45);
  --ombre-carte: 0 20px 25px -5px rgba(168, 24, 23, .16), 0 8px 10px -6px rgba(168, 24, 23, .16);
  --ombre-haut: 0 20px 25px -5px rgba(168, 24, 23, .40), 0 8px 10px -6px rgba(168, 24, 23, .40);
  --ombre-encre: 0 18px 40px -12px rgba(29, 29, 29, .5);
  --oeil: #A81817;
  --sur-accent: #FFFFFF;
  --serif: 'Playfair Display', 'Georgia', serif;
  --sans: 'Montserrat', 'Segoe UI', sans-serif;
  --r-carte: 10px;
  --r-grande: 0px;
  --r-champ: 6px;
  --r-blob: 10px;
  --r-blob-2: 10px;
  --lent: 0.8s cubic-bezier(.22, .61, .36, 1);
  --vif: 0.25s cubic-bezier(.33, 1, .68, 1);
  --cran: 0.08s;
  --photo-filtre: saturate(1.08) contrast(1.04) sepia(0.04);
  --photo-filtre-survol: saturate(1.156) contrast(1.05) sepia(0.010);
  --photo-zoom: 1.05;
  --photo-duree: 1.2s;
  --graisse-corps: 400;
}

html[data-palette="crema"] {
  --creme: #FBF6EC;
  --sable: #F3EBDB;
  --dragee: #C8302A;
  --caramel: #2A211B;
  --terracotta: #9E2420;
  --terracotta-fonce: #3F5B2C;
  --encre: #1E1813;
  --texte: #241C17;
  --texte-doux: #5E5249;
  --ligne: #E5D9C3;
  --blanc: #FFFFFF;
  --accent-rgb: 158, 36, 32;
  --encre-rgb: 30, 24, 19;
  --ombre-nav: 0 18px 40px -18px rgba(158, 36, 32, .45);
  --ombre-carte: 0 20px 25px -5px rgba(158, 36, 32, .16), 0 8px 10px -6px rgba(158, 36, 32, .16);
  --ombre-haut: 0 20px 25px -5px rgba(158, 36, 32, .40), 0 8px 10px -6px rgba(158, 36, 32, .40);
  --ombre-encre: 0 18px 40px -12px rgba(30, 24, 19, .5);
  --oeil: #9E2420;
  --sur-accent: #FFFFFF;
}

html[data-palette="notte"] {
  --creme: #171312;
  --sable: #201A18;
  --dragee: #E5483C;
  --caramel: #0E0B0A;
  --terracotta: #F06A5C;
  --terracotta-fonce: #A3C27F;
  --encre: #0E0B0A;
  --texte: #F6F0EA;
  --texte-doux: #BCB0A8;
  --ligne: #3A302C;
  --blanc: #FFFFFF;
  --accent-rgb: 240, 106, 92;
  --encre-rgb: 14, 11, 10;
  --ombre-nav: 0 18px 40px -18px rgba(240, 106, 92, .45);
  --ombre-carte: 0 20px 25px -5px rgba(240, 106, 92, .16), 0 8px 10px -6px rgba(240, 106, 92, .16);
  --ombre-haut: 0 20px 25px -5px rgba(240, 106, 92, .40), 0 8px 10px -6px rgba(240, 106, 92, .40);
  --ombre-encre: 0 18px 40px -12px rgba(14, 11, 10, .5);
  --oeil: #F06A5C;
  --sur-accent: #0E0B0A;
}

/* ---------- 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);
}
/* 44 px de haut : sur téléphone le crédit tient sur deux lignes et reste
   une cible au doigt */
.pied-bas a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
@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; }

/* ==========================================================================
   LE VOCABULAIRE LUMINEUX — ajouté au socle avec la peau du même nom
   Les rangs alternés, le mot du chef, la mosaïque, le panneau « réserver »
   et le geste « lueur ». Rien ici ne dépend d'une peau.
   ========================================================================== */

/* ---- geste « lueur » : le mot s'allume au lieu de monter -----------------
   Il sort d'un flou au lieu de lever sous son masque. Le masque s'ouvre
   donc : un flou coupé net au bord du mot se lirait comme un défaut. */
html[data-geste="lueur"] .titre-mots .mot-masque { overflow: visible; }
html[data-geste="lueur"] .titre-mots .mot-anim {
  transform: none;
  filter: blur(14px);
  transition:
    filter 1.4s cubic-bezier(.22, .61, .36, 1) var(--mot-delai, 0s),
    opacity 1.1s ease var(--mot-delai, 0s);
}
html[data-geste="lueur"] .titre-mots.est-la .mot-anim { filter: none; opacity: 1; }
html[data-geste="lueur"][data-apparitions="off"] .titre-mots .mot-anim { filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-geste="lueur"] .titre-mots .mot-anim { filter: none !important; }
}

/* ---- la fumée au curseur (motion.fumee) : le canevas que pose le JS -------
   Sous la barre, au-dessus du reste ; en « screen », elle éclaire sans
   jamais assombrir, et ne prend aucun clic. */
.fumee {
  position: fixed; inset: 0; z-index: 59;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---- rangs alternés : une photo, une chose dite, et l'on change de côté -- */
.alt-rangs { display: grid; gap: clamp(64px, 9vw, 128px); }
.alt-rang {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.alt-rang--inverse .alt-vue { order: 2; }
.alt-vue { overflow: hidden; border-radius: var(--r-carte); }
.alt-vue img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: var(--photo-filtre);
  transition: transform var(--photo-duree) cubic-bezier(.22, .61, .36, 1);
}
.alt-rang:hover .alt-vue img { transform: scale(var(--photo-zoom)); }
.alt-texte { min-width: 0; position: relative; }
.alt-texte .sur-titre { margin-bottom: 14px; }
.alt-texte h3 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; color: var(--terracotta); margin-bottom: 18px; }
.alt-texte p { color: var(--texte-doux); max-width: 46ch; }
.alt-texte .bouton { margin-top: 12px; }
@media (max-width: 860px) {
  .alt-rang { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .alt-rang--inverse .alt-vue { order: 0; }
}

/* ---- le mot du chef --------------------------------------------------------- */
.chef-corps {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 96px); align-items: center;
}
.chef-vue { margin: 0; overflow: hidden; border-radius: var(--r-carte); }
.chef-vue img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: var(--photo-filtre); }
.chef-texte { min-width: 0; position: relative; }
.chef-trait { width: 56px; height: 1px; margin: 0 0 22px; background: var(--terracotta); }
.chef-texte h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1.05; color: var(--terracotta); }
.chef-role {
  margin: 12px 0 26px;
  font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--oeil);
}
.chef-mot {
  margin: 0 0 22px;
  font: 400 clamp(21px, 2.2vw, 27px)/1.45 var(--serif); color: var(--texte);
  quotes: '«\00a0' '\00a0»';
}
.chef-mot::before { content: open-quote; color: var(--terracotta); }
.chef-mot::after { content: close-quote; color: var(--terracotta); }
.chef-texte p { color: var(--texte-doux); max-width: 52ch; }
@media (max-width: 860px) {
  .chef-corps { grid-template-columns: minmax(0, 1fr); }
  .chef-vue { max-width: 460px; }
}

/* ---- la mosaïque : chaque photo garde son format ------------------------- */
.mos-grille { columns: 3 260px; column-gap: 18px; }
/* inline-block : Safari < 15 coupe encore une figure entre deux colonnes
   malgré break-inside */
.mos-vue {
  position: relative;
  display: inline-block; width: 100%; vertical-align: top;
  margin: 0 0 18px;
  break-inside: avoid;
  overflow: hidden; border-radius: var(--r-carte);
}
.mos-vue img {
  width: 100%; height: auto;
  filter: var(--photo-filtre);
  transition: transform var(--photo-duree) cubic-bezier(.22, .61, .36, 1);
}
.mos-vue:hover img { transform: scale(var(--photo-zoom)); }
.mos-vue figcaption {
  position: absolute; inset: auto 0 0;
  padding: 44px 18px 14px;
  font-size: 13px; line-height: 1.35; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .66));
}
/* sur téléphone, deux colonnes de hauteur libre laissent un trou dès que
   les portraits tombent du même côté : une grille de formats égaux, et la
   dernière photo d'un nombre impair prend toute la largeur */
@media (max-width: 560px) {
  .mos-grille { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mos-vue { display: block; margin: 0; }
  .mos-vue img { aspect-ratio: 4 / 5; object-fit: cover; }
  .mos-vue:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mos-vue:last-child:nth-child(odd) img { aspect-ratio: 16 / 10; }
  .mos-vue figcaption { padding: 30px 10px 9px; font-size: 11.5px; }
}

/* ---- réserver : le téléphone, les heures, l'adresse ----------------------- */
.res-corps {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.res-appel, .res-infos { min-width: 0; }
.res-appel h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.08; color: var(--terracotta); margin-bottom: 18px; }
.res-texte { color: var(--texte-doux); max-width: 46ch; }
.res-tel {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-top: 16px; padding: 18px 30px;
  border-radius: var(--r-carte);
  background: var(--dragee); color: var(--sur-accent, var(--blanc));
  transition: background var(--vif), transform var(--vif), box-shadow var(--vif);
}
.res-tel:hover { background: var(--terracotta); transform: translateY(-2px); }
.res-tel-dit { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.res-tel-num {
  font: 400 clamp(26px, 3vw, 34px)/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.res-liens { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.res-liens a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--texte);
  text-decoration: underline; text-decoration-color: var(--ligne);
  text-underline-offset: 6px;
  transition: color var(--vif), text-decoration-color var(--vif);
}
.res-liens a:hover { color: var(--terracotta); text-decoration-color: var(--terracotta); }
.res-infos { display: grid; gap: 34px; }
.res-bloc h3 {
  font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--oeil); margin-bottom: 8px;
}
.res-bloc .ligne-horaire { padding: 11px 0; font-size: 14.5px; }
.res-adresse { font: 400 21px/1.4 var(--serif); margin: 0 0 6px; }
.res-note { font-size: 13.5px; color: var(--texte-doux); margin: 0; }
.res-carte {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; color: var(--terracotta);
  text-decoration: underline; text-underline-offset: 6px;
}
@media (max-width: 860px) {
  .res-corps { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   PEAU « LUMINOUS » — table du soir, l'or et la lueur
   D'après « Luxury Restaurant Website UI » (Figma Community, CC BY 4.0 —
   voir SOURCES.md) : noir chaud, or, une serif de titrage, la barre en
   verre, l'or tracé dans les angles, les photos arrondies qui rayonnent.
   Refaite à la règle des sites qu'on livre : le nom de la maison en titre,
   des plats nommés avec leurs prix, le téléphone, les heures et l'adresse
   au bout de la page, aucune note ni aucun avis inventé, la galerie en
   couleur. Les rameaux de l'original sont devenus des ornements Art déco
   — Reims s'est reconstruite en Art déco, et c'est le style des maisons de
   champagne : un cadre d'or, des éventails dans ses angles, des filets à
   losange. Tous dessinés ici, posés en masque pour prendre l'or de la
   palette.
   ========================================================================== */

html[data-style="luminous"] {
  --filet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 18'%3E%3Cpath d='M0 7.4H52M0 10.6H52' stroke='%23000' stroke-width='.7'/%3E%3Cpath d='M52 7.4L57 9L52 10.6' fill='none' stroke='%23000' stroke-width='.7'/%3E%3Cpath d='M64 3.2L69.8 9L64 14.8L58.2 9Z'/%3E%3Ccircle cx='72.6' cy='9' r='1.2'/%3E%3C/svg%3E");
  --eventail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M12 120A12 12 0 0 0 0 108' fill='none' stroke='%23000' stroke-width='0.8'/%3E%3Cpath d='M18 120A18 18 0 0 0 0 102' fill='none' stroke='%23000' stroke-width='0.5'/%3E%3Cpath d='M24 120L104 120M23.87 117.49L97.46 109.76M23.48 115.01L95.86 99.62M22.83 112.58L93.2 89.72M21.93 110.24L89.53 80.14M20.78 108L90.07 68M19.42 105.89L79.28 62.4M17.84 103.94L72.83 54.43M16.06 102.16L65.57 47.17M14.11 100.58L57.6 40.72M12 99.22L52 29.93M9.76 98.07L39.86 30.47M7.42 97.17L30.28 26.8M4.99 96.52L20.38 24.14M2.51 96.13L10.24 22.54M0 96L0 16' stroke='%23000' stroke-width='.6'/%3E%3Cpath d='M23.97 118.74L75.9 116.02M23.7 116.25L75.06 108.11M23.18 113.79L100.46 93.08M22.41 111.4L70.95 92.76M21.38 109.1L67.72 85.5M20.13 106.93L63.74 78.61M18.65 104.9L59.06 72.17M16.97 103.03L73.54 46.46M15.1 101.35L47.83 60.94M13.07 99.87L41.39 56.26M10.9 98.62L34.5 52.28M8.6 97.59L27.24 49.05M6.21 96.82L26.92 19.54M3.75 96.3L11.89 44.94M1.26 96.03L3.98 44.1' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M110 120A110 110 0 0 0 0 10' fill='none' stroke='%23000' stroke-width='0.45'/%3E%3Cpath d='M117 120A117 117 0 0 0 0 3' fill='none' stroke='%23000' stroke-width='0.9'/%3E%3Cpath d='M80.26 36.14L83.86 39.74L80.26 43.34L76.66 39.74Z'/%3E%3Ccircle cx='109.63' cy='90.62' r='1.1'/%3E%3Ccircle cx='29.38' cy='10.37' r='1.1'/%3E%3C/svg%3E");
  /* le halo : l'or de la palette, assez faible pour rester une lueur */
  --halo: 0 0 0 1px rgba(var(--accent-rgb), .16), 0 40px 90px -42px rgba(var(--accent-rgb), .5);
}
html[data-style="luminous"] body {
  font-size: 16px; line-height: 1.75;
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(var(--accent-rgb), .06), transparent 70%),
    var(--creme);
}
html[data-style="luminous"] ::selection { background: var(--dragee); color: var(--encre); }
html[data-style="luminous"] h1,
html[data-style="luminous"] h2,
html[data-style="luminous"] h3 { font-weight: 300; letter-spacing: -.005em; font-optical-sizing: auto; }
html[data-style="luminous"] .titre-mots em { font-style: italic; color: var(--terracotta); }

/* ---- en-têtes de section : l'œil-de-perdrix entre deux filets à losange -- */
html[data-style="luminous"] .section { padding: clamp(84px, 10vw, 136px) 0; }
html[data-style="luminous"] .section-tete { max-width: 760px; margin-bottom: clamp(44px, 6vw, 72px); }
html[data-style="luminous"] .section-tete h2,
html[data-style="luminous"] .titre-serif { font-size: clamp(38px, 5.2vw, 72px); line-height: 1.06; color: var(--texte); }
html[data-style="luminous"] .section-tete .intro { font-size: 16px; max-width: 54ch; }
html[data-style="luminous"] .sur-titre {
  gap: 16px; margin-bottom: 18px;
  font: 500 11.5px/1 var(--sans); letter-spacing: .3em;
}
/* le filet se trace depuis le mot vers l'extérieur : le clip se lit dans
   le repère de l'élément, donc le filet retourné part vers la gauche */
html[data-style="luminous"] .sur-titre::before,
html[data-style="luminous"] .sur-titre::after {
  width: 58px; height: 14px;
  background: var(--terracotta);
  -webkit-mask: var(--filet) center / contain no-repeat;
  mask: var(--filet) center / contain no-repeat;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: -webkit-clip-path 1.4s cubic-bezier(.22, .61, .36, 1) .25s, clip-path 1.4s cubic-bezier(.22, .61, .36, 1) .25s;
}
html[data-style="luminous"] .sur-titre::before { transform: scaleX(-1); }
html[data-style="luminous"] .sur-titre.est-la::before,
html[data-style="luminous"] .sur-titre.est-la::after { -webkit-clip-path: inset(0); clip-path: inset(0); }

/* ---- boutons : l'or plein, le verre cerclé d'or --------------------------- */
html[data-style="luminous"] .bouton .lib {
  padding: 16px 32px; border-radius: 999px;
  font: 500 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  background: var(--dragee); color: var(--sur-accent);
  box-shadow: 0 16px 36px -20px rgba(var(--accent-rgb), .7);
}
html[data-style="luminous"] .bouton:hover .lib {
  background: var(--terracotta); color: var(--sur-accent);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .12), 0 18px 44px -16px rgba(var(--accent-rgb), .75);
}
html[data-style="luminous"] .bouton--verre .lib,
html[data-style="luminous"] .bouton--blanc .lib {
  background: rgba(255, 255, 255, .04); color: var(--texte);
  border: 1px solid rgba(var(--accent-rgb), .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: none;
}
html[data-style="luminous"] .bouton--verre:hover .lib,
html[data-style="luminous"] .bouton--blanc:hover .lib {
  background: rgba(var(--accent-rgb), .16); color: var(--texte); border-color: var(--terracotta);
}

/* ---- la barre : la marque à gauche, les liens dans un îlot de verre ------- */
html[data-style="luminous"] .nav-logo .mot {
  font: 400 23px/1 var(--serif); letter-spacing: .34em; text-transform: uppercase;
  padding-right: .34em; color: var(--texte);
}
html[data-style="luminous"][data-nav="rail"] .nav { padding-top: 18px; padding-bottom: 18px; }
html[data-style="luminous"][data-nav="rail"] .nav::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
html[data-style="luminous"][data-nav="rail"] .nav.est-posee,
html[data-style="luminous"][data-nav="rail"] body:not(.a-heros) .nav {
  background: rgba(var(--encre-rgb), .8);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: rgba(var(--accent-rgb), .16);
}
html[data-style="luminous"][data-nav="rail"] .nav-liens {
  margin-left: auto; gap: 2px; padding: 5px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-style="luminous"][data-nav="rail"] .nav-liens a {
  padding: 10px 18px; border-radius: 999px;
  font: 400 14px/1 var(--sans); letter-spacing: .04em; text-transform: none;
  color: var(--texte);
  transition: background var(--vif), color var(--vif);
}
html[data-style="luminous"][data-nav="rail"] .nav-liens a::after { display: none; }
html[data-style="luminous"][data-nav="rail"] .nav-liens a:hover { background: rgba(255, 255, 255, .08); color: var(--texte); }
html[data-style="luminous"][data-nav="rail"] .nav-liens a.actif,
html[data-style="luminous"][data-nav="rail"] .nav-liens a[aria-current="page"] { background: rgba(var(--accent-rgb), .18); color: var(--terracotta); }
html[data-style="luminous"][data-nav="rail"] .nav-action,
html[data-style="luminous"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action {
  min-height: 44px; padding: 0 24px; border-radius: 999px;
  border: 1px solid transparent; background: var(--dragee); color: var(--sur-accent);
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 10px 30px -14px rgba(var(--accent-rgb), .7);
}
html[data-style="luminous"][data-nav="rail"] .nav-action:hover,
html[data-style="luminous"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action:hover {
  background: var(--terracotta); color: var(--sur-accent); border-color: transparent;
}
html[data-style="luminous"] .nav-burger {
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-style="luminous"][data-nav="rail"] .nav-tiroir {
  background: rgba(var(--encre-rgb), .94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom-color: rgba(var(--accent-rgb), .2);
}
html[data-style="luminous"][data-nav="rail"] .nav-tiroir a {
  font: 300 26px/1.1 var(--serif); letter-spacing: 0; text-transform: none;
  border-bottom-color: rgba(var(--accent-rgb), .14);
}
html[data-style="luminous"] .pal-bouton { border-color: rgba(255, 255, 255, .16); border-radius: 999px; }
html[data-style="luminous"] .pal-liste { background: var(--sable); border-color: rgba(var(--accent-rgb), .2); border-radius: 18px; }
html[data-style="luminous"] .pal-choix { border-radius: 12px; }
/* l'index de défilement tomberait sur le filet gauche du cadre */
html[data-style="luminous"] .index-scroll { display: none; }

/* ---- le héros : la photo pleine page, le nom dans sa lueur ----------------
   Le voile n'aplatit pas la photo : un vignettage radial garde la lumière
   au centre, et le bas fond dans le noir de la page plutôt que de s'arrêter
   sur une arête. */
html[data-style="luminous"] .heros {
  margin: 0; border-radius: 0;
  min-height: 100vh; min-height: 100svh;
}
html[data-style="luminous"] .heros-fond::after {
  background:
    radial-gradient(80% 70% at 50% 46%, rgba(0, 0, 0, .06), rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .1) 34%, rgba(0, 0, 0, .4) 74%, var(--creme) 100%);
}
html[data-style="luminous"] .heros-corps { max-width: 900px; padding: 168px 24px 132px; }
/* la lueur derrière le nom : une flamme de bougie, pas un projecteur */
html[data-style="luminous"] .heros-corps::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(940px, 130vw); aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .05) 58%, rgba(var(--accent-rgb), 0) 76%);
  animation: lux-souffle 7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes lux-souffle { from { opacity: .5; } to { opacity: 1; } }
html[data-style="luminous"] .heros-kicker {
  font: 500 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: #FFFFFF; margin-bottom: 22px;
}
html[data-style="luminous"] .heros h1 {
  font-size: clamp(64px, 11.5vw, 176px); line-height: .92; font-weight: 300;
  letter-spacing: .01em; margin-bottom: 22px;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .45);
}
html[data-style="luminous"] .heros-corps .heros-lieu {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  max-width: none; margin: 0 auto 26px;
  font: 500 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: #FFFFFF;
}
html[data-style="luminous"] .heros-lieu::before,
html[data-style="luminous"] .heros-lieu::after {
  content: ''; flex: none; width: 48px; height: 12px;
  background: var(--terracotta);
  -webkit-mask: var(--filet) center / contain no-repeat;
  mask: var(--filet) center / contain no-repeat;
}
html[data-style="luminous"] .heros-lieu::before { transform: scaleX(-1); }
html[data-style="luminous"] .heros-corps > p:not(.heros-lieu) {
  max-width: 36ch; margin: 0 auto 34px;
  font: italic 300 clamp(19px, 1.9vw, 25px)/1.5 var(--serif);
  color: rgba(255, 255, 255, .92);
}
/* le cadre Art déco : un filet d'or qui s'ouvre depuis le centre, puis les
   deux éventails qui s'allument dans ses angles */
html[data-style="luminous"] .heros {
  --cadre: clamp(14px, 2.2vw, 32px);
  --cadre-haut: calc(var(--h-nav, 80px) + clamp(6px, 1vw, 14px));
}
html[data-style="luminous"] .heros-fond::before {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  top: var(--cadre-haut); right: var(--cadre); bottom: var(--cadre); left: var(--cadre);
  border: 1px solid rgba(var(--accent-rgb), .32);
  -webkit-clip-path: inset(50%); clip-path: inset(50%);
  animation: lux-cadre 1.8s cubic-bezier(.65, 0, .35, 1) .3s forwards;
}
@keyframes lux-cadre { to { -webkit-clip-path: inset(0); clip-path: inset(0); } }
html[data-style="luminous"] .heros::before,
html[data-style="luminous"] .heros::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  width: clamp(84px, 11vw, 168px); aspect-ratio: 1;
  background: var(--terracotta); opacity: 0;
  -webkit-mask: var(--eventail) center / contain no-repeat;
  mask: var(--eventail) center / contain no-repeat;
  animation: lux-eventail 1.4s ease 1.5s forwards;
}
/* l'éventail s'ouvre depuis le coin bas-gauche de sa boîte : retourné, il
   loge dans l'angle haut-droit du cadre */
html[data-style="luminous"] .heros::before { left: var(--cadre); bottom: var(--cadre); }
html[data-style="luminous"] .heros::after { right: var(--cadre); top: var(--cadre-haut); transform: rotate(180deg); }
@keyframes lux-eventail { to { opacity: .9; } }
@media (max-width: 720px) {
  html[data-style="luminous"] .heros-corps { padding: 120px 22px 96px; }
  html[data-style="luminous"] .heros h1 { font-size: clamp(58px, 19vw, 96px); margin-bottom: 18px; }
  html[data-style="luminous"] .heros-corps .heros-lieu { gap: 10px; letter-spacing: .24em; font-size: 11px; }
  html[data-style="luminous"] .heros-lieu::before,
  html[data-style="luminous"] .heros-lieu::after { width: 34px; }
  html[data-style="luminous"] .heros-corps > p:not(.heros-lieu) { font-size: 18px; margin-bottom: 26px; }
  html[data-style="luminous"] .heros::before,
  html[data-style="luminous"] .heros::after { width: 72px; }
}
/* l'iPhone SE (320 × 568) : le héros doit tenir dans l'écran, actions comprises */
@media (max-width: 360px) {
  html[data-style="luminous"] .heros-corps { padding: 100px 18px 52px; }
  html[data-style="luminous"] .heros h1 { font-size: 54px; margin-bottom: 12px; }
  html[data-style="luminous"] .heros-corps .heros-lieu { margin-bottom: 16px; }
  html[data-style="luminous"] .heros-corps > p:not(.heros-lieu) { font-size: 16.5px; margin-bottom: 20px; }
  html[data-style="luminous"] .heros-actions .bouton .lib { padding-block: 14px; }
}
@media (max-width: 480px) {
  html[data-style="luminous"] .heros-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  html[data-style="luminous"] .heros-actions .bouton,
  html[data-style="luminous"] .heros-actions .bouton .lib { width: 100%; }
}

/* ---- la bande des pages intérieures ----------------------------------------- */
html[data-style="luminous"] .bande-heros {
  margin: 0; border-radius: 0;
  padding: 196px 24px 88px;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), 0) 70%),
    var(--creme);
  border-bottom: 1px solid rgba(var(--accent-rgb), .14);
}
html[data-style="luminous"] .bande-heros h1 { font-size: clamp(54px, 8vw, 120px); line-height: 1; color: var(--texte); }
html[data-style="luminous"] .bande-heros .sur-titre { color: var(--oeil); }
@media (max-width: 720px) { html[data-style="luminous"] .bande-heros { padding: 136px 20px 56px; } }

/* ---- rangs alternés : la photo rayonne --------------------------------------- */
html[data-style="luminous"] .alt-vue { border-radius: 26px; box-shadow: var(--halo); }
html[data-style="luminous"] .alt-texte h3 { color: var(--texte); font-size: clamp(32px, 3.6vw, 52px); }
html[data-style="luminous"] .alt-texte .sur-titre,
html[data-style="luminous"] .chef-texte .sur-titre { justify-content: flex-start; }
html[data-style="luminous"] .alt-texte .sur-titre::before,
html[data-style="luminous"] .chef-texte .sur-titre::before { display: none; }
html[data-style="luminous"] .alt-texte p { font-size: 16px; }

/* ---- les plats à commander : la carte sombre, le prix à l'or --------------- */
html[data-style="luminous"] .articles { gap: 22px; }
html[data-style="luminous"] .article {
  background: linear-gradient(180deg, var(--sable), var(--creme));
  border: 1px solid rgba(var(--accent-rgb), .12);
  border-radius: 24px; box-shadow: none;
  transition: transform var(--vif), box-shadow var(--lent), border-color var(--vif);
}
html[data-style="luminous"] .article:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), .42);
  box-shadow: 0 34px 70px -34px rgba(var(--accent-rgb), .55);
}
html[data-style="luminous"] .article .visuel { aspect-ratio: 4 / 4.3; margin: 8px 8px 0; border-radius: 17px; }
html[data-style="luminous"] .article .corps { text-align: left; padding: 20px 20px 22px; }
html[data-style="luminous"] .article .nom { font: 400 22px/1.2 var(--serif); color: var(--texte); }
html[data-style="luminous"] .article .desc { margin: 8px 0 0; max-width: none; font-size: 13.5px; line-height: 1.55; }
html[data-style="luminous"] .article .prix {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 18px;
  font: 400 21px/1 var(--serif); color: var(--terracotta);
  font-variant-numeric: lining-nums tabular-nums;
}
html[data-style="luminous"] .article .prix::before { content: ''; flex: 1; height: 1px; background: rgba(var(--accent-rgb), .24); }
html[data-style="luminous"] .article .badge { background: var(--dragee); color: var(--sur-accent); }

/* ---- le chef : le trait qui relie la photo au nom ------------------------- */
html[data-style="luminous"] .chef-vue { border-radius: 26px; box-shadow: var(--halo); }
html[data-style="luminous"] .chef-trait {
  position: relative; height: 1px;
  width: calc(clamp(36px, 6vw, 96px) + 96px);
  margin: 6px 0 28px calc(-1 * clamp(36px, 6vw, 96px));
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .3));
  transform-origin: left center;
}
html[data-style="luminous"] .chef-trait.rev { opacity: 1; transform: scaleX(0); transition: transform 1.3s cubic-bezier(.22, .61, .36, 1) .15s; }
html[data-style="luminous"] .chef-trait.rev.est-la { transform: none; }
html[data-style="luminous"] .chef-trait::before {
  content: ''; position: absolute; left: -4px; top: -3.5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terracotta); box-shadow: 0 0 14px rgba(var(--accent-rgb), .85);
}
html[data-style="luminous"] .chef-texte h2 { font-size: clamp(44px, 6vw, 86px); line-height: 1; color: var(--texte); }
html[data-style="luminous"] .chef-mot { font-style: italic; font-weight: 300; font-size: clamp(22px, 2.3vw, 29px); }
html[data-style="luminous"] .chef-texte p { font-size: 16px; }
@media (max-width: 860px) {
  html[data-style="luminous"] .chef-trait { width: 96px; margin-left: 0; }
}

/* ---- la mosaïque : arrondie, en couleur, le halo au survol ---------------- */
html[data-style="luminous"] .mos-vue {
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .1);
  transition: box-shadow var(--lent);
}
html[data-style="luminous"] .mos-vue:hover { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .4), 0 30px 70px -34px rgba(var(--accent-rgb), .6); }
html[data-style="luminous"] .mos-vue figcaption { font: italic 300 17px/1.35 var(--serif); padding: 56px 20px 16px; }
@media (max-width: 560px) {
  html[data-style="luminous"] .mos-vue { border-radius: 14px; }
  html[data-style="luminous"] .mos-vue figcaption { font-size: 14px; padding: 34px 11px 10px; }
}

/* ---- réserver : le panneau qui luit, un éventail dans deux de ses angles ---- */
html[data-style="luminous"] .res-corps {
  position: relative;
  padding: clamp(32px, 6vw, 80px);
  border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 34px;
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(var(--accent-rgb), .13), rgba(var(--accent-rgb), 0) 62%),
    radial-gradient(60% 80% at 100% 100%, rgba(var(--accent-rgb), .07), rgba(var(--accent-rgb), 0) 60%),
    var(--sable);
}
html[data-style="luminous"] .res-corps::before,
html[data-style="luminous"] .res-corps::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(56px, 7vw, 96px); aspect-ratio: 1;
  background: var(--terracotta); opacity: .5;
  -webkit-mask: var(--eventail) center / contain no-repeat;
  mask: var(--eventail) center / contain no-repeat;
}
html[data-style="luminous"] .res-corps::before { left: 14px; top: 14px; transform: rotate(90deg); }
html[data-style="luminous"] .res-corps::after { right: 14px; bottom: 14px; transform: rotate(-90deg); }
html[data-style="luminous"] .res-appel,
html[data-style="luminous"] .res-infos { position: relative; z-index: 1; }
html[data-style="luminous"] .res-appel .sur-titre { justify-content: flex-start; }
html[data-style="luminous"] .res-appel .sur-titre::before { display: none; }
html[data-style="luminous"] .res-appel h2 { color: var(--texte); font-size: clamp(38px, 5vw, 68px); }
html[data-style="luminous"] .res-texte { font-size: 16px; }
html[data-style="luminous"] .res-tel {
  border-radius: 24px; padding: 18px 34px 20px;
  box-shadow: 0 22px 50px -24px rgba(var(--accent-rgb), .8);
}
html[data-style="luminous"] .res-tel:hover { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .12), 0 22px 50px -20px rgba(var(--accent-rgb), .9); }
html[data-style="luminous"] .res-adresse { font-weight: 300; font-size: 23px; }
html[data-style="luminous"] .ligne-horaire { border-bottom-color: rgba(var(--accent-rgb), .12); }
html[data-style="luminous"] .ligne-horaire .jours { font-weight: 400; }
html[data-style="luminous"] .ligne-horaire .heures { color: var(--texte); font-variant-numeric: lining-nums tabular-nums; }
html[data-style="luminous"] .ligne-horaire .pointilles { border-bottom: 1px dotted rgba(var(--accent-rgb), .32); }
html[data-style="luminous"] .ligne-horaire.est-aujourdhui {
  background: rgba(var(--accent-rgb), .09); border-radius: 12px;
  padding-inline: 12px; box-shadow: none;
}
@media (max-width: 860px) {
  html[data-style="luminous"] .res-corps::before { left: 10px; top: 10px; }
  html[data-style="luminous"] .res-corps::after { right: 10px; bottom: 10px; }
}

/* ---- la carte en liste : rubriques en italique d'or, prix alignés ---------- */
html[data-style="luminous"] .cl-grille { gap: 60px clamp(40px, 6vw, 96px); }
html[data-style="luminous"] .cl-rubrique-nom {
  font: italic 300 clamp(30px, 3vw, 42px)/1.1 var(--serif); letter-spacing: 0; text-transform: none;
  color: var(--terracotta);
  border-bottom: 1px solid rgba(var(--accent-rgb), .24); padding-bottom: 14px;
}
html[data-style="luminous"] .cl-note { font-style: normal; }
html[data-style="luminous"] .cl-ligne { border-bottom-color: rgba(var(--accent-rgb), .1); padding: 17px 0; }
html[data-style="luminous"] .cl-nom { font: 400 clamp(18px, 1.6vw, 21px)/1.3 var(--serif); color: var(--texte); }
html[data-style="luminous"] .cl-conduite { border-bottom: 1px dotted rgba(var(--accent-rgb), .45); }
html[data-style="luminous"] .cl-prix { font: 400 19px/1 var(--serif); color: var(--terracotta); font-variant-numeric: lining-nums tabular-nums; }
html[data-style="luminous"] .cl-desc { font-size: 14px; }
html[data-style="luminous"] .cl-marque { border-color: rgba(var(--accent-rgb), .45); border-radius: 999px; }
html[data-style="luminous"] .cl-photo img { border-radius: 26px; box-shadow: var(--halo); }

/* ---- le pied : la marque au centre, puis les trois choses qu'on cherche ---- */
html[data-style="luminous"] .pied {
  margin: 0; border-radius: 0; text-align: center;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), 0) 70%),
    var(--caramel);
  border-top: 1px solid rgba(var(--accent-rgb), .14);
  padding: 96px max(6%, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(6%, env(safe-area-inset-left));
}
html[data-style="luminous"] .pied-grille {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px; max-width: 980px; margin-inline: auto;
}
html[data-style="luminous"] .pied-marque {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 28px;
}
html[data-style="luminous"] .pied-marque .mot {
  font: 300 42px/1 var(--serif); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase;
  color: var(--texte); margin: 0 0 16px;
}
html[data-style="luminous"] .pied-marque p { font: italic 300 19px/1.5 var(--serif); color: var(--texte-doux); max-width: 40ch; margin: 0 auto; }
html[data-style="luminous"] .pied-social { justify-content: center; margin-top: 26px; }
html[data-style="luminous"] .pied-social a { border-color: rgba(var(--accent-rgb), .35); color: var(--terracotta); }
html[data-style="luminous"] .pied-social a:hover { background: rgba(var(--accent-rgb), .12); border-color: var(--terracotta); }
html[data-style="luminous"] .pied h4 {
  font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--oeil); margin-bottom: 16px;
}
html[data-style="luminous"] .pied ul { justify-items: center; gap: 6px; }
html[data-style="luminous"] .pied ul a { color: var(--texte-doux); font-size: 14.5px; }
html[data-style="luminous"] .pied ul a:hover { color: var(--terracotta); }
html[data-style="luminous"] .pied-bas {
  justify-content: center; gap: 6px 26px;
  border-top-color: rgba(var(--accent-rgb), .12); color: var(--texte-doux);
}
@media (max-width: 760px) {
  html[data-style="luminous"] .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  html[data-style="luminous"] .pied-marque .mot { font-size: 32px; }
}

/* ---- la barre tient ses deux boutons (Couleurs, Décor) jusqu'à 1024 px ------ */
@media (max-width: 1279px) {
  html[data-style="luminous"] .pal-lib { display: none; }
  html[data-style="luminous"] .pal-bouton { padding: 0 11px; }
}

/* ---- petits écrans : la barre tient sur 320 px ------------------------------ */
@media (max-width: 1023px) {
  html[data-style="luminous"][data-nav="rail"] .nav { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 560px) {
  /* le choix des couleurs est une démonstration : sous 560 px il laisse la
     place à l'action qui rapporte, « Réserver » */
  html[data-style="luminous"] .pal,
  html[data-style="luminous"] .dec { display: none; }
  html[data-style="luminous"] .nav-logo .mot { font-size: 19px; letter-spacing: .26em; padding-right: .26em; }
  html[data-style="luminous"][data-nav="rail"] .nav-action,
  html[data-style="luminous"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action { padding: 0 16px; font-size: 11px; letter-spacing: .12em; }
}

/* ---- au doigt : pas de survol qui colle, pas de lévitation ---------------- */
@media (hover: none) {
  html[data-style="luminous"] .article:hover { transform: none; box-shadow: none; }
  html[data-style="luminous"] .alt-rang:hover .alt-vue img,
  html[data-style="luminous"] .mos-vue:hover img { transform: none; }
  html[data-style="luminous"] .bouton:active .lib,
  html[data-style="luminous"] .res-tel:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="luminous"] .heros-corps::before { animation: none; opacity: .8; }
  html[data-style="luminous"] .heros-fond::before { animation: none; -webkit-clip-path: none; clip-path: none; }
  html[data-style="luminous"] .heros::before,
  html[data-style="luminous"] .heros::after { animation: none; opacity: .9; }
}

/* ---- téléphone : deux plats par rang, les heures sous les jours ----------- */
@media (max-width: 1000px) {
  /* la carte passe en une colonne : la photo n'a plus à tenir la hauteur
     de deux rubriques */
  html[data-style="luminous"] .cl-photo img { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  html[data-style="luminous"] .sur-titre { gap: 10px; letter-spacing: .22em; }
  html[data-style="luminous"] .sur-titre::before,
  html[data-style="luminous"] .sur-titre::after { width: 34px; }
  html[data-style="luminous"] .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html[data-style="luminous"] .article { border-radius: 18px; }
  html[data-style="luminous"] .article .visuel { margin: 6px 6px 0; border-radius: 13px; aspect-ratio: 1 / 1; }
  html[data-style="luminous"] .article .corps { padding: 13px 12px 14px; }
  html[data-style="luminous"] .article .nom { font-size: 17px; }
  html[data-style="luminous"] .article .desc { font-size: 12px; }
  html[data-style="luminous"] .article .prix { font-size: 17px; padding-top: 12px; gap: 10px; }
  html[data-style="luminous"] .res-bloc .ligne-horaire { flex-wrap: wrap; row-gap: 2px; }
  html[data-style="luminous"] .res-bloc .ligne-horaire .pointilles { display: none; }
  html[data-style="luminous"] .res-bloc .ligne-horaire .heures { flex-basis: 100%; }
}
@media (max-width: 480px) {
  /* le nom et le prix restent sur la même ligne, seul le pointillé s'efface */
  html[data-style="luminous"] .cl-tete { flex-wrap: nowrap; }
  html[data-style="luminous"] .cl-prix { width: auto; margin: 0 0 0 auto; padding-left: 14px; color: var(--terracotta); }
}

/* ==========================================================================
   LE VOCABULAIRE « TRATTORIA » — ajouté au socle avec la peau du même nom
   Le wordmark en deux couleurs, l'action en deux lignes, la bande de page
   sur photographie, les étapes, la carte des pizzas et son panneau. Rien
   ici ne dépend d'une peau.
   ========================================================================== */

/* ---- le wordmark en deux couleurs (marque.logo) -------------------------- */
.mot em { font-style: normal; color: var(--terracotta); }

/* ---- l'action en deux lignes (nav.action.dit) ---------------------------- */
.nav-action-dit, .nav-action-lib { display: block; }
.nav-action-lib { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* ---- la bande de page sur photographie (bande-heros.photo) ---------------
   Le titre en blanc sur un voile : la photo garde sa couleur, et la
   lisibilité ne dépend pas de ce qu'elle montre. */
.bande-heros--photo { position: relative; overflow: hidden; isolation: isolate; color: #FFFFFF; }
.bande-fond { position: absolute; inset: 0; z-index: -1; }
.bande-fond img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filtre); }
.bande-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .44) 55%, rgba(0, 0, 0, .62));
}
.bande-heros--photo h1 { color: #FFFFFF; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.bande-texte {
  max-width: 48ch; margin: 16px auto 0;
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55;
  color: inherit; opacity: .92;
}

/* ---- les étapes : un pictogramme, un titre, deux lignes ------------------ */
.et-grille {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 3vw, 40px);
}
.et-carte {
  position: relative; text-align: center;
  padding: 34px 26px 30px;
  background: var(--creme); border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
}
.et-icone {
  display: grid; place-items: center;
  width: 88px; height: 88px; margin: 0 auto 18px;
  border-radius: 50%; background: rgba(var(--accent-rgb), .09); color: var(--texte);
}
.et-icone svg {
  width: 50px; height: 50px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.et-num { position: absolute; top: 18px; left: 22px; font: italic 400 16px/1 var(--serif); color: var(--oeil); }
.et-carte h3 { font-size: 21px; line-height: 1.2; margin-bottom: 10px; }
.et-carte p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texte-doux); }

/* ---- la carte des pizzas : la liste, et le panneau où l'on compose --------
   Sur grand écran le panneau reste collé à côté de la liste. Sur téléphone,
   une fois le script là, il devient une feuille qui monte par-dessus ; sans
   script il reste sous la liste, où tous les prix sont déjà écrits. */
.pz-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.pz-bloc + .pz-bloc { margin-top: 56px; }
.pz-rubrique { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.pz-rubrique-note { font-size: 15px; color: var(--texte-doux); margin: 8px 0 0; }
.pz-plats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.pz-choix {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center;
  width: 100%; padding: 10px 18px 10px 10px; text-align: left;
  background: var(--creme); border: 1px solid var(--ligne); border-radius: var(--r-carte);
  transition: border-color var(--vif), box-shadow var(--vif), transform var(--vif);
}
.pz-choix:hover { border-color: rgba(var(--accent-rgb), .55); transform: translateY(-2px); }
.pz-choix[aria-pressed="true"] { border-color: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); }
.pz-vignette { display: block; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--r-carte) * .6); }
.pz-vignette img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filtre); }
.pz-texte { display: grid; gap: 6px; min-width: 0; }
.pz-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font: 400 21px/1.2 var(--serif); }
.pz-badge {
  padding: 5px 9px; border-radius: 999px;
  font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(var(--accent-rgb), .1); color: var(--oeil);
}
.pz-desc { font-size: 15px; line-height: 1.5; color: var(--texte-doux); }
.pz-tarifs { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 2px; font-size: 14px; color: var(--texte-doux); }
.pz-tarif b { font-weight: 700; color: var(--texte); font-variant-numeric: lining-nums tabular-nums; }

.pz-fiche {
  position: sticky; top: calc(var(--h-nav, 72px) + 20px);
  padding: 20px; background: var(--creme);
  border: 1px solid var(--ligne); border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
}
.pz-fermer { display: none; }
.pz-photo { overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--r-carte) * .7); }
.pz-photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filtre); }
.pz-fiche-corps { padding: 24px 8px 6px; }
.pz-fiche-nom { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; margin-bottom: 10px; }
.pz-fiche-desc { font-size: 16px; color: var(--texte-doux); margin-bottom: 26px; }
.pz-composer { margin: 0; }
/* un fieldset en flex : sa légende reste au-dessus, hors du flux des options */
.pz-groupe { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.pz-groupe legend { padding: 0 0 10px; font: 400 22px/1.2 var(--serif); }
.pz-groupe[hidden] { display: none; }
.pz-option {
  flex: 1 1 calc(50% - 22px); min-width: 190px; min-height: 48px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.pz-option[hidden] { display: none; }
/* 16 px : sous ce corps, iOS zoome sur le champ touché */
.pz-option input { flex: none; width: 20px; height: 20px; margin: 0; font-size: 16px; accent-color: var(--dragee); }
.pz-o-lib { flex: 1; font-size: 16px; }
.pz-t-note { font-size: 14px; color: var(--texte-doux); white-space: nowrap; }
.pz-o-prix { font-size: 15px; font-weight: 600; color: var(--texte-doux); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
/* le total : un plateau à part, la quantité d'un côté, le prix de l'autre */
.pz-total {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 20px;
  padding: 16px 18px; border-radius: var(--r-carte); background: var(--sable);
}
.pz-total[hidden] { display: none; }
.pz-qte { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; }
.pz-qte button {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dragee); color: var(--sur-accent, var(--blanc));
  font: 500 22px/1 var(--sans);
  transition: background var(--vif);
}
.pz-qte button:hover { background: var(--terracotta); }
.pz-qte-val { min-width: 2ch; text-align: center; font: 600 20px/1 var(--sans); font-variant-numeric: tabular-nums; }
.pz-total-ligne { grid-column: 2; grid-row: 1; margin: 0; text-align: right; font: 700 28px/1 var(--sans); }
.pz-total-ligne > span {
  display: block; margin-bottom: 6px;
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux);
}
.pz-total-val { font-variant-numeric: lining-nums tabular-nums; }
.pz-resume {
  grid-column: 1 / -1; margin: 0; padding-top: 12px;
  border-top: 1px solid rgba(var(--accent-rgb), .18); font-size: 15px; line-height: 1.45;
}
.pz-resume-lib {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oeil);
}
.pz-commande {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin-top: 14px; padding: 10px 24px; min-height: 64px;
  border-radius: var(--r-champ); text-align: center;
  background: var(--dragee); color: var(--sur-accent, var(--blanc));
  transition: background var(--vif);
}
.pz-commande:hover { background: var(--terracotta); }
.pz-cmd-dit { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.pz-cmd-lib { font: 700 21px/1.15 var(--sans); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pz-note { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--texte-doux); }
.pz-voile { display: none; }
/* avec le script, le total et le téléphone forment un seul plateau, collé au
   bas du panneau pendant qu'on choisit : c'est pour eux qu'on l'a ouvert. Le
   filet crème autour cache ce qui défile dessous. */
.pz-fiche--active { --pz-pied: 20px; }
.pz-fiche.pz-fiche--active .pz-total {
  position: sticky; bottom: calc(var(--pz-pied) + 64px); z-index: 1;
  border-radius: var(--r-carte) var(--r-carte) 0 0;
  box-shadow: 0 -10px 0 0 var(--creme);
}
.pz-fiche.pz-fiche--active .pz-commande {
  position: sticky; bottom: var(--pz-pied); z-index: 1; margin-top: 0; height: 64px;
  border-radius: 0 0 var(--r-carte) var(--r-carte);
  box-shadow: 0 40px 0 0 var(--creme);
}
/* plus haut que l'écran, le panneau défile en lui-même plutôt que de cacher
   son plateau sous le bas de la fenêtre */
@media (min-width: 901px) {
  .pz-fiche--active { max-height: calc(100vh - var(--h-nav, 72px) - 40px); overflow-y: auto; }
}
@media (max-width: 900px) {
  .pz-corps { grid-template-columns: minmax(0, 1fr); }
  .pz-fiche { position: static; }
  .pz-fiche--active {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; top: auto;
    max-height: calc(100% - 40px); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 12px 16px max(18px, env(safe-area-inset-bottom));
    transform: translateY(105%); visibility: hidden;
    transition: transform .42s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .42s;
  }
  .pz-fiche--active.est-ouverte {
    transform: none; visibility: visible;
    transition: transform .42s cubic-bezier(.22, .61, .36, 1), visibility 0s;
  }
  /* la croix reste en haut de la feuille quand on la fait défiler */
  .pz-fiche--active .pz-fermer {
    position: sticky; top: 0; z-index: 2;
    display: grid; place-items: center;
    width: 44px; height: 44px; margin: 0 0 -44px auto;
    border-radius: 50%; background: var(--dragee); color: var(--sur-accent, var(--blanc));
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
  }
  .pz-fermer::before, .pz-fermer::after {
    content: ''; grid-area: 1 / 1; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
    transform: rotate(45deg);
  }
  .pz-fermer::after { transform: rotate(-45deg); }
  .pz-voile {
    display: block; position: fixed; inset: 0; z-index: 69;
    background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .pz-voile.est-la { opacity: 1; pointer-events: auto; }
  html.pz-feuille, html.pz-feuille body { overflow: hidden; }
  .pz-fiche--active .pz-photo { aspect-ratio: 16 / 9; }
  /* au bas de la feuille, le plateau se tient au-dessus de la barre d'accueil */
  .pz-fiche--active { --pz-pied: max(14px, env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .pz-choix { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .pz-option { flex-basis: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-fiche--active, .pz-fiche--active.est-ouverte { transition: none; }
}

/* ==========================================================================
   PEAU « TRATTORIA » — la pizzeria de quartier, tomate et basilic
   D'après « Pizza Restaurant Website » (Figma Community, CC BY 4.0 — voir
   SOURCES.md) : fond blanc et bandes rosées, une didone de titrage
   (Playfair Display) sur une linéale géométrique (Montserrat), le trait
   rouge sous chaque titre, les cartes au liseré rouge, le téléphone en
   bouton dans la barre, le pied charbon. Refaite à la règle des sites qu'on
   livre : aucun avis inventé là où l'original posait cinq étoiles, et le
   panier qui ne menait nulle part devenu une carte où l'on compose sa pizza
   et lit son prix avant d'appeler.
   ========================================================================== */

/* L'échelle : Montserrat a un grand œil, 15 px y lit comme 16 ailleurs —
   rien de ce qu'on lit ne descend dessous ; les étiquettes (capitales
   espacées, « 29 cm ») seules vont de 12 à 14 px. Le rythme : trois respirations de
   section (ample, courante, serrée) et une seule gouttière de grille. */
html[data-style="trattoria"] {
  --i-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
  --t-etiquette: 12.5px;
  --t-petit: 15px;
  --t-corps: clamp(16px, 15.2px + .2vw, 17px);
  --t-chapo: clamp(17px, 15.5px + .4vw, 19px);
  --t-plat: clamp(20px, 18px + .35vw, 23px);
  --t-h3: clamp(26px, 20px + 1vw, 34px);
  --t-h2: clamp(34px, 24px + 2.2vw, 54px);
  --t-h1: clamp(42px, 26px + 4vw, 82px);
  --esp-ample: clamp(88px, 10vw, 144px);
  --esp-section: clamp(76px, 8.5vw, 120px);
  --esp-serre: clamp(56px, 6vw, 88px);
  --esp-tete: clamp(40px, 4.5vw, 64px);
  --esp-grille: clamp(18px, 2.4vw, 32px);
}
html[data-style="trattoria"] body { font-size: var(--t-corps); line-height: 1.7; }
html[data-style="trattoria"] ::selection { background: var(--dragee); color: #FFFFFF; }
html[data-style="trattoria"] h1,
html[data-style="trattoria"] h2,
html[data-style="trattoria"] h3 { font-weight: 700; letter-spacing: -.005em; text-wrap: balance; }
html[data-style="trattoria"] .titre-mots em { font-style: italic; color: var(--dragee); }

/* ---- les têtes de section : centrées, le trait rouge se tire dessous ----- */
html[data-style="trattoria"] .section { padding: var(--esp-section) 0; }
/* les pizzas, l'histoire : la place qu'on leur donne dit ce qui compte */
html[data-style="trattoria"] .section--sable:not(.chef),
html[data-style="trattoria"] .pizzas,
html[data-style="trattoria"] .histoire { padding: var(--esp-ample) 0; }
html[data-style="trattoria"] .etapes:not(.section--sable) { padding: var(--esp-serre) 0 var(--esp-section); }
/* deux bandes de même couleur : la seconde ne double pas le blanc */
html[data-style="trattoria"] .section:not(.section--sable) + .section:not(.section--sable),
html[data-style="trattoria"] .section--sable + .section--sable { padding-top: 0; }
html[data-style="trattoria"] .reservation { padding-bottom: var(--esp-serre); }
html[data-style="trattoria"] .section-tete { max-width: 760px; margin-bottom: var(--esp-tete); }
html[data-style="trattoria"] .section-tete h2,
html[data-style="trattoria"] .titre-serif { font-size: var(--t-h2); line-height: 1.08; color: var(--texte); }
html[data-style="trattoria"] .section-tete h2::after,
html[data-style="trattoria"] .bande-heros h1::after,
html[data-style="trattoria"] .pz-rubrique::after,
html[data-style="trattoria"] .cl-rubrique-nom::after {
  content: ''; display: block;
  width: 100px; height: 4px; margin: 18px auto 0;
  background: var(--dragee);
  transform: scaleX(0); transition: transform .9s cubic-bezier(.22, .61, .36, 1) .35s;
}
html[data-style="trattoria"] .section-tete h2.est-la::after,
html[data-style="trattoria"] .bande-heros h1.est-la::after { transform: none; }
html[data-style="trattoria"] .pz-rubrique::after,
html[data-style="trattoria"] .cl-rubrique-nom::after { width: 56px; height: 3px; margin: 12px 0 0; transform: none; }
html[data-style="trattoria"][data-apparitions="off"] .section-tete h2::after,
html[data-style="trattoria"][data-apparitions="off"] .bande-heros h1::after { transform: none; }
html[data-style="trattoria"] .section-tete .intro { font-size: var(--t-chapo); line-height: 1.6; max-width: 54ch; margin-top: 22px; }
html[data-style="trattoria"] .sur-titre {
  gap: 10px; margin-bottom: 16px;
  font: 600 var(--t-etiquette)/1.2 var(--sans); letter-spacing: .18em; color: var(--terracotta-fonce);
}
html[data-style="trattoria"] .sur-titre::before,
html[data-style="trattoria"] .sur-titre::after { flex: none; width: 18px; height: 2px; background: var(--terracotta-fonce); }
html[data-style="trattoria"] .section-pied { margin-top: var(--esp-tete); }

/* ---- boutons : le rectangle rouge, le contour blanc sur la photo ---------- */
html[data-style="trattoria"] .bouton .lib {
  min-height: 52px; padding: 14px 30px; border-radius: var(--r-champ);
  font: 600 16px/1.3 var(--sans); letter-spacing: .01em;
  background: var(--dragee); color: var(--sur-accent);
  box-shadow: 0 10px 22px -14px rgba(var(--accent-rgb), .9);
}
html[data-style="trattoria"] .bouton:hover .lib { background: var(--terracotta); color: var(--sur-accent); }
html[data-style="trattoria"] .bouton--blanc .lib,
html[data-style="trattoria"] .bouton--verre .lib {
  background: transparent; color: var(--terracotta);
  border: 1.5px solid currentColor; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-style="trattoria"] .bouton--blanc:hover .lib,
html[data-style="trattoria"] .bouton--verre:hover .lib { background: var(--terracotta); border-color: var(--terracotta); color: var(--sur-accent); }
html[data-style="trattoria"] .heros .bouton--blanc .lib,
html[data-style="trattoria"] .heros .bouton--verre .lib { color: #FFFFFF; border-color: rgba(255, 255, 255, .85); }
html[data-style="trattoria"] .heros .bouton--blanc:hover .lib,
html[data-style="trattoria"] .heros .bouton--verre:hover .lib { background: #FFFFFF; border-color: #FFFFFF; color: #1D1D1D; }

/* ---- la barre : blanche, pleine largeur, le téléphone en bouton ----------
   Elle ne flotte jamais sur la photo : elle reste posée, et toutes les
   bascules « par-dessus le héros » de la barre-rail sont reprises ici. */
html[data-style="trattoria"][data-nav="rail"] .nav,
html[data-style="trattoria"][data-nav="rail"] .nav.est-posee,
html[data-style="trattoria"][data-nav="rail"] body:not(.a-heros) .nav {
  padding: 12px clamp(18px, 3vw, 40px);
  background: var(--creme); border-bottom: 1px solid var(--ligne);
}
html[data-style="trattoria"][data-nav="rail"] .nav.est-posee { box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .45); }
html[data-style="trattoria"][data-nav="rail"] .nav::before { display: none; }
html[data-style="trattoria"] .nav-logo .mot,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-logo .mot {
  font: 700 25px/1 var(--sans); letter-spacing: -.01em; color: var(--terracotta-fonce);
}
html[data-style="trattoria"] .nav-logo .mot em { color: var(--terracotta); }
html[data-style="trattoria"][data-nav="rail"] .nav-liens { gap: clamp(18px, 2.6vw, 38px); margin-inline: auto; }
html[data-style="trattoria"][data-nav="rail"] .nav-liens a,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a {
  padding: 8px 0; font: 500 16px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--texte);
}
html[data-style="trattoria"][data-nav="rail"] .nav-liens a:hover,
html[data-style="trattoria"][data-nav="rail"] .nav-liens a.actif,
html[data-style="trattoria"][data-nav="rail"] .nav-liens a[aria-current="page"],
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a:hover,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a.actif,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a[aria-current="page"] { color: var(--oeil); }
html[data-style="trattoria"][data-nav="rail"] .nav-liens a::after,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a::after { height: 2px; background: var(--dragee); }
html[data-style="trattoria"][data-nav="rail"] .nav-action,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action {
  display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px;
  min-height: 50px; padding: 6px 18px 6px 14px;
  border: 0; border-radius: var(--r-champ);
  background: var(--terracotta); color: var(--sur-accent);
  font: 500 14.5px/1.25 var(--sans); letter-spacing: 0; text-transform: none;
  box-shadow: 0 10px 22px -14px rgba(var(--accent-rgb), .9);
  transition: background var(--vif), transform var(--vif);
}
html[data-style="trattoria"][data-nav="rail"] .nav-action:hover,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action:hover {
  background: var(--dragee); color: var(--sur-accent); transform: translateY(-1px);
}
html[data-style="trattoria"] .nav-action::before {
  content: ''; grid-column: 1; grid-row: 1 / span 2;
  width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--i-tel) center / contain no-repeat;
  mask: var(--i-tel) center / contain no-repeat;
}
html[data-style="trattoria"] .nav-action-dit,
html[data-style="trattoria"] .nav-action-lib { grid-column: 2; padding-left: 12px; border-left: 1px solid currentColor; }
html[data-style="trattoria"] .nav-action-dit { font-weight: 600; }
html[data-style="trattoria"] .nav-action-lib { font-size: 13px; }
/* sans les liens, l'enseigne pousse le reste à droite : couleurs, téléphone
   et menu se tiennent ensemble au lieu de flotter au milieu de la barre */
@media (max-width: 1023px) {
  html[data-style="trattoria"][data-nav="rail"] .nav { gap: 12px; }
  html[data-style="trattoria"] .nav-logo { margin-right: auto; }
}
html[data-style="trattoria"][data-nav="rail"] .nav-burger span,
html[data-style="trattoria"][data-nav="rail"] .nav-burger span::before,
html[data-style="trattoria"][data-nav="rail"] .nav-burger span::after,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-burger span,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-burger span::before,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-burger span::after { background: var(--texte); }
html[data-style="trattoria"][data-nav="rail"] .nav.est-ouverte .nav-burger span,
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee).est-ouverte .nav-burger span { background: transparent; }
html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .pal-bouton { color: var(--texte); border-color: var(--ligne); }
html[data-style="trattoria"] .pal-bouton { border-radius: var(--r-champ); }
/* les pastilles de l'index tomberaient sur la photo du héros, à gauche du titre */
html[data-style="trattoria"] .index-scroll { display: none; }
html[data-style="trattoria"] .pal-liste { border-radius: var(--r-carte); }
html[data-style="trattoria"][data-nav="rail"] .nav-tiroir { background: var(--creme); border-bottom-color: var(--ligne); }
html[data-style="trattoria"][data-nav="rail"] .nav-tiroir a {
  font: 600 22px/1.15 var(--serif); letter-spacing: 0; text-transform: none;
  border-bottom-color: var(--ligne);
}
html[data-style="trattoria"][data-nav="rail"] .tiroir-action a { font: 600 16px/1.3 var(--sans); }

/* ---- le héros : sous la barre, la photo voilée, le titre à gauche --------- */
html[data-style="trattoria"] .heros {
  margin: var(--h-nav, 74px) 0 0; border-radius: 0;
  min-height: 78vh; min-height: 78svh;
}
html[data-style="trattoria"] .heros[data-compo="gauche"] .heros-fond::after {
  background:
    linear-gradient(100deg, rgba(20, 16, 14, .82) 0%, rgba(20, 16, 14, .55) 46%, rgba(20, 16, 14, .18) 80%),
    linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, transparent 40%, rgba(0, 0, 0, .4) 100%);
}
html[data-style="trattoria"] .heros-kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font: 600 13px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #FFFFFF;
}
html[data-style="trattoria"] .heros-kicker::before { content: ''; width: 28px; height: 3px; background: var(--dragee); }
html[data-style="trattoria"] .heros h1 {
  font-size: var(--t-h1); line-height: 1.04; margin-bottom: 24px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
html[data-style="trattoria"] .heros-corps p { max-width: 34em; font-size: var(--t-chapo); line-height: 1.6; color: rgba(255, 255, 255, .94); }
html[data-style="trattoria"] .heros-actions { margin-top: 10px; gap: 14px; }
@media (min-width: 721px) {
  html[data-style="trattoria"] .heros[data-compo="gauche"] .heros-corps {
    padding: clamp(64px, 10vh, 120px) clamp(24px, 6vw, 80px) clamp(64px, 10vh, 120px) clamp(28px, 7vw, 100px);
  }
}
@media (max-width: 720px) {
  html[data-style="trattoria"] .heros { min-height: 72vh; min-height: 72svh; }
  html[data-style="trattoria"] .heros-corps { padding: 56px 22px 44px; }
  html[data-style="trattoria"] .heros[data-compo="gauche"] .heros-fond::after {
    background: linear-gradient(180deg, rgba(20, 16, 14, .5) 0%, rgba(20, 16, 14, .62) 50%, rgba(20, 16, 14, .82) 100%);
  }
}
@media (max-width: 480px) {
  html[data-style="trattoria"] .heros-actions { flex-direction: column; align-items: stretch; }
  html[data-style="trattoria"] .heros-actions .bouton,
  html[data-style="trattoria"] .heros-actions .bouton .lib { width: 100%; }
}

/* ---- la bande des pages intérieures : la photo, le titre, le trait -------- */
html[data-style="trattoria"] .bande-heros {
  margin: var(--h-nav, 74px) 0 0; border-radius: 0;
  padding: clamp(80px, 11vw, 148px) 24px;
  background: var(--caramel);
}
html[data-style="trattoria"] .bande-heros h1 { font-size: clamp(44px, 30px + 4vw, 84px); line-height: 1.02; }
html[data-style="trattoria"] .bande-texte { margin-top: 22px; font-size: var(--t-chapo); }
html[data-style="trattoria"] .bande-heros .sur-titre { color: #FFFFFF; }
html[data-style="trattoria"] .bande-heros .sur-titre::before,
html[data-style="trattoria"] .bande-heros .sur-titre::after { background: #FFFFFF; }

/* ---- les pizzas à commander : la carte au liseré rouge --------------------
   La photo d'abord, grande, posée dans la carte comme dans l'original ; le
   nom et le prix sur une ligne, comme sur une ardoise ; les ingrédients
   dessous. Au téléphone, la vignette passe à gauche du nom. */
html[data-style="trattoria"] .articles { gap: var(--esp-grille); }
html[data-style="trattoria"] .article {
  padding: 10px;
  background: var(--creme);
  border: 1px solid rgba(var(--accent-rgb), .28); border-left: 5px solid var(--dragee);
  border-radius: var(--r-carte);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .55);
}
html[data-style="trattoria"] .article:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(var(--accent-rgb), .65); }
html[data-style="trattoria"] .article .visuel { aspect-ratio: 4 / 3; border-radius: calc(var(--r-carte) - 4px); }
html[data-style="trattoria"] .article .corps {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start;
  column-gap: 16px; padding: 20px 12px 12px; text-align: left;
}
html[data-style="trattoria"] .article .nom { font: 700 var(--t-plat)/1.2 var(--serif); }
html[data-style="trattoria"] .article .prix {
  grid-column: 2; grid-row: 1; align-self: baseline; margin: 0;
  font: 700 19px/1.2 var(--sans); color: var(--terracotta-fonce); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
html[data-style="trattoria"] .article .desc {
  grid-column: 1 / -1; margin: 10px 0 0; max-width: none;
  font-size: var(--t-petit); line-height: 1.55; color: var(--texte-doux);
}
/* l'étiquette posée sur le coin de la photo, pas égarée près du prix */
html[data-style="trattoria"] .article .badge {
  top: 22px; left: 22px; z-index: 1; padding: 7px 11px; border-radius: var(--r-champ);
  font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  background: var(--dragee); color: var(--sur-accent);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
}
@media (max-width: 900px) {
  html[data-style="trattoria"] .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  html[data-style="trattoria"] .articles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html[data-style="trattoria"] .article {
    display: grid; grid-template-columns: clamp(96px, 28vw, 120px) minmax(0, 1fr);
    grid-template-areas: "photo nom" "photo prix" "desc desc";
    column-gap: 16px; padding: 8px 8px 16px;
  }
  html[data-style="trattoria"] .article .visuel { grid-area: photo; aspect-ratio: 1; }
  html[data-style="trattoria"] .article .corps { display: contents; }
  html[data-style="trattoria"] .article .nom { grid-area: nom; align-self: end; padding-right: 8px; font-size: 21px; }
  html[data-style="trattoria"] .article .prix { grid-area: prix; align-self: start; margin-top: 8px; font-size: 18px; }
  html[data-style="trattoria"] .article .desc { grid-area: desc; margin: 14px 6px 0 4px; }
  html[data-style="trattoria"] .article .badge { top: 14px; left: 14px; padding: 5px 7px; font-size: 10.5px; letter-spacing: .08em; }
}

/* ---- les étapes : le pictogramme et le numéro en tête, le texte à gauche -- */
html[data-style="trattoria"] .et-grille {
  max-width: none; grid-template-columns: none;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--esp-grille);
}
html[data-style="trattoria"] .et-carte {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icone num" "titre titre" "texte texte";
  align-content: start; text-align: left;
  padding: clamp(26px, 3vw, 40px);
  background: var(--creme); border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: var(--r-carte);
  box-shadow: 0 16px 34px -26px rgba(0, 0, 0, .5);
}
html[data-style="trattoria"] .et-icone {
  grid-area: icone; width: 76px; height: 76px; margin: 0 0 26px;
  background: rgba(var(--accent-rgb), .08); color: var(--terracotta);
}
html[data-style="trattoria"] .et-icone svg { width: 42px; height: 42px; }
html[data-style="trattoria"] .et-num {
  position: static; grid-area: num; justify-self: end;
  font: italic 700 clamp(40px, 3.4vw, 52px)/.9 var(--serif); color: var(--dragee);
}
html[data-style="trattoria"] .et-carte h3 { grid-area: titre; font-size: var(--t-plat); line-height: 1.25; margin-bottom: 10px; }
html[data-style="trattoria"] .et-carte p { grid-area: texte; font-size: 16px; }
@media (max-width: 900px) and (min-width: 701px) {
  /* trois colonnes n'y tiennent plus : une carte par ligne, le pictogramme à
     gauche, le numéro à droite */
  html[data-style="trattoria"] .et-grille { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
  html[data-style="trattoria"] .et-carte {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas: "icone titre num" "icone texte num";
    column-gap: 26px; padding: 28px 32px;
  }
  html[data-style="trattoria"] .et-icone { margin: 0; }
}
@media (max-width: 700px) {
  html[data-style="trattoria"] .et-grille { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html[data-style="trattoria"] .et-carte { padding: 22px 22px 24px; }
  html[data-style="trattoria"] .et-icone { width: 56px; height: 56px; margin-bottom: 16px; }
  html[data-style="trattoria"] .et-icone svg { width: 32px; height: 32px; }
  html[data-style="trattoria"] .et-num { font-size: 34px; }
  html[data-style="trattoria"] .et-carte h3 { margin-bottom: 8px; }
  html[data-style="trattoria"] .et-carte p { font-size: var(--t-petit); }
}

/* ---- le pizzaiolo : la place de l'avis client, mais sa phrase à lui -------
   Une carte en deux : la pâte en pleine hauteur, le nom, le trait rouge, et
   sa phrase dans l'italique de titrage (Montserrat n'a pas d'italique ici). */
html[data-style="trattoria"] .chef-corps {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 0; align-items: stretch;
  max-width: 1080px; padding: 0; overflow: hidden;
  background: var(--creme); border-radius: var(--r-carte);
  box-shadow: 0 28px 56px -36px rgba(0, 0, 0, .55);
}
html[data-style="trattoria"] .chef-vue { position: relative; min-height: 460px; border-radius: 0; }
html[data-style="trattoria"] .chef-vue img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
html[data-style="trattoria"] .chef-texte {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 72px);
}
html[data-style="trattoria"] .chef-texte .sur-titre { order: 1; justify-content: flex-start; }
html[data-style="trattoria"] .chef-texte .sur-titre::after { display: none; }
html[data-style="trattoria"] .chef-texte h2 { order: 2; font-size: var(--t-h3); line-height: 1.1; color: var(--texte); }
html[data-style="trattoria"] .chef-texte .chef-role {
  order: 3; margin: 10px 0 0;
  font-size: var(--t-etiquette); font-weight: 600; letter-spacing: .16em; color: var(--terracotta-fonce);
}
html[data-style="trattoria"] .chef-trait { order: 4; width: 64px; height: 4px; margin: 24px 0 26px; background: var(--dragee); }
html[data-style="trattoria"] .chef-mot { order: 5; margin: 0 0 22px; font: italic 500 clamp(21px, 17px + .8vw, 27px)/1.45 var(--serif); }
html[data-style="trattoria"] .chef-mot::before,
html[data-style="trattoria"] .chef-mot::after { color: var(--dragee); font-weight: 700; }
html[data-style="trattoria"] .chef-texte p:not(.chef-role) { order: 6; margin: 0; font-size: var(--t-corps); }
@media (max-width: 860px) {
  /* le socle passe en une colonne ici ; la carte garde ses deux moitiés
     jusqu'à 700 px, sinon la photo de pâte occupe tout l'écran */
  html[data-style="trattoria"] .chef-corps { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  html[data-style="trattoria"] .chef-vue { max-width: none; }
}
@media (max-width: 700px) {
  html[data-style="trattoria"] .chef-corps { grid-template-columns: minmax(0, 1fr); }
  html[data-style="trattoria"] .chef-vue { min-height: 0; aspect-ratio: 16 / 10; }
  html[data-style="trattoria"] .chef-texte { padding: 30px 24px 34px; }
}

/* ---- rangs : deux photos de même format côte à côte, le texte dessous ------
   Des rangs alternés à deux phrases laissaient de grands blancs à côté de
   photos de tailles inégales ; la paire se lit d'un regard. */
html[data-style="trattoria"] .alt-rangs {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(48px, 5vw, 64px) clamp(28px, 4vw, 56px); align-items: start;
}
html[data-style="trattoria"] .alt-rang { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
html[data-style="trattoria"] .alt-rang--inverse .alt-vue { order: 0; }
html[data-style="trattoria"] .alt-vue { border-radius: var(--r-carte); box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .6); }
html[data-style="trattoria"] .alt-vue img { aspect-ratio: 3 / 2; }
html[data-style="trattoria"] .alt-texte { padding: 30px 12px 0 0; }
html[data-style="trattoria"] .alt-texte h3 { font-size: var(--t-h3); line-height: 1.12; margin-bottom: 14px; color: var(--texte); }
html[data-style="trattoria"] .alt-texte p { font-size: var(--t-corps); max-width: 46ch; }
html[data-style="trattoria"] .alt-texte .sur-titre,
html[data-style="trattoria"] .hist-texte .sur-titre { justify-content: flex-start; }
html[data-style="trattoria"] .alt-texte .sur-titre::after,
html[data-style="trattoria"] .hist-texte .sur-titre::after { display: none; }

/* ---- l'histoire : deux photos qui se chevauchent sur une grille nette, et
   « Depuis 2011 » épinglé au bord de la grande, comme l'« Est. » d'origine */
html[data-style="trattoria"] .hist-vues { order: 2; min-height: 0; aspect-ratio: 1 / 1; }
html[data-style="trattoria"] .hist-vue { border-radius: var(--r-carte); overflow: hidden; }
html[data-style="trattoria"] .hist-vue--1 { width: 76%; height: 74%; }
html[data-style="trattoria"] .hist-vue--2 {
  width: 54%; height: 50%;
  border: 8px solid var(--creme); border-radius: calc(var(--r-carte) + 8px);
  box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .55);
}
html[data-style="trattoria"] .hist-texte h2 { font-size: var(--t-h2); line-height: 1.08; color: var(--texte); }
html[data-style="trattoria"] .hist-texte h2::after { content: ''; display: block; width: 100px; height: 4px; margin-top: 20px; background: var(--dragee); }
html[data-style="trattoria"] .hist-texte p { font-size: var(--t-corps); max-width: 50ch; }
html[data-style="trattoria"] .hist-pastille {
  top: 74%; right: auto; bottom: auto; left: 28px;
  width: auto; height: 96px; margin-top: -48px; padding: 0 26px;
  gap: 8px; border-radius: var(--r-champ);
  background: var(--dragee); color: var(--sur-accent);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .55);
}
html[data-style="trattoria"] .hist-pastille::before { display: none; }
html[data-style="trattoria"] .hist-pastille .pastille-haut,
html[data-style="trattoria"] .hist-pastille .pastille-bas { font: 600 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
html[data-style="trattoria"] .hist-pastille .pastille-valeur { font: 700 42px/1 var(--serif); margin: 0; }
@media (max-width: 860px) {
  html[data-style="trattoria"] .hist-vues { order: 0; min-height: 0; aspect-ratio: 1 / .92; }
  html[data-style="trattoria"] .hist-vue--2 { border-width: 6px; }
  html[data-style="trattoria"] .hist-pastille { left: 16px; height: 78px; margin-top: -39px; padding: 0 18px; }
  html[data-style="trattoria"] .hist-pastille .pastille-valeur { font-size: 32px; }
}

/* ---- la carte des pizzas : le panneau au bandeau rouge ------------------- */
html[data-style="trattoria"] .pz-choix {
  border-color: rgba(var(--accent-rgb), .35); border-left: 5px solid var(--dragee);
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .45);
}
html[data-style="trattoria"] .pz-choix[aria-pressed="true"] { border-color: var(--dragee); box-shadow: 0 0 0 1px var(--dragee), 0 14px 26px -16px rgba(var(--accent-rgb), .6); }
html[data-style="trattoria"] .pz-nom { font: 700 21px/1.2 var(--serif); }
html[data-style="trattoria"] .pz-tarif b { font-size: 16px; color: var(--terracotta-fonce); }
html[data-style="trattoria"] .pz-rubrique { font-size: var(--t-h3); }
html[data-style="trattoria"] .pz-fiche {
  padding: 20px;
  border: 1px solid rgba(var(--accent-rgb), .45); border-top: 7px solid var(--dragee);
  border-radius: 16px; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .5);
}
html[data-style="trattoria"] .pz-fiche-corps { padding: 26px 6px 4px; }
html[data-style="trattoria"] .pz-fiche-nom { font-size: clamp(32px, 2vw + 16px, 42px); }
html[data-style="trattoria"] .pz-groupe legend { font-weight: 700; font-size: 21px; }
/* les tailles en tuiles : un seul choix, qui se voit de loin. Le cadre est
   dessiné par le libellé, frère du bouton : aucun sélecteur parent requis */
html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) { gap: 12px; }
html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-option {
  position: relative; isolation: isolate;
  flex: 1 1 calc(50% - 6px); min-width: 0; min-height: 62px; padding: 10px 16px;
}
html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-o-lib::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 1.5px solid var(--ligne); border-radius: var(--r-carte); background: var(--creme);
  transition: border-color var(--vif), background-color var(--vif);
}
html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-option:hover .pz-o-lib::before { border-color: rgba(var(--accent-rgb), .5); }
html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) input:checked + .pz-o-lib::before {
  border-color: var(--dragee); background: rgba(var(--accent-rgb), .06);
  box-shadow: inset 0 0 0 1px var(--dragee);
}
html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-o-lib { font-weight: 600; line-height: 1.25; }
html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-t-note { display: block; margin-top: 3px; font-weight: 400; }
html[data-style="trattoria"] .pz-o-prix { color: var(--texte); }
html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-o-prix { font-size: 16px; font-weight: 700; }
/* les suppléments en bascules : le nom et le prix sur une ligne, cochés en rouge */
html[data-style="trattoria"] .pz-groupe--supp { gap: 10px; }
html[data-style="trattoria"] .pz-groupe--supp .pz-option {
  position: relative; isolation: isolate;
  flex: 0 1 auto; min-width: 0; min-height: 46px; gap: 10px; padding: 0 16px 0 13px;
}
html[data-style="trattoria"] .pz-groupe--supp .pz-o-lib { flex: none; font-size: 15px; }
html[data-style="trattoria"] .pz-groupe--supp .pz-o-lib::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 1.5px solid var(--ligne); border-radius: var(--r-champ); background: var(--creme);
  transition: border-color var(--vif), background-color var(--vif);
}
html[data-style="trattoria"] .pz-groupe--supp .pz-option:hover .pz-o-lib::before { border-color: rgba(var(--accent-rgb), .5); }
html[data-style="trattoria"] .pz-groupe--supp input:checked + .pz-o-lib::before {
  border-color: var(--dragee); background: rgba(var(--accent-rgb), .06);
  box-shadow: inset 0 0 0 1px var(--dragee);
}
html[data-style="trattoria"] .pz-groupe--supp .pz-o-prix { font-size: 15px; color: var(--texte-doux); }
@media (min-width: 901px) {
  html[data-style="trattoria"] .pz-photo { aspect-ratio: 2 / 1; }
}
/* un écran de portable : la photo passe à côté du nom, pour que tailles,
   suppléments, total et téléphone tiennent ensemble sans faire défiler le
   panneau (sur un grand écran, la grande photo reste) */
@media (min-width: 901px) and (max-height: 1000px) {
  html[data-style="trattoria"] .pz-fiche--active {
    display: grid; grid-template-columns: 168px minmax(0, 1fr);
    grid-template-areas: "photo nom" "photo desc" "form form"; column-gap: 24px; align-content: start;
  }
  html[data-style="trattoria"] .pz-fiche--active .pz-photo { grid-area: photo; aspect-ratio: 1; }
  html[data-style="trattoria"] .pz-fiche--active .pz-fiche-corps { display: contents; }
  html[data-style="trattoria"] .pz-fiche--active .pz-fiche-nom { grid-area: nom; align-self: end; margin: 0 0 8px; }
  html[data-style="trattoria"] .pz-fiche--active .pz-fiche-desc { grid-area: desc; align-self: start; margin: 0; font-size: var(--t-petit); }
  html[data-style="trattoria"] .pz-fiche--active .pz-composer { grid-area: form; margin-top: 24px; }
  html[data-style="trattoria"] .pz-fiche--active .pz-groupe { margin-bottom: 18px; }
  html[data-style="trattoria"] .pz-fiche--active .pz-total { row-gap: 10px; padding: 12px 18px; }
  html[data-style="trattoria"] .pz-fiche--active .pz-resume { padding-top: 10px; }
}
@media (max-width: 900px) {
  /* une photo en bandeau : le premier rang de suppléments reste visible
     au-dessus du plateau quand la feuille s'ouvre */
  html[data-style="trattoria"] .pz-fiche--active .pz-photo { aspect-ratio: 5 / 2; }
  html[data-style="trattoria"] .pz-fiche--active .pz-fiche-corps { padding-top: 18px; }
  html[data-style="trattoria"] .pz-fiche--active .pz-fiche-desc { margin-bottom: 20px; font-size: var(--t-petit); }
  html[data-style="trattoria"] .pz-fiche--active .pz-groupe { margin-bottom: 18px; }
  html[data-style="trattoria"] .pz-fiche--active .pz-total { row-gap: 10px; padding: 12px 16px; }
  html[data-style="trattoria"] .pz-fiche--active .pz-resume { padding-top: 10px; }
}
@media (max-width: 480px) {
  /* deux tuiles de taille côte à côte : le prix passe sous le libellé */
  html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-option {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px;
    flex-basis: calc(50% - 6px); padding: 12px 12px 12px 14px;
  }
  html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-option input { grid-row: 1 / span 2; align-self: center; }
  html[data-style="trattoria"] .pz-groupe:not(.pz-groupe--supp) .pz-o-prix { grid-column: 2; }
  html[data-style="trattoria"] .pz-commande { padding-inline: 14px; column-gap: 12px; }
  html[data-style="trattoria"] .pz-cmd-dit,
  html[data-style="trattoria"] .pz-cmd-lib { padding-left: 12px; }
  html[data-style="trattoria"] .pz-cmd-dit { font-size: 11.5px; letter-spacing: .07em; white-space: nowrap; }
}
/* au téléphone, la ligne de la carte comme la carte de l'accueil : la
   vignette, le nom et les prix en regard, les ingrédients dessous */
@media (max-width: 600px) {
  html[data-style="trattoria"] .pz-choix {
    grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "photo nom" "photo tarifs" "desc desc";
    column-gap: 16px; row-gap: 0; padding: 8px 12px 16px 8px;
  }
  html[data-style="trattoria"] .pz-vignette { grid-area: photo; }
  html[data-style="trattoria"] .pz-texte { display: contents; }
  html[data-style="trattoria"] .pz-nom { grid-area: nom; align-self: end; }
  html[data-style="trattoria"] .pz-tarifs { grid-area: tarifs; align-self: start; margin-top: 8px; }
  html[data-style="trattoria"] .pz-desc { grid-area: desc; margin: 14px 4px 0; }
}
/* les cercles et les cases rouges de l'original, dessinés au lieu du natif */
html[data-style="trattoria"] .pz-option input {
  -webkit-appearance: none; appearance: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 2px solid var(--dragee); border-radius: 50%; background: var(--creme);
}
html[data-style="trattoria"] .pz-option input[type="checkbox"] { border-radius: 3px; }
html[data-style="trattoria"] .pz-option input::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--dragee); transform: scale(0); transition: transform var(--vif);
}
html[data-style="trattoria"] .pz-option input[type="checkbox"]::before { border-radius: 1px; }
html[data-style="trattoria"] .pz-option input:checked::before { transform: none; }
html[data-style="trattoria"] .pz-option input:focus-visible { outline: 2px solid var(--dragee); outline-offset: 3px; }
html[data-style="trattoria"] .pz-total { margin-top: 4px; }
/* le bouton du téléphone, comme celui de la barre : l'icône, le filet, deux lignes */
html[data-style="trattoria"] .pz-commande {
  display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center;
  column-gap: 16px; row-gap: 0; text-align: left;
}
html[data-style="trattoria"] .pz-commande::before {
  content: ''; grid-column: 1; grid-row: 1 / span 2;
  width: 26px; height: 26px; background: currentColor;
  -webkit-mask: var(--i-tel) center / contain no-repeat;
  mask: var(--i-tel) center / contain no-repeat;
}
html[data-style="trattoria"] .pz-cmd-dit,
html[data-style="trattoria"] .pz-cmd-lib { grid-column: 2; padding-left: 16px; border-left: 1px solid currentColor; }
html[data-style="trattoria"] .pz-cmd-dit { padding-bottom: 3px; font-weight: 600; }
@media (max-width: 900px) {
  html[data-style="trattoria"] .pz-fiche--active { border-radius: 20px 20px 0 0; border-bottom: 0; border-left: 0; border-right: 0; }
}

/* ---- la carte en liste : antipasti, dolci, à boire, chaque rubrique sur sa
   fiche ; la photo du milieu prend la hauteur des fiches ---------------------- */
html[data-style="trattoria"] .cl-grille { gap: var(--esp-grille); }
html[data-style="trattoria"] .cl-grille[data-photo] { align-items: stretch; }
html[data-style="trattoria"] .cl-rubrique {
  padding: clamp(26px, 3vw, 40px);
  background: var(--creme); border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: var(--r-carte); box-shadow: 0 16px 34px -28px rgba(0, 0, 0, .5);
}
html[data-style="trattoria"] .section:not(.section--sable) .cl-rubrique { background: var(--sable); border-color: transparent; box-shadow: none; }
html[data-style="trattoria"] .cl-rubrique-nom {
  font: 700 clamp(26px, 20px + .8vw, 32px)/1.15 var(--serif); letter-spacing: 0; text-transform: none;
  color: var(--texte); border: 0; padding-bottom: 0; margin-bottom: 0;
}
html[data-style="trattoria"] .cl-note { margin-top: 16px; font-size: var(--t-petit); font-style: normal; }
html[data-style="trattoria"] .cl-lignes { margin-top: 14px; }
html[data-style="trattoria"] .cl-ligne { border-bottom-color: rgba(var(--accent-rgb), .16); padding: 16px 0; }
html[data-style="trattoria"] .cl-ligne:last-child { padding-bottom: 0; }
html[data-style="trattoria"] .cl-nom { font: 700 19px/1.3 var(--serif); color: var(--texte); }
html[data-style="trattoria"] .cl-conduite { border-bottom: 1px dotted rgba(var(--accent-rgb), .45); }
html[data-style="trattoria"] .cl-prix { font: 700 17px/1.2 var(--sans); color: var(--terracotta-fonce); font-variant-numeric: lining-nums tabular-nums; }
html[data-style="trattoria"] .cl-desc { margin-top: 6px; font-size: var(--t-petit); line-height: 1.5; }
html[data-style="trattoria"] .cl-photo { position: relative; min-height: 380px; overflow: hidden; border-radius: var(--r-carte); }
html[data-style="trattoria"] .cl-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
@media (max-width: 1000px) {
  html[data-style="trattoria"] .cl-grille[data-photo],
  html[data-style="trattoria"] .cl-grille[data-colonnes="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-style="trattoria"] .cl-photo { grid-column: 1 / -1; order: -1; max-width: none; min-height: 0; aspect-ratio: 21 / 9; }
}
@media (max-width: 640px) {
  html[data-style="trattoria"] .cl-grille[data-photo],
  html[data-style="trattoria"] .cl-grille[data-colonnes="2"] { grid-template-columns: minmax(0, 1fr); }
  html[data-style="trattoria"] .cl-photo { aspect-ratio: 16 / 10; }
  html[data-style="trattoria"] .cl-rubrique { padding: 24px 20px 26px; }
}
@media (max-width: 480px) {
  /* le prix reste à droite du nom, comme sur l'ardoise : le nom passe à la
     ligne entre deux mots, jamais au milieu d'un (« Camargu-e ») */
  html[data-style="trattoria"] .cl-tete { flex-wrap: nowrap; column-gap: 14px; }
  html[data-style="trattoria"] .cl-nom { min-width: auto; overflow-wrap: break-word; }
  html[data-style="trattoria"] .cl-prix { width: auto; margin: 0 0 0 auto; color: var(--terracotta-fonce); }
}

/* ---- réserver, commander : le panneau rosé, le téléphone en bouton rouge -- */
html[data-style="trattoria"] .res-corps {
  padding: clamp(32px, 5vw, 72px);
  background: var(--sable); border-radius: var(--r-carte);
  border-left: 6px solid var(--dragee);
}
html[data-style="trattoria"] .res-appel .sur-titre { justify-content: flex-start; }
html[data-style="trattoria"] .res-appel .sur-titre::after { display: none; }
html[data-style="trattoria"] .res-appel h2 { color: var(--texte); font-size: var(--t-h2); margin-bottom: 20px; }
html[data-style="trattoria"] .res-texte { font-size: var(--t-corps); }
html[data-style="trattoria"] .res-tel {
  display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 14px; row-gap: 0;
  margin-top: 22px; padding: 16px 28px 16px 22px; border-radius: var(--r-champ);
  background: var(--terracotta); color: var(--sur-accent);
}
html[data-style="trattoria"] .res-tel-dit { padding-bottom: 6px; font: 600 12px/1.3 var(--sans); letter-spacing: .14em; }
html[data-style="trattoria"] .res-liens { font-size: var(--t-petit); }
html[data-style="trattoria"] .res-infos { gap: 40px; }
html[data-style="trattoria"] .res-bloc h3 { margin-bottom: 10px; font-size: var(--t-etiquette); font-weight: 600; letter-spacing: .16em; }
/* les deux services sur deux lignes, alignées à droite : la ligne ne se
   casse plus au hasard de la largeur (« \n » dans la config) */
html[data-style="trattoria"] .res-bloc .ligne-horaire { padding: 12px 0; font-size: 16px; }
html[data-style="trattoria"] .ligne-horaire .jours { white-space: nowrap; font-weight: 600; }
html[data-style="trattoria"] .ligne-horaire .heures { white-space: pre-line; text-align: right; line-height: 1.55; }
html[data-style="trattoria"] .res-note { font-size: var(--t-petit); line-height: 1.55; }
html[data-style="trattoria"] .res-carte { font-size: var(--t-petit); }
html[data-style="trattoria"] .res-tel::before {
  content: ''; grid-column: 1; grid-row: 1 / span 2;
  width: 26px; height: 26px; background: currentColor;
  -webkit-mask: var(--i-tel) center / contain no-repeat;
  mask: var(--i-tel) center / contain no-repeat;
}
html[data-style="trattoria"] .res-tel-dit,
html[data-style="trattoria"] .res-tel-num { grid-column: 2; padding-left: 14px; border-left: 1px solid currentColor; }
html[data-style="trattoria"] .res-tel:hover { background: var(--dragee); }
html[data-style="trattoria"] .res-tel-num { font: 700 clamp(22px, 2.4vw, 28px)/1.1 var(--sans); }
html[data-style="trattoria"] .res-bloc h3 { color: var(--terracotta-fonce); }
html[data-style="trattoria"] .res-adresse { margin-bottom: 8px; font: 700 22px/1.35 var(--serif); }
html[data-style="trattoria"] .res-carte { color: var(--oeil); }
html[data-style="trattoria"] .ligne-horaire .heures { color: var(--texte); }
html[data-style="trattoria"] .ligne-horaire.est-aujourdhui {
  background: rgba(var(--accent-rgb), .08); border-radius: var(--r-champ);
  padding-inline: 10px; box-shadow: inset 3px 0 0 var(--dragee);
}

/* ---- le pied : charbon, le wordmark, les trois choses qu'on cherche ------ */
html[data-style="trattoria"] .pied {
  margin: 0; border-radius: 0; background: var(--caramel);
  padding: clamp(64px, 8vw, 96px) max(6%, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(6%, env(safe-area-inset-left));
}
html[data-style="trattoria"] .pied-grille { gap: 40px clamp(28px, 4vw, 56px); }
html[data-style="trattoria"] .pied-marque .mot { margin-top: 0; font: 700 28px/1.1 var(--sans); letter-spacing: -.01em; color: #FFFFFF; }
html[data-style="trattoria"] .pied-marque .mot em { color: var(--dragee); }
html[data-style="trattoria"] .pied-marque p { max-width: 32ch; margin-top: 14px; font-size: var(--t-petit); line-height: 1.6; color: rgba(255, 255, 255, .8); }
html[data-style="trattoria"] .pied h4 { margin-bottom: 18px; font: 700 20px/1.3 var(--serif); color: #FFFFFF; }
html[data-style="trattoria"] .pied ul { gap: 12px; }
html[data-style="trattoria"] .pied ul a { font-size: var(--t-petit); color: rgba(255, 255, 255, .82); }
html[data-style="trattoria"] .pied ul a:hover { color: #FFFFFF; }
html[data-style="trattoria"] .pied-social { margin-top: 24px; }
html[data-style="trattoria"] .pied-social a { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; }
html[data-style="trattoria"] .pied-social a:hover { background: var(--dragee); border-color: var(--dragee); }
html[data-style="trattoria"] .pied-bas { margin-top: 56px; border-top-color: rgba(255, 255, 255, .14); font-size: 13.5px; color: rgba(255, 255, 255, .72); }
/* sous 1100 px, l'enseigne prend sa ligne et les trois colonnes respirent */
@media (max-width: 1100px) {
  html[data-style="trattoria"] .pied-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-style="trattoria"] .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  html[data-style="trattoria"] .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* ---- la barre tient sur 320 px : le téléphone devient une pastille -------- */
@media (max-width: 1279px) {
  html[data-style="trattoria"] .pal-lib { display: none; }
  html[data-style="trattoria"] .pal-bouton { padding: 0 11px; }
}
@media (max-width: 560px) {
  html[data-style="trattoria"] .pal { display: none; }
  html[data-style="trattoria"] .nav-logo .mot,
  html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-logo .mot { font-size: 21px; }
  /* le panneau prend toute la largeur : la ligne des heures et le bouton y
     tiennent sans se casser */
  html[data-style="trattoria"] .reservation { padding-bottom: 0; }
  html[data-style="trattoria"] .res-corps { margin-inline: -24px; padding: 40px 22px 44px; border-radius: 0; border-left-width: 5px; }
  html[data-style="trattoria"] .res-tel { display: grid; justify-content: start; padding-inline: 18px 20px; }
  html[data-style="trattoria"] .res-tel-dit { letter-spacing: .1em; }
  html[data-style="trattoria"] .res-bloc .ligne-horaire { gap: 10px; }
}
@media (max-width: 360px) {
  /* sous 360 px, les heures passent sous les jours plutôt que de se casser */
  html[data-style="trattoria"] .res-bloc .ligne-horaire { flex-wrap: wrap; row-gap: 2px; }
  html[data-style="trattoria"] .res-bloc .ligne-horaire .pointilles { display: none; }
  html[data-style="trattoria"] .res-bloc .ligne-horaire .heures { flex-basis: 100%; text-align: left; }
}
@media (max-width: 480px) {
  /* le libellé reste lu par les lecteurs d'écran, la pastille garde 48 px */
  html[data-style="trattoria"][data-nav="rail"] .nav-action,
  html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action {
    grid-template-columns: auto; width: 48px; min-height: 48px; padding: 0; justify-content: center;
  }
  html[data-style="trattoria"] .nav-action-dit,
  html[data-style="trattoria"] .nav-action-lib {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0;
  }
  html[data-style="trattoria"] .nav-action::before { grid-row: auto; }
}
@media (max-width: 360px) {
  html[data-style="trattoria"] .nav-logo .mot,
  html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-logo .mot { font-size: 17.5px; white-space: nowrap; }
  /* toutes les barres, posées ou non : l'enseigne tient sur une ligne */
  html[data-style="trattoria"][data-nav="rail"] .nav,
  html[data-style="trattoria"][data-nav="rail"] .nav.est-posee,
  html[data-style="trattoria"][data-nav="rail"] body:not(.a-heros) .nav { gap: 10px; padding-inline: 14px; }
  html[data-style="trattoria"] .heros-actions .bouton .lib { padding-inline: 16px; font-size: 15px; }
}

/* ---- au doigt : pas de survol qui colle --------------------------------- */
@media (hover: none) {
  html[data-style="trattoria"] .article:hover,
  html[data-style="trattoria"] .pz-choix:hover { transform: none; }
  html[data-style="trattoria"] .bouton:active .lib,
  html[data-style="trattoria"] .pz-commande:active,
  html[data-style="trattoria"] .res-tel:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="trattoria"] .section-tete h2::after,
  html[data-style="trattoria"] .bande-heros h1::after { transform: none; transition: none; }
  /* rien ne se soulève : le survol ne change que le liseré et l'ombre */
  html[data-style="trattoria"] .article:hover,
  html[data-style="trattoria"] .pz-choix:hover,
  html[data-style="trattoria"][data-nav="rail"] .nav-action:hover,
  html[data-style="trattoria"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action:hover { transform: none; }
}

/* ---- sumi : début du bloc (vocabulaire sumi + peau sumi) ---- */
/* ==========================================================================
   LE VOCABULAIRE SUMI — ajouté au socle avec la peau du même nom
   Le mot japonais au-dessus d'un titre, la bande à l'envers de la palette,
   le geste « encre », le mot signé, les rangs encadrés, les fiches et le
   panneau à réserver. Neutres de peau : la peau « sumi » plus bas ne fait
   que les habiller.
   ========================================================================== */

/* ---- le mot japonais (`kanji`) : un ornement, dans la fonte `kanji` ------ */
.kanji {
  display: block;
  margin-bottom: 12px;
  font: 400 17px/1.4 var(--fonte-kanji, var(--serif));
  letter-spacing: .3em;
  color: var(--oeil);
}

/* ---- la bande à l'envers (`fond: "inverse"`) : fond `texte`, texte `creme`.
   Sur une peau sombre c'est la bande crème ; sur une peau claire, la bande
   d'encre. Le couple est celui que le portique mesure déjà (texte/creme). */
.section--inverse { background: var(--texte); color: var(--creme); }
.section--inverse h2,
.section--inverse h3,
.section--inverse .section-tete h2,
.section--inverse .section-tete .intro,
.section--inverse .sur-titre { color: var(--creme); }
/* l'accent poussé vers le texte de la bande : lisible des deux côtés */
.section--inverse .kanji {
  color: var(--creme);
  color: color-mix(in srgb, var(--terracotta) 55%, var(--creme));
}

/* ---- geste de titre : « encre » --------------------------------------------
   Le mot s'écrit de haut en bas, comme un trait de pinceau qui descend : un
   rideau vertical sur chaque mot. Aucun déplacement, plus lent que le lever. */
html[data-geste="encre"] .titre-mots .mot-anim { transform: none; }
html[data-geste="encre"] .titre-mots .mot-masque {
  -webkit-clip-path: inset(-.3em -.2em 100% -.2em);
  clip-path: inset(-.3em -.2em 100% -.2em);
  transition:
    -webkit-clip-path 1.3s cubic-bezier(.65, 0, .35, 1) var(--mot-delai, 0s),
    clip-path 1.3s cubic-bezier(.65, 0, .35, 1) var(--mot-delai, 0s);
}
html[data-geste="encre"] .titre-mots.est-la .mot-masque {
  -webkit-clip-path: inset(-.3em -.2em -.3em -.2em);
  clip-path: inset(-.3em -.2em -.3em -.2em);
}
html[data-geste="encre"][data-apparitions="off"] .titre-mots .mot-masque { -webkit-clip-path: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-geste="encre"] .titre-mots .mot-masque { -webkit-clip-path: none; clip-path: none; transition: none; }
}

/* ---- le mot signé : la promesse sur un fondu, et qui la tient ------------- */
.signature {
  padding: clamp(72px, 9vw, 120px) 0;
  text-align: center;
  background: var(--sable);
  background: linear-gradient(180deg, var(--creme) 0%, color-mix(in srgb, var(--terracotta) 30%, var(--sable)) 100%);
}
.sig-corps { max-width: 780px; }
.signature h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.35; color: var(--texte); margin-bottom: 26px; text-wrap: balance; }
.signature p { max-width: 58ch; margin-inline: auto; }
.sig-signe { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 34px 0 0; }
.sig-nom { font: 400 clamp(34px, 4vw, 46px)/1.1 var(--fonte-signature, var(--serif)); }
.sig-role { font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.sig-action { margin-top: 34px; }

/* ---- rangs encadrés : deux photos dans leur filet, le texte en regard ------ */
.cad-rangs { display: grid; gap: clamp(80px, 11vw, 160px); }
.cad-rang {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 100px); align-items: center;
}
.cad-rang--inverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.cad-rang--inverse .cad-texte { order: 2; }
.cad-texte, .cad-vues { min-width: 0; }
.cad-texte h2, .cad-texte h3 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.3; margin-bottom: 22px; }
.cad-texte .bouton { margin-top: 14px; }
/* le filet : un anneau du fond de la section, puis un trait d'accent — la
   seconde photo cache ainsi proprement la première sous son propre filet */
.cad-vues { position: relative; padding: 9px 9px 18%; --fond-filet: var(--creme); }
.section--inverse .cad-vues { --fond-filet: var(--texte); }
.cad-vue {
  margin: 0; overflow: hidden;
  box-shadow: 0 0 0 7px var(--fond-filet), 0 0 0 8px var(--dragee);
}
.cad-vue img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; filter: var(--photo-filtre); }
.cad-vue--1 { width: 80%; margin-left: auto; }
.cad-vue--2 { position: absolute; left: 9px; bottom: 9px; width: 46%; z-index: 1; }
.cad-vue--2 img { aspect-ratio: 4 / 4.6; }
.cad-rang--inverse .cad-vue--1 { margin-left: 0; margin-right: auto; }
.cad-rang--inverse .cad-vue--2 { left: auto; right: 9px; }
.cad-vues--seule { padding-bottom: 9px; }
.cad-vues--seule .cad-vue--1 { width: 100%; }
@media (max-width: 860px) {
  .cad-rang, .cad-rang--inverse { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cad-rang .cad-texte { order: 2; }
}

/* ---- les fiches : le nom sur son filet, les lignes pratiques ---------------- */
.fi-vue {
  margin: 8px 8px clamp(44px, 6vw, 72px); overflow: hidden;
  box-shadow: 0 0 0 7px var(--creme), 0 0 0 8px var(--dragee);
}
.fi-vue img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; filter: var(--photo-filtre); }
.fi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px clamp(16px, 3vw, 40px); }
.fiche { min-width: 0; padding: clamp(24px, 3vw, 40px); }
.fiche--active { background: var(--sable); }
.fi-nom {
  font-size: 22px; line-height: 1.3;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--dragee);
}
.fi-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.fi-lien {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px;
  font-size: 14px; color: var(--oeil);
  text-decoration: underline; text-underline-offset: 6px;
}

/* ---- le panneau à réserver, posé sur la photo ------------------------------ */
.panneau { position: relative; padding: clamp(64px, 9vw, 120px) 0; background: var(--sable); }
.pan-fond { position: absolute; inset: 0; overflow: hidden; }
.pan-fond img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filtre); }
.pan-fond::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.pan-carte {
  position: relative; max-width: 1000px; margin: 0 auto;
  padding: clamp(36px, 6vw, 76px) clamp(22px, 6vw, 80px);
  background: var(--creme); color: var(--texte);
  display: grid; justify-items: center; text-align: center;
}
.pan-tete { max-width: 620px; }
.pan-tete h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.25; margin-bottom: 18px; }
.pan-texte { margin: 0 auto; max-width: 52ch; }
.pan-appel { margin-top: 30px; display: grid; justify-items: center; gap: 8px; }
.pan-tel {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 36px 20px;
  background: var(--dragee); color: var(--sur-accent, var(--blanc));
  transition: background var(--vif);
}
.pan-tel:hover { background: var(--terracotta); }
.pan-tel-dit { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.pan-tel-num { font: 400 clamp(24px, 3vw, 32px)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pan-liens { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; font-size: 14px; }
.pan-liens a, .pan-carte-lien {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 6px;
}
.pan-infos {
  width: 100%; margin-top: clamp(32px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px clamp(30px, 5vw, 70px); text-align: left;
}
.pan-bloc { min-width: 0; }
.pan-bloc h3 { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; }
.pan-bloc .ligne-horaire { padding: 11px 0; font-size: 14.5px; }
.pan-adresse { font: 400 20px/1.45 var(--serif); margin: 6px 0; }
.pan-note { font-size: 13.5px; margin: 8px 0 0; }

/* ==========================================================================
   PEAU « SUMI » — le comptoir de sushi, l'encre et l'or
   D'après « Website Templete (Zen Sushi Bar) » de TLAB (Figma Community,
   CC BY 4.0 — voir SOURCES.md) : le noir plein, la crème, l'or mat des
   filets, une mincho pour les titres et le texte, une linéale géométrique
   pour l'interface, les photos dans un filet d'or décalé, les boutons blancs
   à double trait, les titres bilingues (le japonais au-dessus du français),
   le fondu noir-or sous le héros, la bande crème, le panneau clair posé sur
   la salle. Refaite pour qui choisit sa table sur son téléphone : des plats
   nommés et leurs prix au deuxième écran, les heures, le numéro qui appelle,
   l'adresse qui ouvre la carte — le formulaire et les cartes cadeaux de
   l'original ont laissé la place au téléphone.
   ========================================================================== */

html[data-style="sumi"] body {
  font: 400 16px/1.9 var(--serif);
  letter-spacing: .015em;
  background: var(--creme);
}
html[data-style="sumi"] ::selection { background: var(--terracotta); color: var(--encre); }
html[data-style="sumi"] h1,
html[data-style="sumi"] h2,
html[data-style="sumi"] h3 { font-weight: 400; letter-spacing: .03em; color: var(--texte); }
html[data-style="sumi"] .titre-mots em { font-style: normal; color: var(--terracotta); }

/* ---- rythme et en-têtes : le japonais au-dessus, le français dessous ----- */
html[data-style="sumi"] .section { padding: clamp(72px, 8.5vw, 124px) 0; }
html[data-style="sumi"] .index-scroll { display: none; }
html[data-style="sumi"] .section-tete { max-width: 760px; margin-bottom: clamp(44px, 5.5vw, 72px); }
html[data-style="sumi"] .section-tete h2,
html[data-style="sumi"] .titre-serif { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.3; color: var(--texte); }
html[data-style="sumi"] .section-tete .intro { font-size: 16px; line-height: 1.85; max-width: 56ch; color: var(--texte-doux); }
html[data-style="sumi"] .kanji {
  margin-bottom: 16px;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.3;
  letter-spacing: .38em;
  color: var(--terracotta);
}
html[data-style="sumi"] .section-tete .kanji,
html[data-style="sumi"] .bande-heros .kanji,
html[data-style="sumi"] .sig-corps .kanji,
html[data-style="sumi"] .pan-tete .kanji { padding-left: .38em; }
html[data-style="sumi"] .sur-titre {
  gap: 14px;
  font: 400 12px/1 var(--sans); letter-spacing: .26em;
}
html[data-style="sumi"] .sur-titre::before,
html[data-style="sumi"] .sur-titre::after { width: 26px; background: var(--dragee); }
/* un mot japonais qui se lit déjà comme un sur-titre : pas de tirets */
html[data-style="sumi"] .kanji + .sur-titre::before,
html[data-style="sumi"] .kanji + .sur-titre::after { display: none; }
html[data-style="sumi"] .kanji.rev { transform: none; transition: opacity 1.6s ease; }
html[data-style="sumi"] .section--inverse { --fond-filet: var(--texte); }
html[data-style="sumi"] .section--inverse .section-tete .intro { color: var(--creme); }
html[data-style="sumi"] .section--inverse .kanji {
  color: var(--creme);
  color: color-mix(in srgb, var(--terracotta) 55%, var(--creme));
}

/* ---- boutons : blancs, à double trait, la mincho pour libellé --------------
   Un trait d'encre à l'intérieur, un filet d'or à l'extérieur (un contour
   décalé : il ne prend aucune place et laisse passer le fond). Au survol le
   bouton passe à l'encre et le trait intérieur à l'or. */
html[data-style="sumi"] .bouton:focus-visible { outline-offset: 6px; }
html[data-style="sumi"] .bouton .lib,
html[data-style="sumi"] .nav-action,
html[data-style="sumi"] .tiroir-action a {
  padding: 15px 34px; border: 0; border-radius: 0;
  background: var(--blanc); color: var(--encre);
  font: 500 14.5px/1.3 var(--serif); letter-spacing: .08em;
  box-shadow: inset 0 0 0 3px var(--blanc), inset 0 0 0 4px var(--encre);
  outline: 1px solid var(--dragee); outline-offset: 2px;
  transition: background .5s ease, color .5s ease, box-shadow .5s ease, outline-color .5s ease;
}
html[data-style="sumi"] .bouton:hover .lib,
html[data-style="sumi"] .nav-action:hover,
html[data-style="sumi"] .tiroir-action a:hover {
  background: var(--encre); color: var(--terracotta);
  box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4px var(--terracotta);
  transform: none;
}
html[data-style="sumi"] .nav-action:focus-visible,
html[data-style="sumi"] .tiroir-action a:focus-visible { outline: 2px solid var(--texte); outline-offset: 3px; }
/* le secondaire : le même dessin, en creux */
html[data-style="sumi"] .bouton--verre .lib,
html[data-style="sumi"] .bouton--blanc .lib {
  background: transparent; color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--texte);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-style="sumi"] .bouton--verre:hover .lib,
html[data-style="sumi"] .bouton--blanc:hover .lib {
  background: var(--texte); color: var(--creme);
  box-shadow: inset 0 0 0 3px var(--texte), inset 0 0 0 4px var(--creme);
}
html[data-style="sumi"] .section--inverse .bouton--verre .lib,
html[data-style="sumi"] .section--inverse .bouton--blanc .lib { color: var(--creme); box-shadow: inset 0 0 0 1px var(--creme); }

/* ---- la barre : la marque en minuscules, les liens dessous, réserver à droite */
html[data-style="sumi"] .nav {
  inset: 0 0 auto; max-width: none; margin: 0; border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "logo pal action" "liens liens action";
  align-items: center; gap: 12px 18px;
  padding: 24px max(clamp(20px, 3.4vw, 48px), env(safe-area-inset-right)) 18px max(clamp(20px, 3.4vw, 48px), env(safe-area-inset-left));
  background: transparent; box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: background var(--lent), border-color var(--lent), padding var(--vif);
}
html[data-style="sumi"] .nav.est-posee {
  background: var(--creme);
  background: color-mix(in srgb, var(--creme) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--ligne);
  box-shadow: none;
}
html[data-style="sumi"] .nav-logo { grid-area: logo; justify-self: start; }
html[data-style="sumi"] .nav-logo .mot {
  font: 400 27px/1 var(--sans); letter-spacing: -.012em; text-transform: lowercase;
  color: var(--texte);
}
html[data-style="sumi"] .nav-liens { grid-area: liens; gap: clamp(20px, 3.2vw, 46px); }
html[data-style="sumi"] .nav-liens a {
  position: relative; padding: 6px 0; border-radius: 0; background: none;
  font: 400 15px/1.2 var(--sans); letter-spacing: .01em; color: var(--texte);
}
html[data-style="sumi"] .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 .5s ease;
}
html[data-style="sumi"] .nav-liens a:hover { color: var(--texte); }
html[data-style="sumi"] .nav-liens a:hover::after,
html[data-style="sumi"] .nav-liens a[aria-current="page"]::after { transform: none; }
html[data-style="sumi"] .nav-liens a.actif,
html[data-style="sumi"] .nav-liens a[aria-current="page"] { background: none; color: var(--oeil); }
html[data-style="sumi"] .pal { grid-area: pal; }
html[data-style="sumi"] .nav-action {
  grid-area: action;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px; font-size: 14px;
  white-space: nowrap;
}
html[data-style="sumi"] .nav-burger { grid-area: burger; border-radius: 0; }
/* posée, la barre tient sur une ligne : elle ne mange pas l'écran */
@media (min-width: 1024px) {
  html[data-style="sumi"] .nav.est-posee {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo liens pal action";
    column-gap: clamp(28px, 4vw, 64px);
    padding-top: 12px; padding-bottom: 12px;
  }
  html[data-style="sumi"] .nav.est-posee .nav-logo .mot { font-size: 23px; }
}
@media (max-width: 1023px) {
  html[data-style="sumi"] .nav {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "logo pal action burger";
    padding-top: 12px; padding-bottom: 12px; column-gap: 10px;
  }
  html[data-style="sumi"] .nav-logo .mot { font-size: 24px; }
  html[data-style="sumi"] .nav-action { min-height: 44px; padding: 0 16px; font-size: 13.5px; letter-spacing: .04em; }
}
/* le choix des couleurs est une démonstration : sur téléphone il laisse la
   place à la marque et à « Réserver » */
@media (max-width: 560px) {
  html[data-style="sumi"] .pal { display: none; }
}
@media (max-width: 380px) {
  html[data-style="sumi"] .heros-kicker { font-size: 11px; letter-spacing: .2em; }
}
/* le menu du téléphone : tout l'écran, les liens au centre dans la mincho */
html[data-style="sumi"] .nav-tiroir {
  inset: var(--h-nav, 68px) 0 0; max-height: none;
  padding: 34px 24px max(40px, env(safe-area-inset-bottom));
  border-radius: 0; box-shadow: none; overflow-y: auto;
  background: var(--creme);
}
html[data-style="sumi"] .nav-tiroir ul { justify-items: center; gap: 4px; }
html[data-style="sumi"] .nav-tiroir a {
  padding: 12px 18px; border-radius: 0; background: none; text-align: center;
  font: 400 25px/1.3 var(--serif); letter-spacing: .04em; color: var(--texte);
}
html[data-style="sumi"] .nav-tiroir a.actif,
html[data-style="sumi"] .nav-tiroir a:hover { background: none; color: var(--oeil); }
html[data-style="sumi"] .tiroir-action { margin-top: 24px; }
html[data-style="sumi"] .nav-tiroir .tiroir-action a {
  padding: 16px 44px; font: 500 16px/1.3 var(--serif); letter-spacing: .08em;
  background: var(--blanc); color: var(--encre);
}
html[data-style="sumi"] .nav-tiroir .tiroir-action a:hover { background: var(--encre); color: var(--terracotta); }
html[data-style="sumi"] .pal-bouton { border-radius: 0; border-color: var(--ligne); font: 400 13px/1 var(--sans); color: var(--texte-doux); }
html[data-style="sumi"] .pal-jeton { border-radius: 0; }
html[data-style="sumi"] .pal-liste { border-radius: 0; background: var(--sable); border-color: var(--ligne); }
html[data-style="sumi"] .pal-choix { border-radius: 0; font-family: var(--sans); }
html[data-style="sumi"] .pal-choix:hover { background: var(--creme); }
html[data-style="sumi"] .toast { border-radius: 0; font-family: var(--sans); }

/* ---- le héros : l'assiette sort du noir, le titre posé sur son bord --------
   La photo n'est pas plein cadre : un masque radial la fond dans le fond de
   page, comme le détourage de l'original — mais avec n'importe quelle photo
   prise sur fond sombre, sans détourage à faire. */
html[data-style="sumi"] .heros {
  margin: 0; border-radius: 0;
  min-height: 100vh; min-height: 100svh;
  justify-content: flex-start;
  background: var(--creme);
}
html[data-style="sumi"] .heros-fond { inset: 0; }
html[data-style="sumi"] .heros-fond img {
  position: absolute; inset: 24vh 0 0; margin: auto;
  width: min(1000px, 72vw); height: min(68vh, 740px);
  object-position: 50% 50%;
  -webkit-mask-image: radial-gradient(closest-side at 50% 44%, #000 50%, rgba(0, 0, 0, .45) 78%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 44%, #000 50%, rgba(0, 0, 0, .45) 78%, transparent 100%);
  opacity: 0; transform: scale(1.06);
  animation: sumi-assiette 2.8s cubic-bezier(.22, .61, .36, 1) .2s forwards;
}
@keyframes sumi-assiette { to { opacity: 1; transform: none; } }
html[data-style="sumi"] .heros-fond::after {
  background: linear-gradient(180deg, var(--creme) 0%, transparent 30%, transparent 64%, var(--creme) 100%);
}
html[data-style="sumi"] .heros-corps {
  max-width: 1180px; width: 100%;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--h-nav, 120px) + clamp(18px, 5vh, 64px)) 24px clamp(34px, 6vh, 72px);
  color: var(--texte);
}
html[data-style="sumi"] .heros-kicker {
  margin-bottom: 18px;
  font: 400 12px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--terracotta);
}
html[data-style="sumi"] .heros h1 {
  font-size: clamp(46px, 6.2vw, 96px); line-height: 1.1; font-weight: 400;
  letter-spacing: .01em; margin-bottom: 0;
  text-shadow: 0 2px 40px rgba(var(--encre-rgb), .55);
}
html[data-style="sumi"] .heros-corps .heros-lieu {
  margin: 16px auto 0;
  font: 400 13px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--texte-doux);
}
html[data-style="sumi"] .heros-corps > p:not(.heros-lieu) {
  margin: auto auto 28px; max-width: 46ch;
  font-size: 17px; line-height: 1.75; color: var(--texte);
  text-shadow: 0 1px 18px rgba(var(--encre-rgb), .8);
}
html[data-style="sumi"] .heros-actions { gap: 22px; }
@media (max-width: 720px) {
  html[data-style="sumi"] .heros-corps { padding: calc(var(--h-nav, 68px) + 34px) 20px 30px; }
  html[data-style="sumi"] .heros h1 { font-size: clamp(40px, 12vw, 60px); }
  html[data-style="sumi"] .heros-fond img { inset: 12vh 0 0; width: 100%; height: 56vh; }
  html[data-style="sumi"] .heros-corps > p:not(.heros-lieu) { font-size: 15.5px; line-height: 1.65; margin-bottom: 22px; }
}
@media (max-width: 480px) {
  html[data-style="sumi"] .heros-actions { flex-direction: column; align-items: stretch; gap: 16px; padding-inline: 4px; }
  html[data-style="sumi"] .heros-actions .bouton,
  html[data-style="sumi"] .heros-actions .bouton .lib { width: 100%; }
}
@media (max-width: 360px) {
  html[data-style="sumi"] .heros-corps { padding-top: calc(var(--h-nav, 68px) + 22px); padding-bottom: 22px; }
  html[data-style="sumi"] .heros h1 { font-size: 38px; }
  html[data-style="sumi"] .heros-corps > p:not(.heros-lieu) { font-size: 14.5px; margin-bottom: 18px; }
  html[data-style="sumi"] .heros-actions .bouton .lib { padding-block: 13px; }
}

/* ---- la bande des pages intérieures : le noir, le japonais, le titre ------ */
html[data-style="sumi"] .bande-heros {
  margin: 0; border-radius: 0;
  padding: calc(var(--h-nav, 120px) + clamp(48px, 7vw, 96px)) 24px clamp(56px, 7vw, 96px);
  background: var(--creme); color: var(--texte);
  border-bottom: 1px solid var(--ligne);
}
html[data-style="sumi"] .bande-heros h1 { font-size: clamp(42px, 6vw, 84px); line-height: 1.1; color: var(--texte); }
html[data-style="sumi"] .bande-heros .sur-titre { color: var(--oeil); }
html[data-style="sumi"] .bande-heros .kanji { font-size: clamp(22px, 2.4vw, 30px); }

/* ---- le mot signé : du noir à l'or, comme sous le héros de l'original ----- */
html[data-style="sumi"] .signature { padding: clamp(64px, 8vw, 120px) 0 clamp(80px, 9vw, 130px); }
html[data-style="sumi"] .signature h2 { font-size: clamp(25px, 2.8vw, 38px); line-height: 1.5; letter-spacing: .06em; }
html[data-style="sumi"] .signature p { color: var(--texte); font-size: 16px; line-height: 2; }
html[data-style="sumi"] .sig-nom { font-size: clamp(38px, 4.4vw, 52px); color: var(--texte); }
html[data-style="sumi"] .sig-role { font-family: var(--sans); color: var(--texte); letter-spacing: .24em; }

/* ---- rangs encadrés --------------------------------------------------------- */
html[data-style="sumi"] .cad-texte h2,
html[data-style="sumi"] .cad-texte h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.5; letter-spacing: .05em; }
html[data-style="sumi"] .cad-texte p { color: var(--texte-doux); }
html[data-style="sumi"] .cad-texte .sur-titre { justify-content: flex-start; }
html[data-style="sumi"] .cad-texte .sur-titre::before { display: none; }
/* la photo se déroule comme un rouleau suspendu, le filet la précède */
html[data-style="sumi"] .cad-vue.rev,
html[data-style="sumi"] .fi-vue.rev { transform: none; transition: opacity 1s ease; }
html[data-style="sumi"] .cad-vue.rev img,
html[data-style="sumi"] .fi-vue.rev img,
html[data-style="sumi"] .article.rev .visuel img {
  -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0);
  transition: -webkit-clip-path 1.5s cubic-bezier(.65, 0, .35, 1) .25s, clip-path 1.5s cubic-bezier(.65, 0, .35, 1) .25s,
              transform var(--photo-duree) cubic-bezier(.22, .61, .36, 1), filter .8s ease;
}
html[data-style="sumi"] .cad-vue.rev.est-la img,
html[data-style="sumi"] .fi-vue.rev.est-la img,
html[data-style="sumi"] .article.rev.est-la .visuel img { -webkit-clip-path: inset(0); clip-path: inset(0); }
html[data-style="sumi"] .cad-vue:hover img { transform: scale(var(--photo-zoom)); }

/* ---- les plats à commander : le cadre d'or, le prix sous le nom ----------- */
html[data-style="sumi"] .articles { gap: clamp(30px, 3vw, 44px) clamp(20px, 2.6vw, 36px); }
html[data-style="sumi"] .article {
  background: none; border-radius: 0; box-shadow: none; overflow: visible;
}
html[data-style="sumi"] .article:hover { transform: none; box-shadow: none; }
html[data-style="sumi"] .article .visuel {
  aspect-ratio: 4 / 4.5; margin: 7px; border-radius: 0;
  box-shadow: 0 0 0 6px var(--fond-filet, var(--creme)), 0 0 0 7px var(--dragee);
  transition: box-shadow .6s ease;
}
html[data-style="sumi"] .article:hover .visuel { box-shadow: 0 0 0 6px var(--fond-filet, var(--creme)), 0 0 0 7px var(--terracotta); }
html[data-style="sumi"] .article .corps { padding: 24px 0 0; text-align: left; }
html[data-style="sumi"] .article .nom { font: 500 19px/1.4 var(--serif); letter-spacing: .03em; color: var(--texte); }
html[data-style="sumi"] .article .desc { margin: 8px 0 0; max-width: none; font-size: 14px; line-height: 1.7; color: var(--texte-doux); }
html[data-style="sumi"] .article .prix {
  margin-top: auto; padding-top: 14px;
  font: 400 16px/1 var(--sans); letter-spacing: .06em; color: var(--oeil);
  font-variant-numeric: lining-nums tabular-nums;
}
html[data-style="sumi"] .article .badge { border-radius: 0; background: var(--encre); color: var(--terracotta); font-family: var(--sans); }
html[data-style="sumi"] .filtres .pilule { border-radius: 0; font-family: var(--sans); }
html[data-style="sumi"] .filtres .pilule.actif { background: var(--texte); color: var(--creme); }

/* ---- la bande crème (fidélité, à emporter) ----------------------------------- */
html[data-style="sumi"] .fidelite-visuel {
  max-width: none; margin: 8px 8px 40px; width: calc(100% - 16px);
  aspect-ratio: 21 / 9; border-radius: 0;
  box-shadow: 0 0 0 7px var(--fond-filet, var(--creme)), 0 0 0 8px var(--dragee);
}
html[data-style="sumi"] .section--inverse .fidelite-visuel { box-shadow: 0 0 0 7px var(--texte), 0 0 0 8px var(--terracotta-fonce); }
html[data-style="sumi"] .fidelite-points { gap: 0; max-width: 880px; margin-bottom: 44px; }
html[data-style="sumi"] .fidelite-points h6 {
  background: none; border: 0; border-radius: 0; padding: 6px 22px;
  font: 400 15px/1.6 var(--serif); color: inherit;
}
html[data-style="sumi"] .fidelite-points h6 + h6 { border-left: 1px solid var(--dragee); }

/* ---- les fiches : l'une en avant sur le gris de l'encre --------------------- */
html[data-style="sumi"] .fi-vue { box-shadow: 0 0 0 7px var(--fond-filet, var(--creme)), 0 0 0 8px var(--dragee); }
html[data-style="sumi"] .fi-nom { font-size: 21px; letter-spacing: .06em; box-shadow: 0 12px 12px -14px rgba(var(--accent-rgb), .6); }
html[data-style="sumi"] .fi-lignes { font: 400 14.5px/1.65 var(--sans); color: var(--texte); letter-spacing: .01em; }
html[data-style="sumi"] .fi-lignes li:first-child { color: var(--oeil); }

/* ---- FAQ : des filets, pas des cartes ----------------------------------------- */
html[data-style="sumi"] .faq { gap: 0; border-top: 1px solid var(--ligne); }
html[data-style="sumi"] .faq-item { background: none; border: 0; border-bottom: 1px solid var(--ligne); border-radius: 0; box-shadow: none; }
html[data-style="sumi"] .faq-item[open] { box-shadow: none; }
html[data-style="sumi"] .faq-item summary { padding: 22px 52px 22px 0; font: 400 18px/1.5 var(--serif); letter-spacing: .02em; }
html[data-style="sumi"] .faq-item summary::after {
  right: 6px; width: 14px; height: 1px; margin-top: 0; border: 0; background: var(--terracotta); transform: none;
}
html[data-style="sumi"] .faq-item summary::before {
  content: ''; position: absolute; right: 12.5px; top: 50%; margin-top: -6.5px;
  width: 1px; height: 14px; background: var(--terracotta);
  transition: transform .4s ease;
}
html[data-style="sumi"] .faq-item[open] summary::after { transform: none; margin-top: 0; }
html[data-style="sumi"] .faq-item[open] summary::before { transform: scaleY(0); }
html[data-style="sumi"] .faq-item summary:hover { color: var(--oeil); }
html[data-style="sumi"] .faq-reponse { padding: 0 0 24px; font-size: 15.5px; line-height: 1.85; }

/* ---- la carte en liste : rubriques sur leur filet, prix à l'or -------------- */
html[data-style="sumi"] .cl-grille { gap: 64px clamp(40px, 6vw, 96px); }
html[data-style="sumi"] .cl-rubrique-nom {
  font: 400 clamp(22px, 2.2vw, 28px)/1.3 var(--serif); letter-spacing: .06em; text-transform: none;
  color: var(--texte);
  border-bottom: 1px solid var(--dragee); padding-bottom: 14px;
}
html[data-style="sumi"] .cl-note { font-style: normal; font-size: 14px; }
html[data-style="sumi"] .cl-ligne { border-bottom-color: var(--ligne); padding: 17px 0; }
html[data-style="sumi"] .cl-nom { font: 500 clamp(17px, 1.5vw, 19px)/1.4 var(--serif); letter-spacing: .02em; color: var(--texte); }
html[data-style="sumi"] .cl-conduite { border-bottom: 1px dotted var(--dragee); }
html[data-style="sumi"] .cl-prix { font: 400 16px/1 var(--sans); letter-spacing: .04em; color: var(--oeil); font-variant-numeric: lining-nums tabular-nums; }
html[data-style="sumi"] .cl-desc { font-size: 14px; line-height: 1.7; }
html[data-style="sumi"] .cl-marque { border-radius: 0; font-family: var(--sans); }
html[data-style="sumi"] .cl-photo { padding: 8px; }
html[data-style="sumi"] .cl-photo img { border-radius: 0; box-shadow: 0 0 0 7px var(--creme), 0 0 0 8px var(--dragee); }

/* ---- le panneau : la carte crème sur la salle ---------------------------------- */
html[data-style="sumi"] .panneau { --fond-filet: var(--texte); }
html[data-style="sumi"] .pan-fond::after { background: rgba(var(--encre-rgb), .38); }
html[data-style="sumi"] .pan-carte { background: var(--texte); color: var(--creme); }
html[data-style="sumi"] .pan-carte h2,
html[data-style="sumi"] .pan-carte h3,
html[data-style="sumi"] .pan-carte .sur-titre { color: var(--creme); }
html[data-style="sumi"] .pan-tete .kanji {
  color: var(--creme);
  color: color-mix(in srgb, var(--terracotta) 55%, var(--creme));
}
html[data-style="sumi"] .pan-tete h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: .06em; }
html[data-style="sumi"] .pan-texte { font-size: 16px; }
html[data-style="sumi"] .pan-tel {
  padding: 18px 40px 20px;
  background: var(--blanc); color: var(--encre);
  box-shadow: inset 0 0 0 3px var(--blanc), inset 0 0 0 4px var(--encre);
  outline: 1px solid var(--encre); outline-offset: 3px;
  transition: background .5s ease, color .5s ease, box-shadow .5s ease;
}

html[data-style="sumi"] .pan-tel:hover {
  background: var(--encre); color: var(--terracotta);
  box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4px var(--terracotta);
}
html[data-style="sumi"] .pan-tel:focus-visible { outline: 2px solid var(--encre); outline-offset: 5px; }
html[data-style="sumi"] .pan-tel-dit { font-family: var(--sans); letter-spacing: .22em; }
html[data-style="sumi"] .pan-tel-num { font-size: clamp(26px, 3vw, 34px); letter-spacing: .04em; }
html[data-style="sumi"] .pan-liens { font-family: var(--sans); }
html[data-style="sumi"] .pan-liens a,
html[data-style="sumi"] .pan-carte-lien { color: var(--creme); text-decoration-color: currentColor; }
html[data-style="sumi"] .pan-bloc h3 { font-family: var(--sans); letter-spacing: .24em; border-bottom: 1px solid currentColor; padding-bottom: 12px; margin-bottom: 4px; }
html[data-style="sumi"] .pan-bloc .ligne-horaire {
  font: 400 14.5px/1.5 var(--sans); color: var(--creme);
  border-bottom-color: var(--creme);
  border-bottom-color: color-mix(in srgb, var(--creme) 16%, transparent);
}

html[data-style="sumi"] .pan-bloc .ligne-horaire .jours { font-weight: 500; }
html[data-style="sumi"] .pan-bloc .ligne-horaire .pointilles { border-bottom: 1px dotted var(--creme); opacity: .35; }
html[data-style="sumi"] .pan-bloc .ligne-horaire .heures { color: var(--creme); font-variant-numeric: lining-nums tabular-nums; }
html[data-style="sumi"] .pan-bloc .ligne-horaire.est-ferme,
html[data-style="sumi"] .pan-bloc .ligne-horaire.est-ferme .heures { color: var(--creme); }
html[data-style="sumi"] .pan-bloc .ligne-horaire.est-aujourdhui {
  background: var(--creme); color: var(--texte);
  border-radius: 0; padding-inline: 12px; box-shadow: none;
}
html[data-style="sumi"] .pan-bloc .ligne-horaire.est-aujourdhui .heures { color: var(--texte); }
html[data-style="sumi"] .pan-bloc .ligne-horaire.est-aujourdhui .pointilles { border-bottom-color: var(--texte); }
html[data-style="sumi"] .pan-bloc .ligne-horaire.est-aujourdhui .jours::after { color: var(--terracotta); }
html[data-style="sumi"] .pan-adresse { font-size: 19px; letter-spacing: .02em; }
html[data-style="sumi"] .pan-note { font-family: var(--sans); }

/* ---- le pied : centré, presque noir -------------------------------------------- */
html[data-style="sumi"] .pied {
  margin: 0; border-radius: 0; text-align: center;
  background: var(--caramel); color: var(--texte);
  padding: clamp(64px, 8vw, 104px) max(6%, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(6%, env(safe-area-inset-left));
}
html[data-style="sumi"] .pied-grille {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px; max-width: 960px; margin-inline: auto;
}
html[data-style="sumi"] .pied-marque {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 18px;
}
html[data-style="sumi"] .pied-marque .mot {
  font: 400 34px/1 var(--sans); letter-spacing: -.012em; text-transform: lowercase;
  color: var(--texte); margin: 0 0 16px;
}
html[data-style="sumi"] .pied-marque p { font: 400 15.5px/1.85 var(--serif); color: var(--texte-doux); max-width: 46ch; margin: 0 auto; }
html[data-style="sumi"] .pied-social { justify-content: center; gap: 6px; margin-top: 22px; }
html[data-style="sumi"] .pied-social a { border: 0; border-radius: 0; color: var(--texte); }
html[data-style="sumi"] .pied-social a:hover { background: none; color: var(--terracotta); }
html[data-style="sumi"] .pied-social svg { width: 19px; height: 19px; }
html[data-style="sumi"] .pied h4 {
  font: 400 11.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--oeil); margin-bottom: 14px;
}
html[data-style="sumi"] .pied ul { justify-items: center; gap: 0; }
html[data-style="sumi"] .pied ul a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 14.5px/1.5 var(--sans); color: var(--texte);
}
html[data-style="sumi"] .pied ul a:hover { color: var(--terracotta); }
html[data-style="sumi"] .pied-bas {
  justify-content: center; gap: 6px 28px; margin-top: 48px;
  border-top-color: var(--ligne); color: var(--texte-doux);
  font: 400 12.5px/1.6 var(--sans);
}
@media (max-width: 760px) {
  html[data-style="sumi"] .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---- la bande à l'envers : la peau pèse plus lourd que le socle, on y revient */
html[data-style="sumi"] .section--inverse h2,
html[data-style="sumi"] .section--inverse h3,
html[data-style="sumi"] .section--inverse .section-tete h2,
html[data-style="sumi"] .section--inverse .sur-titre { color: var(--creme); }

/* ---- les heures hors du panneau ------------------------------------------------ */
html[data-style="sumi"] .ligne-horaire { font-family: var(--sans); border-bottom-color: var(--ligne); }
html[data-style="sumi"] .ligne-horaire .pointilles { border-bottom: 1px dotted var(--dragee); }
html[data-style="sumi"] .ligne-horaire.est-aujourdhui { background: var(--sable); border-radius: 0; box-shadow: none; }

/* ---- au doigt, et sans mouvement ----------------------------------------------- */
@media (hover: none) {
  html[data-style="sumi"] .cad-vue:hover img,
  html[data-style="sumi"] .article:hover .visuel img { transform: none; }
  html[data-style="sumi"] .bouton:active .lib,
  html[data-style="sumi"] .pan-tel:active,
  html[data-style="sumi"] .nav-action:active { background: var(--encre); color: var(--terracotta); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="sumi"] .heros-fond img { animation: none; opacity: 1; transform: none; }
  html[data-style="sumi"] .cad-vue.rev img,
  html[data-style="sumi"] .fi-vue.rev img,
  html[data-style="sumi"] .article.rev .visuel img { -webkit-clip-path: none; clip-path: none; transition: none; }
}
html[data-style="sumi"][data-apparitions="off"] .cad-vue img,
html[data-style="sumi"][data-apparitions="off"] .fi-vue img,
html[data-style="sumi"][data-apparitions="off"] .article .visuel img { -webkit-clip-path: none; clip-path: none; }

/* ---- téléphone ------------------------------------------------------------------- */
@media (max-width: 860px) {
  html[data-style="sumi"] .cad-vues { padding-bottom: 22%; }
}
@media (max-width: 560px) {
  html[data-style="sumi"] .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  html[data-style="sumi"] .article .visuel { margin: 5px; box-shadow: 0 0 0 4px var(--fond-filet, var(--creme)), 0 0 0 5px var(--dragee); }
  html[data-style="sumi"] .article .corps { padding-top: 16px; }
  html[data-style="sumi"] .article .nom { font-size: 16px; }
  html[data-style="sumi"] .article .desc { font-size: 13px; line-height: 1.6; }
  html[data-style="sumi"] .article .prix { font-size: 15px; }
  html[data-style="sumi"] .fidelite-points { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  html[data-style="sumi"] .fidelite-points h6 + h6 { border-left: 0; border-top: 1px solid var(--dragee); }
  html[data-style="sumi"] .fidelite-visuel { aspect-ratio: 4 / 3; }
  html[data-style="sumi"] .fi-vue img { aspect-ratio: 16 / 9; }
  html[data-style="sumi"] .pan-bloc .ligne-horaire { flex-wrap: wrap; row-gap: 2px; }
  html[data-style="sumi"] .pan-bloc .ligne-horaire .pointilles { display: none; }
  html[data-style="sumi"] .pan-bloc .ligne-horaire .heures { flex-basis: 100%; }
  html[data-style="sumi"] .pan-tel { padding-inline: 26px; }
}
@media (max-width: 480px) {
  html[data-style="sumi"] .cl-tete { flex-wrap: nowrap; }
  html[data-style="sumi"] .cl-prix { width: auto; margin: 0 0 0 auto; padding-left: 14px; }
}

/* ---- sumi : fin du bloc ---- */

/* ==========================================================================
   LE VOCABULAIRE DU COMPTOIR — ajouté au socle avec la peau « ristretto »
   Le héros en diaporama, le mot d'accueil entre deux gravures, les cartes
   « bon à savoir » à pictogramme. Neutres de peau : la peau « ristretto »
   plus bas ne fait que les habiller.
   ========================================================================== */

/* ---- diaporama : deux à cinq photos en fondu, sans JavaScript -------------
   Six secondes par photo, 1,4 s de fondu. Chaque photo arrive PAR-DESSUS la
   précédente, qui reste pleine dessous jusqu'à être couverte : le fondu ne
   passe jamais par le noir. Les pourcentages des images-clés dépendent du
   nombre de photos, d'où un jeu par effectif (2 à 5). La première photo a
   un retard négatif : elle est pleine dès la première image (LCP). */
.diaporama {
  position: relative; overflow: hidden;
  min-height: 92vh;
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--encre); color: #FFFFFF;
}
.diapo-fond { position: absolute; inset: 0; }
.diapo-vue { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.diapo-vue:first-child { opacity: 1; }
.diapo-vue img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, 50% 50%);
  filter: var(--photo-filtre);
}
.diapo-fond::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .06) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%);
}
.diapo-corps {
  position: relative; z-index: 4;
  width: min(1180px, calc(100% - 48px)); margin-inline: auto;
  padding: 150px 0 120px;
}
.diapo-corps h1 {
  font-size: clamp(42px, 6.4vw, 92px); line-height: 1.02;
  max-width: 12ch; margin-bottom: 20px;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .45);
}
.diapo-kicker, .diapo-lieu { margin: 0 0 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.diapo-texte { max-width: 44ch; font-size: 16px; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.diapo-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.diaporama[data-n="2"] .diapo-vue { animation: diapo-fondu-2 12s linear infinite both; }
.diaporama[data-n="3"] .diapo-vue { animation: diapo-fondu-3 18s linear infinite both; }
.diaporama[data-n="4"] .diapo-vue { animation: diapo-fondu-4 24s linear infinite both; }
.diaporama[data-n="5"] .diapo-vue { animation: diapo-fondu-5 30s linear infinite both; }
.diaporama[data-n="2"] .diapo-vue img { animation: diapo-zoom-2 12s linear infinite both; }
.diaporama[data-n="3"] .diapo-vue img { animation: diapo-zoom-3 18s linear infinite both; }
.diaporama[data-n="4"] .diapo-vue img { animation: diapo-zoom-4 24s linear infinite both; }
.diaporama[data-n="5"] .diapo-vue img { animation: diapo-zoom-5 30s linear infinite both; }
.diaporama[data-n="2"] .diapo-trait::after { animation: diapo-trait-2 12s linear infinite both; }
.diaporama[data-n="3"] .diapo-trait::after { animation: diapo-trait-3 18s linear infinite both; }
.diaporama[data-n="4"] .diapo-trait::after { animation: diapo-trait-4 24s linear infinite both; }
.diaporama[data-n="5"] .diapo-trait::after { animation: diapo-trait-5 30s linear infinite both; }
/* après les raccourcis ci-dessus, qui remettraient le retard à zéro */
.diaporama[data-n] .diapo-vue,
.diaporama[data-n] .diapo-vue img,
.diaporama[data-n] .diapo-trait::after { animation-delay: calc(var(--i, 0) * 6s - 1.4s); }
@keyframes diapo-fondu-2 { 0% { opacity: 0; z-index: 2; } 11.67% { opacity: 1; z-index: 2; } 50% { opacity: 1; z-index: 1; } 61.67% { opacity: 1; z-index: 1; } 61.8%, 100% { opacity: 0; z-index: 0; } }
@keyframes diapo-fondu-3 { 0% { opacity: 0; z-index: 2; } 7.78% { opacity: 1; z-index: 2; } 33.33% { opacity: 1; z-index: 1; } 41.11% { opacity: 1; z-index: 1; } 41.2%, 100% { opacity: 0; z-index: 0; } }
@keyframes diapo-fondu-4 { 0% { opacity: 0; z-index: 2; } 5.83% { opacity: 1; z-index: 2; } 25% { opacity: 1; z-index: 1; } 30.83% { opacity: 1; z-index: 1; } 30.9%, 100% { opacity: 0; z-index: 0; } }
@keyframes diapo-fondu-5 { 0% { opacity: 0; z-index: 2; } 4.67% { opacity: 1; z-index: 2; } 20% { opacity: 1; z-index: 1; } 24.67% { opacity: 1; z-index: 1; } 24.8%, 100% { opacity: 0; z-index: 0; } }
@keyframes diapo-zoom-2 { 0% { transform: scale(1.08); } 61.67%, 100% { transform: scale(1); } }
@keyframes diapo-zoom-3 { 0% { transform: scale(1.08); } 41.11%, 100% { transform: scale(1); } }
@keyframes diapo-zoom-4 { 0% { transform: scale(1.08); } 30.83%, 100% { transform: scale(1); } }
@keyframes diapo-zoom-5 { 0% { transform: scale(1.08); } 24.67%, 100% { transform: scale(1); } }
@keyframes diapo-trait-2 { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 50.1%, 100% { transform: scaleX(0); } }
@keyframes diapo-trait-3 { 0% { transform: scaleX(0); } 33.33% { transform: scaleX(1); } 33.43%, 100% { transform: scaleX(0); } }
@keyframes diapo-trait-4 { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 25.1%, 100% { transform: scaleX(0); } }
@keyframes diapo-trait-5 { 0% { transform: scaleX(0); } 20% { transform: scaleX(1); } 20.1%, 100% { transform: scaleX(0); } }
/* la pause : une vraie case à cocher (clavier, lecteur d'écran), cachée
   derrière son étiquette dessinée en bouton */
.diapo-pause {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
  font-size: 16px;
}
.diapo-pause:checked ~ .diapo-fond .diapo-vue,
.diapo-pause:checked ~ .diapo-fond .diapo-vue img,
.diapo-pause:checked ~ .diapo-points .diapo-trait::after { animation-play-state: paused; }
.diapo-points {
  position: absolute; z-index: 5; left: 0; right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.diapo-traits { display: flex; gap: 8px; }
.diapo-trait {
  position: relative; overflow: hidden;
  width: 34px; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .32);
}
.diapo-trait::after {
  content: ''; position: absolute; inset: 0;
  background: #FFFFFF;
  transform: scaleX(0); transform-origin: left center;
}
.diapo-bouton {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  cursor: pointer;
}
.diapo-bouton::before {
  content: ''; box-sizing: border-box;
  width: 10px; height: 12px;
  border-left: 3px solid #FFFFFF; border-right: 3px solid #FFFFFF;
}
.diapo-pause:checked ~ .diapo-points .diapo-bouton::before {
  width: 0; height: 0;
  border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #FFFFFF;
}
.diapo-pause:focus-visible ~ .diapo-points .diapo-bouton { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.diapo-lib {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 720px) {
  .diaporama { min-height: 88vh; min-height: 88svh; justify-content: flex-end; }
  .diapo-corps { width: auto; margin: 0; padding: 112px 22px 78px; }
  .diapo-fond::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .08) 26%, rgba(0, 0, 0, .5) 56%, rgba(0, 0, 0, .9) 100%);
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .diaporama { min-height: 460px; }
  .diapo-corps { padding-top: 96px; padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .diapo-vue, .diapo-vue img, .diapo-trait::after { animation: none !important; }
  .diapo-vue:not(:first-child) { opacity: 0; }
  .diapo-points { display: none; }
}

/* ---- le mot d'accueil entre deux gravures -------------------------------- */
.pre-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
  align-items: center; gap: 28px;
}
.pre-milieu { min-width: 0; text-align: center; }
.pre-milieu h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; color: var(--terracotta); margin-bottom: 18px; }
.pre-texte { max-width: 56ch; margin: 0 auto; font-size: 16px; }
.pre-action { margin-top: 24px; }
.pre-orne { display: block; min-width: 0; }
@media (max-width: 900px) {
  .pre-corps { grid-template-columns: minmax(0, 1fr); }
  .pre-orne { display: none; }
}

/* ---- bon à savoir : une carte, un pictogramme, une réponse --------------- */
.ats-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.ats-carte {
  min-width: 0;
  padding: 26px 24px 24px;
  border: 1px solid var(--ligne); border-radius: var(--r-carte);
  background: var(--sable);
}
.ats-picto { display: block; width: 52px; height: 52px; margin-bottom: 18px; color: var(--terracotta); }
.ats-titre { font-size: 21px; line-height: 1.2; margin-bottom: 10px; }
.ats-carte p { margin: 0; font-size: 14.5px; color: var(--texte-doux); }
.ats-lien {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; margin-top: 8px;
  font-size: 14px; color: var(--oeil);
}
.ats-lien::after {
  content: ''; width: 36px; height: 1px; background: currentColor;
  transition: width var(--vif);
}
.ats-lien:hover::after { width: 56px; }

/* ==========================================================================
   PEAU « RISTRETTO » — le comptoir, cuivre sur noir
   D'après « cafe website » d'Azizi Design (Figma Community, CC BY 4.0 —
   voir SOURCES.md) : noir d'espresso, cuivre, une seule famille (Inter),
   tout en italique grasse ; panneaux brun espresso aux angles de 15 px,
   photos à l'ombre décalée, cadres de cuivre dans les vignettes, pointillés
   entre le plat et son prix, gravures de grains et de rameaux de caféier,
   pied cuivre plein. Refaite à la règle des sites livrés : le nom de la
   maison en titre, les plats nommés avec leurs prix, le téléphone, les
   heures et l'adresse là où l'original posait un formulaire, ce qu'on doit
   savoir avant de venir là où il posait « What we provide ». Les gravures
   sont dessinées ici et posées en masque : elles prennent le cuivre de la
   palette. Mouvement : les mots arrivent en biais, le long de l'italique.
   ========================================================================== */

html[data-style="ristretto"] {
  --ris-ombre: 10px 6px 10px rgba(0, 0, 0, .38);
  --ris-rameau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 300' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M84 292C110 210 150 140 226 30' stroke-width='2.2'/%3E%3Cpath d='M92 268Q105 197 30 167Q21 236 92 268M105 234Q163 263 209 206Q152 180 105 234M121 201Q138 145 80 114Q66 168 121 201M139 167Q182 194 223 153Q180 127 139 167M160 130Q177 89 135 61Q120 102 160 130M185 92Q215 114 247 86Q217 65 185 92M208 56Q222 27 193 6Q181 34 208 56'/%3E%3Cpath d='M92 268L30 167M72 235L80 211M72 235L47 231M61 217L69 193M61 217L36 214M50 200L58 176M50 200L25 196M105 234L209 206M139 225L158 238M139 225L149 204M157 220L176 233M157 220L167 199M175 215L194 228M175 215L185 194M121 201L80 114M108 173L116 154M108 173L88 167M100 157L109 139M100 157L80 152M93 142L102 123M93 142L73 137M139 167L223 153M166 162L180 174M166 162L176 146M181 160L195 172M181 160L190 144M196 157L210 169M196 157L205 141M160 130L135 61M152 108L160 94M152 108L137 102M147 96L155 82M147 96L132 90M143 84L151 70M143 84L128 78M185 92L247 86M205 90L215 99M205 90L213 79M216 89L226 98M216 89L224 77M227 88L237 97M227 88L235 76M208 56L193 6M203 40L209 30M203 40L193 35M201 31L207 21M201 31L190 26M198 22L204 13M198 22L188 18' stroke-width='.9'/%3E%3Ccircle cx='104' cy='222' r='9'/%3E%3Ccircle cx='116' cy='231' r='9'/%3E%3Ccircle cx='125' cy='219' r='9'/%3E%3Ccircle cx='159' cy='144' r='9'/%3E%3Ccircle cx='165' cy='158' r='9'/%3E%3Ccircle cx='118' cy='180' r='9'/%3E%3C/svg%3E");
  --ris-grains: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 300' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(-28 70 60)'%3E%3Cellipse cx='70' cy='60' rx='24' ry='34'/%3E%3Cpath d='M70 29C52 50 88 70 70 91'/%3E%3C/g%3E%3Cg transform='rotate(32 150 78)'%3E%3Cellipse cx='150' cy='78' rx='21' ry='30'/%3E%3Cpath d='M150 51C134 69 166 87 150 105'/%3E%3C/g%3E%3Cg transform='rotate(14 92 150)'%3E%3Cellipse cx='92' cy='150' rx='26' ry='36'/%3E%3Cpath d='M92 117C72 139 112 161 92 183'/%3E%3C/g%3E%3Cg transform='rotate(-42 168 168)'%3E%3Cellipse cx='168' cy='168' rx='19' ry='27'/%3E%3Cpath d='M168 144C154 160 182 176 168 192'/%3E%3C/g%3E%3Cg transform='rotate(48 60 236)'%3E%3Cellipse cx='60' cy='236' rx='22' ry='31'/%3E%3Cpath d='M60 208C44 227 76 245 60 264'/%3E%3C/g%3E%3Cg transform='rotate(-12 140 252)'%3E%3Cellipse cx='140' cy='252' rx='20' ry='28'/%3E%3Cpath d='M140 227C125 244 155 260 140 277'/%3E%3C/g%3E%3C/svg%3E");
  --ris-brin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 40Q31 21 9 23Q16 41 38 40M42 38Q61 38 67 17Q48 18 42 38'/%3E%3Cpath d='M38 40L9 23M27 33L25 26M27 33L20 36M20 30L18 22M20 30L13 32M42 38L67 17M51 30L58 31M51 30L52 23M57 25L64 26M57 25L57 19' stroke-width='.8'/%3E%3Cg transform='rotate(-24 27 58)'%3E%3Cellipse cx='27' cy='58' rx='11' ry='15'/%3E%3Cpath d='M27 46C19 54 35 62 27 70'/%3E%3C/g%3E%3Cg transform='rotate(22 53 58)'%3E%3Cellipse cx='53' cy='58' rx='10' ry='14'/%3E%3Cpath d='M53 47C46 54 60 62 53 69'/%3E%3C/g%3E%3C/svg%3E");
  --ris-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(30 20 20)'%3E%3Cellipse cx='20' cy='20' rx='11' ry='16'/%3E%3Cpath d='M20 7C12 15 28 25 20 33'/%3E%3C/g%3E%3C/svg%3E");
  --ris-tasse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 200' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='100' cy='100' r='94'/%3E%3Ccircle cx='100' cy='100' r='82' stroke-width='.9'/%3E%3Ccircle cx='100' cy='100' r='60' stroke-width='2.2'/%3E%3Ccircle cx='100' cy='100' r='52' stroke-width='1.2'/%3E%3Cpath d='M158 88h18a12 12 0 0 1 0 24h-18' stroke-width='2.2'/%3E%3Cpath d='M100 136C66 116 58 88 76 78c12-6 21 1 24 12 3-11 12-18 24-12 18 10 10 38-24 58zM100 124C78 110 74 92 85 86c7-3 13 1 15 8 2-7 8-11 15-8 11 6 7 24-15 38zM100 58v40' stroke-width='1.6'/%3E%3Cpath d='M30 140c10 18 26 30 46 36M58 30c-14 6-24 14-32 26' stroke-width='.9'/%3E%3C/svg%3E");
  --ris-vapeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 76c-8-12 8-20 0-32s8-20 0-32M30 70c-8-12 8-20 0-32s8-20 0-30M46 76c-8-12 8-20 0-32s8-20 0-32'/%3E%3C/svg%3E");
}
html[data-style="ristretto"] body { font-size: 16px; line-height: 1.68; }
html[data-style="ristretto"] ::selection { background: var(--dragee); color: #FFFFFF; }
html[data-style="ristretto"] :focus-visible { outline-color: var(--dragee); }
html[data-style="ristretto"] h1,
html[data-style="ristretto"] h2,
html[data-style="ristretto"] h3 { font-style: italic; font-weight: 800; letter-spacing: -.02em; }
html[data-style="ristretto"] .titre-mots em { font-style: italic; color: var(--terracotta); }
html[data-style="ristretto"] .contenant { width: min(1240px, calc(100% - 48px)); }
html[data-style="ristretto"] .index-scroll { display: none; }

/* ---- le mouvement : en biais, le long de l'italique ---------------------- */
html[data-style="ristretto"] .titre-mots .mot-anim { transform: translate3d(-.2em, 112%, 0) skewX(-12deg); }
html[data-style="ristretto"] .titre-mots.est-la .mot-anim { transform: none; }
html[data-style="ristretto"] .rev:not(.titre-mots) { transform: translate3d(-16px, 24px, 0); }
html[data-style="ristretto"] .est-revele .rev,
html[data-style="ristretto"] .rev.est-la { transform: none; }

/* ---- en-têtes : le sur-titre en italique cuivre, un trait dessous -------- */
html[data-style="ristretto"] .section { padding: clamp(76px, 9vw, 124px) 0; }
html[data-style="ristretto"] .section-tete { max-width: 760px; margin-bottom: clamp(40px, 5vw, 60px); }
html[data-style="ristretto"] .section-tete h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; font-weight: 900; color: var(--texte); }
html[data-style="ristretto"] h2.titre-mots { text-wrap: balance; }
html[data-style="ristretto"] .section-tete .intro { font-style: italic; font-size: 17px; max-width: 56ch; }
html[data-style="ristretto"] .sur-titre {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font: italic 600 clamp(17px, 1.5vw, 20px)/1.2 var(--sans);
  letter-spacing: 0; text-transform: none;
  color: var(--oeil);
}
html[data-style="ristretto"] .sur-titre::before { display: none; }
html[data-style="ristretto"] .sur-titre::after {
  width: 44px; height: 2px; border-radius: 2px; background: var(--dragee);
  transform: scaleX(0); transition: transform 1s cubic-bezier(.22, .61, .36, 1) .3s;
}
html[data-style="ristretto"] .sur-titre.est-la::after { transform: none; }
html[data-style="ristretto"] .chef-texte .sur-titre,
html[data-style="ristretto"] .res-appel .sur-titre { align-items: flex-start; }
html[data-style="ristretto"] .chef-texte .sur-titre::after,
html[data-style="ristretto"] .res-appel .sur-titre::after { transform-origin: left center; }
html[data-style="ristretto"] .section-pied { margin-top: 48px; }

/* ---- boutons : le cuivre plein, ou le cercle de cuivre ------------------- */
html[data-style="ristretto"] .bouton .lib {
  padding: 15px 30px; border-radius: 999px;
  border: 1.5px solid var(--dragee);
  background: var(--dragee); color: var(--sur-accent);
  font: italic 700 14px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  box-shadow: none;
}
html[data-style="ristretto"] .bouton:hover .lib {
  background: var(--terracotta-fonce); border-color: var(--terracotta-fonce);
  color: var(--sur-accent);
  transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(0, 0, 0, .35);
}
html[data-style="ristretto"] .bouton--verre .lib,
html[data-style="ristretto"] .bouton--blanc .lib {
  background: transparent; color: var(--texte);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-style="ristretto"] .diaporama .bouton--verre .lib { color: #FFFFFF; }
html[data-style="ristretto"] .bouton--verre:hover .lib,
html[data-style="ristretto"] .bouton--blanc:hover .lib {
  background: var(--dragee); border-color: var(--dragee); color: var(--sur-accent);
}

/* ---- la barre : toujours d'espresso, la marque en italique noire --------- */
html[data-style="ristretto"] .nav-logo svg { width: 36px; height: 36px; color: var(--terracotta); }
html[data-style="ristretto"] .nav-logo .mot {
  font: italic 900 25px/1 var(--sans); letter-spacing: .01em; text-transform: uppercase;
  color: #FFFFFF;
}
html[data-style="ristretto"][data-nav="rail"] .nav { padding-top: 16px; padding-bottom: 16px; }
html[data-style="ristretto"][data-nav="rail"] .nav.est-posee,
html[data-style="ristretto"][data-nav="rail"] body:not(.a-heros) .nav {
  background: rgba(var(--encre-rgb), .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(var(--accent-rgb), .32);
  padding-top: 11px; padding-bottom: 11px;
}
html[data-style="ristretto"][data-nav="rail"] .nav-liens { gap: clamp(18px, 2.4vw, 36px); margin-left: auto; margin-right: 12px; }
html[data-style="ristretto"][data-nav="rail"] .nav-liens a,
html[data-style="ristretto"][data-nav="rail"] .nav-liens a.actif,
html[data-style="ristretto"][data-nav="rail"] .nav-liens a[aria-current="page"],
html[data-style="ristretto"][data-nav="rail"] .nav-liens a:hover {
  padding: 8px 0; color: #FFFFFF;
  font: 800 13.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
html[data-style="ristretto"][data-nav="rail"] .nav-liens a::after,
html[data-style="ristretto"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-liens a::after {
  height: 2px; bottom: -2px; border-radius: 2px; background: var(--dragee);
}
html[data-style="ristretto"][data-nav="rail"] .nav-liens a[aria-current="page"]::after { transform: scaleX(1); }
html[data-style="ristretto"][data-nav="rail"] .nav-action,
html[data-style="ristretto"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action {
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--dragee); background: var(--dragee); color: var(--sur-accent);
  font: italic 700 13px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase;
}
html[data-style="ristretto"][data-nav="rail"] .nav-action:hover,
html[data-style="ristretto"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action:hover {
  background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); color: var(--sur-accent);
}

html[data-style="ristretto"][data-nav="rail"] .nav-burger span,
html[data-style="ristretto"][data-nav="rail"] .nav-burger span::before,
html[data-style="ristretto"][data-nav="rail"] .nav-burger span::after { width: 24px; height: 3px; background: #FFFFFF; }
html[data-style="ristretto"][data-nav="rail"] .nav-burger span::before { top: -8px; }
html[data-style="ristretto"][data-nav="rail"] .nav-burger span::after { top: 8px; }
html[data-style="ristretto"][data-nav="rail"] .nav.est-ouverte .nav-burger span { background: transparent; }
html[data-style="ristretto"][data-nav="rail"] .nav.est-ouverte .nav-burger span::before { transform: translateY(8px) rotate(45deg); }
html[data-style="ristretto"][data-nav="rail"] .nav.est-ouverte .nav-burger span::after { transform: translateY(-8px) rotate(-45deg); }
html[data-style="ristretto"][data-nav="rail"] .nav-tiroir {
  background: rgba(var(--encre-rgb), .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: rgba(var(--accent-rgb), .32);
}
html[data-style="ristretto"][data-nav="rail"] .nav-tiroir a,
html[data-style="ristretto"][data-nav="rail"] .nav-tiroir a.actif,
html[data-style="ristretto"][data-nav="rail"] .nav-tiroir a:hover,
html[data-style="ristretto"][data-nav="rail"] .tiroir-action a {
  color: #FFFFFF; border-bottom-color: rgba(var(--accent-rgb), .22);
  font: italic 800 24px/1.1 var(--sans); letter-spacing: -.01em; text-transform: none;
}
html[data-style="ristretto"][data-nav="rail"] .nav-tiroir a.actif { box-shadow: inset 3px 0 0 var(--dragee); padding-left: 14px; }
html[data-style="ristretto"] .pal-bouton,
html[data-style="ristretto"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .pal-bouton {
  color: #FFFFFF; border-color: rgba(255, 255, 255, .3);
  font: italic 600 13px/1 var(--sans);
}
html[data-style="ristretto"] .pal-bouton:hover { color: #FFFFFF; border-color: var(--dragee); }
html[data-style="ristretto"] .pal-liste {
  background: rgba(var(--encre-rgb), .97); border-color: rgba(var(--accent-rgb), .35);
  border-radius: var(--r-carte);
}
html[data-style="ristretto"] .pal-choix,
html[data-style="ristretto"] .pal-choix[aria-pressed="true"] { color: #FFFFFF; border-radius: 10px; }
html[data-style="ristretto"] .pal-choix:hover { background: rgba(255, 255, 255, .08); }
html[data-style="ristretto"] .pal-choix[aria-pressed="true"] { background: rgba(var(--accent-rgb), .28); }
@media (max-width: 1279px) {
  html[data-style="ristretto"] .pal-lib { display: none; }
  html[data-style="ristretto"] .pal-bouton { padding: 0 11px; }
}
@media (max-width: 1023px) {
  html[data-style="ristretto"][data-nav="rail"] .nav { padding-top: 11px; padding-bottom: 11px; }
}
@media (max-width: 560px) {
  /* le choix des couleurs est une démonstration : sur téléphone il laisse
     la place à l'action qui compte, « Réserver » */
  html[data-style="ristretto"] .pal { display: none; }
  html[data-style="ristretto"] .nav-logo svg { width: 30px; height: 30px; }
  html[data-style="ristretto"] .nav-logo .mot { font-size: 21px; }
  html[data-style="ristretto"][data-nav="rail"] .nav-action,
  html[data-style="ristretto"][data-nav="rail"] body.a-heros .nav:not(.est-posee) .nav-action { padding: 0 16px; font-size: 12px; }
}

/* ---- le héros : le nom en capitales italiques, le cuivre en filet -------- */
html[data-style="ristretto"] .diaporama {
  min-height: 100vh;
  min-height: 100svh;
}
html[data-style="ristretto"] .diapo-fond::after {
  background:
    linear-gradient(100deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .52) 38%, rgba(0, 0, 0, .06) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, .3) 78%, var(--creme) 100%);
}
html[data-style="ristretto"] .diapo-corps { width: min(1240px, calc(100% - 48px)); padding: 150px 0 130px; }
html[data-style="ristretto"] .diapo-kicker {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
  font: italic 900 clamp(14px, 1.3vw, 17px)/1.2 var(--sans); letter-spacing: .04em;
}
html[data-style="ristretto"] .diapo-kicker::before {
  content: ''; flex: none; width: 40px; height: 3px; border-radius: 3px; background: var(--dragee);
}
html[data-style="ristretto"] .diapo-corps h1 {
  max-width: none; margin-bottom: 22px;
  font: italic 800 clamp(84px, 13vw, 196px)/.9 var(--sans);
  letter-spacing: -.035em; text-transform: uppercase;
}
html[data-style="ristretto"] .diapo-texte {
  max-width: 34ch;
  font: italic 400 clamp(18px, 1.6vw, 22px)/1.5 var(--sans);
}
html[data-style="ristretto"] .diapo-actions { margin-top: 32px; }
html[data-style="ristretto"] .diapo-trait { width: 40px; }
html[data-style="ristretto"] .diapo-trait::after { background: var(--dragee); }
@media (max-width: 720px) {
  html[data-style="ristretto"] .diaporama { min-height: 92vh; min-height: 92svh; }
  html[data-style="ristretto"] .diapo-corps { width: auto; padding: 112px 22px 84px; }
  html[data-style="ristretto"] .diapo-fond::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .06) 24%, rgba(0, 0, 0, .52) 54%, rgba(0, 0, 0, .9) 86%, var(--creme) 100%);
  }
  html[data-style="ristretto"] .diapo-corps h1 { font-size: clamp(72px, 25vw, 112px); margin-bottom: 16px; }
  html[data-style="ristretto"] .diapo-kicker { font-size: 13.5px; gap: 10px; }
  html[data-style="ristretto"] .diapo-kicker::before { width: 26px; }
  html[data-style="ristretto"] .diapo-texte { font-size: 17px; }
  html[data-style="ristretto"] .diapo-actions { margin-top: 24px; }
}
@media (max-width: 480px) {
  html[data-style="ristretto"] .diapo-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  html[data-style="ristretto"] .diapo-actions .bouton,
  html[data-style="ristretto"] .diapo-actions .bouton .lib { width: 100%; }
}
@media (max-width: 360px) {
  html[data-style="ristretto"] .diapo-corps { padding: 92px 18px 70px; }
  html[data-style="ristretto"] .diapo-corps h1 { font-size: 70px; margin-bottom: 12px; }
  html[data-style="ristretto"] .diapo-texte { font-size: 15.5px; }
  html[data-style="ristretto"] .diapo-actions .bouton .lib { padding-block: 13px; }
}

/* ---- le mot d'accueil : les grains à gauche, le rameau à droite ---------- */
html[data-style="ristretto"] .pre-milieu h2 { font: italic 900 clamp(32px, 4.2vw, 56px)/1.06 var(--sans); letter-spacing: -.025em; color: var(--terracotta); }
html[data-style="ristretto"] .pre-milieu .titre-mots em { color: var(--texte); }
html[data-style="ristretto"] .pre-texte { font: italic 400 clamp(17px, 1.6vw, 21px)/1.6 var(--sans); color: var(--texte); }
html[data-style="ristretto"] .pre-orne {
  justify-self: center;
  width: min(100%, 230px); aspect-ratio: 220 / 300;
  background: var(--terracotta); opacity: .5;
  -webkit-mask: var(--ris-grains) center / contain no-repeat;
  mask: var(--ris-grains) center / contain no-repeat;
  animation: ris-flotte 9s ease-in-out infinite alternate;
}
html[data-style="ristretto"] .pre-orne--d {
  aspect-ratio: 280 / 300; width: min(100%, 280px);
  -webkit-mask-image: var(--ris-rameau); mask-image: var(--ris-rameau);
  animation-delay: -4s;
}
@keyframes ris-flotte { from { transform: translateY(6px) rotate(1deg); } to { transform: translateY(-8px) rotate(-2deg); } }
/* les vignettes viennent juste sous le mot d'accueil : une seule respiration */
html[data-style="ristretto"] .preambule + .section { padding-top: 0; }

/* ---- les trois envies : la photo voilée, un cadre de cuivre dedans ------- */
html[data-style="ristretto"] .categories { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
html[data-style="ristretto"] .categorie { aspect-ratio: 4 / 3; border-radius: var(--r-carte); box-shadow: none; }
html[data-style="ristretto"] .categorie::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .64));
  transition: opacity var(--lent);
}
html[data-style="ristretto"] .categorie:hover::after { opacity: .75; }
html[data-style="ristretto"] .categorie::before {
  content: ''; position: absolute; z-index: 2; inset: 20px; pointer-events: none;
  border: 1px solid rgba(var(--accent-rgb), .95); border-radius: 10px;
  transition: inset var(--lent), border-color var(--lent);
}
html[data-style="ristretto"] .categorie:hover::before { inset: 13px; }
html[data-style="ristretto"] .categorie-pied,
html[data-style="ristretto"] .categorie:hover .categorie-pied {
  inset: 0; z-index: 3;
  flex-direction: column; gap: 12px;
  padding: 0; border-radius: 0; background: none;
}
html[data-style="ristretto"] .categorie-pied .nom,
html[data-style="ristretto"] .categorie:hover .categorie-pied .nom {
  font: italic 500 clamp(28px, 2.8vw, 42px)/1.05 var(--sans); letter-spacing: -.01em;
  color: #FFFFFF; text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}
html[data-style="ristretto"] .categorie-pied::after {
  content: ''; width: 34px; height: 34px;
  background: #FFFFFF;
  -webkit-mask: var(--ris-grain) center / contain no-repeat;
  mask: var(--ris-grain) center / contain no-repeat;
  transition: transform var(--lent);
}
html[data-style="ristretto"] .categorie:hover .categorie-pied::after { transform: rotate(-24deg); }
@media (max-width: 640px) {
  html[data-style="ristretto"] .categories { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html[data-style="ristretto"] .categorie { aspect-ratio: 2 / 1; }
  html[data-style="ristretto"] .categorie::before { inset: 12px; }
  html[data-style="ristretto"] .categorie-pied .nom { font-size: 28px; }
  html[data-style="ristretto"] .categorie-pied::after { width: 26px; height: 26px; }
}

/* ---- la carte du comptoir : un panneau d'espresso, deux colonnes --------- */
html[data-style="ristretto"] .articles {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--sable); border-radius: var(--r-carte);
}
html[data-style="ristretto"] .articles::before,
html[data-style="ristretto"] .articles::after,
html[data-style="ristretto"] .cl-grille::before {
  content: ''; position: absolute; pointer-events: none;
  width: clamp(56px, 6vw, 80px); aspect-ratio: 1;
  background: var(--terracotta); opacity: .85;
  -webkit-mask: var(--ris-brin) center / contain no-repeat;
  mask: var(--ris-brin) center / contain no-repeat;
}
html[data-style="ristretto"] .articles::before,
html[data-style="ristretto"] .cl-grille::before { left: -18px; top: calc(-1 * clamp(40px, 4.4vw, 58px)); transform: rotate(-14deg); }
html[data-style="ristretto"] .articles::after { right: -18px; bottom: calc(-1 * clamp(36px, 4vw, 52px)); transform: rotate(166deg); }
html[data-style="ristretto"] .article,
html[data-style="ristretto"] .article:hover {
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
  overflow: visible; background: none; border-radius: 0; box-shadow: none; transform: none;
}
/* `start` : étirée à la hauteur d'un texte long, la photo tirerait sa
   largeur de son ratio et sortirait de sa colonne */
html[data-style="ristretto"] .article .visuel {
  align-self: start; width: 100%;
  aspect-ratio: 300 / 328; border-radius: var(--r-carte);
  box-shadow: var(--ris-ombre);
  transition: transform var(--lent), box-shadow var(--lent);
}
html[data-style="ristretto"] .article:hover .visuel { transform: translate(-3px, -3px); box-shadow: 15px 11px 14px rgba(0, 0, 0, .42); }
html[data-style="ristretto"] .article .corps { min-width: 0; padding: 0; text-align: left; }
html[data-style="ristretto"] .article .nom { font: italic 900 clamp(19px, 1.9vw, 27px)/1.12 var(--sans); letter-spacing: -.015em; color: var(--texte); }
html[data-style="ristretto"] .article .desc {
  max-width: none; margin: 12px 0 0;
  font: italic 400 clamp(15px, 1.3vw, 17.5px)/1.5 var(--sans); color: var(--texte-doux);
}
html[data-style="ristretto"] .article .prix {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: auto; padding-top: 16px;
  font: italic 500 clamp(23px, 2.3vw, 32px)/1 var(--sans); color: var(--oeil);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
html[data-style="ristretto"] .article .prix::before {
  content: ''; flex: 1 1 auto; min-width: 20px;
  border-bottom: 2px dotted rgba(var(--accent-rgb), .75);
  transform: translateY(-5px);
}
html[data-style="ristretto"] .article .badge {
  z-index: 1; top: 12px; left: 12px;
  background: var(--dragee); color: var(--sur-accent);
  font: italic 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 11px;
}

@media (max-width: 760px) {
  html[data-style="ristretto"] .articles { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 18px 26px; }
  html[data-style="ristretto"] .article,
  html[data-style="ristretto"] .article:hover { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  html[data-style="ristretto"] .article .visuel { aspect-ratio: 1; border-radius: 12px; box-shadow: 6px 4px 8px rgba(0, 0, 0, .35); }
  html[data-style="ristretto"] .article .badge { top: 6px; left: 6px; max-width: 92px; font-size: 9px; padding: 5px 6px; letter-spacing: .03em; }
  html[data-style="ristretto"] .article .nom { font-size: 18.5px; }
  html[data-style="ristretto"] .article .desc { margin-top: 5px; font-size: 14px; line-height: 1.4; }
  html[data-style="ristretto"] .article .prix { padding-top: 8px; font-size: 21px; gap: 10px; }
}
@media (max-width: 380px) {
  html[data-style="ristretto"] .articles { padding: 20px 14px 22px; }
  html[data-style="ristretto"] .article,
  html[data-style="ristretto"] .article:hover { grid-template-columns: 84px minmax(0, 1fr); gap: 13px; }
  html[data-style="ristretto"] .article .badge { max-width: 74px; font-size: 8px; padding: 4px 5px; }
  html[data-style="ristretto"] .article .nom { font-size: 17px; }
  html[data-style="ristretto"] .article .desc { font-size: 13.5px; }
}
html[data-style="ristretto"] .filtres .pilule {
  border: 1.5px solid rgba(var(--accent-rgb), .55); border-radius: 999px;
  font: italic 600 14px/1 var(--sans); color: var(--texte);
}
html[data-style="ristretto"] .filtres .pilule.actif { background: var(--dragee); border-color: var(--dragee); color: var(--sur-accent); }

/* ---- la maison : le texte à gauche, la photo à droite dans son rameau ---- */
html[data-style="ristretto"] .chef-corps {
  position: relative; isolation: isolate;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
/* le rameau déborde du cadre : la section le coupe à ses bords plutôt que
   d'élargir la page */
html[data-style="ristretto"] .chef { overflow: hidden; overflow: clip; }
html[data-style="ristretto"] .chef-corps::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: 30%; bottom: -8%; width: 28%; aspect-ratio: 280 / 300;
  background: var(--terracotta); opacity: .4;
  -webkit-mask: var(--ris-rameau) center / contain no-repeat;
  mask: var(--ris-rameau) center / contain no-repeat;
  transform: rotate(-6deg);
}
html[data-style="ristretto"] .chef-vue { order: 2; width: 88%; justify-self: end; border-radius: var(--r-carte); box-shadow: var(--ris-ombre); }
html[data-style="ristretto"] .chef-trait { display: none; }
html[data-style="ristretto"] .chef-texte h2 { font: italic 900 clamp(36px, 4.6vw, 62px)/1.02 var(--sans); letter-spacing: -.03em; color: var(--texte); }
html[data-style="ristretto"] .chef-role {
  margin: 12px 0 26px;
  font: italic 500 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--texte-doux);
}

html[data-style="ristretto"] .chef-mot {
  position: relative; margin: 0 0 24px;
  padding: 24px 28px 24px 82px;
  background: var(--sable); border-radius: var(--r-carte);
  font: italic 600 clamp(17px, 1.6vw, 21px)/1.5 var(--sans); color: var(--oeil);
}
html[data-style="ristretto"] .chef-mot::before {
  position: absolute; left: 24px; top: 14px;
  font: italic 900 64px/1 var(--sans); color: var(--terracotta);
}
html[data-style="ristretto"] .chef-mot::after { color: var(--oeil); }
html[data-style="ristretto"] .chef-texte p { font-size: 16.5px; }
@media (max-width: 860px) {
  html[data-style="ristretto"] .chef-corps { grid-template-columns: minmax(0, 1fr); }
  html[data-style="ristretto"] .chef-vue { order: 0; width: auto; max-width: none; }
  html[data-style="ristretto"] .chef-vue img { aspect-ratio: 4 / 3.4; }
  html[data-style="ristretto"] .chef-corps::before { width: 42%; top: -9%; bottom: auto; right: -6%; transform: scaleX(-1) rotate(-8deg); }
  html[data-style="ristretto"] .chef-mot { padding: 20px 20px 20px 62px; }
  html[data-style="ristretto"] .chef-mot::before { left: 16px; top: 12px; font-size: 50px; }
}

/* ---- bon à savoir : le panneau d'espresso, le pictogramme au cuivre ------- */
html[data-style="ristretto"] .ats-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1000px) {
  html[data-style="ristretto"] .ats-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-style="ristretto"] .ats-carte {
  padding: 30px 28px 26px;
  border: 0; border-radius: var(--r-carte); background: var(--sable);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0);
  transition: transform var(--vif), box-shadow var(--lent);
}
html[data-style="ristretto"] .ats-carte:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6); }
html[data-style="ristretto"] .ats-picto { width: 64px; height: 64px; margin-bottom: 20px; }
html[data-style="ristretto"] .ats-titre { font: italic 800 clamp(20px, 1.8vw, 25px)/1.15 var(--sans); letter-spacing: -.015em; color: var(--texte); }
html[data-style="ristretto"] .ats-carte p { font: italic 400 16px/1.55 var(--sans); }
html[data-style="ristretto"] .ats-lien { font: italic 500 15px/1 var(--sans); color: var(--texte); }
html[data-style="ristretto"] .ats-lien::after { width: 44px; height: 1.5px; background: var(--dragee); }
html[data-style="ristretto"] .ats-lien:hover::after { width: 64px; }
@media (max-width: 640px) {
  html[data-style="ristretto"] .ats-grille { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-style="ristretto"] .ats-carte {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px;
    padding: 20px 18px;
  }
  html[data-style="ristretto"] .ats-picto { grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; }
  html[data-style="ristretto"] .ats-titre { font-size: 19px; margin-bottom: 6px; }
  html[data-style="ristretto"] .ats-carte p { font-size: 15px; }
}

/* ---- venir : le panneau de réservation, la tasse posée sur son bord ------ */
html[data-style="ristretto"] .reservation { padding-top: clamp(110px, 12vw, 160px); }
html[data-style="ristretto"] .res-corps {
  position: relative;
  padding: clamp(30px, 5vw, 64px);
  background: var(--sable); border-radius: var(--r-carte);
  gap: clamp(28px, 4vw, 64px);
}
html[data-style="ristretto"] .res-corps::before {
  content: ''; position: absolute; pointer-events: none;
  right: clamp(18px, 4vw, 56px); top: calc(-1 * clamp(52px, 5vw, 76px));
  width: clamp(112px, 12vw, 170px); aspect-ratio: 210 / 200;
  background: var(--terracotta);
  -webkit-mask: var(--ris-tasse) center / contain no-repeat;
  mask: var(--ris-tasse) center / contain no-repeat;
}
html[data-style="ristretto"] .res-corps::after {
  content: ''; position: absolute; pointer-events: none;
  right: calc(clamp(18px, 4vw, 56px) + clamp(28px, 3vw, 44px)); top: calc(-1 * clamp(96px, 9vw, 128px));
  width: clamp(30px, 3vw, 44px); aspect-ratio: 60 / 80;
  background: var(--terracotta); opacity: 0;
  -webkit-mask: var(--ris-vapeur) center / contain no-repeat;
  mask: var(--ris-vapeur) center / contain no-repeat;
  animation: ris-vapeur 4.8s ease-in-out infinite;
}
@keyframes ris-vapeur {
  0% { opacity: 0; transform: translateY(14px) scaleY(.8); }
  45% { opacity: .55; }
  100% { opacity: 0; transform: translateY(-16px) scaleY(1.1); }
}
html[data-style="ristretto"] .res-appel h2 { font: italic 700 clamp(34px, 4.2vw, 54px)/1.08 var(--sans); letter-spacing: -.02em; color: var(--terracotta); }
html[data-style="ristretto"] .res-appel .titre-mots em { color: var(--texte); }
html[data-style="ristretto"] .res-texte { font-size: 16.5px; }
html[data-style="ristretto"] .res-tel {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 20px; width: 100%;
  margin-top: 22px; padding: 22px 28px;
  border-radius: var(--r-carte);
  background: var(--dragee); color: var(--sur-accent);
}
html[data-style="ristretto"] .res-tel:hover { background: var(--terracotta-fonce); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(0, 0, 0, .35); }
html[data-style="ristretto"] .res-tel-dit { font: italic 700 14px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
html[data-style="ristretto"] .res-tel-num { font: italic 800 clamp(24px, 2.6vw, 32px)/1 var(--sans); letter-spacing: -.01em; }
html[data-style="ristretto"] .res-liens a { color: var(--texte); text-decoration-color: rgba(var(--accent-rgb), .7); font-style: italic; }
html[data-style="ristretto"] .res-liens a:hover { color: var(--texte); text-decoration-color: var(--texte); }

html[data-style="ristretto"] .res-infos { gap: 30px; }
html[data-style="ristretto"] .res-bloc h3 {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
  font: italic 800 20px/1.2 var(--sans); letter-spacing: -.01em; text-transform: none;
  color: var(--texte);
}
html[data-style="ristretto"] .res-bloc h3::after { content: ''; width: 44px; height: 2px; border-radius: 2px; background: var(--dragee); }
html[data-style="ristretto"] .res-bloc .ligne-horaire {
  margin-bottom: 8px; padding: 13px 18px;
  border: 0; border-radius: 12px;
  background: rgba(var(--accent-rgb), .16);
  font-size: 15.5px;
}
html[data-style="ristretto"] .res-bloc .ligne-horaire .jours { font-weight: 600; }
html[data-style="ristretto"] .res-bloc .ligne-horaire .pointilles { border-bottom: 1px dotted rgba(var(--accent-rgb), .55); }
html[data-style="ristretto"] .res-bloc .ligne-horaire .heures { color: var(--texte); font-variant-numeric: tabular-nums; }
html[data-style="ristretto"] .res-bloc .ligne-horaire.est-ferme .heures { color: var(--texte-doux); }
html[data-style="ristretto"] .res-bloc .ligne-horaire.est-aujourdhui {
  background: rgba(var(--accent-rgb), .32);
  box-shadow: inset 4px 0 0 var(--dragee);
}
html[data-style="ristretto"] .res-adresse { font: italic 600 20px/1.4 var(--sans); }
html[data-style="ristretto"] .res-note { font-style: italic; font-size: 15px; }
html[data-style="ristretto"] .res-carte {
  margin-top: 14px; padding: 0 20px;
  border: 1.5px solid var(--dragee); border-radius: 999px;
  color: var(--texte); text-decoration: none;
  font: italic 700 13px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  transition: background var(--vif), color var(--vif);
}
html[data-style="ristretto"] .res-carte:hover { background: var(--dragee); color: var(--sur-accent); }
@media (max-width: 560px) {
  html[data-style="ristretto"] .res-corps { padding: 64px 18px 24px; }
  html[data-style="ristretto"] .res-tel { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
  /* le jour et ses heures sur une ligne quand ils y tiennent, l'un sous
     l'autre sinon : le pointillé s'efface */
  html[data-style="ristretto"] .res-bloc .ligne-horaire { flex-wrap: wrap; row-gap: 2px; padding: 11px 14px; }
  html[data-style="ristretto"] .res-bloc .ligne-horaire .pointilles { display: none; }
  html[data-style="ristretto"] .res-bloc .ligne-horaire .heures { margin-left: auto; }
}

/* ---- la bande des pages intérieures : le titre en capitales, gravé ------- */
html[data-style="ristretto"] .bande-heros {
  position: relative; overflow: hidden;
  margin: 0; border-radius: 0;
  padding: calc(var(--h-nav, 72px) + clamp(56px, 7vw, 96px)) 24px clamp(56px, 7vw, 92px);
  background:
    radial-gradient(60% 110% at 50% 0%, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), 0) 72%),
    var(--creme);
  color: var(--texte);
  border-bottom: 1px solid rgba(var(--accent-rgb), .28);
}
html[data-style="ristretto"] .bande-heros h1 {
  font: italic 800 clamp(58px, 10vw, 150px)/.92 var(--sans);
  letter-spacing: -.035em; text-transform: uppercase; color: var(--texte);
}
html[data-style="ristretto"] .bande-heros .sur-titre { color: var(--oeil); }

html[data-style="ristretto"] .bande-heros::before,
html[data-style="ristretto"] .bande-heros::after {
  content: ''; position: absolute; pointer-events: none;
  bottom: -14%; width: clamp(130px, 17vw, 250px);
  background: var(--terracotta); opacity: .32;
}
html[data-style="ristretto"] .bande-heros::before {
  left: clamp(-30px, 2vw, 60px); aspect-ratio: 220 / 300;
  -webkit-mask: var(--ris-grains) center / contain no-repeat;
  mask: var(--ris-grains) center / contain no-repeat;
}
html[data-style="ristretto"] .bande-heros::after {
  right: clamp(-40px, 2vw, 60px); aspect-ratio: 280 / 300;
  -webkit-mask: var(--ris-rameau) center / contain no-repeat;
  mask: var(--ris-rameau) center / contain no-repeat;
}
@media (max-width: 720px) {
  html[data-style="ristretto"] .bande-heros::before,
  html[data-style="ristretto"] .bande-heros::after { width: 108px; opacity: .22; }
}

/* ---- la carte en liste : le même panneau, pointillés et prix au cuivre --- */
html[data-style="ristretto"] .cl-grille {
  position: relative;
  gap: 48px clamp(32px, 5vw, 72px);
  padding: clamp(26px, 4vw, 56px);
  background: var(--sable); border-radius: var(--r-carte);
}
html[data-style="ristretto"] .cl-rubrique-nom {
  margin-bottom: 4px; padding-bottom: 0; border-bottom: 0;
  font: italic 900 clamp(24px, 2.4vw, 32px)/1.1 var(--sans); letter-spacing: -.015em; text-transform: none;
  color: var(--terracotta);
}

html[data-style="ristretto"] .cl-note { color: var(--texte-doux); }
html[data-style="ristretto"] .cl-ligne { padding: 16px 0; border-bottom: 1px solid rgba(var(--accent-rgb), .16); }
html[data-style="ristretto"] .cl-nom { font: italic 700 clamp(17px, 1.5vw, 20px)/1.3 var(--sans); color: var(--texte); }
html[data-style="ristretto"] .cl-conduite { border-bottom: 2px dotted rgba(var(--accent-rgb), .6); }
html[data-style="ristretto"] .cl-prix { font: italic 500 clamp(18px, 1.7vw, 22px)/1 var(--sans); color: var(--oeil); font-variant-numeric: tabular-nums; }
html[data-style="ristretto"] .cl-desc { font: italic 400 15px/1.5 var(--sans); color: var(--texte-doux); }
html[data-style="ristretto"] .cl-marque { border-radius: 999px; font: italic 600 10.5px/1 var(--sans); letter-spacing: .06em; }
html[data-style="ristretto"] .cl-vignette img { border-radius: 12px; box-shadow: 6px 4px 8px rgba(0, 0, 0, .35); }
html[data-style="ristretto"] .cl-photo img { border-radius: var(--r-carte); box-shadow: var(--ris-ombre); }
@media (max-width: 1000px) {
  html[data-style="ristretto"] .cl-photo img { aspect-ratio: 16 / 10; }
  html[data-style="ristretto"] .cl-photo { max-width: none; }
}
@media (max-width: 480px) {
  html[data-style="ristretto"] .cl-grille { padding: 24px 16px; }
  /* le nom et le prix restent sur la même ligne, seul le pointillé s'efface */
  html[data-style="ristretto"] .cl-tete { flex-wrap: nowrap; }
  html[data-style="ristretto"] .cl-prix { width: auto; margin: 0 0 0 auto; padding-left: 12px; }
}

/* ---- questions : des panneaux d'espresso qui s'ouvrent --------------------- */
html[data-style="ristretto"] .faq-item { background: var(--sable); border: 0; border-radius: var(--r-carte); }
html[data-style="ristretto"] .faq-item[open] { box-shadow: inset 4px 0 0 var(--dragee); }
html[data-style="ristretto"] .faq-item summary { font: italic 700 17.5px/1.4 var(--sans); }
html[data-style="ristretto"] .faq-item summary:hover { color: var(--texte); }
html[data-style="ristretto"] .faq-item summary::after { border-color: var(--terracotta); }
html[data-style="ristretto"] .faq-reponse { font-size: 15.5px; }

/* ---- le pied : la bande de cuivre ------------------------------------------ */
html[data-style="ristretto"] .pied {
  margin: 0; border-radius: 0;
  background: var(--caramel); color: #FFFFFF;
  padding: 72px max(6%, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(6%, env(safe-area-inset-left));
}
html[data-style="ristretto"] .pied-grille {
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 40px; max-width: 1240px; margin-inline: auto;
}
html[data-style="ristretto"] .pied-marque > svg { width: 52px; height: 52px; color: #FFFFFF; }
html[data-style="ristretto"] .pied-marque .mot { margin: 14px 0 10px; font: italic 900 32px/1 var(--sans); text-transform: uppercase; }
html[data-style="ristretto"] .pied-marque p { max-width: 34ch; font: italic 400 15px/1.55 var(--sans); color: #FFFFFF; }
html[data-style="ristretto"] .pied-social a { border-color: rgba(255, 255, 255, .6); color: #FFFFFF; }
html[data-style="ristretto"] .pied-social a:hover { background: var(--encre); border-color: var(--encre); }
html[data-style="ristretto"] .pied h4 {
  position: relative; margin-bottom: 18px; padding-bottom: 12px;
  font: italic 800 18px/1.2 var(--sans); color: #FFFFFF;
}
html[data-style="ristretto"] .pied h4::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 2px; border-radius: 2px; background: var(--encre);
}
html[data-style="ristretto"] .pied ul { gap: 8px; }
html[data-style="ristretto"] .pied ul a { font: italic 400 15.5px/1.4 var(--sans); color: #FFFFFF; }
html[data-style="ristretto"] .pied ul a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
html[data-style="ristretto"] .pied-bas {
  max-width: 1240px; margin-inline: auto;
  border-top-color: rgba(255, 255, 255, .35); color: #FFFFFF;
}
@media (max-width: 960px) {
  html[data-style="ristretto"] .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html[data-style="ristretto"] .pied { padding-top: 56px; }
  html[data-style="ristretto"] .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ---- au doigt : pas de survol qui colle ------------------------------------ */
@media (hover: none) {
  html[data-style="ristretto"] .article:hover .visuel,
  html[data-style="ristretto"] .ats-carte:hover,
  html[data-style="ristretto"] .bouton:hover .lib,
  html[data-style="ristretto"] .res-tel:hover { transform: none; box-shadow: none; }
  html[data-style="ristretto"] .article:hover .visuel { box-shadow: var(--ris-ombre); }
  html[data-style="ristretto"] .bouton:active .lib,
  html[data-style="ristretto"] .res-tel:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="ristretto"] .rev:not(.titre-mots) { transform: none; }
  html[data-style="ristretto"] .sur-titre::after { transform: none; }
  html[data-style="ristretto"] .pre-orne,
  html[data-style="ristretto"] .res-corps::after { animation: none; }
  html[data-style="ristretto"] .res-corps::after { opacity: .45; }
}
/* ---- ristretto : fin du bloc ---- */