/* ms.css - design system du site depuis le 2026-10-06, calque sur morningside.ai.
   Quasi-noir, ivoire, un vert. Titres en Poppins leger, centres, en degrade blanc -> vert.
   Libelles et boutons en capitales mono. Une phrase par ecran pour la sequence narrative.
   Remplace l ancien design (Vert Papier, heros canvas, rideau d intro). */

:root{
  --bg:#080808; --bg-2:#0F1C1C; --card:#111313; --line:rgba(237,236,228,.10);
  --ink:#EDECE4; --ink-2:rgba(237,236,228,.72); --ink-3:rgba(237,236,228,.45);
  --green:#0CC481; --green-2:#7FE0B8; --deep:#0A4A33;
  --sans:"Poppins",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --wrap:1120px; --pad:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-font-smoothing:antialiased; scroll-padding-top:90px;}
body{font-family:var(--sans); font-weight:400; background:var(--bg); color:var(--ink);
  line-height:1.6; overflow-x:hidden;}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--green); outline-offset:3px;}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important; animation:none!important;} }

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);}
.center{text-align:center;}

/* ---- type ---- */
.ms-h1,.ms-h2{font-weight:300; letter-spacing:-.02em; line-height:1.12; text-wrap:balance;}
.ms-h1{font-size:clamp(36px,5.4vw,64px);}
.ms-h2{font-size:clamp(30px,4.2vw,50px);}
.ms-h3{font-weight:400; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.01em; line-height:1.2;}
.grad{background:linear-gradient(90deg,var(--ink) 0%,var(--green-2) 55%,var(--green) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.green{color:var(--green);}
.lead{font-size:clamp(16px,1.5vw,19px); color:var(--ink); max-width:46ch; line-height:1.55;}
.center .lead{margin-left:auto; margin-right:auto;}
.muted{color:var(--ink-2);}
.label{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}

/* ---- bouton blanc, capitales mono, chevron ---- */
.btn{display:inline-flex; align-items:center; gap:12px; background:#fff; color:#080808;
  font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:14px 22px; border-radius:4px; transition:transform .3s var(--ease), background .3s var(--ease);}
.btn::after{content:""; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg); margin-left:2px;}
.btn:hover{transform:translateY(-2px); background:var(--ink);}
.btn--sm{padding:10px 16px; font-size:11.5px;}
.link{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green);}
.link::after{content:" ›";}

/* ---- navigation ---- */
.ms-nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .3s var(--ease);}
.ms-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:84px; gap:20px;}
.ms-nav.scrolled{background:rgba(8,8,8,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.ms-logo{display:flex; align-items:center; gap:10px; font-weight:500; font-size:17px; letter-spacing:-.01em;}
.ms-logo img{display:block; height:20px; width:auto;}
.story .reveal .brand-lockup{justify-content:center; gap:16px; margin:6px 0 26px; max-width:none; font-size:clamp(26px,3.2vw,40px);}
.brand-lockup img{height:clamp(24px,3vw,36px);}
.ms-links{display:flex; align-items:center; gap:28px;}
.ms-links a:not(.btn){font-size:14px; color:var(--ink-2); transition:color .2s;}
.ms-links a:not(.btn):hover,.ms-links a[aria-current]{color:var(--ink);}
.ms-burger{display:none; width:40px; height:40px; border:0; background:transparent; cursor:pointer; position:relative;}
.ms-burger span,.ms-burger span::before,.ms-burger span::after{position:absolute; left:10px; width:20px; height:1.5px; background:var(--ink); content:""; transition:transform .3s var(--ease);}
.ms-burger span{top:19px;} .ms-burger span::before{top:-6px; left:0;} .ms-burger span::after{top:6px; left:0;}
.nav-open .ms-burger span{background:transparent;}
.nav-open .ms-burger span::before{transform:translateY(6px) rotate(45deg);}
.nav-open .ms-burger span::after{transform:translateY(-6px) rotate(-45deg);}
@media(max-width:760px){
  .ms-burger{display:block;}
  .ms-links{position:absolute; top:76px; right:var(--pad); flex-direction:column; align-items:stretch; gap:4px;
    min-width:220px; padding:12px; background:rgba(17,19,19,.97); border:1px solid var(--line); border-radius:8px;
    opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .25s, transform .25s;}
  .nav-open .ms-links{opacity:1; pointer-events:auto; transform:none;}
  .ms-links a:not(.btn){padding:10px 12px; font-size:15px;}
  .ms-links .btn{justify-content:center; margin-top:6px;}
}

/* ---- fonds ---- */
.grid-bg{position:relative;}
.grid-bg::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right,rgba(237,236,228,.05) 1px,transparent 1px);
  background-size:calc(100% / 8) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);}
.glow{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 35%,#0B2A1F 70%,var(--deep) 100%);}
.sec{padding:clamp(80px,12vw,150px) 0; position:relative;}

/* ---- heros ---- */
.hero{min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:130px 0 80px;
  background:radial-gradient(90% 70% at 50% 0%,#12201C 0%,var(--bg) 60%);}
.hero .lead{margin-top:26px;}
.hero .actions{margin-top:38px; display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap;}
.hero .label{margin-top:clamp(56px,9vh,96px);}

/* ---- sequence narrative : une phrase par ecran ---- */
.story{padding:clamp(60px,10vw,120px) 0 0;}
.story .line{min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center;}
.story .line p{font-weight:300; font-size:clamp(26px,3.6vw,44px); line-height:1.25; letter-spacing:-.015em;
  max-width:24ch; color:rgba(237,236,228,.22); transition:color .6s var(--ease);}
.story .line.on p{color:var(--ink);}
.story .reveal{min-height:90vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:22px; padding:80px 0 120px;}
.story .reveal .strong{font-weight:600; font-size:clamp(17px,1.6vw,20px);}
.story .reveal p{max-width:44ch; font-size:clamp(17px,1.6vw,20px);}
.story .reveal .btn{margin-top:30px;}

/* ---- trois temps ---- */
.panel-dark{background:var(--bg); border-radius:18px 18px 0 0; margin-top:-18px; position:relative;}
.sep{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:22px;}
.sep::before,.sep::after{content:""; height:1px; width:min(160px,20vw);
  background:linear-gradient(90deg,transparent,var(--green));}
.sep::after{transform:scaleX(-1);}
.sep i{width:22px; height:14px; background:var(--green); clip-path:polygon(0 100%,35% 0,50% 0,50% 100%,65% 100%,65% 30%,100% 30%,100% 100%);}
.steps{display:grid; gap:22px; margin-top:clamp(50px,7vw,90px);}
.step{display:grid; grid-template-columns:110px 1fr; align-items:center; gap:clamp(16px,3vw,40px);}
.step:nth-child(2){margin-left:clamp(0px,6vw,90px);} .step:nth-child(3){margin-left:clamp(0px,12vw,180px);}
.step .num{font-weight:200; font-size:clamp(70px,9vw,120px); line-height:1; color:var(--green);
  font-style:italic; transform:skewX(-6deg); opacity:.85; text-align:center;}
.card{background:linear-gradient(135deg,#161818 0%,#0D0E0E 100%); border:1px solid var(--line); border-radius:10px;
  padding:clamp(24px,3.4vw,40px);}
.step .card{display:grid; grid-template-columns:96px 1fr; gap:clamp(18px,3vw,36px); align-items:center;}
.step .card svg{width:96px; height:96px; stroke:var(--ink); fill:none; stroke-width:1.2;}
.step .card p{margin-top:10px; color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:52ch;}
.step .when{margin-top:12px;}
@media(max-width:760px){
  .step{grid-template-columns:1fr; gap:6px;} .step .num{text-align:left; font-size:64px;}
  .step:nth-child(n){margin-left:0;}
  .step .card{grid-template-columns:1fr;} .step .card svg{width:64px; height:64px;}
}

/* ---- pour qui : trois resultats ---- */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(40px,6vw,70px);}
.case .tag{margin-bottom:12px;}
.case .ms-h3{font-size:clamp(20px,2vw,25px);}
.case p{margin-top:12px; color:var(--ink-2); font-size:15px;}
.case .art{aspect-ratio:16/10; border-radius:8px; margin-bottom:20px; border:1px solid var(--line); overflow:hidden;
  background:#0E1010; display:grid; place-items:center;}
.case .art svg{width:62%; height:auto; stroke:var(--ink-3); fill:none; stroke-width:1;}
.case .art svg .g{stroke:var(--green);}
@media(max-width:860px){ .cases{grid-template-columns:1fr;} }

/* ---- preuve ---- */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); margin-top:clamp(40px,6vw,70px); align-items:start;}
.quote blockquote{font-size:clamp(17px,1.7vw,21px); line-height:1.55; text-align:center;}
.quote blockquote em{font-style:normal; color:var(--green);}
.quote .who{margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:10px;}
.quote .who img{width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 20%; filter:grayscale(1);}
.quote .who b{font-weight:500;} .quote .who span{font-size:13.5px; color:var(--ink-3);}
.illu{border:1px dashed rgba(12,196,129,.4);}
.illu .kpis{display:grid; gap:18px; margin-top:22px;}
.illu .kpi{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline;}
.illu .kpi b{font-weight:300; font-size:clamp(34px,3.6vw,46px); color:var(--green); letter-spacing:-.02em; line-height:1;}
.illu .kpi span{color:var(--ink-2); font-size:15px;}
@media(max-width:860px){ .quotes{grid-template-columns:1fr;} }

/* ---- qui je suis ---- */
.about{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,6vw,80px); align-items:center;}
.about figure{aspect-ratio:4/5; border-radius:10px; overflow:hidden; border:1px solid var(--line);}
.about figure img{width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.05);}
.about p{margin-top:20px; color:var(--ink-2); font-size:16px; max-width:52ch;}
.contrast{margin-top:30px; display:grid; gap:12px;}
.contrast div{display:grid; grid-template-columns:24px 1fr; gap:12px; font-size:17px; line-height:1.45;}
.contrast div::before{font-family:var(--mono); color:var(--ink-3);}
.contrast .non::before{content:"×";} .contrast .oui::before{content:"→"; color:var(--green);}
.contrast .oui{color:var(--ink);} .contrast .non{color:var(--ink-2);}
@media(max-width:860px){ .about{grid-template-columns:1fr;} .about figure{max-width:340px;} }

/* ---- offres ---- */
.offers{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:clamp(40px,6vw,70px);}
.offers.three{grid-template-columns:repeat(3,1fr);}
.offer{display:flex; flex-direction:column; gap:14px;}
.offer p{color:var(--ink-2); font-size:15px;}
.offer ul{list-style:none; display:grid; gap:9px; padding-top:16px; border-top:1px solid var(--line);}
.offer li{position:relative; padding-left:20px; color:var(--ink-2); font-size:14.5px; line-height:1.5;}
.offer li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:1.5px; background:var(--green);}
.o-price{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.o-price b{display:block; margin-top:4px; font-family:var(--sans); font-weight:300; font-size:clamp(34px,3.4vw,44px);
  letter-spacing:-.02em; color:var(--ink); text-transform:none;}
.o-price b .js-cur,.o-price .js-cur{font-size:.45em; color:var(--green); margin-left:6px; letter-spacing:.06em;}
.offer.feature{border-color:rgba(12,196,129,.45); background:linear-gradient(135deg,#10231C 0%,#0D0E0E 100%);}
.offer .foot{margin-top:auto; padding-top:8px; font-size:13.5px; color:var(--ink-3);}
.note{margin-top:28px; color:var(--ink-2); font-size:15px; max-width:70ch;}
.note b{color:var(--ink); font-weight:500;}
@media(max-width:960px){ .offers.three{grid-template-columns:1fr;} }
@media(max-width:760px){ .offers{grid-template-columns:1fr;} }

/* ---- listes simples ---- */
.ticks{list-style:none; display:grid; gap:12px; margin-top:24px;}
.ticks li{position:relative; padding-left:24px; color:var(--ink-2); font-size:16px;}
.ticks li::before{content:""; position:absolute; left:0; top:.7em; width:10px; height:1.5px; background:var(--green);}
.ticks li b{display:block; color:var(--ink); font-weight:500;}
.ticks.no li::before{content:"×"; width:auto; height:auto; background:none; top:0; color:var(--ink-3); font-family:var(--mono);}
.two{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:clamp(40px,6vw,70px);}
@media(max-width:760px){ .two{grid-template-columns:1fr;} }

/* ---- FAQ ---- */
.faq{max-width:760px; margin:clamp(40px,6vw,70px) auto 0;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center;
  padding:22px 0; font-size:17px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; flex:none; width:8px; height:8px; border-right:1.5px solid var(--ink-2); border-bottom:1.5px solid var(--ink-2);
  transform:rotate(45deg); transition:transform .3s var(--ease);}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq details p{padding:0 0 22px; color:var(--ink-2); font-size:15.5px; max-width:64ch;}

/* ---- final ---- */
.final{min-height:80vh; display:flex; align-items:center; text-align:center; padding:140px 0 60px;}
.final .ms-h2{font-size:clamp(30px,4.4vw,54px);}
.final .ms-h2 + .ms-h2{margin-top:24px;}
.final .actions{margin-top:clamp(64px,8vw,96px); display:flex; flex-direction:column; align-items:center; gap:18px;}
.final .alt{font-size:14px; color:var(--ink-2);}
.final .alt a{color:var(--ink); border-bottom:1px solid var(--ink-3);}

/* ---- pied de page ---- */
.ms-foot{padding:26px 0 30px;}
.ms-foot .wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.ms-foot .bar{flex:1; min-width:60px; height:1px; background:linear-gradient(90deg,var(--green),transparent 60%);}
.ms-foot nav{display:flex; flex-wrap:wrap; gap:6px 0; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.ms-foot nav > *:not(:last-child)::after{content:"|"; margin:0 10px; color:rgba(237,236,228,.2);}
.ms-foot nav a:hover{color:var(--ink);}

/* ---- pages interieures ---- */
.page-hero{padding:170px 0 clamp(50px,7vw,90px); text-align:center;
  background:radial-gradient(80% 80% at 50% 0%,#12201C 0%,var(--bg) 65%);}
.page-hero .lead{margin-top:22px;}
.page-hero .actions{margin-top:34px;}

/* ---- page contact, calquee sur morningside.ai/work-with-us ---- */
.wwu{min-height:100vh; padding:150px 0 100px;
  background:radial-gradient(80% 80% at 50% 0%,#12201C 0%,var(--bg) 65%);}
.wwu .wrap{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,7vw,100px); align-items:start;}
.wwu .ms-h1{font-size:clamp(34px,4.6vw,56px);}
.wwu .lead{margin-top:24px;}
.wwu .infos{margin-top:44px; display:grid; gap:22px;}
.wwu .info{display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:center;}
.wwu .info .ic{width:40px; height:40px; border-radius:4px; display:grid; place-items:center;
  background:linear-gradient(135deg,#161818 0%,#0D0E0E 100%); border:1px solid var(--line);}
.wwu .info svg{width:18px; height:18px; stroke:var(--green); fill:none; stroke-width:1.5;}
.wwu .info b{display:block; font-weight:500; font-size:15px;}
.wwu .info span,.wwu .info a{font-size:14.5px; color:var(--ink-2);}
.wwu .info a:hover{color:var(--ink);}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.ff{display:flex; flex-direction:column; gap:9px; margin-top:20px; min-width:0;}
.frow .ff{margin-top:20px;} .frow.first .ff{margin-top:0;}
.ff label,.ff legend{font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);}
.ff input,.ff select,.ff textarea{width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:13px 15px;
  transition:border-color .2s, box-shadow .2s;}
.ff input::placeholder,.ff textarea::placeholder{color:rgba(237,236,228,.38);}
.ff select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%; background-size:5px 5px; background-repeat:no-repeat;}
.ff select:invalid{color:rgba(237,236,228,.6);}
.ff select option{background:var(--card); color:var(--ink);}
.ff textarea{min-height:130px; resize:vertical; line-height:1.55;}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none; border-color:rgba(12,196,129,.6); box-shadow:0 0 0 3px rgba(12,196,129,.14);}
fieldset.ff{border:0; padding:0; margin:20px 0 0;}
.pills{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px;}
.pills label{position:relative; cursor:pointer; font-family:var(--sans); letter-spacing:0; text-transform:none;}
.pills input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.pills label > span{display:block; text-align:center; padding:13px 10px; border-radius:4px; background:var(--bg);
  border:1px solid var(--line); font-weight:400; font-size:14px; color:var(--ink-2); transition:all .2s;}
.pills .js-cur{margin-left:4px; font-size:12px; color:inherit;}
.pills input:checked + span{border-color:var(--green); color:var(--ink); background:rgba(12,196,129,.12);}
.pills input:focus-visible + span{outline:2px solid var(--green); outline-offset:2px;}
.fsubmit{margin-top:26px; width:100%; justify-content:center; border:0; padding:17px 20px; cursor:pointer;}
.fsubmit:disabled{opacity:.6; cursor:not-allowed; transform:none; background:#fff;}
.fnote{margin-top:14px; font-size:12.5px; color:var(--ink-3); text-align:center;}
.fstatus{margin-top:16px; padding:14px 16px; border-radius:4px; font-size:14.5px; display:none;}
.fstatus.show{display:block;}
.fstatus.ok{background:rgba(12,196,129,.12); border:1px solid rgba(12,196,129,.4); color:var(--ink);}
.fstatus.err{background:rgba(214,74,60,.12); border:1px solid rgba(214,74,60,.45); color:#F2B8B0;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.h-captcha{margin-top:22px;}
@media(max-width:900px){ .wwu .wrap{grid-template-columns:1fr;} }
@media(max-width:520px){ .frow,.pills{grid-template-columns:1fr;} .frow{gap:0;} .frow .ff + .ff{margin-top:20px;} }

/* ---- logos clients (en blanc) ---- */
.logos{margin-top:22px; display:flex; justify-content:center; align-items:center; gap:48px; flex-wrap:wrap;}
.logos img{height:58px; width:auto; opacity:.85;}
.quote .who .clogo{width:auto; height:44px; border-radius:0; filter:none; object-fit:contain; opacity:.9;}
/* ---- bande de chiffres ---- */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:clamp(50px,7vw,90px);
  padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--line); text-align:center;}
.stats b{display:block; font-weight:300; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.02em; color:var(--green);}
.stats span{display:block; margin-top:6px; font-size:13.5px; color:var(--ink-2); line-height:1.45;}
@media(max-width:860px){ .stats{grid-template-columns:1fr 1fr;} }

/* ---- animations (code propre, comportements inspires de morningside.ai) ----
   Tout est desactive sous prefers-reduced-motion (regle globale en tete de fichier)
   et le contenu reste visible sans JavaScript : les etats caches ne s'appliquent que
   sous html.js, pose par ms.js. */
@keyframes msUp{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}
.hero .ms-h1,.hero .lead,.hero .actions,.hero .label{animation:msUp 1s var(--ease) both;}
.hero .lead{animation-delay:.15s;} .hero .actions{animation-delay:.3s;} .hero .label{animation-delay:.45s;}
.page-hero .ms-h1,.page-hero .lead{animation:msUp 1s var(--ease) both;} .page-hero .lead{animation-delay:.15s;}

/* sequence narrative : opacite pilotee au defilement (variable --o posee par ms.js) */
.js .story .line p{color:rgba(237,236,228,calc(.16 + .84 * var(--o,0))); transform:translateY(calc((1 - var(--o,0)) * 14px));
  transition:none;}

/* sortie du flou */
.js .blur-in{opacity:0; filter:blur(14px); transform:translateY(18px);
  transition:opacity 1.1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease);}
.js .blur-in.in{opacity:1; filter:none; transform:none;}

/* entree des etapes PILOTEE PAR LE DEFILEMENT : --p va de 0 (bloc sous l'ecran) a 1 (bloc
   a sa place), pose par ms.js. Le bloc glisse depuis la droite et l'icone pivote et grandit
   jusqu'a ce que le bloc soit en place, puis plus rien ne bouge. */
.js .step{opacity:var(--p,0); transform:translateX(calc((1 - var(--p,0)) * 90px));}
.js .step .num{opacity:calc(var(--p,0) * .85); transform:skewX(-6deg) translateY(calc((1 - var(--p,0)) * 34px));}
.js .step .card svg{opacity:calc(.25 + .75 * var(--p,0));}

/* montee en cascade des cartes */
.js .rise{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.js .rise.in{opacity:1; transform:none;}

/* conclusion mot a mot */
.js .words .w{display:inline-block; opacity:0; filter:blur(10px); transform:translateY(10px);
  transition:opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease);}
.js .words.in .w{opacity:1; filter:none; transform:none;}
/* le degrade doit couvrir chaque mot decoupe */
.words .grad .w{background:linear-gradient(90deg,var(--green-2),var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* lueur verte qui monte avec la section */
.glow{background-size:100% 140%; background-position:0 0; transition:background-position 1.6s var(--ease);}
.js .glow.in{background-position:0 100%;}

/* les etapes partent decalees a droite avant leur entree : rien ne doit deborder */
.panel-dark{overflow-x:clip;}

/* ---- a propos : fiche fondateur ---- */
.founder{display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(30px,6vw,80px); align-items:center;}
.founder figure{aspect-ratio:4/5; border-radius:10px; overflow:hidden; border:1px solid var(--line);}
.founder figure img{width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.05);}
.founder p:not(.label){margin-top:18px; color:var(--ink-2); font-size:16px; max-width:56ch;}
@media(max-width:860px){ .founder{grid-template-columns:1fr;} .founder figure{max-width:340px;} }

/* ---- onglets de la page methode (trois temps) ---- */
.tabs{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,70px);}
.tabs button{font:inherit; font-size:15px; color:var(--ink-2); background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:12px 22px; transition:all .25s var(--ease);}
.tabs button span{font-family:var(--mono); color:var(--green); margin-right:6px;}
.tabs button:hover{color:var(--ink); border-color:rgba(237,236,228,.25);}
.tabs button[aria-selected="true"]{color:#080808; background:var(--ink); border-color:var(--ink);}
.tabs button[aria-selected="true"] span{color:#0A4A33;}
.tabpanel{animation:msUp .7s var(--ease) both;}
.tp-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:start;}
.tp-grid .ms-h2{margin-top:14px;}
.tp-intro{margin-top:24px; color:var(--ink-2); font-size:16.5px; line-height:1.7; max-width:52ch;}
.tp-grid .card .ticks li{font-size:15px;}
.tp-price{margin-top:28px; padding-top:20px; border-top:1px solid var(--line);}
@media(max-width:860px){ .tp-grid{grid-template-columns:1fr;} }

/* ---- etapes : plus d'escalier, blocs agrandis (2026-10-06) ---- */
.steps{max-width:980px; margin-left:auto; margin-right:auto; gap:28px;}
.step:nth-child(2),.step:nth-child(3){margin-left:0;}
.step{grid-template-columns:130px 1fr;}
.step .num{font-size:clamp(90px,11vw,150px);}
.step .card{grid-template-columns:150px 1fr; padding:clamp(32px,4.4vw,56px); min-height:300px; gap:clamp(24px,4vw,48px);}
.step .card svg{width:140px; height:140px;}
.step .card .ms-h3{font-size:clamp(28px,3vw,38px);}
.step .card p{font-size:17px; line-height:1.65; margin-top:14px; max-width:56ch;}
@media(max-width:760px){
  .step{grid-template-columns:1fr;} .step .num{font-size:72px;}
  .step .card{grid-template-columns:1fr; min-height:0;} .step .card svg{width:80px; height:80px;}
}

/* ---- etapes : scenes animees (ms-methode.js, GSAP). Sans JS ou en mouvement reduit,
   chaque scene reste figee sur son etat final : 5 % allumes, outils relies, equipe en orbite. ---- */
.mt .mt-dot{fill:var(--ink-3); stroke:none;}
.mt .mt-dot.hit{fill:var(--green);}
.mt .mt-g{stroke:var(--green);}
.mt .mt-ring{fill:none; stroke:var(--green); opacity:0;}
.mt .mt-wire,.mt .mt-track{stroke:var(--ink-3);}
.mt .mt-track{stroke-dasharray:1.5 3;}
.mt .mt-breath{opacity:.35;}
.mt .mt-pulse{fill:var(--green); stroke:none; opacity:0;}
.mt .mt-node{stroke:var(--green); fill:var(--card);}

/* ---- offre : ligne de conditions sous chaque onglet ---- */
.tp-foot{margin-top:22px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--green);}

/* ---- temoignage (a propos) ---- */
.testi{position:relative; max-width:920px; margin:0 auto; padding:clamp(36px,5vw,64px);
  background:linear-gradient(135deg,#141716 0%,#0C0D0D 100%); border:1px solid var(--line); border-radius:14px;}
.testi .qmark{position:absolute; top:clamp(4px,1vw,14px); left:clamp(22px,3.4vw,44px); font-size:clamp(90px,10vw,140px);
  line-height:1; font-weight:200; color:var(--green); opacity:.55;}
.testi blockquote{position:relative; font-weight:300; font-size:clamp(23px,2.6vw,34px); line-height:1.35;
  letter-spacing:-.015em; text-wrap:balance; padding-top:clamp(28px,3vw,40px);}
.testi blockquote em{font-style:normal; background:linear-gradient(90deg,var(--green-2),var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.testi figcaption{display:flex; align-items:center; gap:16px; margin-top:clamp(28px,3.4vw,40px);
  padding-top:clamp(22px,2.6vw,30px); border-top:1px solid var(--line);}
.testi .tphoto{width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 20%; filter:grayscale(1);}
.testi .twho b{display:block; font-weight:500; font-size:16px;}
.testi .twho span{font-size:14px; color:var(--ink-3);}
.testi .tlogo{margin-left:auto; height:52px; width:auto; opacity:.85;}
@media(max-width:520px){ .testi .tlogo{display:none;} }
.stats.four{grid-template-columns:repeat(4,1fr);}
@media(max-width:860px){ .stats.four{grid-template-columns:1fr 1fr;} }

/* ---- cartes des trois temps : liens vers l'onglet de l'offre ---- */
a.card{display:grid; color:inherit; transition:border-color .3s var(--ease), background .3s var(--ease);}
.step a.card:hover{border-color:rgba(12,196,129,.45); background:linear-gradient(135deg,#10231C 0%,#0D0E0E 100%);}
.step-more{display:inline-block; margin-top:18px;}
.step a.card:hover .step-more{text-decoration:underline; text-underline-offset:4px;}
.tabs{scroll-margin-top:110px;}

/* ---- finitions (2026-10-08) : grain de pellicule, chiffres graves, trame et lumiere des cartes ----
   Tout est decoratif : sans JS ou en mouvement reduit, chiffres et textures restent, seuls le
   reflet et la lumiere au curseur disparaissent. */

/* grain de pellicule sur toute la page : bruit SVG en niveaux de gris, opacite simple (pas de
   mode de fusion, trop couteux sur mobile) */
body::after{content:""; position:fixed; inset:0; z-index:300; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* chiffres 1 2 3 graves : degrade ivoire -> vert, arete claire, ombre verte longue qui se pose
   au defilement (--p, pose par ms.js). Le premier calque est le reflet, hors champ au repos,
   balaye une fois par ms-methode.js via --sheen. */
.step .num{color:transparent; padding:0 .12em; opacity:1;
  background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%),
    linear-gradient(180deg,#F4F3EC 0%,var(--green-2) 46%,var(--green) 100%);
  background-size:300% 100%,100% 100%; background-position:var(--sheen,0%) 0,0 0; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.18)) drop-shadow(0 22px 26px rgba(12,196,129,.22));}
.js .step .num{opacity:var(--p,0);
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.18))
    drop-shadow(calc((1 - var(--p,0)) * 26px) calc(10px + var(--p,0) * 12px) 26px rgba(12,196,129,calc(.22 * var(--p,0))));}

/* cartes des trois temps : micro-trame de points qui s'efface depuis le centre, et lumiere
   qui suit le curseur (--mx/--my poses par ms-methode.js, ordinateur seulement) */
.step .card{position:relative; isolation:isolate; overflow:hidden;}
.step .card > *{position:relative; z-index:1;}
.step .card::before,.step .card::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;}
.step .card::before{opacity:.55;
  background-image:radial-gradient(rgba(237,236,228,.09) 1px,transparent 1.3px); background-size:14px 14px;
  mask-image:radial-gradient(70% 90% at 75% 50%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(70% 90% at 75% 50%,#000 0%,transparent 75%);}
.step .card::after{opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(12,196,129,.13),transparent 65%);}
.step .card.lit::after{opacity:1;}

/* ---- sequence narrative, lecture guidee (ms-story.js, 2026-10-08) : sous .gs, GSAP prend
   la main sur l'allumage par phrase de ms.js ; chaque mot porte sa propre opacite ---- */
.story .k{background-image:linear-gradient(var(--green),var(--green)); background-repeat:no-repeat;
  background-position:0 92%; background-size:100% 1px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
.js .story.gs .line p{color:var(--ink); transform:none;}
.story.gs .k{background-size:0% 1px;}
.story .sw{display:inline-block;}
.story .grad .sw{background:linear-gradient(90deg,var(--green-2),var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent;}