/* =========================================================
   VITAL — Design system & global styles
   ========================================================= */

:root {
  /* Palette */
  --bg: #FAFAF7;
  --bg-alt: #F2EFE9;
  --bg-dark: #1A1A1A;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --text-muted: #6B6B6B;
  --text-light: #9A9A9A;
  --accent: #A8202F;
  --accent-dark: #7A1722;
  --accent-soft: #F4E4E6;
  --border: #E5E2DD;
  --border-strong: #C9C5BD;

  /* Warm dark palette — used for the editorial CTA + footer crescendo
     at the bottom of the page. Avoids pure black; reads as leather,
     fired-clay, aged paper edges. Dialogues with the cream bg. */
  --ink:        #1F1B17;   /* warm leather dark — footer */
  --ink-deep:   #15120F;   /* footer-bottom rule, deeper anchor */
  --cream-on-dark: #FAF7F2;/* warm off-white — text on dark surfaces */
  --burgundy-deep: #6E1421;/* deeper burgundy for CTA gradient stop */

  /* Typography */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --container: 1200px;
  --container-narrow: 880px;
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 4rem;
  --gap-xl: 6rem;

  /* Effects */
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
  --transition: 0.25s ease;
}

/* =========================================================
   Reset & base
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--text);
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: 1.5rem; font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1rem; color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
  display: inline-block;
}

/* =========================================================
   Layout primitives
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: var(--gap-xl) 0; }

@media (max-width: 768px) {
  section { padding: var(--gap-lg) 0; }
}

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { top: 0; color: white; }

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: white;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover {
  background: var(--text);
  border-color: var(--text);
  color: white;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  padding: 0.5rem 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.btn-ghost:hover { color: var(--accent); }

.btn .arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.btn:hover .arrow { transform: translateX(4px); }

/* =========================================================
   Header / Navigation
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Offset anchor-scroll targets so the sticky header doesn't crop their
   top edge when navigating via the in-page anchors. */
#produits-preview,
#a-propos,
#engagements,
#plateforme {
  scroll-margin-top: 90px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.nav-logo img {
  height: 40px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width var(--transition);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: 1rem;
}
.lang-switch button {
  background: transparent;
  border: none;
  padding: 0.4rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 32px;
  line-height: 1;
}
.lang-switch button:hover:not(.active) {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}
.lang-switch button.active {
  background: var(--text);
  color: white;
}
/* Chinese character — slightly larger so it doesn't look puny next to FR/EN/ES */
.lang-switch button[lang="zh"] {
  font-size: 0.95rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 0.5rem;
  color: var(--text);
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  margin: 5px 0;
  transition: var(--transition);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  /* Allow the menu to wrap to a new row inside .nav when open */
  .nav { flex-wrap: wrap; }

  /* In-flow dropdown: collapsed by default, slides open beneath the
     logo+burger row and physically pushes page content downward.
     No more overlay, no more z-index stacking issues. */
  .nav-links {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0 0.25rem;
    border-top: 1px solid transparent;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease 0.05s,
      padding 0.3s ease,
      border-color 0.3s ease;
  }
  .nav-links.open {
    max-height: 70vh;                     /* enough headroom for 5+ items + lang switch */
    opacity: 1;
    padding: 1.25rem 0.25rem 1rem;
    border-top: 1px solid var(--border);
    overflow-y: auto;                     /* scroll if menu items overflow on very small screens */
  }
  .nav-links a { font-size: 1.15rem; }
  .lang-switch { margin-left: 0; margin-top: 0.25rem; }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-text {
  max-width: 620px;
}

.hero h1 {
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

.hero-visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.06);
  transform: rotate(-2deg);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.hero-visual:hover img {
  transform: rotate(0deg) translateY(-4px);
}

.hero-visual::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 95%;
  background: var(--accent-soft);
  border-radius: 6px;
  transform: rotate(3deg) translate(2rem, 1rem);
  z-index: -1;
  opacity: 0.6;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* On hover, the rose backplate slides back to align directly under
   the cover (no rotation, no offset). Since it's 80%×95% it ends up
   fully tucked behind the catalogue. */
.hero-visual:hover::before {
  transform: rotate(0deg) translate(0, 0);
  opacity: 0.35;
}

.hero-caption {
  position: absolute;
  bottom: -1.25rem;
  right: 1rem;
  background: var(--text);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {
  .hero { padding: 4rem 0 3rem; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .hero-visual { order: -1; }
  .hero-visual img { max-width: 320px; transform: rotate(-1.5deg); }
}

/* =========================================================
   Stats band
   ========================================================= */

.stats {
  padding: 3rem 0;
  background: var(--text);
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0.75rem;
  color: white;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.stat-suffix {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 0.15rem;
  color: var(--accent);
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  line-height: 1.45;
  max-width: 220px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}

/* =========================================================
   Partners strip
   ========================================================= */

.partners {
  background: var(--bg);
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
}

.partners-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.partners-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 1100px;
  flex-wrap: wrap;
}

.partners-list li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  opacity: 0.85;
  transition: opacity var(--transition), transform var(--transition);
}
.partners-list li.is-hero {
  height: 88px;
}
.partners-list li:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.partners-list img {
  max-height: 100%;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.partners-list li.is-hero img {
  max-width: 200px;
}

@media (max-width: 900px) {
  .partners-list { gap: 1.75rem 2.25rem; justify-content: center; }
  .partners-list li { height: 48px; }
  .partners-list li.is-hero { height: 68px; }
  .partners-list img { max-width: 110px; }
  .partners-list li.is-hero img { max-width: 160px; }
}

/* =========================================================
   Certifications band — inside the "Nos engagements" section,
   visually consistent with the "Nos marques" partners band.
   ========================================================= */
.certifications {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}
.certifications-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2rem;
}
.certifications-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 980px;
  flex-wrap: wrap;
}
.certifications-list li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;          /* labels need a touch more presence than brand marks */
  opacity: 0.92;
  transition: opacity var(--transition), transform var(--transition);
}
.certifications-list li:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.certifications-list img {
  max-height: 100%;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 900px) {
  .certifications { margin-top: 3rem; padding-top: 2.25rem; }
  .certifications-list { gap: 1.75rem 2.25rem; justify-content: center; }
  .certifications-list li { height: 62px; }
  .certifications-list img { max-width: 100px; }
}

/* =========================================================
   Section headers
   ========================================================= */

.section-header {
  /* Stack vertically: eyebrow + title on top, lead paragraph
     beneath at full width. Keeps the lead from being squeezed
     into a narrow right-hand column. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.section-header .lead {
  /* Sized for comfortable reading (~70 characters per line)
     without forcing the awkward 3-line stack we had before. */
  max-width: 70ch;
  font-size: 1.05rem;
}

@media (max-width: 768px) {
  .section-header { margin-bottom: 2.5rem; }
}

/* =========================================================
   Category cards (Produits preview)
   ========================================================= */

.categories {
  background: var(--bg);
  /* Tighter top — the partners band above already brings a divider rule,
     so the full 6rem felt floating. 4rem reads better. */
  padding-top: 4rem;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.category-grid .category-card:nth-child(4),
.category-grid .category-card:nth-child(5) {
  grid-column: span 1;
}

.category-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  /* Cards are display-only now (no link wrapper). Default cursor + no
     lift-on-hover. A whisper-soft border + shadow on hover keeps them
     feeling alive without pretending to be clickable. */
}
.category-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.category-visual {
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
}
.category-visual .placeholder-icon {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--accent);
  opacity: 0.5;
}
.category-visual.has-image {
  /* Matches the cream backdrop baked into the banner PNGs/JPGs —
     keeps letterbox bands invisible and prevents the white frame
     effect when the image's aspect ratio doesn't equal 4:3. */
  background: #F7F5EE;
  padding: 0;
}
.category-visual.has-image img {
  width: 100%;
  height: 100%;
  /* `contain` keeps every product visible (no crop). The thin top/bottom
     bands left by contain are the same cream as the card background, so
     they're optically invisible. */
  object-fit: contain;
  display: block;
  transition: transform 0.6s ease;
}
/* Kill the bottom-edge dark gradient on photographic cards —
   it muddies the seamless cream-to-cream transition. */
.category-visual.has-image::after { display: none; }

/* `is-airy` — for cards where the product silhouette fills its native
   banner (e.g. vrac drums). Inner padding shrinks the contents while
   the cream backdrop still bleeds to the card edge, so the frame stays
   uniform but the photo gets breathing room. */
.category-visual.has-image.is-airy {
  padding: clamp(28px, 6%, 56px) clamp(36px, 8%, 72px);
}
.category-card:hover .category-visual.has-image img {
  transform: scale(1.04);
}

.category-body {
  padding: 1.75rem;
}
.category-body h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}
.category-body p {
  font-size: 0.95rem;
  margin: 0 0 1rem;
  color: var(--text-muted);
}
.category-link {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 900px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .category-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   About preview (split section)
   ========================================================= */

.about-preview {
  background: var(--bg-alt);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.split-visual {
  aspect-ratio: 1414 / 2000;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-md);
}
.split-visual .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 0.9rem;
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--accent-soft) 100%);
}

/* =========================================================
   Before/After slider — VITAL 1980 ↔ 2026
   Editorial-archive aesthetic: refined comparison piece
   ========================================================= */

.ba-slider {
  /* --pos: horizontal position of the divider (0–100%)
     --skew: horizontal offset between top and bottom of diagonal as % of width.
     --skew-deg: SAME angle expressed in degrees for transform: skewX().
       Derivation: tan(α) = -(2 × skew) × W/H. Slider aspect-ratio is fixed
       at 1414/2000 → H/W = 1.414, so for skew=6% → α = atan(-0.12 / 1.414)
       ≈ -4.85deg. If you change --skew, update --skew-deg accordingly. */
  --pos: 50%;
  --skew: 6%;
  --skew-deg: -4.85deg;
  --paper: #f5f1e8;                        /* warm cream letterbox matching catalogue paper */
  --line-w: 4px;
  --handle: 64px;

  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  border-radius: var(--radius-lg);
  isolation: isolate;                      /* keeps clip-path within bounds */
}

/* Both images fill the frame edge-to-edge (no visible cream bands).
   2026 cover (2121×3000 = 0.707) matches the container ratio (1414/2000)
   exactly — perfect fit. 1980 (slightly more landscape) gets a tiny side
   crop (~3%) but the center content stays intact. */
.ba-base,
.ba-overlay > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Overlay (2026) clipped from the right edge to the diagonal --pos line */
.ba-overlay {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    calc(var(--pos) + var(--skew)) 0,
    100% 0,
    100% 100%,
    calc(var(--pos) - var(--skew)) 100%
  );
  -webkit-clip-path: polygon(
    calc(var(--pos) + var(--skew)) 0,
    100% 0,
    100% 100%,
    calc(var(--pos) - var(--skew)) 100%
  );
  transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: clip-path;
}

/* While the user is dragging (or we're snapping without anim), kill the transition */
.ba-slider.is-dragging .ba-overlay,
.ba-slider.is-snap .ba-overlay,
.ba-slider.is-dragging .ba-divider,
.ba-slider.is-dragging .ba-handle,
.ba-slider.is-snap .ba-divider,
.ba-slider.is-snap .ba-handle {
  transition: none;
}

/* ---------- Diagonal divider line ---------- */
/* Skewed to match exactly the clip-path's diagonal — they share --skew-deg. */
.ba-divider {
  position: absolute;
  top: -3%;                                /* extends slightly above/below to avoid corner gaps */
  bottom: -3%;
  left: var(--pos);
  width: var(--line-w);
  background: #fff;
  pointer-events: none;
  z-index: 2;
  transform: translateX(-50%) skewX(var(--skew-deg));
  transform-origin: center;
  transition: left 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  /* Crisp shadow + faint accent halo for that "archive" treatment */
  box-shadow:
    0 0 0 0.5px rgba(168, 32, 47, 0.25),
    0 0 18px rgba(0, 0, 0, 0.35);
}

/* ---------- Circular handle ---------- */
/* IMPORTANT: handle is positioned independently of the divider so it stays
   perfectly round (no skew distortion). */
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: var(--handle);
  height: var(--handle);
  margin: calc(var(--handle) / -2) 0 0 calc(var(--handle) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);                   /* warm cream (matches site bg) */
  cursor: ew-resize;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Layered shadow: hairline accent, inner cream ring, outer drop shadow */
  box-shadow:
    inset 0 0 0 1.5px var(--accent-dark),  /* outer burgundy ring */
    inset 0 0 0 3px var(--bg),             /* breathing room */
    inset 0 0 0 4px rgba(168, 32, 47, 0.18),/* inner hairline ring (sophistication) */
    0 1px 0 1px rgba(168, 32, 47, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    left 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.ba-handle:hover {
  transform: scale(1.06);
  box-shadow:
    inset 0 0 0 1.5px var(--accent-dark),
    inset 0 0 0 3px var(--bg),
    inset 0 0 0 4px rgba(168, 32, 47, 0.25),
    0 1px 0 1px rgba(168, 32, 47, 0.12),
    0 18px 38px rgba(0, 0, 0, 0.28);
}
.ba-handle:active { transform: scale(0.96); cursor: grabbing; }
.ba-handle:focus-visible {
  outline: 2.5px solid rgba(168, 32, 47, 0.5);
  outline-offset: 5px;
}

/* Arrows: serif Fraunces, burgundy, characterful */
.ba-handle__arrow {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 0.6;
  color: var(--accent);
  pointer-events: none;
  display: inline-block;
  transform: translateY(-1px);             /* optical centering for the chevrons */
}

/* ---------- Editorial labels (1980 / Fondation — 2026 / Édition) ---------- */
.ba-label {
  position: absolute;
  top: 1.1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.55rem 1rem 0.55rem;
  background: rgba(20, 18, 16, 0.62);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: white;
  pointer-events: none;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.ba-label--left  { left: 1.1rem; }
.ba-label--right { right: 1.1rem; }

.ba-label__year {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.ba-label__caption {
  margin-top: 6px;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .ba-slider {
    --handle: 48px;
    --line-w: 3px;
  }
  .ba-handle__arrow { font-size: 1.25rem; }
  .ba-label { padding: 0.4rem 0.75rem; top: 0.75rem; }
  .ba-label--left  { left: 0.75rem; }
  .ba-label--right { right: 0.75rem; }
  .ba-label__year { font-size: 1.15rem; }
  .ba-label__caption { font-size: 0.5rem; letter-spacing: 0.18em; margin-top: 4px; }
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ba-overlay,
  .ba-divider,
  .ba-handle {
    transition: none !important;
  }
}

.split-content h2 { margin-bottom: 1.5rem; }
.split-content p { font-size: 1.05rem; margin-bottom: 1.25rem; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
}

/* =========================================================
   Values (3 columns)
   ========================================================= */

.values {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.value-card {
  padding: 0;
}
.value-card .num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
  border-top: 2px solid var(--accent);
  padding-top: 1rem;
  width: 2rem;
}
.value-card h3 { font-size: 1.2rem; margin-bottom: 0.75rem; }
.value-card p { font-size: 0.95rem; margin: 0; }

@media (max-width: 768px) {
  .values-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* =========================================================
   CTA band
   ========================================================= */

/* ---- CTA band — stays on cream like the rest of the page above.
   Restraint over volume: a single italic Fraunces line, a thin burgundy
   rule, generous breathing. The warm-dark footer below provides the
   only contrast moment at the bottom. */
.cta-band {
  position: relative;
  padding: 7rem 0 6rem;
  text-align: center;
  background: var(--bg);
  color: var(--text);
}
/* Short burgundy rule above the eyebrow — anchors the section without
   adding a colored band. Same accent travels into the footer's seam. */
.cta-band::before {
  content: '';
  position: absolute;
  top: 4.5rem;
  left: 50%;
  width: 44px;
  height: 2px;
  background: var(--accent);
  transform: translateX(-50%);
}

.cta-band .eyebrow {
  margin-bottom: 1.1rem;
}
.cta-band h2 {
  color: var(--text);
  max-width: 760px;
  margin: 0 auto 1.5rem;
  font-style: italic;            /* Fraunces italic — pull-quote register */
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.15;
}
.cta-band p {
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 2.25rem;
  font-size: 1.05rem;
}

/* Button keeps its default burgundy primary style — the only colored
   element in the cream section, drawing the eye to the action. */

/* =========================================================
   Location — "Notre plateforme" section with Leaflet map.
   Two-column grid: map (60%) + address card (40%). Both wrapped
   in a single rounded surface with subtle shadow so the map and
   card feel like one piece of editorial cartography.
   ========================================================= */

.location {
  padding: 5rem 0;
  background: var(--bg);
}

.location-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 420px;
}

/* ---- Map canvas ---- */
.location-map {
  min-height: 420px;
  background:
    repeating-linear-gradient(45deg, #ece8e0 0 12px, #f2eee5 12px 24px);
  /* placeholder hash pattern while Leaflet boots — never visible if JS OK */
}
.location-map .noscript-link {
  display: block;
  padding: 2rem;
  text-align: center;
  color: var(--accent);
}

/* Leaflet attribution: slightly more discreet to match editorial tone */
.location-map .leaflet-control-attribution {
  background: rgba(250, 250, 247, 0.85);
  font-size: 11px;
  color: var(--text-muted);
}
.location-map .leaflet-control-attribution a { color: var(--accent); }

/* Custom marker — burgundy circle with cream ring (built in JS via L.divIcon) */
.vital-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--cream-on-dark);
  box-shadow:
    0 0 0 2px var(--accent),
    0 6px 20px rgba(168, 32, 47, 0.4);
  position: relative;
  animation: vitalPulse 2.4s ease-out infinite;
}
@keyframes vitalPulse {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0   rgba(168, 32, 47, 0.45); }
  70%  { box-shadow: 0 0 0 2px var(--accent), 0 0 0 22px rgba(168, 32, 47, 0); }
  100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0   rgba(168, 32, 47, 0); }
}

/* ---- Address card on the right ---- */
.location-card {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background:
    linear-gradient(180deg, #FBFAF6 0%, var(--surface) 100%);
  border-left: 1px solid var(--border);
  position: relative;
}
.location-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.location-card__name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}
.location-card__address {
  font-style: normal;
  color: var(--text);
  line-height: 1.65;
  font-size: 0.98rem;
  margin: 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.location-card__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.location-card__contact li {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--text);
}
.location-card__tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.location-card__contact a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.location-card__contact a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.location-card__dir {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.88rem;
  padding: 0.65rem 1.15rem;
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .location-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .location-map { min-height: 320px; }
  .location-card {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 2rem 1.5rem;
  }
  .location-card__contact li {
    grid-template-columns: 90px 1fr;
  }
}

/* Anchor offset for sticky header (#plateforme) */
#plateforme { scroll-margin-top: 90px; }

/* =========================================================
   Footer
   ========================================================= */

/* ---- Footer — warm leather dark.
   The cream cream-on-dark text + slight warmth (not pure white on pure
   black) reads as a magazine colophon page rather than a black hole.
   A 2px burgundy band at the top sews it to the CTA above. */
.site-footer {
  position: relative;
  background: var(--ink);
  color: rgba(250, 247, 242, 0.65);
  padding: 5rem 0 2.25rem;
  font-size: 0.9rem;
  /* Burgundy seam connecting CTA band → footer */
  border-top: 2px solid var(--burgundy-deep);
}
/* Subtle vertical depth — top a hair lighter, bottom a hair deeper.
   Keeps the surface alive without ever reading as a gradient. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,235,210,0.025) 0%, transparent 30%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.site-footer .container { position: relative; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream-on-dark);
  margin-bottom: 1rem;
}
.footer-brand img {
  height: 44px;
  width: auto;
  margin-bottom: 1.25rem;
  display: block;
  /* Faint warm glow under the logo, like wax-seal embossing */
  filter: drop-shadow(0 0 24px rgba(168,32,47,0.18));
}

.footer-tagline {
  max-width: 340px;
  color: rgba(250, 247, 242, 0.55);
  line-height: 1.65;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-on-dark);
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.65rem;
}
/* Tiny burgundy mark under each footer column heading — ties the
   accent throughout the dark zone */
.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 1px;
  background: var(--accent);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a {
  color: rgba(250, 247, 242, 0.65);
  transition: color 0.2s ease, padding-left 0.2s ease;
  position: relative;
  display: inline-block;
}
.footer-col a:hover {
  color: var(--cream-on-dark);
  padding-left: 6px;
}
/* Soft burgundy marker that slides in on hover */
.footer-col a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.footer-col a:hover::before { width: 4px; }

.footer-bottom {
  border-top: 1px solid rgba(250, 247, 242, 0.08);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(250, 247, 242, 0.35);
  letter-spacing: 0.02em;
}

/* ---- Address block inside Contact column.
   `<li class="footer-address">` is a paragraph, not a link. Restore
   normal cursor and disable the hover marker. */
.footer-address {
  color: rgba(250, 247, 242, 0.55);
  line-height: 1.6;
  margin-top: 1.1rem;
  font-size: 0.86rem;
}

/* ---- Mentions légales column — slightly tighter and lower-key than
   the navigation/contact lists. Reads as a colophon. */
.footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}
.footer-legal li {
  color: rgba(250, 247, 242, 0.55);
  margin-bottom: 0.4rem;
}
.footer-legal__num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: rgba(250, 247, 242, 0.78);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Utility
   ========================================================= */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Contact modal — native <dialog>
   ========================================================= */
.contact-modal {
  border: 0;
  padding: 0;
  max-width: min(720px, 94vw);
  width: 100%;
  max-height: 92vh;
  background: var(--surface, #fff);
  color: var(--text, #1a1a1a);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25),
              0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: fixed;
  inset: 0;
  margin: auto;
}
.contact-modal::backdrop {
  background: rgba(20, 16, 14, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Entry animation — Chrome/Edge/Safari 17+ */
.contact-modal[open] {
  animation: contactModalIn 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.contact-modal[open]::backdrop {
  animation: contactBackdropIn 0.32s ease both;
}
@keyframes contactModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes contactBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.contact-modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text, #1a1a1a);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
.contact-modal__close:hover {
  background: rgba(0, 0, 0, 0.12);
  transform: rotate(90deg);
}

.contact-modal__panel {
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px) clamp(28px, 4vw, 40px);
  overflow-y: auto;
  max-height: 92vh;
}
.contact-modal__head {
  margin-bottom: 28px;
}
.contact-modal__head .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
}
.contact-modal__head h2 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.contact-modal__head p {
  color: var(--muted, #5c5751);
  margin: 0;
  max-width: 48ch;
}

/* ---- Form ---- */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 540px) {
  .contact-form__row { grid-template-columns: 1fr; }
}
.contact-form__field {
  display: block;
  margin-bottom: 14px;
}
.contact-form__field > span {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted, #5c5751);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.96rem;
  padding: 11px 14px;
  background: #faf8f5;
  color: var(--text, #1a1a1a);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.contact-form textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  background: #fff;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent, #A8202F);
  box-shadow: 0 0 0 3px rgba(168, 32, 47, 0.14);
}
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(168, 32, 47, 0.45);
}

.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.contact-form__legal {
  font-size: 0.78rem;
  color: var(--muted, #5c5751);
  margin: 0;
  flex: 1 1 240px;
  line-height: 1.45;
}
.contact-form__footer .btn {
  flex: 0 0 auto;
}
.contact-form__direct {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.88rem;
  color: var(--muted, #5c5751);
  text-align: center;
}
.contact-form__direct a {
  color: var(--accent, #A8202F);
  text-decoration: none;
  font-weight: 500;
  margin: 0 4px;
}
.contact-form__direct a:hover { text-decoration: underline; }

/* Lock body scroll when modal is open */
body.has-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .contact-modal[open],
  .contact-modal[open]::backdrop,
  .contact-modal__close { animation: none; transition: none; }
}