@font-face {
  font-family:Inter;
  src:url(fonts/inter-medium.woff) format('woff');
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Inter;
  src:url(fonts/inter-semibold.woff) format('woff');
  font-weight:600 700;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url(fonts/montserrat-bold.woff) format('woff');
  font-weight:600 700;
  font-display:swap
}
/* 1. Tokens */
@font-face {
  font-family:Ranade;
  src:url(fonts/ranade-regular.woff) format('woff');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Ranade;
  src:url(fonts/ranade-medium.woff) format('woff');
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Inter;
  src:url(fonts/inter-regular.woff) format('woff');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url(fonts/montserrat-regular.woff) format('woff');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Sharpie;
  src:url(fonts/sharpie-bold.woff) format('woff');
  font-weight:700;
  font-display:swap
}
:root {
  --color-surface:#eaebd9;
  --color-paper:#fafafa;
  --color-text:#191c15;
  --color-muted:#6e6e6e;
  --color-brand:#ff8653;
  --color-accent:var(--color-brand);
  --font-expression:Sharpie,cursive;
  --space-component:24px;
  --color-accent-strong:#9c4418;
  --color-forest:#21241b;
  --color-subtle:#3d483a;
  --font-heading:Ranade,sans-serif;
  --font-body:Inter,sans-serif;
  --font-label:Montserrat,sans-serif;
  --content-width:1400px;
  --content-wide:1600px;
  --trace-left-span:.92;
  --trace-right-span:.88;
  --footer-trace-top:clamp(48px,5vw,80px);
  --gutter:64px;
  --wide-gutter:32px;
  --content-inset:max(var(--gutter),calc((100% - var(--content-width))/2));
  --section-height:min(90vh,820px);
  --chapter-inset:clamp(32px,5vh,72px);
  --space-section:120px;
  --space-chapter:160px;
  --service-card-width:clamp(300px,24vw,440px);
  --service-card-height:clamp(420px,30vw,560px);
  --service-gap:clamp(16px,1.2vw,24px);
  --arrow-size:24px;
  --ticker-speed:36;
  --radius:4px;
  --text-2xs:10px;
  --text-xs:11px;
  --text-sm:12px;
  --text-md:13px;
  --text-ui:14px;
  --text-label:15px;
  --text-body:16px;
  --text-lead:18px;
  --text-h5:20px;
  --text-h4:24px;
  --text-h3:26px;
  --text-title-sm:30px;
  --text-title-md:32px;
  --text-title-lg:36px;
  --text-title:40px;
  --radius-md:6px;
  --header-height:96px;
  --title-size:clamp(34px,3.9vw,62px);
  --title-leading:1.02;
  --title-tracking:-.01em;
  --title-transform:uppercase;
  --glass-card:rgba(14,17,8,.62);
  --forge-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.53 0.53 0.53 0 -0.3  0.53 0.53 0.53 0 -0.3  0.53 0.53 0.53 0 -0.3  0 0 0 0 0.07'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E");
  --lame-reflection:linear-gradient(112deg,transparent 14%,color-mix(in srgb,var(--color-surface) 20%,transparent) 30%,transparent 42%,color-mix(in srgb,var(--color-brand) 20%,transparent) 58%,transparent 72%,color-mix(in srgb,var(--color-surface) 12%,transparent) 88%);
  --lame-reflection-ink:linear-gradient(112deg,transparent 14%,color-mix(in srgb,var(--color-text) 14%,transparent) 30%,transparent 42%,color-mix(in srgb,var(--color-brand) 18%,transparent) 58%,transparent 72%,color-mix(in srgb,var(--color-text) 9%,transparent) 88%);
  --border-subtle:color-mix(in srgb,var(--color-text) 18%,transparent);
  --radius-pill:999px;
  --color-ink:#0e1108;
  --color-ember:#603027;
  --color-forest-active:#30342a;
  --color-text-soft:#77796c;
  --color-overlay-hero:rgba(14,17,8,.48);
  --color-overlay-modal:rgba(14,17,8,.7);
  --color-overlay-club:rgba(49,49,49,.66);
  --color-line-on-dark:rgba(250,250,250,.24);
  --color-line-on-dark-strong:rgba(250,250,250,.6);
  --dropdown-open-dur:250ms;
  --dropdown-close-dur:150ms;
  --dropdown-pre-scale:.97;
  --dropdown-ease:cubic-bezier(.22,1,.36,1);
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vision-photo-return:1000ms;
  --vision-hover-ease:cubic-bezier(.22,1,.36,1);
  --vision-glare-opacity:.12;
  --vision-glare-fade:300ms --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* 2. Foundations */
*,*::before,*::after {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 16px)
}
body {
  margin:0;
  background:var(--color-surface);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.5;
  overflow-x:clip
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--font-heading);
  font-weight:400
}
h2 {
  font-size:var(--title-size);
  line-height:var(--title-leading);
  letter-spacing:var(--title-tracking);
  text-transform:var(--title-transform)
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
img {
  display:block
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--color-accent-strong);
  outline-offset:5px
}
ul,ol {
  list-style:none;
  margin:0;
  padding:0
}
section,footer {
  scroll-margin-top:24px
}
.skip {
  position:fixed;
  top:12px;
  left:12px;
  transform:translateY(-200%);
  z-index:100;
  background:var(--color-brand);
  padding:12px
}
.skip:focus {
  transform:none
}
/* 3. Layout */
main {
  overflow:clip
}
main>section {
  min-height:var(--section-height)
}
.wrap {
  width:min(var(--content-width),calc(100% - var(--gutter)*2));
  margin-inline:auto
}
.wide {
  width:min(var(--content-wide),calc(100% - var(--wide-gutter)*2));
  margin-inline:auto
}
.section-heading .eyebrow {
  margin-bottom:12px
}
.section-heading h2 {
  margin-bottom:16px
}
.section-heading>p:not(.eyebrow) {
  color:var(--color-muted);
  line-height:24px;
  letter-spacing:.32px
}
.centered {
  text-align:center;
  max-width:786px;
  margin-inline:auto
}
.eyebrow {
  font-family:var(--font-heading);
  font-size:var(--text-sm);
  font-weight:500;
  line-height:16px;
  letter-spacing:.36px;
  text-transform:uppercase;
  color:var(--color-subtle)
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px
}
/* 4. Components */
.forge-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:66px;
  padding:22px 24px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:var(--color-brand);
  font-family:var(--font-label);
  font-size:var(--text-label);
  line-height:20px;
  letter-spacing:.6px;
  color:var(--color-text)
}
.forge-button:hover {
  filter:brightness(.94)
}
.forge-button.outline {
  color:var(--color-surface);
  border-color:var(--color-surface);
  background:transparent
}
.hero--plain .forge-button.outline {
  color:var(--color-text);
  border-color:var(--color-text)
}
.forge-button.compact {
  padding:15px 16px;
  min-height:50px
}
.vision-card-shell {
  height:clamp(260px,42vh,387px);
  position:relative
}
.vision-card {
  height:100%;
  position:relative;
  border:1px solid var(--color-brand);
  border-radius:var(--radius);
  overflow:hidden;
  color:var(--color-paper);
  padding:27px;
  display:flex;
  align-items:flex-end
}
.card-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.card-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 57%,var(--color-ink))
}
.card-copy {
  position:relative;
  z-index:1
}
.card-copy h3 {
  font-size:var(--text-h5);
  font-weight:500;
  line-height:24px;
  color:var(--color-brand);
  margin-bottom:28px
}
.card-copy p {
  font-family:var(--font-label);
  font-size:var(--text-label);
  line-height:22px;
  letter-spacing:.6px
}
.forge-index.forge-index--corner {
  position:absolute;
  right:19px;
  top:19px;
  color:inherit;
  font-weight:400;
  font-family:var(--font-label);
  font-size:var(--text-h4);
  line-height:20px
}
.profile img {
  object-fit:cover;
  border-radius:var(--radius);
  margin-bottom:16px
}
.profile h3 {
  font-size:var(--text-h3);
  line-height:1.1;
  max-width:170px;
  margin-bottom:6px
}
.profile p {
  font-size:var(--text-2xs);
  font-weight:600;
  line-height:1.2;
  letter-spacing:2px;
  text-transform:uppercase;
  max-width:132px
}
/* 5. Page composition */
.forge-header {
  position:fixed;
  z-index:30;
  top:0;
  left:0;
  width:100%;
  color:var(--color-surface);
  --glass-bg:rgba(14,17,8,.34);
  --glass-line:rgba(250,250,250,.16);
  transition:color 300ms var(--dropdown-ease)
}
/* Liquid glass : transparent en haut de page, verre dépoli dès que la page défile.
   Le ton (clair ou sombre) suit la section située sous la barre — posé par forge.js. */
.forge-header::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background-color:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0;
  transition:opacity 300ms var(--dropdown-ease),background-color 300ms var(--dropdown-ease)
}
.forge-header.is-scrolled::before {
  opacity:1
}
.forge-header[data-tone=light] {
  color:var(--color-text);
  --glass-bg:rgba(250,250,250,.46);
  --glass-line:rgba(25,28,21,.12)
}
.forge-header .navigation>a>img {
  transition:filter 300ms var(--dropdown-ease)
}
.forge-header[data-tone=light] .navigation>a>img {
  filter:brightness(.12)
}
/* Filtre SVG masqué (la CSP interdit les styles en ligne). */
.forge-glass-filter {
  position:absolute;
  width:0;
  height:0
}
/* Réfraction : le damas déforme ce qui passe derrière le verre (backdrop-filter:url() = Chromium seulement). */
.has-refraction .forge-header::before {
  -webkit-backdrop-filter:url(#forge-lame-refraction) blur(6px) saturate(1.6);
  backdrop-filter:url(#forge-lame-refraction) blur(6px) saturate(1.6)
}
@supports not (backdrop-filter:blur(1px)) {
  .forge-header::before {
    background:color-mix(in srgb,var(--color-forest) 92%,transparent)
  }
  .forge-header[data-tone=light]::before {
    background:color-mix(in srgb,var(--color-surface) 94%,transparent)
  }
}
@media(prefers-reduced-transparency:reduce) {
  .has-refraction .forge-header::before,
  .forge-header::before {
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:var(--color-forest)
  }
  .forge-header[data-tone=light]::before {
    background:var(--color-surface)
  }
}
@media(prefers-reduced-motion:reduce) {
  .forge-header,
  .forge-header::before,
  .forge-header .navigation>a>img {
    transition:none
  }
}
.navigation {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:24px;
  gap:48px
}
.navigation>a {
  flex:0 0 25%
}
.navigation nav {
  display:flex;
  flex:1;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.navigation nav>a:not(.forge-button) {
  font-family:var(--font-heading);
  font-size:var(--text-sm);
  line-height:18.6px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  white-space:nowrap
}
.navigation nav>a:not(.forge-button):hover {
  text-decoration:underline;
  text-underline-offset:8px
}
.menu-toggle {
  display:none
}
.hero {
  min-height:var(--section-height);
  height:auto;
  position:relative;
  display:flex;
  align-items:center;
  padding-block:140px 100px;
  color:var(--color-surface);
  overflow:hidden
}
.hero-background {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.hero::after {
  content:'';
  position:absolute;
  inset:0;
  background:var(--color-overlay-hero)
}
.hero-copy {
  position:relative;
  z-index:1;
  transform:none
}
.hero-kicker {
  font-family:var(--font-heading);
  font-size:var(--text-label);
  font-weight:500;
  line-height:16px;
  letter-spacing:.45px;
  text-transform:uppercase;
  color:var(--color-brand);
  margin-bottom:11px
}
.hero h1 {
  font-size:clamp(64px,6.67vw,96px);
  line-height:.95;
  letter-spacing:-1.92px;
  max-width:761px;
  margin-bottom:19px
}
.hero-intro {
  max-width:620px;
  line-height:24px;
  letter-spacing:.32px;
  margin-bottom:27px
}
.vision {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:var(--chapter-inset)
}
.vision-stage {
  position:relative;
  margin-top:32px
}
.vision-trace {
  position:absolute;
  inset:0 auto auto 0;
  width:calc(100% * var(--trace-left-span));
  height:auto;
  pointer-events:none
}
.vision-grid {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  height:clamp(360px,50vh,527px);
  align-items:center;
  padding-top:clamp(32px,7vw,100px)
}
.vision-card-shell:nth-child(2) {
  align-self:start;
  margin-top:25px
}
.vision-card-shell:nth-child(3) {
  align-self:end
}
.reassurance {
  padding-block:clamp(24px,3vw,48px);
  pointer-events:none
}
.reassurance img {
  width:calc(100% * var(--trace-right-span));
  height:auto;
  margin-left:auto
}
.pillars {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:var(--chapter-inset);
  background:transparent
}
.pillars>.section-heading {
  margin-bottom:48px
}
.pillars>.section-heading .eyebrow {
  color:var(--color-subtle)
}
.pillars-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.club {
  position:relative;
  display:flex;
  align-items:center;
  min-height:var(--section-height);
  margin-top:var(--space-chapter);
  border-radius:var(--radius);
  overflow:hidden;
  color:var(--color-surface)
}
.club-background {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.club::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--color-overlay-club),transparent)
}
.club-copy {
  position:relative;
  z-index:1;
  width:47%;
  padding:65px 0 65px 76px
}
.club-copy .eyebrow {
  color:var(--color-paper);
  margin-bottom:14px
}
.club-copy h2 {
  color:var(--color-surface);
  margin-bottom:28px
}
.journey {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:var(--chapter-inset)
}
.journey-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:40px
}
.journey-heading .eyebrow {
  margin-bottom:20px
}
.journey-heading>p {
  max-width:400px;
  color:var(--color-subtle);
  letter-spacing:.32px;
  line-height:24px
}
.journey-grid {
  display:grid;
  grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  background:var(--color-paper);
  border-radius:var(--radius)
}
.steps {
  padding:32px
}
.steps li {
  display:flex;
  position:relative;
  gap:16px;
  background:transparent;
  border-bottom:1px solid var(--color-surface);
  min-height:95.75px;
  padding:16px 0;
  overflow:hidden
}
.steps li:first-child {
  padding-top:0
}
.steps li:last-child {
  border-bottom:0;
  padding-bottom:0
}
.step-number {
  display:grid;
  place-items:center;
  flex:0 0 28px;
  align-self:flex-start;
  height:28px;
  border-radius:var(--radius);
  font-size:var(--text-sm);
  font-weight:600;
  background:var(--color-brand);
  color:var(--color-text)
}
.steps li>div {
  flex:1
}
.steps h3 {
  font:500 var(--text-body)/24px var(--font-body)
}
.steps strong {
  font-size:var(--text-label);
  line-height:24px;
  text-transform:uppercase
}
.steps p {
  font-size:var(--text-md);
  line-height:18px
}
.test-panel {
  display:grid;
  place-items:center;
  position:relative;
  min-height:453px;
  overflow:hidden;
  padding:32px
}
.test-panel .forge-button {
  position:relative
}
.services {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:var(--chapter-inset);
  position:relative
}
.services .section-heading {
  padding-top:0;
  padding-bottom:40px;
  max-width:786px
}
.service-scroll {
  width:100%;
  padding:0 var(--content-inset) 16px;
  overflow:hidden
}
.service-track {
  position:relative;
  width:100%
}
.service-group {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--service-gap)
}
.service-scroll:not(.is-ticking) .service-card {
  width:100%;
  scroll-snap-align:none
}
.service-scroll.is-ticking {
  padding-inline:0
}
.is-ticking .service-track {
  display:flex;
  gap:var(--service-gap);
  width:max-content;
  will-change:transform
}
.is-ticking .service-group {
  display:flex;
  flex-shrink:0
}
.is-ticking .service-card {
  flex-shrink:0;
  scroll-snap-align:none
}
.service-card {
  width:var(--service-card-width);
  height:auto;
  min-height:var(--service-card-height);
  scroll-snap-align:start;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--color-forest);
  background-image:var(--forge-grain);
  background-size:256px 256px;
  border-radius:var(--radius);
  color:var(--color-surface);
  display:flex;
  align-items:flex-end;
  padding:clamp(26px,2vw,40px)
}
/* Rythme tonal : une carte sur deux un peu plus claire, pour la profondeur sans effet. */
.service-card:nth-child(even) {
  background-color:color-mix(in srgb,var(--color-forest) 84%,var(--color-surface))
}
.service-script {
  position:absolute;
  z-index:-1;
  left:0;
  bottom:0;
  width:calc(var(--service-card-height) * 1.3);
  font:700 clamp(150px,12vw,210px)/.78 var(--font-expression);
  white-space:nowrap;
  transform-origin:0 100%;
  transform:rotate(-90deg) translate(0,52%);
  color:color-mix(in srgb,var(--color-surface) 9%,transparent);
  pointer-events:none
}
.service-copy h3 {
  font-size:clamp(24px,2.1vw,34px);
  overflow-wrap:break-word;
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.32px;
  margin-bottom:9px
}
.service-copy p {
  font-size:clamp(13px,1vw,16px);
  line-height:1.6;
  color:var(--color-surface)
}
.journal {
  display:grid;
  grid-template-columns:400px minmax(0,1fr);
  gap:56px;
  padding:var(--chapter-inset) 64px;
  margin-top:var(--space-chapter);
  min-height:var(--section-height)
}
.journal-list h2 {
  font-size:clamp(32px,3.2vw,48px);
  line-height:var(--title-leading);
  letter-spacing:var(--title-tracking);
  text-transform:var(--title-transform);
  margin-bottom:24px
}
.journal-rule {
  max-width:100%;
  margin-bottom:20px
}
.article-row {
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:20px
}
.article-row>img {
  flex-shrink:0;
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:var(--radius-md)
}
.article-row h3 {
  font-size:var(--text-label);
  font-weight:500;
  line-height:1.4;
  margin-bottom:6px
}
.article-row time {
  font:600 var(--text-xs)/1.4 var(--font-label);
  letter-spacing:1px;
  color:var(--color-accent-strong)
}
.featured {
  position:relative;
  min-height:572px;
  padding:40px;
  display:flex;
  align-items:flex-end;
  border-radius:var(--radius);
  overflow:hidden;
  color:var(--color-surface);
  isolation:isolate
}
.featured-image {
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.featured::after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(transparent,var(--color-forest))
}
.featured-copy {
  display:grid;
  gap:20px
}
.featured h2 {
  font-size:var(--text-title-lg);
  font-weight:500;
  line-height:1.3;
  color:var(--color-surface)
}
.featured p {
  font-size:var(--text-label);
  line-height:1.6
}
.featured-copy>a {
  font:400 var(--text-sm)/1.5 var(--font-label);
  letter-spacing:2px;
  color:var(--color-brand);
  text-transform:uppercase
}
.article-meta {
  display:flex;
  align-items:center;
  gap:12px;
  font:500 var(--text-sm)/1.4 var(--font-label);
  letter-spacing:1px
}
.article-meta>span {
  border:1px solid var(--color-brand);
  padding:6px 14px;
  text-transform:uppercase;
  color:var(--color-brand);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:1.5px
}
.team {
  padding:64px 0 120px
}
.team .eyebrow {
  margin-bottom:32px
}
.team h2 {
  font-size:44px;
  line-height:1.2;
  margin-bottom:64px
}
.team-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:48px
}
.footer {
  position:relative;
  padding:80px 0 48px
}
.footer-trace {
  position:absolute;
  z-index:-1;
  left:calc(50% - 50vw);
  top:var(--footer-trace-top);
  width:calc(100vw * var(--trace-left-span));
  pointer-events:none
}
.footer-trace svg {
  display:block;
  width:100%;
  height:auto
}
.footer-band {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding-bottom:36px;
  border-bottom:1px solid var(--color-paper);
  margin-bottom:64px
}
.footer-band h2 {
  font-size:56px;
  line-height:1.375;
  letter-spacing:-1.12px
}
.footer-band p {
  font-family:var(--font-label);
  color:var(--color-text-soft);
  font-size:var(--text-body)
}
.footer-band .forge-button {
  color:var(--color-brand);
  flex-shrink:0
}
.footer-directory {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:48px;
  border-bottom:1px solid var(--color-paper);
  padding-bottom:36px;
  margin-bottom:64px
}
.footer-directory h3 {
  font:600 var(--text-sm)/1.4 var(--font-label);
  text-transform:uppercase;
  margin-bottom:20px
}
.footer-directory a,.footer-directory span {
  display:block;
  font:400 var(--text-ui)/25px var(--font-label);
  letter-spacing:.21px;
  color:var(--color-text-soft);
  margin-bottom:8px
}
.footer-directory a:hover {
  text-decoration:underline
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:16px
}
.footer-brand>span {
  border-left:1px solid var(--color-subtle);
  padding-left:16px;
  font:500 var(--text-sm)/20px var(--font-label);
  text-transform:uppercase;
  color:var(--color-text-soft)
}
.socials {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--color-subtle);
  border-radius:var(--radius);
  padding:8px 16px;
  font:600 var(--text-xs)/1.2 var(--font-label);
  text-transform:uppercase
}
.legal {
  font:400 var(--text-xs)/1.5 var(--font-label);
  color:var(--color-text-soft);
  text-align:right
}
.legal-admin {
  opacity:.55
}
.legal-admin:is(:hover,:focus-visible) {
  opacity:1;
  text-decoration:underline
}
.legal p+p {
  margin-top:6px
}
.back-top img {
  transform:scaleY(-1)
}
/* 6. Responsive */
@media(max-width:1200px) {
  :root {
    --gutter:48px
  }
  .navigation {
    gap:24px
  }
  .navigation>a {
    flex-basis:15%
  }
  .navigation nav {
    gap:16px
  }
  .club-copy {
    padding-left:40px;
    width:49%
  }
  .journal {
    grid-template-columns:34% minmax(0,1fr);
    gap:36px;
    padding:48px
  }
  .team-grid {
    gap:30px
  }
  .footer-bottom {
    flex-wrap:wrap
  }
  .profile h3 {
    font-size:var(--text-h4)
  }
}
@media(max-width:900px) {
  :root {
    --gutter:32px;
    --space-section:80px;
    --space-chapter:100px
  }
  .navigation nav {
    gap:10px
  }
  .navigation>a {
    flex-basis:auto
  }
  .navigation nav>a:not(.forge-button) {
    font-size:12px;
    letter-spacing:.6px
  }
  .navigation .compact {
    font-size:var(--text-sm);
    padding:12px
  }
  .hero h1 {
    font-size:80px;
    line-height:.9;
    max-width:650px
  }
  .vision {
    padding-block:var(--chapter-inset)
  }
  .vision-grid {
    gap:12px
  }
  .vision-card {
    padding:16px
  }
  .card-copy h3 {
    font-size:var(--text-lead);
    line-height:22px
  }
  .card-copy p {
    font-size:var(--text-sm)
  }
  .forge-index--corner {
    font-size:var(--text-lead)
  }
  .club-copy {
    width:52%;
    padding-left:32px
  }
  .journey {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-block:var(--chapter-inset)
  }
  .journey-heading {
    gap:32px
  }
  .journey-heading>p {
    max-width:320px
  }
  .journey-grid {
    grid-template-columns:minmax(0,58fr) minmax(0,42fr)
  }
  .steps {
    padding:20px
  }
  .steps li {
    min-height:110px
  }
  .steps strong {
    font-size:var(--text-md)
  }
  .test-panel {
    padding:16px
  }
  .test-panel .forge-button {
    font-size:var(--text-sm)
  }
  .journal {
    padding:32px;
    grid-template-columns:1fr 1.4fr;
    gap:24px
  }
  .article-row {
    gap:12px
  }
  .article-row>img {
    width:64px;
    height:64px
  }
  .featured {
    padding:28px
  }
  .featured h2 {
    font-size:var(--text-title-sm)
  }
  .team h2 {
    font-size:var(--text-title-lg)
  }
  .team-grid {
    gap:20px
  }
  .profile img {
    width:110px;
    height:110px
  }
  .profile h3 {
    font-size:21px
  }
  .footer-band h2 {
    font-size:var(--text-title)
  }
  .footer-directory {
    gap:24px
  }
}
@media(max-width:700px) {
  :root {
    --gutter:24px;
    --wide-gutter:16px;
    --header-height:85px
  }
  .navigation {
    padding-block:20px
  }
  .hero {
    height:auto;
    min-height:var(--section-height);
    padding-block:130px 76px;
    align-items:center
  }
  .hero-copy {
    transform:none
  }
  .hero-background,.hero-video {
    object-position:60% center
  }
  .hero-kicker {
    font-size:var(--text-xs);
    line-height:18px;
    max-width:290px
  }
  .hero h1 {
    font-size:clamp(48px,12vw,74px);
    line-height:.98;
    letter-spacing:-1.2px;
    margin-bottom:24px;
    max-width:100%
  }
  .hero-intro {
    font-size:var(--text-ui);
    line-height:22px;
    margin-bottom:28px
  }
  .actions {
    gap:12px
  }
  .actions .forge-button {
    font-size:var(--text-md);
    min-height:54px;
    padding:16px 18px
  }
  .vision {
    padding-block:var(--chapter-inset)
  }
  .vision .section-heading>p {
    font-size:var(--text-ui);
    line-height:23px
  }
  .vision-grid {
    height:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    padding-top:32px
  }
  .vision-card-shell {
    height:320px
  }
  .vision-card {
    height:100%;
    padding:18px
  }
  .vision-card-shell:nth-child(2) {
    margin-top:28px
  }
  .vision-card-shell:nth-child(3) {
    align-self:start;
    margin-top:-28px
  }
  .card-copy h3 {
    font-size:var(--text-lead);
    margin-bottom:20px
  }
  .card-copy p {
    font-size:var(--text-sm)
  }
  .pillars-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .pillars>.section-heading {
    margin-bottom:32px
  }
  .club {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:var(--section-height);
    padding:48px 24px;
    gap:45px
  }
  .club-copy {
    width:100%;
    padding:0
  }
  .journey {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-block:var(--chapter-inset)
  }
  .journey-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    margin-bottom:32px
  }
  .journey-heading>p {
    max-width:none;
    font-size:var(--text-ui)
  }
  .journey-grid {
    grid-template-columns:1fr
  }
  .steps {
    padding:20px
  }
  .steps li {
    min-height:115px
  }
  .steps p {
    font-size:var(--text-sm);
    line-height:18px
  }
  .test-panel {
    min-height:330px
  }
  .test-panel .forge-button {
    font-size:var(--text-label)
  }
  .services {
    padding-block:var(--chapter-inset)
  }
  .services .section-heading {
    padding-bottom:32px
  }
  .service-card {
    width:min(var(--service-card-width),calc(100vw - var(--gutter)*2 - 24px));
    height:400px
  }
  .service-copy h3 {
    font-size:clamp(22px,7vw,var(--text-h3));
    overflow-wrap:break-word
  }
  .journal {
    grid-template-columns:1fr;
    padding:24px 8px;
    gap:36px;
    margin-top:72px
  }
  .journal-rule {
    max-width:100%
  }
  .article-row>img {
    flex-shrink:0;
    width:80px;
    height:80px
  }
  .article-row h3 {
    font-size:var(--text-label)
  }
  .featured {
    min-height:560px;
    padding:28px
  }
  .featured h2 {
    font-size:var(--text-title-sm)
  }
  .team {
    padding:72px 0 80px
  }
  .team h2 {
    font-size:var(--text-title-sm);
    margin-bottom:40px
  }
  .team h2 br {
    display:none
  }
  .team-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px 24px
  }
  .profile img {
    width:132px;
    height:132px
  }
  .profile h3 {
    font-size:var(--text-h3)
  }
  .footer {
    padding:64px 0 32px
  }
  .footer-band {
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
    margin-bottom:40px
  }
  .footer-band h2 {
    font-size:var(--text-title-lg);
    line-height:1.2;
    margin-bottom:12px
  }
  .footer-band p {
    font-size:var(--text-md);
    line-height:20px
  }
  .footer-directory {
    grid-template-columns:1fr 1fr;
    gap:32px 24px;
    margin-bottom:40px
  }
  .footer-directory a,.footer-directory span {
    font-size:var(--text-sm)
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:24px
  }
  .legal {
    text-align:left;
    font-size:12px;
    line-height:1.5
  }
  .back-top {
    position:absolute;
    right:0;
    bottom:36px
  }
}
@media(max-width:360px) {
  .vision-grid {
    grid-template-columns:1fr
  }
  .vision-card-shell:nth-child(n) {
    margin:0
  }
  .hero h1 {
    font-size:44px
  }
  .actions {
    flex-direction:column
  }
  .team-grid {
    gap:32px 12px
  }
  .profile h3 {
    font-size:22px
  }
  .profile img {
    width:120px;
    height:120px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .navigation nav {
    transition:none!important
  }
}
/* Corps éditorial : titres, listes et liens du WYSIWYG */
.article-content {
  overflow-wrap:anywhere
}
.article-content>*+* {
  margin-top:20px
}
.article-content h2,.article-content h3,.article-content h4 {
  font-family:var(--font-heading);
  line-height:1.25;
  margin-bottom:12px
}
.article-content h3 {
  font-size:var(--text-h4)
}
.article-content h4 {
  font-size:var(--text-h5)
}
.article-content ul,.article-content ol {
  padding-left:24px
}
.article-content ul {
  list-style:disc
}
.article-content ol {
  list-style:decimal
}
.article-content li+li {
  margin-top:8px
}
.article-content li>ul,.article-content li>ol {
  margin-top:8px
}
.article-content a {
  text-decoration:underline;
  text-underline-offset:3px
}
.article-content blockquote {
  margin:20px 0;
  padding:12px 20px;
  border-left:4px solid var(--color-brand)
}
/* Apparitions au scroll : recette Texts reveal, activée uniquement par JS. */
/* Lines start translated down + blurred + invisible; .is-shown
on the parent flips them to their resting state. The second
line's transition-delay holds it back by --stagger-stagger
so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:     opacity   var(--stagger-dur) var(--stagger-ease),     transform var(--stagger-dur) var(--stagger-ease),     filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}
.t-stagger-line--3 {
  transition-delay:calc(var(--stagger-stagger)*2)
}
.t-stagger-line--4 {
  transition-delay:calc(var(--stagger-stagger)*3)
}
.forge-button.t-stagger-line {
  display:inline-flex
}
.article-row.t-stagger-line,.article-meta.t-stagger-line {
  display:flex
}
.step-number.t-stagger-line {
  display:grid
}
.t-stagger.is-settled .t-stagger-line {
  will-change:auto
}
.t-stagger:focus-within .t-stagger-line {
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
  will-change:auto
}
@media(prefers-reduced-motion:reduce) {
  .t-stagger-line {
    opacity:1;
    transform:none;
    filter:none;
    will-change:auto
  }
}
@media print {
  .t-stagger-line {
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
    will-change:auto
  }
}
/* Vidéo décorative : image conservée derrière et chargement progressif. */
.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none
}
.hero-video.is-playing {
  opacity:1
}
@media(prefers-reduced-motion:reduce) {
  .hero-video {
    display:none
  }
}
@media print {
  .hero-video {
    display:none
  }
}
/* Club membership CTA */
.forge-button.club-cta {
  min-height:58px;
  padding:12px 18px 12px 24px;
  gap:28px;
  border-radius:var(--radius-md);
  border-color:var(--color-line-on-dark);
  background:var(--color-forest);
  color:var(--color-paper);
  font-family:var(--font-heading);
  font-size:var(--text-label);
  font-weight:500;
  letter-spacing:.15px;
  line-height:22px;
  filter:none
}
.club-cta-label {
  text-align:left
}
.club-cta-arrow {
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border:0;
  border-radius:0;
  color:var(--color-brand);
  font:400 var(--text-lead)/1 var(--font-body)
}
.forge-button.club-cta:hover {
  border-color:var(--color-brand);
  background:var(--color-text)
}
.club-cta:hover .club-cta-arrow {
  color:var(--color-brand)
}
.forge-button.club-cta:focus-visible {
  outline-color:var(--color-brand)
}
.forge-button.club-cta:active {
  background:var(--color-forest-active)
}
.forge-button.club-cta.compact {
  min-height:48px;
  padding:8px 12px 8px 18px;
  gap:20px;
  font-size:var(--text-md)
}
.club-cta.compact .club-cta-arrow {
  flex-basis:28px;
  width:28px;
  height:28px;
  font-size:var(--text-body)
}
.footer-band .forge-button.club-cta {
  color:var(--color-paper)
}
@media print,(prefers-reduced-motion:reduce) {
  .service-scroll.is-ticking {
    padding-inline:var(--content-inset)
  }
  .is-ticking .service-track {
    transform:none!important;
    display:block;
    width:100%;
    will-change:auto
  }
  .is-ticking [data-ticker-clone] {
    display:none
  }
  .is-ticking .service-group:not([data-ticker-clone]) {
    display:grid
  }
  .is-ticking .service-card {
    width:100%
  }
}
/* Cartes vision : parallaxe séparée du hover 2D. */
.vision-card-shell {
  transform:translate3d(0,var(--vision-shift,0px),0)
}
.vision-hover {
  height:100%;
  touch-action:pan-y
}
.vision-card {
  transform:none;
  will-change:auto
}
.vision-card .card-photo {
  transition:transform var(--vision-photo-return) var(--vision-hover-ease)
}
.vision-glare {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(circle 95px at var(--vision-glare-x,50%) var(--vision-glare-y,50%),rgba(255,255,255,.48),rgba(255,255,255,.06) 52%,rgba(255,255,255,0) 84%),radial-gradient(circle 200px at var(--vision-glare-x,50%) var(--vision-glare-y,50%),rgba(255,255,255,.22),rgba(255,255,255,.04) 58%,rgba(255,255,255,0) 78%),radial-gradient(circle 360px at var(--vision-glare-x,50%) var(--vision-glare-y,50%),rgba(255,255,255,.10),rgba(255,255,255,0) 88%);
  transition:opacity var(--vision-glare-fade) var(--vision-hover-ease)
}
.vision-hover.is-hover .vision-glare {
  opacity:var(--vision-glare-opacity)
}
@media(hover:hover) and (pointer:fine) {
  .vision-hover.is-hover .card-photo,.vision-card:focus-visible .card-photo {
    transform:scale(1.045)
  }
}
@media print,(prefers-reduced-motion:reduce) {
  .vision-card-shell {
    transform:none!important
  }
  .vision-card .card-photo {
    transform:none!important;
    transition:none!important
  }
  .vision-glare {
    display:none
  }
}
/* Composition : piliers clairs, rythme vertical, ticker dans un panneau blanc. */
.pillars-grid {
  padding-block:48px 56px;
  align-items:start
}
.pillar {
  --pillar-offset:18px;
  transform:translate3d(0,calc(var(--pillar-offset) + var(--pillar-shift,0px)),0)
}
.pillar:nth-child(2) {
  --pillar-offset:-24px
}
.pillar:nth-child(3) {
  --pillar-offset:32px
}
.services {
  isolation:isolate
}
.services::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0 var(--content-inset);
  background:var(--color-paper);
  border-radius:var(--radius)
}
.service-copy {
  width:100%
}
.service-copy h3 {
  color:var(--color-brand)
}
@media(max-width:700px) {
  .pillars-grid {
    padding-block:0;
    gap:24px
  }
  .pillar:nth-child(n) {
    --pillar-offset:0px
  }
  .services::before {
    inset-inline:16px
  }
}
@media print,(prefers-reduced-motion:reduce) {
  .pillar {
    transform:none!important
  }
}
/* Hover des flèches — Transitions.dev Learn more hover */
.t-learn-chevron {
  display: inline-flex;
  transform: translateX(0);
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
  transform-box: view-box;
  transform-origin: 10px 8px;
  vector-effect: non-scaling-stroke;
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron {
  transform: translateX(var(--learn-shift));
  transition-duration: var(--learn-in);
}
.t-learn:hover .t-learn-arm {
  transition-duration: var(--learn-in);
}
.t-learn:hover .t-learn-arm-top {
  transform: rotate(var(--learn-spread));
}
.t-learn:hover .t-learn-arm-bot {
  transform: rotate(calc(var(--learn-spread) * -1));
}
@media (prefers-reduced-motion: reduce) {
  .t-learn-chevron, .t-learn-arm {
    transition: none !important;
  }
}
/* Composition : hero plein écran, parcours incarné, tracés dessinés. */
.hero {
  min-height:100vh
}
/* Pages internes : même hero, présence réduite pour laisser la place au contenu. */
.hero--compact {
  min-height:64vh;
  padding-block:140px 72px
}
.hero--compact h1 {
  font-size:clamp(44px,5.2vw,72px);
  line-height:1;
  letter-spacing:-1.2px;
  max-width:16ch
}
.hero--compact .hero-intro {
  max-width:520px;
  margin-bottom:24px
}
.hero-scroll {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:24px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  transform:translateX(-50%);
  color:var(--color-paper)
}
.forge-trace {
  color:var(--color-brand);
  pointer-events:none
}
.trace-ready .trace-draw {
  stroke-dashoffset:100;
  transition:stroke-dashoffset 1600ms cubic-bezier(.4,0,.2,1)
}
.trace-ready.is-drawn .trace-draw {
  stroke-dashoffset:0
}
.footer {
  isolation:isolate
}
.footer-band {
  border-bottom:0
}
.services::before {
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%)
}
.journey-grid {
  gap:20px;
  background:transparent
}
.steps {
  background:var(--color-paper);
  border-radius:var(--radius);
  padding:32px
}
.steps li {
  padding-block:22px;
  min-height:110px;
  border-bottom-color:var(--color-surface)
}
.steps h3 {
  font-size:var(--text-lead);
  line-height:26px
}
.steps strong {
  font-size:var(--text-md);
  font-weight:500;
  color:var(--color-accent-strong)
}
.steps p {
  margin-top:4px;
  font-size:var(--text-md);
  line-height:20px
}
.test-panel {
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  min-height:520px;
  border-radius:var(--radius);
  background:var(--color-forest);
  color:var(--color-paper);
  padding:32px
}
.test-photo {
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%
}
.test-panel::after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(to bottom,rgba(25,28,21,.04) 22%,rgba(25,28,21,.88) 100%)
}
.test-overlay {
  display:grid;
  gap:16px;
  max-width:380px
}
.test-tag {
  width:fit-content;
  border:1px solid var(--color-line-on-dark-strong);
  border-radius:var(--radius-pill);
  padding:5px 12px;
  font:500 var(--text-xs)/18px var(--font-label);
  letter-spacing:.6px
}
.test-overlay h3 {
  font-size:34px;
  line-height:1.12
}
.test-overlay p {
  font-size:var(--text-ui);
  line-height:22px
}
.test-overlay .forge-button {
  gap:24px;
  min-height:52px;
  padding:14px 20px;
  font-size:var(--text-md)
}
.test-panel:focus-visible {
  outline-color:var(--color-brand)
}
@media(max-width:700px) {
  .journey-grid {
    gap:24px
  }
  .steps {
    padding:24px
  }
  .test-panel {
    min-height:440px;
    padding:28px
  }
  .test-overlay h3 {
    font-size:var(--text-title-sm)
  }
}
@media print,(prefers-reduced-motion:reduce) {
  .trace-ready .trace-draw {
    stroke-dashoffset:0!important;
    transition:none!important
  }
  .hero-scroll svg,.t-learn-chevron,.t-learn-arm {
    transform:none!important;
    transition:none!important
  }
  .service-card {
    transition:none
  }
}
/* Actions Forge : même dessin, même taille, orientation selon la destination. */
.forge-arrow {
  display:inline-flex;
  vertical-align:middle;
  flex:0 0 var(--arrow-size);
  width:var(--arrow-size);
  height:var(--arrow-size);
  transform:rotate(0deg);
  pointer-events:none
}
.forge-arrow--down {
  transform:rotate(90deg)
}
.forge-arrow--up {
  transform:rotate(-90deg)
}
.forge-arrow--left {
  transform:rotate(180deg)
}
.forge-arrow svg {
  display:block;
  width:var(--arrow-size);
  height:var(--arrow-size)
}
.forge-arrow .t-learn-arm {
  transform-origin:20px 12px
}
:is(.forge-button,.hero-scroll,.test-panel,.vision-card,.spaces-index a,.featured-copy>a):is(:hover,:focus-visible) .t-learn-chevron {
  transform:translateX(4px)
}
.test-panel:focus-visible .t-learn-chevron {
  transform:translateX(4px)
}
.button-arrow {
  display:inline-flex
}
.forge-button {
  gap:24px
}
.card-copy .forge-arrow {
  margin-left:4px
}
.featured-copy>a {
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:fit-content
}
/* Ticker : cartes fluides, mouvement stable et retour au survol entièrement en 2D. */
.service-copy {
  position:relative;
  width:100%;
  transition:transform var(--learn-out) var(--learn-ease)
}
.service-card {
  cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-surface) 10%,transparent);
  transition:background-color var(--learn-out) var(--learn-ease),box-shadow var(--learn-out) var(--learn-ease)
}
.service-script {
  transition:color var(--learn-out) var(--learn-ease),transform var(--learn-out) var(--learn-ease)
}
.service-card-action {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  min-height:44px;
  margin-top:22px;
  border-top:1px solid color-mix(in srgb,var(--color-surface) 16%,transparent);
  color:var(--color-brand)
}
.service-card-label {
  font:500 var(--text-sm)/1.4 var(--font-heading);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity var(--learn-out) var(--learn-ease),transform var(--learn-out) var(--learn-ease)
}
.service-card:focus-visible {
  outline-color:var(--color-brand);
  outline-offset:-3px
}
.service-card:focus-visible {
  background-color:var(--color-text);
  box-shadow:inset 0 0 0 1px var(--color-brand)
}
.service-card:focus-visible .service-card-label {
  opacity:1;
  transform:none
}
.service-card:focus-visible .t-learn-chevron {
  transform:translateX(4px)
}
@media(hover:hover) and (pointer:fine) {
  .service-card:hover {
    background-color:var(--color-text);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-brand) 70%,transparent)
  }
  .service-card:hover .service-copy {
    transform:translateY(-6px)
  }
  .service-card:hover .service-script {
    color:color-mix(in srgb,var(--color-brand) 30%,transparent);
    transform:rotate(-90deg) translate(0,calc(52% + 16px))
  }
  .service-card:hover .service-card-label {
    opacity:1;
    transform:none
  }
}
@media(hover:none) {
  .service-card-label {
    opacity:1;
    transform:none
  }
}
@media(max-width:700px) {
  :root {
    --service-card-height:400px
  }
  .service-copy p {
    font-size:var(--text-md)
  }
  .service-card {
    padding:26px
  }
}
@media print,(prefers-reduced-motion:reduce) {
  .service-copy,.service-script,.service-card-label,.service-card {
    transition:none!important
  }
  .service-copy,.service-card-label {
    transform:none!important
  }
  .service-script {
    transform:rotate(-90deg) translate(0,52%)!important
  }
  .forge-arrow .t-learn-chevron,.forge-arrow .t-learn-arm {
    transform:none!important;
    transition:none!important
  }
}
/* Composants partagés issus de la homepage : liens et repères éditoriaux. */
.forge-link {
  display:inline-flex;
  align-items:center;
  gap:var(--space-component);
  width:fit-content;
  min-height:44px;
  font:500 var(--text-ui)/1.5 var(--font-heading)
}
.forge-link>span:first-child {
  text-decoration:underline;
  text-underline-offset:6px
}
.forge-link .forge-arrow {
  color:var(--color-accent)
}
.forge-link:is(:hover,:focus-visible) .t-learn-chevron {
  transform:translateX(4px)
}
.forge-index {
  font-family:var(--font-label);
  font-weight:500;
  color:var(--color-accent);
  white-space:nowrap
}

/* Matière « lame Forge » : reflet déformé par un damas.
   Un reflet doux (dégradés) est replié par une carte de déplacement issue d'un bruit fractal étiré
   (SVG feTurbulence + feDisplacementMap, filtre #forge-lame-reflect) : aucune ligne dessinée, seulement de la lumière qui ondule.
   .surface-lame      → reflet clair, pour les surfaces sombres (vert sombre)
   .surface-lame--ink → reflet sombre, pour les surfaces claires (écru, papier)
   Utilisée sur les surfaces sombres opaques (ex. piliers sans photo). Fonctionne sur tous les navigateurs. */
.surface-lame {
  position:relative;
  isolation:isolate;
  overflow:hidden
}
.surface-lame::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:-14%;
  background:var(--lame-reflection);
  filter:url(#forge-lame-reflect);
  pointer-events:none
}
.surface-lame--ink::before {
  background:var(--lame-reflection-ink)
}
@media print {
  .surface-lame::before,
  .surface-lame--ink::before {
    display:none
  }
}

/* Verre léger : voile translucide et flou, sans filtre SVG (la réfraction du damas est réservée à la nav, pour les performances). */
.surface-glass {
  color:var(--color-surface);
  background:var(--glass-card);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--color-line-on-dark);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 28px 64px rgba(14,17,8,.28)
}
@supports not (backdrop-filter:blur(1px)) {
  .surface-glass {
    background:color-mix(in srgb,var(--color-forest) 90%,transparent)
  }
}
@media(prefers-reduced-transparency:reduce) {
  .surface-glass {
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:var(--color-forest)
  }
}
/* Piliers — triptyque photo + verre sur fond vert sombre. */
.pillars {
  background:var(--color-forest);
  color:var(--color-surface);
  padding-block:var(--space-section)
}
.pillars>.section-heading .eyebrow {
  color:var(--color-accent)
}
.pillars>.section-heading h2 {
  color:var(--color-surface)
}
.pillar {
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:end;
  min-height:clamp(520px,64vh,700px);
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--color-forest-active)
}
.pillar-media {
  position:absolute;
  z-index:-1;
  inset:0
}
.pillar-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translate3d(0,var(--pillar-photo-shift,0px),0) scale(1.14);
  will-change:transform
}
.pillar h3 {
  font-size:clamp(28px,2.6vw,40px);
  line-height:1.1;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:16px
}
.pillar-copy>p {
  font-size:var(--text-ui);
  line-height:1.6
}
.pillar-benefits {
  display:grid;
  margin-top:24px;
  border-bottom:1px solid var(--color-line-on-dark)
}
.pillar-benefits li {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-top:1px solid var(--color-line-on-dark);
  font:500 var(--text-xs)/1.4 var(--font-label);
  letter-spacing:1.2px;
  text-transform:uppercase
}
.pillar-benefits li::before {
  content:'';
  width:6px;
  height:6px;
  flex-shrink:0;
  background:var(--color-accent)
}
@media(max-width:900px) {
  .pillars-grid {
    grid-template-columns:minmax(0,1fr);
    padding-block:0;
    gap:20px
  }
  .pillar:nth-child(n) {
    --pillar-offset:0px;
    min-height:480px
  }
}
@media print,(prefers-reduced-motion:reduce) {
  .pillar-photo {
    transform:none;
    will-change:auto
  }
}

/* Ticker : attraper et faire glisser la bande (inertie gérée par forge.js). */
.service-scroll.is-ticking {
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none
}
.service-scroll.is-ticking.is-dragging {
  cursor:grabbing
}

/* Hero des pages internes : fond agrandi (marge en haut) et décalé par forge.js pour la parallaxe. */
.hero--compact .hero-background,
.hero--compact .hero-video {
  transform:translate3d(0,var(--hero-shift,0px),0) scale(1.2);
  transform-origin:50% 100%;
  will-change:transform
}
@media print,(prefers-reduced-motion:reduce) {
  .hero--compact .hero-background,
  .hero--compact .hero-video {
    transform:none;
    will-change:auto
  }
}

/* Grain naturel (bruit fin monochrome, façon Framer/Figma) : image statique, aucun coût de rendu.
   À poser sur une surface qui a déjà sa couleur de fond. */
.surface-grain {
  background-image:var(--forge-grain);
  background-size:256px 256px
}
.pillars {
  background-image:var(--forge-grain);
  background-size:256px 256px
}
.pillar {
  background-image:var(--forge-grain);
  background-size:256px 256px
}

/* Le club : liste des espaces ; une vignette suit le curseur (forge.js). Le plan fictif est retiré. */
.club::after {
  background:linear-gradient(90deg,var(--color-overlay-club),color-mix(in srgb,var(--color-overlay-club) 62%,transparent))
}
.club-copy {
  width:44%
}
.club-spaces {
  position:relative;
  z-index:1;
  width:46%;
  margin-left:auto;
  padding:48px 76px 48px 0
}
.club-space {
  display:grid;
  gap:4px;
  padding:14px 0;
  color:var(--color-surface);
  transition:opacity var(--learn-out) var(--learn-ease),transform var(--learn-out) var(--learn-ease)
}
.club-space-name {
  font-family:var(--font-heading);
  font-size:clamp(26px,2.6vw,40px);
  line-height:1.1;
  letter-spacing:-.4px;
  transition:color var(--learn-out) var(--learn-ease)
}
.club-space:focus-visible {
  outline-color:var(--color-brand);
  outline-offset:6px
}
.club-spaces:has(.club-space:is(:hover,:focus-visible)) .club-space:not(:is(:hover,:focus-visible)) {
  opacity:.38
}
.club-space:is(:hover,:focus-visible) {
  transform:translateX(10px)
}
.club-space:is(:hover,:focus-visible) .club-space-name {
  color:var(--color-brand)
}
@media(max-width:900px) {
  .club {
    flex-direction:column;
    align-items:stretch;
    padding:48px 24px;
    gap:32px
  }
  .club-copy,
  .club-spaces {
    width:100%;
    padding:0
  }
}
@media print,(prefers-reduced-motion:reduce) {
  .club-space:is(:hover,:focus-visible) {
    transform:none
  }
}
/* Notes de design (local uniquement) */

/* Le club : plan vectoriel interactif. Les pièces reliées à un espace s'allument au survol (plan ou liste) ; la vignette suit le curseur. */
.club-map {
  position:relative;
  z-index:1;
  width:52%;
  margin-left:auto;
  padding:40px 76px 40px 0;
  display:grid;
  gap:22px
}
.club-spaces .club-spaces {
  width:auto;
  margin:0;
  padding:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 32px
}
.club-space {
  padding:8px 0
}
.club-space-name {
  font-size:clamp(18px,1.5vw,22px)
}
.club-plan {
  width:100%;
  height:auto;
  max-height:50vh;
  color:color-mix(in srgb,var(--color-surface) 88%,transparent);
  overflow:visible
}
.plan-room {
  fill:transparent;
  transition:fill var(--learn-out) var(--learn-ease)
}
.plan-space {
  cursor:pointer
}
.plan-space .plan-room {
  fill:color-mix(in srgb,var(--color-brand) 10%,transparent)
}
.plan-space:hover .plan-room,
.plan-space.is-hot .plan-room {
  fill:color-mix(in srgb,var(--color-brand) 38%,transparent)
}
.club-space.is-hot {
  transform:translateX(10px)
}
.club-space.is-hot .club-space-name {
  color:var(--color-brand)
}
.club-spaces:has(.club-space.is-hot) .club-space:not(.is-hot) {
  opacity:.38
}
@media(max-width:900px) {
  .club-map {
    width:100%;
    padding:0
  }
  .club-plan {
    max-height:none
  }
}
@media print,(prefers-reduced-motion:reduce) {
  .plan-room {
    transition:none
  }
  .club-space.is-hot {
    transform:none
  }
}

/* Plan : trait fin et constant à l'écran, quelle que soit la taille d'affichage. */
.club-plan #walls path,
.club-plan #markers circle {
  vector-effect:non-scaling-stroke
}
.club-plan #walls,
.club-plan #markers {
  stroke-width:2.2px
}

/* Liste des espaces : sous le titre, au-dessus du bouton. */
.club-copy .club-spaces {
  width:auto;
  margin:0 0 28px;
  padding:0;
  grid-template-columns:minmax(0,1fr);
  gap:0
}
.club-copy .club-space {
  padding:7px 0
}
.club-copy .club-space-name {
  font-size:clamp(22px,2vw,30px)
}
.club-map {
  align-self:center
}

/* Titres de section : plus grands, interligne serré, alignés à gauche ou à droite en alternance (plus de surtitre systématique). */
.section-heading.start,
.section-heading.end {
  max-width:none
}
.section-heading.start {
  text-align:left
}
.section-heading.end {
  text-align:right
}
.section-heading.start>p:not(.eyebrow),
.section-heading.end>p:not(.eyebrow) {
  max-width:56ch
}
.section-heading.end>p:not(.eyebrow) {
  margin-left:auto
}
.section-heading h2 {
  margin-bottom:20px
}

/* Colonnes étroites (club) : même interligne et même casse, taille un cran en dessous pour garder des lignes lisibles. */
.club-copy h2 {
  font-size:clamp(30px,3.2vw,50px)
}

/* Titres d'articles et de lecture : restent en casse normale. */
.featured h2,
.space-copy h2 {
  text-transform:none;
  letter-spacing:-.02em
}
/* Le club : liste « finie » (nom, filet, flèche) et vignettes dédiées centrées sur leur pièce. */
.club-space {
  grid-template-columns:auto minmax(24px,1fr) auto;
  align-items:center;
  gap:18px
}
.club-spaces .club-space-name {
  font-family:var(--font-heading);
  font-size:clamp(16px,1.35vw,20px);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2
}
.club-space-line {
  height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--color-surface) 42%,transparent),color-mix(in srgb,var(--color-surface) 6%,transparent));
  transition:background var(--learn-out) var(--learn-ease)
}
.club-space-arrow {
  display:inline-flex;
  color:color-mix(in srgb,var(--color-surface) 55%,transparent);
  transition:color var(--learn-out) var(--learn-ease),transform var(--learn-out) var(--learn-ease)
}
.club-space:is(:hover,:focus-visible) .club-space-line,
.club-space.is-hot .club-space-line {
  background:linear-gradient(90deg,var(--color-brand),color-mix(in srgb,var(--color-brand) 16%,transparent))
}
.club-space:is(:hover,:focus-visible) .club-space-arrow,
.club-space.is-hot .club-space-arrow {
  color:var(--color-brand);
  transform:translateX(4px)
}
.club-plan-wrap {
  position:relative;
  width:min(100%,calc(50vh * 1144 / 975));
  margin-left:auto
}
.club-plan {
  display:block;
  max-height:none
}
.club-thumb {
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  z-index:3;
  width:clamp(104px,10vw,150px);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--color-forest);
  box-shadow:0 14px 34px rgba(14,17,8,.45);
  opacity:0;
  scale:.9;
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:opacity 200ms var(--dropdown-ease),scale 200ms var(--dropdown-ease)
}
.club-thumb.is-hot {
  opacity:1;
  scale:1;
  pointer-events:auto
}
.club-thumb img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.club-thumb-label {
  position:absolute;
  inset:auto 0 0;
  z-index:1;
  padding:22px 10px 9px;
  background:linear-gradient(transparent,rgba(14,17,8,.86));
  font:600 11px/1.25 var(--font-label);
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--color-surface)
}
@media(hover:none),(max-width:900px) {
  .club-thumb {
    display:none
  }
  .club-plan-wrap {
    width:100%
  }
}
@media print,(prefers-reduced-motion:reduce) {
  .club-thumb,
  .club-space-line,
  .club-space-arrow {
    transition:none
  }
}

/* V2 : pitch (vision + piliers), test en position forte, bande « Rejoindre le club ». */
.pillars>.section-heading {
  margin-bottom:56px
}
.pillars .section-heading>p:not(.eyebrow) {
  color:color-mix(in srgb,var(--color-surface) 82%,transparent)
}
.navigation nav>a.nav-test {
  text-decoration:underline;
  text-decoration-color:var(--color-brand);
  text-decoration-thickness:2px;
  text-underline-offset:8px
}

/* Sortie de section (hub) : un lien d'action, aligné comme le titre. */
.section-heading-cta {
  margin-top:24px
}
.section-heading.end .section-heading-cta .forge-link {
  margin-left:auto
}
.journal-all {
  margin-top:8px
}

/* Immersion : plus de cadres blancs. Le contenu repose directement sur le fond (écru ou vert sombre) ;
   le club passe en pleine largeur, sans bords arrondis. */
.services::before {
  content:none
}
.steps {
  background:transparent;
  border-radius:0;
  padding:0
}
.steps li {
  border-bottom:0;
  padding-block:20px;
  min-height:0
}
.journey-grid {
  gap:clamp(32px,5vw,80px);
  align-items:center
}
.club.wide {
  width:100%;
  margin-inline:0;
  border-radius:0
}
@media(min-width:901px) {
  .club-copy {
    padding-left:var(--content-inset)
  }
  .club-map {
    padding-right:var(--content-inset)
  }
}

.forge-button.large {
  min-height:76px;
  padding:26px 40px;
  font-size:var(--text-body);
  letter-spacing:.8px
}
/* Parcours : quatre étapes en rangée, directement sur le fond. */
.journey-grid {
  display:block
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,48px)
}
.steps li {
  display:grid;
  align-content:start;
  gap:14px;
  padding-block:0
}
@media(max-width:900px) {
  .steps {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:560px) {
  .steps {
    grid-template-columns:minmax(0,1fr)
  }
}

/* Bilan Forge : LE chapitre d'action. Bande claire chaude pleine largeur, contenu sur la grille (1400 px max), texte à gauche, radar à droite. */
.bilan {
  display:flex;
  align-items:center;
  min-height:min(var(--section-height),760px);
  padding-block:clamp(56px,7vw,110px);
  background-color:color-mix(in srgb,var(--color-brand) 13%,var(--color-surface));
  background-image:var(--forge-grain);
  background-size:256px 256px
}
.bilan-inner {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,6vw,96px);
  align-items:center
}
.bilan h2 {
  max-width:13em;
  font-size:clamp(32px,3.6vw,56px);
  margin-bottom:20px
}
.bilan-copy>p:not(.bilan-next) {
  max-width:46ch;
  margin-bottom:24px;
  color:var(--color-subtle)
}
.bilan-facts {
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin-bottom:36px
}
.bilan-facts li {
  font:600 var(--text-xs)/1.4 var(--font-label);
  letter-spacing:1.2px;
  text-transform:uppercase
}
.bilan-facts li+li::before {
  content:'·';
  margin-right:22px;
  color:var(--color-accent-strong)
}
.bilan-next {
  margin-top:20px;
  max-width:40ch;
  font-size:var(--text-ui);
  color:var(--color-muted)
}
@media(max-width:900px) {
  .bilan-inner {
    grid-template-columns:minmax(0,1fr)
  }
  .bilan .forge-button.large {
    width:100%
  }
}
/* Moins de dark : le pitch repose sur l'écru ; les titres et textes redeviennent sombres. */
.pillars {
  background-color:transparent;
  background-image:none;
  color:var(--color-text)
}
.pillars>.section-heading h2 {
  color:var(--color-text)
}
.pillars .section-heading>p:not(.eyebrow) {
  color:var(--color-muted)
}
/* Pré-footer d'Espaces : même bande claire chaude que le bilan. */
.spaces-next {
  background-color:color-mix(in srgb,var(--color-brand) 13%,var(--color-surface));
  background-image:var(--forge-grain);
  background-size:256px 256px;
  color:var(--color-text)
}
.spaces-next .section-heading h2 {
  color:var(--color-text)
}

/* Aperçu du résultat : radar à six axes, version claire. */
.bilan-radar {
  align-self:center;
  justify-self:center;
  width:min(100%,520px);
  margin:0
}
.bilan-radar svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  color:color-mix(in srgb,var(--color-text) 24%,transparent)
}
.radar-shape {
  fill:color-mix(in srgb,var(--color-brand) 34%,transparent);
  stroke:var(--color-accent-strong);
  stroke-width:2;
  stroke-linejoin:round;
  transform-origin:220px 220px
}
.radar-dot {
  fill:var(--color-accent-strong)
}
.radar-label {
  fill:var(--color-text);
  font:600 11px/1 var(--font-label);
  letter-spacing:1px;
  text-transform:uppercase
}
.bilan-radar figcaption {
  margin-top:8px;
  text-align:center;
  font:500 var(--text-2xs)/1.4 var(--font-label);
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--color-muted)
}
.radar-ready .radar-shape,
.radar-ready .radar-dot {
  opacity:0
}
.radar-ready .radar-shape {
  transform:scale(.25)
}
.radar-ready.is-drawn .radar-shape {
  opacity:1;
  transform:none;
  transition:opacity 600ms var(--dropdown-ease),transform 800ms var(--dropdown-ease)
}
.radar-ready.is-drawn .radar-dot {
  opacity:1;
  transition:opacity 500ms 500ms var(--dropdown-ease)
}
@media print,(prefers-reduced-motion:reduce) {
  .radar-ready .radar-shape,
  .radar-ready .radar-dot {
    opacity:1;
    transform:none;
    transition:none
  }
}

/* Icônes des cartes d'expérience : grandes, écru au repos, abricot et redessinées au survol (remplaçables par des exports Streamline du même nom). */
.service-icon {
  position:absolute;
  top:clamp(26px,2vw,40px);
  left:clamp(26px,2vw,40px);
  width:clamp(64px,5.4vw,88px);
  height:clamp(64px,5.4vw,88px);
  color:color-mix(in srgb,var(--color-surface) 88%,transparent);
  transition:color var(--learn-out) var(--learn-ease),transform var(--learn-out) var(--learn-ease)
}
.service-icon :is(path,circle,line,polyline,polygon,rect,ellipse) {
  stroke-dasharray:1;
  stroke-dashoffset:0
}
@keyframes forge-icon-draw {
  from {
    stroke-dashoffset:1
  }
  to {
    stroke-dashoffset:0
  }
}
@media(hover:hover) and (pointer:fine) {
  .service-card:hover .service-icon {
    color:var(--color-brand);
    transform:translateY(-4px)
  }
  .service-card:hover .service-icon :is(path,circle,line,polyline,polygon,rect,ellipse) {
    animation:forge-icon-draw 1000ms var(--dropdown-ease) both
  }
  .service-card:hover .service-icon :nth-child(2) { animation-delay:90ms }
  .service-card:hover .service-icon :nth-child(3) { animation-delay:180ms }
  .service-card:hover .service-icon :nth-child(4) { animation-delay:270ms }
  .service-card:hover .service-icon :nth-child(5) { animation-delay:360ms }
  .service-card:hover .service-icon :nth-child(n+6) { animation-delay:450ms }
}
.service-card:focus-visible .service-icon {
  color:var(--color-brand)
}
.service-card:focus-visible .service-icon :is(path,circle,line,polyline,polygon,rect,ellipse) {
  animation:forge-icon-draw 1000ms var(--dropdown-ease) both
}
@media print,(prefers-reduced-motion:reduce) {
  .service-icon,
  .service-icon * {
    transition:none;
    animation:none!important
  }
}
.service-card {
  padding-top:calc(clamp(26px,2vw,40px) + clamp(64px,5.4vw,88px) + 22px)
}

/* Sans page Formules, la carte d'expérience n'est pas un lien : curseur hérité (grab du ticker), pas de main. */
.service-card:not(a) {
  cursor:inherit
}

/* Piliers : plus de carte dans la carte. Un dégradé sombre en pied de photo porte le texte. */
.pillar::after {
  content:'';
  position:absolute;
  z-index:0;
  inset:auto 0 0;
  height:78%;
  background:linear-gradient(to top,rgba(14,17,8,.95) 0%,rgba(14,17,8,.86) 40%,rgba(14,17,8,.55) 70%,transparent 100%);
  pointer-events:none
}
.pillar-copy {
  position:relative;
  z-index:1;
  margin:0;
  padding:clamp(24px,2.4vw,40px);
  color:var(--color-surface)
}
@media print {
  .pillar::after {
    display:none
  }
}

/* Journal puis footer : le vide sous les articles venait de deux marges qui s'additionnaient (bas du journal + haut du footer). */
.journal {
  padding-bottom:0
}

/* Trait fin et régulier quelle que soit la grille de l'icône (Streamline : 24, provisoires : 48). */
.service-icon :is(path,circle,line,polyline,polygon,rect,ellipse) {
  stroke-width:.85
}

/* Footer : plus d'air sous le journal. */
.journal {
  padding-bottom:48px
}
@media(max-width:700px) {
  .journal {
    padding-bottom:32px
  }
}

/* Footer : marge au dessus de la zone footer (le tracé suit, il est positionné depuis le haut du footer). */
.footer {
  margin-top:96px
}
@media(max-width:700px) {
  .footer {
    margin-top:56px
  }
}

/* Titre de section centré (expériences) : texte, action et bloc de paragraphe sur l'axe central. */
.section-heading.center {
  max-width:none;
  text-align:center
}
.section-heading.center>p:not(.eyebrow) {
  max-width:56ch;
  margin-left:auto;
  margin-right:auto
}
.section-heading.center .section-heading-cta {
  display:flex;
  justify-content:center
}
.section-heading.center .section-heading-cta .forge-link {
  margin-left:0
}

/* Footer : interligne du titre resserré (deux lignes). */
.footer-band h2 {
  line-height:1.05
}

/* Titres de cartes expériences : la taille suit la largeur de la carte pour que le mot le plus long (Accompagnement, 9,6 em) tienne toujours sur une ligne, sans lettre isolée. */
.service-copy {
  container-type:inline-size
}
.service-copy h3 {
  font-size:min(clamp(24px,2.1vw,34px),10cqi)
}

/* Accueil de la page bilan : un seul écran, en-tête minimal (logo et retour au site). */
.forge-header--focus .navigation {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.focus-exit {
  font:500 var(--text-xs)/1.4 var(--font-label);
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--color-text)
}
.focus-exit:is(:hover,:focus-visible) {
  text-decoration:underline
}
.bilan--focus {
  min-height:100dvh;
  padding-top:calc(var(--header-height) + 24px)
}
.bilan--focus h1 {
  max-width:13em;
  font-size:clamp(36px,4.4vw,68px);
  line-height:1.05;
  margin-bottom:24px
}

/* Hero sans image (Formules) : fond kaki clair à grain, texte foncé, hauteur au contenu. */
.hero--plain {
  min-height:0;
  padding-block:calc(var(--header-height) + 56px) clamp(48px,6vw,88px);
  color:var(--color-text);
  background-color:color-mix(in srgb,var(--color-forest) 9%,var(--color-surface));
  background-image:var(--forge-grain);
  background-size:256px 256px
}
.hero--plain::after {
  display:none
}

/* Accueil du bilan : photo en portrait dans la colonne de droite, cadrée sur le visage et le téléphone. */
.bilan-photo {
  position:relative;
  width:100%;
  max-width:560px;
  margin-inline:auto;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--color-forest)
}
.bilan-photo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:48% 30%
}
@media(max-width:900px) {
  .bilan-photo {
    aspect-ratio:4/3;
    max-width:none
  }
  .bilan-photo img {
    object-position:50% 25%
  }
}

/* Accueil du bilan : la photo et l'aperçu des résultats. Le radar flotte, décalé hors de l'angle bas gauche de la photo : une petite part le recouvre, le reste dépasse. */
.bilan-visual {
  position:relative;
  width:100%;
  max-width:560px;
  margin-inline:auto
}
.bilan-visual .bilan-photo {
  max-width:none;
  max-height:min(700px,calc(100dvh - var(--header-height) - 150px));
  margin-inline:0
}
.bilan-visual .bilan-radar {
  position:absolute;
  left:-9%;
  bottom:-8%;
  width:44%;
  padding:12px 22px 6px 26px;
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--color-surface) 96%,transparent);
  box-shadow:0 18px 40px -22px rgba(25,28,21,.35)
}
.bilan-visual .bilan-radar figcaption {
  display:none
}
@media(max-width:900px) {
  .bilan-visual {
    max-width:440px;
    margin-bottom:40px
  }
  .bilan-visual .bilan-photo {
    max-height:none;
    aspect-ratio:4/5
  }
  .bilan-visual .bilan-radar {
    left:-3%;
    width:54%
  }
}

/* Accueil : le hero (photo et vidéo) glisse vers la gauche. L'échelle (1,16) couvre le décalage (7 %) : jamais de vide à droite. */
@media(min-width:901px) {
  .hero:not(.hero--compact) .hero-background,
  .hero:not(.hero--compact) .hero-video {
    transform:translateX(-7%) scale(1.16);
    transform-origin:50% 50%
  }
}

/* Promesse : les quatre motivations (titres des cartes de la vision) en rangée, filet fin au dessus de chacune. */
.pitch-motives {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
  margin-block:clamp(8px,2vw,24px) clamp(40px,5vw,72px)
}
.pitch-motives li {
  padding-top:18px;
  border-top:1px solid var(--color-text);
  font:500 clamp(18px,1.6vw,24px)/1.25 var(--font-heading);
  letter-spacing:-.2px;
  text-wrap:balance
}
@media(max-width:900px) {
  .pitch-motives {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:480px) {
  .pitch-motives {
    grid-template-columns:minmax(0,1fr)
  }
}

/* Groupe insécable posé par forge_typo() : petit mot + mot suivant restent ensemble. */
.nw {
  white-space:nowrap
}

/* Zones tactiles : au moins 44 px de haut sur écran tactile ou étroit. */
@media(max-width:1000px) {
  .club-space {
    min-height:44px
  }
}

/* Menu mobile et tablette portrait : bouton + panneau plein écran jusqu'à 800 px (la barre de navigation complète ne tient pas en dessous). */
@media(max-width:800px) {
  .menu-toggle {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:14px;
    min-height:44px;
    color:inherit;
    background:transparent;
    border:1px solid currentColor;
    border-radius:var(--radius);
    padding:10px 14px;
    font:400 var(--text-sm)/20px var(--font-label);
    transition:color 300ms var(--dropdown-ease)
  }
  .menu-toggle:focus-visible {
    outline:2px solid var(--color-brand);
    outline-offset:3px
  }
  /* Menu ouvert : le bouton et le logo passent en clair sur le fond sombre du panneau, quel que soit le ton du header. */
  .menu-toggle[aria-expanded=true] {
    color:var(--color-surface)
  }
  .forge-header:has(.menu-toggle[aria-expanded=true]) .navigation>a>img {
    filter:none
  }
  .navigation>a {
    position:relative;
    z-index:2
  }
  .menu-toggle span {
    font-size:var(--text-h5)
  }
  /* Menu ouvert : panneau plein écran (dvh : suit les barres du navigateur mobile), liens grands, bouton d'action en bas. */
  .navigation nav {
    color:var(--color-surface);
    display:flex;
    position:fixed;
    inset:0;
    z-index:1;
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:calc(var(--header-height) + 16px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
    background:var(--color-forest);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:transform var(--dropdown-open-dur) var(--dropdown-ease),opacity var(--dropdown-open-dur) var(--dropdown-ease),visibility var(--dropdown-close-dur)
  }
  .navigation nav.open {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none
  }
  html.menu-open {
    overflow:hidden
  }
  .navigation nav>a:not(.forge-button) {
    display:flex;
    align-items:center;
    min-height:56px;
    padding-block:8px;
    font:400 clamp(26px,8vw,38px)/1.1 var(--font-heading);
    letter-spacing:-.01em;
    border-bottom:1px solid var(--color-line-on-dark)
  }
  .navigation nav>a.nav-test {
    border-bottom:1px solid var(--color-line-on-dark)
  }
  .navigation .compact {
    font-size:var(--text-label);
    padding:18px 16px;
    align-self:stretch;
    width:100%;
    margin-top:auto
  }
  .navigation nav>a:not(.forge-button):first-child {
    border-top:1px solid var(--color-line-on-dark)
  }
}
/* Newsletter du footer (components/forge-newsletter.php) */
.footer-newsletter {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:48px;
  align-items:start;
  border-bottom:1px solid var(--color-paper);
  padding-bottom:36px;
  margin-bottom:64px
}
.footer-newsletter h3 {
  font:600 var(--text-sm)/1.4 var(--font-label);
  text-transform:uppercase;
  margin-bottom:12px
}
.footer-newsletter-copy p,.newsletter-note {
  font:400 var(--text-ui)/22px var(--font-label);
  color:var(--color-text-soft)
}
.newsletter-field {
  display:flex;
  gap:12px
}
.newsletter-field label,.newsletter-trap {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.newsletter-field input {
  flex:1;
  min-width:0;
  min-height:66px;
  padding:0 20px;
  border:1px solid var(--color-subtle);
  border-radius:var(--radius);
  background:var(--color-paper);
  font:400 var(--text-body)/1.4 var(--font-label);
  color:var(--color-text)
}
.newsletter-field input:focus-visible {
  outline:2px solid var(--color-accent-strong);
  outline-offset:2px
}
.newsletter-field input[aria-invalid="true"] {
  border-color:var(--color-accent-strong)
}
.newsletter-field .forge-button {
  flex-shrink:0;
  cursor:pointer;
  gap:12px
}
.newsletter-status {
  margin-top:12px;
  font:500 var(--text-ui)/22px var(--font-label);
  color:var(--color-text)
}
.newsletter-status.is-error {
  color:var(--color-accent-strong)
}
.newsletter-note {
  margin-top:12px;
  font-size:var(--text-sm);
  line-height:18px
}
.newsletter-note a {
  text-decoration:underline
}
@media(max-width:700px) {
  .footer-newsletter {
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:40px
  }
  .newsletter-field {
    flex-direction:column
  }
  .newsletter-field .forge-button {
    width:100%
  }
}