/*
Theme Name: Les Chevaux de Napoléon
Theme URI: https://editionsdegarenne.fr
Author: Éditions De Garenne / Wagner Communication
Description: Thème sur mesure pour la page d'accès prioritaire du livre « Les Chevaux de Napoléon » de Philippe Osché. Landing one-page, pages légales, bandeau de consentement cookies (Google Analytics + Meta Pixel, identifiants réglables dans le Customizer).
Version: 1.0.5
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: chevaux-napoleon
*/
/* ==========================================================================
   Les Chevaux de Napoléon — Accès prioritaire
   Éditions De Garenne
   ========================================================================== */

:root {
  --bordeaux-imperial: #6B2530;
  --bordeaux-profond: #4A1720;
  --ivoire: #F5EEDF;
  --or-antique: #C4A05A;
  --or-antique-light: #E0C588;
  --or-antique-dim: rgba(196, 160, 90, 0.5);
  --encre: #1C1410;
  --font-display: "Cinzel", serif;
  --font-body: "EB Garamond", Georgia, serif;
  --ease-rise: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

/* Author display rules (e.g. .capture-form__success{display:flex}) beat the
   UA [hidden] default by specificity — reassert it so hidden stays hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bordeaux-imperial);
  color: var(--ivoire);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--or-antique); text-decoration: none; }
a:hover { color: var(--or-antique-light); }

/* NOTE: overflow-x lives on body, not here — an overflow value other than
   visible on any ancestor of a position:sticky element collapses its
   containing block and breaks the scrollytelling pin (the source .dc.html
   sets this on an intermediate wrapper div, which is exactly that trap;
   body is the document's own scroll container, so it's exempt). */
.page { width: 100%; background: var(--bordeaux-imperial); }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes filet {
  0%, 100% { opacity: .35; }
  50% { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── Shared primitives ───────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
}
.eyebrow--gold { font-size: 11px; letter-spacing: .34em; color: var(--or-antique); }
.eyebrow--muted { font-size: 11px; letter-spacing: .3em; color: #9A7434; }
.eyebrow--panel { font-size: 11px; letter-spacing: .28em; color: #9A7434; }

.hairline { width: 30px; height: 1px; }
.hairline--left { background: linear-gradient(90deg, rgba(196,160,90,0), var(--or-antique)); }
.hairline--right { background: linear-gradient(90deg, var(--or-antique), rgba(196,160,90,0)); }

.rule { height: 1px; background: var(--or-antique); }
.rule--gold { width: 110px; }
.rule--short { width: 76px; }
.rule--footer { background: rgba(196, 160, 90, .28); }

.diamond { width: 9px; height: 9px; border: 1px solid var(--or-antique); transform: rotate(45deg); }

.section-title {
  margin: 0;
  max-width: 19em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(25px, 6.2vw, 44px);
  line-height: 1.16;
  letter-spacing: .03em;
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: center;
}
.btn--gold {
  min-height: 56px;
  background: linear-gradient(180deg, #D2B274, var(--or-antique));
  color: #2A0F16;
  font-size: clamp(12px, 3.3vw, 15px);
  letter-spacing: .14em;
  border-color: var(--or-antique-light);
  box-shadow: 0 14px 40px rgba(28, 20, 16, .4);
}
/* La couleur du texte est REDÉCLARÉE ici, pas seulement le fond : la règle
   générique a:hover (0,1,1) l'emporte sur .btn--gold (0,1,0), donc un bouton
   <a> passait en or clair sur fond or clair — illisible. Même chose pour le
   focus clavier. */
.btn--gold:hover,
.btn--gold:focus-visible { background: linear-gradient(180deg, var(--or-antique-light), #CFAE6C); color: #2A0F16; }
.btn--outline:focus-visible { background: var(--bordeaux-imperial); color: var(--ivoire); }
.btn:focus-visible { outline: 2px solid var(--ivoire); outline-offset: 3px; }
.btn--outline {
  min-height: 52px;
  padding: 0 26px;
  border-color: var(--bordeaux-imperial);
  color: var(--bordeaux-imperial);
  font-size: 12px;
  letter-spacing: .14em;
}
.btn--outline:hover { background: var(--bordeaux-imperial); color: var(--ivoire); }
.btn--inline { align-self: flex-start; padding: 0 28px; margin-top: 26px; }
.btn--centered { align-self: center; }

.microcopy { font-size: 14px; color: rgba(245, 238, 223, .55); }
.microcopy--center { text-align: center; }

.field {
  /* flex-basis en px : uniquement pour la rangée HORIZONTALE du hero.
     Dans un conteneur en colonne (.field-label), une base en px s'applique
     à la HAUTEUR — d'où les champs de 130px ; d'où le reset plus bas. */
  flex: 1 1 130px;
  /* min-width:0 : un <input> a une largeur intrinsèque (~20 caractères) et
     min-width:auto l'empêche de rétrécir — sans ça, Nom et Prénom passent
     à la ligne au lieu de se partager la rangée. */
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  background: rgba(245, 238, 223, .08);
  border: 1px solid var(--or-antique-dim);
  color: var(--ivoire);
  font-family: var(--font-body);
  font-size: 17px;
  outline: none;
}
.field:focus { border-color: var(--or-antique); background: rgba(245, 238, 223, .14); }
.field--wide { flex: 2 1 180px; }
.capture-form__fields > .field { flex: 0 0 auto; }

/* ── Reveal-on-scroll (progressive enhancement) ──────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-rise), transform 1s var(--ease-rise);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 1. Hero ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px 36px;
  background: var(--bordeaux-profond);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  opacity: .5;
}
.hero__scrim { position: absolute; inset: 0; }
.hero__scrim--radial {
  background: radial-gradient(120% 85% at 50% 35%, rgba(107,37,48,.25) 0%, rgba(74,23,32,.8) 60%, var(--bordeaux-profond) 100%);
}
.hero__scrim--linear {
  background: linear-gradient(180deg, rgba(74,23,32,.9) 0%, rgba(74,23,32,.1) 30%, rgba(74,23,32,.94) 88%, var(--bordeaux-profond) 100%);
}

.hero__header { position: relative; display: flex; justify-content: center; align-items: center; gap: 12px; }

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 34px 0 6px;
}
.hero__content--rise { animation: rise 1.2s var(--ease-rise) both; }
.hero__form-wrap.hero__content--rise-delay { animation: rise 1.4s var(--ease-rise) .2s both; }

.hero__kicker {
  font-family: var(--font-display);
  font-size: clamp(9px, 2.6vw, 11px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(245, 238, 223, .7);
}
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 9.8vw, 82px);
  line-height: 1.03;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ivoire);
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(28, 20, 16, .55);
}
.hero__filet {
  width: min(300px, 60vw);
  height: 1px;
  background: linear-gradient(90deg, rgba(196,160,90,0), var(--or-antique), rgba(196,160,90,0));
  animation: filet 6s ease-in-out infinite;
}
.hero__subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(10px, 2.9vw, 13px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(245, 238, 223, .85);
  line-height: 1.7;
}
.hero__author { margin: 0; font-size: clamp(17px, 4.6vw, 23px); font-style: italic; color: #E7D9BE; }
.hero__tulard-line {
  font-family: var(--font-display);
  font-size: clamp(9px, 2.5vw, 11px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-antique);
}

.hero__form-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__lede {
  margin: 0;
  text-align: center;
  font-size: clamp(17px, 4.5vw, 21px);
  line-height: 1.5;
  color: var(--ivoire);
  text-wrap: pretty;
}

.capture-form { display: flex; flex-direction: column; gap: 10px; }
.capture-form__fields { display: flex; flex-direction: column; gap: 10px; }
.capture-form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.capture-form__success {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px;
  border: 1px solid rgba(196, 160, 90, .6);
  background: rgba(28, 20, 16, .3);
  text-align: center;
}
.capture-form__success-title { font-family: var(--font-display); font-size: 13px; letter-spacing: .12em; color: var(--or-antique); }
.capture-form__success-body { font-size: 16px; line-height: 1.5; color: rgba(245, 238, 223, .8); }

/* ── 2. Reassurance ───────────────────────────────────────────────────── */

.reassurance {
  background: var(--bordeaux-profond);
  border-top: 1px solid rgba(196, 160, 90, .35);
  border-bottom: 1px solid rgba(196, 160, 90, .35);
  padding: 22px clamp(20px, 4vw, 48px);
}
.reassurance__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.reassurance__item { display: flex; align-items: center; gap: 12px; }
.reassurance__icon { display: flex; color: var(--or-antique); flex: 0 0 auto; }
.reassurance__icon svg { display: block; }
.reassurance__label {
  font-family: var(--font-display);
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 238, 223, .82);
  line-height: 1.5;
}

/* ── Section banners (image placeholders ahead of a section title) ─────── */

.section-banner { width: 100%; align-self: stretch; margin-bottom: clamp(26px, 4vw, 40px); }
.placeholder-slot--banner { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.section-banner--framed {
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-banner__img { display: block; width: 100%; height: auto; }

/* ── 3. Tulard ────────────────────────────────────────────────────────── */

.tulard { background: var(--ivoire); color: var(--encre); padding: clamp(58px, 9vw, 110px) clamp(20px, 4vw, 48px); }
.tulard__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 4vw, 38px);
}
.tulard__eyebrow-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tulard__quote {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(20px, 5.4vw, 32px);
  line-height: 1.48;
  color: var(--encre);
  text-wrap: pretty;
  font-style: italic;
}
.tulard__attribution { display: flex; flex-direction: column; gap: 8px; }
.tulard__name {
  font-family: var(--font-display);
  font-size: clamp(13px, 3.4vw, 17px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bordeaux-imperial);
}
.tulard__titles { font-size: clamp(15px, 3.9vw, 17px); line-height: 1.6; color: rgba(28, 20, 16, .7); }

/* ── 4. Pourquoi ce livre ─────────────────────────────────────────────── */

.why { background: var(--bordeaux-imperial); color: var(--ivoire); padding: clamp(58px, 9vw, 115px) clamp(20px, 4vw, 48px); }
.why__inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(30px, 4.5vw, 50px); }
.why__heading { display: flex; flex-direction: column; gap: 16px; }
.why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(26px, 4vw, 56px); }
.why__copy {
  display: flex; flex-direction: column; gap: 22px;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.68;
  color: rgba(245, 238, 223, .84);
}
.why__copy-item { display: flex; align-items: flex-start; gap: 16px; margin: 0; }
.why__copy-item span:last-child { text-wrap: pretty; }
.para-dot { flex: 0 0 auto; width: 11px; height: 11px; margin-top: .5em; border-radius: 50%; background: var(--or-antique); }
.why__facts { display: flex; flex-direction: column; }
.fact { display: flex; flex-direction: column; gap: 5px; padding: 20px 0; border-top: 1px solid rgba(196, 160, 90, .35); }
.fact--last { border-bottom: 1px solid rgba(196, 160, 90, .35); }
.fact__title { font-family: var(--font-display); font-size: clamp(15px, 3.8vw, 19px); letter-spacing: .08em; }
.fact__sub { font-size: 16px; color: rgba(245, 238, 223, .62); }

/* ── 5. Scrollytelling ────────────────────────────────────────────────── */

.scrolly { background: var(--ivoire); color: var(--encre); padding: clamp(56px, 9vw, 110px) 0 clamp(44px, 7vw, 90px); }
.scrolly__inner { max-width: 800px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.scrolly__heading { display: flex; flex-direction: column; gap: 14px; }

.scrolly__panels { display: flex; flex-direction: column; margin-top: clamp(34px, 5vw, 56px); }
.scrolly__panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 20px; padding: clamp(40px, 6vw, 64px) 0;
}
.scrolly__panel--bordered { border-top: 1px solid rgba(196, 160, 90, .4); }
.scrolly__panel-image { width: 100%; max-width: 460px; }
.placeholder-slot--panel { width: 100%; aspect-ratio: 16 / 9; }
.panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 4.8vw, 31px);
  line-height: 1.25;
  letter-spacing: .02em;
}
.panel-text {
  margin: 0;
  max-width: 34em;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.66;
  color: rgba(28, 20, 16, .82);
  text-wrap: pretty;
}

/* ── Placeholder slots (visuals to be supplied) ──────────────────────── */

.placeholder-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: rgba(127, 127, 127, .06);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.placeholder-slot__stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 12px);
  opacity: .14;
  pointer-events: none;
}
.placeholder-slot__caption {
  position: relative;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1.6;
  padding: 12px;
  max-width: 80%;
  opacity: .68;
}

/* ── 6. Gallery ───────────────────────────────────────────────────────── */

.gallery { background: var(--bordeaux-profond); color: var(--ivoire); padding: clamp(56px, 9vw, 110px) clamp(20px, 4vw, 48px); }
.gallery__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(26px, 4vw, 44px); }
.gallery__heading { display: flex; flex-direction: column; gap: 14px; }
.gallery__hint { font-size: 16px; color: rgba(245, 238, 223, .6); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.gallery__tile {
  all: unset;
  cursor: zoom-in;
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(196, 160, 90, .4);
  background: rgba(245, 238, 223, .04);
}
.gallery__tile:hover { border-color: var(--or-antique); }
.placeholder-slot--tile { position: absolute; inset: 0; border: none; }

/* ── 7. Édition limitée ───────────────────────────────────────────────── */

.limited { background: var(--bordeaux-imperial); color: var(--ivoire); padding: clamp(56px, 9vw, 110px) clamp(20px, 4vw, 48px); }
.limited__inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.limited__text { margin: 0; max-width: 36em; font-size: clamp(17px, 4.4vw, 20px); line-height: 1.68; color: rgba(245, 238, 223, .84); text-wrap: pretty; }
.limited__text--muted { font-size: clamp(16px, 4.2vw, 18px); line-height: 1.6; color: rgba(245, 238, 223, .62); }
.limited .btn--inline { margin-top: 6px; }

/* ── 8. FAQ ───────────────────────────────────────────────────────────── */

.faq { background: var(--ivoire); color: var(--encre); padding: clamp(56px, 9vw, 110px) clamp(20px, 4vw, 48px); }
.faq__inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(24px, 4vw, 38px); }
.faq__heading { display: flex; flex-direction: column; gap: 12px; }
.faq__list { display: flex; flex-direction: column; }
.faq__item { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-top: 1px solid rgba(196, 160, 90, .5); }
.faq__item--last { border-bottom: 1px solid rgba(196, 160, 90, .5); }
.faq__q { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 4.2vw, 21px); letter-spacing: .05em; }
.faq__a { margin: 0; font-size: clamp(16px, 4.2vw, 18px); line-height: 1.6; color: rgba(28, 20, 16, .78); }

/* ── 9. Accès prioritaire ─────────────────────────────────────────────── */

.access { background: var(--bordeaux-imperial); color: var(--ivoire); padding: clamp(60px, 9vw, 120px) clamp(20px, 4vw, 48px); }
.access__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.access__heading { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.access__lede { margin: 0; max-width: 30em; font-size: clamp(17px, 4.4vw, 19px); line-height: 1.6; color: rgba(245, 238, 223, .8); }

.access-form {
  width: 100%;
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid rgba(196, 160, 90, .55);
  background: rgba(28, 20, 16, .24);
  text-align: left;
}
.access-form__fields { display: flex; flex-direction: column; gap: 16px; }
.field-label { display: flex; flex-direction: column; gap: 7px; }
.field-label__text {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 238, 223, .7);
}
.field-label .field { flex: 0 0 auto; min-height: 44px; font-size: 17px; }
.field-pair { display: flex; gap: 12px; flex-wrap: wrap; }
.field-pair .field-label { flex: 1 1 140px; }
.req { color: var(--or-antique); text-decoration: none; border: 0; }

.consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.consent__box { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--or-antique); flex: 0 0 auto; }
.consent__text { font-size: 15px; line-height: 1.5; color: rgba(245, 238, 223, .78); }

.access-form__success { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; text-align: center; }
.access-form__success-title { font-family: var(--font-display); font-size: 15px; letter-spacing: .1em; color: var(--or-antique); }
.access-form__success-body { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(245, 238, 223, .82); }

/* ── 10. Footer ───────────────────────────────────────────────────────── */

.site-footer {
  background: var(--bordeaux-profond);
  color: rgba(245, 238, 223, .72);
  padding: clamp(44px, 7vw, 80px) clamp(20px, 4vw, 48px) calc(clamp(44px, 7vw, 80px) + 76px);
}
.site-footer__inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.site-footer__row { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-end; }
.site-footer__brand { display: flex; flex-direction: column; gap: 8px; }
.site-footer__book { font-size: 16px; line-height: 1.6; }
.site-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.site-footer__copyright { font-size: 14px; color: rgba(245, 238, 223, .45); }

/* ── Sticky CTA ───────────────────────────────────────────────────────── */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(74,23,32,.9), var(--bordeaux-profond));
  border-top: 1px solid rgba(196, 160, 90, .5);
  backdrop-filter: blur(6px);
  transform: translateY(130%);
  opacity: 0;
  transition: transform .45s var(--ease-rise), opacity .45s ease;
  pointer-events: none;
}
.sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticky-cta__inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.sticky-cta__label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 238, 223, .7);
  line-height: 1.5;
}
.sticky-cta__btn {
  flex: 1 1 auto; max-width: 340px;
  min-height: 48px; padding: 0 18px;
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: .12em;
}

/* ── Legal pages (mentions légales / politique de confidentialité) ──────── */

.legal-page { background: var(--ivoire); color: var(--encre); min-height: 100vh; }
.legal-page__header {
  background: var(--bordeaux-profond); color: var(--ivoire);
  padding: 18px clamp(20px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.legal-page__brand { font-family: var(--font-display); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivoire); }
.legal-page__back { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-antique); white-space: nowrap; }
.legal-page__main { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 48px) clamp(90px, 10vw, 130px); }
.legal-page__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 6vw, 42px); line-height: 1.15; letter-spacing: .02em; text-wrap: balance; }
.legal-page__updated { display: block; margin-bottom: clamp(34px, 5vw, 52px); font-size: 14px; color: rgba(28, 20, 16, .55); }
.legal-page__main h2 { margin: 2.1em 0 .6em; font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 3.6vw, 23px); letter-spacing: .02em; }
.legal-page__main h2:first-of-type { margin-top: 0; }
.legal-page__main p { margin: 0 0 1em; font-size: clamp(16px, 3.6vw, 18px); line-height: 1.7; color: rgba(28, 20, 16, .85); text-wrap: pretty; }
.legal-page__main ul { margin: 0 0 1em; padding-left: 1.25em; font-size: clamp(16px, 3.6vw, 18px); line-height: 1.7; color: rgba(28, 20, 16, .85); }
.legal-page__main li { margin-bottom: .4em; }
.legal-page__main a { color: var(--bordeaux-imperial); text-decoration: underline; text-underline-offset: 2px; }
.legal-page__main strong { font-weight: 600; }
.fill {
  color: #8A6A2A;
  background: rgba(196, 160, 90, .16);
  padding: 0 .25em;
  border-radius: 3px;
  font-style: normal;
}

/* ── Lightbox ─────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(28, 20, 16, .94);
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox__frame { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 4 / 3; }
.lightbox__empty {
  display: flex; width: 100%; height: 100%;
  align-items: center; justify-content: center;
  border: 1px solid rgba(196, 160, 90, .4);
  text-align: center; padding: 24px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245, 238, 223, .66);
  line-height: 1.8;
}
.lightbox__close {
  position: absolute; top: -34px; right: 0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or-antique);
}

/* ── Emplacements d'images (déposer un fichier dans assets/) ──────────── */
.slot-img { display: block; width: 100%; height: auto; }

/* ── Consentement cookies ─────────────────────────────────────────────── */
/* Exigence CNIL : refuser doit être aussi simple qu'accepter. « Refuser » et
   « Accepter » partagent donc le même style, la même taille et le même rang
   visuel — aucun des deux n'est mis en avant par rapport à l'autre. */

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 18px clamp(16px, 4vw, 32px) calc(18px + env(safe-area-inset-bottom));
  background: var(--bordeaux-profond);
  border-top: 1px solid rgba(196, 160, 90, .5);
  box-shadow: 0 -12px 40px rgba(28, 20, 16, .4);
}
.cookie-banner__inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  justify-content: space-between;
}
.cookie-banner__text {
  margin: 0; flex: 1 1 320px;
  font-size: 16px; line-height: 1.55; color: rgba(245, 238, 223, .88);
}
.cookie-banner__text a { text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn-consent {
  min-height: 44px; padding: 0 20px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer;
  background: transparent; color: var(--ivoire);
  border: 1px solid var(--or-antique);
}
.btn-consent:hover { background: rgba(196, 160, 90, .16); color: var(--ivoire); }
.btn-consent--quiet { border-color: rgba(196, 160, 90, .4); color: rgba(245, 238, 223, .75); }
.btn-consent--primary {
  background: linear-gradient(180deg, #D2B274, var(--or-antique));
  color: #2A0F16; border-color: var(--or-antique-light);
}
.btn-consent--primary:hover { background: linear-gradient(180deg, var(--or-antique-light), #CFAE6C); color: #2A0F16; }
.btn-consent:focus-visible { outline: 2px solid var(--ivoire); outline-offset: 3px; }

.cookie-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 20, 16, .8); }
.cookie-modal__panel {
  position: relative; width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto;
  padding: clamp(24px, 4vw, 36px);
  background: var(--bordeaux-profond);
  border: 1px solid rgba(196, 160, 90, .55);
}
.cookie-modal__title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 4.4vw, 26px); letter-spacing: .04em; color: var(--ivoire); }
.cookie-modal__intro { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: rgba(245, 238, 223, .75); }

.consent-row { padding: 16px 0; border-top: 1px solid rgba(196, 160, 90, .3); }
.consent-row--last { border-bottom: 1px solid rgba(196, 160, 90, .3); }
.consent-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.consent-row__name { font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ivoire); }
.consent-row__always { font-size: 13px; font-style: italic; color: rgba(245, 238, 223, .5); }
.consent-row__box { width: 22px; height: 22px; accent-color: var(--or-antique); cursor: pointer; flex: 0 0 auto; }
.consent-row__desc { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: rgba(245, 238, 223, .7); }

.cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cookie-modal__actions .btn-consent { flex: 1 1 auto; }

@media (max-width: 560px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn-consent { flex: 1 1 100px; }
}

/* ── Formulaires : anti-robot et message d'erreur d'envoi ─────────────── */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-error { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #F0C9A0; text-align: center; }

/* ── WPBakery : neutralisation des gouttières ─────────────────────────── */
/* Les rangées WPBakery ajoutent des marges négatives et un padding de
   colonne (15px) prévus pour des mises en page en conteneur. Nos sections
   sont pleine largeur et portent leur propre espacement : sans ces resets,
   chaque section serait décalée et la page défilerait horizontalement. */
.page .vc_row { margin-left: 0; margin-right: 0; }
.page .wpb_column > .vc_column-inner { padding-left: 0; padding-right: 0; }
.page .wpb_content_element,
.page .wpb_raw_html { margin-bottom: 0; }

/* Titre du hero : deux lignes distinctes, l'espace entre les mots est conservé
   pour la copie, les lecteurs d'écran et les moteurs. Audit du 23/08/2026. */
.hero__title-line { display: block; }

/* Bannière responsive : le <picture> se comporte comme l'image qu'il enveloppe. 23/08/2026. */
.section-banner--framed > .section-banner__picture { display: block; width: 100%; }

/* Panneaux responsives : le <picture> se comporte comme l'image. 23/08/2026. */
.scrolly__panel-picture { display: block; width: 100%; }