/* Les Planches du Castelas — vitrine · mobile-first */
/* Fonts chargées via <link> dans chaque page (perf) */

:root {
  /* Palette — extrait de lesplanchesducastelas.fr (page en construction) */
  --brun: #5C1A1A;
  --brun-bg: #6B1E1E;
  --brun-deep: #5C1515;
  --brun-dark: #3D1010;
  --terracotta: #8B3A2A;
  --or: #C8963C;
  --or-hover: #D4A44A;
  --ivoire: #F0E6D3;
  --beige: #D4A97A;
  --blanc: #FDFAF7;
  --pierre: #A07860;
  --vert: #7A9B6A;
  --gris: #EEE5D8;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-script: 'Dancing Script', cursive;
  --wrap: min(1120px, 100% - 2rem);
  --nav-h: 56px;
  --touch: 44px;
  --radius: 10px;
  --radius-btn: 4px;
  --shadow: 0 4px 24px rgba(92, 26, 26, 0.08);
  --shadow-wine: 0 8px 32px rgba(0, 0, 0, 0.18);
  --border-or: rgba(200, 150, 60, 0.45);
  --border-or-soft: rgba(200, 150, 60, 0.35);
  --border-btn-light: rgba(160, 120, 96, 0.38);
  --border-btn-dark: rgba(200, 150, 60, 0.42);
  --text-btn-light: var(--pierre);
  --text-btn-light-hover: var(--brun);
  --text-btn-dark: var(--beige);
  --text-btn-dark-hover: var(--ivoire);
  /* Dégradés & texture — surfaces rouge */
  --wine-gradient: linear-gradient(165deg, #6B1E1E 0%, #5C1515 48%, #3D1010 100%);
  --wine-gradient-soft: linear-gradient(180deg, #5C1515 0%, #6B1E1E 100%);
  --wine-radial-a: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(200, 150, 60, 0.15) 0%, transparent 55%);
  --wine-radial-b: radial-gradient(ellipse 50% 40% at 80% 20%, rgba(139, 58, 42, 0.12) 0%, transparent 50%);
  --wine-radial-c: radial-gradient(ellipse 60% 40% at 20% 80%, rgba(200, 150, 60, 0.12) 0%, transparent 60%);
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  /* Spectre de transition clair → rouge (UX — pas de coupure nette) */
  --spectrum-0: #FDFAF7;
  --spectrum-1: #FAF4EC;
  --spectrum-2: #F5EBDF;
  --spectrum-3: #EDDFCF;
  --spectrum-4: #E2CEBB;
  --spectrum-5: #D4B89E;
  --spectrum-6: #C49A82;
  --spectrum-7: #A87062;
  --spectrum-8: #884840;
  --spectrum-9: #6B2820;
  --spectrum-10: #5C1515;
  --spectrum-11: #4A1210;
  /* Typo — verrouillée construction */
  --text-geo: 0.625rem;
  --text-caption: 0.6875rem;
  --text-keywords: 0.78125rem;
  --text-tag: 0.75rem;
  --text-desc: 0.84375rem;
  --text-accroche: clamp(1rem, 2.5vw, 1.1875rem);
  --text-hero-script: clamp(3.5rem, 11vw, 6rem);
  --text-hero-script-mobile: clamp(2.75rem, 13vw, 4.25rem);
  --text-btn: var(--text-tag);
  --btn-pad-y: 0.5rem;
  --btn-pad-x: 1.125rem;
  --text-label: var(--text-caption);
  --text-label-spacing: 0.26em;
  --text-label-spacing-wide: 0.3em;
  --text-btn-spacing: 0.08em;
  --content-narrow: 700px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--brun);
  background: var(--blanc);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }
.split-grid > * { min-width: 0; }
.step-text, .info-value, .faq-a, .prod-desc, .footer-contact { overflow-wrap: anywhere; word-break: break-word; }

/* ── Nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 250, 247, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 0.5px solid var(--gris);
}
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1rem;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo {
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 600;
  color: var(--brun);
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 3.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.nav-logo:hover { text-decoration: none; color: var(--terracotta); }
.nav-toggle {
  display: none;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  touch-action: manipulation;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brun);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0.375rem 0.5rem;
  font-size: var(--text-btn);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--pierre);
  text-decoration: none;
  border-radius: 8px;
  touch-action: manipulation;
  line-height: 1.35;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--brun);
  background: var(--gris);
  text-decoration: none;
}
.nav-cta {
  background: transparent !important;
  color: var(--text-btn-light) !important;
  border: 0.5px solid var(--border-btn-light) !important;
  font-weight: 300 !important;
  font-size: var(--text-btn) !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  border-radius: 50px !important;
  padding: 0.5rem 0.875rem !important;
  margin-left: 0.25rem;
  line-height: 1.35;
}
.nav-cta:hover {
  background: transparent !important;
  border-color: var(--or) !important;
  color: var(--text-btn-light-hover) !important;
}

/* ── Séparateurs ornementaux (page en construction) ── */
.geo-row,
.sep-ornament,
.sous-titre-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
}
.geo-row { margin-bottom: 1.1rem; }
.geo-row .line,
.sous-titre-row .line,
.sep-ornament .line {
  height: 0.5px;
  background: var(--or);
  flex-shrink: 0;
}
.geo-row .line { width: 48px; opacity: 0.7; }
.sous-titre-row .line {
  flex: 1;
  max-width: 80px;
  opacity: 0.6;
}
.sep-ornament .line { width: 40px; }
.sep-ornament { margin: 1.5rem 0; opacity: 0.5; }
.page-header .sep-ornament .line,
.page-header .sep-ornament .diamond { background: var(--or); }
.section-dark .sep-ornament .line,
.section-highlight .sep-ornament .line,
.section-dark .sep-ornament .diamond,
.section-highlight .sep-ornament .diamond { background: var(--or); }
.geo-row .diamond,
.sep-ornament .diamond {
  width: 7px;
  height: 7px;
  background: var(--or);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.sep-ornament .diamond { width: 5px; height: 5px; }
.geo-row span:not(.line):not(.diamond) {
  font-family: var(--font-body);
  font-size: var(--text-geo);
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--or);
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.geo-row--light span:not(.line):not(.diamond) { color: var(--terracotta); }
.geo-row--light .line,
.geo-row--light .diamond { background: var(--terracotta); }
.sous-titre-row { margin: 0.6rem 0 1.8rem; gap: 16px; }
.sous-titre {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--or);
  font-weight: 500;
  white-space: normal;
  text-align: center;
  line-height: 1.5;
  max-width: 100%;
}
.hero .sous-titre { color: var(--or); }

/* ── Typography ── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--text-label-spacing-wide);
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1rem;
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  height: 0.5px;
  width: 32px;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
.eyebrow::before {
  width: 7px;
  height: 7px;
  background: currentColor;
  opacity: 0.85;
  transform: rotate(45deg);
  border-radius: 0;
}
.eyebrow-center { justify-content: center; }
.eyebrow-or { color: var(--or); }
.page-header .eyebrow,
.section-dark .eyebrow { color: var(--or); }
.page-header .eyebrow::before,
.page-header .eyebrow::after,
.section-dark .eyebrow::before,
.section-dark .eyebrow::after { background: var(--or); }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--brun);
  margin: 0 0 1.25rem;
  letter-spacing: 0.01em;
}
/* Corps de section — Jost .desc construction (PAS italic) */
.lead,
.desc {
  font-family: var(--font-body);
  font-size: var(--text-desc);
  font-weight: 300;
  font-style: normal;
  color: var(--pierre);
  line-height: 1.75;
  max-width: 36rem;
  opacity: 0.85;
}
/* Accroche — Cormorant italic (.accroche construction) */
.accroche,
.hero-text,
.hero-dark-text,
.highlight-quote {
  font-family: var(--font-display);
  font-size: var(--text-accroche);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
}
.accroche {
  color: var(--beige);
  max-width: 36rem;
  margin-inline: auto;
}
/* Corps sur fond sombre — Jost (pas italic) */
.page-header .lead,
.section-highlight .lead {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.75;
}

/* ── Surfaces rouge (construction) ── */
.surface-wine,
.hero,
.page-header,
.section-dark,
.section-highlight,
.footer {
  background: var(--wine-gradient);
  color: var(--ivoire);
  position: relative;
  overflow: hidden;
}
.surface-wine::before,
.hero::before,
.page-header::before,
.section-dark::before,
.section-highlight::before,
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-noise);
  opacity: 0.4;
  pointer-events: none;
}
.surface-wine::after,
.hero::after,
.page-header::after,
.section-dark::after,
.section-highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wine-radial-a), var(--wine-radial-b), var(--wine-radial-c);
  pointer-events: none;
}
.hero::after,
.page-header::after,
.section-dark::after {
  background:
    var(--wine-radial-c),
    var(--wine-radial-b),
    linear-gradient(180deg, transparent 55%, rgba(253, 250, 247, 0.06) 88%, rgba(250, 244, 236, 0.14) 100%);
}

/* ── Sections — spectre dégradé (cycle 4 tons, transitions douces) ── */
.section {
  padding: 4.5rem 0;
  position: relative;
  isolation: isolate;
}
.section + .section:not(.section-highlight) {
  margin-top: -1px; /* évite la ligne de couture entre dégradés */
}

/* Plume de fondu en haut de chaque section */
.hero ~ .section:not(.section-highlight)::before,
.page-header ~ .section:not(.section-highlight)::before,
.section-dark ~ .section:not(.section-highlight)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(48px, 8vw, 96px);
  background: linear-gradient(180deg, rgba(92, 21, 21, 0.07) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.hero ~ .section:not(.section-highlight):nth-of-type(4n+1)::before,
.page-header ~ .section:not(.section-highlight):nth-of-type(4n+1)::before,
.section-dark ~ .section:not(.section-highlight):nth-of-type(4n+1)::before {
  opacity: 1;
}

/* Ton 1 — crème : descente douce depuis le hero / en-tête */
.hero ~ .section:not(.section-highlight):nth-of-type(4n+1),
.page-header ~ .section:not(.section-highlight):nth-of-type(4n+1),
.section-dark ~ .section:not(.section-highlight):nth-of-type(4n+1) {
  background: linear-gradient(
    180deg,
    rgba(107, 40, 32, 0.14) 0%,
    var(--spectrum-1) 14%,
    var(--spectrum-0) 52%,
    var(--spectrum-2) 100%
  );
  color: var(--brun);
}

/* Ton 2 — blush chaud */
.hero ~ .section:not(.section-highlight):nth-of-type(4n+2),
.page-header ~ .section:not(.section-highlight):nth-of-type(4n+2),
.section-dark ~ .section:not(.section-highlight):nth-of-type(4n+2) {
  background: linear-gradient(
    180deg,
    var(--spectrum-2) 0%,
    var(--spectrum-3) 38%,
    var(--spectrum-4) 100%
  );
  color: var(--brun);
}

/* Ton 3 — sable rosé (mi-chemin, encore lisible en brun) */
.hero ~ .section:not(.section-highlight):nth-of-type(4n+3),
.page-header ~ .section:not(.section-highlight):nth-of-type(4n+3),
.section-dark ~ .section:not(.section-highlight):nth-of-type(4n+3) {
  background: linear-gradient(
    180deg,
    var(--spectrum-4) 0%,
    var(--spectrum-5) 42%,
    var(--spectrum-6) 100%
  );
  color: var(--brun-dark);
}
.hero ~ .section:nth-of-type(4n+3) .eyebrow,
.page-header ~ .section:nth-of-type(4n+3) .eyebrow,
.section-dark ~ .section:nth-of-type(4n+3) .eyebrow {
  color: var(--terracotta);
}
.hero ~ .section:nth-of-type(4n+3) .lead,
.page-header ~ .section:nth-of-type(4n+3) .lead,
.section-dark ~ .section:nth-of-type(4n+3) .lead {
  color: #7A4A38;
  opacity: 0.92;
}

/* Ton 4 — wine : enchaîne spectrum-6 (fin du ton 3) puis descente progressive */
.hero ~ .section:not(.section-highlight):nth-of-type(4n),
.page-header ~ .section:not(.section-highlight):nth-of-type(4n),
.section-dark ~ .section:not(.section-highlight):nth-of-type(4n) {
  background: linear-gradient(
    180deg,
    var(--spectrum-8) 0%,
    var(--spectrum-9) 18%,
    var(--spectrum-10) 45%,
    var(--spectrum-11) 100%
  );
  color: var(--ivoire);
}
.hero ~ .section:not(.section-highlight):nth-of-type(4n)::before,
.page-header ~ .section:not(.section-highlight):nth-of-type(4n)::before,
.section-dark ~ .section:not(.section-highlight):nth-of-type(4n)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(32px, 5vw, 56px);
  background: linear-gradient(180deg, var(--spectrum-6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.hero ~ .section:not(.section-highlight):nth-of-type(4n)::after,
.page-header ~ .section:not(.section-highlight):nth-of-type(4n)::after,
.section-dark ~ .section:not(.section-highlight):nth-of-type(4n)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-noise);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.section + .section-highlight {
  margin-top: -1px;
}

/* CTA + footer — prolongation du wine, pas de reprise claire */
.section-highlight {
  background: linear-gradient(
    180deg,
    var(--spectrum-11) 0%,
    var(--spectrum-11) 45%,
    #451816 78%,
    #3D1010 100%
  );
}
.section-highlight::before {
  opacity: 0.28;
}
.section-highlight::after {
  background:
    var(--wine-radial-a),
    var(--wine-radial-b);
}
.section .wrap { position: relative; z-index: 1; }

/* Typo sur fond wine (4e ton du cycle + highlight) */
.hero ~ .section:nth-of-type(4n) .eyebrow,
.page-header ~ .section:nth-of-type(4n) .eyebrow,
.section-dark ~ .section:nth-of-type(4n) .eyebrow,
.page-header .eyebrow,
.section-dark .eyebrow,
.section-highlight .eyebrow {
  color: var(--or);
}
.hero ~ .section:nth-of-type(4n) .eyebrow::before,
.hero ~ .section:nth-of-type(4n) .eyebrow::after,
.page-header ~ .section:nth-of-type(4n) .eyebrow::before,
.page-header ~ .section:nth-of-type(4n) .eyebrow::after,
.section-dark ~ .section:nth-of-type(4n) .eyebrow::before,
.section-dark ~ .section:nth-of-type(4n) .eyebrow::after,
.page-header .eyebrow::before,
.page-header .eyebrow::after,
.section-dark .eyebrow::before,
.section-dark .eyebrow::after {
  background: var(--or);
}
.hero ~ .section:nth-of-type(4n) .section-title,
.page-header ~ .section:nth-of-type(4n) .section-title,
.section-dark ~ .section:nth-of-type(4n) .section-title,
.page-header .section-title,
.section-dark .section-title,
.section-dark .hero-dark-title,
.section-dark .hero-events-title {
  color: var(--ivoire);
}
.hero ~ .section:nth-of-type(4n) .lead,
.page-header ~ .section:nth-of-type(4n) .lead,
.section-dark ~ .section:nth-of-type(4n) .lead,
.page-header .lead,
.section-highlight .lead {
  color: var(--beige);
  opacity: 0.92;
}
.hero ~ .section:nth-of-type(4n) .muted,
.page-header ~ .section:nth-of-type(4n) .muted,
.section-dark ~ .section:nth-of-type(4n) .muted {
  color: var(--pierre);
}

/* En-têtes de page & hero */
.page-header,
.section-dark,
.section-highlight {
  text-align: center;
}
.page-header .wrap,
.section-dark .wrap,
.section-highlight .wrap { position: relative; z-index: 1; }
.page-header {
  padding: 4rem 1rem 3rem;
  border-bottom: none;
}
.section-dark { padding: 4rem 1.5rem 3.5rem; }
.section-highlight { padding: 3.5rem 1rem; }

.page-header .geo-row span:not(.line):not(.diamond),
.section-dark .geo-row span:not(.line):not(.diamond) {
  color: var(--or);
}
.page-header .geo-row .line,
.page-header .geo-row .diamond,
.section-dark .geo-row .line,
.section-dark .geo-row .diamond {
  background: var(--or);
}
.page-header .hero-events-title,
.page-header .hero-dark-title {
  color: var(--ivoire);
  margin-bottom: 0.75rem;
}
.page-header .lead,
.section-dark .hero-dark-text {
  color: var(--beige);
  opacity: 0.92;
  margin-inline: auto;
}
.section-highlight .lead {
  text-align: center;
  margin-inline: auto;
  opacity: 0.9;
}

/* Blocs éditoriaux centrés (Le projet, etc.) */
.section-editorial .wrap {
  max-width: var(--content-narrow);
  text-align: center;
}
.section-editorial .eyebrow { justify-content: center; }
.section-editorial .lead { margin-inline: auto; }
.section-editorial .sep-ornament { margin: 1.25rem auto 0; }

/* Keywords row — construction */
.keywords {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 1.8rem;
}
.keywords span {
  font-family: var(--font-body);
  font-size: var(--text-keywords);
  color: var(--beige);
  font-weight: 300;
}
.keywords .sep {
  width: 4px;
  height: 4px;
  background: var(--or);
  border-radius: 50%;
  margin: 0 10px;
  opacity: 0.7;
  flex-shrink: 0;
}
.bientot {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: var(--text-label-spacing-wide);
  text-transform: uppercase;
  color: var(--beige);
  margin-bottom: 0.6rem;
}

.text-center { text-align: center; }
.text-center .eyebrow { justify-content: center; }
.text-center .lead { margin-inline: auto; }
.narrow { max-width: 760px; margin-inline: auto; }
.prose p {
  font-family: var(--font-body);
  font-size: var(--text-desc);
  font-weight: 300;
  color: var(--pierre);
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

/* ── Hero ── */
.hero {
  padding: 5rem 1.5rem 4.5rem;
  text-align: center;
}
.hero > * { position: relative; z-index: 1; }
.hero .geo-row,
.hero .hero-title,
.hero .sous-titre-row,
.hero .keywords,
.hero .hero-text,
.hero .sep-ornament,
.hero .hero-cta {
  max-width: var(--content-narrow);
  margin-left: auto;
  margin-right: auto;
}
.hero-eyebrow { display: none; }
.hero-title,
.titre-principal {
  font-family: var(--font-script);
  font-size: var(--text-hero-script);
  font-weight: 600;
  color: var(--ivoire);
  line-height: 1;
  margin: 0 0 0.1rem;
  letter-spacing: -0.01em;
}
.hero-sub { display: none; }
.hero-text {
  color: var(--ivoire);
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  opacity: 0.92;
}
.hero .sep-ornament { margin: 0.5rem auto 2rem; }

/* Animations — page en construction */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero .geo-row,
.hero .hero-title,
.hero .sous-titre-row,
.hero .keywords,
.hero .hero-text,
.hero .sep-ornament,
.hero .hero-cta {
  animation: fadeUp 0.7s ease both;
}
.hero .geo-row { animation-delay: 0.05s; }
.hero .hero-title { animation-delay: 0.2s; }
.hero .sous-titre-row { animation-delay: 0.28s; }
.hero .keywords { animation-delay: 0.34s; }
.hero .hero-text { animation-delay: 0.4s; }
.hero .sep-ornament { animation-delay: 0.56s; }
.hero .hero-cta { animation-delay: 0.62s; }

.hero-dark-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--ivoire);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}
.hero-script {
  font-family: var(--font-script);
  font-size: var(--text-hero-script);
  color: var(--ivoire);
  line-height: 1;
  margin: 0 0 0.1rem;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.hero-dark-sub {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--or);
  font-weight: 500;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.hero-dark-text {
  color: var(--beige);
  max-width: 36rem;
  margin: 0 auto;
  opacity: 0.92;
}

/* ── Buttons (pilules fines — modèle construction .tag 12px) ── */
.btn,
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-body);
  font-size: var(--text-btn);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-transform: none;
  text-decoration: none;
  border-radius: 50px;
  border: 0.5px solid var(--border-btn-light);
  background: transparent;
  color: var(--text-btn-light);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, opacity 0.15s;
  touch-action: manipulation;
}
.btn:hover,
.hero-cta:hover {
  text-decoration: none;
  border-color: var(--or);
  color: var(--text-btn-light-hover);
  background: transparent;
}
.btn:active,
.hero-cta:active,
.nav-links a:active,
.nav-cta:active {
  opacity: 0.82;
}

/* Alias — même rendu (compat HTML existant) */
.btn-primary,
.btn-or,
.btn-outline {
  background: transparent;
  color: var(--text-btn-light);
  border-color: var(--border-btn-light);
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: none;
  border-radius: 50px;
}
.btn-primary:hover,
.btn-or:hover,
.btn-outline:hover {
  background: transparent;
  border-color: var(--or);
  color: var(--text-btn-light-hover);
}

/* Fond sombre — bordures or, texte beige */
.hero .btn,
.hero .hero-cta,
.page-header .btn,
.section-dark .btn,
.section-highlight .btn,
.hero ~ .section:nth-of-type(4n) .btn,
.page-header ~ .section:nth-of-type(4n) .btn,
.section-dark ~ .section:nth-of-type(4n) .btn,
.cookie-banner .btn {
  color: var(--text-btn-dark);
  border-color: var(--border-btn-dark);
}
.hero .btn:hover,
.hero .hero-cta:hover,
.page-header .btn:hover,
.section-dark .btn:hover,
.section-highlight .btn:hover,
.hero ~ .section:nth-of-type(4n) .btn:hover,
.page-header ~ .section:nth-of-type(4n) .btn:hover,
.section-dark ~ .section:nth-of-type(4n) .btn:hover,
.cookie-banner .btn:hover {
  border-color: var(--or);
  color: var(--text-btn-dark-hover);
  background: transparent;
}

.btn-lg { padding: 0.5625rem 1.25rem; }
.btn-sm {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--text-btn);
  min-height: var(--touch);
}

.hero-cta { transition: border-color 0.2s, color 0.2s; }

/* ── Grids ── */
.rea-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
.planches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
.prod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.event-split { align-items: start; }

.hero ~ .section:nth-of-type(4n+3) .section-title,
.page-header ~ .section:nth-of-type(4n+3) .section-title,
.section-dark ~ .section:nth-of-type(4n+3) .section-title {
  color: var(--brun-dark);
}

/* Cartes — tons chauds intermédiaires (verre léger) */
.hero ~ .section:nth-of-type(4n+1) .rea-item,
.hero ~ .section:nth-of-type(4n+2) .rea-item,
.hero ~ .section:nth-of-type(4n+3) .rea-item,
.page-header ~ .section:nth-of-type(4n+1) .rea-item,
.page-header ~ .section:nth-of-type(4n+2) .rea-item,
.page-header ~ .section:nth-of-type(4n+3) .rea-item,
.section-dark ~ .section:nth-of-type(4n+1) .rea-item,
.section-dark ~ .section:nth-of-type(4n+2) .rea-item,
.section-dark ~ .section:nth-of-type(4n+3) .rea-item,
.hero ~ .section:nth-of-type(4n+1) .prod-card,
.hero ~ .section:nth-of-type(4n+2) .prod-card,
.hero ~ .section:nth-of-type(4n+3) .prod-card,
.page-header ~ .section:nth-of-type(4n+1) .prod-card,
.page-header ~ .section:nth-of-type(4n+2) .prod-card,
.page-header ~ .section:nth-of-type(4n+3) .prod-card,
.section-dark ~ .section:nth-of-type(4n+1) .prod-card,
.section-dark ~ .section:nth-of-type(4n+2) .prod-card,
.section-dark ~ .section:nth-of-type(4n+3) .prod-card,
.hero ~ .section:nth-of-type(4n+1) .planche-card,
.hero ~ .section:nth-of-type(4n+2) .planche-card,
.hero ~ .section:nth-of-type(4n+3) .planche-card,
.page-header ~ .section:nth-of-type(4n+1) .planche-card,
.page-header ~ .section:nth-of-type(4n+2) .planche-card,
.page-header ~ .section:nth-of-type(4n+3) .planche-card,
.section-dark ~ .section:nth-of-type(4n+1) .planche-card,
.section-dark ~ .section:nth-of-type(4n+2) .planche-card,
.section-dark ~ .section:nth-of-type(4n+3) .planche-card {
  background: rgba(255, 252, 248, 0.72);
  border-color: rgba(200, 150, 60, 0.2);
  backdrop-filter: blur(4px);
}
.hero ~ .section:nth-of-type(4n+2) .rea-item,
.hero ~ .section:nth-of-type(4n+3) .rea-item,
.page-header ~ .section:nth-of-type(4n+2) .rea-item,
.page-header ~ .section:nth-of-type(4n+3) .rea-item,
.section-dark ~ .section:nth-of-type(4n+2) .rea-item,
.section-dark ~ .section:nth-of-type(4n+3) .rea-item {
  background: rgba(255, 250, 245, 0.6);
}

/* ── Cards ── */
.rea-item {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--blanc);
  border: 0.5px solid var(--gris);
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.rea-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(92, 26, 26, 0.1);
  border-color: rgba(200, 150, 60, 0.35);
}
.hero ~ .section:nth-of-type(4n) .rea-item,
.page-header ~ .section:nth-of-type(4n) .rea-item,
.section-dark ~ .section:nth-of-type(4n) .rea-item {
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(200, 150, 60, 0.28);
  box-shadow: none;
}
.hero ~ .section:nth-of-type(4n) .rea-item:hover,
.page-header ~ .section:nth-of-type(4n) .rea-item:hover,
.section-dark ~ .section:nth-of-type(4n) .rea-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(200, 150, 60, 0.45);
  box-shadow: var(--shadow-wine);
}
.hero ~ .section:nth-of-type(4n) .rea-title,
.page-header ~ .section:nth-of-type(4n) .rea-title,
.section-dark ~ .section:nth-of-type(4n) .rea-title {
  color: var(--ivoire);
}
.hero ~ .section:nth-of-type(4n) .rea-text,
.page-header ~ .section:nth-of-type(4n) .rea-text,
.section-dark ~ .section:nth-of-type(4n) .rea-text {
  color: var(--beige);
  opacity: 0.88;
}
.rea-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.rea-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--brun);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.rea-text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--pierre);
  line-height: 1.75;
  margin: 0;
}

.hero ~ .section:nth-of-type(4n) .prod-card,
.page-header ~ .section:nth-of-type(4n) .prod-card,
.section-dark ~ .section:nth-of-type(4n) .prod-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(200, 150, 60, 0.25);
}
.hero ~ .section:nth-of-type(4n) .prod-lieu,
.page-header ~ .section:nth-of-type(4n) .prod-lieu,
.section-dark ~ .section:nth-of-type(4n) .prod-lieu {
  color: var(--beige);
  opacity: 0.85;
}
.hero ~ .section:nth-of-type(4n) .prod-cat,
.page-header ~ .section:nth-of-type(4n) .prod-cat,
.section-dark ~ .section:nth-of-type(4n) .prod-cat {
  color: var(--or);
}

.planche-card {
  background: var(--blanc);
  border: 0.5px solid var(--gris);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.planche-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(61, 26, 15, 0.12); }
.planche-photo {
  height: 180px;
  background: linear-gradient(135deg, var(--gris) 0%, var(--ivoire) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.planche-photo-tall { height: 260px; border-radius: var(--radius); margin-bottom: 1.25rem; }
.planche-photo-tag {
  font-family: var(--font-display);
  font-size: var(--text-accroche);
  color: var(--pierre);
  font-style: italic;
  font-weight: 400;
}
.planche-body { padding: 1.25rem; }
.planche-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--brun);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.planche-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--pierre);
  line-height: 1.75;
  margin: 0 0 1rem;
}
.planche-formats { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1rem; }
.format-tag {
  font-family: var(--font-body);
  font-size: var(--text-tag);
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: transparent;
  color: var(--text-btn-light);
  border: 0.5px solid var(--border-btn-light);
  border-radius: 50px;
  transition: border-color 0.2s, color 0.2s;
}
.format-tag:hover {
  border-color: var(--or);
  color: var(--text-btn-light-hover);
}
.miel-note {
  background: var(--ivoire);
  border-left: 2px solid var(--or);
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  font-size: 1rem;
  color: var(--pierre);
  margin-bottom: 1.75rem;
}

.prod-card {
  background: var(--blanc);
  border: 0.5px solid var(--gris);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.prod-cat {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.4rem;
}
.prod-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--brun);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}
.prod-lieu {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--pierre);
  margin-bottom: 0.75rem;
}
.prod-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--pierre);
  line-height: 1.75;
  margin: 0;
}

/* ── Info block ── */
.info-block {
  background: var(--blanc);
  border: 0.5px solid var(--gris);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.info-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0;
  border-bottom: 0.5px solid var(--gris);
}
.info-row:last-child { border-bottom: none; }
.info-label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--pierre);
}
.info-value {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--brun);
  line-height: 1.75;
}

/* ── Steps ── */
.steps { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 0.5rem; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step-num {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--brun);
  color: var(--ivoire);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.step-num-or { background: var(--or); color: var(--brun); }
.step-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
  color: var(--brun);
}
.step-text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--pierre);
  margin: 0;
  line-height: 1.75;
}

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item {
  border: 0.5px solid var(--gris);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  background: var(--blanc);
}
.faq-q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
  color: var(--brun);
}
.faq-a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--pierre);
  margin: 0;
  line-height: 1.75;
}

/* ── Highlight ── */
.highlight-quote {
  color: var(--ivoire);
  margin-bottom: 1rem;
  max-width: 36rem;
  margin-inline: auto;
}

/* ── Event block home ── */
.event-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.event-promo-visual {
  background: var(--gris);
  border-radius: 12px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-promo-visual span { font-size: 1rem; color: var(--pierre); font-style: italic; }

/* ── Planche detail ── */
.planche-detail { margin-bottom: 3rem; }
.planche-detail:last-of-type { margin-bottom: 0; }
.planche-photo-detail {
  height: 280px;
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.planche-detail-text p {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--pierre);
  line-height: 1.75;
  margin: 0 0 1.25rem;
}
.planche-detail-text p:last-of-type { margin-bottom: 1.75rem; }
.mb-formats { margin-bottom: 1.25rem; }
.rea-item-left { text-align: left; }
.hero-events-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--ivoire);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}


.hero ~ .section:nth-of-type(4n) .planche-detail-text p,
.page-header ~ .section:nth-of-type(4n) .planche-detail-text p,
.section-dark ~ .section:nth-of-type(4n) .planche-detail-text p,
.hero ~ .section:nth-of-type(4n) .prod-desc,
.page-header ~ .section:nth-of-type(4n) .prod-desc,
.section-dark ~ .section:nth-of-type(4n) .prod-desc,
.hero ~ .section:nth-of-type(4n) .step-text,
.page-header ~ .section:nth-of-type(4n) .step-text,
.section-dark ~ .section:nth-of-type(4n) .step-text,
.hero ~ .section:nth-of-type(4n) .faq-a,
.page-header ~ .section:nth-of-type(4n) .faq-a,
.section-dark ~ .section:nth-of-type(4n) .faq-a {
  color: var(--beige);
  opacity: 0.9;
}
.hero ~ .section:nth-of-type(4n) .step-title,
.page-header ~ .section:nth-of-type(4n) .step-title,
.section-dark ~ .section:nth-of-type(4n) .step-title,
.hero ~ .section:nth-of-type(4n) .faq-q,
.page-header ~ .section:nth-of-type(4n) .faq-q,
.section-dark ~ .section:nth-of-type(4n) .faq-q,
.hero ~ .section:nth-of-type(4n) .prod-name,
.page-header ~ .section:nth-of-type(4n) .prod-name,
.section-dark ~ .section:nth-of-type(4n) .prod-name {
  color: var(--ivoire);
}
.hero ~ .section:nth-of-type(4n) .miel-note,
.page-header ~ .section:nth-of-type(4n) .miel-note,
.section-dark ~ .section:nth-of-type(4n) .miel-note {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--or);
  color: var(--beige);
}
.hero ~ .section:nth-of-type(4n) .info-block,
.page-header ~ .section:nth-of-type(4n) .info-block,
.section-dark ~ .section:nth-of-type(4n) .info-block,
.hero ~ .section:nth-of-type(4n) .faq-item,
.page-header ~ .section:nth-of-type(4n) .faq-item,
.section-dark ~ .section:nth-of-type(4n) .faq-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(200, 150, 60, 0.25);
}
.hero ~ .section:nth-of-type(4n) .info-value,
.page-header ~ .section:nth-of-type(4n) .info-value,
.section-dark ~ .section:nth-of-type(4n) .info-value {
  color: var(--ivoire);
}
.hero ~ .section:nth-of-type(4n) .event-promo-visual,
.page-header ~ .section:nth-of-type(4n) .event-promo-visual,
.section-dark ~ .section:nth-of-type(4n) .event-promo-visual {
  background: rgba(0, 0, 0, 0.2);
  border: 0.5px solid rgba(200, 150, 60, 0.2);
}
.hero ~ .section:nth-of-type(4n) .event-promo-visual span,
.page-header ~ .section:nth-of-type(4n) .event-promo-visual span,
.section-dark ~ .section:nth-of-type(4n) .event-promo-visual span {
  color: var(--beige);
}

/* Tags pills — construction */
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2rem;
}
.tag {
  font-size: var(--text-tag);
  color: var(--beige);
  border: 0.5px solid var(--border-or);
  border-radius: 50px;
  padding: 8px 18px;
  font-weight: 300;
  letter-spacing: 0.03em;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.tag:hover {
  border-color: var(--or);
  color: var(--ivoire);
}
.section .tag {
  color: var(--pierre);
  border-color: var(--border-btn-light);
}
.section .tag:hover {
  border-color: var(--or);
  color: var(--brun);
}
.hero ~ .section:nth-of-type(4n) .tag,
.page-header ~ .section:nth-of-type(4n) .tag,
.section-dark ~ .section:nth-of-type(4n) .tag {
  color: var(--beige);
  border-color: var(--border-or);
}
.hero ~ .section:nth-of-type(4n) .tag:hover,
.page-header ~ .section:nth-of-type(4n) .tag:hover,
.section-dark ~ .section:nth-of-type(4n) .tag:hover {
  color: var(--ivoire);
}

/* Social pills — construction */
.social-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-tag);
  color: var(--beige);
  border: 0.5px solid var(--border-or-soft);
  border-radius: 50px;
  padding: 9px 20px;
  text-decoration: none;
  letter-spacing: 0.04em;
  min-height: var(--touch);
  transition: border-color 0.2s, color 0.2s;
}
.social-btn:hover {
  border-color: var(--or);
  color: var(--ivoire);
  text-decoration: none;
}

/* ── Footer ── */
.footer {
  color: var(--beige);
  padding: 3rem 1rem 0;
  background: linear-gradient(
    180deg,
    #3D1010 0%,
    var(--spectrum-11) 8%,
    #3D1010 100%
  ) !important;
}
.footer::before {
  opacity: 0.25;
}
.footer::after {
  background: var(--wine-radial-c), var(--wine-radial-b);
}
.footer > * { position: relative; z-index: 1; }
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.footer-logo {
  font-family: var(--font-script);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--or);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: var(--text-accroche);
  font-style: italic;
  font-weight: 400;
  color: var(--beige);
  margin: 0 0 1rem;
  line-height: 1.6;
  opacity: 0.92;
}
.footer-contact {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
}
.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.75rem;
}
.footer-contact a { color: var(--beige); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a {
  color: var(--beige);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.footer-links a:hover { color: var(--ivoire); text-decoration: underline; }
.footer-bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.25rem 0;
  border-top: 0.5px solid rgba(240, 230, 211, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.footer-copy { font-size: 1rem; color: var(--pierre); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.footer-legal a {
  font-size: 1rem;
  color: var(--pierre);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
}

/* ── Legal pages ── */
.legal-page { padding: 2.5rem 0 4rem; }
.legal-page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 1.5rem;
}
.legal-page h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
  color: var(--brun);
}
.legal-page p, .legal-page li {
  font-size: 1rem;
  color: var(--pierre);
  line-height: 1.75;
}
.ph { color: red; font-weight: 600; }

/* ── Cookie banner ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--wine-gradient);
  color: var(--beige);
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: 1rem; flex: 1; min-width: 0; line-height: 1.5; }
.cookie-banner p a {
  color: var(--or);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0.25rem 0.5rem;
  font-size: var(--text-btn);
  letter-spacing: 0.03em;
  box-sizing: border-box;
}
.cookie-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.cookie-banner .cookie-btn-refuse,
.cookie-banner .cookie-btn-prefs {
  color: var(--beige);
  border-color: rgba(247, 243, 236, 0.85);
  background: transparent;
}
.cookie-banner .cookie-btn-refuse:hover,
.cookie-banner .cookie-btn-prefs:hover {
  color: var(--beige);
  border-color: var(--or);
  background: rgba(0, 0, 0, 0.15);
}
.cookie-actions .btn {
  font-size: var(--text-btn);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--touch);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-transform: none;
  border-radius: 50px;
  color: var(--beige);
  border-color: var(--border-btn-dark);
  background: transparent;
}
.cookie-actions .btn:hover {
  border-color: var(--or);
  color: var(--text-btn-dark-hover);
  background: transparent;
}

/* ── Utilities ── */
.mt-0 { margin-top: 0; }
.mb-lg { margin-bottom: 2.5rem; }
.mt-lg { margin-top: 2.5rem; }
.center-cta { text-align: center; margin-top: 2.5rem; }
.muted {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--pierre);
  margin-top: 1rem;
  opacity: 0.85;
}
.eyebrow-center { justify-content: center; }
.eyebrow-or { color: var(--or); }
.note-italic { font-size: 1rem; color: var(--pierre); font-style: italic; }
.note-block { font-size: 1rem; color: var(--pierre); margin-top: 1.25rem; font-style: italic; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Breakpoints ── */
@media (max-width: 480px) {
  :root { --wrap: min(1120px, calc(100% - 0.5rem)); }
  .wrap { padding-inline: 0.75rem; }
  .geo-row .line,
  .geo-row .diamond,
  .sous-titre-row .line { display: none; }
  .geo-row,
  .sous-titre-row { gap: 0; }
  .geo-row span:not(.line):not(.diamond),
  .sous-titre { max-width: 100%; padding-inline: 0.25rem; }
  .eyebrow::before,
  .eyebrow::after { display: none; }
  .eyebrow { justify-content: center; text-align: center; }
}

@media (min-width: 480px) {
  .planches-grid { grid-template-columns: repeat(2, 1fr); }
  .rea-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .section { padding: 4.5rem 0; }
  .rea-grid { grid-template-columns: repeat(4, 1fr); }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .split-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .event-promo { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .planches-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .planches-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--blanc);
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1rem 1rem;
    border-bottom: 0.5px solid var(--gris);
    box-shadow: var(--shadow);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s, opacity 0.25s;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a { padding: 0.75rem 1rem; justify-content: flex-start; }
  .nav-cta { margin-left: 0 !important; margin-top: 0.25rem; justify-content: center; }
  body.nav-open { overflow: hidden; }
  .keywords { display: none; }
  .hero { padding: 3rem 1rem 2.5rem; }
  .hero-text { margin-bottom: 1.25rem; }
  .page-header,
  .section-dark { padding: 3rem 1rem 2.5rem; }
  .geo-row { gap: 8px; }
  .geo-row .line { width: 24px; }
  .geo-row span:not(.line):not(.diamond) { letter-spacing: 0.18em; }
  .sous-titre-row { gap: 10px; }
  .sous-titre-row .line { max-width: 30px; }
  .sous-titre { letter-spacing: 0.18em; white-space: normal; text-align: center; }
  .hero-title,
  .titre-principal,
  .hero-script { font-size: var(--text-hero-script-mobile); }
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}