/* ==========================================================================
   WSHD FOOD — design system
   Documentation complète : components.md (tokens, gabarits, composants, règles).
   Référence visuelle : design-system.html (page interne, noindex, à ne pas mettre en ligne).

   Palette : noir (#111111), blanc (#ffffff), or (#C6A650) — l'or est un accent uniquement.
   Typo : Corbel (corps), Playfair Display Bold (titres), Playfair Display Bold Italic doré (accents).
   Décision définitive du 12/08/2026 : Playfair Display remplace le script (Kaushan) partout,
   y compris pour les accents auparavant prévus en P22 Eaglefeather. Plus aucun script sur le site.

   Règle d'écriture : aucune couleur, taille de titre ou ombre en dur dans les composants.
   Toute nouvelle valeur passe d'abord par un token dans :root.

   Sommaire
   01. Polices
   02. Tokens
   03. Base et utilitaires
   04. Photo (placeholder / photo réelle)
   05. Boutons et liens
   06. Header et mega-menu
   07. Hero d'accueil
   08. Accueil : intro, familles, tendances, thèmes, bandeau CTA, posters, chiffres,
       occasions, zones, confiance, ornement, contact
   09. Footer
   10. Pages éditoriales : page-hero, page-lead, service-card, content-split, FAQ, page-cta
   11. Fiches offres : gabarit expérience, univers sucré
   12. Fiches offres : récit, repères pratiques, cartes d'usage
   13. Lecture longue : suites de sections texte
   14. Composants de contenu : pastilles, offres associées, encadré
   15. Exceptions par page (visuels de hero) — dette à résorber
   16. Mises en page éditoriales : mosaïque, frise, comparatif, titre collant, bord à bord,
       rail, surimpression, manifeste (placée avant la section 15 dans le fichier)
   17. Blog : liste et article (également avant la section 15)
   ========================================================================== */

/* ---------- 01. Polices ---------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/playfair-display-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/playfair-display-bold-italic.woff2') format('woff2');
}

/* ---------- 02. Tokens ---------- */
:root {
  /* Couleurs de marque */
  --noir: #111111;
  --blanc: #ffffff;
  --or: #C6A650;
  --or-survol: #d4b46a;
  --or-voile: rgba(198, 166, 80, 0.12);

  /* Fonds secondaires */
  --noir-profond: #080808;     /* fond derrière un visuel portrait (hero "affiche") */
  --gris-clair: #f6f6f4;       /* section claire alternée : FAQ, occasions, lecture longue */
  --gris-attente: #ececec;     /* placeholder photo sur fond clair */
  --creme: #f3ead2;            /* univers sucré, posters "pourquoi nous" */
  --caramel: #6b3e14;          /* accent texte de l'univers sucré (7,5:1 sur --creme) */
  --caramel-trame: rgba(137, 86, 26, 0.07);

  /* Texte sur fond clair (contrastes calculés sur #ffffff) */
  --texte-doux: rgba(17, 17, 17, 0.68);       /* 5,6:1 — sous-textes, descriptions */
  --texte-discret: rgba(17, 17, 17, 0.6);     /* 4,9:1 — labels, états "à venir" */

  /* Texte sur fond noir (contrastes calculés sur #111111) */
  --texte-sur-noir-fort: rgba(255, 255, 255, 0.86);   /* sous-titres de hero */
  --texte-sur-noir: rgba(255, 255, 255, 0.72);        /* paragraphes secondaires */
  --texte-sur-noir-doux: rgba(255, 255, 255, 0.6);    /* légendes, adresse, chiffres */
  --texte-sur-noir-discret: rgba(255, 255, 255, 0.5); /* mentions légales, labels (5,4:1) */
  --texte-sur-photo-attente: rgba(255, 255, 255, 0.55);

  /* Filets */
  --hairline-sur-blanc: rgba(17, 17, 17, 0.14);
  --hairline-sur-creme: rgba(17, 17, 17, 0.18);
  --hairline-sur-noir: rgba(255, 255, 255, 0.18);
  --filet-champ-sur-noir: rgba(255, 255, 255, 0.35);

  /* Voiles sur photo */
  --voile-carte: linear-gradient(0deg, rgba(0,0,0,0.86), rgba(0,0,0,0.05) 65%);
  --voile-hero-accueil: linear-gradient(0deg, rgba(0,0,0,0.82), rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.5));
  --voile-page-hero: linear-gradient(90deg, rgba(0,0,0,0.82), rgba(0,0,0,0.32) 68%, rgba(0,0,0,0.12));
  --voile-affiche: linear-gradient(90deg, rgba(0,0,0,.95), rgba(0,0,0,.8) 52%, rgba(0,0,0,.12));

  /* Typographie */
  --font-body: Corbel, 'Corbel', 'Segoe UI', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --titre-xxl: clamp(44px, 6.4vw, 80px);   /* H1 fiche offre (experience-hero) */
  --titre-xl: clamp(38px, 5.2vw, 68px);    /* H1 page éditoriale */
  --titre-accueil: clamp(30px, 4.1vw, 54px);
  --titre-l: clamp(32px, 4vw, 52px);       /* H2 de panneau sombre */
  --titre-m: clamp(30px, 3.4vw, 44px);     /* H2 de section standard */
  --titre-s: clamp(28px, 3vw, 40px);       /* H2 de rangée secondaire */
  --titre-xs: clamp(24px, 2.6vw, 32px);    /* bandeau CTA */
  --titre-chiffre: clamp(26px, 2.4vw, 34px);
  --titre-repere: clamp(22px, 2vw, 28px);
  --titre-carte: 28px;
  --titre-liste: 21px;                     /* FAQ, listes numérotées, cartes tendance */
  --texte-xs: 11px;
  --texte-s: 12px;
  --texte-ui: 13px;                        /* nav, boutons, liens texte */
  --texte-m: 15px;
  --texte-base: 16px;
  --texte-l: 17px;
  --texte-chapo: 19px;
  --interlettre-titre: -0.045em;
  --interlettre-label: 0.12em;

  /* Espacements et mise en page (point de rupture unique : 860px, puis 520px) */
  --container: 11.8vw;                     /* gouttière latérale desktop */
  --gouttiere-mobile: 6vw;
  --section-y: 110px;
  --gap-colonnes: 8vw;
  --gap-cartes: 14px;
  --mesure: 62ch;                          /* longueur de ligne max d'un texte long */

  /* Formes, ombres, mouvement */
  --rayon: 2px;
  --rayon-carte: 4px;
  --ombre-menu: 0 18px 40px rgba(0,0,0,0.28);
  --ombre-poster: 0 12px 24px rgba(17,17,17,0.12);
  --transition: 0.2s ease;
}

/* Règle de contraste (vérifiée WCAG) :
   #C6A650 sur #ffffff = 2,3:1 → NE JAMAIS l'utiliser comme couleur de texte sur blanc (ni sur --gris-clair).
   #C6A650 sur #111111 = 8,1:1 → sûr pour texte sur fond noir.
   #111111 sur #C6A650 = 8,1:1 → sûr pour texte sur fond or (boutons pleins).
   Sur fond clair, l'or reste un accent non-textuel : filet, puce, soulignement, fond de badge (avec texte noir dessus).
   Sur --creme, l'accent textuel est --caramel, pas l'or. */

/* ---------- 03. Base et utilitaires ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); color: var(--noir); font-family: var(--font-body); font-size: var(--texte-base); line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: var(--interlettre-titre); }
.section-pad { padding: var(--section-y) var(--container); }
.eyebrow { font-size: var(--texte-s); letter-spacing: var(--interlettre-label); text-transform: uppercase; font-weight: 700; margin: 0 0 18px; color: var(--noir); }
.eyebrow--sur-noir { color: var(--or); }
/* Système d'accent (remplace le script partout) : même police de titre en italique + doré.
   À utiliser pour tout mot-clé mis en avant dans un H1/H2 sur fond sombre. */
.script-accent { font-family: var(--font-heading); font-style: italic; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--or); display: block; }

/* Anneau de focus double : l'or se voit sur fond sombre, le noir sur fond clair. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; box-shadow: 0 0 0 3px var(--noir); }

/* Liens dans un texte courant : soulignement or, lisible sans dépendre de la couleur du texte. */
.content-copy p a, .page-lead p a, .faq details p a, .opening-note a { text-decoration-color: var(--or); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--transition); }
.content-copy p a:hover, .page-lead p a:hover, .faq details p a:hover, .opening-note a:hover { text-decoration-thickness: 2.5px; }

/* ---------- 04. Photo ---------- */
/* Placeholder (en attente des fichiers réels) */
.photo-placeholder { position: relative; background: var(--noir); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-placeholder::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 18px); }
.photo-placeholder span { position: relative; z-index: 1; font-size: var(--texte-s); letter-spacing: 0.08em; color: var(--texte-sur-photo-attente); font-style: italic; text-align: center; padding: 0 1.5rem; }
.photo-placeholder--clair { background: var(--gris-attente); }
.photo-placeholder--clair span { color: var(--texte-discret); }

/* Photo réelle (remplace .photo-placeholder une fois le fichier fourni).
   Le conteneur parent doit être en position:relative avec une taille définie (aspect-ratio ou min-height). */
.bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Contextes où du contenu réel se superpose au placeholder (hero, cartes famille) :
   l'étiquette se range dans un coin plutôt qu'au centre, pour ne jamais croiser le texte. */
.hero .photo-placeholder { align-items: flex-end; justify-content: flex-end; }
.hero .photo-placeholder span { text-align: right; padding: 0 40px 150px 0; max-width: 260px; }
.family-card .photo-placeholder { align-items: flex-start; justify-content: flex-end; }
.family-card .photo-placeholder span { text-align: right; padding: 16px 16px 0 0; max-width: 140px; }

@media (max-width: 860px) {
  /* Le bandeau bas du hero a une hauteur variable en mobile : l'étiquette disparaît,
     le motif rayé suffit à signaler la zone en attente. */
  .hero .photo-placeholder span { display: none; }
}

/* ---------- 05. Boutons et liens ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-size: var(--texte-ui); font-weight: 700; letter-spacing: 0.02em; text-decoration: none; padding: 0.95em 1.7em; border-radius: var(--rayon); border: 1.5px solid transparent; white-space: nowrap; }
.btn--or { background: var(--or); color: var(--noir); }
.btn--or:hover { background: var(--or-survol); }
.btn--ligne-sur-noir { border-color: var(--or); color: var(--blanc); }
.btn--ligne-sur-noir:hover { background: var(--or-voile); }
/* CTA secondaire dans le header : texte seul, pour ne jamais rivaliser avec le bouton plein. */
.btn--texte-sur-noir { padding: 0.5em 0; border: 0; color: var(--blanc); border-radius: 0; transition: color var(--transition), transform var(--transition); }
.btn--texte-sur-noir:hover { color: var(--or); transform: translateY(-2px); }

.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: var(--texte-ui); font-weight: 700; text-decoration: none; color: var(--noir); padding-bottom: 4px; transition: color var(--transition), transform var(--transition); }
.text-link span { transition: transform var(--transition); }
.text-link:hover { color: var(--or); }
.text-link:hover span { transform: translateX(5px); }

/* ---------- 06. Header et mega-menu ---------- */
.header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; min-height: 96px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--container); color: var(--blanc); gap: 24px; }
.header .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.header .brand img { width: 46px; height: 46px; border-radius: 50%; }
.header .brand span { font-weight: 700; font-size: var(--texte-m); letter-spacing: 0.02em; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav > a { font-size: var(--texte-ui); text-decoration: none; color: inherit; }
.nav > a:hover { color: var(--or); }
.menu-toggle { display: none; }
.header-ctas { display: flex; align-items: center; gap: 26px; flex: none; }
.nav-ctas { display: none; }

.nav-item { position: relative; display: flex; align-items: center; gap: 4px; }
.nav-item > a { font-size: var(--texte-ui); text-decoration: none; color: inherit; }
.nav-item > a:hover { color: var(--or); }
.mega-toggle { display: none; }
.mega-menu { position: absolute; z-index: 20; top: 100%; left: 50%; margin-top: 22px; min-width: 200px; background: var(--blanc); color: var(--noir); padding: 18px 20px; border-radius: var(--rayon); box-shadow: var(--ombre-menu); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; }
.nav-item.has-mega:hover .mega-menu, .nav-item.has-mega:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-menu a { display: block; font-size: var(--texte-ui); color: var(--noir); text-decoration: none; padding: 6px 0; white-space: nowrap; }
.mega-menu a:hover { color: var(--or); transform: translateX(4px); }
.mega-menu--wide { display: flex; gap: 36px; min-width: 320px; }
.mega-menu-label { font-size: var(--texte-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-discret); margin: 0 0 6px; }

@media (max-width: 860px) {
  .nav { display: none; }
  .header-ctas { display: none; }
  .menu-toggle { display: flex; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; flex: none; }
  .menu-toggle i { display: block; width: 22px; height: 1.5px; background: currentColor; }
  .nav.open { display: flex; position: absolute; top: 96px; left: 0; width: 100%; max-height: calc(100vh - 96px); overflow-y: auto; flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px var(--container) 34px; background: var(--noir); }
  .nav-item { flex-direction: column; align-items: flex-start; width: 100%; gap: 0; }
  .mega-toggle { display: flex; position: absolute; right: 0; top: -6px; width: 36px; height: 36px; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; }
  .mega-toggle i { display: block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
  .mega-toggle[aria-expanded="true"] i { transform: rotate(-135deg); }
  .mega-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; color: inherit; padding: 14px 0 0 16px; margin: 0; min-width: 0; }
  .nav-item.mega-open .mega-menu { display: block; }
  .mega-menu a { color: var(--texte-sur-noir); padding: 8px 0; }
  .mega-menu--wide { flex-direction: column; gap: 16px; min-width: 0; }
  .mega-menu-label { color: var(--texte-sur-noir-discret); }
  .nav-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 6px; width: 100%; }
}

/* ---------- 07. Hero d'accueil ---------- */
.hero { position: relative; min-height: 780px; height: min(820px, 100vh); background: var(--noir); color: var(--blanc); overflow: hidden; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero-shade { position: absolute; inset: 0; background: var(--voile-hero-accueil); }
.hero-content { position: relative; z-index: 1; padding: 210px var(--container) 0; max-width: 820px; }
.hero-content .eyebrow { color: var(--or); }
.hero h1 { font-size: var(--titre-accueil); line-height: 1.12; }
.hero h1 i { font-style: italic; font-weight: 700; font-family: var(--font-heading); color: var(--or); }
.hero-subtitle { margin: 22px 0 0; max-width: 46ch; font-size: var(--texte-base); line-height: 1.6; color: var(--texte-sur-noir-fort); }
.hero-cta { display: inline-flex; margin-top: 30px; }
.hero-bottom { position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; display: flex; align-items: center; padding: 30px var(--container); border-top: 1px solid var(--hairline-sur-noir); }

@media (max-width: 860px) {
  .hero { min-height: 660px; }
  .hero-image { object-position: 58% center; }
  .hero-content { padding: 150px var(--gouttiere-mobile) 0; }
  .hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .hero-bottom { padding: 24px var(--gouttiere-mobile); }
}

/* ---------- 08. Accueil ---------- */
/* Intro éditoriale (2 colonnes) */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-colonnes); align-items: center; }
.intro-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--noir); }
.intro-copy h2 { font-size: var(--titre-m); line-height: 1.15; margin-bottom: 22px; }
.intro-copy p { font-size: var(--texte-base); line-height: 1.65; max-width: 46ch; margin: 0 0 14px; }
.intro-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.intro-list li { display: flex; gap: 12px; font-size: var(--texte-m); line-height: 1.55; max-width: 44ch; }
.intro-list li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; flex: none; background: var(--or); border-radius: 50%; }

@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; gap: 40px; }
}

/* Grille des familles */
.families-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; margin-bottom: 46px; }
.families-heading h2 { font-size: var(--titre-m); line-height: 1.15; }
.families-heading p:last-child { font-size: var(--texte-m); line-height: 1.55; max-width: 34ch; margin: 0; }
.families-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-cartes); }
.family-card { position: relative; min-height: 400px; padding: 24px; color: var(--blanc); text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.family-card .photo-placeholder { position: absolute; inset: 0; }
.family-card::before { content: ""; position: absolute; inset: 0; background: var(--voile-carte); z-index: 1; }
.family-card .family-num, .family-card h3, .family-card p, .family-card b { position: relative; z-index: 2; }
.family-card .bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.family-num { font-size: var(--texte-s); letter-spacing: 0.08em; color: var(--or); margin: 0 0 auto; }
.family-card h3 { font-size: 30px; margin: 20px 0 8px; }
/* Hauteur fixe (2 lignes) : le titre démarre à la même hauteur sur toute la rangée. */
.family-card p { font-size: 13.5px; line-height: 1.5; min-height: 42px; margin: 0 0 16px; }
.family-card b { font-weight: 700; font-size: var(--texte-s); letter-spacing: 0.04em; color: var(--or); }

@media (max-width: 860px) {
  .families-heading { grid-template-columns: 1fr; gap: 16px; }
  .families-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .family-card { min-height: 260px; padding: 16px; }
  .family-card p { display: none; }
}

/* Animations tendance (rangée compacte, défilement natif) */
.trending-heading { max-width: 640px; margin-bottom: 32px; }
.trending-heading h2 { font-size: var(--titre-s); line-height: 1.15; }
.trending-row { display: flex; gap: var(--gap-cartes); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; margin: 0 calc(var(--container) * -1); padding-left: var(--container); padding-right: var(--container); }
.trending-card { position: relative; flex: none; width: 240px; min-height: 300px; scroll-snap-align: start; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--blanc); overflow: hidden; text-decoration: none; }
.trending-card:hover h3 { color: var(--or); }
.trending-card .photo-placeholder { position: absolute; inset: 0; }
.trending-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.84), rgba(0,0,0,0.05) 60%); z-index: 1; }
.trending-card h3, .trending-card p { position: relative; z-index: 2; }
.trending-card .bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.trending-card h3 { font-size: var(--titre-liste); margin: 0 0 6px; }
.trending-card p { font-size: 12.5px; line-height: 1.5; min-height: 38px; margin: 0; color: var(--texte-sur-noir-fort); }

@media (max-width: 860px) {
  .trending-card { width: 200px; min-height: 260px; }
}

/* Animations par thème */
.themes-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.themes-heading h2 { font-size: var(--titre-s); line-height: 1.15; margin: 8px 0 0; }
.themes-heading .text-link { margin: 0; }
.themes-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.theme-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: flex; align-items: flex-end; padding: 14px; color: var(--blanc); text-decoration: none; }
.theme-card .bg-photo { transition: transform 0.45s ease; }
.theme-card h3 { position: relative; z-index: 2; font-size: 16px; transition: transform 0.25s ease, color 0.25s ease; }
.theme-card:hover .bg-photo { transform: scale(1.06); }
.theme-card:hover h3 { transform: translateY(-5px); color: var(--or); }
.theme-card .photo-placeholder { position: absolute; inset: 0; }
.theme-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.05) 55%); z-index: 1; }

@media (max-width: 860px) {
  .themes-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .theme-card h3 { font-size: 14px; }
}

/* Bandeau CTA */
.cta-band { background: var(--noir); color: var(--blanc); text-align: center; padding-top: 64px; padding-bottom: 64px; }
.cta-band-heading { font-family: var(--font-heading); font-weight: 700; font-size: var(--titre-xs); margin: 0 0 28px; }
.cta-band-buttons { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .cta-band { padding-top: 48px; padding-bottom: 48px; }
  .cta-band-buttons { flex-direction: column; }
}

/* Pourquoi nous choisir : posters éparpillés, statiques.
   Chaque poster est une image autonome (texte intégré) : le texte équivalent vit dans l'attribut alt. */
.why {
  background-color: var(--creme);
  background-image:
    repeating-linear-gradient(0deg, var(--caramel-trame) 0px, var(--caramel-trame) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, var(--caramel-trame) 0px, var(--caramel-trame) 1px, transparent 1px, transparent 32px);
}
.why-heading { max-width: 640px; margin-bottom: 40px; }
.why-heading h2 { font-size: var(--titre-s); line-height: 1.15; }
.why-row { display: flex; align-items: flex-start; justify-content: center; overflow-x: visible; padding: 30px 0 40px; }
.why-slide { --tilt: 0deg; flex: 1 1 0; min-width: 0; width: auto; aspect-ratio: 190 / 250; height: auto; padding: 18px; background: var(--blanc); border: 1px solid rgba(17,17,17,0.08); border-radius: var(--rayon-carte); box-shadow: var(--ombre-poster); object-fit: contain; transform: rotate(var(--tilt)); position: relative; }
.why-slide + .why-slide { margin-left: -22px; }
.why-slide:nth-of-type(1) { --tilt: -4deg; z-index: 1; }
.why-slide:nth-of-type(2) { --tilt: 3deg; z-index: 2; }
.why-slide:nth-of-type(3) { --tilt: -2.5deg; z-index: 3; }
.why-slide:nth-of-type(4) { --tilt: 4deg; z-index: 4; }
.why-slide:nth-of-type(5) { --tilt: -3deg; z-index: 5; }

@media (max-width: 860px) {
  .why-row { justify-content: flex-start; overflow-x: auto; padding: 26px var(--gouttiere-mobile) 34px; margin: 0; }
  .why-slide { flex: none; width: 160px; height: 210px; aspect-ratio: auto; padding: 14px; }
  .why-slide + .why-slide { margin-left: -16px; }
}

/* Bandeau chiffres : ne jamais remplir .stat-slot strong avec un chiffre non validé (laisser "—"). */
.stats { background: var(--noir); color: var(--blanc); }
.stats-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.stats-head h2 { font-size: var(--titre-s); }
.stats-head p { font-size: var(--texte-ui); color: var(--texte-sur-photo-attente); max-width: 34ch; margin: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline-sur-noir); border: 1px solid var(--hairline-sur-noir); }
.stat-slot { background: var(--noir); padding: 40px 24px; }
.stat-slot strong { display: block; font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: var(--titre-chiffre); color: var(--or); line-height: 1; margin-bottom: 14px; white-space: nowrap; }
.stat-slot span { font-size: var(--texte-ui); color: var(--texte-sur-noir-doux); }

@media (max-width: 860px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-slot { padding: 32px 20px; }
}

/* Vos occasions (liste numérotée) */
.occasions { background: var(--gris-clair); }
.occasion-head { max-width: 640px; margin-bottom: 50px; }
.occasion-head h2 { font-size: var(--titre-m); line-height: 1.15; }
.occasion-list { border-top: 1px solid var(--hairline-sur-blanc); }
.occasion-list a { display: grid; grid-template-columns: 70px 1.3fr 1fr 30px; align-items: center; min-height: 96px; border-bottom: 1px solid var(--hairline-sur-blanc); text-decoration: none; color: inherit; transition: padding var(--transition), background-color var(--transition); }
.occasion-list a:hover { background: var(--blanc); padding-left: 14px; }
.occasion-list .num { font-size: var(--texte-ui); font-weight: 700; color: var(--or); }
.occasion-list b { font-size: var(--titre-liste); font-weight: 700; }
.occasion-list em { font-style: normal; font-size: var(--texte-ui); color: var(--texte-discret); }
.occasion-list i { font-style: normal; font-size: 20px; color: var(--noir); }

@media (max-width: 860px) {
  .occasion-list a { grid-template-columns: 40px 1fr 24px; }
  .occasion-list em { display: none; }
}

/* Zones d'intervention : les zones sans page utilisent <span class="a-venir">, jamais un lien mort. */
.locations { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-colonnes); align-items: start; }
.locations h2 { font-size: var(--titre-m); line-height: 1.15; margin-bottom: 18px; }
.locations > div:first-child p { font-size: var(--texte-base); line-height: 1.6; max-width: 40ch; margin: 0; }
.location-links a, .location-links .a-venir { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid var(--hairline-sur-blanc); font-size: 18px; text-decoration: none; color: inherit; }
.location-links a span { color: var(--or); font-size: 18px; }
.location-links .a-venir { color: var(--texte-discret); cursor: default; }
.location-links .a-venir span { font-size: var(--texte-s); letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 860px) {
  .locations { grid-template-columns: 1fr; gap: 36px; }
}

/* Ils nous font confiance */
.trust { background: var(--noir); color: var(--blanc); text-align: center; }
.trust h2 { font-size: var(--titre-s); margin-bottom: 44px; }
.trust-logos { display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; padding: 34px 0; border-top: 1px solid var(--hairline-sur-noir); border-bottom: 1px solid var(--hairline-sur-noir); }
.trust-logos img { height: 34px; width: auto; filter: grayscale(1) brightness(0) invert(1); opacity: 0.82; }
.trust-note { max-width: 480px; margin: 30px auto 0; font-size: 14px; line-height: 1.55; color: var(--texte-sur-noir-doux); }

/* Ornement (séparateur) */
.divider { padding: 8px 0; text-align: center; }
.divider img { width: 220px; margin: 0 auto; filter: saturate(1.05) brightness(1.04); }
.divider--large img { width: 320px; }

/* Contact : .reassurance porte le délai de réponse réellement engagé. */
.contact { display: grid; grid-template-columns: 1fr 1fr; background: var(--noir); }
.contact .photo-placeholder, .contact-photo { position: relative; min-height: 620px; overflow: hidden; background: var(--noir); }
.contact-panel { padding: 100px var(--gouttiere-mobile) 90px var(--container); color: var(--blanc); }
.contact-panel .eyebrow { color: var(--or); }
.contact-panel h2, .contact-panel h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.15; margin-bottom: 18px; }
/* Page contact (contact.html) : la section .contact ouvre la page, sans hero.
   Le header quitte la surimpression et passe sur un bandeau noir au-dessus de la photo. */
body:has(.contact--page) .header { position: relative; background: var(--noir); border-bottom: 1px solid var(--hairline-sur-noir); }
.contact--page .contact-panel { padding-top: 80px; }
.contact-panel > p { font-size: var(--texte-m); line-height: 1.6; max-width: 42ch; margin: 0 0 8px; }
.reassurance { display: inline-flex; align-items: center; gap: 10px; font-size: var(--texte-ui); color: var(--or); font-weight: 700; margin: 4px 0 30px; }
.reassurance::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--or); }
.contact form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.contact label { display: block; font-size: var(--texte-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--texte-sur-noir-doux); }
.contact input, .contact select { display: block; width: 100%; margin-top: 8px; background: transparent; border: 0; border-bottom: 1px solid var(--filet-champ-sur-noir); color: var(--blanc); font: var(--texte-m) var(--font-body); padding: 8px 0; }
.contact input::placeholder { color: var(--texte-sur-noir-discret); }
.contact input:focus, .contact select:focus { outline: none; border-bottom-color: var(--or); }
.form-status { font-size: var(--texte-ui); min-height: 20px; color: var(--or); }
.contact textarea { display: block; width: 100%; margin-top: 8px; background: transparent; border: 0; border-bottom: 1px solid var(--filet-champ-sur-noir); color: var(--blanc); font: var(--texte-m)/1.5 var(--font-body); padding: 8px 0; resize: vertical; min-height: 96px; }
.contact textarea::placeholder { color: var(--texte-sur-noir-discret); }
.contact textarea:focus { outline: none; border-bottom-color: var(--or); }
/* Sélecteur de date, flèches du champ nombre et liste déroulante en thème sombre. */
.contact input, .contact select, .contact textarea { color-scheme: dark; }
.contact select option { background: var(--noir); color: var(--blanc); }
.contact .btn { align-self: flex-start; justify-self: start; margin-top: 6px; }
.form-note { margin: 0; font-size: var(--texte-s); line-height: 1.5; color: var(--texte-sur-noir-doux); max-width: 52ch; }
/* Champs courts sur deux colonnes dès que le panneau est assez large (requête de conteneur,
   pas de nouveau point de rupture). Lieu, message, bouton et mentions restent pleine largeur. */
.contact-panel { container-type: inline-size; }
@container (min-width: 460px) {
  .contact form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .contact form > :is(label:has(textarea), label:has(input[name="lieu"]), button, p) { grid-column: 1 / -1; }
}
/* Formulaire Tally : script.js remplace le formulaire par une iframe transparente.
   Le formulaire jaOyV1 utilise le thème sombre de Tally (réglé le 05/10/2026) : il se fond dans le panneau noir.
   Si le formulaire repasse en thème clair, poser une carte blanche : --tally-fond: var(--blanc); --tally-marge: 28px. */
.contact-panel { --tally-fond: transparent; --tally-marge: 0px; }
.contact-panel iframe { display: block; width: 100%; max-width: 560px; border: 0; margin-top: 8px; padding: var(--tally-marge); background: var(--tally-fond); border-radius: var(--rayon); box-sizing: border-box; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
  .contact .photo-placeholder, .contact-photo { min-height: 280px; }
  .contact-panel { padding: 70px var(--gouttiere-mobile); }
  .contact--page .contact-panel { padding-top: 56px; }
}

/* ---------- 09. Footer ---------- */
footer { background: var(--noir); color: var(--blanc); padding: 60px var(--container) 44px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
footer .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-bottom: 14px; }
footer .brand img { width: 40px; height: 40px; border-radius: 50%; }
footer .brand span { font-weight: 700; font-size: var(--texte-m); }
footer address { font-style: normal; font-size: var(--texte-ui); line-height: 1.7; color: var(--texte-sur-noir-doux); }
footer nav { display: flex; flex-direction: column; gap: 10px; }
footer nav a { font-size: var(--texte-ui); text-decoration: none; color: inherit; }
footer nav a:hover { color: var(--or); }
footer .legal { font-size: var(--texte-s); color: var(--texte-sur-noir-discret); grid-column: 1 / -1; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hairline-sur-noir); }

@media (max-width: 860px) {
  footer { grid-template-columns: 1fr 1fr; }
}

/* ---------- 10. Pages éditoriales ---------- */
.page-hero { position: relative; min-height: 540px; display: flex; align-items: end; overflow: hidden; background: var(--noir); color: var(--blanc); }
.page-hero .bg-photo { z-index: 0; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: var(--voile-page-hero); z-index: 1; }
.page-hero-content { position: relative; z-index: 2; width: min(760px, 100%); padding: 170px var(--container) 86px; }
.breadcrumb { margin: 0 0 28px; color: var(--texte-sur-noir); font-size: var(--texte-s); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--or); }
.page-hero .eyebrow { color: var(--or); }
.page-hero h1 { font-size: var(--titre-xl); line-height: 1.04; }
.page-hero p:last-child { max-width: 52ch; margin: 24px 0 0; font-size: var(--texte-l); line-height: 1.6; color: var(--texte-sur-noir-fort); }

/* Bloc d'introduction centré (une seule section). Une suite de plusieurs .page-lead
   bascule automatiquement en mise en page "lecture longue" (section 13). */
.page-lead { max-width: 810px; margin: 0 auto; text-align: center; }
.page-lead h2, .content-copy h2, .faq-heading h2 { font-size: var(--titre-m); line-height: 1.15; }
.page-lead > p:last-child { font-size: var(--texte-l); line-height: 1.7; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-card { min-height: 280px; padding: 30px; border: 1px solid var(--hairline-sur-blanc); display: flex; flex-direction: column; align-items: flex-start; }
.service-card .service-num { margin: 0 0 auto; font-size: var(--texte-s); color: var(--or); font-weight: 700; letter-spacing: .08em; }
.service-card h3 { font-size: var(--titre-carte); margin: 28px 0 12px; }
.service-card p { margin: 0; font-size: var(--texte-m); line-height: 1.6; }
.service-card .text-link { margin-top: 22px; }

.content-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-colonnes); align-items: center; }
.content-media { position: relative; min-height: 420px; overflow: hidden; background: var(--noir); }
.content-copy > p { font-size: var(--texte-base); line-height: 1.7; }
.content-copy .intro-list { margin-top: 24px; }

.faq { background: var(--gris-clair); }
.faq-inner { max-width: 880px; margin: 0 auto; }
.faq-heading { margin-bottom: 34px; }
.faq details { border-top: 1px solid var(--hairline-sur-blanc); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline-sur-blanc); }
.faq summary { cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 700; font-size: var(--titre-liste); padding-right: 30px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: -3px; color: var(--or); font: 28px/1 var(--font-body); }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 72ch; margin: 16px 0 0; line-height: 1.65; }

.page-cta { background: var(--noir); color: var(--blanc); text-align: center; }
.page-cta h2 { font-size: var(--titre-m); }
.page-cta p { max-width: 48ch; margin: 18px auto 28px; line-height: 1.6; color: var(--texte-sur-noir); }

@media (max-width: 860px) {
  .page-hero { min-height: 560px; }
  .page-hero-content { padding: 145px var(--gouttiere-mobile) 64px; }
  .service-grid, .content-split { grid-template-columns: 1fr; }
  .service-card { min-height: 230px; }
  .content-media { min-height: 300px; }
}

/* ---------- 11. Fiches offres : gabarit expérience ---------- */
.experience-hero { min-height: 690px; }
.experience-hero .page-hero-content { max-width: 700px; padding-bottom: 112px; }
.experience-hero h1 { font-size: var(--titre-xxl); }
.experience-opening { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: var(--gap-colonnes); align-items: end; }
.experience-opening .opening-copy { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.35; font-family: var(--font-heading); font-weight: 700; }
.experience-opening .opening-copy p { margin: 0; }
.experience-opening .opening-note { border-top: 1px solid var(--hairline-sur-blanc); padding-top: 20px; font-size: var(--texte-m); line-height: 1.65; }
.experience-panel { background: var(--noir); color: var(--blanc); display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--gap-colonnes); align-items: start; }
.experience-panel h2 { font-size: var(--titre-l); line-height: 1.08; }
.experience-panel .eyebrow { color: var(--or); }
.experience-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline-sur-noir); }
.experience-list li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 21px 0; border-bottom: 1px solid var(--hairline-sur-noir); }
.experience-list b { font-family: var(--font-heading); font-size: var(--titre-liste); }
.experience-list span { color: var(--or); font-size: var(--texte-s); font-weight: 700; padding-top: 5px; }
.experience-list p { grid-column: 2; margin: -9px 0 0; color: var(--texte-sur-noir); line-height: 1.55; }
.experience-visual-break { position: relative; min-height: 520px; overflow: hidden; background: var(--noir); }
.experience-visual-break .bg-photo { position: absolute; }
.experience-visual-break::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62), transparent 68%); }
.experience-visual-break p { position: absolute; z-index: 1; left: var(--container); bottom: 52px; max-width: 17ch; color: var(--blanc); font: 700 clamp(28px, 3.4vw, 44px)/1.1 var(--font-heading); margin: 0; }

/* Hero "affiche" : visuel portrait (ex. 896×1200) calé à droite en pleine hauteur, sans étirement,
   dégradé noir à gauche pour le texte. <section class="page-hero experience-hero page-hero--poster">
   + <img class="bg-photo" …> comme un hero normal. En mobile, l'image repasse en plein cadre. */
.page-hero--poster { background: var(--noir-profond); }
.page-hero--poster .bg-photo { left: auto; right: 0; width: auto; max-width: 62%; height: 100%; object-fit: cover; object-position: center top; }
.page-hero--poster::after { background: var(--voile-affiche); }

/* Univers sucré (<body class="sweet-page">) : le noir des panneaux devient crème,
   l'accent textuel devient caramel (l'or ne passe pas en texte sur fond clair). */
.sweet-hero::after { background: linear-gradient(0deg, rgba(29,13,3,.74), rgba(29,13,3,.08) 65%); }
.sweet-page .experience-opening { align-items: center; }
.sweet-page .opening-copy { color: var(--caramel); }
.sweet-page .experience-panel { background: var(--creme); color: var(--noir); }
.sweet-page .experience-panel .eyebrow { color: var(--caramel); }
.sweet-page .experience-list, .sweet-page .experience-list li { border-color: var(--hairline-sur-creme); }
.sweet-page .experience-list span { color: var(--caramel); }
.sweet-page .experience-list p { color: var(--texte-doux); }

@media (max-width: 860px) {
  .experience-hero { min-height: 610px; }
  .experience-hero .page-hero-content { padding-bottom: 74px; }
  .experience-opening, .experience-panel { grid-template-columns: 1fr; gap: 34px; }
  .experience-visual-break { min-height: 390px; }
  .experience-visual-break p { left: var(--gouttiere-mobile); bottom: 36px; }
  .page-hero--poster .bg-photo { width: 100%; max-width: none; }
  .page-hero--poster::after { background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.55) 60%, rgba(0,0,0,.25)); }
}

/* ---------- 12. Fiches offres : récit, repères pratiques, cartes d'usage ----------
   Balisage de référence : animation-bar-a-crepes-paris.html. */

/* Récit avec photo à droite : <section class="section-pad content-split content-split--reverse"> */
.content-split--reverse .content-media { order: 2; }
/* Note de conclusion d'un récit (conseil de format, quantité) */
.content-copy .copy-note { margin-top: 26px; padding-left: 18px; border-left: 2px solid var(--or); font-size: var(--texte-m); line-height: 1.65; }

/* Repères pratiques : bandeau qui résume l'organisation d'un stand en quatre repères
   (équipe, électricité, installation, sur mesure). Valeurs issues du catalogue uniquement. */
.fiche-pratique { background: var(--noir); color: var(--blanc); }
.fiche-pratique .families-heading p:last-child { color: var(--texte-sur-noir); }
.fiche-pratique .eyebrow { color: var(--or); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline-sur-noir); }
.fact { padding: 28px 28px 8px 0; }
.fact + .fact { padding-left: 28px; border-left: 1px solid var(--hairline-sur-noir); }
.fact dt { font-size: var(--texte-s); letter-spacing: var(--interlettre-label); text-transform: uppercase; font-weight: 700; color: var(--or); margin-bottom: 14px; }
.fact dd { margin: 0; }
.fact strong { display: block; font: 700 var(--titre-repere)/1.15 var(--font-heading); margin-bottom: 10px; }
.fact span { display: block; font-size: 14px; line-height: 1.6; color: var(--texte-sur-noir); }
.fiche-pratique .pairing { margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--hairline-sur-noir); font-size: var(--texte-m); line-height: 1.7; color: var(--texte-sur-noir-fort); max-width: 78ch; }
.fiche-pratique .pairing a { color: var(--blanc); text-decoration-color: var(--or); text-underline-offset: 3px; }
.sweet-page .fiche-pratique { background: var(--creme); color: var(--noir); }
.sweet-page .fiche-pratique .eyebrow, .sweet-page .fact dt { color: var(--caramel); }
.sweet-page .fiche-pratique .families-heading p:last-child, .sweet-page .fact span { color: var(--texte-doux); }
.sweet-page .facts-grid, .sweet-page .fact + .fact, .sweet-page .fiche-pratique .pairing { border-color: var(--hairline-sur-creme); }
.sweet-page .fiche-pratique .pairing { color: rgba(17,17,17,.78); }
.sweet-page .fiche-pratique .pairing a { color: var(--noir); text-decoration-color: var(--caramel); }

/* Cartes d'usage : "pour quels événements", réutilise .families-heading + .service-grid. */
.usage-cards .service-card { min-height: 0; }
.usage-cards .service-card h3 { font-size: 24px; margin-top: 22px; }

@media (max-width: 860px) {
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .fact, .fact + .fact { padding: 22px 16px 10px 0; border-left: 0; }
  .fact:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--hairline-sur-noir); }
  .sweet-page .fact:nth-child(even) { border-color: var(--hairline-sur-creme); }
  .content-split--reverse .content-media { order: 0; }
}
@media (max-width: 520px) {
  .facts-grid { grid-template-columns: 1fr; }
  .fact:nth-child(even) { padding-left: 0; border-left: 0; }
  .fact + .fact { border-top: 1px solid var(--hairline-sur-noir); }
  .sweet-page .fact + .fact { border-color: var(--hairline-sur-creme); }
}

/* ---------- 13. Lecture longue : suites de sections texte ----------
   Dès que deux .page-lead (ou plus) se suivent, le bloc centré étroit devient une mise en page
   éditoriale : sur-titre en filet pleine largeur, titre à gauche, texte à droite, fonds alternés.
   Aucune classe à ajouter dans le HTML. Une .page-lead isolée garde son rendu centré. */
.page-lead:has(+ .page-lead), .page-lead + .page-lead {
  max-width: none; margin: 0; text-align: left;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-colonnes); align-items: start;
}
.page-lead + .page-lead { background: var(--gris-clair); }
.page-lead + .page-lead + .page-lead { background: var(--blanc); }
.page-lead + .page-lead + .page-lead + .page-lead { background: var(--gris-clair); }
.sweet-page .page-lead + .page-lead, .sweet-page .page-lead + .page-lead + .page-lead + .page-lead { background: var(--creme); }
.sweet-page .page-lead + .page-lead + .page-lead { background: var(--blanc); }
/* Tous les enfants vont à droite, sauf le sur-titre (pleine largeur) et le titre (gauche). */
:is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > * { grid-column: 2; }
:is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > .eyebrow {
  grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 18px; max-width: none; margin-bottom: 34px; font-size: var(--texte-s); line-height: 1.5;
}
:is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--or); }
:is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > h2 { grid-column: 1; grid-row: 2 / span 20; max-width: 14ch; }
:is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > h2 + * { grid-row-start: 2; }
:is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > p { max-width: var(--mesure); margin: 0 0 1.1em; font-size: var(--texte-l); line-height: 1.75; }
:is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > h2 + p { font-size: var(--texte-chapo); line-height: 1.65; }
:is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > :last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .page-lead:has(+ .page-lead), .page-lead + .page-lead { grid-template-columns: 1fr; }
  :is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > * { grid-column: 1; }
  :is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > h2 { grid-row: auto; max-width: none; margin-bottom: 22px; }
  :is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > h2 + * { grid-row-start: auto; }
  :is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > .eyebrow { margin-bottom: 22px; }
  :is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > p,
  :is(.page-lead:has(+ .page-lead), .page-lead + .page-lead) > h2 + p { font-size: var(--texte-base); }
}

/* ---------- 14. Composants de contenu ---------- */

/* Pastilles : garnitures, recettes, options. <ul class="chip-list"><li>Nutella</li>…</ul>
   Variante .chip-list--options pour les suppléments ("+" doré). Fonctionne sur fond clair,
   crème ou noir. */
.chip-list { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; text-align: left; }
.chip-list li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--hairline-sur-blanc); border-radius: 999px; background: var(--blanc); font-size: 14px; font-weight: 700; line-height: 1.2; }
.chip-list--options li::before { content: "+"; color: var(--or); font-size: 16px; line-height: 1; }
.experience-panel .chip-list li, .fiche-pratique .chip-list li, .page-cta .chip-list li { background: transparent; border-color: var(--hairline-sur-noir); }
.sweet-page .experience-panel .chip-list li, .sweet-page .fiche-pratique .chip-list li { background: var(--blanc); border-color: var(--hairline-sur-creme); }
.sweet-page .chip-list--options li::before { color: var(--caramel); }

/* Offres associées : maillage interne vers les fiches complémentaires.
   <nav class="related-offers" aria-labelledby="…"><p class="eyebrow">…</p><h2 id="…">…</h2>
   <ul><li><a href="…"><span>Sucré</span><b>Bar à gaufres</b><i aria-hidden="true">→</i></a></li>…</ul></nav>
   À placer comme section : <nav class="section-pad related-offers">. Jamais de lien vers une page inexistante. */
.related-offers h2 { font-size: var(--titre-s); line-height: 1.15; margin-bottom: 34px; max-width: 22ch; }
.related-offers ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--hairline-sur-blanc); }
.related-offers a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; min-height: 120px; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--hairline-sur-blanc); text-decoration: none; color: inherit; transition: padding var(--transition), background-color var(--transition); }
.related-offers li + li a { padding-left: 22px; border-left: 1px solid var(--hairline-sur-blanc); }
.related-offers a span { grid-column: 1 / -1; font-size: var(--texte-xs); letter-spacing: var(--interlettre-label); text-transform: uppercase; font-weight: 700; color: var(--texte-discret); align-self: start; }
.related-offers a b { font-family: var(--font-heading); font-size: var(--titre-liste); letter-spacing: -0.02em; }
.related-offers a i { font-style: normal; font-size: 20px; transition: transform var(--transition); }
.related-offers a:hover { background: var(--gris-clair); }
.related-offers a:hover i { transform: translateX(5px); }

@media (max-width: 860px) {
  .related-offers ul { grid-template-columns: 1fr; }
  .related-offers a, .related-offers li + li a { min-height: 0; padding: 18px 0; border-left: 0; }
}

/* Encadré "bon à savoir" : une information pratique à isoler du texte courant.
   <aside class="callout"><p class="callout-title">Bon à savoir</p><p>…</p></aside> */
.callout { margin: 28px 0; padding: 22px 24px; background: var(--gris-clair); border-left: 3px solid var(--or); text-align: left; max-width: var(--mesure); }
.callout p { margin: 0; font-size: var(--texte-m); line-height: 1.65; }
.callout .callout-title { margin-bottom: 6px; font-size: var(--texte-s); letter-spacing: var(--interlettre-label); text-transform: uppercase; font-weight: 700; }
.page-lead + .page-lead .callout, .sweet-page .callout { background: var(--blanc); }
.experience-panel .callout, .fiche-pratique .callout { background: rgba(255,255,255,.06); }
.sweet-page .experience-panel .callout, .sweet-page .fiche-pratique .callout { background: var(--blanc); border-left-color: var(--caramel); }

/* ---------- 16. Mises en page éditoriales (pour varier le rythme des pages) ----------
   Huit compositions de section. Règle : ne jamais enchaîner deux fois la même composition,
   et ne pas en utiliser plus de deux nouvelles par page en plus du gabarit de base. */

/* A. Mosaïque photo : 3 à 5 <figure>, la première en grand format. */
.mosaic-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; align-items: end; margin-bottom: 40px; }
.mosaic-heading .eyebrow { grid-column: 1; }
.mosaic-heading h2 { grid-column: 1; font-size: var(--titre-m); line-height: 1.15; }
.mosaic-heading h2 + p { grid-column: 2; grid-row: 2; margin: 0; font-size: var(--texte-m); line-height: 1.6; max-width: 40ch; }
.mosaic-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 12px; }
.mosaic-grid figure { position: relative; margin: 0; overflow: hidden; background: var(--noir); }
.mosaic-grid figure:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic-grid:has(> figure:nth-child(3):last-child) figure:not(:first-child) { grid-column: span 2; }
.mosaic-grid:has(> figure:nth-child(4):last-child) figure:nth-child(2) { grid-column: span 2; }
.mosaic-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.mosaic-grid figure:hover img { transform: scale(1.04); }
.mosaic-grid figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); color: var(--blanc); font-size: var(--texte-ui); font-weight: 700; }

/* B. Frise de préparation : 4 étapes, horizontale en desktop, verticale en mobile. */
.timeline-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; border-top: 1px solid var(--hairline-sur-blanc); }
.timeline-steps li { position: relative; padding-top: 34px; }
.timeline-steps li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px var(--blanc); }
.timeline-when { display: block; font-size: var(--texte-s); letter-spacing: var(--interlettre-label); text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.timeline-steps h3 { font-size: var(--titre-liste); line-height: 1.2; margin-bottom: 10px; }
.timeline-steps p { margin: 0; font-size: var(--texte-m); line-height: 1.6; color: var(--texte-doux); }
.sweet-page .timeline-when { color: var(--caramel); }

/* C. Comparatif : 2 ou 3 cartes, une seule en .compare-card--accent. */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.compare-card { display: flex; flex-direction: column; padding: 34px 30px; border: 1px solid var(--hairline-sur-blanc); }
.compare-card h3 { font-size: var(--titre-carte); line-height: 1.15; margin-bottom: 20px; }
.compare-card ul { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.compare-card li { display: flex; gap: 12px; font-size: var(--texte-m); line-height: 1.55; }
.compare-card li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--or); }
.compare-card .text-link { margin-top: 26px; }
.compare-card--accent { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.compare-card--accent .eyebrow, .compare-card--accent .text-link { color: var(--or); }
.compare-card--accent .text-link:hover { color: var(--blanc); }
.sweet-page .compare-card--accent { background: var(--creme); color: var(--noir); border-color: var(--creme); }
.sweet-page .compare-card--accent .eyebrow, .sweet-page .compare-card--accent .text-link { color: var(--caramel); }
.sweet-page .compare-card--accent li::before { background: var(--caramel); }

/* D. Titre collant : le titre reste fixe à gauche, 3 à 5 articles défilent à droite. */
.sticky-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-colonnes); align-items: start; }
.sticky-head { position: sticky; top: 40px; }
.sticky-head h2 { font-size: var(--titre-m); line-height: 1.15; margin-bottom: 18px; }
.sticky-head p:last-child:not(.eyebrow) { margin: 0; font-size: var(--texte-base); line-height: 1.65; max-width: 40ch; color: var(--texte-doux); }
.sticky-body article { padding: 30px 0; border-top: 1px solid var(--hairline-sur-blanc); }
.sticky-body article:first-child { padding-top: 0; border-top: 0; }
.sticky-body h3 { font-size: var(--titre-liste); line-height: 1.25; margin-bottom: 10px; }
.sticky-body p { margin: 0 0 10px; max-width: var(--mesure); font-size: var(--texte-base); line-height: 1.7; }
.sticky-body p:last-child { margin-bottom: 0; }

/* E. Image bord à bord : photo pleine hauteur contre le bord de l'écran, texte sur aplat.
   Fond par défaut gris clair ; variantes --creme et --noir ; --reverse met la photo à droite. */
.bleed-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; background: var(--gris-clair); }
.bleed-media { position: relative; overflow: hidden; background: var(--noir); }
.bleed-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--section-y) var(--container) var(--section-y) var(--gap-colonnes); }
.bleed-split--reverse .bleed-media { order: 2; }
.bleed-split--reverse .bleed-copy { padding: var(--section-y) var(--gap-colonnes) var(--section-y) var(--container); }
.bleed-copy h2 { font-size: var(--titre-m); line-height: 1.15; margin-bottom: 20px; max-width: 16ch; }
.bleed-copy p:not(.eyebrow) { margin: 0 0 14px; max-width: 46ch; font-size: var(--texte-base); line-height: 1.7; }
.bleed-copy .btn { margin-top: 16px; }
.bleed-split--creme { background: var(--creme); }
.bleed-split--creme .eyebrow { color: var(--caramel); }
.bleed-split--noir { background: var(--noir); color: var(--blanc); }
.bleed-split--noir .eyebrow { color: var(--or); }
.bleed-split--noir .bleed-copy p:not(.eyebrow) { color: var(--texte-sur-noir); }

/* F. Rail de recettes : 4 à 8 cartes, défilement horizontal natif avec scroll-snap. */
.rail { list-style: none; display: flex; gap: var(--gap-cartes); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--container) * -1); padding: 0 var(--container) 10px; scroll-padding-left: var(--container); }
.rail li { flex: none; width: 270px; scroll-snap-align: start; }
.rail img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--noir); margin-bottom: 16px; }
.rail h3 { font-size: var(--titre-liste); line-height: 1.2; margin-bottom: 8px; }
.rail p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texte-doux); }

/* G. Carte en surimpression : grande photo pleine largeur, carte blanche posée dessus. */
.overlay-feature { position: relative; min-height: 640px; display: flex; align-items: center; padding: var(--section-y) var(--container); overflow: hidden; background: var(--noir); }
.overlay-feature .bg-photo { z-index: 0; }
.overlay-card { position: relative; z-index: 1; max-width: 470px; padding: 44px 42px; background: var(--blanc); box-shadow: var(--ombre-menu); }
.overlay-card h2 { font-size: var(--titre-s); line-height: 1.15; margin-bottom: 16px; }
.overlay-card p:not(.eyebrow) { margin: 0; font-size: var(--texte-base); line-height: 1.65; }
.overlay-card .text-link { margin-top: 24px; }

/* H. Phrase manifeste : une grande phrase en typo de titre, sans image.
   Un mot peut être mis en avant avec <em> (souligné or, la couleur or étant interdite en texte sur blanc). */
.statement { text-align: center; }
.statement-text { max-width: 26ch; margin: 0 auto; font: 700 clamp(30px, 4vw, 56px)/1.18 var(--font-heading); letter-spacing: -0.03em; }
.statement-text em { font-style: italic; text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.statement-meta { margin: 30px 0 0; font-size: var(--texte-s); letter-spacing: var(--interlettre-label); text-transform: uppercase; font-weight: 700; color: var(--texte-discret); }
.sweet-page .statement-text { color: var(--caramel); }

@media (max-width: 860px) {
  .mosaic-heading { grid-template-columns: 1fr; }
  .mosaic-heading h2 + p { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .mosaic-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 8px; }
  .mosaic-grid figure:first-child { grid-column: 1 / -1; grid-row: span 2; }
  .mosaic-grid figure:not(:first-child), .mosaic-grid:has(> figure:nth-child(3):last-child) figure:not(:first-child), .mosaic-grid:has(> figure:nth-child(4):last-child) figure:nth-child(2) { grid-column: auto; }
  .mosaic-grid:has(> figure:nth-child(4):last-child) figure:last-child, .mosaic-grid:has(> figure:nth-child(2):last-child) figure:last-child { grid-column: 1 / -1; }
  .timeline-steps { grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; border-top: 0; border-left: 1px solid var(--hairline-sur-blanc); margin-left: 5px; }
  .timeline-steps li { padding: 0 0 30px 28px; }
  .timeline-steps li:last-child { padding-bottom: 0; }
  .timeline-steps li::before { top: 4px; left: -6px; }
  .sticky-split { grid-template-columns: 1fr; gap: 30px; }
  .sticky-head { position: static; }
  .bleed-split { grid-template-columns: 1fr; min-height: 0; }
  .bleed-media { min-height: 320px; }
  .bleed-split--reverse .bleed-media { order: 0; }
  .bleed-copy, .bleed-split--reverse .bleed-copy { padding: 64px var(--gouttiere-mobile); }
  .rail li { width: 230px; }
  .overlay-feature { min-height: 0; flex-direction: column; align-items: stretch; padding: 260px var(--gouttiere-mobile) var(--gouttiere-mobile); }
  .overlay-card { padding: 30px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-grid img { transition: none; }
}

/* A bis. Galerie : variante régulière de la mosaïque (galerie.html). Vignettes identiques en 4/3,
   3 colonnes, 2 sous 860px, 1 sous 520px ; légende discrète sous l'image, pas en surimpression. */
.mosaic-grid--gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 34px 18px; }
.mosaic-grid--gallery figure, .mosaic-grid--gallery figure:first-child,
.mosaic-grid--gallery figure:not(:first-child), .mosaic-grid--gallery figure:nth-child(n) { grid-column: auto; grid-row: auto; overflow: visible; background: none; }
.mosaic-grid--gallery img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--noir); }
.mosaic-grid--gallery figure:hover img { transform: none; opacity: 0.92; }
.mosaic-grid--gallery figcaption { position: static; padding: 10px 0 0; background: none; color: var(--texte-doux); font-size: var(--texte-ui); font-weight: 400; line-height: 1.45; }
@media (max-width: 860px) {
  .mosaic-grid--gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
}
@media (max-width: 520px) {
  .mosaic-grid--gallery { grid-template-columns: 1fr; }
}

/* ---------- 17. Blog : liste (blog.html) et article (post/<slug>.html) ---------- */

/* Liste : cartes article sur 2 colonnes, image 16/10, titre en Playfair. */
.blog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.post-card { display: flex; flex-direction: column; align-items: flex-start; }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--noir); margin-bottom: 22px; }
.post-card .eyebrow { margin-bottom: 10px; }
.post-card h2 { font-size: var(--titre-carte); line-height: 1.2; margin-bottom: 12px; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post-card > p:not(.eyebrow) { margin: 0; font-size: var(--texte-m); line-height: 1.65; color: var(--texte-doux); max-width: 56ch; }
.post-card .text-link { margin-top: 18px; }

/* Article : colonne de lecture unique, alignée à gauche, ~70 caractères par ligne. */
.article-body { max-width: calc(70ch + 2 * var(--container)); }
.article-body > * { max-width: 70ch; }
.article-meta { margin: 0 0 40px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline-sur-blanc); font-size: var(--texte-ui); color: var(--texte-discret); }
.article-body h2 { font-size: var(--titre-s); line-height: 1.2; margin: 56px 0 18px; }
.article-body h3 { font-size: var(--titre-liste); line-height: 1.3; margin: 36px 0 12px; }
.article-meta + h2, .article-meta + h3 { margin-top: 0; }
.article-body p { margin: 0 0 1.15em; font-size: var(--texte-l); line-height: 1.75; }
.article-body ul, .article-body ol { margin: 0 0 1.4em; padding-left: 1.3em; font-size: var(--texte-l); line-height: 1.7; }
.article-body li { margin-bottom: 0.45em; }
.article-body ul li::marker { color: var(--or); }
.article-body ol li::marker { font-weight: 700; }
.article-body p a, .article-body li a { text-decoration-color: var(--or); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.article-body p a:hover, .article-body li a:hover { text-decoration-thickness: 2.5px; }
.article-body .callout { margin: 36px 0; }
.article-body img { width: 100%; height: auto; margin: 36px 0; }

@media (max-width: 860px) {
  .blog-list { grid-template-columns: 1fr; gap: 48px; }
  .post-card h2 { font-size: 24px; }
  .article-body { max-width: none; }
  .article-body h2 { margin-top: 44px; }
  .article-body p, .article-body ul, .article-body ol { font-size: var(--texte-base); }
}

/* ---------- 15. Exceptions par page (visuels de hero) ----------
   Dette à résorber : ces visuels devraient être des <img class="bg-photo"> dans le HTML de chaque page.
   En attendant, chaque page est ciblée par son URL canonique (stable), jamais par un texte
   éditorial (meta description, alt) qui peut être réécrit. */
html:has(link[rel="canonical"][href$="/animation-pizza-paris"]) .page-hero { background: url('assets/pizza2.png') center / cover no-repeat; }
html:has(link[rel="canonical"][href$="/animation-pizza-paris"]) .content-media:has(p[style]) { background: url('assets/pizza.webp') center / cover no-repeat; }
html:has(link[rel="canonical"][href$="/animation-pizza-paris"]) .content-media:has(p[style]) p { display: none; }

/* Les anciennes vignettes ne doivent jamais être étirées en hero. */
html:has(link[rel="canonical"][href$="/animation-bar-a-champagne-paris"]) .page-hero { background: url('assets/tchin-champagne.png') center / cover no-repeat; }
html:has(link[rel="canonical"][href$="/stand-a-smoothie-paris"]) .page-hero { background: url('assets/smoothies.png') center / cover no-repeat; }
html:has(link[rel="canonical"][href$="/animation-stand-barbe-a-papa"]) .page-hero { background: url('assets/barbe-a-papa-enfant.png') center / cover no-repeat; }

/* Visuels verticaux présentés comme une affiche à droite, sans étirement ni perte de netteté. */
html:has(link[rel="canonical"][href$="/animation-grilled-cheese-paris"]) .page-hero { background: var(--noir-profond) url('assets/grilled-cheese.jpeg') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-grilled-cheese-paris"]) .page-hero::after { background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.82) 48%, rgba(0,0,0,.2) 100%); }
html:has(link[rel="canonical"][href$="/animation-foodtruck-kebab-paris"]) .page-hero { background: var(--noir-profond) url('assets/firefly-photographie-d-un-kebab-au-poulet-avec-des-frites-dans-une-barquette-alimentaire-en-c-963324.png') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-foodtruck-kebab-paris"]) .page-hero::after { background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.78) 52%, rgba(0,0,0,.12)); }
html:has(link[rel="canonical"][href$="/mini-hotdog-burger-paris"]) .page-hero { background: var(--noir-profond) url('assets/mini-burger.jpeg') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-viandes-slicees-paris"]) .page-hero { background: var(--noir-profond) url('assets/firefly-gemini-flash-dans-une-barquette-en-carton-des-frites-dorees-avec-des-morceaux-de-bavette-de-boeuf-236230.png') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-gyros-paris"]) .page-hero { background: var(--noir-profond) url('assets/firefly-gemini-flash-photo-d-un-sandwich-kebab-avec-la-recette-suivante-pain-pita-poulet-marine-salade-236230.png') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-focaccia-paris"]) .page-hero { background: var(--noir-profond) url('assets/mini-focaccia.jpeg') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/bar-a-frites-paris"]) .page-hero { background: var(--noir-profond) url('assets/firefly-gemini-flash-dans-une-barquette-en-carton-des-frites-dorees-avec-des-morceaux-de-bavette-de-boeuf-236230.png') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-nachos-paris"]) .page-hero { background: var(--noir-profond) url('assets/Mexicain.png') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/selection-planches-gourmandes-evenement"]) .page-hero { background: var(--noir-profond) url('assets/famille-traiteur.webp') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-lobster-roll-paris"]) .page-hero { background: var(--noir-profond) url('assets/firefly-photographie-d-un-sandwich-lobster-roll-dans-une-barquette-en-carton-accompagne-de-fr-236230.png') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-fish-n-chips-paris"]) .page-hero { background: var(--noir-profond) url('assets/whatsapp-image-2026-02-20-at-10-09-17.jpeg') right center / auto 100% no-repeat; }
html:has(link[rel="canonical"][href$="/animation-stand-a-wraps-paris"]) .page-hero { background: var(--noir-profond) url('assets/whatsapp-image-2026-04-14-at-17-27-03.jpeg') right center / auto 100% no-repeat; }
:is(
  html:has(link[rel="canonical"][href$="/mini-hotdog-burger-paris"]),
  html:has(link[rel="canonical"][href$="/animation-viandes-slicees-paris"]),
  html:has(link[rel="canonical"][href$="/animation-gyros-paris"]),
  html:has(link[rel="canonical"][href$="/animation-focaccia-paris"]),
  html:has(link[rel="canonical"][href$="/bar-a-frites-paris"]),
  html:has(link[rel="canonical"][href$="/animation-nachos-paris"]),
  html:has(link[rel="canonical"][href$="/selection-planches-gourmandes-evenement"])
) .page-hero::after { background: var(--voile-affiche); }

/* Visuel produit de la page raclette (l'image du HTML est masquée au profit du raclette bowl). */
html:has(link[rel="canonical"][href$="/animation-stand-a-raclette-paris"]) .content-media:has(img[src="assets/stand-raclette.png"]) { background: url('assets/raclette-bowl.png') center / cover no-repeat; }
html:has(link[rel="canonical"][href$="/animation-stand-a-raclette-paris"]) .content-media img[src="assets/stand-raclette.png"] { opacity: 0; }

/* ===== Section d'ouverture : texte + photo (refonte 2026-10-06) ===== */
/* Deux colonnes : bloc texte (titre + chapô + note) | photo. */
.experience-opening { align-items: center; }
.experience-opening .opening-text { display: grid; gap: 26px; }
/* Le titre reste l'accent fort ; le paragraphe redevient un chapô lisible,
   au lieu d'un bloc entier en gras serif. */
.experience-opening .opening-copy { font-family: inherit; font-weight: 400; font-size: inherit; color: inherit; }
.experience-opening .opening-copy h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.18; color: var(--caramel); margin: 0 0 16px; }
.experience-opening .opening-copy p { font-family: var(--font-body); font-weight: 400; font-size: var(--texte-chapo); line-height: 1.7; color: var(--texte-doux); margin: 0; }
.experience-opening .opening-note { border-top: 1px solid var(--hairline-sur-blanc); padding-top: 18px; }
.opening-media { margin: 0; }
.opening-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-carte); background: var(--gris-clair); }
@media (max-width: 860px) {
  .experience-opening .opening-text { gap: 22px; }
  .opening-media { margin-top: 6px; }
}

footer .legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
footer .legal a:hover { color: var(--texte-sur-noir); }

/* Pages sans visuel en tête (légales, 404) : bandeau d en-tête noir */
.page-plain .header { position: relative; background: var(--noir); }