/* 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: 'Fraunces';
  src: url('../fonts/fraunces-vf-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-300-latin.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+20AC;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+20AC;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+20AC;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA;
}
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat-vf-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --creme: #FCF7EC;
  --sable: #F7ECD8;
  --dragee: #CE8146;
  --caramel: #A84E22;
  --terracotta: #A63415;
  --terracotta-fonce: #82290F;
  --encre: #1A0C06;
  --texte: #301A0F;
  --texte-doux: #6F5844;
  --ligne: #EEDCC2;
  --blanc: #FFFFFF;
  --serif: 'Fraunces', 'Georgia', serif;
  --sans: 'Poppins', 'Segoe UI', sans-serif;
  --fonte-craie: 'Caveat', var(--serif);
  --r-carte: 14px;
  --r-grande: 26px;
  --r-champ: 10px;
  --r-blob: 999px;
  --r-blob-2: 999px;
  --ombre-nav: 0 18px 40px -18px rgba(166, 52, 21, .45);
  --ombre-carte: 0 20px 25px -5px rgba(166, 52, 21, .16), 0 8px 10px -6px rgba(166, 52, 21, .16);
  --ombre-haut: 0 20px 25px -5px rgba(166, 52, 21, .40), 0 8px 10px -6px rgba(166, 52, 21, .40);
  --ombre-encre: 0 18px 40px -12px rgba(26, 12, 6, .5);
  --lent: 0.75s cubic-bezier(.22, .61, .36, 1);
  --vif: 0.25s cubic-bezier(.33, 1, .68, 1);
  --cran: 0.07s;
  --photo-filtre: saturate(1.12) contrast(1.04) sepia(0.05);
  --photo-filtre-survol: saturate(1.198) contrast(1.05) sepia(0.020);
  --photo-zoom: 1.055;
  --photo-duree: 1.2s;
  --graisse-corps: 400;
  --oeil: #A63415;
}

/* ---------- 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;
  background: var(--dragee); color: var(--blanc);
  font: 400 14.5px/1.4 var(--sans);
  letter-spacing: .012em;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .55);
  transition:
    background var(--vif), color var(--vif), border-color var(--vif),
    transform var(--vif), box-shadow var(--vif);
}
.bouton:hover .lib {
  background: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -18px rgba(0, 0, 0, .6);
}
.bouton:active .lib { transform: translateY(0); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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