:root{
  --bg:#f4f8f6;
  --surface:#ffffff;
  --surface-soft:#eef4f1;
  --surface-dark:#0f2e28;
  --text:#12201d;
  --text-soft:#59706a;
  --line:#d8e4df;
  --primary:#0d5c4a;
  --primary-strong:#0a4738;
  --accent:#78c79a;
  --shadow:0 18px 50px rgba(8, 41, 33, 0.08);
  --shadow-soft:0 10px 24px rgba(8, 41, 33, 0.05);
  --radius:20px;
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

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

.site-bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(120,199,154,.22), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(13,92,74,.10), transparent 22%),
    linear-gradient(180deg, #f8fbfa 0%, #f2f7f5 100%);
  z-index:-1;
}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-soft{padding:96px 0;background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(238,244,241,.9))}
.section-dark{padding:96px 0;background:linear-gradient(135deg, #0f2e28 0%, #153c33 100%);color:#f4fbf8}

.nav-wrap{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(248,251,250,.82);
  border-bottom:1px solid rgba(216,228,223,.8);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo{width:52px;height:52px;object-fit:contain;border-radius:14px;background:#fff;padding:7px;box-shadow:var(--shadow-soft)}
.logo-full{height:44px;width:auto;object-fit:contain;display:block}
.brand-text{display:block;font-weight:800;font-size:1.05rem;letter-spacing:-0.02em}
.brand-sub{display:block;font-size:.82rem;color:var(--text-soft)}
.nav-links{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.nav-links a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  color:var(--text-soft);
  font-weight:500;
  white-space:nowrap;
}
.nav-links a:hover{background:rgba(13,92,74,.08);color:var(--primary)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid transparent;
  font-weight:600;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);color:#fff;box-shadow:0 14px 30px rgba(13,92,74,.22)}
.btn.secondary{background:rgba(255,255,255,.85);border-color:var(--line);color:var(--text)}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
  gap:48px;
  align-items:center;
  padding:88px 24px 52px;
}
.eyebrow,
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(13,92,74,.08);
  color:var(--primary);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.01em;
}
.kicker.light,.section-head.light .kicker{background:rgba(255,255,255,.10);color:#bde9cf}
.hero h1,
.section-head h2{
  margin:18px 0 14px;
  line-height:1.05;
  letter-spacing:-0.04em;
}
.hero h1{font-size:clamp(2rem,3.6vw,3.4rem);max-width:none}
.section-head h2{font-size:clamp(2rem,3vw,3rem)}
.lead,.section-head p,.section-intro{font-size:1.05rem;color:var(--text-soft);max-width:62ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 34px}
.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trust-item{
  padding:16px 18px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(216,228,223,.85);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}
.trust-item strong{display:block;font-size:1rem}
.trust-item span{color:var(--text-soft);font-size:.92rem}

.hero-panel{display:flex;justify-content:flex-end}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(12px);
}
.hero-card{
  max-width:430px;
  padding:28px;
  border-radius:28px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(120,199,154,.35), transparent 65%);
}
.hero-card h2{margin:16px 0 18px;font-size:1.6rem;line-height:1.2;letter-spacing:-0.03em}
.mini-badge{display:inline-block;padding:7px 10px;border-radius:999px;background:#e8f4ee;color:var(--primary);font-size:.8rem;font-weight:700}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.check-list li{position:relative;padding-left:28px}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--primary);font-weight:800}

.stats-band{padding:0 0 18px}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.stat{
  background:rgba(255,255,255,.8);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow-soft);
}
.stat-value{display:block;font-size:1.35rem;font-weight:800;color:var(--primary)}
.stat-label{display:block;color:var(--text-soft)}

.section-head{margin-bottom:34px}
.section-head.narrow{max-width:760px}
.section-head.light p{color:rgba(244,251,248,.78)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.feature-card,.value-card,.profile-card{padding:26px}
.feature-card:hover,.profile-card:hover,.value-card:hover{transform:translateY(-4px);transition:transform .2s ease, box-shadow .2s ease;box-shadow:var(--shadow)}
.card-icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:800;color:var(--primary);
  background:#eaf5ef;margin-bottom:18px;
}
.card h3{margin:0 0 10px;font-size:1.2rem;letter-spacing:-0.02em}
.card p{margin:0;color:var(--text-soft)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pill{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;color:var(--primary)}
.profiles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.champions-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;margin-bottom:34px}
.pill-row-vertical{flex-direction:column;flex-wrap:nowrap;margin-top:0;justify-content:flex-start}

.champions-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.champions-grid .profile-card{grid-column:span 2}
.champions-grid .profile-card:nth-child(4){grid-column:2 / span 2}
.champions-grid .profile-card:nth-child(5){grid-column:4 / span 2}

.timeline{list-style:none;margin:0;padding:10px 0 0;display:grid;gap:18px}
.timeline li{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:16px;
  align-items:start;
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.step{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg, var(--accent), #4fb97f);
  color:#0f2e28;font-weight:800;
}
.timeline strong{display:block;font-size:1.1rem;margin-bottom:6px}
.timeline p{margin:0;color:rgba(244,251,248,.78)}

.mission-box{padding:28px}
.missions-list{margin:0;padding-left:22px;columns:2;gap:40px}
.missions-list li{margin-bottom:12px}
.note{margin:18px 0 0;color:var(--text-soft);font-weight:600}

.contact-shell{display:grid;grid-template-columns:.95fr 1.05fr;gap:28px;align-items:start}
.contact-direct{margin-top:24px;padding:24px}
.contact-direct p{margin:0 0 18px}
.contact-direct p:last-child{margin-bottom:0}
.reassure{color:var(--primary);font-weight:700}
.contact-form{padding:28px;display:grid;gap:16px}
.contact-form label{display:grid;gap:8px;font-size:.95rem;font-weight:600}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:14px 16px;
  font:inherit;
  color:var(--text);
  outline:none;
}
.contact-form select{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:14px 16px;
  font:inherit;
  color:var(--text);
  outline:none;
  appearance:none;
  cursor:pointer;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(13,92,74,.10)}

.footer{padding:28px 0 42px;border-top:1px solid rgba(216,228,223,.8)}
.footer-inner{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.footer p{margin:.4rem 0 0;color:var(--text-soft)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{text-decoration:none;color:var(--text-soft)}
.foot-links a:hover{color:var(--primary)}

@media (max-width:1080px){
  .hero,.split,.contact-shell{grid-template-columns:1fr}
  .champions-head{grid-template-columns:1fr;gap:20px}
  .pill-row-vertical{flex-direction:row}
}

@media (max-width:820px){
  .nav{flex-wrap:nowrap;gap:4px;padding:0}
  .nav-links{flex-wrap:nowrap;gap:0;flex-shrink:1;min-width:0}
  .nav-links a{padding:6px 6px;font-size:.76rem;white-space:nowrap}
  .brand-sub{display:none}
  .brand-text{white-space:nowrap}
  .brand{gap:8px;flex-shrink:0}
  .logo{width:34px;height:34px}
  .nav-wrap .btn{padding:0 10px;font-size:.76rem;white-space:nowrap;min-height:36px;flex-shrink:0}
  .grid-3,.stats-grid,.profiles-grid{grid-template-columns:1fr 1fr}
  .hero-trust{grid-template-columns:1fr}
  .champions-grid{grid-template-columns:1fr 1fr}
  .champions-grid .profile-card{grid-column:span 1}
  .champions-grid .profile-card:nth-child(4){grid-column:span 1}
  .champions-grid .profile-card:nth-child(5){grid-column:1 / span 2}
}

@media (max-width:640px){
  .section,.section-soft,.section-dark{padding:72px 0}
  .container{padding:0 18px}
  .grid-3,.stats-grid,.profiles-grid{grid-template-columns:1fr}
  .missions-list{columns:1}
  .timeline li{grid-template-columns:52px 1fr;padding:18px}
  .btn{width:100%}
  .hero-actions{flex-direction:column}
  .footer-inner{flex-direction:column}
}

/* =========================================================
   MOTION — piloté par motion.js
   1. Entrée du hero  2. Fil de progression Méthode  3. Header & nav
   ========================================================= */

/* Header & nav */
.nav-wrap.scrolled{background:rgba(248,251,250,.95);box-shadow:0 8px 30px rgba(8,41,33,.08)}
.nav-links a.active{background:rgba(13,92,74,.08);color:var(--primary)}

/* Titre découpé mot à mot */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w > span{display:inline-block}

/* Méthode : fil de progression */
.timeline{position:relative}
.step{position:relative;z-index:1}
.timeline.has-rail::before,
.timeline.has-rail::after{
  content:"";position:absolute;pointer-events:none;
  left:var(--rail-x);top:var(--rail-top);height:var(--rail-h);
  width:2px;margin-left:-1px;border-radius:2px;
}
.timeline.has-rail::before{background:rgba(255,255,255,.12)}
.timeline.has-rail::after{
  background:linear-gradient(180deg,var(--accent),#4fb97f);
  transform-origin:top;transform:scaleY(var(--p,0));
}
.timeline.has-rail li:not(.is-active) .step{background:#1c463d;color:#9fd4b5;box-shadow:inset 0 0 0 1px rgba(189,233,207,.25)}
.timeline.has-rail li:not(.is-active) > div{opacity:.55}
.timeline.has-rail li.is-active{border-color:rgba(120,199,154,.3);background-color:rgba(255,255,255,.07)}
.timeline.has-rail li.is-active .step{box-shadow:0 0 0 6px rgba(120,199,154,.16)}

@media (prefers-reduced-motion: no-preference){
  .nav-wrap{transition:background .3s ease, box-shadow .3s ease}

  /* Hero masqué jusqu'au lancement (filet de sécurité : visible après 2,5 s quoi qu'il arrive) */
  .js:not(.play) .hero{visibility:hidden}
  .js .hero{animation:lcb-failsafe 0s 2.5s forwards}

  .reveal{opacity:0;transform:translateY(16px)}
  .play .reveal{
    opacity:1;transform:none;
    transition:opacity .7s ease var(--d,0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
  }

  .js .hero h1 .w > span{transform:translateY(105%)}
  .play .hero h1 .w > span{transform:none;transition:transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}

  .check-list li.reveal::before{transform:scale(0)}
  .play .check-list li.reveal::before{transform:scale(1);transition:transform .45s cubic-bezier(.34,1.8,.5,1) calc(var(--d,0ms) + 180ms)}

  .timeline.has-rail li{transition:border-color .5s ease, background-color .5s ease}
  .timeline.has-rail li > div{transition:opacity .5s ease}
  .timeline .step{transition:box-shadow .5s ease, color .3s ease}
  .timeline.has-rail li.is-active .step{animation:lcb-pop .5s cubic-bezier(.3,1.5,.5,1)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

@keyframes lcb-failsafe{to{visibility:visible}}
@keyframes lcb-pop{0%{transform:scale(.85)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

section[id]{scroll-margin-top:88px}