/*
Theme Name: LMDJ
Theme URI: https://lesmaitresdejeux.fr
Author: Les Maitres de Jeux
Description: Theme sur-mesure pour Les Maitres de Jeux — seminaires entreprise, team building et aventures autonomes en pleine nature.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: lmdj
*/

/* Tokens mirror design-system/assets/tokens.css — keep the two in sync.
   Baskerville is not on Google Fonts; Libre Baskerville stands in. */
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Inter:wght@400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700&display=swap');

:root {
  /* Colour ramps (Figma: Couleurs/*) */
  --marron-100: #fdedea;
  --marron-200: #fac2b4;
  --marron-300: #f78b61;
  --marron-400: #ce642c;
  --marron-500: #98481e;
  --marron-600: #652e11;
  --marron-700: #361505;

  --vert-100: #e6f597;
  --vert-200: #bfcb7c;
  --vert-300: #99a363;
  --vert-400: #757d4b;
  --vert-500: #535934;
  --vert-600: #33371e;
  --vert-700: #16180a;

  --jaune-100: #fbd6bd;
  --jaune-200: #f4a545;
  --jaune-300: #c28235;
  --jaune-400: #926126;
  --jaune-500: #654217;
  --jaune-600: #3b250a;
  --jaune-700: #1b0e02;

  --beige-100: #f6f0e6;
  --beige-200: #e0cba4;
  --beige-300: #b6a484;
  --beige-400: #8d7f66;
  --beige-500: #675c49;
  --beige-600: #423b2e;
  --beige-700: #211d15;

  --base-white: #ffe9c0;
  --base-black: #090e0f;
  /* Pure black in the file, not Base/Black. */
  --script-ink: #000000;

  /* Brand aliases (Figma: Couleurs/Brand/*) */
  --brand-marron: var(--marron-500);
  --brand-vert: var(--vert-600);
  --brand-jaune: var(--jaune-300);
  --brand-beige: var(--beige-200);
  --brand-noir: var(--base-black);
  --brand-blanc: var(--base-white);

  /* Legacy names used throughout the templates */
  --olive: var(--vert-600);
  --olive-darker: var(--vert-700);
  --terracotta: var(--marron-500);
  --mustard: var(--jaune-300);
  --cream: var(--base-white);
  --cream-soft: var(--marron-100);

  --text-on-dark: var(--base-white);
  --text-on-dark-muted: var(--beige-200);
  --text-on-light: var(--base-black);
  --text-accent: var(--mustard);

  --font-script: 'Homemade Apple', 'Segoe Script', cursive;
  --font-serif: 'Libre Baskerville', Baskerville, Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, Helvetica, Arial, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 34px;
  --text-2xl: 48px;
  --text-3xl: 64px;

  --leading-tight: 1.15;
  --leading-snug: 1.26;
  --leading-normal: 1.5;
  /* Figma reports 1.1 on these headings, but its boxes measure 1.19 em per
     line at every size (48->115, 34->81, 64->152): it grows the line to fit
     the two faces. Taking the reported 1.1 literally let the script
     ascenders climb into the sans line above. */
  --leading-script: 1.19;

  --tracking-tight: -0.015em;
  --tracking-body: 0.005em;
  --tracking-ui: 0.0125em;

  /* Figma "Espaces" — strict 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;

  --radius-s: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  /* Nothing in the design is pill-shaped; kept so old rules still resolve. */
  --radius-pill: var(--radius-s);

  --container-max: 1440px;
  /* Usable content width: the home page's 1440 box minus its 40px padding.
     Sections stay full-bleed so their background reaches both screen edges;
     this caps what sits inside them. */
  --content-max: 1360px;
}

* { box-sizing: border-box; }

/* The page colour is on html alone: a background on body would paint over the
   footer landscape, which sits on a negative layer behind the content. */
html { background: var(--cream); }
html, body {
  margin: 0;
  padding: 0;
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}

/* Paints nothing on purpose: this is already the page colour, and the file's
   own frames carry no fill either — the cream is on the page frame. An opaque
   box here would hide the footer landscape, which sits behind the content.
   The class stays because it also selects the section's heading colours. */
.bg-cream { background: transparent; }
.bg-olive { background: var(--olive); }
.bg-terracotta { background: var(--terracotta); }
.bg-mustard { background: var(--mustard); }

/* ---------- Buttons ----------
   One Figma symbol everywhere; only the fill changes per section. */
.btn,
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 42px;
  border: 1px solid var(--base-white);
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--text-on-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn.on-vert,   .btn-pill.on-vert   { background: var(--vert-600); }
.btn.on-marron, .btn-pill.on-marron { background: var(--marron-500); }
.btn.on-jaune,  .btn-pill.on-jaune  { background: var(--jaune-300); }
/* Matches whichever accent the current univers page carries. */
.btn.on-accent, .btn-pill.on-accent { background: var(--u-accent, var(--marron-500)); }

/* Hover swaps fill and outline, the way the file's button states do: the
   filled ones (its "Secondaire") turn colour-on-cream, and the cream one
   (its "Primaire") drops back to a cream outline on the section colour. */
.btn.on-vert:hover,   .btn-pill.on-vert:hover   { background: var(--base-white); color: var(--vert-600);   border-color: var(--vert-600); }
.btn.on-marron:hover, .btn-pill.on-marron:hover { background: var(--base-white); color: var(--marron-500); border-color: var(--marron-500); }
.btn.on-jaune:hover,  .btn-pill.on-jaune:hover  { background: var(--base-white); color: var(--jaune-300);  border-color: var(--jaune-300); }
.btn.on-accent:hover, .btn-pill.on-accent:hover { background: var(--base-white); color: var(--u-accent, var(--marron-500)); border-color: var(--u-accent, var(--marron-500)); }
.btn.solid:hover,     .btn-pill.solid:hover     { background: transparent; color: var(--base-white); border-color: var(--base-white); }

.btn.on-dark,  .btn-pill.on-dark  { color: var(--text-on-dark); }
.btn.on-dark:hover,  .btn-pill.on-dark:hover  { background: var(--text-on-dark); color: var(--olive); }
.btn.on-light, .btn-pill.on-light { background: var(--olive); color: var(--text-on-dark); border-color: var(--olive); }
.btn.on-light:hover, .btn-pill.on-light:hover { opacity: 0.85; }
.btn.solid,    .btn-pill.solid    { background: var(--cream); color: var(--olive); border-color: var(--cream); }
.btn .icon, .btn-pill .icon { width: 14px; height: 14px; flex: none; }

/* ---------- Header / mega menu ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--olive);
  padding: 20px 40px;
  /* Sticky rather than fixed: it stays in the flow, so the hero offsets below
     (which are measured from the top of the page, nav included) still hold. */
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header { min-height: 120px; padding: var(--space-5) 144px; }
.logo-mark { width: 100px; height: 80px; display: block; }
.site-logo, .site-logo a {
  color: var(--text-on-dark);
  text-decoration: none;
  display: block;
}
.nav-toggle { display: none; background: none; border: none; color: var(--text-on-dark); font-size: 26px; cursor: pointer; }
nav.primary-nav { display: flex; align-items: center; gap: var(--space-10); }
/* Only ever shown inside the open mobile panel — see the responsive block. */
.nav-contact { display: none; }
nav.primary-nav ul { list-style: none; display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; }
nav.primary-nav li { position: relative; }
nav.primary-nav a {
  color: var(--text-on-dark);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  white-space: nowrap;
}
nav.primary-nav > ul > li > a { display: flex; align-items: center; gap: 10px; }
/* Scoped to the top level: sub-menu rows behave differently. */
nav.primary-nav > ul > li:hover > a { font-weight: 700; }

nav.primary-nav .menu-item-has-children > a::after {
  content: '';
  width: 10px;
  height: 10px;
  flex: none;
  background: currentColor;
  clip-path: polygon(50% 70%, 0 20%, 12% 8%, 50% 46%, 88% 8%, 100% 20%);
  transition: transform 0.2s ease;
}
nav.primary-nav .menu-item-has-children:hover > a::after { transform: rotate(180deg); }

/* Rows share the width of the widest label, so the panel is sized by its
   content. No radius: the 12px in the file belongs to the art board, which
   the rows never fill. */
nav.primary-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: var(--space-5) 0 0;
  width: max-content;
  padding: 0;
  display: none;
  flex-direction: column;
  /* `nav.primary-nav ul` above also matches this list and sets a 24px gap and
     align-items: center for the top bar. Both have to be undone here: the gap
     detaches the rows, and centring stops them filling the panel. */
  gap: 0;
  align-items: stretch;
  white-space: nowrap;
  list-style: none;
  z-index: 10;
}
/* The panel sits 20px below the label, and that gap would drop the hover
   before the pointer reaches it. This bridges it, hanging off the parent item
   so it stays independent of how the panel itself is styled. */
nav.primary-nav li.menu-item-has-children::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  /* At least as wide as the panel (299px in Figma), so a diagonal move
     towards the far side of the menu stays inside the bridge. */
  width: max(100%, 299px);
  height: var(--space-5);
}
nav.primary-nav li:hover > .sub-menu,
nav.primary-nav li:focus-within > .sub-menu { display: flex; }
nav.primary-nav .sub-menu a {
  display: block;
  padding: 10px var(--space-5);
  background: var(--olive);
  font-weight: 500;
  /* The label sits at the padding edge (x=20 in the file), so left-aligned —
     the text node's own CENTER flag has no effect, it is sized to its glyphs. */
  text-align: left;
}
/* Figma hover variant differs only by background. */
nav.primary-nav .sub-menu a:hover,
nav.primary-nav .sub-menu a:focus-visible { background: var(--vert-400); }

/* ---------- Footer ---------- */
/* Figma pins a full-bleed landscape to the bottom of every page, starting
   431px above the footer and running past the page edge (the export is
   already cropped to the 1728x659 that stays visible). Its top 295px are
   fully transparent and the ridge only reaches full opacity at 397, so about
   136px of skyline clears the footer.
   It hangs off .footer-scene rather than .site-footer because the footer's
   own background would paint over a pseudo-element of its own. */
.footer-scene { position: relative; }
.footer-scene::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1728 / 659;
  background: url('assets/img/footer-landscape.webp') center bottom / 100% 100% no-repeat;
  pointer-events: none;
  /* In the file this sits second from the back, behind every content section
     and only under the footer — so a section's photo hides it where they
     overlap. A negative layer reproduces that: it paints above the page
     colour on html but below section backgrounds, images and the footer. */
  z-index: -1;
}
.site-footer {
  background: var(--olive);
  padding: var(--space-10) 124px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--text-on-dark);
  font-family: var(--font-sans);
}
/* Figma: brand block 192 wide at x=124, right-hand column 1168 at x=398 —
   an 82px gutter, with 124px of padding either side (set on .site-footer). */
.site-footer { display: grid; grid-template-columns: 192px 1fr; gap: 82px; align-items: start; }
/* The nav row and the legal row are 40px apart. */
.footer-main { display: flex; flex-direction: column; gap: var(--space-10); }
/* The three groups (univers / legal links / button) sit 40px apart, and the
   links inside each group 24px apart. */
.footer-nav { display: flex; align-items: flex-start; gap: var(--space-10); }
.footer-univers { display: flex; align-items: flex-start; gap: var(--space-6); }
.footer-nav .btn { white-space: nowrap; }
.footer-logo { color: var(--text-on-dark); }
.footer-address {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  margin-top: var(--space-8);
  line-height: var(--leading-snug);
}
.footer-col a, .footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a {
  display: block;
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 200;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  margin-bottom: 10px;
  white-space: nowrap;
}
.footer-col a:first-child { font-weight: 500; }
/* Figma keeps these two in a row beside the columns, not stacked in one. */
.footer-links { display: flex; gap: var(--space-6); align-items: center; }
.footer-links a {
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-links a:hover { color: var(--vert-100); }
.footer-col a:hover { color: var(--vert-100); }
.footer-bottom {
  /* No rule above this row in the file — the footer holds no separator at
     all, so the border and its padding are gone. */
  display: flex;
  flex-wrap: wrap;
  /* Figma centres the row and spaces the three items 24px apart, rather than
     pinning the copyright left and the links right. */
  gap: var(--space-6);
  justify-content: center;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}
.footer-bottom a { color: var(--text-on-dark); text-decoration: none; font-weight: 200; }
/* Centred under the row, 24px below it — not flush right. */
.collab { display: flex; align-items: center; gap: 10px; margin-top: var(--space-6); justify-content: center; font-size: var(--text-sm); font-weight: 500; text-transform: uppercase; }
/* Keeps the partner mark at its 85x35 rather than letting flex squeeze it.
   The file sits it at y=-10 in a 15px-tall row, i.e. it overflows by 10px top
   and bottom; the negative margin reproduces that so a 35px mark only costs
   15px of height — otherwise the footer ends up ~20px taller than the frame. */
.collab img { flex: none; margin-block: -10px; }

/* ---------- Section heading patterns ---------- */
/* Two faces per heading; each block sets --heading-lead / --heading-tail. */
.heading-script,
.content-split .copy .eyebrow-script,
.card-format h3,
.hero-seminaires .hero-copy .script {
  font-size: var(--text-2xl);
  line-height: var(--leading-script);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.heading-script .lead,
.content-split .copy .eyebrow-script .lead,
.card-format h3 .lead,
.hero-seminaires .hero-copy .script .lead {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--heading-lead, var(--mustard));
}
.heading-script .tail,
.content-split .copy .eyebrow-script .tail,
.card-format h3 .tail,
.hero-seminaires .hero-copy .script .tail {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--heading-tail, var(--olive));
}
.heading-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--mustard);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: 0;
}
.section-subtitle {
  font-family: var(--font-serif);
  color: var(--text-accent);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: 0;
}
.section-intro {
  max-width: 670px;
  margin: 0 auto;
  font-family: var(--font-body);
  color: var(--brand-vert, var(--olive));
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
}
/* Title and subtitle sit 8px apart, 20px before the intro. */
.section-head {
  text-align: center;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  max-width: 710px;
  margin: 0 auto;
}
.section-head .headline { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Shape frames (reusable photo-mask components) ----------
   Drop any photo inside a ".shape-frame .shape-xxx" wrapper and it gets
   clipped to that shape — the shape is independent from whichever image
   is used, so a new upload via ACF is masked automatically. */
.shape-frame { position: relative; }
.shape-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shape-star {
  /* The star mask exported from Figma (728x840), applied as an SVG clipPath
     in objectBoundingBox units so it scales to any container size with
     genuinely smooth curves. The ratio must match the source: those units
     are relative to each axis separately, so a different ratio stretches
     the shape. */
  aspect-ratio: 13 / 15;
  clip-path: url('#shape-star-path');
}
.shape-arrow { clip-path: polygon(0% 30%, 55% 30%, 55% 0%, 100% 50%, 55% 100%, 55% 70%, 0% 70%); }
.shape-burst {
  clip-path: polygon(
    20% 0%, 40% 25%, 65% 5%, 62% 35%, 92% 28%, 70% 50%,
    92% 72%, 62% 65%, 65% 95%, 40% 75%, 20% 100%, 25% 68%,
    0% 78%, 15% 50%, 0% 22%, 25% 32%
  );
}

/* ---------- Hero (home) ---------- */
/* Figma «Homepage»: the 1728x897 hero holds a 728x840 star at x=4/y=187 and
   the 832-wide copy at x=752, whose first line of text lands at y=197. The
   nav (120px) sits on top of the same origin, so the offsets below are those
   figures minus 120. The star's bottom edge reaches y=1027 while the section
   ends at 897 — it deliberately spills ~130px over the section underneath. */
.hero-home {
  background: var(--olive);
  display: grid;
  grid-template-columns: minmax(0, 728px) minmax(0, 832px);
  gap: var(--space-5);
  align-items: start;
  /* Full-bleed background: no max-width, the gutters grow with the screen
     instead. The 4px / 144px asymmetry is the file's — the star sits almost
     flush left while the copy column keeps its right margin. */
  padding: 0 max(144px, calc((100% - 1728px) / 2 + 144px))
           0 max(4px, calc((100% - 1728px) / 2 + 4px));
  min-height: 777px;
  position: relative;
  z-index: 1;
}
/* The copy column is 832 wide but its text block is 792 — the title wraps to
   three lines at that width, as in the file. */
.hero-home .hero-copy { padding-top: 77px; max-width: 792px; }
.hero-home .hero-photo {
  margin-top: 67px;
  /* Lets the star hang over the next section instead of padding the hero. */
  margin-bottom: -130px;
  position: relative;
  z-index: 2;
}
.hero-home .hero-copy .script { font-family: var(--font-script); font-weight: 400; color: var(--text-on-dark); font-size: var(--text-3xl); line-height: var(--leading-script); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-7); }
/* Libre Baskerville (the web substitute for the file's actual Baskerville)
   sets noticeably wider than the real thing at the same declared size —
   measured against the file's own text, the string ran ~28% wider per
   character, enough to wrap to 2 lines here instead of 1. Scaling the
   declared size down compensates; line-height matches the file's own 100%
   instead of the general --leading-tight. */
.hero-home .hero-copy .subtitle { font-family: var(--font-serif); font-weight: 400; color: var(--jaune-200); font-size: calc(var(--text-2xl) * 0.78); line-height: 1; margin: 0 0 var(--space-7); }
.hero-home .hero-copy p.body { font-family: var(--font-sans); color: var(--text-on-dark); font-size: var(--text-md); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); max-width: 690px; margin: 0 0 var(--space-10); }

/* ---------- Format cards (3-up) ---------- */
/* No bottom padding: the next section is a .content-split, whose own 90px top
   padding already covers this junction on its own. The file leaves 91px
   between the cards and the next heading — carrying 80px here too doubled it. */
.formats-section { padding: 20px 0 0; text-align: center; }
/* The file sizes these cards, it does not stretch them: 3 x 345 with 20px
   gaps, centred in the 1400 row, which leaves 162.5px either side. minmax
   lets them shrink below 345 on narrow screens instead of overflowing. The
   20px to the intro above comes from .section-head's own padding. */
.cards-3up { display: grid; grid-template-columns: repeat(3, minmax(0, 345px)); justify-content: center; gap: 20px; max-width: var(--container-max); margin: 0 auto; padding: 0 40px; }
.card-format { border-radius: var(--radius-lg); padding: var(--space-7); text-align: left; color: var(--text-on-dark); display: flex; flex-direction: column; gap: var(--space-10); min-height: 508px; overflow: hidden; }

/* Card icon: a shaped silhouette that reveals a photo behind it on hover —
   same reusable-shape principle as the hero's .shape-frame component.
   Each illustration keeps its own Figma ratio, so only the height is fixed
   and the width follows. */
/* align-self is load-bearing: the card is a column flexbox, so without it the
   icon stretches to the full card width and aspect-ratio never applies. */
.card-icon-shape { position: relative; height: 126px; align-self: flex-start; }
.card-icon-shape.shape-seminaires { aspect-ratio: 106 / 63; }
.card-icon-shape.shape-team-building { aspect-ratio: 1 / 1; }
.card-icon-shape.shape-aventures { aspect-ratio: 125 / 126; }
.card-icon-shape .fill,
.card-icon-shape .photo { position: absolute; inset: 0; }
.card-icon-shape .fill { background: var(--text-on-dark); transition: opacity 0.3s ease; }
.card-icon-shape .photo { opacity: 0; transition: opacity 0.3s ease; }
.card-icon-shape .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-format:hover .card-icon-shape .fill { opacity: 0; }
.card-format:hover .card-icon-shape .photo { opacity: 1; }

.shape-icon-seminaires { clip-path: url('#icon-shape-seminaires'); }
.shape-icon-team-building { clip-path: url('#icon-shape-team-building'); }
.shape-icon-aventures { clip-path: url('#icon-shape-aventures'); }
.card-format h3 { font-size: var(--text-xl); }
.card-format h3 .script { display: block; }
.card-format p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); color: var(--text-on-dark); flex-grow: 1; margin: 0; }

/* ---------- Two-column content blocks (story / rse / partners / engaged) ---------- */
/* One third copy, two thirds picture — the file lays these out 438 wide
   against 831. Applies to every text-beside-image section, including the
   reverse one, which used to be the other way round. */
.content-split { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: center; padding: 90px 40px; max-width: var(--container-max); margin: 0 auto; }
.content-split .copy .eyebrow-script { margin: 0 0 var(--space-7); }
.content-split .copy p.eyebrow-serif,
.content-split .copy h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-xl); line-height: var(--leading-tight); color: var(--mustard); margin: 0 0 var(--space-7); }
.content-split .copy p.body { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); margin: 0 0 var(--space-10); }
/* The partner callout inside a block: a bordered card set apart from the body
   text above it, its own accent-coloured outline rather than the section's
   photo-card radius, so it reads as a note rather than a continuation of the
   paragraph. */
.content-split .copy .block-partner {
  margin: calc(-1 * var(--space-7)) 0 var(--space-10);
  padding: var(--space-6);
  border: 1px solid var(--u-accent, var(--terracotta));
  border-radius: var(--radius-md);
}
.content-split .copy .block-partner .partner-text { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); margin: 0 0 var(--space-5); }
.content-split .copy .block-partner .partner-text strong { font-weight: 700; }
/* Underlined text, not a filled pill — the file draws this one as a link
   beside the box's own accent colour, distinct from the solid CTA below it. */
.btn.link {
  min-height: auto;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--u-accent, var(--terracotta));
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.btn.link:hover { background: transparent; color: var(--u-accent, var(--terracotta)); opacity: 0.7; }
.btn.link .icon { color: inherit; }
.content-split .photo img { width: 100%; border-radius: var(--radius-lg); }
/* One section in the file leads with the picture (934 left, 466 right) instead
   of the copy. .reverse only carries heading colours, hence a separate class. */
.content-split.photo-left { grid-template-columns: 2fr 1fr; }
.content-split.photo-left .photo { order: 1; }
.content-split.photo-left .copy { order: 2; }
/* Where the visual is a pair of photos the file narrows it: 467 of copy
   against 649, not the 1/3 - 2/3 the single-picture sections use. */
.content-split.photo-pair { grid-template-columns: 42fr 58fr; }
/* The founders visual is two photos overlapping, not one: 345 wide inside 649,
   the first sitting lower and left, the second higher and right.
   The photos are inset 20px either side of that 649 frame, so their ink spans
   609 — capping the stack there is what makes 345-wide photos overlap by the
   file's 81px once they are pinned to its two edges. Sizing them off the grid
   track instead let the track's own width decide, which came out ~403 wide
   and barely overlapping. */
.photo-stack { display: grid; max-width: 609px; }
/* Scoped through .content-split so these beat the single-picture rule above,
   which sets width: 100% at the same specificity. 345 of 609. */
.content-split .photo-stack img { grid-area: 1 / 1; width: 56.6%; aspect-ratio: 345 / 507; object-fit: cover; border-radius: var(--radius-lg); }
/* The left photo sits in front and leans left, matching the file's own tilt. */
.content-split .photo-stack img:first-child { justify-self: start; align-self: end; transform: rotate(-8deg); position: relative; z-index: 2; }
.content-split .photo-stack img:last-child { justify-self: end; align-self: start; z-index: 1; }

/* The file draws this section 467 of copy against 757 of artwork — verified
   against the user's own SVG export of this section (viewBox 0 0 757 561,
   561 being this section's exact height), not the stale 504-wide bounding
   box an earlier reading of the frame tree gave. The mosaic is exactly as
   tall as the section itself (no vertical margin at all, unlike every other
   .content-split), so the usual 90px vertical padding only belongs on this
   one section's copy column, achieved here by dropping it from the section
   and letting align-items: center recreate it against the mosaic's height. */
.content-split.rse-mosaic { grid-template-columns: 467fr 757fr; padding-top: 0; padding-bottom: 0; }
/* "Un impact positif": three cut-out photos forming one fixed mosaic. Each
   shape is a full photo, bigger than the 757x561 composition and clipped by
   it — flush with the left/right edges (shard-3 starts at 0%, shard-2 ends
   at 100%) but deliberately overhanging top and bottom (negative top on
   shard-1, shard-3's bottom past 100%), the same kind of spill as the home
   hero's star. Percentages are each shape's own position/size straight from
   the exported SVG's path bounding boxes against that 757x561 canvas;
   overflow: hidden on the container is what crops the overhang. Fully
   qualified so this beats .content-split .photo img's width: 100% at equal
   specificity. */
/* Fixed-size in the file (757x561), not stretched to fill its column — the
   grid track is wider than that, so it needs its own cap. margin-left: auto
   pins it to the right edge, roughly where the file's own large gap between
   copy and artwork puts it — justify-self: end does the same visually, but
   collapses the box to 0x0 here: every child is position: absolute (they
   form the mosaic), so there is no in-flow content to size a shrink-to-fit
   box from, and stretch is what gives it a definite width to begin with. */
.rse-collage { position: relative; aspect-ratio: 757 / 561; width: 757px; max-width: 100%; margin-left: auto; overflow: hidden; }
.content-split .photo.rse-collage img.shard { position: absolute; height: auto; border-radius: 0; object-fit: cover; }
.content-split .photo.rse-collage img.shard-1 { left: 10.57%; top: -13.01%; width: 56.01%; height: 52.94%; clip-path: url('#shape-rse-1'); }
.content-split .photo.rse-collage img.shard-2 { left: 60.77%; top: 32.09%;  width: 39.23%; height: 75.58%; clip-path: url('#shape-rse-2'); }
.content-split .photo.rse-collage img.shard-3 { left: 0%;     top: 58.29%;  width: 48.48%; height: 65.24%; clip-path: url('#shape-rse-3'); }

/* ---------- Seminaires hero ---------- */
/* One third copy, two thirds photo, like the content sections: the file gives
   the copy 613 of the 1728 frame and lets the photo run past the right edge.
   The gutter lives on the copy, not on the grid — putting it on the grid ate
   into the first column and pushed the split to roughly 46/54. */
.hero-seminaires {
  background: var(--u-accent, var(--terracotta));
  display: grid;
  grid-template-columns: 1fr 2fr;
  min-height: 560px;
}
/* 144px is the frame's gutter (the header uses it too), scaled down on
   narrower screens so the copy keeps room to breathe. */
.hero-seminaires .hero-copy { padding: 100px var(--space-10) 100px clamp(20px, 8.3vw, 144px); color: var(--text-on-dark); }
/* Vector mark above the hero title — same three shapes as the home cards,
   clipped from the shared defs, at the ~72px height the file uses.
   inline-block so aspect-ratio can size the width from the height. */
.hero-seminaires .hero-copy .hero-icon {
  display: inline-block;
  position: relative;
  height: 72px;
  margin-bottom: var(--space-5);
}
.hero-seminaires .hero-copy .hero-icon.shape-seminaires { aspect-ratio: 106 / 63; }
.hero-seminaires .hero-copy .hero-icon.shape-team-building { aspect-ratio: 1 / 1; }
.hero-seminaires .hero-copy .hero-icon.shape-aventures { aspect-ratio: 125 / 126; }
.hero-seminaires .hero-copy .hero-icon .fill {
  position: absolute;
  inset: 0;
  background: var(--text-on-dark);
}
.hero-seminaires .hero-copy .script { font-size: var(--text-3xl); line-height: var(--leading-script); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-7); }
.hero-seminaires .hero-copy .serif,
.hero-seminaires .hero-copy .subtitle { font-family: var(--font-serif); font-weight: 400; color: var(--jaune-200); font-size: calc(var(--text-2xl) * 0.78); line-height: 1; margin: 0 0 var(--space-7); }
.hero-seminaires .hero-copy p.body { font-family: var(--font-sans); color: var(--text-on-dark); font-size: var(--text-md); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); margin: 0 0 var(--space-10); }
.hero-seminaires .hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Filters + grid ---------- */
/* Little top padding: this always follows a hero, and the file leaves only
   40-70px between the hero block and the next heading — .section-head's own
   20px covers most of it. The bottom keeps 80 for the junction below. */
.filters-section { padding: 20px 40px 0; max-width: var(--container-max); margin: 0 auto; }
/* Section gaps are per-junction in the file, not one value, so the section
   above a junction carries none and the one below sets it. Here the file
   leaves 33px where the two paddings used to stack to 170. */
.filters-section + .content-split { padding-top: 33px; }

/* ---------- Avis clients ---------- */
/* Just a heading + whatever the plugin's own shortcode renders — the widget
   carries its own layout, so this only sets the section's outer rhythm. */
.reviews-section { padding: 90px 40px; max-width: var(--container-max); margin: 0 auto; text-align: center; }
.reviews-section .section-head { justify-content: center; }
/* 20px before the values band, against the 110 that stacking gave. Unlike the
   junctions below, the gap has to live here: the band is a coloured block, so
   its own padding sits inside the olive and separates nothing. */
.content-split:has(+ .values-band) { padding-bottom: 20px; }
/* Same treatment where two content sections meet: 55px in the file, against
   the 180 the two paddings gave together. */
.content-split:has(+ .content-split) { padding-bottom: 0; }
.content-split + .content-split { padding-top: 55px; }
/* The mosaic section is exactly as tall as its artwork, which overflows it top
   and bottom, so the 35px before it belongs to the section above instead. */
.content-split:has(+ .rse-mosaic) { padding-bottom: 35px; }
.content-split + .content-split.rse-mosaic { padding-top: 0; }
.content-split.rse-mosaic + .content-split { padding-top: 68px; }
/* Straight after a hero the file leaves 40px, not the default 90. */
.hero-seminaires + .content-split { padding-top: 40px; }
/* 440 against a 900 grid in the file — the same 1/3 - 2/3 as the content
   sections. Kept as a ratio, not a fixed 440: fixed, the panel does not give
   ground as the window narrows and ends up taking nearly half of it. */
.filters-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; }
/* Title, chips and each accordion are a uniform 10px apart in the file. */
.filters { display: flex; flex-direction: column; gap: 10px; }
.filters h4 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--olive); border-bottom: 1px solid var(--terracotta); padding: var(--space-1) 0; margin: 0; }
.active-pills { display: flex; flex-wrap: wrap; gap: 10px; min-height: 1px; }
.active-pill { background: var(--u-accent, var(--terracotta)); color: var(--u-accent-tint, var(--marron-100)); border: 1px solid var(--u-accent-tint, var(--marron-100)); border-radius: var(--radius-s); padding: var(--space-1) var(--space-2); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-ui); display: flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.filter-group { border-bottom: 1px solid var(--terracotta); }
.filter-group summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6) 0; font-family: var(--font-sans); font-size: var(--text-md); font-weight: 700; line-height: var(--leading-normal); color: var(--terracotta); list-style: none; }
.filter-group summary::-webkit-details-marker { display: none; }
/* The header carries a 24px chevron that flips once open — same shape the nav
   dropdown uses. Nothing marked the open/closed state before. */
.filter-group summary::after {
  content: '';
  width: 24px;
  height: 24px;
  flex: none;
  background: currentColor;
  clip-path: polygon(50% 70%, 0 20%, 12% 8%, 50% 46%, 88% 8%, 100% 20%);
  transition: transform 0.2s ease;
}
.filter-group[open] summary::after { transform: rotate(180deg); }
/* ---------- "Lire la suite" ----------
   Optional copy folded after a section's body text, from the *_more fields.
   Native <details>, so it works without script and stays in the markup for
   search engines. The chevron is the same shape as the filter groups'. */
/* The wrapper carries the spacing the inline paragraph inside it cannot. */
.body-fold { margin: 0 0 var(--space-10); }
/* Both heroes set their cream on `p.body` rather than on the block around it,
   so a toggle inheriting from the container fell back to the dark page ink and
   came out nearly invisible on the olive. Colour the wrapper instead, and the
   summary inherits what the paragraph beside it already uses. */
.hero-home .hero-copy .body-fold,
.hero-seminaires .hero-copy .body-fold { color: var(--text-on-dark); }
/* Inline so the toggle continues from the last line of the text rather than
   starting its own. Wins over the per-section p.body rules on specificity. */
.body-fold > p:first-child { display: inline; margin: 0; }
.more { display: inline; }
.more > summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  /* Inherits the section's own colour, so this works on cream and on the
     terracotta and olive fills without a rule per section. The underline is
     what separates it from the paragraph above: at the same colour and
     weight as body copy it read as a stray line of text. Summary is a flex
     container, so the rule stops before the chevron rather than crossing it. */
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
.more > summary::-webkit-details-marker { display: none; }
/* inline-block, not a flex item any more: an inline ::after would collapse to
   nothing without a box of its own. text-decoration does not reach into it,
   so the underline still stops before the chevron. */
.more > summary::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--space-2);
  vertical-align: -1px;
  background: currentColor;
  clip-path: polygon(50% 70%, 0 20%, 12% 8%, 50% 46%, 88% 8%, 100% 20%);
  transition: transform 0.2s ease;
}
.more[open] > summary::after { transform: rotate(180deg); }
.more > summary:hover, .more > summary:focus-visible { text-decoration-thickness: 3px; }
.more > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Revealed paragraphs go back to being blocks, under the line they extend.
   Spelled out per class because the per-section `p.body` rules are more
   specific than a bare `.more > p`, which lost its top margin to them. */
.body-fold .more > p.body,
.body-fold .more > p.section-intro { display: block; margin: var(--space-5) 0 0; }
@media (prefers-reduced-motion: reduce) {
  .more > summary::after { transition: none; }
}

/* Picking a filter means clicking a tag, not ticking a box. The file gives it
   three states per section colour: tint fill by default, accent fill on hover,
   and accent fill plus a cross once picked — which is what widens it. */
.filter-options { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: var(--space-5); }
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-s);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-ui);
  cursor: pointer;
  background: var(--u-accent-tint, var(--marron-100));
  color: var(--u-accent, var(--terracotta));
  border: 1px solid var(--u-accent, var(--terracotta));
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-tag:hover,
.filter-tag[aria-pressed="true"] {
  background: var(--u-accent, var(--terracotta));
  color: var(--u-accent-tint, var(--marron-100));
  border-color: var(--u-accent-tint, var(--marron-100));
}
.filter-tag[aria-pressed="true"]::after { content: '\00d7'; font-size: var(--text-sm); line-height: 1; }

/* Two per row, 20 apart: the file fits two 440 cards in a 900 grid. Three
   would only be right if the cards had the full width, as on the home page. */
.format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.format-grid .card { background: var(--u-accent, var(--terracotta)); border-radius: var(--radius-lg); overflow: hidden; color: var(--text-on-dark); display: flex; flex-direction: column; gap: var(--space-3); transition: opacity 0.2s ease; }
.format-grid .card.is-hidden { display: none; }
.format-grid .card .photo { height: 189px; overflow: hidden; }
.format-grid .card .photo img { width: 100%; height: 100%; object-fit: cover; }
.format-grid .card .body { padding: 0 var(--space-7) var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); flex-grow: 1; }
/* Each card opens with the univers' own icon in cream — the same silhouette
   as the page hero, reusing its clip-path rather than a separate asset, and
   28px above the tags, which .body's own gap already gives. */
.format-grid .card .card-motif { flex: none; background: var(--cream); }
.format-grid .card .card-motif.shape-team-building { width: 56px; height: 56px; clip-path: url('#icon-shape-team-building'); }
.format-grid .card .card-motif.shape-aventures { width: 54px; height: 54px; clip-path: url('#icon-shape-aventures'); }
/* Three leaves side by side, so this one is wider than the other two rather
   than taller: 212x126 scaled to the same 54 of height. */
.format-grid .card .card-motif.shape-seminaires { width: 90.72px; height: 54px; clip-path: url('#icon-shape-seminaires'); }
.format-grid .card .tags { display: flex; gap: 10px; flex-wrap: wrap; }
.format-grid .card h3 { font-family: var(--font-serif); font-weight: 400; color: var(--u-accent-contrast, var(--jaune-200)); font-size: var(--text-xl); line-height: var(--leading-tight); margin: 0; }
.format-grid .card p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); color: var(--text-on-dark); flex-grow: 1; margin: 0; }
/* Pin and place sit 10px apart under the title; the mark takes the same accent
   as the heading, the text the body colour. */
.format-grid .card p.lieu { display: flex; align-items: center; gap: 10px; flex-grow: 0; }
.format-grid .card p.lieu .icon-pin { width: 23px; height: 19px; flex: none; color: var(--u-accent-contrast, var(--jaune-200)); }

/* Unlike the buttons, tags are not uppercase. */
.tag { display: inline-block; border-radius: var(--radius-s); padding: var(--space-1) var(--space-2); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-snug); letter-spacing: var(--tracking-ui); border: 1px solid transparent; background: var(--marron-100); color: var(--marron-500); }
.tag.on-terracotta { background: var(--marron-500); color: var(--marron-100); border-color: var(--marron-100); }
.tag.on-olive { background: var(--vert-600); color: var(--vert-100); border-color: var(--vert-100); }
.tag.on-mustard { background: var(--jaune-300); color: var(--jaune-100); border-color: var(--jaune-100); }

/* ---------- Product sheet ----------
   The hero, the alternating blocks and the closing split are the univers
   sections reused as they are; only what follows is specific to a product. */

/* The file spaces this page far tighter than the others: 20px between sections
   and 40px between two content blocks, against the 90 and 55 the pages use.
   Each gap is carried by the section below it and every bottom padding zeroed,
   so two adjacent paddings can never add up — except on the timeline band,
   whose padding is inset within its own colour and so stays. */
.single-format .content-split { padding-top: 20px; padding-bottom: 0; }
.single-format .hero-seminaires + .content-split { padding-top: 20px; }
.single-format .content-split + .content-split { padding-top: 40px; }
.single-format .timeline-band { margin-top: 20px; }
.single-format .faq-section { padding-top: 20px; padding-bottom: 0; }
/* Every gap sits on the section below, so whichever comes last has nothing
   beneath it and the footer lands straight against it — visible as a photo
   touching the olive when a sheet carries no FAQ. Margin rather than padding,
   so a coloured band gains space under itself instead of growing taller. */
.single-format > :last-child { margin-bottom: 80px; }

/* The hero stacks more than the univers one — tags, subtitle, intro, then the
   meta list — so it needs room to breathe rather than a fixed height. */
.hero-format { min-height: 0; }
.hero-format .hero-copy .tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--space-7); }
/* The cream chip reads on every univers fill, which the tinted default does not. */
.tag.on-cream { background: var(--cream); color: var(--u-accent, var(--marron-500)); border-color: var(--cream); }

/* Lieu / Format / Engagement. A description list because that is what it is:
   three labelled values, not a paragraph — but set as one plain line, since the
   file gives the whole string a single weight and colour rather than picking
   the label out. 40px between lines there, and 10px from the mark to the text. */
.format-meta { margin: 0 0 var(--space-10); display: grid; gap: var(--space-10); }
/* The mark hangs in the left margin rather than taking a column: label and
   value then flow as one sentence and wrap under themselves, not beside it.
   The indent is kept on lines whose mark is still missing, so the three
   stay aligned. */
.format-meta div { position: relative; padding-left: 33px; }
/* 23 wide in the file, but each mark has its own height (19, 26, 21) — hence
   height: auto rather than a shared one, which would squash two of the three. */
.format-meta .icon-pin { position: absolute; left: 0; top: 0.2em; width: 23px; height: auto;
    color: var(--u-accent-contrast, var(--jaune-200)); }
/* One weight, one colour: the file does not pick the label out. */
.format-meta dt,
.format-meta dd { display: inline; font-family: var(--font-sans); font-weight: 400;
    font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-on-dark); margin: 0; }

/* The day's outline, on the accent fill the file gives it. */
.timeline-band { background: var(--u-accent, var(--terracotta)); color: var(--text-on-dark); padding: 20px max(40px, calc((100% - var(--content-max)) / 2)); }
.timeline-band .section-head { --heading-lead: var(--cream); --heading-tail: var(--u-accent-contrast, var(--jaune-200)); }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 0 0 var(--space-5); padding: 0; }
.timeline li { display: flex; flex-direction: column; gap: var(--space-2); }
/* The file colours these two apart, and flips both when the fill is dark: on
   the terracotta and mustard bands the lead is beige over near-black text, on
   the olive one it is mustard over beige — near-black there would be unreadable. */
.timeline .hour { font-family: var(--font-script); font-size: var(--text-lg); line-height: var(--leading-script); color: var(--timeline-lead, var(--beige-200)); }
.timeline .label { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--timeline-body, var(--base-black)); }
.univers-aventures-autonomes .timeline-band { --timeline-lead: var(--jaune-300); --timeline-body: var(--beige-200); }

/* Questions, folded. Same disclosure pattern as the filter groups. */
.faq-section { padding: 20px max(40px, calc((100% - var(--content-max)) / 2)) 80px; }
.faq { max-width: 900px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--rule, var(--beige-200)); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6) 0; font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; color: var(--u-accent, var(--terracotta)); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 20px; height: 20px; flex: none; background: currentColor; clip-path: polygon(50% 70%, 0 20%, 12% 8%, 50% 46%, 88% 8%, 100% 20%); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details > p { margin: 0 0 var(--space-6); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-on-light); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- RSE commitments ---------- */
/* Four columns of 263 in the file's 1112 timeline row. */
.commitments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: var(--space-10); }
.commitment h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-lg); line-height: var(--leading-tight); color: var(--terracotta); margin: 0 0 var(--space-5); }
.commitment p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); color: var(--olive); margin: 0; }

/* The RSE actions sit on a mustard block that stops at the container edge,
   with the section heading above it on the page background — where the values
   band below is full-bleed and swallows its own heading. */
.actions-band { background: var(--jaune-300); padding: 20px clamp(20px, 10vw, 144px); text-align: center; }
.actions-band .commitments { margin-top: 0; }
.actions-band .commitment h3 { font-family: var(--font-script); font-size: var(--text-lg); line-height: var(--leading-script); color: var(--beige-200); }
.actions-band .commitment p { color: var(--base-black); }

/* "Ce qui nous anime au quotidien" reuses the commitments grid but nothing
   else: the file gives it a full-bleed olive band, cream copy, a centred
   83x84 icon per value and a handwritten title, where the RSE page's version
   sits on the page background with serif titles. */
/* The footer landscape overflows 431px above the footer and its ridge rises
   136px of that, which is invisible over the cream page background but not
   over this band. The file clears it by leaving 127px underneath, so the
   ridge only bites 9px into the olive — scaled here because the landscape is
   sized from the viewport width, not fixed. Vertical padding is the file's
   own 20px; the gap to the grid comes from .section-head's own padding. */
.values-band { background: var(--olive); color: var(--text-on-dark); padding-block: 20px; text-align: center; margin-bottom: calc(100vw * 127 / 1728); }
.values-band .commitments { margin-top: 0; }
.values-band .value-icon { display: block; width: 83px; height: 84px; margin: 0 auto 10px; }
.values-band .commitment h3 { font-family: var(--font-script); font-size: var(--text-lg); line-height: var(--leading-script); color: var(--jaune-300); }
.values-band .commitment p { color: var(--cream); }

/* ---------- Contact ---------- */
/* The two details sit side by side under the hero copy. */
.contact-details { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-8); }
/* 40px between the details and the mail button, as in the file: its text block
   ends at 656 and the button starts at 696. */
.contact-details + .btn { margin-top: var(--space-10); }
.contact-detail .label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--u-accent-contrast, var(--jaune-200)); margin: 0 0 var(--space-2); }
.contact-detail .value { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--text-on-dark); margin: 0; }
.contact-detail .value a { color: inherit; text-decoration: none; }
.contact-detail .value a:hover { text-decoration: underline; }

/* Title 449 against a 931 form in the file — the same 1/3 - 2/3 split. */
.contact-form-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
  padding: 80px max(40px, calc((100% - var(--content-max)) / 2));
}
.form-note { font-family: var(--font-body); font-size: var(--text-md); color: var(--olive); margin: var(--space-5) 0 0; }
/* Contact Form 7 emits its own markup; .form-row is the wrapper the form
   template adds so two fields can share a row. */
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.contact-form p { margin: 0 0 var(--space-5); }
.contact-form label { display: block; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-ui); color: var(--olive); }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--olive);
  background: var(--base-white);
  border: 1px solid var(--terracotta);
  border-radius: var(--radius-s);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }
/* Same shape as .btn, which CF7's submit input cannot inherit by class. */
.contact-form input[type=submit] {
  min-height: 42px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--base-white);
  background: var(--terracotta);
  border: 1px solid var(--base-white);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-form input[type=submit]:hover { background: var(--base-white); color: var(--terracotta); border-color: var(--terracotta); }

/* ---------- Placeholder page ---------- */
.placeholder-page { padding: 120px 40px; text-align: center; }
.placeholder-page h1 { font-family: var(--font-script); font-weight: 400; color: var(--olive); font-size: var(--text-2xl); line-height: var(--leading-script); letter-spacing: var(--tracking-tight); }
.placeholder-page p { color: var(--text-on-light); }



/* ---------- Section width ----------
   The background belongs to the section and must span the viewport, so the
   cap goes on the padding rather than on max-width: the inline padding grows
   with the screen and pins the content to --content-max, while the box itself
   stays edge to edge. Below that width the padding falls back to 40px. */
.formats-section,
.filters-section,
.values-band,
.content-split {
  max-width: none;
  margin-inline: 0;
  padding-inline: max(40px, calc((100% - var(--content-max)) / 2));
}
/* Already inside a capped section — no second cap. */
.cards-3up { max-width: none; margin: 0; padding: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* The bar is too narrow for logo + burger + button, so Contact moves
     into the panel the burger opens. */
  .site-header > .btn.solid { display: none; }
  /* Centred in the panel: the auto margins need a block-level box, which an
     inline-flex is not, and fit-content keeps it from spanning the width. */
  .nav-contact { display: flex; width: fit-content; margin: var(--space-6) auto 0; }
  nav.primary-nav { display: none; }
  nav.primary-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--olive);
    padding: 20px 40px 30px;
  }
  nav.primary-nav.is-open ul { flex-direction: column; gap: 16px; }
  nav.primary-nav.is-open .sub-menu { position: static; padding-top: 8px; }
  .nav-toggle { display: block; }
  .hero-home, .hero-seminaires, .content-split, .cards-3up, .format-grid, .filters-layout, .commitments,
  .contact-form-section, .contact-form .form-row { grid-template-columns: 1fr !important; }
  .contact-form-section { padding-left: 20px; padding-right: 20px; gap: var(--space-8); }
  /* Stacked, the copy has to come first again — otherwise the picture-led
     section opens on a photo with no heading above it. */
  .content-split.photo-left .copy, .content-split.photo-left .photo { order: 0; }
  /* The pair keeps its desktop composition — overlapping, the left one tilted
     and in front — and simply scales with the column. Every value it relies on
     is proportional (56.6% wide, a fixed ratio, pinned to the two edges), so
     nothing here needs to override it. */
  /* The 504px cap and right-aligned pin only make sense next to the wide gap
     the desktop layout has beside it — full width once stacked. */
  .rse-collage { width: auto; max-width: none; margin-left: 0; }
  /* Stacked layout: no room for the star to hang over anything. */
  .hero-home { min-height: 0; padding-left: 20px; padding-right: 20px; }
  .hero-home .hero-copy { padding-top: 24px; }
  .hero-home .hero-photo { margin-top: 0; margin-bottom: 24px; z-index: auto; }
  /* Scaled to phone width the landscape is only ~143px tall, so anchored
     behind a stacked footer several times that height it never shows at all.
     Derived, not from the file — there is no mobile artwork to copy: keep it
     as a strip above the footer, zoomed so the visible half is the landscape
     itself rather than the transparent sky that fills the image's top 45%. */
  .footer-scene::before {
    aspect-ratio: auto;
    height: 130px;
    top: -130px;
    bottom: auto;
    background-size: auto 260px;
  }
  /* The strip above is a fixed height, so the band's clearance has to match it
     rather than track the viewport as it does on desktop. */
  .values-band { margin-bottom: 130px; }
  /* The 82px gutter and the brand column only make sense side by side. */
  .site-footer { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .footer-nav { flex-direction: column; gap: var(--space-6); }
  .footer-univers { flex-wrap: wrap; gap: var(--space-6); }
  /* Uppercase footer labels run long ("Immersion montagne et nature") and the
     desktop rule keeps them on one line, which sizes each column by its
     longest label and pushes the page wider than the screen. */
  .footer-col a, .footer-links a { white-space: normal; }
  .footer-links { flex-wrap: wrap; }
  /* The Figma frame is 1728 wide and only specs desktop type. At 64px a single
     script word is wider than a phone viewport on its own; scale the three
     display sizes with the screen instead. */
  :root {
    --text-3xl: clamp(32px, 8.5vw, 64px);
    --text-2xl: clamp(26px, 6.5vw, 48px);
    --text-xl:  clamp(22px, 4.5vw, 34px);
  }
  /* The 144px / 124px gutters from the 1728px Figma frame are desktop-only. */
  .container, .section-head, .content-split, .filters-section, .values-band, .formats-section,
  .hero-home, .hero-seminaires, .site-header, .site-footer { padding-left: 20px; padding-right: 20px; }
  .hero-seminaires .hero-copy { padding: 40px 0; }
}

/* Between a phone and the desktop layout, dropping the multi-column grids
   straight to one column leaves very wide, short blocks. Two columns hold up
   better there. Only the grids wider than two are concerned: .format-grid is
   already at two, and its cards are 440 in the file — too cramped to split
   at this width. Must come after the 900px block, and repeat !important, to
   override the single-column rule set there. */
@media (min-width: 601px) and (max-width: 900px) {
  .cards-3up, .commitments { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Heading colour pairs, per section (Figma character overrides). */
.formats-section  { --heading-lead: var(--jaune-300); --heading-tail: var(--vert-600); }
.filters-section  { --heading-lead: var(--marron-500); --heading-tail: var(--base-black); }
.values-band      { --heading-lead: var(--cream); --heading-tail: var(--jaune-200); }
.content-split.bg-cream      { --heading-lead: var(--jaune-300); --heading-tail: var(--vert-600); }
.content-split.bg-terracotta { --heading-lead: var(--jaune-200); --heading-tail: var(--beige-200); }
.content-split.reverse       { --heading-lead: var(--marron-500); --heading-tail: var(--base-black); }
.card-format.bg-terracotta { --heading-lead: var(--base-white); --heading-tail: var(--jaune-200); }
.card-format.bg-mustard    { --heading-lead: var(--base-white); --heading-tail: var(--vert-600); }
.card-format.bg-olive      { --heading-lead: var(--base-white); --heading-tail: var(--jaune-300); }

/* ---------- Univers pages ----------
   One template, one palette per page. The accent drives the two-face headings
   in the Offres and "engagé" blocks; the hero always leads in cream and closes
   in the page's own tail colour.
   Note: on Aventures autonomes the file draws the "engagé" lead in near-black
   rather than the page accent — treated as an oversight and kept consistent. */
.hero-seminaires { --heading-lead: var(--text-on-dark); --heading-tail: var(--u-accent-contrast, var(--jaune-200)); }
/* A product sheet belongs to its univers, so its headings take that accent
   rather than the generic mustard the cream splits use elsewhere. On a univers
   page the equivalent block carries .reverse, which already does this; here the
   blocks alternate sides, so the rule is scoped to the sheet instead. */
.single-format .content-split.bg-cream,
.single-format .faq-section { --heading-lead: var(--u-accent, var(--marron-500)); --heading-tail: var(--base-black); }
.filters-section,
.content-split.reverse { --heading-lead: var(--u-accent, var(--marron-500)); --heading-tail: var(--base-black); }

/*  --u-accent           section fill, card fill, buttons
    --u-accent-contrast  handwritten half of the hero title, card titles
    --u-accent-tint      the 100 step of the same ramp: filter chip text  */
.univers-seminaires-entreprise { --u-accent: var(--marron-500); --u-accent-contrast: var(--jaune-200); --u-accent-tint: var(--marron-100); }
.univers-team-building         { --u-accent: var(--jaune-300);  --u-accent-contrast: var(--vert-600); --u-accent-tint: var(--jaune-100); }
.univers-aventures-autonomes   { --u-accent: var(--vert-600);   --u-accent-contrast: var(--jaune-200); --u-accent-tint: var(--vert-100); }
/* Contact reuses the univers hero, but the file paints its block olive
   rather than a page accent — the mail button included, which is why it reads
   as an outline on the same colour. */
.univers-contact               { --u-accent: var(--vert-600);   --u-accent-contrast: var(--jaune-200); --u-accent-tint: var(--vert-100); }