/* =========================
   Base
========================= */
* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 /* background: #fff;  */
  background: #f2eeeb;
  color: #000;
}

/* Shared knobs */
:root{
  --header-gutter: 24px;             /* tiny-screen gutters for underline & rails */
  --underline-right-gap: 12px;       /* small gap at right end of header underline */

  /* Header rail (asymmetric) + underline spacing */
  --gutter-base: 24px;
  --gutter-left: calc(var(--gutter-base) * 0.6);  /* -40% left  */
  --gutter-right: calc(var(--gutter-base) * 2);   /* +100% right */
  --underline-gap: 22px;                          /* gap menu ↔ underline */

  /* Split */
  --col-left: 45%;
  --col-right: 55%;
  --title-bottom-gap: 260px;
  --last-word-overlap: 8%;
}

/* =========================
   Header overlay (inside .video-hero)
   - absolute overlay
   - NOT fixed/sticky (so it scrolls away)
========================= */
h5 { margin: 0; padding: 0; }

/* Header sits on top of the video but scrolls with the hero section */
.site-header{
  position: absolute;                 /* KEY: not fixed/sticky */
  inset: 0 auto auto 0;               /* top:0; left:0 */
  right: 0;
  z-index: 5;
  background: transparent;
  color: #fff;
}

/* Block any external sticky/fixed helpers */
.site-header.is-sticky,
.site-header.sticky,
.site-header.fixed,
.site-header--fixed,
.site-header[data-sticky],
.site-header[data-fixed] { position: absolute !important; }

/* Rail sizing: full width (minus asymmetric gutters) <1450px, snap to 1450px ≥ */
.nav-wrap{
  position: relative;                 /* anchors the dropdown panel */
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: calc(100vw - var(--gutter-left) - var(--gutter-right));
  margin-inline: auto;
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
  padding-top: 18px;
  padding-bottom: var(--underline-gap);
  box-sizing: border-box;
}
@media (min-width: 1450px){
  .nav-wrap{
    width: 1450px;
    margin-inline: auto;
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
    padding-bottom: var(--underline-gap);
  }
}

/* Underline follows JS-computed Brand→Connexion span (white on video) */
.site-header::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--header-line-left, 0);
  width: calc(var(--header-line-width, 53vw) - var(--underline-right-gap, 0px));
  border-bottom: 1px solid #fff;
  pointer-events: none;
  z-index: 1;
}

/* Phones: make underline respect gutters & avoid overflow */
@media (max-width: 480px){
  .site-header::after{
    left: max(var(--header-line-left, 0px), var(--header-gutter));
    width: calc(100vw - 2 * var(--header-gutter) - var(--underline-right-gap));
  }
}

/* Brand + nav (white over the video) */
.brand {
  font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: .5px;
  text-decoration: none; color: #fff; font-size: clamp(19px, 3.6vw, 40px); line-height: 1.1;
}
.site-nav { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.site-nav a { color: #fff; text-decoration: none; font-weight: 600; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Connexion buttons */
.site-nav a.btn-login,
.btn-login-standalone{
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.4rem;
  font-weight: 700;
  border-radius: 6px;
  line-height: 1;
  background: #fff;
  color: #000;
  text-decoration: none;
  border: 0;
}

/* Burger */
.nav-toggle {
  display: none; appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer;
}
.nav-toggle .bar { width: 24px; height: 3px; background: #fff; }

/* ≤1000px: burger + standalone Connexion; dropdown panel */
@media (max-width: 1000px){
  .nav-toggle{
    display: inline-flex;
    width: 40px; height: 28px;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
    margin-left: auto;
    margin-right: 10px;
    z-index: 7;
  }

  .btn-login-standalone{ display: inline-flex !important; }
  #primary-nav .btn-login{ display: none !important; }

  #primary-nav.site-nav,
  .site-nav{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(85vw, 360px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff; color: #000;
    border: 1px solid #fff; border-top: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 12px 16px;
    z-index: 6;
  }
  #primary-nav.site-nav a,
  .site-nav a{ color: #000; padding: 10px 0; display: block; }

  html[data-nav-open] #primary-nav.site-nav,
  html[data-nav-open] .site-nav{ display: flex; }
}

/* >1000px: inline menu; hide burger & standalone */
@media (min-width: 1001px){
  .nav-toggle{ display: none !important; }
  .btn-login-standalone{ display: none !important; }

  #primary-nav.site-nav,
  .site-nav{
    display: flex !important;
    position: static !important; width: auto !important;
    flex-direction: row !important; align-items: center; gap: 1.2rem;
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  #primary-nav.site-nav a,
  .site-nav a{ color: #fff; padding: 0; display: inline; }
  #primary-nav .btn-login{ display: inline-flex !important; background: #fff !important; color: #000 !important; }
}

/* =========================
   Hero
========================= */
.video-hero{
  position: relative;
  width: 100vw;
  height: 90vh;
  overflow: hidden;
  background: #000;
}
.bg-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.overlay-content{
  position: relative;
  z-index: 1;               /* header sits above (z=5), this below */
  height: 100%;
  display: flex;
  align-items: flex-start;
}

/* Keep hero content aligned with header rail */
.hero-wrap{ width: 92%; max-width: 1100px; margin-inline: auto; padding-top: 140px; }
@media (min-width: 481px){
  .hero-wrap{
    width: var(--header-line-width, 53vw) !important;
    margin-left: var(--header-line-left, 0) !important;
    margin-right: 0 !important;
    max-width: none;
  }
}
@media (max-width: 480px){
  .hero-wrap{
    width: calc(100vw - 2 * var(--header-gutter)) !important;
    margin-left: var(--header-gutter) !important;
    margin-right: var(--header-gutter) !important;
  }
}

.hero-title{
  font-family: "Playfair Display", serif; font-weight: 600; font-size: clamp(34px, 6vw, 70px);
  line-height: 1.08; margin: 0; color: #fff;
}
.hero-title .line1, .hero-title .line2{ display: block; }
.hero-subtitle{
  font-family: "Playfair Display", serif; font-size: clamp(26px, 3vw, 29px);
  line-height: 1.5; margin: 24px 0 0 0; color: #fff;
}

/* =========================
   Split section
========================= */
/* .split-section{ padding: 50px 0 112px; background: #fff; color: #000; position: relative; }  */
.split-section{ padding: 50px 0 0px; background: #f2f2f2; color: #000; position: relative; }  

/* Black underline aligned to header rail (for body on white) */
.split-section::after{
  content: ""; position: absolute; bottom: 0;
  left: var(--header-line-left, 0); width: var(--header-line-width, 53vw);
  border-bottom: 1px solid #000; pointer-events: none;
}
@media (max-width: 480px){
  .split-section::after{ left: var(--header-gutter); width: calc(100vw - 2 * var(--header-gutter)); }
}

/* Split rail & layout */
.section-wrap{
  width: 92%; max-width: 1100px; margin-inline: auto;
  display: grid; grid-template-columns: var(--col-left) var(--col-right);
  column-gap: 16px; align-items: end; position: relative; isolation: isolate; overflow: visible;
}
@media (min-width: 481px){
  .section-wrap{
    width: var(--header-line-width, 53vw) !important;
    margin-left: var(--header-line-left, 0) !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
}
@media (max-width: 480px){
  .section-wrap{
    width: calc(100vw - 2 * var(--header-gutter)) !important;
    margin-left: var(--header-gutter) !important;
    margin-right: var(--header-gutter) !important;
    max-width: none !important;
  }
}

.split-overline, .split-title{ grid-column: 1 / 2; }
.split-overline{
  font-family: sans-serif; font-weight: 500; font-size: clamp(12px, 1.1vw, 12px);
  letter-spacing: 0.14em; color: #000; text-transform: uppercase;
  margin: 0 0 8px 5px; line-height: 1; display: block;
}
.split-title{
  font-family: "Playfair Display", serif; font-weight: 400; font-size: clamp(34px, 6vw, 70px);
  line-height: 1.08; margin: 0; color: #000; position: relative; z-index: 20;
  align-self: end; transform: translateY(calc(-1 * var(--title-bottom-gap)));
}
.split-title .line1, .split-title .line2, .split-title .line3{ display: block; white-space: normal; }
.split-title .line3{ white-space: nowrap; }
.split-title em{ font-style: italic; }
.split-title .lp-blanc{ display: inline-block; color: #fff; position: relative; z-index: 25; margin-left: var(--last-word-overlap); }

/* Right image column */
.split-media{
  grid-column: 2 / 3; grid-row: 2; position: relative; z-index: 1;
  display: flex; justify-content: flex-end; overflow: hidden;
}
.media-block{ width: 100%; max-width: 100%; flex: 0 0 auto; }
.side-image{ width: 100%; max-width: 100%; height: auto; display: block; border: 1px solid #eee; border-radius: 6px; background: #000; object-fit: contain; }

/* Mobile ≤900px — title over image, italic “est”, white overline */
@media (max-width: 900px){
  .section-wrap{ grid-template-columns: 1fr; align-items: stretch; }
  .split-media{ grid-column: 1 / -1; justify-content: flex-start; overflow: hidden; position: relative; }
  .media-block, .side-image{ width: 100%; max-width: 100%; }

  .split-section{ --lh: 1.08; --lines: 4; --side-pad: 6%; --gap-overline-px: 92px; --mobile-shift: 90px; --overline-nudge: -10px; }

  .split-title{
    position: absolute; top: 50%; left: var(--side-pad); right: var(--side-pad);
    transform: translateY(calc(-50% + var(--mobile-shift))); margin: 0; z-index: 2;
    color: transparent !important; line-height: var(--lh);
  }
  .split-title *{ color: transparent !important; }
  .split-title i{
    color: #fff !important; font-style: italic;
    position: absolute; top: calc(3 * var(--lh) * 1em); left: 0; z-index: 4;
  }
  .split-title::before{
    content: "La façon dont\A nous voyons\A le problème";
    display: block; white-space: pre; color: #fff; font: inherit; line-height: var(--lh); z-index: 2;
  }
  .split-title::after{
    content: "le problème";
    position: absolute; top: calc(3 * var(--lh) * 1em); left: 3.4ch;
    display: block; white-space: pre; color: #fff; font: inherit; line-height: var(--lh); z-index: 3;
  }

  .split-overline{
    position: absolute; left: var(--side-pad);
    top: calc(50% - (var(--lines) * var(--lh) * 1em) / 2 - var(--gap-overline-px) + var(--mobile-shift) + var(--overline-nudge));
    margin: 0; color: #fff; z-index: 5; transform: none;
  }
}

/* ≥901px — overline gap maintained by your JS (writes --overline-delta) */
@media (min-width: 901px){
  .split-section .split-title{
    transform: translateY(calc(-1 * var(--title-bottom-gap))) !important;
    z-index: 20;
  }
  .split-section .split-overline{
    transform: translateY(var(--overline-delta, 0px)) !important;
    margin: 0 !important;
    margin-left: 5px !important;
    position: relative !important;
    z-index: 19;
  }
}

/* =========================
   Misc
========================= */
.page-content{ min-height: 50vh; background: #fff; }

.media-caption{
  font-family: sans-serif; font-weight: 500; font-size: clamp(15px, 1.375vw, 15px);
  line-height: 1.45; color: #000; margin-top: 30px;
}
.media-caption .btn-more{
  display: inline-block; padding: .55rem 1.1rem; background: #000; color: #fff;
  font-weight: 600; line-height: 1; text-decoration: none; border: none; border-radius: 4px;
}
.media-caption .btn-more:hover, .media-caption .btn-more:focus{
  background: #222; color: #fff; text-decoration: none;
}

/* Debug widget */
#viewport-debug{
  position: fixed; right: 10px; bottom: 10px; z-index: 9999;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px; line-height: 1.2; color: #e10600; background: rgba(255,255,255,.85);
  border: 1px dashed rgba(225,6,0,.6); padding: 6px 8px; border-radius: 6px; pointer-events: none;
}

/* Underline must run exactly from Brand left to Connexion right */
.site-header::after {
  left: var(--header-line-left) !important;
  width: var(--header-line-width) !important;
  border-bottom-color: #fff; /* keep your current theme */
}

/* Mobile: same rule — no 100vw fallbacks, no extra right gap */
@media (max-width: 1000px) {
  .site-header::after {
    left: var(--header-line-left) !important;
    width: var(--header-line-width) !important;
  }
}

/* If you previously used a custom right gap, neutralize it */
:root { --underline-right-gap: 0px !important; }

/* Connexion button: 2rem padding everywhere */
.site-header .site-nav a.btn-login,
.site-header .btn-login-standalone {
  padding: 1rem !important;
}


/* Mobile header: no side margins/padding, full-bleed rail */
@media (max-width: 1000px) {
  /* kill asymmetric gutters on the header rail */
  :root {
    --gutter-left: 0 !important;
    --gutter-right: 0 !important;
  }

  .nav-wrap {
    width: 100vw !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* keep underline tied to JS-measured brand↔connexion span */
  .site-header::after {
    left: var(--header-line-left, 0) !important;
    width: var(--header-line-width, 100vw) !important;
  }

  /* safety: dropdown still docks to the right edge without overflow */
  #primary-nav.site-nav,
  .site-nav {
    right: 0 !important;
    max-width: 100vw !important;
  }
}

/* global safety: never allow horizontal scroll */
html, body { overflow-x: hidden; }

/* Very small screens: add a minimal horizontal margin around the header */
@media (max-width: 1000px) {
  :root {
    --mobile-header-gutter: 8px; /* tweak to taste (e.g., 6–12px) */
  }

  /* inset the header rail slightly, no overflow */
  .nav-wrap {
    width: calc(100vw - 2 * var(--mobile-header-gutter)) !important;
    margin: 0 auto !important;
    padding-left: var(--mobile-header-gutter) !important;
    padding-right: var(--mobile-header-gutter) !important;
    box-sizing: border-box;
  }

  /* keep underline aligned to Brand↔Connexion span that your JS measures */
  .site-header::after {
    left: var(--header-line-left, var(--mobile-header-gutter)) !important;
    width: min(
      var(--header-line-width, 100vw),
      calc(100vw - 2 * var(--mobile-header-gutter))
    ) !important;
  }

  /* dropdown panel respects the tiny side margins */
  #primary-nav.site-nav,
  .site-nav {
    right: var(--mobile-header-gutter) !important;
    width: min(360px, calc(100vw - 2 * var(--mobile-header-gutter))) !important;
    max-width: calc(100vw - 2 * var(--mobile-header-gutter)) !important;
  }
}

/* safety */
html, body { overflow-x: hidden; }


/* Desktop/tablet ≥901px: shrink the whole media block by ~30% and add ~1" right margin */
@media (min-width: 901px) {
  .split-section .media-block {
    width: 60%;          /* controls BOTH image and caption width */
    margin-right: 120px;   /* ≈ 96px right margin */
  }
  .split-section .side-image {
    width: 100%;         /* fill the media-block width */
    display: block;      /* no inline gaps */
  }
  .split-section .media-caption {
    width: 100%;         /* exactly same width as image */
    display: block;      /* ensure it sits below the image */
  }
}

/* Mobile ≤900px: full width, no extra margin (prevents horizontal scroll) */
@media (max-width: 900px) {
  .split-section .media-block {
    width: 100%;
    margin-right: 0;
  }
  .split-section .side-image {
    width: 100%;
    display: block;
  }
  .split-section .media-caption {
    width: 100%;
    display: block;
  }
}

/* Split title: make line1/line2/line3 75% bigger on ≥901px */
@media (min-width: 901px) {
  .split-section .split-title .line1,
  .split-section .split-title .line2,
  .split-section .split-title .line3 {
    font-size: 135%;
  }
}

/* Split title overlays the image (desktop/tablet) and stays 3 lines */
@media (min-width: 901px) {
  .split-section .split-title {
    grid-column: 1 / -1;          /* span both columns → can overlap the image */
    max-width: 100%;
    z-index: 20;                   /* above .split-media (z:1) */
    pointer-events: none;          /* avoid blocking interactions on image */
    /* keeps your existing vertical placement */
    transform: translateY(calc(-1 * var(--title-bottom-gap))) !important;
  }

  /* Force exactly 3 single-line rows (no wrapping within a row) */
  .split-section .split-title .line1,
  .split-section .split-title .line2,
  .split-section .split-title .line3 {
    white-space: nowrap;
    display: block;
  }

  /* Ensure the image stays beneath the title */
  .split-section .split-media { z-index: 1; }
}

/* ===== Desktop/tablet: vertical & horizontal fine-tune for split-title ===== */
:root{
  --title-nudge: -300px;   /* you picked this (Y): negative = up, positive = down */
  --title-shift-x: 95px;    /* NEW (X): negative = left, positive = right */
}

@media (min-width: 901px){
  .split-section .split-title{
    transform: translate(
      var(--title-shift-x, 0px),
      calc(-1 * var(--title-bottom-gap) + var(--title-nudge, 0px))
    ) !important;
  }
}

/* ===== Desktop-only: responsive left overlap for the white “problème” word ===== */
@media (min-width: 901px) {
  :root{
    /* Tunables */
    --lp-overlap-min: 4%;   /* smallest allowed overlap */
    --lp-overlap-ideal: 6vw;/* grows/shrinks with viewport */
    --lp-overlap-max: 12%;  /* largest allowed overlap */

    /* Optional hard override (unset to use clamp): e.g. 8% or 72px */
    --lp-overlap-override: 6%; 
  }

  .split-section .split-title .lp-blanc{
    /* If --lp-overlap-override is set, it wins; otherwise use clamp */
    margin-left: var(
      --lp-overlap-override,
      clamp(var(--lp-overlap-min), var(--lp-overlap-ideal), var(--lp-overlap-max))
    );
  }
}

/* === Desktop-only knobs for split-overline (no change on mobile) === */
:root{
  --overline-shift-x: 90px;         /* +right / -left */
  --overline-nudge-desktop: 230px;   /* +down  / -up   */
}

:root { --overline-gap-abs: 20px; } /* desired gap: titleTop - overlineTop = 20px */


@media (min-width: 901px){
  .split-section .split-overline{
    /* Keep your JS-controlled vertical delta, then add your manual nudge.
       Also allow horizontal fine-tune like the title. */
    transform: translate(
      var(--overline-shift-x, 0px),
      calc(var(--overline-delta, 0px) + var(--overline-nudge-desktop, 0px))
    ) !important;

    margin: 0 !important;
    margin-left: 5px !important;
    position: relative !important;
    z-index: 19;
  }
}


/* === Split-title: fluid base size (901–1450px) and easy vertical nudge === */

/* You can tweak this anytime to move the title up/down without touching layout */
:root{
  --title-nudge: 0px;   /* negative = up, positive = down */
  --title-shift-x: 85px;   /* keep your existing horizontal fine-tune */
}

/* 901–1449px: linearly scale from 36px @901 → 70px @1450 */
@media (min-width: 901px) and (max-width: 1449px){
  .split-section .split-title{
    font-size: calc(36px + (34 * ((100vw - 901px) / 549))) !important;
    transform: translate(
      var(--title-shift-x, 0px),
      calc(-1 * var(--title-bottom-gap) + var(--title-nudge, 0px))
    ) !important;
  }
}

/* ≥1450px: lock at 70px */
@media (min-width: 1450px){
  .split-section .split-title{
    font-size: 70px !important;
    transform: translate(
      var(--title-shift-x, 0px),
      calc(-1 * var(--title-bottom-gap) + var(--title-nudge, 0px))
    ) !important;
  }
}






/* === Split-title: continuous sizing & transform for all ≥901px === */

/* base knobs you already use */
:root{
  --title-nudge: -300px;   /* negative = up, positive = down */
  --title-shift-x: 95px;   /* your current horizontal fine-tune */
  --overline-nudge-desktop: 230px;
  --overline-shift-x: 90px;
  --overline-gap-abs: 20px; /* keep the 20px rule */
}

/* 901–1449px: linear font-size 36→70 (or keep your current calc) */
@media (min-width: 901px) and (max-width: 1449px){
  .split-section .split-title{
    font-size: calc(36px + (34 * ((100vw - 901px) / 549))) !important;
    transform: translate(
      var(--title-shift-x),
      calc(-1 * var(--title-bottom-gap) + var(--title-nudge))
    ) !important;
  }
}

/* ≥1450px: lock size, keep identical transform */
@media (min-width: 1450px){
  .split-section .split-title{
    font-size: 70px !important;
    transform: translate(
      var(--title-shift-x),
      calc(-1 * var(--title-bottom-gap) + var(--title-nudge))
    ) !important;
  }
}


/* === split-title: dynamic vertical nudge (901px → 1450px) === */
@media (min-width: 901px) {
  :root{
    /* At 901px → -200px; at 1450px → -300px; linear in between */
    --title-nudge: clamp(
      -300px,
      calc(-200px - (100 * ((100vw - 901px) / 549))),
      -200px
    );
  }
}


/* Desktop mid-band: fix horizontal fine-tune for split-title */
@media (min-width: 1001px) and (max-width: 1449px){
  :root { --title-shift-x: 50px; }
}





/* === Viewport-aware fine-tune for split-overline (single system) === */
/* Set the endpoints you actually want (these match your earlier spec): */
:root{
  --ovl-y-901:   120px;  /* extra Y at 901px  */
  --ovl-y-1450:  240px;  /* extra Y at ≥1450px */
  --ovl-x-901:   50px;  /* X at 901px        */
  --ovl-x-1450:   90px;  /* X at ≥1450px      */

  /* defaults */
  --ovl-nudge-current: var(--ovl-y-901);
  --ovl-shift-current: var(--ovl-x-901);
}

/* 901–1449px: linear interpolation (t: 0→1 across 901→1450) */
@media (min-width: 901px) and (max-width: 1449px){
  :root{
    --_t: calc((100vw - 901px) / 549);
    --ovl-nudge-current: calc(var(--ovl-y-901) + (var(--ovl-y-1450) - var(--ovl-y-901)) * var(--_t));
    --ovl-shift-current: calc(var(--ovl-x-901) + (var(--ovl-x-1450) - var(--ovl-x-901)) * var(--_t));
  }
}

/* ≥1450px: lock to high end */
@media (min-width: 1450px){
  :root{
    --ovl-nudge-current: var(--ovl-y-1450);
    --ovl-shift-current: var(--ovl-x-1450);
  }
}


@media (min-width: 901px){
  .split-section .split-overline{
    transform: translate(
      var(--ovl-shift-current, 0px),
      calc(var(--overline-delta, 0px) + var(--ovl-nudge-current, 0px))
    ) !important;
  }
}

/* ===== Mobile (≤900px): viewport-driven top positions ===== */
@media (max-width: 900px){
  :root{
    /* Turn ON to force CSS-driven positions (JS will honor this flag) */
    --mobile-force: 1; /* set to 0 (or remove) to go back to JS auto */

    /* Viewport range you want to map over */
    --vw-min: 320;   /* px */
    --vw-max: 900;   /* px */

    /* CHOOSE your endpoints:
       title top position at min/max viewport (any CSS length: px, %, vh) */
    --title-top-min: 32vh;  /* at 320px viewport */
    --title-top-max: 44vh;  /* at 900px viewport */

    /* Overline top at the same endpoints (tweak freely) */
    --overline-top-min: calc(var(--title-top-min) - 30px);
    --overline-top-max: calc(var(--title-top-max) - 30px);

    /* Interpolant t ∈ [0,1] across vw-min → vw-max */
    --_t: clamp(
      0,
      calc((100vw - (var(--vw-min) * 1px)) / ((var(--vw-max) - var(--vw-min)) * 1px)),
      1
    );

    /* Linear interpolation */
    --title-top-override: calc(
      (1 - var(--_t)) * var(--title-top-min) + var(--_t) * var(--title-top-max)
    );
    --overline-top-override: calc(
      (1 - var(--_t)) * var(--overline-top-min) + var(--_t) * var(--overline-top-max)
    );
  }

  /* Wire the overrides into your existing mobile layout */
  .split-section .split-title{
    position: absolute;
    left: var(--side-pad);
    right: var(--side-pad);

    /* Use forced CSS value if present; else fall back to your 50% system */
    top: var(--title-top-px, var(--title-top-override, 50%));
    transform: translateY(0); /* we’re giving an absolute top now */
  }

  .split-section .split-overline{
    position: absolute;
    left: var(--side-pad);
    top: var(--overline-top-px, var(--overline-top-override,
         calc(50% - (var(--lines) * var(--lh) * 1em) / 2 - var(--gap-overline-px) + var(--mobile-shift) + var(--overline-nudge))));
    transform: none;
  }
}

/* ===== Desktop mid-band (901–1449px): force CSS-driven overline via transform ===== */
@media (min-width: 901px) and (max-width: 1449px){
  :root{
    /* Turn ON to force CSS control in this band (JS will honor this flag) */
    --overline-force-desktop: 1;

    /* Interpolation range */
    --vw-min-desk: 901;   /* px */
    --vw-max-desk: 1449;  /* px */

    /* Choose endpoints for the OVERLINE'S vertical offset (relative to its normal flow spot).
       Pick values that “feel” like absolute tops you wanted and we’ll translate to them. */
--ovl-y-min:  calc(var(--title-nudge, 0px) + 360px); /* tune the +120px */
--ovl-y-max:  calc(var(--title-nudge, 0px) + 510px);

    /* Optional horizontal nudge endpoints (keep your current 50→90 if you like) */
    --ovl-x-min:   95px;
    --ovl-x-max:   50px;

    /* Interpolant t ∈ [0,1] across the band */
    --_t-desk: clamp(
      0,
      calc((100vw - (var(--vw-min-desk) * 1px)) / ((var(--vw-max-desk) - var(--vw-min-desk)) * 1px)),
      1
    );

    /* Linear interpolation for X/Y nudges */
    --ovl-y-current: calc((1 - var(--_t-desk)) * var(--ovl-y-min) + var(--_t-desk) * var(--ovl-y-max));
    --ovl-x-current: calc((1 - var(--_t-desk)) * var(--ovl-x-min) + var(--_t-desk) * var(--ovl-x-max));
  }

  .split-section .split-overline{
    /* Stay in flow; just override the transform the JS used to tweak */
    transform: translate(
      var(--ovl-x-current),
      /* replace JS delta entirely with our width-driven Y */
      var(--ovl-y-current)
    ) !important;
    margin: 0 !important;
    position: relative !important;   /* keep it in the grid flow */
    z-index: 19 !important;
  }
}

/* ===== Desktop mid-band (901–1449px): overline X = title X, Y is width-driven ===== */
@media (min-width: 901px) and (max-width: 1449px){
  :root{
    /* Tell JS to back off */
    --overline-force-desktop: 1;

    /* Interpolation range */
    --vw-min-desk: 901;    /* px */
    --vw-max-desk: 1449;   /* px */

    /* Vertical endpoints for the OVERLINE offset (tweak to taste) */
    --ovl-y-min:  140px;   /* at 901px */
    --ovl-y-max:  260px;   /* at 1449px */

    /* Interpolant t ∈ [0,1] */
    --_t-desk: clamp(
      0,
      calc((100vw - (var(--vw-min-desk) * 1px)) / ((var(--vw-max-desk) - var(--vw-min-desk)) * 1px)),
      1
    );

    /* Interpolated Y offset */
    --ovl-y-current: calc((1 - var(--_t-desk)) * var(--ovl-y-min) + var(--_t-desk) * var(--ovl-y-max));

    /* Optional tiny correction if you previously used margin-left: 5px on the overline */
    --overline-x-offset: 0px; /* set to 5px if you want that old nudge */
  }

  .split-section .split-overline{
    /* Stay in flow; follow the title horizontally, glide vertically with viewport */
    transform: translate(
      calc(var(--title-shift-x, 0px) + var(--overline-x-offset, 0px)),
      var(--ovl-y-current)
    ) !important;

    /* Prevent hidden offsets from earlier rules */
    margin-left: 0 !important;
    position: relative !important;
    z-index: 19 !important;
  }
}

/* ===== 901–1449px: overline X follows title; Y interpolates but is capped ≥1320px ===== */
@media (min-width: 901px) and (max-width: 1449px){
  :root{
    /* Tell JS to back off in this band */
    --overline-force-desktop: 1;

    /* Interpolation range for the whole band */
    --vw-min-desk: 901;   /* px */
    --vw-max-desk: 1449;  /* px */

    /* Base vertical interpolation (tweak these first) */
    --ovl-y-min: 140px;   /* at 901px */
    --ovl-y-max: 260px;   /* at 1449px */

    /* Interpolant t ∈ [0,1] across 901→1449 */
    --_t-desk: clamp(
      0,
      calc((100vw - (var(--vw-min-desk) * 1px)) / ((var(--vw-max-desk) - var(--vw-min-desk)) * 1px)),
      1
    );

    /* Raw Y result from the full-band interpolation */
    --ovl-y-raw: calc((1 - var(--_t-desk)) * var(--ovl-y-min) + var(--_t-desk) * var(--ovl-y-max));

    /* ===== CAP from 1320→1449 to prevent overlap =====
       Between 1320px and 1449px we ramp a *maximum allowed Y* from 200px → 230px.
       (Lower numbers = higher position; adjust the 200/230 if needed.)
    */
    --cap-start: 1320;    /* px */
    --cap-end:   1449;    /* px */
    --_t-cap: clamp(
      0,
      calc((100vw - (var(--cap-start) * 1px)) / ((var(--cap-end) - var(--cap-start)) * 1px)),
      1
    );
    --ovl-y-cap-min: 200px;   /* cap at 1320px */
    --ovl-y-cap-max: 230px;   /* cap at 1449px */
    --ovl-y-cap: calc((1 - var(--_t-cap)) * var(--ovl-y-cap-min) + var(--_t-cap) * var(--ovl-y-cap-max));

    /* Final Y: the lesser of raw and cap (prevents dropping too low) */
    --ovl-y-current: min(var(--ovl-y-raw), var(--ovl-y-cap));

    /* Optional tiny X nudge if you had a historical +5px margin */
    --overline-x-offset: 0px;
  }

  .split-section .split-overline{
    transform: translate(
      calc(var(--title-shift-x, 0px) + var(--overline-x-offset, 0px)), /* X = title’s X */
      var(--ovl-y-current)                                             /* Y with cap */
    ) !important;
    position: relative !important;
    margin-left: 0 !important;
    z-index: 19 !important;
  }
}

/* 1) Disable the old underline that’s tied to the whole section */
.split-section::after { content: none !important; }

/* 2) Re-create the underline on the content wrapper instead */
.split-section .section-wrap {
  position: relative; /* anchor for ::after */
}

/* Split underline aligned to header rail, but vertically offset by JS */
.split-section::after{
  content: "";
  position: absolute;
  bottom: var(--section-underline-offset, 0px); /* JS will set this */
  left: var(--header-line-left, 0);
  width: var(--header-line-width, 53vw);
  border-bottom: 1px solid #000;
  pointer-events: none;
  z-index: 1;
}

/* ≤480px: keep your small-screen alignment behavior */
@media (max-width: 480px){
  .split-section::after{
    left: var(--header-gutter);
    width: calc(100vw - 2 * var(--header-gutter));
  }
}

/* === Split underline: force ON, align with header, visible on top === */
.split-section { position: relative; }

.split-section::after{
  content: "" !important;                    /* re-enable even if disabled earlier */
  position: absolute;
  left: var(--header-line-left, 0) !important;
  width: var(--header-line-width, 53vw) !important;
  bottom: var(--section-underline-offset, 0px) !important;
  border-bottom: 1px solid #000 !important;  /* black line */
  pointer-events: none;
  z-index: 9;                                 /* above content */
}

/* Keep small-screen alignment identical to header behavior */
@media (max-width: 480px){
  .split-section::after{
    left: var(--header-gutter) !important;
    width: calc(100vw - 2 * var(--header-gutter)) !important;
  }
}

/* How much lower than the caption bottom should the line sit? */
:root { --split-underline-gap: 115px; } /* try 8–16px to taste */

/* Apply the nudge: LOWER = subtract from the current bottom value */
.split-section::after{
  bottom: calc(var(--section-underline-offset, 0px) - var(--split-underline-gap, 0px)) !important;
}

/* === Big square behind overline + title (desktop/tablet only) === */
@media (min-width: 901px){
  .split-section .section-wrap{ position: relative; }

  /* Tunables */
  :root{
    --titlebg-color:  #FFF3D6;   /* square color */
    --titlebg-radius: 12px;      /* corner radius */
    --titlebg-shadow: 0 8px 24px rgba(0,0,0,.06);
    --titlebg-left-inset: 12px;  /* how far RIGHT of the title's start the square begins */
    --titlebg-right-inset: 8px;  /* safety gap before the image */
    --titlebg-pad-top: 12px;     /* extra breathing space above the overline */
    --titlebg-pad-bot: 16px;     /* extra breathing space below the title */
  }

  /* The square itself (positioned by JS via CSS vars; zero effect on layout) */
  .split-section .section-wrap::before{
    content: "";
    position: absolute;
    top: var(--titlebg-top, 0px);
    left: var(--titlebg-left, 0px);
    width: var(--titlebg-size, 0px);
    height: var(--titlebg-size, 0px);
    background: var(--titlebg-color);
    border-radius: var(--titlebg-radius);
    box-shadow: var(--titlebg-shadow);
    z-index: 18;             /* below title (20) & overline (19), above image (1) */
    pointer-events: none;
  }
}

/* Square scale factor (1 = original). 1.8 = +80% */
:root { --titlebg-scale: 1.8; }

/* Fine-tune the big square position (px; negative allowed) */
:root{
  --titlebg-nudge-x: 80px;  /* +right / -left  */
  --titlebg-nudge-y: -50px;  /* +down  / -up    */
}

/* === Big square style (color + heavy transparency + blur) === */
:root{
  /* Base color #4F4ECF with lots of transparency */
  --titlebg-alpha: 0.01;       /* 0.10–0.30 = very see-through */
  --titlebg-blur: 18px;        /* 6–14px looks nice */
  --titlebg-shadow: none;  /* kill the drop shadow to reduce visual weight */
}

/* If you already set --titlebg-color earlier, override it to #4F4ECF */
:root{
  /* Modern syntax (CSS Color 4) will use this */
  --titlebg-color-rgb: 79 78 207; /* #4F4ECF as space-separated RGB */
}

/* Apply the subtle style */
@media (min-width: 901px){
  .split-section .section-wrap::before{
    background: rgb(79 78 207 / var(--titlebg-alpha));    /* #4F4ECF with low alpha */
    backdrop-filter: blur(var(--titlebg-blur)) saturate(1.02);
    -webkit-backdrop-filter: blur(var(--titlebg-blur)) saturate(1.02);
    box-shadow: var(--titlebg-shadow);
    /* optional hairline to keep the square perceptible; remove if you want pure blur */
    outline: 1px solid rgb(79 78 207 / 0.10);
    outline-offset: -0.5px;
  }
}

/* Fallback for older browsers that don’t support rgb() with slash */
@supports not (background: rgb(0 0 0 / 0.5)){
  .split-section .section-wrap::before{
    background: rgba(79,78,207,var(--titlebg-alpha));
  }
}

/* === Carré dégradé : centre doux, bords très flous (≥901px) === */
:root{
  /* Couleur déjà définie (#4F4ECF), on garde vos knobs existants */
  --titlebg-alpha: 0.05;   /* opacité faible du centre */
  --titlebg-blur: 18px;    /* flou du centre */
  /* Nouveaux réglages pour le halo (bords) */
  --titlebg-edge-spread: 24px;  /* combien le halo dépasse le carré (px) */
  --titlebg-edge-blur: 32px;    /* flou des bords (plus grand que center) */
  --titlebg-edge-opacity: 0.10; /* densité du halo (0.06–0.14) */

  /* Profil du masque radial pour ne garder que les bords du halo */
  --titlebg-edge-band: 22%;     /* épaisseur approximative de l’anneau visible */
  --titlebg-edge-feather: 16%;  /* adoucissement du masque (transition) */
}

@media (min-width: 901px){
  /* CENTRE : votre carré existant (on garde la logique de position/size via JS) */
  .split-section .section-wrap::before{
    background: rgb(79 78 207 / var(--titlebg-alpha));
    backdrop-filter: blur(var(--titlebg-blur)) saturate(1.02);
    -webkit-backdrop-filter: blur(var(--titlebg-blur)) saturate(1.02);
    box-shadow: none;
    outline: 1px solid rgb(79 78 207 / 0.10);
    outline-offset: -0.5px;
  }

  /* HALO : bords plus flous autour du carré, sans toucher au contenu */
  .split-section .section-wrap::after{
    content: "";
    position: absolute;
    /* même centre, mais plus grand des deux côtés */
    top:  calc(var(--titlebg-top, 0px)  - var(--titlebg-edge-spread));
    left: calc(var(--titlebg-left, 0px) - var(--titlebg-edge-spread));
    width:  calc(var(--titlebg-size, 0px) + (2 * var(--titlebg-edge-spread)));
    height: calc(var(--titlebg-size, 0px) + (2 * var(--titlebg-edge-spread)));

    /* couleur identique mais un peu plus visible pour “lire” le flou */
    background: rgb(79 78 207 / var(--titlebg-edge-opacity));

    /* flou plus fort que le centre */
    backdrop-filter: blur(var(--titlebg-edge-blur));
    -webkit-backdrop-filter: blur(var(--titlebg-edge-blur));

    /* masque : centre transparent, bords visibles + plume */
    /* (on utilise un radial – approximation très naturelle même pour un carré) */
    -webkit-mask-image: radial-gradient(closest-side,
      transparent calc(50% - var(--titlebg-edge-band)),
      #000 calc(50% - var(--titlebg-edge-band) + var(--titlebg-edge-feather)),
      #000 100%
    );
            mask-image: radial-gradient(closest-side,
      transparent calc(50% - var(--titlebg-edge-band)),
      #000 calc(50% - var(--titlebg-edge-band) + var(--titlebg-edge-feather)),
      #000 100%
    );

    border-radius: var(--titlebg-radius, 12px);
    pointer-events: none;
    z-index: 18; /* sous le titre/overline, au-dessus de l’image */
  }
}

/* Fallback ancien syntaxe rgba si besoin */
@supports not (background: rgb(0 0 0 / 0.5)){
  @media (min-width: 901px){
    .split-section .section-wrap::before{
      background: rgba(79,78,207,var(--titlebg-alpha));
    }
    .split-section .section-wrap::after{
      background: rgba(79,78,207,var(--titlebg-edge-opacity));
    }
  }
}

/* ===== Carré : centre un peu plus visible / bords plus flous ===== */
:root{
  /* Centre (pseudo ::before) */
  --titlebg-alpha: 0.05;   /* ↑ visibilité du centre (0.10–0.16) */
  --titlebg-blur: 12px;    /* ↓ flou du centre (10–14px) */

  /* Halo/bords (pseudo ::after) */
  --titlebg-edge-opacity: 0.01; /* ↓ densité des bords (0.05–0.08) */
  --titlebg-edge-blur: 44px;    /* ↑ flou des bords (32–44px) */
  --titlebg-edge-spread: 45px;  /* halo un peu plus large autour (24–36px) */

  /* Profil du dégradé sur les bords (anneau plus fin + plume douce) */
  --titlebg-edge-band: 18%;
  --titlebg-edge-feather: 20%;
}

/* Optionnel : retirer totalement le liseré pour un centre “verre dépoli” pur */
@media (min-width: 901px){
  .split-section .section-wrap::before{
    outline: none;
  }
}

/* === Grand carré : rendu en dégradé radial (≥901px) === */
/* 1) Désactiver le halo ::after si vous l'aviez ajouté précédemment */
@media (min-width: 901px){
  .split-section .section-wrap::after{ content: none !important; }
}

/* 2) Paramètres faciles à régler */
:root{
  /* position du centre du dégradé à l'intérieur du carré */
  --titlebg-grad-x: 50%;  /* 0–100% → gauche→droite */
  --titlebg-grad-y: 50%;  /* 0–100% → haut→bas   */

  /* arrêts / intensité (vous pouvez les ajuster librement) */
  --titlebg-stop0:  rgba(79,78,207,0.08); /* centre un peu visible */
  --titlebg-stop1:  rgba(79,78,207,0.06);
  --titlebg-stop2:  rgba(79,78,207,0.04);
  --titlebg-stop3:  rgba(79,78,207,0.02);
  --titlebg-stop4:  rgba(242,242,242,0.00); /* bords transparents */

  /* rayon relatif des paliers (en %) : 0% → centre, 100% → bords du carré */
  --titlebg-r0:  0%;
  --titlebg-r1:  35%;
  --titlebg-r2:  58%;
  --titlebg-r3:  78%;
  --titlebg-r4: 100%;

  /* option : léger flou global si vous souhaitez adoucir encore (peut rester à 0) */
  --titlebg-blur: 20px;
}

/* 3) Appliquer le dégradé au pseudo-élément du carré */
@media (min-width: 901px){
  .split-section .section-wrap::before{
    /* on garde top/left/size posés par votre JS */
    background:
      radial-gradient(
        circle at var(--titlebg-grad-x) var(--titlebg-grad-y),
        var(--titlebg-stop0) var(--titlebg-r0),
        var(--titlebg-stop1) var(--titlebg-r1),
        var(--titlebg-stop2) var(--titlebg-r2),
        var(--titlebg-stop3) var(--titlebg-r3),
        var(--titlebg-stop4) var(--titlebg-r4)
      );
    /* pas de bord/ombre pour un rendu très doux */
    outline: none;
    box-shadow: none;
    /* un soupçon de flou si souhaité (0px par défaut) */
    backdrop-filter: blur(var(--titlebg-blur));
    -webkit-backdrop-filter: blur(var(--titlebg-blur));
  }
}

/* Fallback (anciens navigateurs sans rgb()/alpha moderne) : rien à faire, on reste en rgba() */


/* ===== Nouvelle section sous la ligne noire ===== */
.below-rail{
  background:#f2f2f2; color:#000;
  padding: 36px 0 80px; /* espace au-dessus & au-dessous */
  position: relative;
}

/* Conteneur calé sur la même "règle" que la ligne noire */
.rail-wrap{
  width: 92%; max-width: 1100px; margin-inline: auto; /* fallback */
}
@media (min-width: 481px){
  .rail-wrap{
    width: var(--header-line-width, 53vw) !important;
    margin-left: var(--header-line-left, 0) !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
}
@media (max-width: 480px){
  .rail-wrap{
    width: calc(100vw - 2 * var(--header-gutter)) !important;
    margin-left: var(--header-gutter) !important;
    margin-right: var(--header-gutter) !important;
    max-width: none !important;
  }
}

/* Titre 2 lignes — même famille & même logique de taille que .split-title */
.headline-rail{
  font-family: "Playfair Display", serif;
  font-weight: 400;
  line-height: 1.08;
  color:#000;
  margin: 0 0 28px 0;
  /* base mobile/tablette */
  font-size: clamp(34px, 6vw, 70px);
}
.headline-rail .line1, .headline-rail .line2{ display:block; white-space: nowrap; }

@media (min-width: 901px) and (max-width: 1449px){
  .headline-rail{
    /* Reprend la même interpolation que votre .split-title */
    font-size: calc(36px + (34 * ((100vw - 901px) / 549))) !important;
  }
}
@media (min-width: 1450px){
  .headline-rail{ font-size: 70px !important; }
}

/* Grille 3 carrés qui remplissent parfaitement la largeur du rail */
.gallery-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;                /* espace entre les carrés */
  margin-top: 22px;
}

/* Chaque carte : image carrée + légende en-dessous */
.card{ margin: 0; }
.img-box{
  width: 100%;
  aspect-ratio: 1 / 1;      /* carrés parfaits */
  overflow: hidden;
  border-radius: 8px;
  background:#eee;
}
.img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Légendes : sans-serif, confinées à la largeur du carré */
.card-caption{ margin-top: 10px; }
.card-title{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;         /* "large caractères" */
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.15;
  margin: 0 0 6px 0;
  color:#000;
}
.card-text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 15px);
  line-height: 1.45;
  margin: 0;
  color:#000;
  /* sécurité : ne pas déborder du carré */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Responsif : sous 900px, on empile (toujours contenu dans le rail mobile) */
@media (max-width: 900px){
  .gallery-3{ grid-template-columns: 1fr; gap: 16px; }
}

/* === Card headers: same font as split-title, but 50% smaller (with identical scaling) === */
.card-title{
  font-family: "Playfair Display", serif !important;
  font-weight: 600;              /* or 400 if you want it to match exactly */
  line-height: 1.08;
  margin: 0 0 6px 0;
  color:#000;

  /* Mobile/tablet base — 50% of split-title's clamp(34px, 6vw, 70px) */
  font-size: clamp(17px, 3vw, 35px);
}
@media (min-width: 901px) and (max-width: 1449px){
  .card-title{
    /* 50% of your desktop interpolation: (36px → 70px) */
    font-size: calc((36px + (34 * ((100vw - 901px) / 549))) * 0.5) !important;
  }
}
@media (min-width: 1450px){
  .card-title{ font-size: calc(70px * 0.5) !important; }
}

/* === Card body text: same styling as .media-caption, constrained to image width === */
.card-caption{ margin-top: 10px; }
.card-text{
  font-family: sans-serif;       /* mirrors .media-caption */
  font-weight: 500;
  font-size: clamp(15px, 1.375vw, 15px);
  line-height: 1.45;
  color: #000;
  margin: 0;

  /* safety: never overflow the card width */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* === Images: perfect squares, no rounded corners === */
.img-box{
  width: 100%;
  aspect-ratio: 1 / 1;          /* perfect square */
  overflow: hidden;
  border-radius: 0 !important;  /* remove rounding */
  background: #eee;
}
.img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* fills the square cleanly */
  display: block;
}

/* 1) Card titles: same Playfair, NOT bold */
.card-title{
  font-family: "Playfair Display", serif !important;
  font-weight: 400 !important;   /* not bold */
  line-height: 1.08;
}

/* keep 50% sizing vs split-title (unchanged) */
@media (min-width: 901px) and (max-width: 1449px){
  .card-title{ font-size: calc((36px + (34 * ((100vw - 901px) / 549))) * 0.5) !important; }
}
@media (min-width: 1450px){
  .card-title{ font-size: calc(70px * 0.5) !important; }
}

/* 2) Text underneath shifted slightly down */
.card-caption{ padding-top: 6px; }          /* gentle push */
.card-title{ margin-bottom: 16px !important; } /* a touch more space before text */

/* 3) Reduce space between the black line above and the 3 pictures by 60% */
.below-rail{ padding-top: calc(36px * 0.4) !important; }     /* was 36px → now ~14px */
.headline-rail{ margin-bottom: calc(28px * 0.4) !important; }/* was 28px → now ~11px */
.gallery-3{ margin-top: calc(22px * 0.4) !important; }       /* was 22px → now ~9px */

/* 4) Ensure images stay perfect squares (no rounding) */
.img-box{ border-radius: 0 !important; }

/* Réduire fortement l'espace SOUS la ligne noire, sans bouger la ligne */
.below-rail{
  padding-top: 0px !important;   /* était ~14–36px → bien plus serré */
}

/* Empêcher le titre d’ajouter un écart en haut */
.headline-rail{
  margin-top: 0 !important;
}

/* Ne laisse AUCUN vide sous la ligne à l'intérieur de .split-section */
:root { --split-underline-gap: 0px !important; }

.split-section::after{
  /* La ligne se cale exactement sur le bas du contenu mesuré par le script */
  bottom: var(--section-underline-offset, 0px) !important;
}

/* Remonter la section suivante exactement de la hauteur “vide” laissée par .split-section */
.below-rail{
  position: relative;                 /* on peut la déplacer sans sortir du flux global */
  top: calc(-1 * var(--section-gap-eat, 0px));
  /* petit coussin sous la ligne noire (tweak à volonté, ne change pas la ligne elle-même) */
  padding-top: 10px;                  /* ex. 8–14px selon ton goût */
}

/* Sécurité : pas de marge haute qui recrée un trou par collapse */
.headline-rail{ margin-top: 0; }

/* ===== Fine-tune gaps around the black underline ===== */

/* 1) GAP ABOVE the line (between “En savoir plus” and the black line) */
:root { --gap-above-line: 140px; } /* tweak freely (e.g., 6–20px) */

/* The underline stays aligned with the header rail, we just nudge it down */
.split-section::after{
  bottom: calc(var(--section-underline-offset, 0px) - var(--gap-above-line, 0px)) !important;
}

/* 2) GAP BELOW the line (before “Le TDAH vu par…”) */
:root { --gap-below-line: 200px; } /* tweak freely (e.g., 6–20px) */

/* We keep eating the layout “tail” from .split-section, then reinsert your chosen gap */
.below-rail{
  position: relative;
  top: calc(-1 * var(--section-gap-eat, 0px));   /* computed by your JS */
  padding-top: var(--gap-below-line, 12px) !important; /* your fine-tune */
}

/* Safety: prevent collapsed top margins from re-opening a gap unexpectedly */
.headline-rail{ margin-top: 0 !important; }

/* New: fine-tune the gap between “Le changement commence ici” and the 3 images */
:root{
  --gap-headline-to-gallery: 36px; /* tweak freely (e.g., 8–40px) */
}

/* Ensure the headline itself doesn't add extra space on top/bottom */
.headline-rail{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The only vertical space between headline and images comes from this */
.gallery-3{
  margin-top: var(--gap-headline-to-gallery) !important;
}

/* === Below-rail title = split-title (mêmes tailles/aspect) === */
.headline-rail{
  font-family: "Playfair Display", serif !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  color: #000 !important;

  /* même base que .split-title */
  font-size: clamp(34px, 6vw, 70px) !important;
}

/* même interpolation 901–1449px que .split-title */
@media (min-width: 901px) and (max-width: 1449px){
  .headline-rail{
    font-size: calc(36px + (34 * ((100vw - 901px) / 549))) !important;
  }
}

/* lock à 70px ≥1450px comme .split-title */
@media (min-width: 1450px){
  .headline-rail{ font-size: 70px !important; }
}

/* même “boost” 135% des lignes qu’on applique aux lignes de .split-title */
@media (min-width: 901px){
  .headline-rail .line1,
  .headline-rail .line2{
    white-space: nowrap;
    display: block;
    font-size: 135% !important;
  }
}

/* === Alignement parfait du below-rail-title sur split-title === */

/* ≥901px : même décalage X que .split-title */
@media (min-width: 901px){
  .headline-rail{
    transform: translateX(var(--title-shift-x, 0px)) !important;
  }
}

/* ≤900px : même logique que la version mobile de .split-title
   (texte contenu par un padding latéral identique) */
@media (max-width: 900px){
  :root{ --side-pad: var(--side-pad, 6%); } /* garde ta valeur existante */
  .headline-rail{
    padding-inline: var(--side-pad) !important;
  }
}

/* Option sécurité : empêcher qu’un éventuel transform hérité ne cumule */
.below-rail .rail-wrap{ transform: none !important; }

/* === Below-rail title : 10% plus petit que split-title === */

/* Base (mobile/tablette) : split-title est clamp(34px, 6vw, 70px) → *0.9 */
.headline-rail{
  font-size: clamp(30.6px, 5.4vw, 63px) !important;
}

/* 901–1449px : réplique la formule desktop de split-title, *0.9 */
@media (min-width: 901px) and (max-width: 1449px){
  .headline-rail{
    font-size: calc((36px + (34 * ((100vw - 901px) / 549))) * 0.9) !important;
  }
}

/* ≥1450px : 70px → 63px */
@media (min-width: 1450px){
  .headline-rail{ font-size: 63px !important; }
}

/* On conserve l’alignement horizontal déjà mis en place */
@media (min-width: 901px){
  .headline-rail{
    transform: translateX(var(--title-shift-x, 0px)) !important;
  }
}
@media (max-width: 900px){
  .headline-rail{
    padding-inline: var(--side-pad, 6%) !important;
  }
}

/* === Below-rail (≤900px): bigger card titles + extra gaps for card 2 & 3 === */
@media (max-width: 900px){
  /* Double the title size (basically the split-title mobile size) */
  .gallery-3 .card-title{
    font-size: clamp(34px, 6vw, 70px) !important;
  }

  /* Add a top margin before the 3 images */
  .gallery-3 .card:nth-child(1),
  .gallery-3 .card:nth-child(2),
  .gallery-3 .card:nth-child(3){
    margin-top: var(--mobile-card-stack-gap, 36px);
  }
}

/* ≤500px: 3 lines for below-rail title */
@media (max-width: 500px){
  /* keep line blocks */
  #below-rail-title .line1,
  #below-rail-title .line2 { display: block; }

  /* move "commence ici" to a new line, keep it italic */
  #below-rail-title .line2 i{
    font-style: italic;
  }

  /* add a comma after "Le changement" and force a line break before the <i> text */
  #below-rail-title .line2 i::before{
    content: "\A";
    white-space: pre;
    /* pull the comma left so it hugs the preceding word (removes the HTML space) */
    margin-left: -0.35ch;
  }
}

/* ===== Full-viewport split: left indigo block + right image ===== */
.mission-split{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* two equal parts */
  width: 100vw;
  height: 100vh;                   /* fill full viewport */
  overflow: hidden;                /* no bleed */
}

.mission-left{
  background: #976cc8;            /* indigo */
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-title{
  /* reuse .card-title sizing & family via class; just reset margins/align */
  margin: 0;
  text-align: center;
  /* color must match card-title (black) per your request */
  color: #000;
}

.mission-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* full-bleed inside its half */
  display: block;
}

.mission-right{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;           /* optional backdrop while centering */
}

.mission-right img{
  aspect-ratio: 1.6545 / 1;   /* enforce 1.6545:1 */
  width: 100%;                /* fill the column’s width */
  height: auto;               /* let aspect-ratio compute height */
  max-height: 100%;           /* never exceed the column’s height */
  object-fit: cover;          /* nice crop if needed */
  display: block;
}

/* Wrapper that holds the two halves */
.mission-row{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* left | right */
  align-items: stretch;            /* make both columns the same row height */
}

/* Left panel */
.mission-left{
  display: flex;                   /* for centering your text */
  align-items: center;
  justify-content: center;
  background: #976cc8;            
  /* No fixed height here; it will match the image height automatically */
}

/* Right panel + image with strict 1.6545 ratio */
.mission-right{
  display: block;
}

.mission-right img{
  aspect-ratio: 1.6545 / 1;  /* W/H = 1.6545 */
  width: 100%;               /* fill right column width */
  height: auto;              /* lets aspect-ratio compute the height */
  object-fit: cover;         /* nice crop if needed without distortion */
  display: block;
}

/* Two equal columns; let items stretch to the row height */
.mission-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* Right side: the image sets the row height via its aspect-ratio */
.mission-right img{
  width: 100%;
  height: auto;              /* height comes from aspect-ratio */
  aspect-ratio: 1.6545 / 1;  /* W/H = 1.6545 */
  object-fit: cover;         /* safe crop, no distortion */
  display: block;
}

/* Left panel: do NOT contribute height; just fill whatever the row is */
.mission-left{
  position: relative;        /* to anchor the inner */
  /* background: #4d5699; */
 /* background: #50abc5; */
 background: #415aa0;
  min-height: 0;             /* prevent accidental extra height */
  padding: 0;                /* avoid padding pushing height */
}

/* Absolutely positioned inner box doesn’t affect grid sizing */
.mission-left-inner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Title styling – same family/weight/size/color as your card-titles */
.mission-title{
  font-family: "Playfair Display", serif;
  font-weight: 400;
  line-height: 1.08;
  color: #000;               /* same as card-titles */
  margin: 0;
  font-size: clamp(17px, 3vw, 35px);
}
@media (min-width: 901px) and (max-width: 1449px){
  .mission-title{ font-size: calc((36px + (34 * ((100vw - 901px) / 549))) * 0.5); }
}
@media (min-width: 1450px){
  .mission-title{ font-size: calc(70px * 0.5); }
}

/* Fine-tune the space between “below-rail” and the new mission section */
:root{
  --gap-below-rail: 150px;     /* bottom padding of the below-rail section */
  --gap-before-mission: -310px; /* top margin of the mission section */
}

/* Reduce the big default 80px bottom padding */
.below-rail{
  padding-bottom: var(--gap-below-rail) !important;
}

/* Control the gap above the mission block */
.mission{
  margin-top: var(--gap-before-mission);
}

/* Mission (left) — white text, centered */
.mission-left {
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-content {
  width: 90%;
  max-width: 680px;
  margin: 0 auto;
}

/* Title = same font family/appearance as .card-title (Playfair, not bold) */
.mission-title {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  line-height: 1.08;
  color: #fff;
  margin: 0;
  /* same base sizing as .card-title (50% of split-title) */
  font-size: clamp(17px, 3vw, 35px);
}

.mission-title .line1,
.mission-title .line2 { display: block; }

/* small vertical gap between the two lines if you want */
.mission-title .line1 { margin-bottom: 0.1em; }

/* Match your desktop interpolation */
@media (min-width: 901px) and (max-width: 1449px){
  .mission-title{
    font-size: calc((36px + (34 * ((100vw - 901px) / 549))) * 0.5) !important;
  }
}
@media (min-width: 1450px){
  .mission-title{ font-size: calc(70px * 0.5) !important; }
}

/* Gap between title and body (tunable) */
:root { --mission-gap: 16px; }
.mission-body { margin-top: var(--mission-gap); }

/* Body = sans-serif, 30% smaller than the title */
.mission-body {
  font-family: sans-serif;
  line-height: 1.45;
  color: #fff;
  /* 70% of the title size, across all viewports */
  font-size: calc(clamp(17px, 3vw, 35px) * 0.7);
}

@media (min-width: 901px) and (max-width: 1449px){
  .mission-body{
    font-size: calc((36px + (34 * ((100vw - 901px) / 549))) * 0.5 * 0.7) !important;
  }
}
@media (min-width: 1450px){
  .mission-body{ font-size: calc(70px * 0.5 * 0.7) !important; }
}

/* Paragraph spacing */
.mission-body p {
  margin: 0 0 0.9em 0;
}
.mission-body p:last-child { margin-bottom: 0; }

/* Tunables */
:root{
  --mission-gap-12: 0.3em;  /* gap between line 1 and line 2 */
  --mission-gap-after: 2.0em; /* bigger gap after line 2 (before body) */
}

/* Apply the gaps on the title lines */
.mission-title .line1{ margin-bottom: var(--mission-gap-12); }
.mission-title .line2{ margin-bottom: var(--mission-gap-after); }

/* Avoid double spacing: neutralize the old body top-gap if you had it */
.mission-body{ margin-top: 0 !important; }

/* Fine-tune spacing between the two paragraphs in mission-body */
:root{
  --mission-paragraph-gap: 1.6em; /* tweak to taste */
}

.mission-body p{ margin: 0; }                 /* reset */
.mission-body p + p{ margin-top: var(--mission-paragraph-gap); }

/* (Optional) different spacing on small screens */
@media (max-width: 900px){
  :root{ --mission-paragraph-gap: 1em; }
}

/* Make ONLY the first line of the mission title look like an overline */
.mission-title .line1{
  font-family: sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  display: block;
  margin: 0 0 8px 5px; /* similar spacing to your overline */
  margin-bottom: 20px;
}

/* Keep line 2 as your Playfair title (inherits from .mission-title) */
.mission-title .line2{
  display: block;
  margin: 0; /* avoids extra gap if something else adds spacing */
  margin-bottom: 75px;
}

/* =========================
   Testimonials
========================= */
.testimonials{
  background: #f2eeeb;
  color: #000;
  padding: 80px 0 90px;
}

/* Reuse rail alignment (same as .below-rail) */
.testimonials-wrap{
  /* nothing special here: it already uses .rail-wrap rules */
}

/* Title: same family as split-title, a bit smaller than below-rail */
.testimonials-title{
  font-family: "Playfair Display", serif;
  font-weight: 400;
  line-height: 1.08;
  color: #000;
  margin: 0 0 32px 0;
  font-size: clamp(28px, 4.5vw, 48px);
}

.testimonials-title .line1,
.testimonials-title .line2{
  display: block;
  white-space: nowrap;
}

/* Smooth scaling on desktop like your other titles */
@media (min-width: 901px) and (max-width: 1449px){
  .testimonials-title{
    font-size: calc((36px + (34 * ((100vw - 901px) / 549))) * 0.7) !important;
  }
}
@media (min-width: 1450px){
  .testimonials-title{
    font-size: calc(70px * 0.7) !important;
  }
}

/* Grid : 3 cards desktop, 2 medium, 1 on small screens */
.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

@media (max-width: 1100px){
  .testimonials-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 700px){
  .testimonials-grid{
    grid-template-columns: 1fr;
  }
}

/* Individual card */
.testimonial-card{
  margin: 0;
  padding: 24px 22px 26px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Quote styling */
.testimonial-quote{
  margin: 0 0 18px 0;
  font-family: sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 500;
  position: relative;
}

/* Big opening quote mark */
/*
.testimonial-quote::before{
  content: "“";
  position: absolute;
  left: -4px;
  top: -16px;
  font-family: "Playfair Display", serif;
  font-size: 46px;
  line-height: 1;
  color: rgba(0,0,0,.15);
}
*/

/* Meta (name + role) pinned to the bottom of the card */
.testimonial-meta{
  margin-top: auto;
}

.testimonial-name{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 4px 0;
}

.testimonial-role{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  margin: 0;
}

:root{
  /* tweak this value to move the 3 cards up/down */
  --gap-title-to-testimonials: 48px;  /* try 40–60px to taste */
}

.testimonials-grid{
  margin-top: var(--gap-title-to-testimonials);
}

.testimonials .headline-rail {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.testimonials .headline-rail {
  width: 100%;
  max-width: none;      /* cancel the rail width constraint */
  padding: 0;           /* remove left padding from the rail */
  text-align: center;
}

.testimonials .headline-rail .line1,
.testimonials .headline-rail .line2 {
  display: block;
  text-align: center;
}

/* Testimonials title: truly centered, no desktop shift */
.testimonials .headline-rail{
  transform: none !important;   /* cancel the global translateX */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.testimonials .headline-rail .line1,
.testimonials .headline-rail .line2{
  display: block;
  text-align: center;
}



/* ============================
   PHOTO BANNER (after testimonials)
============================ */

.photo-banner {
  margin: 80px 0; /* space above/below – adjust if needed */
}

/* Align width with your header underline rail */
@media (min-width: 481px){
  .photo-banner-rail {
    width: var(--header-line-width, 53vw) !important;
    margin-left: var(--header-line-left, 0) !important;
    margin-right: 0 !important;
    position: relative;
  }
}

/* Mobile — follow global gutter */
@media (max-width: 480px){
  .photo-banner-rail {
    width: calc(100vw - 2 * var(--header-gutter)) !important;
    margin-left: var(--header-gutter) !important;
    margin-right: var(--header-gutter) !important;
    position: relative;
  }
}

/* The image (landscape) */
.photo-banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 8.8; /* was 16/8 — now ~10% taller */
}


/* Dark overlay like Mikaela Reuben */

/*.photo-banner-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.70) 40%,
    rgba(0,0,0,0.85) 100%
  );
  pointer-events: none;
}
*/

/* Dark overlay like Mikaela Reuben - version plus légère */
.photo-banner-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.275) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.425) 100%
  );
  pointer-events: none;
}

/* Text on the right part of the image */
.photo-banner-text {
  position: absolute;
  inset: 0 5% 0 55%; /* right half area */
  display: flex;
  align-items: center;
  color: #fff;
  z-index: 1;
}

/* Title styling */
.photo-banner-title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.08;
}

.photo-banner-title .line1,
.photo-banner-title .line2 {
  display: block;
}

/* On mobile: center text */
@media (max-width: 700px) {
  .photo-banner-text {
    inset: 0 8% 0 8%;
    justify-content: center;
    text-align: center;
  }
}

/* Layout is already defined (photo-banner, photo-banner-rail, photo-banner-img, overlay)
   We only add the inner stack (title + small text + button) */

/* Container for text block on the right half */
.photo-banner-text {
  position: absolute;
  inset: 0 5% 0 55%;           /* right half of the image */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* keeps content aligned to the left inside that half */
  color: #fff;
  z-index: 1;
}

/* Inner column: title + body + button */
.photo-banner-inner {
  max-width: 520px;
}

/* Title (keeps what we had) */
.photo-banner-title {
  margin: 0 0 16px 0;
  font-family: "Playfair Display", serif;
  font-weight: 400;

  /* +25% increase */
  font-size: clamp(35px, 5vw, 62px);

  line-height: 1.08;
  color: #fff;
}

.photo-banner-title .line1,
.photo-banner-title .line2 {
  display: block;
}

/* Smaller text under the header (like Mikaela hero) */
.photo-banner-body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px 0;
}

.photo-banner-body p {
  margin: 0 0 0.85em 0;
}
.photo-banner-body p:last-child {
  margin-bottom: 0;
}

.photo-banner-btn {
  display: inline-block;
  background: #000;            /* PURE BLACK background */
  color: #fff;                 /* white text */
  text-decoration: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid #000;      /* white border */
  border-radius: 0;            /* perfect rectangle */
  letter-spacing: 0.3px;
  margin-top: 18px;            /* shift button downward */
  transition: background 0.25s ease, color 0.25s ease;
}

.photo-banner-btn:hover,
.photo-banner-btn:focus-visible {
  background: #fff;            /* invert on hover */
  color: #000;
}

.photo-banner-btn:active {
  transform: translateY(1px);
}


/* Mobile: center everything over the image */
@media (max-width: 700px) {
  .photo-banner-text {
    inset: 0 8% 0 8%;
    justify-content: center;
    text-align: center;
  }

  .photo-banner-inner {
    max-width: 100%;
  }

  .photo-banner-title {
    font-size: clamp(24px, 6vw, 34px);
  }

  .photo-banner-body {
    font-size: 14px;
  }

  .photo-banner-btn {
    margin-top: 18px;
  }
}

/* =========================
   Footer
========================= */
.site-footer{
  background: #111;
  color: #f5f5f5;
  padding: 40px 0 26px;
  font-size: 14px;
}

/* Inner layout uses the same rail alignment via .rail-wrap */
.footer-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 16px;
  border-top: 1px solid rgba(255,255,255,.14); /* thin, coherent line */
}

.footer-brand{
  max-width: 320px;
}

.footer-logo{
  margin: 0 0 6px 0;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: .6px;
  font-size: 22px;
}

.footer-tagline{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #ddd;
}

/* Columns on the right */
.footer-columns{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-col{
  min-width: 160px;
}

.footer-heading{
  margin: 0 0 10px 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #bbb;
}

.footer-nav{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-nav a{
  color: #f5f5f5;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}

.footer-nav a:hover,
.footer-nav a:focus{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-text{
  margin: 0 0 6px 0;
  line-height: 1.6;
  color: #ddd;
}

.footer-link{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 1px;
}

.footer-link:hover,
.footer-link:focus{
  border-bottom-color: #fff;
}

/* Bottom meta line */
.footer-meta{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.footer-copy{
  margin: 0;
  color: #aaa;
  font-size: 12px;
  line-height: 1.4;
}

.footer-small{
  text-align: right;
  max-width: 420px;
}

/* Stack nicely on small screens */
@media (max-width: 800px){
  .footer-inner{
    flex-direction: column;
    gap: 24px;
  }
  .footer-columns{
    flex-direction: column;
    gap: 20px;
  }
  .footer-meta{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-small{
    text-align: left;
    max-width: none;
  }
}




/* =========================================
   MOBILE / SMALL VIEWPORT TWEAKS
   - mission
   - testimonials
   - photo-banner
   - footer
========================================= */

/* === 1) Mission section (stacked, readable) === */
@media (max-width: 900px){
  .mission-row{
    display: block;              /* stack instead of 2 columns */
  }

  .mission-left,
  .mission-right{
    width: 100%;
  }

  /* Let the left content flow naturally, no absolute overlay */
  .mission-left{
    position: static;
    padding: 32px 8%;
    display: block;
    text-align: left;
  }

  .mission-left-inner{
    position: static;
    inset: auto;
    display: block;
    padding: 0;
  }

  .mission-content{
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .mission-title{
    text-align: left;
  }

  .mission-body{
    text-align: left;
    font-size: 15px !important; /* slightly smaller than desktop scaling */
  }

  .mission-right{
    margin-top: 24px;
  }

  .mission-right img{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;  /* more natural on phones */
    object-fit: cover;
  }
}

/* === 2) Testimonials section (lighter & more compact) === */
@media (max-width: 900px){
  .testimonials{
    padding: 48px 0 60px; /* less tall on phones */
  }

  .testimonials .headline-rail{
    padding-inline: 6%;
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .testimonials-grid{
    gap: 16px;
  }

  .testimonial-card{
    padding: 18px 16px 20px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }

  .testimonial-quote{
    font-size: 19px;
    line-height: 1.55;
  }

  .testimonial-quote::before{
    font-size: 34px;
    top: -10px;
    left: -2px;
  }

  .testimonial-name{
    font-size: 15px;
  }

  .testimonial-role{
    font-size: 13px;
  }
}

/* === 3) Photo-banner (Maggy) – better on small screens === */
@media (max-width: 900px){
  .photo-banner{
    min-height: 60vh;             /* slightly shorter on phones */
  }

  .photo-banner-inner{
    align-items: flex-end;        /* keep content near bottom */
  }

  .photo-banner-content{
    width: 100%;
    max-width: 100%;
    padding: 24px 8% 28px;
    text-align: left;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.6),
      rgba(0,0,0,0.2)
    ); /* help text legibility */
  }

  .photo-banner-title{
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .photo-banner-text{
    font-size: 14px;
    line-height: 1.6;
    max-width: none;
  }

  .photo-banner-text p{
    margin-bottom: 0.8em;
  }

  .btn-photo-banner{
    display: inline-flex;
    margin-top: 16px;
    padding: 0.6rem 1.4rem;
    font-size: 14px;
    border-radius: 0;              /* keep it rectangular as requested */
  }
}

/* === 4) Footer – stacked, simpler, easier to read === */
@media (max-width: 800px){
  .site-footer{
    padding: 32px 0 22px;
    font-size: 13px;
  }

  .footer-inner{
    flex-direction: column;
    gap: 20px;
    padding-top: 4px;
    padding-bottom: 12px;
  }

  .footer-brand{
    max-width: none;
  }

  .footer-logo{
    font-size: 20px;
  }

  .footer-tagline{
    font-size: 13px;
  }

  .footer-columns{
    flex-direction: column;
    gap: 18px;
  }

  .footer-col{
    min-width: 0;
  }

  .footer-heading{
    font-size: 12px;
  }

  .footer-nav a{
    font-size: 13px;
  }

  .footer-meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 8px;
  }

  .footer-copy{
    font-size: 11px;
  }

  .footer-small{
    max-width: none;
    text-align: left;
  }
}


/* Reorder mission section on mobile: image first, text second */
@media (max-width: 900px){

  .mission-row{
    display: flex;
    flex-direction: column;
  }

  /* Force ordering */
  .mission-right{
    order: 1;     /* image on top */
  }

  .mission-left{
    order: 2;     /* text underneath */
  }

  /* Adjust spacing */
  .mission-right img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .mission-left{
    padding: 28px 8%;
  }
}


/* === Mission: clean mobile layout (image on top, text below) === */
@media (max-width: 700px){

  /* Cancel the big negative gap before mission on small screens */
  .mission{
    margin-top: 40px !important;   /* tweak to taste */
  }

  /* Stack vertically instead of grid */
  .mission-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Order: image first, text second */
  .mission-right{
    order: 1;
  }

  .mission-left{
    order: 2;
  }

  /* Let both sides behave like normal blocks */
  .mission-left,
  .mission-right{
    position: static !important;
    min-height: 0 !important;
  }

  /* Make the inner text box normal (no absolute fill) */
  .mission-left-inner{
    position: static !important;
    inset: auto !important;
    display: block !important;
    padding: 32px 8% 40px !important;  /* comfy padding on mobile */
  }

  /* Image: simple responsive block, no weird max-height/aspect issues */
  .mission-right img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    display: block;
  }
}


/* === 1. Desktop / large viewports: equal heights in mission section === */
@media (min-width: 901px){
  /* Use flex so both sides always share the same height */
  .mission-row{
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }

  .mission-left,
  .mission-right{
    flex: 1 1 0;
    min-height: 420px;                /* tweak this if you want it taller/shorter */
    position: relative;
  }

  /* Image fills its half, same height as the purple panel */
  .mission-right img{
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    display: block;
  }

  /* Text box fills the purple panel without affecting height */
  .mission-left-inner{
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8% !important;  /* horizontal breathing room */
  }
}

/* === 2. Mission text: scale down progressively on narrower desktops === */
/* This keeps the copy from colliding with the edges of the purple rectangle */
@media (min-width: 901px) and (max-width: 1200px){
  .mission-title{
    font-size: clamp(20px, 2.4vw, 28px) !important;
  }

  .mission-body{
    font-size: clamp(14px, 1.6vw, 18px) !important;
  }

  /* Slightly tighten paragraph spacing so the block stays airy */
  .mission-body p + p{
    margin-top: 1.2em !important;
  }
}


/* === Mission text scaling for 901px–2000px: always fits inside the purple block === */
@media (min-width: 901px) and (max-width: 2000px){
  /* Title: strong but not gigantic, tied to viewport width */
  .mission-title{
    font-size: clamp(22px, 2.2vw, 30px) !important;
    line-height: 1.15 !important;
  }

  /* Body text: smaller, comfortable, never too tall */
  .mission-body{
    font-size: clamp(14px, 1.4vw, 18px) !important;
    line-height: 1.45 !important;
  }

  /* Slightly tighter paragraph spacing so the block is more compact */
  .mission-body p + p{
    margin-top: 1.1em !important;
  }

  /* Make sure the inner content has enough breathing room
     and can't "push" outside the purple rectangle */
  .mission-left-inner{
    padding: 8% 10% !important;   /* top/bottom 8%, sides 10% */
    box-sizing: border-box;
  }

  /* Safety: prevent any weird inherited transforms from shifting it out of the box */
  .mission-left{
    overflow: hidden;  /* hides any tiny rounding artifacts */
  }
}

/* === Fix: MA MISSION is too high between 1070px–1550px === */
@media (min-width: 1070px) and (max-width: 1550px){
  .mission-title{
    transform: translateY(12px) !important; /* adjust: 8–16px depending on taste */
  }
}



/* === Photo-banner body text: only shrink below 1450px === */

/* Base (what you already like on big screens) 
   → keep your current .photo-banner-body rule as-is, no change here */

/* Slightly smaller below 1450px */
@media (max-width: 1450px){
  .photo-banner-body {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

/* Smaller again below 1150px */
@media (max-width: 1150px){
  .photo-banner-body{
    font-size: 11px !important;
  }
}

/* Tablet / small laptop */
@media (max-width: 900px){
  .photo-banner-body{
    font-size: 10px !important;
  }
}

/* Mobile */
@media (max-width: 700px){
  .photo-banner-body{
    font-size: 15px !important;
  }
}

/* Very small phones */
@media (max-width: 480px){
  .photo-banner-body{
    font-size: 14px !important;
  }
}


/* === Responsive scaling for the photo-banner headline === */
/* Base size stays as-is for >=1451px */

/* Slightly smaller below 1450px */
@media (max-width: 1450px){
  .photo-banner-title{
    font-size: 40px !important;
    line-height: 1.15 !important;
  }
}

/* Smaller below 1150px */
@media (max-width: 1150px){
  .photo-banner-title{
    font-size: 34px !important;
  }
}

/* Tablet / small laptops */
@media (max-width: 900px){
  .photo-banner-title{
    font-size: 30px !important;
  }
}

/* Mobile */
@media (max-width: 700px){
  .photo-banner-title{
    font-size: 26px !important;
  }
}

/* Very small phones */
@media (max-width: 480px){
  .photo-banner-title{
    font-size: 24px !important;
  }
}


/* === Mobile layout for photo-banner text (<901px) === */
@media (max-width: 900px){
  .photo-banner-text{
    position: relative !important;
    top: 20px !important;          /* you can tweak this up/down */
    transform: none !important;

    /* make sure it doesn’t stick out of the viewport */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* comfy side padding so text never touches the edges */
    padding: 0 20px 32px !important;
  }

  /* center the content inside that full-width block */
  .photo-banner-inner{
    max-width: 640px;
    margin: 0 auto !important;
    text-align: center;
  }

  .photo-banner-title,
  .photo-banner-body,
  .photo-banner-btn{
    text-align: center;
  }
}

@media (max-width: 900px){
  .photo-banner-btn{
    transform: scale(0.8);        /* 40% reduction */
    transform-origin: center;      /* keep it centered */
    display: inline-block;         /* required for proper scaling */
    margin-top: 20px !important;   /* optional tweak */
  }
}

/* Fix gap between BELOW-RAIL and MISSION on mid-size screens */
@media (min-width: 901px) and (max-width: 1250px){
  .mission{
    margin-top: -220px !important;
  }
}

/* On small screens, show the entire family.jpg (no cropping) */
@media (max-width: 900px){
  .mission-right img{
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;  /* show the FULL image */
    display: block;
  }
}

/* ===== Mission spacing fix on small screens ===== */
@media (max-width: 900px){
  .mission{
    margin-top: 32px !important;  /* or 0 if you want it snug */
  }
}

/* === Make mission-title match photo-banner-title responsive sizes === */

/* Base (large screens ≥1451px)
   → No change needed if your current mission-title font size is correct there */

/* Below 1450px */
@media (max-width: 1450px){
  .mission-title{
    font-size: 40px !important;
    line-height: 1.15 !important;
  }
}

/* Below 1150px */
@media (max-width: 1150px){
  .mission-title{
    font-size: 34px !important;
  }
}

/* Below 900px */
@media (max-width: 900px){
  .mission-title{
    font-size: 30px !important;
  }
}

/* Below 700px */
@media (max-width: 700px){
  .mission-title{
    font-size: 26px !important;
  }
}

/* Below 480px */
@media (max-width: 480px){
  .mission-title{
    font-size: 24px !important;
  }
}

/* === Force mission-title to match photo-banner-title sizing === */

/* Base (large screens ≥1451px) — same as your photo-banner-title base logic */
h3.mission-title{
  font-family: "Playfair Display", serif;
  font-weight: 400;
  line-height: 1.15 !important;
  font-size: clamp(34px, 6vw, 70px) !important;
}



/* <900px */
@media (max-width: 900px){
  h3.mission-title{
    font-size: 30px !important;
  }
}

/* <700px */
@media (max-width: 700px){
  h3.mission-title{
    font-size: 26px !important;
  }
}

/* <480px */
@media (max-width: 480px){
  h3.mission-title{
    font-size: 24px !important;
  }
}

/* === Swap sizes between line1 and line2 inside mission-title === */

/* Base style: apply a large title size to line1, smaller to line2 */
.mission-title .line1{
  font-size: 0.7em !important;   /* bigger */
  font-weight: 500 !important;
  display: block;
}

.mission-title .line2{
  font-size: 0.35em !important;   /* smaller */
  font-weight: 400 !important;
  display: block;
  margin-top: 0.2em;
}

/* Responsive fine-tuning (optional) */
/* Reduce the swapped sizes on smaller screens */
@media (max-width: 900px){
  .mission-title .line1{
    font-size: 1.15em !important;
  }
  .mission-title .line2{
    font-size: 0.6em !important;
  }
}

@media (max-width: 600px){
  .mission-title .line1{
    font-size: 1.1em !important;
  }
  .mission-title .line2{
    font-size: 0.65em !important;
  }
}

/* Increase mission-content width by 15% */
.mission-content{
  width: 135% !important;
}

/* Force mission-title line2 to stay on a single line */
.mission-title .line2{
  white-space: nowrap !important;
  display: block;
}



@media (max-width: 1650px){
	.mission-title .line1{
    font-size: 0.6em !important;
   }

  .mission-title .line2{
    font-size: 0.4em !important;   /* 10% smaller */
  }
}


/* Optional: let it grow a bit again on very large screens */
@media (min-width: 1651px){
  .mission-title{
    font-size: 40px !important;  /* gentle increase only on huge viewports */
  }
}


/* === Fix mission-body overflow on mobile (<901px) === */
@media (max-width: 900px){
  .mission-left,
  .mission-left-inner,
  .mission-content,
  .mission-body{
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;   /* safe padding */
    margin: 0 auto !important;
  }
}

/* === Center mission title on mobile (<=900px) === */
@media (max-width: 900px){
  .mission-title{
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .mission-title .line1,
  .mission-title .line2{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}

/* === Mobile adjustments for mission title & mission body (<= 900px) === */
@media (max-width: 900px){

  /* Move title downward */
  .mission-title{
    position: relative !important;
    top: 25px !important;          /* adjust freely: 15px, 20px, 30px, etc. */
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  /* Make sure both lines shift together */
  .mission-title .line1,
  .mission-title .line2{
    display: block;
    text-align: center !important;
  }

  /* Add bottom padding to mission body */
  .mission-body{
    padding-bottom: 40px !important;   /* adjust if you want more */
  }
}

/* === Enlarge mission-title line2 by +75% on mobile (<=900px) === */
@media (max-width: 900px){
  .mission-title .line2{
    font-size: 0.7em !important;   /* +75% size boost */
    line-height: 1.2 !important;     /* keeps it readable */
    display: block;
    text-align: center !important;
  }
}

/* === Mission title font families === */

/* Line 1 → Playfair Display */
.mission-title .line1{
  font-family: "Playfair Display", serif !important;
}

/* Line 2 → System sans-serif */
.mission-title .line2{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* === Fix small background-color gap above Mission section === */

/* Desktop and large screens */
@media (min-width: 901px){
  .mission{
    margin-top: -350px; !important;
  }
}

/* Keep your mobile offset */
@media (max-width: 900px){
  .mission{
    margin-top: -40px !important; 
  }
}

/* === Remove forced uppercase from mission title === */
.mission-title,
.mission-title .line1{
  text-transform: none !important;
}

/* === Make "Ma mission" match the size of "Le TDAH mis en lumière" === */
.mission-title .line1{
    font-size: 70px !important;        /* Same as your main headline */
    line-height: 1.1 !important;
    font-family: "Playfair Display", serif !important;
    font-weight: 400 !important;
    text-transform: none !important;   /* ensure proper casing */
}

/* Reduce it cleanly on mobile (same breakpoints as your hero title) */
@media (max-width: 1450px){
  .mission-title .line1{
    font-size: 40px !important;
  }
}

@media (max-width: 1150px){
  .mission-title .line1{
    font-size: 34px !important;
  }
}

@media (max-width: 900px){
  .mission-title .line1{
    font-size: 30px !important;
  }
}

@media (max-width: 700px){
  .mission-title .line1{
    font-size: 26px !important;
  }
}

@media (max-width: 480px){
  .mission-title .line1{
    font-size: 24px !important;
  }
}

/* === Make testimonial-quote match mission-body font size === */

.testimonial-quote{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* In case testimonial cards use another parent size, force-apply mission-body size */
.testimonial-quote{
  font-size: var(--mission-body-size, 16px) !important;
}


/* === Mission-body font-size source === */
.mission-body{
  --mission-body-size: 16px;       /* base size */
  font-size: var(--mission-body-size);
}

/* ===== Mission button (“En savoir plus”) ===== */
.mission-btn{
  display: inline-block;
  margin-top: 48px;
  padding: 0.55rem 1.1rem;
  background: #000;          /* pure black rectangle */
  color: #fff;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #000;    /* white border like your other rectangular button */
}

.mission-btn:hover,
.mission-btn:focus{
  background: #111;
  color: #fff;
  text-decoration: none;
}




  
  
  
/* === Nietzsche Quote Section (Handwritten) === */
.quote-section {
  padding-top: 30px
  padding-bottom: 30px;
  margin-bottom: 30 px;
  text-align: center;
  background: #F2EEEB;
}

.nietzsche-quote {
  /* font-family: 'Dancing Script', cursive; */
  font-family: Caveat;  
  font-size: 48px;
  line-height: 1.25;
  max-width: 900px;
  margin: 0 auto 15px;
  margin-bottom: 30px;
  /*color: #4D5699;*/
  color: #000000;
  letter-spacing: 0.5px;
}

.quote-author {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  opacity: 0.6;
  margin-top: 5px;
}

/* Responsive adjustments */
@media (max-width: 900px){
  .nietzsche-quote {
    font-size: 38px;
  }
}

@media (max-width: 600px){
  .nietzsche-quote {
    font-size: 32px;
  }
}


/* Fix spacing for "Ma mission" */
.mission-title .line1 {
  letter-spacing: 0 !important;
}


/* Wrapper centers the CTA button */
.testimonials-cta-wrap {
  text-align: center;
  margin-top: 40px;
}

/* Button identical to mission button */
.testimonials-cta-btn {
  display: inline-block;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: black;
  border: 0px solid white;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.testimonials-cta-btn:hover {
  background: white;
  color: black;
  border-color: black;
}

.testimonials-cta-btn{
  margin-top: 28px;
}

/* ===== Submenu À propos ===== */

.nav-item {
  position: relative;
}

.has-submenu > .submenu {
  position: absolute;
  top: 100%;
  left: 0;

  display: none;
  flex-direction: column;

  background: #000;          /* fond noir */
  padding: 10px 0;
  min-width: 160px;

  z-index: 1000;
}

/* liens */
.has-submenu .submenu a {
  color: #fff;
  padding: 8px 18px;
  white-space: nowrap;
  font-size: 14px;
  text-decoration: none;
}

.has-submenu .submenu a:hover {
  background: rgba(255,255,255,0.12);
}

/* affichage au hover (desktop) */
@media (min-width: 1001px){
  .has-submenu:hover > .submenu {
    display: flex;
  }
}

/* ===== Submenu À propos (VISIBLE sur header noir) ===== */

.has-submenu > .submenu{
  background: #fff;                 /* fond BLANC */
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.has-submenu .submenu a{
  color: #000;                      /* texte NOIR */
}

.has-submenu .submenu a:hover{
  background: rgba(0,0,0,0.06);
}

@media (max-width: 1000px){
  .has-submenu > .submenu{
    box-shadow: none;
    border: 0;
    background: transparent;
  }
}


/* ===== Sous-menu "À propos" : même apparence que apropos.css ===== */
.page-index .nav-item.has-submenu .submenu{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.page-index .nav-item.has-submenu .submenu a{
  padding-left: 6px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  display: block !important; /* assure que le padding augmente bien la hauteur */
}

/* ===== Sous-menu "À propos" : texte NOIR sur fond blanc ===== */
.page-index .nav-item.has-submenu .submenu{
  background: #fff !important;
}

.page-index .nav-item.has-submenu .submenu a{
  color: #000 !important;
}

/* Témoignages : bouton [...] */
.t-toggle{
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.t-toggle:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.mission-content{
  width: 112.5%;
  max-width: 850px;
}

.mission-title .line3{
  display: inline-block;          /* shrink-wrap to text width */
  white-space: nowrap !important;

  position: relative;
  left: 50%;
  transform: translateX(-50%);    /* true centering in mission-left */

  text-align: center;

  /* same typography as line2 (already enforced) */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 0.55em !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #fff;
}

/* Tighten gap between line2 and line3 (final override) */
.mission-title .line2{
  margin-bottom: 0 !important;
}

/* If your CSS variable is still being used elsewhere, kill it too */
:root{
  --mission-gap-after: 6px;
}

.mission-title .line2{
  margin-bottom: 48px !important;
}

.mission-title .line3{
  margin-top: 0 !important;
}

@media (max-width: 1000px){
  /* parent item containing a submenu */
  .site-nav .nav-item.has-submenu,
  #primary-nav.site-nav .nav-item.has-submenu{
    display: block !important;
  }

  /* submenu itself */
  .site-nav .nav-item.has-submenu .submenu,
  #primary-nav.site-nav .nav-item.has-submenu .submenu{
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 6px 0 0 14px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* submenu links */
  .site-nav .nav-item.has-submenu .submenu a,
  #primary-nav.site-nav .nav-item.has-submenu .submenu a{
    display: block !important;
    padding: 8px 0 !important;
    color: #000 !important;
    font-size: 0.95em !important;
  }
}

.footer-meta {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.footer-copy {
  text-align: left !important;
  margin: 0 !important;
}

.footer-legal-link {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
}