/* ==========================================================
   Le Vestiaire — design system (neo-botanical dark & light)
   ========================================================== */
:root {
  --forest: #12673E;
  --moss: #1E4A35;
  --sage: #56645D;
  --fern: #C0CDC6;
  --sprout: #42B07C;
  --verdant: #12673E;
  --wash: #42B07C;
  --mist: #D7DEDA;
  --onyx: #26332C;
  --white: #ffffff;
  --paper: #EAEAE9; /* fond clair de la charte */
  --bone: #E1E4E1;
  --carbon: #0B1F16;

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;

  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--onyx);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
sup { font-size: .6em; line-height: 0; }
:focus-visible { outline: 2px solid var(--sprout); outline-offset: 3px; border-radius: 8px; }

.container { width: 100%; max-width: calc(var(--max) + 48px); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.green { color: var(--sprout); font-style: normal; }
.serif { font-family: var(--font-serif); letter-spacing: 0.01em; }

/* ---------- Surfaces ---------- */
.dark { background: var(--forest); color: var(--white); }
.light { background: var(--paper); }
.bone { background: var(--bone); }
.section { position: relative; padding: 112px 0; overflow: hidden; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .9;
  letter-spacing: -0.014em;
}
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: .96;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.lead { font-size: 16px; line-height: 1.5; letter-spacing: -0.021em; color: var(--fern); max-width: 600px; }
.light .lead, .bone .lead { color: var(--sage); }
.big { font-size: 20px; line-height: 1.43; letter-spacing: -0.015em; }
h3 { font-size: 20px; line-height: 1.43; letter-spacing: -0.015em; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.021em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.028em;
  padding: 4px 16px;
  border-radius: 40px;
  border: 1px solid var(--mist);
  color: var(--moss);
  background: var(--wash);
}
.dark .eyebrow { background: transparent; border-color: var(--sage); color: var(--fern); }

.head { display: grid; gap: 24px; margin-bottom: 64px; max-width: 800px; justify-items: start; }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- Highlights (surlignage) ---------- */
.hl {
  background: linear-gradient(var(--sprout), var(--sprout)) no-repeat 0 50% / 0% 100%;
  padding: 0 .16em;
  margin: 0 -.08em;
  border-radius: 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1s var(--ease) .25s;
}
.hl--line {
  background-position: 0 100%;
  background-size: 0% 8px;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.in .hl, .hl.in { background-size: 100% 100%; }
.in .hl--line, .hl--line.in { background-size: 100% 8px; }
html:not(.js) .hl { background-size: 100% 100%; }
html:not(.js) .hl--line { background-size: 100% 8px; }

/* hand-drawn stroke under green words on dark */
.draw { position: relative; white-space: nowrap; }
.draw::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  height: .09em;
  border-radius: 99px;
  background: var(--sprout);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease) .5s;
}
.in .draw::after, .draw.in::after, html:not(.js) .draw::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 16px/1.5 var(--font-ui);
  letter-spacing: -0.012em;
  padding: 12px 24px;
  border-radius: 28px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--sm { font-size: 14px; padding: 8px 16px; }
.btn--full { width: 100%; }
.btn--primary { background: var(--sprout); color: var(--carbon); }
.btn--primary:hover { background: #53BE8B; }
.btn--ghost, .btn--outline { border-color: var(--white); color: var(--white); }
.btn--ghost:hover, .btn--outline:hover { background: var(--white); color: var(--forest); }
.btn--dark { background: var(--forest); color: var(--white); }
.btn--dark:hover { background: var(--moss); }
.btn--dark-outline { border-color: var(--onyx); color: var(--onyx); }
.btn--dark-outline:hover { background: var(--onyx); color: var(--white); }

.badge, .tag {
  display: inline-block;
  font-size: 12px; font-weight: 500; line-height: 1.5;
  padding: 4px 12px; border-radius: 40px;
  background: var(--wash); color: var(--moss);
  white-space: nowrap;
}
.tag { background: var(--sprout); color: var(--onyx); }
.badge--serif { font-family: var(--font-serif); font-size: 16px; letter-spacing: .028em; font-weight: 400; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 50;
  top: 24px; left: 50%;
  width: min(var(--max), calc(100% - 32px));
  transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 8px 8px 8px 24px;
  background: rgba(18, 103, 62, .9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
  transition: top .4s var(--ease), width .4s var(--ease), background-color .3s;
}
.nav.is-scrolled { top: 12px; width: min(1104px, calc(100% - 32px)); }
.nav__logo { justify-self: start; isolation: isolate; display: block; padding: 8px 0; }
.nav__logo img, .footer__logo { filter: invert(1); mix-blend-mode: screen; }
.nav__logo img { width: 120px; }
.nav__links { position: relative; display: flex; align-items: center; gap: 0; }
.nav__links a {
  position: relative; z-index: 1;
  font-size: 14px; font-weight: 500; letter-spacing: -0.012em; color: var(--fern);
  padding: 8px 16px; border-radius: 28px; white-space: nowrap;
  transition: color .25s;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--white); }
.nav__ind {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%;
  width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: 28px; background: var(--moss);
  opacity: 0; transition: transform .4s var(--ease), width .4s var(--ease), opacity .25s;
}
.nav__links.has-ind .nav__ind { opacity: 1; }
.nav__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav__cta { padding: 8px 20px; }
.nav__burger { display: none; position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--moss); cursor: pointer; padding: 0; }
.nav__burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--white); transition: transform .35s var(--ease), opacity .2s; }
.nav__burger span:nth-child(1) { top: 14px; }
.nav__burger span:nth-child(2) { top: 19px; }
.nav__burger span:nth-child(3) { top: 24px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* mobile panel */
.nav__panel { display: none; }
@media (max-width: 1120px) {
  .nav { grid-template-columns: 1fr auto; padding-left: 20px; }
  .nav__links { display: none; }
  .nav__panel {
    display: grid; grid-column: 1 / -1; gap: 24px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .5s var(--ease), opacity .3s, padding .4s var(--ease);
  }
  .nav.is-open { border-radius: 24px; background: rgba(18, 103, 62, .97); }
  .nav.is-open .nav__panel { max-height: calc(100vh - 120px); overflow-y: auto; opacity: 1; padding: 8px 12px 16px 0; }
  .nav__panel-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .nav__panel-links a {
    display: flex; align-items: baseline; gap: 12px;
    font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.2; letter-spacing: -0.014em; color: var(--white);
    padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
    opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease), color .2s;
  }
  .nav__panel-links a i { font-family: var(--font-serif); font-style: normal; font-weight: 400; font-size: 14px; color: var(--sprout); }
  .nav__panel-links a:hover, .nav__panel-links a.is-active { color: var(--sprout); }
  .nav.is-open .nav__panel-links a { opacity: 1; transform: none; }
  .nav.is-open .nav__panel-links a:nth-child(2) { transition-delay: .04s; }
  .nav.is-open .nav__panel-links a:nth-child(3) { transition-delay: .08s; }
  .nav.is-open .nav__panel-links a:nth-child(4) { transition-delay: .12s; }
  .nav.is-open .nav__panel-links a:nth-child(5) { transition-delay: .16s; }
  .nav.is-open .nav__panel-links a:nth-child(6) { transition-delay: .2s; }
  .nav.is-open .nav__panel-links a:nth-child(7) { transition-delay: .24s; }
  .nav.is-open .nav__panel-links a:nth-child(8) { transition-delay: .28s; }
  .nav__panel-foot { display: grid; gap: 16px; }
  .nav__panel-foot p { font-size: 13px; color: var(--fern); text-align: center; }
  .nav__panel-foot p a:hover { color: var(--sprout); }
}
@media (max-width: 600px) {
  .nav { padding-left: 16px; gap: 8px; }
  .nav__logo img { width: 100px; }
  .nav__cta { display: none; }
  .nav__panel-links { grid-template-columns: 1fr; }
  .nav__panel-links a { font-size: 24px; padding: 10px 0; }
}
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; padding: 168px 0 0; overflow: hidden; display: flex; flex-direction: column; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; flex: 1; position: relative; z-index: 2; }
.hero__copy { display: grid; gap: 32px; justify-items: start; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.hero__title .line > span { display: inline-block; }
.js .hero__title .line > span { transform: translateY(115%); animation: rise 1s var(--ease) forwards; }
.js .hero__title .line:nth-child(2) > span { animation-delay: .12s; }
.js .hero__title .line:nth-child(3) > span { animation-delay: .24s; }
.hero__title .draw::after { transition-delay: 1.1s; }
@keyframes rise { to { transform: none; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; padding: 4px 16px;
  border: 1px solid var(--sage); border-radius: 9999px; color: var(--white);
  transition: border-color .25s;
}
.pill svg { color: var(--sage); transition: transform .25s var(--ease); }
.pill:hover { border-color: var(--sprout); }
.pill:hover svg { transform: translateX(3px); color: var(--sprout); }

/* orbs + grain */
.orb { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(8px); }
.orb--1 { width: 640px; height: 640px; right: -160px; top: -80px; background: radial-gradient(circle at 35% 35%, #2C6A4B 0%, var(--moss) 40%, #000 100%); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.orb--2 { width: 400px; height: 400px; left: -200px; bottom: 80px; background: linear-gradient(140deg, #000, var(--moss)); opacity: .45; animation: drift 22s ease-in-out infinite alternate-reverse; }
.orb--3 { width: 560px; height: 560px; right: -200px; bottom: -240px; background: linear-gradient(140deg, var(--moss), #000); opacity: .5; animation: drift 20s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-48px, 40px, 0) scale(1.08); } }
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* mockup stack */
.stack { position: relative; height: 480px; }
.mock {
  position: absolute;
  background: var(--paper); color: var(--onyx);
  border-radius: 24px; padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .2);
  transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(var(--r));
  transition: transform .5s var(--ease);
  will-change: transform;
}
.mock__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.mock__title { font-weight: 600; font-size: 16px; letter-spacing: -0.021em; }
.mock__sub { font-size: 12px; color: var(--sage); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .143em; }
.mock--back { --r: 7deg; width: 280px; right: 0; top: 0; background: var(--bone); animation: float 9s ease-in-out infinite; }
.mock--mid { --r: -8deg; width: 272px; left: 0; bottom: 8px; animation: float 8s ease-in-out -3s infinite; }
.mock--front { --r: -3deg; width: 344px; left: 50%; top: 96px; margin-left: -150px; animation: float 7s ease-in-out -1s infinite; }
@keyframes float { 50% { translate: 0 -12px; } }
.checks li { font-size: 14px; padding: 8px 0 8px 28px; position: relative; border-top: 1px solid var(--mist); }
.checks li::before { content: ''; position: absolute; left: 0; top: 11px; width: 16px; height: 16px; border-radius: 50%; background: var(--sprout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.500 8.200l2.300 2.300 4.700-4.800' fill='none' stroke='%230B1F16' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px; }
.mock__quote { font-family: var(--font-serif); font-size: 20px; line-height: 1.25; margin-bottom: 16px; }
.dots { display: flex; gap: 8px; }
.dots i { width: 24px; height: 8px; border-radius: 8px; background: var(--sprout); }
.dots i.off { background: var(--mist); }
.skill { margin-bottom: 16px; }
.skill div { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; gap: 8px; }
.skill div span:last-child { color: var(--verdant); font-weight: 500; text-align: right; }
.skill b { display: block; height: 8px; border-radius: 8px; background: var(--bone); position: relative; overflow: hidden; }
.skill b::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: 8px; background: var(--sprout); transform-origin: left; animation: grow 1.4s var(--ease) 1s both; }
@keyframes grow { from { transform: scaleX(0); } }
.mock__foot { border-top: 1px solid var(--mist); padding-top: 16px; font-size: 18px; color: var(--moss); }

/* trust */
.trust { position: relative; z-index: 2; padding: 64px 0 48px; }
.trust__cap { text-align: center; font-size: 14px; color: var(--fern); margin-bottom: 24px; padding: 0 24px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 32px; width: max-content; animation: scroll 36s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.014em; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.marquee__track i { width: 8px; height: 8px; border-radius: 50%; background: var(--sprout); flex: none; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Vision ---------- */
.vision { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; }
.vision__side { display: grid; gap: 32px; justify-items: start; }
.vision__text { display: grid; gap: 24px; justify-items: start; }
.vision__text p:not(.big) { font-size: 16px; letter-spacing: -0.021em; }
.facts { display: grid; gap: 0; width: 100%; }
.facts div { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--mist); }
.facts strong { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -0.031em; min-width: 104px; color: var(--forest); }
.facts span { font-size: 14px; color: var(--sage); }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  position: relative;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  padding: 32px;
  border: 1px solid var(--onyx);
  border-radius: 24px;
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
  transition: border-color .35s, transform .35s var(--ease), background-color .35s, opacity .8s var(--ease);
}
.card::before {
  content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  left: var(--mx, 50%); top: var(--my, 50%); translate: -50% -50%;
  background: radial-gradient(circle, rgba(66, 176, 124, .16), transparent 65%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.card:hover { border-color: var(--sage); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }
.card.is-match { border-color: var(--sprout); background: rgba(66, 176, 124, .06); }
.card__num { font-family: var(--font-serif); font-size: 18px; letter-spacing: .063em; color: var(--sprout); }
.card p { color: var(--fern); flex: 1; }
.card__link { font-size: 14px; font-weight: 500; color: var(--white); display: inline-flex; gap: 8px; border-bottom: 1px solid var(--sage); padding-bottom: 3px; transition: border-color .25s, color .25s; }
.card__link span { transition: transform .25s var(--ease); }
.card__link:hover { color: var(--sprout); border-color: var(--sprout); }
.card__link:hover span { transform: translateX(4px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--moss); color: var(--fern); }
.chips--light li { border-color: var(--mist); color: var(--moss); background: var(--paper); font-size: 13px; }

.card--test { background: var(--paper); color: var(--onyx); border-color: var(--white); }
.card--test:hover { border-color: var(--white); }
.card--test::before { display: none; }
.card--test h3 { font-size: 20px; line-height: 1.43; }
.quiz__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz__opts button {
  font: 500 13px/1.5 var(--font-ui); letter-spacing: -0.003em;
  padding: 8px 16px; border-radius: 28px;
  border: 1px solid var(--mist); background: var(--bone); color: var(--onyx);
  cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.quiz__opts button:hover { border-color: var(--onyx); transform: translateY(-2px); }
.quiz__opts button.is-on { background: var(--sprout); border-color: var(--sprout); }
.quiz__res { font-size: 14px; color: var(--moss) !important; min-height: 24px; flex: none !important; }
.quiz__res a { border-bottom: 1px solid var(--verdant); font-weight: 500; }

/* ---------- Méthode ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 80px; }
.pillar { background: var(--bone); border-radius: 24px; padding: 40px; display: grid; gap: 16px; align-content: start; transition: transform .35s var(--ease), opacity .8s var(--ease); }
.pillar:hover { transform: translateY(-4px); }
.pillar svg { width: 40px; height: 40px; fill: none; stroke: var(--verdant); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pillar p { color: var(--sage); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.steps::before { content: ''; position: absolute; top: 24px; left: 24px; right: 24px; height: 1px; background: var(--mist); }
.steps li { display: grid; gap: 24px; position: relative; }
.step__n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: var(--sprout); font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.steps p { color: var(--sage); margin-top: 8px; }

/* ---------- Valeurs ---------- */
.values { display: grid; }
.value { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 40px 0; border-top: 1px solid var(--onyx); }
.value:last-child { border-bottom: 1px solid var(--onyx); }
.value__word { transition: color .35s, transform .5s var(--ease); display: inline-block; font-size: clamp(34px, 5vw, 56px); }
.value:hover .value__word { color: var(--sprout); transform: translateX(16px); }
.value p { font-size: 16px; color: var(--fern); max-width: 400px; }

/* ---------- Élisa ---------- */
.elisa { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.elisa__card { position: sticky; top: 128px; background: var(--bone); border-radius: 24px; padding: 40px; display: grid; gap: 24px; }
.elisa__mono { width: 96px; height: 96px; border-radius: 50%; background: var(--forest); color: var(--sprout); display: grid; place-items: center; font-size: 56px; line-height: 1; }
.elisa__card .serif { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--forest); }
.elisa__text { display: grid; gap: 24px; justify-items: start; }
.elisa__text p:not(.big) { font-size: 16px; letter-spacing: -0.021em; }

/* ---------- Avis ---------- */
.reviews { overflow: hidden; margin-bottom: 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reviews__track { display: flex; gap: 16px; width: max-content; animation: scroll 70s linear infinite; padding: 8px 0; }
.reviews:hover .reviews__track { animation-play-state: paused; }
.review { width: 360px; flex: none; background: var(--paper); border: 1px solid var(--mist); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.stars { color: var(--verdant); letter-spacing: 3px; font-size: 14px; }
.review blockquote { font-size: 14px; flex: 1; }
.review figcaption { font-family: var(--font-serif); font-size: 18px; letter-spacing: .028em; color: var(--moss); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.faq__side { position: sticky; top: 128px; display: grid; gap: 24px; justify-items: start; }
.faq__side p { color: var(--sage); font-size: 18px; }
.faq__list details { border-top: 1px solid var(--mist); }
.faq__list details:last-child { border-bottom: 1px solid var(--mist); }
.faq__list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0;
  font-size: 18px; font-weight: 600; line-height: 1.43; letter-spacing: -0.015em;
  transition: color .2s;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--mist);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 10v12M10 16h12' stroke='%230B1F16' stroke-width='1.500' stroke-linecap='round'/%3E%3C/svg%3E") center/32px;
  transition: transform .35s var(--ease), background-color .25s, border-color .25s;
}
.faq__list summary:hover { color: var(--verdant); }
.faq__list details[open] summary::after { transform: rotate(45deg); background-color: var(--sprout); border-color: var(--sprout); }
.faq__list details p { padding: 0 56px 24px 0; color: var(--sage); animation: fadeDown .4s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 2; }
.contact__copy { display: grid; gap: 32px; justify-items: start; }
.contact__ways { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center; }
.way { display: grid; font-size: 16px; font-weight: 500; transition: color .2s; }
.way span { font-size: 12px; font-weight: 400; color: var(--sage); }
.way:hover { color: var(--sprout); }
.form { display: grid; gap: 16px; padding: 40px; border: 1px solid var(--onyx); border-radius: 24px; background: rgba(18, 103, 62, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 8px; font-size: 13px; font-weight: 500; color: var(--fern); }
.form input, .form select, .form textarea {
  width: 100%;
  font: 400 16px/1.5 var(--font-ui); color: var(--white);
  background: var(--forest);
  border: 1px solid var(--moss); border-radius: 24px;
  padding: 12px 16px;
  transition: border-color .2s;
  resize: vertical;
}
.form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23b7bda5' stroke-width='1.500' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; }
.form ::placeholder { color: var(--sage); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--sprout); }
.form__note { font-size: 12px; color: var(--sage); }

/* ---------- Footer ---------- */
.footer { padding: 64px 0 32px; border-top: 1px solid var(--onyx); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.footer__logo { width: 200px; margin-bottom: 16px; }
.footer p { color: var(--sage); max-width: 320px; font-size: 14px; }
.footer h5 { font-family: var(--font-serif); font-weight: 400; font-size: 18px; letter-spacing: .028em; color: var(--fern); margin-bottom: 16px; }
.footer nav a { display: block; font-size: 14px; color: var(--white); padding: 4px 0; transition: color .2s; }
.footer nav a:hover { color: var(--sprout); }
.footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--onyx); font-size: 12px; color: var(--sage); }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .stack.reveal { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
}
@media (max-width: 900px) {
  .section { padding: 80px 0; }
  .nav__burger { display: block; }
  .hero { padding-top: 136px; }
  .hero__grid, .vision, .elisa, .faq, .contact { grid-template-columns: 1fr; gap: 48px; }
  .vision__side, .elisa__card, .faq__side { position: static; }
  .stack { height: 440px; max-width: 480px; width: 100%; margin: 0 auto; }
  .services, .pillars { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { top: 24px; bottom: 24px; left: 24px; right: auto; width: 1px; height: auto; }
  .steps li { grid-template-columns: 48px 1fr; }
  .value { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .services, .pillars, .form__row { grid-template-columns: 1fr; }
  .big { font-size: 20px; line-height: 1.43; }
  .stack { height: 400px; }
  .mock--front { width: 288px; margin-left: -136px; top: 88px; }
  .mock--back { width: 232px; }
  .mock--mid { width: 232px; bottom: 0; }
  .review { width: 296px; padding: 24px; }
  .form, .elisa__card, .pillar { padding: 24px; }
  .faq__list summary { font-size: 18px; }
  .faq__list details p { padding-right: 0; }
  .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal, .js .hero__title .line > span { opacity: 1; transform: none; }
  .hl { background-size: 100% 100%; }
  .hl--line { background-size: 100% 8px; }
  .draw::after { transform: scaleX(1); }
  .reviews { overflow-x: auto; }
}

/* ---------- Photos ---------- */
.hero__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 103, 62, .94) 0%, rgba(18, 103, 62, .78) 45%, rgba(18, 103, 62, .55) 100%),
    linear-gradient(180deg, rgba(18, 103, 62, .2) 55%, var(--forest) 100%),
    url("assets/banniere-materiel.jpg?v=58") center 40% / cover no-repeat;
  animation: zoom 24s ease-out both;
}
@keyframes zoom { from { transform: scale(1.08); } }
.hero .orb { opacity: .3; }
.photo, .banner img, .elisa__photo, .card__img { width: 100%; object-fit: cover; filter: grayscale(1); }
.photo { aspect-ratio: 4 / 3; border-radius: 24px; object-position: center 30%; }
.card__img { aspect-ratio: 16 / 9; border-radius: 16px; opacity: .85; transition: opacity .35s, transform .6s var(--ease); }
.card:hover .card__img { opacity: 1; transform: scale(1.03); }
.card[data-service="mental"] .card__img { object-position: center 35%; }
.banner { margin-bottom: 80px; border-radius: 24px; overflow: hidden; }
.banner img { aspect-ratio: 5 / 2; object-position: center 30%; }
.elisa__photo { aspect-ratio: 1; border-radius: 16px; }
@media (max-width: 600px) {
  .hero__bg { background-position: center, center, 60% center; }
  .banner { margin-bottom: 48px; }
  .banner img { aspect-ratio: 16 / 9; }
}
@media (max-width: 400px) {
  .pill svg { display: none; }
}

/* ---------- Hero portrait ---------- */
.portrait { position: relative; justify-self: end; width: min(100%, 440px); transform: rotate(3deg); }
.js .portrait.reveal { transform: rotate(0deg) translateY(24px); }
.js .portrait.reveal.in { transform: rotate(3deg); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; filter: grayscale(1); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .2); }
.portrait figcaption { position: absolute; left: -16px; bottom: 32px; transform: rotate(-6deg); background: var(--sprout); color: var(--carbon); font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 28px; }
.portrait figcaption .serif { font-size: 18px; font-weight: 400; }
@media (max-width: 900px) { .portrait { justify-self: center; width: min(100%, 360px); } .portrait figcaption { left: 8px; } }

/* ==========================================================
   v3 — offres, publics, zone, logos, formulaire
   ========================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-row--center { justify-content: center; }

/* Logos */
.logos-band { padding: 80px 0 64px; overflow: hidden; }
.logos-head { margin-bottom: 40px; }
.logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: scroll 40s linear infinite; padding: 8px 32px; }
.logos:hover .logos__track { animation-play-state: paused; }
.logos__track li { flex: none; height: 112px; display: grid; place-items: center; }
.logos__track img { max-height: 112px; max-width: 200px; width: auto; object-fit: contain; transition: filter .35s, opacity .35s, transform .35s var(--ease); }
.logos__track li:hover img { transform: scale(1.08); }

/* Offres */
.services { grid-template-columns: repeat(3, 1fr); }
.card__cta { margin-top: 8px; }
.card--feature { border-color: var(--moss); }
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.format { border: 1px solid var(--moss); border-radius: 16px; padding: 16px; display: grid; gap: 0; transition: border-color .3s, background-color .3s; }
.format:hover { border-color: var(--sprout); background: rgba(66, 176, 124, .06); }
.format__name { font-family: var(--font-serif); font-size: 16px; letter-spacing: .028em; color: var(--fern); }
.format strong { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--sprout); }
.format span:last-child { font-size: 13px; color: var(--fern); }
.format__note { flex: none !important; font-size: 13px; color: var(--sage) !important; margin-top: -8px; }
.test { margin-top: 16px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px 32px; align-items: center; padding: 32px; border-radius: 24px; background: var(--paper); color: var(--onyx); }
.test h3 { margin-top: 8px; }

/* Pour qui */
.audiences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.aud { background: var(--bone); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), opacity .8s var(--ease); }
.aud:hover { transform: translateY(-4px); }
.aud > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); transition: transform .6s var(--ease); }
.aud:hover > img { transform: scale(1.04); }
.aud__body { padding: 24px; display: grid; gap: 8px; align-content: start; }
.aud__body p { color: var(--sage); font-size: 14px; }
.aud--club { background: var(--forest); color: var(--white); }
.aud--club .aud__body p { color: var(--fern); }
.aud__logos { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: var(--paper); }
.aud__logos img { height: 64px; width: auto; transition: transform .35s var(--ease); }
.aud--club:hover .aud__logos img:nth-child(1) { transform: rotate(-6deg); }
.aud--club:hover .aud__logos img:nth-child(3) { transform: rotate(6deg); }
.card__link--dark { color: var(--white); margin-top: 8px; justify-self: start; }

/* Zone */
.zone { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }
.zone__card { position: relative; overflow: hidden; background: var(--paper); border-radius: 24px; padding: 40px; display: grid; gap: 24px; align-content: start; justify-items: start; }
.zone__card h3 { font-size: 24px; line-height: 1.33; }
.zone__tag { font-family: var(--font-serif); font-size: 16px; letter-spacing: .028em; padding: 4px 16px; border-radius: 40px; border: 1px solid var(--mist); color: var(--moss); background: var(--wash); }
.zone__tag--green { background: var(--sprout); border-color: var(--sprout); color: var(--carbon); }
.zone__places { width: 100%; }
.zone__places li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--mist); transition: padding-left .35s var(--ease); }
.zone__places li:last-child { border-bottom: 1px solid var(--mist); }
.zone__places li:hover { padding-left: 16px; }
.zone__places span { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 40px); line-height: 1; letter-spacing: -0.014em; color: var(--forest); transition: color .3s; }
.zone__places li:hover span { color: var(--verdant); }
.zone__places i { font-style: normal; font-size: 13px; color: var(--sage); text-align: right; }
.zone__card--remote { background: var(--forest); color: var(--white); }
.zone__card--remote::before { content: ''; position: absolute; width: 360px; height: 360px; right: -140px; top: -140px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2C6A4B, var(--moss) 45%, transparent 70%); opacity: .6; animation: drift 16s ease-in-out infinite alternate; pointer-events: none; }
.zone__card--remote > * { position: relative; }
.zone__card--remote p { color: var(--fern); }
.zone__big { color: var(--sprout); font-size: clamp(56px, 7vw, 96px) !important; line-height: .86; }
@media (max-width: 900px) { .zone { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .zone__card { padding: 24px; } .zone__places li { flex-direction: column; gap: 4px; } .zone__places i { text-align: left; } }

/* Contact + formulaire */
.contact { align-items: start; }
.contact__steps { display: grid; gap: 8px; }
.contact__steps li { display: flex; align-items: center; gap: 16px; font-size: 16px; }
.contact__steps span { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--sprout); color: var(--sprout); font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.form { gap: 24px; padding: 40px; border-color: var(--sprout); box-shadow: 0 0 0 6px rgba(66, 176, 124, .08); }
.form__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form__steps li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .143em; color: var(--sage); padding-bottom: 8px; border-bottom: 2px solid var(--moss); transition: color .3s, border-color .3s; }
.form__steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--moss); color: var(--white); letter-spacing: 0; }
.form__steps li.is-on { color: var(--white); border-color: var(--sprout); }
.form__steps li.is-on span { background: var(--sprout); color: var(--carbon); }
.form__page { border: 0; margin: 0; padding: 0; min-width: 0; display: none; gap: 16px; }
.form__page.is-on { display: grid; animation: fadeDown .4s var(--ease); }
.form label em { font-style: normal; font-weight: 400; color: var(--sage); }
.form label.is-error input, .form label.is-error textarea { border-color: #FFD1C9; }
.form .check { display: flex; gap: 16px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.5; cursor: pointer; }
.form .check input { width: 24px; height: 24px; flex: none; padding: 0; border-radius: 8px; accent-color: var(--sprout); margin: 0; }
.form .check a { color: var(--sprout); border-bottom: 1px solid currentColor; }
.form .check.is-error span { color: #FFD1C9; }
.form__nav { display: flex; gap: 8px; justify-content: space-between; }
.form__nav .btn--primary { flex: 1; }
.form__error { color: #FFD1C9; font-size: 13px; min-height: 0; }
.form__error:empty { display: none; }

@media (max-width: 1040px) {
  .audiences { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; }
  .test, .zone { grid-template-columns: 1fr; }
  .logos__track { gap: 40px; }
  .logos__track li, .logos__track img { height: 80px; max-height: 80px; }
}
@media (max-width: 600px) {
  .audiences { grid-template-columns: 1fr; }
  .test, .map { padding: 24px 16px; }
}

/* v4 — partenaire + carte parents */
.aud__quote { aspect-ratio: 4 / 3; margin: 0; padding: 24px; background: var(--sprout); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.aud__quote blockquote { font-family: var(--font-serif); font-size: 22px; line-height: 1.25; color: var(--forest); }
.aud__quote figcaption { font-size: 12px; font-weight: 500; color: var(--moss); }

.partner { display: grid; grid-template-columns: 5fr 6fr; background: var(--bone); border-radius: 24px; overflow: hidden; }
.partner__photo { position: relative; overflow: hidden; min-height: 400px; }
.partner__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; filter: grayscale(1); transition: transform .8s var(--ease); }
.partner:hover .partner__photo img { transform: scale(1.04); }
.partner__body { padding: 48px; display: grid; gap: 16px; align-content: center; justify-items: start; }
.partner__logo { height: 56px; width: auto; }
.partner__body h3 { font-size: 24px; line-height: 1.33; }
.partner__body h3 .serif { font-weight: 400; color: var(--moss); }
.partner__body > p:not(.partner__where) { color: var(--onyx); font-size: 15px; }
.partner__where { font-size: 12px; text-transform: uppercase; letter-spacing: .143em; color: var(--sage); }
@media (max-width: 900px) {
  .partner { grid-template-columns: 1fr; }
  .partner__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .partner__body { padding: 32px 24px; }
}
.aud > img.aud__img--left { object-position: 20% center; }

/* v5 — Ma vision : grille alignée */
.vision { grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: end; }
.vision__head { display: grid; gap: 24px; justify-items: start; }
.vision__intro { margin: 0; padding-bottom: 8px; }
.vision__photo { align-self: stretch; height: 100%; aspect-ratio: auto; min-height: 360px; }
.vision__text { align-self: start; gap: 32px; }
.vision__text .facts { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vision__text .facts div { flex-direction: column; gap: 8px; padding: 16px 0 0; }
.vision__text .facts strong { min-width: 0; }
@media (max-width: 900px) {
  .vision { grid-template-columns: 1fr; gap: 32px; }
  .vision__photo { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) { .vision__text .facts { grid-template-columns: 1fr; gap: 0; } .vision__text .facts div { flex-direction: row; align-items: baseline; gap: 16px; padding: 16px 0; } .vision__text .facts strong { min-width: 88px; } }

/* v6 — titre aligné sur l'intro, eyebrow au-dessus */
.vision { align-items: start; row-gap: 48px; }
.vision__eyebrow { grid-column: 1 / -1; justify-self: start; margin-bottom: -24px; }
.vision__title { margin: 0; }
.vision__intro { padding: 0; margin-top: .1em; }
@media (max-width: 900px) { .vision__eyebrow { margin-bottom: -8px; } }

/* v7 — Élisa : diplômes en ligne sous les deux colonnes */
.elisa { align-items: center; row-gap: 48px; }
.elisa__card { position: static; }
.elisa__creds { grid-column: 1 / -1; justify-content: center; gap: 8px; padding-top: 32px; border-top: 1px solid var(--mist); }
.elisa__creds li { background: var(--bone); border-color: var(--mist); }
@media (max-width: 600px) { .elisa__creds { justify-content: flex-start; } }
.elisa__creds { display: grid; grid-template-columns: repeat(5, 1fr); }
.elisa__creds li { display: grid; place-items: center; text-align: center; padding: 8px 16px; border-radius: 16px; line-height: 1.4; }
@media (max-width: 900px) { .elisa__creds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .elisa__creds { grid-template-columns: 1fr; } }

/* v8 — diplômes défilants */
.creds { grid-column: 1 / -1; min-width: 0; overflow: hidden; padding-top: 32px; border-top: 1px solid var(--mist); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.creds__track { display: flex; gap: 16px; width: max-content; animation: scroll 30s linear infinite; }
.creds:hover .creds__track { animation-play-state: paused; }
.creds__track li { display: flex; align-items: center; gap: 16px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--moss); padding: 8px 24px 8px 16px; border-radius: 28px; background: var(--bone); border: 1px solid var(--mist); }
.creds__track li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sprout); flex: none; }

/* ==========================================================
   v9 — site multi-pages : menu, accueil v2, pages services & à propos
   ========================================================== */

/* ---------- Menu : sous-menu Services, téléphone ---------- */
.nav__drop { position: relative; }
.nav__drop > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__drop > a svg { transition: transform .3s var(--ease); }
.nav__drop:hover > a svg, .nav__drop:focus-within > a svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  width: 320px; padding: 8px; display: grid; gap: 4px;
  background: rgba(18, 103, 62, .98); border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .25s, transform .3s var(--ease), visibility .25s;
}
.nav__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__links .nav__menu a { display: grid; gap: 0; padding: 12px 16px; border-radius: 14px; white-space: normal; }
.nav__links .nav__menu a b { font-weight: 600; color: var(--white); font-size: 14px; }
.nav__links .nav__menu a span { font-size: 12px; color: var(--sage); font-weight: 400; }
.nav__links .nav__menu a:hover, .nav__links .nav__menu a[aria-current] { background: var(--moss); }
.nav__links .nav__menu a[aria-current] b { color: var(--sprout); }
.nav__links a[aria-current] { color: var(--white); }
.nav__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 28px; transition: color .2s, background-color .2s; white-space: nowrap; }
.nav__phone svg { width: 16px; height: 16px; fill: var(--sprout); }
.nav__phone:hover { background: var(--moss); }
@media (max-width: 1280px) { .nav__phone span { display: none; } .nav__phone { padding: 8px; } }
@media (max-width: 1120px) {
  .nav__panel-links a.sub { font-family: var(--font-ui); font-weight: 500; font-size: 16px; color: var(--fern); padding: 8px 0 8px 32px; border-bottom: 0; }
  .nav__panel-links a[aria-current] { color: var(--sprout); }
  .nav__panel-phone { display: grid; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--sprout); line-height: 1.1; }
  .nav__panel-phone span { font-family: var(--font-ui); font-weight: 400; font-size: 13px; color: var(--fern); }
}
@media (max-width: 1120px) { .nav__panel-links { grid-template-columns: 1fr; } .nav__panel-links a { font-size: 24px; padding: 10px 0; } }
@media (max-width: 600px) { .nav__phone { display: none; } }

/* bouton d'appel flottant (mobile) */
.call-fab {
  position: fixed; z-index: 40; right: 16px; bottom: 16px;
  display: none; align-items: center; gap: 8px;
  padding: 12px 20px 12px 16px; border-radius: 28px;
  background: var(--sprout); color: var(--carbon); font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.call-fab svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 900px) { .call-fab { display: inline-flex; } }
body.menu-open .call-fab { display: none; }

/* ---------- Accueil : KPI du hero ---------- */
.kpis { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); width: 100%; }
.kpis li { display: grid; gap: 0; }
.kpis strong { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.1; color: var(--sprout); letter-spacing: -0.014em; }
.kpis li > span { font-size: 13px; color: var(--fern); }
.stars-inline { color: var(--sprout); font-weight: 400; letter-spacing: 1px; }
.link-strong { font-weight: 600; color: var(--forest); border-bottom: 2px solid var(--sprout); }

/* ---------- Offres : constat → bénéfices ---------- */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer { display: flex; flex-direction: column; border: 1px solid var(--onyx); border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, .02); transition: border-color .35s, transform .35s var(--ease), opacity .8s var(--ease); }
.offer:hover { border-color: var(--sage); transform: translateY(-4px); }
.offer.is-match { border-color: var(--sprout); background: rgba(66, 176, 124, .05); }
.offer__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1); opacity: .85; transition: opacity .35s; }
.offer:hover .offer__img { opacity: 1; }
.offer[data-service="mental"] .offer__img { object-position: center 35%; }
.offer__body { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 32px; flex: 1; }
.offer__label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .143em; color: var(--sage); margin-bottom: 8px; }
.offer__pain p { font-family: var(--font-serif); font-size: 19px; line-height: 1.3; color: var(--white); }
.offer__pain { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--sage); }
.offer__gain .offer__label { color: var(--sprout); }
.offer__topics { margin-bottom: 8px; }
.offer__topics li { border-color: var(--moss); color: var(--white); }
.offer__incl { display: grid; gap: 0; margin-top: auto; border-top: 1px solid var(--onyx); }
.offer__incl li { font-size: 13px; color: var(--fern); padding: 8px 0; border-bottom: 1px solid var(--onyx); }
.offer__incl li b { color: var(--white); }
.offer__incl .is-gift b, .gift { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 20px; background: var(--sprout); color: var(--carbon); vertical-align: 1px; }
.offer__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ticks { display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.5; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--sprout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.8' fill='none' stroke='%230B1F16' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px; }
.dark .ticks li { color: var(--white); }
button.card__link { background: none; border: 0; border-bottom: 1px solid var(--sage); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; padding: 0 0 3px; }
@media (max-width: 1040px) { .offers { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }

/* ---------- Partenaire compact ---------- */
.section--tight { padding: 64px 0; }
.partner-mini { display: grid; grid-template-columns: 160px 1fr auto; gap: 32px; align-items: center; padding: 24px; border-radius: 24px; background: var(--bone); }
.partner-mini__photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: 30% center; filter: grayscale(1); }
.partner-mini__body { display: grid; gap: 8px; justify-items: start; }
.partner-mini__body h3 { font-size: 20px; line-height: 1.4; }
.partner-mini__body h3 .serif { font-weight: 400; color: var(--moss); }
.partner-mini__body p { font-size: 14px; color: var(--onyx); }
.partner-mini__side { display: grid; gap: 16px; justify-items: center; }
.partner-mini .partner__logo { height: 48px; width: auto; }
@media (max-width: 800px) { .partner-mini { grid-template-columns: 1fr; text-align: left; } .partner-mini__photo { width: 96px; height: 96px; } .partner-mini__side { justify-items: start; grid-auto-flow: column; align-items: center; } }

/* ---------- Zone ---------- */
.zone__more { font-size: 14px; color: var(--sage); }
.zone__more a { color: var(--forest); border-bottom: 1px solid var(--verdant); }

/* ---------- Valeurs ---------- */
.value p b { display: block; color: var(--white); font-weight: 600; margin-bottom: 4px; }
.value p { max-width: 520px; }

/* ---------- Contact : téléphone en avant ---------- */
.phone-big { display: inline-flex; align-items: center; gap: 16px; padding: 12px 24px 12px 12px; border-radius: 40px; background: rgba(66, 176, 124, .1); border: 1px solid var(--sprout); transition: background-color .25s, transform .25s var(--ease); }
.phone-big:hover { background: rgba(66, 176, 124, .18); transform: translateY(-2px); }
.phone-big__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--sprout); display: grid; place-items: center; flex: none; }
.phone-big__icon svg { width: 22px; height: 22px; fill: var(--carbon); }
.phone-big > span:last-child { display: grid; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.1; color: var(--white); letter-spacing: -0.014em; }
.phone-big small { font-family: var(--font-ui); font-weight: 400; font-size: 12px; color: var(--fern); letter-spacing: 0; }

/* ---------- Pied de page ---------- */
.footer__brand { display: grid; gap: 8px; justify-items: start; }
.footer__phone { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--sprout); margin-top: 8px; }
.footer__mail { font-size: 14px; color: var(--fern); }
.footer__mail:hover { color: var(--white); }
.footer__zones { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--onyx); }
.footer__zones h5 { margin-bottom: 8px; }
.footer__zones p { max-width: none; font-size: 13px; line-height: 1.8; color: var(--fern); }
.footer__zones p span { color: var(--sprout); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__legal a:hover { color: var(--white); }
@media (max-width: 900px) { .footer { padding-bottom: 96px; } }

/* ---------- Formulaire « devenir partenaire » ---------- */
.dialog { width: min(720px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 24px; background: var(--forest); color: var(--white); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.dialog::backdrop { background: rgba(18, 103, 62, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog[open] { animation: fadeDown .4s var(--ease); }
.pform { position: relative; display: grid; gap: 16px; padding: 40px; }
.pform .h-display { font-size: clamp(28px, 4vw, 40px); }
.pform__intro { color: var(--fern); }
.dialog__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--moss); background: none; color: var(--white); font-size: 24px; line-height: 1; cursor: pointer; transition: background-color .2s; }
.dialog__close:hover { background: var(--moss); }
.pform label { display: grid; gap: 8px; font-size: 13px; font-weight: 500; color: var(--fern); }
.pform label em { font-style: normal; font-weight: 400; color: var(--sage); }
.pform input:not([type="checkbox"]), .pform select, .pform textarea { width: 100%; font: 400 16px/1.5 var(--font-ui); color: var(--white); background: rgba(255, 255, 255, .03); border: 1px solid var(--moss); border-radius: 24px; padding: 12px 16px; resize: vertical; transition: border-color .2s; }
.pform select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23b7bda5' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; }
.pform select option { color: var(--onyx); }
.pform input:focus, .pform select:focus, .pform textarea:focus { outline: none; border-color: var(--sprout); }
.pform label.is-error input, .pform label.is-error select, .pform label.is-error textarea { border-color: #FFD1C9; }
.pform__needs { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pform__needs legend { font-size: 13px; font-weight: 500; color: var(--fern); margin-bottom: 8px; }
.pform__needs label { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--moss); border-radius: 16px; cursor: pointer; font-weight: 400; color: var(--white); font-size: 14px; transition: border-color .2s, background-color .2s; }
.pform__needs label:has(input:checked) { border-color: var(--sprout); background: rgba(66, 176, 124, .08); }
.pform__needs input, .pform .check input { accent-color: var(--sprout); width: 18px; height: 18px; flex: none; margin: 2px 0 0; }
.pform .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--fern); }
.pform .check a { color: var(--sprout); border-bottom: 1px solid currentColor; }
.pform .check.is-error span { color: #FFD1C9; }
@media (max-width: 600px) { .pform { padding: 24px 16px; } .pform__needs { grid-template-columns: 1fr; } }

/* ---------- Pages intérieures : en-tête ---------- */
.page-hero { position: relative; overflow: hidden; padding: 160px 0 96px; }
.page-hero__bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 103, 62, .96) 0%, rgba(18, 103, 62, .86) 55%, rgba(18, 103, 62, .7) 100%), linear-gradient(180deg, transparent 60%, var(--forest) 100%), var(--img) center 60% / cover no-repeat; animation: zoom 24s ease-out both; }
.page-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.page-hero__inner--center { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 960px; }
.page-hero__inner--center .lead { margin-inline: auto; }
.page-hero__copy { display: grid; gap: 24px; justify-items: start; }
.page-hero__title { font-size: clamp(36px, 4.6vw, 60px); line-height: .95; text-wrap: balance; }
.page-hero__title em { font-style: normal; }
.page-hero__img { margin: 0; justify-self: end; width: min(100%, 420px); transform: rotate(2deg); }
.page-hero__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; filter: grayscale(1); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .2); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--sage); }
.crumbs a { color: var(--fern); transition: color .2s; }
.crumbs a:hover { color: var(--sprout); }
.crumbs [aria-current] { color: var(--white); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-facts li { font-size: 13px; padding: 6px 14px; border-radius: 28px; border: 1px solid var(--moss); color: var(--fern); background: rgba(18, 103, 62, .5); }
.hero-facts li b { color: var(--sprout); font-weight: 700; }
.hero-facts li.is-gift { border-color: var(--sprout); color: var(--white); }
.hero-facts li.is-gift b { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 1px 8px; border-radius: 20px; background: var(--sprout); color: var(--carbon); }
@media (max-width: 900px) {
  .page-hero { padding: 128px 0 64px; }
  .page-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .page-hero__img { justify-self: center; width: min(100%, 360px); }
  .page-hero__img img { aspect-ratio: 4 / 3; }
}

/* ---------- Pages intérieures : blocs ---------- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.split__head { display: grid; gap: 24px; justify-items: start; position: sticky; top: 128px; }
.split__body { display: grid; gap: 24px; justify-items: start; }
.split__body > p:not(.big) { font-size: 16px; }
.dark .split__body > p:not(.big) { color: var(--fern); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .split__head { position: static; } }

.questions { display: grid; gap: 8px; width: 100%; }
.questions li { font-family: var(--font-serif); font-size: 22px; line-height: 1.3; color: var(--forest); padding: 12px 0 12px 32px; border-bottom: 1px solid var(--mist); position: relative; }
.questions li::before { content: '?'; position: absolute; left: 0; top: 12px; font-family: var(--font-display); font-weight: 800; color: var(--verdant); }

.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.checklist li { position: relative; padding: 20px 20px 20px 56px; border-radius: 16px; background: var(--paper); border: 1px solid var(--mist); font-size: 15px; line-height: 1.5; transition: border-color .3s, transform .3s var(--ease), opacity .8s var(--ease); }
.checklist li:hover { border-color: var(--verdant); transform: translateX(4px); }
.checklist li::before { content: ''; position: absolute; left: 20px; top: 20px; width: 22px; height: 22px; border-radius: 50%; background: var(--sprout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.8' fill='none' stroke='%230B1F16' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px; }
@media (max-width: 800px) { .checklist { grid-template-columns: 1fr; } }
.note { margin-top: 32px; max-width: 800px; padding: 24px; border-radius: 16px; background: var(--wash); color: var(--moss); font-size: 16px; }

.pull { margin: 8px 0 0; padding: 0 0 0 24px; border-left: 3px solid var(--sprout); font-family: var(--font-serif); font-size: 26px; line-height: 1.25; color: var(--white); }
.light .pull, .bone .pull { color: var(--forest); }

.bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bcard { background: var(--bone); border-radius: 20px; padding: 24px; display: grid; gap: 8px; align-content: start; transition: transform .35s var(--ease), background-color .35s, opacity .8s var(--ease); }
.bcard:hover { transform: translateY(-4px); background: var(--wash); }
.bcard > span { font-family: var(--font-serif); font-size: 18px; color: var(--verdant); letter-spacing: .063em; }
.bcard h3 { font-size: 18px; line-height: 1.4; }
.bcard p { font-size: 15px; color: var(--onyx); }
.bcard--accent { background: var(--forest); color: var(--white); }
.bcard--accent p { color: var(--fern); }
.bcard--accent:hover { background: var(--forest); }
@media (max-width: 900px) { .bcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bcards { grid-template-columns: 1fr; } }

.parents-box { margin-top: 48px; display: grid; grid-template-columns: 1fr 1.4fr; border-radius: 24px; overflow: hidden; background: var(--forest); color: var(--white); }
.parents-box img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: 20% center; filter: grayscale(1); }
.parents-box > div { padding: 40px; display: grid; gap: 16px; align-content: center; }
.parents-box p { color: var(--fern); }
@media (max-width: 800px) { .parents-box { grid-template-columns: 1fr; } .parents-box img { min-height: 0; aspect-ratio: 16 / 9; } .parents-box > div { padding: 24px; } }

.pillars--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.pillar__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: var(--sprout); font-family: var(--font-display); font-weight: 800; }
.bone .pillar { background: var(--paper); }
@media (max-width: 1040px) { .pillars--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pillars--4 { grid-template-columns: 1fr; } }

.included { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
.included__head { display: grid; gap: 24px; justify-items: start; }
.steps--v { grid-template-columns: 1fr; gap: 24px; margin-top: 16px; }
.steps--v::before { top: 24px; bottom: 24px; left: 24px; right: auto; width: 1px; height: auto; }
.steps--v li { grid-template-columns: 48px 1fr; gap: 24px; }
.dark .steps--v::before { background: var(--moss); }
.dark .steps--v p { color: var(--fern); }
.dark .step__n { background: var(--sprout); color: var(--carbon); }
.pack { position: sticky; top: 112px; display: grid; gap: 16px; padding: 32px; border-radius: 24px; background: var(--paper); color: var(--onyx); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.pack--dark { background: var(--forest); color: var(--white); }
.pack__tag { justify-self: start; font-family: var(--font-serif); font-size: 16px; padding: 4px 16px; border-radius: 40px; background: var(--sprout); color: var(--carbon); }
.pack h3 { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1; letter-spacing: -0.014em; }
.pack__list { display: grid; }
.pack__list li { padding: 12px 0 12px 28px; border-top: 1px solid var(--mist); position: relative; font-size: 15px; }
.pack--dark .pack__list li { border-color: var(--moss); color: var(--fern); }
.pack--dark .pack__list b { color: var(--white); }
.pack__list li::before { content: ''; position: absolute; left: 0; top: 15px; width: 16px; height: 16px; border-radius: 50%; background: var(--sprout); }
.pack__phone { justify-self: center; font-size: 14px; font-weight: 600; color: var(--moss); }
.pack--dark .pack__phone { color: var(--sprout); }
@media (max-width: 900px) { .included { grid-template-columns: 1fr; gap: 40px; } .pack { position: static; } }

.why { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.why__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; filter: grayscale(1); }
.why__text { display: grid; gap: 24px; justify-items: start; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; gap: 32px; } .why__img { aspect-ratio: 16 / 10; } }

.cta-band { padding: 96px 0 32px; text-align: center; }
.cta-band__inner { display: grid; gap: 16px; justify-items: center; max-width: 900px; }
.cta-band p { color: var(--fern); font-size: 18px; }
.cta-band + .contact-band { padding-top: 64px; }

.topics li { font-size: 13px; }

/* comparatif */
.compare { overflow-x: auto; border-radius: 24px; border: 1px solid var(--mist); }
.compare table { width: 100%; min-width: 760px; border-collapse: collapse; }
.compare th, .compare td { padding: 20px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mist); font-size: 15px; }
.compare thead th { background: var(--forest); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.014em; }
.compare thead th a { border-bottom: 2px solid var(--sprout); transition: color .2s; }
.compare thead th a:hover { color: var(--sprout); }
.compare tbody th { width: 160px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .143em; color: var(--sage); background: var(--bone); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare__all { text-align: center !important; background: var(--wash); color: var(--moss); }

/* ---------- À propos ---------- */
.story { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
.story__intro { display: grid; gap: 24px; justify-items: start; position: sticky; top: 128px; }
.timeline { position: relative; display: grid; gap: 16px; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--mist), var(--sprout)); }
.timeline li { position: relative; padding: 24px; border-radius: 20px; background: var(--bone); display: grid; gap: 8px; }
.timeline li::before { content: ''; position: absolute; left: -36px; top: 28px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--verdant); }
.timeline li.is-now { background: var(--forest); color: var(--white); }
.timeline li.is-now::before { background: var(--sprout); border-color: var(--sprout); box-shadow: 0 0 0 6px rgba(66, 176, 124, .2); }
.timeline li.is-now p { color: var(--fern); }
.timeline__tag { font-family: var(--font-serif); font-size: 16px; color: var(--verdant); }
.timeline li.is-now .timeline__tag { color: var(--sprout); }
.timeline h3 { font-size: 20px; line-height: 1.4; }
.timeline p { font-size: 15px; color: var(--onyx); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: 48px; } .story__intro { position: static; } }

.name-band { position: relative; }
.name-band__bg { position: absolute; inset: 0; background: linear-gradient(rgba(18, 103, 62, .92), rgba(18, 103, 62, .92)), var(--img) center / cover no-repeat; }
.name-band .container { position: relative; }

.relation { display: grid; gap: 32px; justify-items: center; text-align: center; max-width: 900px; }
.relation__lead { color: var(--onyx); }
.relation__quote { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.014em; color: var(--forest); text-wrap: balance; }
.relation > p:last-child { color: var(--sage); max-width: 720px; }
.nav { row-gap: 0; }
@media (max-width: 1120px) { .nav.is-open .nav__panel { margin-top: 16px; } }
.pform > .eyebrow { justify-self: start; }
.pform > .h-display { padding-right: 48px; }
.dialog__close { z-index: 1; display: grid; place-items: center; }
/* compteurs « +70 » : le chiffre animé garde le style du nombre */
.facts strong span, .kpis strong span { font: inherit; color: inherit; letter-spacing: inherit; }

/* v10 — cartes d'offres allégées */
.offer__body { gap: 12px; padding: 24px 24px 28px; }
.offer__body h3 { font-size: 22px; line-height: 1.3; }
.offer__pain { padding: 0; background: none; border: 0; font-family: var(--font-serif); font-size: 20px; line-height: 1.3; color: var(--fern); }
.offer__gain { color: var(--white); font-size: 15px; line-height: 1.5; }
.offer__meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--onyx); font-size: 13px; color: var(--sage); }
.offer__meta b { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 1px 8px; border-radius: 20px; background: var(--sprout); color: var(--carbon); }
.offer__cta { padding-top: 4px; }

/* v11 — carte « À distance » : photo de sport en fond, sans le rond */
.zone__card--remote::before { display: none; }
.zone__card--remote {
  background:
    linear-gradient(180deg, rgba(18, 103, 62, .78) 0%, rgba(18, 103, 62, .92) 70%),
    url("assets/elisa-assise-ballon.jpg") center 35% / cover no-repeat;
}
.zone__card--remote .zone__big { color: var(--sprout); }
.zone__card--remote p { color: var(--pale-fern, #b7bda5); }

/* v12 — étiquettes / petits boutons : police d'interface, plus d'italique */
.eyebrow, .badge--serif, .zone__tag, .pack__tag {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
}
.portrait figcaption .serif { font-family: var(--font-ui); font-size: 14px; font-weight: 600; }

/* v13 — page Contact */
.page-hero--short { padding-bottom: 64px; }
.infos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.info { display: grid; gap: 4px; align-content: start; padding: 24px; border-radius: 20px; background: var(--paper); border: 1px solid var(--mist); transition: transform .35s var(--ease), border-color .3s, opacity .8s var(--ease); }
a.info:hover { transform: translateY(-4px); border-color: var(--verdant); }
.info__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.info strong { font-size: 18px; font-weight: 600; color: var(--forest); word-break: break-word; }
.info > span:last-child { font-size: 13px; color: var(--sage); }
.info--phone { background: var(--forest); border-color: var(--forest); }
.info--phone strong { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--sprout); }
.info--phone .info__label, .info--phone > span:last-child { color: var(--fern); }
.info__socials { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.info__socials a { border-bottom: 1px solid var(--verdant); }
.info__socials a:hover { color: var(--verdant); }
@media (max-width: 1040px) { .infos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .infos { grid-template-columns: 1fr; } }


/* ==========================================================
   v14 — retours cliente
   ========================================================== */

/* Logo plus grand */
.nav__logo img { width: 156px; }
.nav__logo { padding: 4px 0; }
.footer__logo { width: 240px; }
@media (max-width: 600px) { .nav__logo img { width: 128px; } }

/* Titres plus lisibles */
.h-display { font-size: clamp(32px, 3.8vw, 48px); }
h3 { font-size: 22px; line-height: 1.35; }
h4 { font-size: 19px; }
.eyebrow, .badge--serif, .zone__tag, .pack__tag { font-size: 13px; }
.offer__body h3 { font-size: 24px; }
.aud__body h3, .pillar h3, .bcard h3, .timeline h3, .info strong { font-size: 21px; }
.steps h4 { font-size: 20px; }
.faq__list summary { font-size: 19px; }
.partner-mini__body h3 { font-size: 22px; }
@media (max-width: 600px) {
  .h-display { font-size: 32px; line-height: 1.02; }
  h3, .offer__body h3 { font-size: 22px; }
  .aud__body h3, .pillar h3, .bcard h3, .timeline h3 { font-size: 20px; }
  .faq__list summary { font-size: 18px; }
  .page-hero__title { font-size: 38px; }
}

/* Vision : 2 chiffres */
.vision__text .facts--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .vision__text .facts--2 { grid-template-columns: 1fr; } }

/* Élisa : 15 ans de rugby mis en valeur */
.elisa__card { position: relative; top: auto; }
.elisa__stat { position: absolute; z-index: 2; top: 24px; right: -16px; display: grid; gap: 0; padding: 16px 20px; border-radius: 20px; background: var(--forest); color: var(--white); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); transform: rotate(3deg); }
.elisa__stat strong { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--sprout); letter-spacing: -0.014em; }
.elisa__stat strong span { font: inherit; color: inherit; }
.elisa__stat > span { font-size: 13px; color: var(--fern); max-width: 140px; }
@media (max-width: 600px) { .elisa__photo { order: 1; } .elisa__card .serif { order: 3; } .elisa__stat { order: 2; position: relative; top: auto; right: auto; justify-self: end; margin: -72px -8px 0 0;  padding: 10px 14px; border-radius: 16px; } .elisa__stat strong { font-size: 26px; } .elisa__stat > span { font-size: 11px; max-width: 120px; } }

/* Mental'up : pas seulement le sport */
.realms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.realm { padding: 28px; border-radius: 20px; border: 1px solid var(--moss); display: grid; gap: 8px; align-content: start; }
.realm h3 { color: var(--sprout); }
.realm p { color: var(--fern); }
@media (max-width: 800px) { .realms { grid-template-columns: 1fr; } }

/* Services : comparatif en cartes sur mobile */
.compare-cards { display: none; }
@media (max-width: 800px) {
  .compare { display: none; }
  .compare-cards { display: grid; gap: 16px; }
  .ccard { padding: 24px; border-radius: 20px; background: var(--bone); display: grid; gap: 16px; }
  .ccard h3 a { border-bottom: 2px solid var(--sprout); }
  .ccard dl { margin: 0; display: grid; gap: 4px; }
  .ccard dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin-top: 8px; }
  .ccard dd { margin: 0; font-size: 15px; color: var(--onyx); }
  .ccard__all { padding: 16px 20px; border-radius: 16px; background: var(--wash); color: var(--moss); font-size: 15px; }
}
.card__link--ink { color: var(--forest); border-color: var(--verdant); justify-self: start; }

/* Avis : glisser dans les deux sens */
.reviews { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.reviews.is-dragging { cursor: grabbing; }
.reviews__track { will-change: transform; }
.review { pointer-events: none; }
.reviews__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: -24px auto 32px; }
.reviews__hint { font-size: 13px; color: var(--sage); }
.rnav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mist); background: var(--paper); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.rnav svg { width: 20px; height: 20px; fill: none; stroke: var(--forest); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rnav:hover { background: var(--sprout); border-color: var(--sprout); transform: scale(1.06); }

/* v15 — À propos enrichi */
.lesson { padding: 20px 24px; border-radius: 16px; background: rgba(66, 176, 124, .12); border: 1px solid rgba(66, 176, 124, .35); color: var(--white) !important; font-size: 17px; }
.pillar--link { color: inherit; transition: transform .35s var(--ease), box-shadow .35s, opacity .8s var(--ease); }
.pillar--link:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(18, 103, 62, .1); }
.pillar--link .card__link { margin-top: auto; justify-self: start; }
.why__text .chips li { font-size: 13px; }
.logos__track img.logo--sm { max-width: 140px; max-height: 56px; }
@media (max-width: 900px) { .logos__track img.logo--sm { max-width: 110px; max-height: 44px; } }

/* v16 — accessibilité (RGAA 3.2) : texte secondaire contrasté ≥ 4,5:1 sur fonds clairs et foncés */
.dark, .nav, .dialog, .pack--dark, .aud--club, .timeline li.is-now, .bcard--accent, .parents-box, .zone__card--remote { --sage: #95A49C; }
/* sous-menu : élément actif lisible (RGAA) */
.nav__links .nav__menu a[aria-current] b { color: var(--white); }
.nav__links .nav__menu a[aria-current] span, .nav__links .nav__menu a:hover span { color: var(--fern); }
.nav__links .nav__menu a[aria-current] { box-shadow: inset 3px 0 0 var(--sprout); }

/* v18 — le vert clair devient le #42B07C de la charte ; texte foncé dessus (contraste 5,6:1) */
.eyebrow, .badge, .zone__tag, .note, .compare__all, .ccard__all { color: var(--forest); }
.eyebrow, .zone__tag { border-color: var(--wash); }
.note b, .compare__all b, .ccard__all b { color: var(--forest); }
.dark .eyebrow { color: var(--fern); border-color: var(--sage); }
.bcard:hover p, .bcard:hover h3 { color: var(--forest); }
.bcard:hover > span { color: var(--forest); }

/* ==========================================================
   v19 — fonds foncés en #12673E (charte)
   Sur ce vert, le #42B07C n'est pas lisible (2,5:1) : dans les zones foncées,
   les textes « accent » passent en #EAEAE9 (5,75:1) et le #42B07C reste
   réservé aux aplats (boutons, pastilles, puces, soulignés).
   ========================================================== */
.dark, .nav, .dialog, .pack--dark, .aud--club, .timeline li.is-now, .bcard--accent, .parents-box, .zone__card--remote, .elisa__stat, .page-hero, .hero { --fern: #EAEAE9; --sage: #EAEAE9; --sprout: #EAEAE9; --onyx: rgba(255, 255, 255, .18); --moss: #0E5232; }
/* zones claires imbriquées dans une zone foncée */
.test, .pack:not(.pack--dark), .dialog .check a { --sprout: #42B07C; --sage: #56645D; --fern: #C0CDC6; }

/* aplats verts conservés en #42B07C */
.btn--primary, .tag, .pack__tag, .gift, .offer__meta b, .hero-facts li.is-gift b, .offer__incl .is-gift b,
.phone-big__icon, .form__steps li.is-on span, .step__n, .dark .step__n, .timeline li.is-now::before,
.quiz__opts button.is-on, .zone__tag--green, .dots i, .pack__list li::before, .marquee__track i, .creds__track li::before { background-color: #42B07C; }
.btn--primary { color: #000; }
.btn--primary:hover { background-color: #53BE8B; }
.ticks li::before, .checklist li::before { background-color: #42B07C; }
.draw::after { background: #42B07C; }
.dark .step__n { color: #000; }
.phone-big { border-color: #42B07C; background: rgba(66, 176, 124, .16); }
.nav__phone svg, .call-fab { fill: #42B07C; }
.call-fab { background: #42B07C; color: #000; fill: #000; }
.call-fab svg { fill: #000; }
.form input:focus, .form select:focus, .form textarea:focus, .pform input:focus, .pform select:focus, .pform textarea:focus { border-color: #EAEAE9; }
.form input, .form select, .form textarea { background: #0E5232; }
.dark .chips li, .offer__topics li { border-color: rgba(255, 255, 255, .3); }
.nav__links a[aria-current], .nav__links a.is-active { color: #fff; }
.nav__ind { background: #0E5232; }
.nav__menu { background: rgba(14, 82, 50, .98); }
.nav__links .nav__menu a:hover, .nav__links .nav__menu a[aria-current] { background: #12673E; }
.offer { border-color: rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .06); }
.offer.is-match { border-color: #EAEAE9; }
.offer__pain { color: #EAEAE9; }
/* v19b — corrections de contraste */
.eyebrow, .badge, .zone__tag, .note, .note b, .compare__all, .compare__all b, .ccard__all, .ccard__all b, .hl { color: #000; }
.dark .eyebrow { color: var(--fern); }
.test { --onyx: #26332C; color: #26332C; }
.test .quiz__opts button { color: #26332C; }
.step__n { background: #12673E; color: #fff; }
.dark .step__n, .included:not(.included--light) .step__n { background: #42B07C; color: #000; }
.pillar__n { color: #fff; }
.info--phone { --fern: #EAEAE9; }
.info--phone strong { color: #fff; }
.info--phone .info__label, .info--phone > span:last-child { color: #EAEAE9; }
.pack:not(.pack--dark) { --onyx: #26332C; color: #26332C; }
.pack:not(.pack--dark) .pack__list li { border-color: var(--mist); }
.zone__card--remote p { color: #EAEAE9; }

/* v20 — photos studio d'Élisa (couleur) */
.portrait img, .photo, .elisa__photo, .why__img, .page-hero__img img, .aud > img.aud__img--new { filter: none; }
.portrait img, .page-hero__img img, .why__img, .elisa__photo { object-position: center 22%; }
.vision__photo { object-position: center 30%; }
.aud > img.aud__img--new { object-position: center 25%; }
.elisa__photo { aspect-ratio: 4 / 5; }
/* v21 — « Ma vision » : photo recadrée, plus d'espace vide */
.vision { row-gap: 32px; align-items: start; }
.vision__photo { height: auto; min-height: 0; align-self: start; aspect-ratio: 4 / 3; object-position: center 28%; }
.vision__text { align-self: center; }
@media (max-width: 900px) { .vision__photo { aspect-ratio: 4 / 3; } }
/* v22 — fond photo des en-têtes : on descend l'image pour garder la tête d'Élisa sous le menu */
.page-hero__bg, .hero__bg, .name-band__bg { background-position: center, center, center 18%; }
.name-band__bg { background-position: center, center 18%; }

/* v23 — icône « i porte » d'Élisa, incrustée par petites touches */
.marquee__track i, .creds__track li::before {
  width: 9px; height: 22px; border-radius: 0;
  background: var(--sprout);
  -webkit-mask: url("assets/icon.svg") no-repeat center / contain; mask: url("assets/icon.svg") no-repeat center / contain;
}
.marquee__track i { background: #42B07C; }
.creds__track li::before { background: #42B07C; }

/* filigranes */
.hero::after, .contact-band::after, .name-band::after, .cta-band::after, .footer::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 762 / 1912;
  background: rgba(255, 255, 255, .055);
  -webkit-mask: url("assets/icon.svg") no-repeat center / contain; mask: url("assets/icon.svg") no-repeat center / contain;
}
.hero::after { height: 62%; left: -3%; bottom: -6%; transform: rotate(-8deg); }
.contact-band::after { height: 78%; right: 4%; top: 12%; transform: rotate(6deg); }
.name-band::after { height: 120%; right: 6%; top: -10%; background: rgba(255, 255, 255, .06); }
.cta-band { position: relative; overflow: hidden; }
.cta-band::after { height: 140%; left: 6%; top: -20%; transform: rotate(-10deg); }
.footer { position: relative; overflow: hidden; }
.footer::before { height: 90%; right: -2%; bottom: -30%; }
.footer > .container, .cta-band .container, .name-band .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .hero::after { height: 40%; }
  .contact-band::after { height: 40%; top: 4%; }
}

/* petite icône à côté du titre de contact */
.contact__title .door-ico { display: inline-block; width: .36em; height: .9em; margin-left: .12em; vertical-align: -.05em; background: #42B07C;
  -webkit-mask: url("assets/icon.svg") no-repeat center / contain; mask: url("assets/icon.svg") no-repeat center / contain;
  transform-origin: bottom center; animation: knock 3.2s ease-in-out 1.2s infinite; }
@keyframes knock { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-7deg); } 93% { transform: rotate(5deg); } 96% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .contact__title .door-ico { animation: none; } }
.footer::before { height: min(90%, 460px); }
@media (max-width: 900px) { .footer::before { height: 320px; bottom: -60px; } .contact-band::after { height: 300px; } .hero::after { height: 300px; } }

/* v24 — bloc contact : plus de bulle en fond, seule l’icône reste en filigrane */
.orb--3 { display: none; }

/* v25 — photos dans les blocs de texte des pages services */
.split__img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-radius: 24px; margin-top: 8px; }
@media (max-width: 900px) { .split__img { max-width: none; aspect-ratio: 4 / 3; } }

/* v26 — blocs texte + photo : photo à gauche, titre et texte à droite, centrés (plus de vide) */
.split--media { grid-template-columns: 5fr 7fr; align-items: center; gap: 64px; }
.split--media .split__img { max-width: none; margin: 0; aspect-ratio: 4 / 5; max-height: 520px; }
.split--media .split__body > .eyebrow { margin-bottom: -8px; }
@media (max-width: 900px) { .split--media { grid-template-columns: 1fr; gap: 32px; } .split--media .split__img { aspect-ratio: 4 / 3; } }

/* v27 — très petits écrans (≤ 400 px) */
.contact > *, .page-hero__inner > *, .hero__grid > *, .split > *, .why > *, .included > *, .story > *, .faq > *, .vision > *, .zone > *, .elisa > * { min-width: 0; }
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; }
  .hero__cta .btn { width: 100%; }
  .phone-big { padding-right: 16px; }
  .phone-big > span:last-child { font-size: 22px; }
  .page-hero__title { font-size: 32px; }
  .contact__title { font-size: 36px; }
}
@media (max-width: 400px) {
  .h-display, .display { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .draw { white-space: normal; }
  .h-display { font-size: 28px; }
}

/* v28 — page FAQ */
.faqpage { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
.faqpage__nav { position: sticky; top: 120px; display: grid; gap: 16px; justify-items: start; }
.faqpage__nav nav { display: grid; gap: 4px; width: 100%; }
.faqpage__nav nav a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 14px; font-weight: 600; color: var(--forest); background: var(--bone); transition: background-color .2s, transform .2s var(--ease); }
.faqpage__nav nav a span { font-size: 12px; font-weight: 600; min-width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); color: var(--sage); }
.faqpage__nav nav a:hover, .faqpage__nav nav a.is-active { background: var(--forest); color: #fff; transform: translateX(4px); }
.faqpage__help { margin-top: 16px; padding: 20px; border-radius: 20px; background: var(--bone); display: grid; gap: 8px; justify-items: start; width: 100%; }
.faqpage__help p { color: var(--sage); font-size: 14px; }
.faqpage__body { display: grid; gap: 56px; }
.faqcat { scroll-margin-top: 120px; }
.faqcat__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.014em; color: var(--forest); margin-bottom: 8px; }
@media (max-width: 900px) {
  .faqpage { grid-template-columns: 1fr; gap: 32px; }
  .faqpage__nav { position: static; }
  .faqpage__nav nav { grid-template-columns: 1fr 1fr; }
  .faqpage__help { display: none; }
}
@media (max-width: 400px) { .faqpage__nav nav { grid-template-columns: 1fr; } }

/* v29 — Actualités */
.head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; flex-wrap: wrap; }
.head--split > div { display: grid; gap: 24px; justify-items: start; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--bone); transition: transform .35s var(--ease), box-shadow .35s, opacity .8s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 42, 30, .12); }
.post-card[hidden] { display: none; }
.post-card__img { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .6s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card__meta { font-size: 13px; color: var(--sage); }
.post-card__meta b { color: var(--verdant); font-weight: 600; }
.post-card h3 { font-size: 21px; line-height: 1.3; }
.post-card h3 a:hover { color: var(--verdant); }
.post-card p { font-size: 15px; color: var(--onyx); flex: 1; }
.post-card .card__link { align-self: flex-start; }
@media (max-width: 1040px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .posts { grid-template-columns: 1fr; } }

.post-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.post-filters button { font: 600 14px/1 var(--font-ui); padding: 12px 18px; border-radius: 28px; border: 1px solid var(--mist); background: var(--bone); color: var(--forest); cursor: pointer; transition: background-color .2s, color .2s; }
.post-filters button:hover { border-color: var(--forest); }
.post-filters button.is-on { background: var(--forest); color: #fff; border-color: var(--forest); }

/* article */
.post-hero__inner { position: relative; z-index: 2; display: grid; gap: 16px; justify-items: start; max-width: 900px; }
.post-tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 28px; background: #42B07C; color: #000; }
.post-meta { color: var(--fern); font-size: 15px; }
.post { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.prose { max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--onyx); }
.prose > * + * { margin-top: 20px; }
.prose__lead { font-size: 21px; line-height: 1.55; color: var(--forest); }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.014em; color: var(--forest); margin-top: 40px; }
.prose blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 4px solid #42B07C; font-family: var(--font-serif); font-size: 26px; line-height: 1.3; color: var(--forest); }
.post-cta { position: sticky; top: 120px; display: grid; gap: 16px; padding: 28px; border-radius: 24px; background: var(--forest); color: #fff; }
.post-cta h3 { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: #fff; }
.post-cta p { color: #EAEAE9; font-size: 15px; }
.post-cta .pack__tag { justify-self: start; }
.post-cta .pack__phone { color: #EAEAE9; }
@media (max-width: 900px) { .post { grid-template-columns: 1fr; gap: 40px; } .post-cta { position: static; } .prose { font-size: 16px; } .prose__lead { font-size: 19px; } }

/* v30 — prise de rendez-vous en ligne (discrète, le téléphone reste prioritaire) */
.booking { font-size: 14px; color: var(--fern); }
.booking a { color: var(--white); font-weight: 600; border-bottom: 1px solid #42B07C; padding-bottom: 1px; white-space: nowrap; }
.booking a::after { content: ' →'; }
.booking a:hover { color: #EAEAE9; border-color: #EAEAE9; }
.booking-band { padding: 0 0 56px; }
.booking-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; text-align: center; }
.booking-band__inner p { color: var(--sage); font-size: 15px; }
/* v31 — survol des cartes bénéfices : texte noir sur le vert (contraste 7,7:1) */
.bcard:hover p, .bcard:hover h3, .bcard:hover > span { color: #000; }
.rnav:hover svg { stroke: #000; }
/* v32 — puces des encadrés d'offre : l'icône « i porte » à la place des points */
.pack__list li { padding-left: 26px; }
.pack__list li::before {
  width: 9px; height: 22px; top: 12px; left: 2px; border-radius: 0;
  background: #42B07C;
  -webkit-mask: url("assets/icon.svg") no-repeat center / contain; mask: url("assets/icon.svg") no-repeat center / contain;
}

/* v33 — logo du menu un peu plus grand */
.nav__logo img { width: 184px; }
@media (max-width: 600px) { .nav__logo img { width: 148px; } }
@media (max-width: 360px) { .nav__logo img { width: 132px; } }

/* v34 — bannières : photo matériel (ballon, carnets, livres) au lieu d'Élisa */
.page-hero__bg, .hero__bg { background-position: center, center, center 45%; }

/* v35 — logos « Ils me font confiance » : swipe / glisser à la main */
.logos { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.logos.is-dragging { cursor: grabbing; }
.logos img { -webkit-user-drag: none; pointer-events: none; }
.page-hero__bg, .hero__bg { background-position: center, center, center 40%; }

/* v36 — tableau comparatif : colonne Parcour'up mise en avant */
.compare tbody td:nth-of-type(2):not([colspan]) { background: #C0CDC6; color: #000; }
.compare tbody td:nth-of-type(2):not([colspan]) .gift { background: #12673E; color: #EAEAE9; }
.ccard:nth-of-type(2) { background: #C0CDC6; }
.ccard:nth-of-type(2) dd, .ccard:nth-of-type(2) dt { color: #000; }
.ccard:nth-of-type(2) h3 a { border-bottom-color: #12673E; }

/* v37 — SEO : hiérarchie des titres (h4 → h3 dans les étapes, h5 → p dans le pied de page) */
.steps h3 { font-size: 20px; line-height: 1.4; letter-spacing: -0.021em; }
.footer .footer__h { font-family: var(--font-serif); font-weight: 400; font-size: 18px; letter-spacing: .028em; color: var(--fern); margin-bottom: 16px; }
.footer__zones .footer__h { margin-bottom: 8px; }

/* v38 — signature « Parfois, il suffit d'ouvrir la porte. » */
.cta-band .tagline, .footer__brand .tagline { font-family: var(--font-serif); font-size: 24px; line-height: 1.25; letter-spacing: .01em; color: #EAEAE9; }
.footer__brand .tagline { font-size: 22px; margin-bottom: 16px; }

/* v39 — articles : listes et intertitres de niveau 3 */
.prose ul { padding-left: 22px; list-style: disc; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: #12673E; }
.prose h3 { font-size: 20px; line-height: 1.35; color: var(--forest); margin-top: 28px; }
.prose strong { color: var(--forest); font-weight: 600; }

/* ---------- v88 : envoi des formulaires (Brevo), page 404, pages légales ---------- */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__done { display: grid; gap: 12px; justify-items: center; padding: 32px 8px; text-align: center; }
.form__done:focus { outline: none; }
.form__done strong { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; color: inherit; }
.form__done p { max-width: 36ch; }
.form__done .btn { margin-top: 8px; }
.hero__cta--center { justify-content: center; margin-top: 8px; }
.page-hero__inner--center > .eyebrow { justify-self: center; }

/* ---------- v94 : test d'orientation en 3 questions ---------- */
.test { align-items: start; }
.test__meta { margin-top: 12px; font-size: 14px; color: var(--sage); }
.quiz { display: grid; gap: 12px; justify-items: start; }
.quiz__step { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #12673E; }
.quiz__q, .quiz__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: #12673E; }
.quiz__q:focus, .quiz__title:focus { outline: none; }
.quiz__opts { width: 100%; }
.quiz__opts button { text-align: left; font-size: 14px; padding: 10px 18px; }
.quiz__opts button:hover { border-color: #12673E; }
.quiz__link { font: 500 13px/1.5 var(--font-ui); color: var(--sage); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid currentColor; }
.quiz__link:hover { color: #12673E; }
.quiz__result { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #C0CDC6; }
.quiz__result > p:not(.quiz__title):not(.quiz__step) { font-size: 15px; line-height: 1.5; }
.quiz__format { font-size: 14px !important; font-weight: 600; color: #12673E; }
.quiz__note { padding: 10px 14px; border-radius: 12px; background: #EAEAE9; font-size: 14px !important; }
.quiz__reassure { margin-top: 4px; font-size: 14px !important; color: var(--sage); }
.quiz__ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz__parents { font-size: 13px !important; color: var(--sage); }
@media (max-width: 600px) {
  .quiz__q, .quiz__title { font-size: 19px; }
  .quiz__result { padding: 18px; }
  .quiz__ctas .btn { width: 100%; justify-content: center; }
}