/* ============================================================
   POLICES DE LA CHARTE · à activer dès réception des fichiers
   Licence WEB obligatoire (une licence bureau ne suffit pas).
   Déposer les fichiers .woff2 dans /assets/fonts/ puis décommenter.
   ============================================================
@font-face{font-family:'Larsseit';src:url('../fonts/Larsseit-Medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Museo Sans';src:url('../fonts/MuseoSans-300.woff2') format('woff2');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'Museo Sans';src:url('../fonts/MuseoSans-700.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
*/
:root{
  --petrole:#035667; --tdeep:#007E93; --tlight:#52C0CF; --grisvert:#3E9A94; --orange:#C2410C; --orange-graph:#F97402; --sand:#F7F3EC; --sand2:#EEE6D9;
  --bg:#FFFFFF; --bg-soft:#F7F3EC; --bg-soft2:#EEE6D9; --ink:#035667; --ink-2:#46646C; --line:#D6E9EE; --card:#FFFFFF;
  --l1:#035667; --l2:#007E93; --l3:#2F7F7A; --l4:#52C0CF; --l5:#BFE6EC;
  /* Charte : Larsseit (titres) et Museo Sans (texte). Équivalents en ligne en secours. */
  --head:'Larsseit','Outfit','Segoe UI',Arial,sans-serif;
  --body:'Museo Sans','Museo','Nunito Sans','Segoe UI',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#06232A;--bg-soft:#0A2F37;--bg-soft2:#0E3A43;--ink:#E6F5F8;--ink-2:#A9CBD3;--line:#1C4A54;--card:#0B2D35;--l5:#7FCFDB}
}
:root[data-theme="dark"]{--bg:#06232A;--bg-soft:#0A2F37;--bg-soft2:#0E3A43;--ink:#E6F5F8;--ink-2:#A9CBD3;--line:#1C4A54;--card:#0B2D35;--l5:#7FCFDB}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tlight);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);margin:0;letter-spacing:-0.015em}
h2{font-size:clamp(30px,4vw,46px);line-height:1.08;font-weight:600;max-width:24ch}
.kicker{font-family:var(--head);font-weight:500;color:var(--tdeep);font-size:15px;margin:0 0 14px}
.lede{color:var(--ink-2);font-size:19px;max-width:62ch;margin:16px 0 0}
section{padding:80px 0}

/* motif signature : les 5 strates en filets */
.strata{display:grid;gap:3px;width:72px;margin:0 0 26px}
.strata i{display:block;height:3px;border-radius:3px}
.strata i:nth-child(1){background:var(--l5)}.strata i:nth-child(2){background:var(--l4)}.strata i:nth-child(3){background:var(--l3)}.strata i:nth-child(4){background:var(--l2)}.strata i:nth-child(5){background:var(--l1)}

.btn{display:inline-flex;align-items:center;font-family:var(--head);font-weight:600;font-size:17px;text-decoration:none;border-radius:999px;padding:15px 28px;border:0;cursor:pointer}
.btn-primary{background:var(--orange);color:#fff}.btn-primary:hover{background:#9A3412}
.btn-ghost{color:var(--tdeep);padding:15px 6px;background:none;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.btn-line{background:none;border:1.5px solid var(--tdeep);color:var(--tdeep);padding:12px 22px;font-size:16px}
.btn-line:hover{background:var(--tdeep);color:#fff}

header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.nav img{height:38px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-family:var(--head);font-weight:500;font-size:16px}
.nav ul a{text-decoration:none;color:var(--ink-2)}.nav ul a:hover{color:var(--ink)}
.nav .btn{padding:11px 22px;font-size:15px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo{background:#fff;border-radius:8px;padding:4px 8px}}

/* 1 hero */
.hero{padding:56px 0 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.hero h1{font-size:clamp(40px,5.6vw,70px);line-height:1.02;font-weight:600;letter-spacing:-0.025em}
.hero h1 .dur{display:block;color:var(--tdeep)}
.hero .nfs{font-size:19px;color:var(--ink-2);max-width:56ch;margin:26px 0 34px}
.hero .nfs strong{color:var(--ink);font-weight:700}
.ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.visual{position:relative}
.visual .photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:62% center;border-radius:28px}
.visual .app{position:absolute;left:-44px;bottom:-34px;width:168px;border-radius:24px;box-shadow:0 24px 50px -18px rgba(3,86,103,.55);border:4px solid var(--bg)}
.visual figcaption{font-size:14px;color:var(--ink-2);margin:46px 0 0 140px}
.offers-line{margin-top:56px;border-top:1px solid var(--line);padding-top:26px}
.offers-line p{font-family:var(--head);font-weight:500;margin:0 0 14px}
.chips{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.chip{display:block;text-decoration:none;background:var(--bg-soft);border-radius:14px;padding:13px 14px 15px}
.chip:hover{background:var(--bg-soft2)}
.chip b{display:block;font-family:var(--head);font-weight:600;font-size:15px;line-height:1.25}
.chip span{display:block;font-size:13.5px;color:var(--tdeep);margin-top:4px}
.refs{margin-top:44px;background:var(--bg-soft);padding:30px 0}
.refs .wrap{display:flex;align-items:baseline;gap:14px 36px;flex-wrap:wrap}
.refs h3{font-size:15px;font-weight:500;color:var(--ink-2)}
.refs ul{display:flex;flex-wrap:wrap;gap:10px 30px;list-style:none;margin:0;padding:0;font-family:var(--head);font-weight:600;font-size:18px}
.refs small{width:100%;color:var(--ink-2);font-size:14px}

/* 2 problème */
.quotes{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px 40px;max-width:1000px}
.quotes li{font-family:var(--head);font-size:21px;line-height:1.35;padding-left:30px;position:relative}
.quotes li::before{content:"«";position:absolute;left:0;top:-2px;color:var(--tlight);font-size:30px;line-height:1}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:56px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--head);font-weight:600;font-size:clamp(36px,4.6vw,54px);line-height:1;color:var(--petrole)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stat b{color:var(--tlight)}}
.stat span{color:var(--ink-2);font-size:16px}
.verdict{font-family:var(--head);font-size:clamp(23px,2.5vw,30px);font-weight:600;margin:40px 0 0;max-width:34ch;line-height:1.2}
.wish{margin-top:56px;background:var(--petrole);color:#fff;border-radius:28px;padding:56px clamp(28px,6vw,80px);position:relative;overflow:hidden}
.wish blockquote{margin:0;font-family:var(--head);font-weight:500;font-size:clamp(28px,3.6vw,44px);line-height:1.15;max-width:24ch;letter-spacing:-0.02em;position:relative}
.wish p{margin:20px 0 0;color:#CDE9EF;font-size:18px;position:relative}
.wish::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:38%;background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(82,192,207,.18) 22px 24px)}

/* 3 escalier interactif */
.stairs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:start;margin-top:32px}
.step{all:unset;cursor:pointer;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--card);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s,box-shadow .2s}
.step:focus-visible{outline:3px solid var(--tlight);outline-offset:3px}
.step .hd{padding:14px 16px;color:#fff}
.step .hd em{display:block;font-style:normal;font-family:var(--head);font-size:13px;font-weight:600}
.step .hd strong{font-family:var(--head);font-weight:600;font-size:19px;line-height:1.1}
.step .bd{padding:12px 16px 14px;font-size:14px;color:var(--ink-2);line-height:1.4}
.step .bd b{display:block;font-family:var(--head);font-weight:600;color:var(--ink);font-size:15px}
.step[data-l="1"] .hd{background:var(--l1)}.step[data-l="2"] .hd{background:var(--l2)}.step[data-l="3"] .hd{background:var(--l3)}
.step[data-l="4"] .hd{background:var(--l4);color:#02414E}.step[data-l="5"] .hd{background:var(--l5);color:#02414E}
.step[data-l="1"]{margin-top:96px}.step[data-l="2"]{margin-top:72px}.step[data-l="3"]{margin-top:48px}.step[data-l="4"]{margin-top:24px}
.step[aria-selected="true"]{box-shadow:0 0 0 3px var(--tdeep);border-color:transparent;transform:translateY(-6px)}
.js .stairs .step{opacity:0;transform:translateY(40px)}
.js .stairs.in .step{opacity:1;transform:none}
.js .stairs.in .step[data-l="2"]{transition-delay:.12s}.js .stairs.in .step[data-l="3"]{transition-delay:.24s}.js .stairs.in .step[data-l="4"]{transition-delay:.36s}.js .stairs.in .step[data-l="5"]{transition-delay:.48s}
.stairs-legend{display:flex;justify-content:space-between;margin-top:12px;color:var(--ink-2);font-size:14px}
.detail{margin-top:26px;display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;background:var(--bg-soft);border-radius:24px;padding:34px 40px}
.detail .tag{font-family:var(--head);font-weight:500;color:var(--tdeep);font-size:15px}
.detail h3{font-size:28px;font-weight:600;margin:4px 0 14px}
.detail dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px}
.detail dt{font-family:var(--head);font-weight:600;font-size:14px;color:var(--tdeep);padding-top:2px}
.detail dd{margin:0;color:var(--ink)}
.detail .screen{justify-self:center;width:100%;max-width:280px}
.detail .screen img{border-radius:20px;border:1px solid var(--line);background:#fff;max-height:340px;object-fit:cover;object-position:top;width:100%}
.mock{background:#fff;color:#035667;border-radius:20px;border:1px solid var(--line);padding:18px}
.mock h5{margin:0 0 12px;font-family:var(--head);font-size:14px;font-weight:600}
.mock .row{font-size:12.5px;margin:10px 0 4px;display:flex;justify-content:space-between}
.mock .bar{height:8px;border-radius:8px;background:#E2F1F4;overflow:hidden}.mock .bar i{display:block;height:100%;background:#3E9A94;border-radius:8px}
.mock .dial{font-family:var(--head);font-size:44px;font-weight:600;color:#007E93;line-height:1;margin:6px 0}
.mock small{display:block;color:#46646C;font-size:11.5px;margin-top:12px}
.punch{font-family:var(--head);font-weight:600;font-size:21px;line-height:1.35;margin-top:30px;max-width:60ch}

/* 4 catalogue en sélecteur */
.cat{background:var(--bg-soft)}
.tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:40px}
.tab{all:unset;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px 14px}
.tab:hover{border-color:var(--tlight)}
.tab:focus-visible{outline:3px solid var(--tlight);outline-offset:2px}
.tab b{display:block;font-family:var(--head);font-weight:600;font-size:15px;line-height:1.25;color:var(--ink)}
.tab span{display:block;font-size:13px;color:var(--tdeep);margin-top:4px}
.tab[aria-selected="true"]{background:var(--petrole);border-color:var(--petrole)}
.tab[aria-selected="true"] b{color:#fff}.tab[aria-selected="true"] span{color:#BFE6EC}
.offer{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px}
.offer[hidden]{display:none}
.offer .moment{font-family:var(--head);font-weight:500;color:var(--tdeep);font-size:15px}
.offer h3{font-size:34px;font-weight:600;margin:4px 0 6px;line-height:1.1}
.offer .tagline{font-family:var(--head);font-size:21px;margin:0 0 22px;font-weight:500}
.offer h4{font-size:14px;font-weight:600;color:var(--tdeep);margin:18px 0 6px}
.offer ul{margin:0;padding-left:20px}.offer li{margin-bottom:7px}
.offer p{margin:0;color:var(--ink-2)}
.offer aside{border-left:1px solid var(--line);padding-left:40px;display:flex;flex-direction:column}
.offer .btn{margin-top:auto;align-self:flex-start}
.badge{display:inline-block;background:var(--tdeep);color:#fff;font-family:var(--head);font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px;margin-left:10px;vertical-align:middle}
.price{margin-top:22px;color:var(--ink-2)}.price b{color:var(--ink);font-family:var(--head);font-weight:600}

/* 5 comment ça marche + 5 métiers */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.s3{border-top:3px solid var(--l3);padding-top:20px}
.s3:nth-child(1){border-color:var(--l1)}.s3:nth-child(3){border-color:var(--l4)}
.s3 .n{font-family:var(--head);font-weight:600;font-size:15px;color:var(--tdeep)}
.s3 h3{font-size:24px;font-weight:600;margin:6px 0 2px}
.s3 .lv{font-size:14.5px;color:var(--tdeep);font-family:var(--head);margin-bottom:10px}
.s3 p{margin:0;color:var(--ink-2)}
.metiers{margin-top:56px;background:var(--bg-soft);border-radius:24px;padding:32px 36px}
.metiers h3{font-size:24px;font-weight:600}
.metiers ul{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.metiers li b{display:block;font-family:var(--head);font-weight:600;font-size:16px}
.metiers li span{font-size:14.5px;color:var(--ink-2);line-height:1.45;display:block;margin-top:4px}

/* 6 preuves */
.promises{list-style:none;margin:40px 0 0;padding:0;counter-reset:p}
.promises li{font-family:var(--head);font-weight:500;font-size:clamp(21px,2.4vw,29px);line-height:1.25;padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:22px;align-items:baseline}
.promises li::before{counter-increment:p;content:counter(p);font-size:15px;color:var(--tdeep);min-width:16px}
.proof-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:64px}
.pcard{background:var(--bg-soft);border-radius:22px;padding:26px}
.pcard h3{font-size:16px;font-weight:600;margin-bottom:8px}
.pcard p{margin:0;color:var(--ink-2);font-size:15.5px}
.pcard blockquote{margin:0;font-family:var(--head);font-size:19px;line-height:1.35}
.pcard cite{display:block;margin-top:10px;font-style:normal;color:var(--ink-2);font-size:14px}
.founder{border:2px dashed var(--line);background:none;display:flex;gap:16px;align-items:center}
.founder .ph{flex:0 0 70px;height:70px;border-radius:50%;background:var(--bg-soft2);display:grid;place-items:center;color:var(--ink-2);font-size:12px;text-align:center;line-height:1.2}

/* 7 faq + final */
.faq-final{background:var(--bg-soft)}
.ff{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--head);font-weight:600;font-size:18px;padding:16px 36px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:24px;color:var(--tdeep);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;color:var(--ink-2)}
.final{background:var(--petrole);color:#fff;border-radius:28px;padding:40px}
.final h2{color:#fff;font-size:clamp(30px,3.6vw,44px)}
.final .lede{color:#CDE9EF;font-size:17px}
form{display:grid;gap:12px;margin-top:24px}
form label{font-family:var(--head);font-weight:500;font-size:14px;display:grid;gap:6px;color:#CDE9EF}
form input,form textarea,form select{font:inherit;font-size:16px;padding:11px 14px;border:0;border-radius:12px;color:#035667;background:#fff}
form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .btn{justify-content:center;margin-top:4px}
form small{color:#CDE9EF;font-size:13px}
.final .alt{margin:14px 0 0;color:#CDE9EF;font-size:15px}.final .alt a{color:#fff}
footer{padding:30px 0;font-size:14px;color:var(--ink-2)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer em{color:var(--tdeep)}
footer a{color:inherit;text-decoration:none}
footer a:hover{text-decoration:underline}


/* === V3 · forme inspirée des sites premium de coaching === */
:root{--team:url('../img/hero-equipe.jpg')}
.hero{padding:48px 0 0}
.hero-grid{grid-template-columns:1fr 1fr;gap:56px}
.collage{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:170px 150px 170px;gap:14px}
.collage>*{border-radius:26px;overflow:hidden;position:relative}
.t-team1{grid-row:1/3;background:var(--team) 58% center/cover}
.t-app{grid-row:1/2;background:#EAF5F7;display:flex;justify-content:center;align-items:flex-start;padding-top:14px}
.t-app img{width:62%;border-radius:18px;box-shadow:0 18px 30px -18px rgba(3,86,103,.6)}
.t-stat{grid-row:2/4;background:var(--petrole);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:flex-end}
.t-stat b{font-family:var(--head);font-size:52px;line-height:1;font-weight:600}
.t-stat span{font-size:15px;color:#CDE9EF;margin-top:8px;line-height:1.35}
.t-team2{grid-row:3/4;background:var(--team) 70% 16%/250% auto}
.t-cap{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:#035667;font-family:var(--head);font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px}
.hero .ctas{margin-bottom:6px}
.hero h1{font-size:clamp(38px,4.4vw,58px)}

/* bandeau de références défilant */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:52px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:56px;width:max-content;animation:defile 38s linear infinite;font-family:var(--head);font-weight:600;font-size:21px;color:var(--ink-2)}
.marquee:hover .track{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
.refs-cap{text-align:center;color:var(--ink-2);font-size:14px;margin:14px 0 0}

/* grands chiffres */
.bigstats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.bigstats div{background:var(--bg-soft);border-radius:24px;padding:28px 24px}
.bigstats b{display:block;font-family:var(--head);font-weight:600;font-size:clamp(40px,4.6vw,60px);line-height:1;color:var(--tdeep);letter-spacing:-0.02em}
.bigstats span{display:block;margin-top:10px;color:var(--ink);font-size:16px;line-height:1.4}

/* visages */
.faces{margin-top:44px}
.faces h3{font-size:24px;font-weight:600}
.faces p.sub{color:var(--ink-2);margin:6px 0 0}
.facegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:24px}
.face{text-align:left}
.face .ph{aspect-ratio:4/5;border-radius:24px;background:var(--bg-soft2);display:grid;place-items:center;color:var(--ink-2);font-size:13px;border:2px dashed var(--line)}
.face b{display:block;font-family:var(--head);font-weight:600;margin-top:10px;font-size:16px}
.face span{color:var(--ink-2);font-size:14px}

@media (max-width:780px){
  .hero-grid{grid-template-columns:1fr}
  .collage{grid-template-rows:130px 110px 130px;gap:10px}
  .t-stat b{font-size:38px}
  .bigstats{grid-template-columns:1fr 1fr}
  .facegrid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}


/* === V4 · images décollées, en léger mouvement === */
.step{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .5s}
.js .stairs.in .step:hover{transform:translateY(-8px);box-shadow:0 22px 40px -24px rgba(3,86,103,.55)}
.collage>*{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.collage>*:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 26px 50px -26px rgba(3,86,103,.55)}
.detail{overflow:visible}
.detail .screen{position:relative;height:360px;max-width:330px;width:100%;justify-self:center}
.float{position:absolute;border-radius:24px;will-change:transform;transition:transform .25s ease-out}
.float.back{inset:26px 70px 34px 0;background:var(--team) center/cover;transform:rotate(-5deg);box-shadow:0 30px 60px -30px rgba(3,86,103,.55)}
.float.front{right:0;top:0;width:58%;transform:rotate(4deg);box-shadow:0 34px 60px -24px rgba(3,86,103,.65)}
.float.front img{border-radius:22px;border:4px solid #fff;background:#fff;max-height:none}
.float.front .mock{border:4px solid #fff}
.float-wrap{position:absolute;inset:0;animation:flotte 7s ease-in-out infinite}
.float-wrap.b{animation-delay:-3.5s}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:780px){.detail .screen{height:300px}}
@media (prefers-reduced-motion:reduce){.float-wrap{animation:none}.float{transition:none}}


/* === V5 · sections lisibles et mise en page « titre à gauche, rangées à droite » === */
section{padding:104px 0}
.band-sand{background:var(--sand)}
.band-dark{background:var(--petrole);color:#fff}
.sec-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:600;font-size:14px;color:var(--tdeep);margin:0 0 18px}
.sec-kicker::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.band-dark .sec-kicker{color:var(--tlight)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.split .head{position:sticky;top:120px}
.split .head .lede{font-size:18px}
.rows{display:grid}
.row{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:28px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.ico{width:52px;height:52px;border-radius:16px;background:var(--bg-soft2);color:var(--tdeep);display:grid;place-items:center}
.band-sand .ico{background:#fff}
.row h3{font-size:21px;font-weight:600;line-height:1.25}
.row .meta{display:block;font-family:var(--head);font-weight:500;font-size:14px;color:var(--tdeep);margin:2px 0 6px}
.row p{margin:6px 0 0;color:var(--ink-2)}
.row .num{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--tdeep);color:var(--tdeep);display:grid;place-items:center;font-family:var(--head);font-weight:600}
.row.promise h3{font-size:clamp(20px,2.1vw,26px);font-weight:500;padding-top:10px}
.wishband{padding:110px 0;background:#02343F}
.wishband blockquote{margin:0;font-family:var(--head);font-weight:500;font-size:clamp(32px,4.4vw,56px);line-height:1.1;letter-spacing:-0.02em;max-width:22ch}
.wishband p{margin:24px 0 0;color:#CDE9EF;font-size:19px}
.wishband .wrap{position:relative}
.wishband .wrap::after{content:"";position:absolute;right:28px;top:-30px;bottom:-30px;width:30%;background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(82,192,207,.22) 22px 24px);border-radius:20px}
#references{background:var(--sand);padding-bottom:72px;margin-top:0}
#references .marquee{margin-top:0;border-top:0}
.hero{padding-bottom:64px}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:28px}.split .head{position:static}.wishband .wrap::after{display:none}}

@media (max-width:1020px){
  .chips,.tabs{grid-template-columns:repeat(3,1fr)}
  .stairs{grid-template-columns:repeat(5,minmax(170px,1fr));overflow-x:auto;padding:4px 4px 10px}
  .metiers ul{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:780px){
  body{font-size:16px} section{padding:68px 0} .wrap{padding:0 20px}
  .nav ul{display:none} .hero{padding-top:36px}
  .hero-grid,.detail,.offer,.ff,.proof-row{grid-template-columns:1fr}
  .visual .photo{aspect-ratio:4/3}
  .visual .app{width:118px;left:12px;bottom:-26px;border-radius:18px}
  .visual figcaption{margin:36px 0 0 140px;font-size:13px}
  .chips,.tabs{grid-template-columns:1fr 1fr}
  .stats,.steps3{grid-template-columns:1fr;gap:22px}
  .stairs{grid-template-columns:1fr;overflow:visible}
  .step[data-l]{margin-top:0}
  .stairs-legend{display:none}
  .detail{padding:26px}
  .offer{padding:26px;gap:24px}
  .offer aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
  .metiers ul{grid-template-columns:1fr}
  form .two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.js .stairs .step{opacity:1;transform:none}}

/* === V6 · home allégée, hero photo plein cadre, page offre === */
.hero-band{position:relative;min-height:min(86vh,760px);display:flex;align-items:center;padding:90px 0;color:#fff;
  background:linear-gradient(90deg,rgba(2,52,63,.94) 0%,rgba(3,86,103,.86) 38%,rgba(3,86,103,.35) 62%,rgba(3,86,103,0) 80%),var(--team) 70% center/cover}
.hb-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;width:100%}
.hb-kicker{font-family:var(--head);font-weight:600;font-size:15px;color:#BFE6EC;margin:0 0 16px}
.hero-band h1,.offer-hero h1{font-family:var(--head);font-weight:600;font-size:clamp(40px,5.2vw,68px);line-height:1.03;letter-spacing:-0.025em;color:#fff;margin:0;max-width:17ch}
.hero-band h1 span{display:block;color:#7FD6E2}
.hb-sub{font-size:19px;max-width:48ch;margin:24px 0 32px;color:#E2F3F6}
.hb-sub strong{color:#fff}
.hb-ghost{color:#fff;background:none;text-decoration:underline;text-underline-offset:5px;padding:15px 6px}
.hb-app{justify-self:end;margin:0;width:200px;position:relative}
.hb-app img{border-radius:26px;border:5px solid #fff;box-shadow:0 40px 70px -30px rgba(0,0,0,.6);transform:rotate(4deg)}
.hb-app figcaption{color:#035667;background:rgba(255,255,255,.92);font-size:13px;margin:16px auto 0;padding:6px 12px;border-radius:999px;width:max-content;font-family:var(--head);font-weight:500}
.chips-band{padding:34px 0 40px}
.cb-title{font-family:var(--head);font-weight:500;margin:0 0 14px}
.refs6{padding:0 0 72px}
.refs6 .marquee{margin-top:0;border-top:0}
.constat{padding:110px 0}
.mini-stats{display:grid;gap:10px;margin-top:28px;color:var(--ink-2);font-size:16px}
.mini-stats b{font-family:var(--head);font-weight:600;font-size:26px;color:var(--petrole);margin-right:6px}
.quotes.q1{grid-template-columns:1fr;margin-top:6px;gap:18px}
.stairs.compact .step{cursor:default}
.more{margin-top:26px}.more a{font-family:var(--head);font-weight:600;color:var(--tdeep);text-underline-offset:5px}
.ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.ocard{position:relative;display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 26px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.ocard:hover{transform:translateY(-6px);box-shadow:0 24px 44px -26px rgba(3,86,103,.5)}
.ocard.star{border-color:var(--tdeep);box-shadow:0 0 0 1px var(--tdeep)}
.ocard .badge{position:absolute;top:-12px;left:22px;margin:0}
.ocard .m{font-family:var(--head);font-weight:500;font-size:14px;color:var(--tdeep)}
.ocard h3{font-size:24px;font-weight:600;margin:6px 0 6px;line-height:1.15}
.ocard p{margin:0 0 22px;color:var(--ink-2)}
.ocard .go{margin-top:auto;font-family:var(--head);font-weight:600;color:var(--tdeep);text-decoration:underline;text-underline-offset:5px}
.note{margin-top:20px;font-size:14px;color:var(--ink-2);font-style:italic}
.proofband{padding:96px 0}
.pb-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:60px;align-items:center}
.proofband blockquote{margin:0;font-family:var(--head);font-weight:500;font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-0.015em}
.proofband cite{display:block;font-style:normal;font-family:var(--body);font-size:15px;color:var(--ink-2);margin-top:16px}
.pb-side p{color:var(--ink-2)}
.finalband{background:var(--petrole);color:#fff;padding:100px 0}
.finalband .fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.finalband h2{color:#fff;font-size:clamp(34px,4.4vw,56px)}
.finalband .lede{color:#CDE9EF}
.finalband form{margin-top:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:28px}
.offer-hero{padding:56px 0 90px;background:var(--petrole);color:#fff}
.offer-hero h1{max-width:18ch;font-size:clamp(34px,4.4vw,56px)}
.offer-hero .sec-kicker{color:var(--tlight)}
.crumb{font-size:14px;color:#BFE6EC;margin:0 0 40px}.crumb a{color:#fff}
.oh-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.oh-visual{position:relative;height:340px}
.oh-visual .float.front{width:56%}
@media (max-width:900px){
  .hero-band{min-height:auto;padding:70px 0 60px;background:linear-gradient(180deg,rgba(2,52,63,.92),rgba(3,86,103,.8)),var(--team) 70% center/cover}
  .hb-grid,.pb-grid,.finalband .fb-grid,.oh-grid{grid-template-columns:1fr}
  .hb-app{justify-self:start;width:150px}
  .ocards{grid-template-columns:1fr}
  .oh-visual{height:280px}
}

/* === V7 · color script Perfilment === */
:root{--cs1:#02343F;--cs2:#035667;--cs3:#007E93;--cs4:#52C0CF;--cs5:#F7F3EC;--cs6:#C2410C}
.colorscript{display:flex;height:8px;width:100%}
.colorscript i{display:block;height:100%}
.colorscript i:nth-child(1){flex:10;background:var(--cs1)}.colorscript i:nth-child(2){flex:20;background:var(--cs2)}
.colorscript i:nth-child(3){flex:12;background:var(--cs3)}.colorscript i:nth-child(4){flex:8;background:var(--cs4)}
.colorscript i:nth-child(5){flex:45;background:#E9DFD0}.colorscript i:nth-child(6){flex:5;background:var(--cs6)}

/* === V8 · les 6 moments clés dans la bande du souhait === */
.wishband .wrap::after{display:none}
.wish-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center}
.moments .mt{font-family:var(--head);font-weight:600;font-size:15px;color:#7FD6E2;margin:0 0 14px}
.moments ol{list-style:none;margin:0;padding:0;position:relative}
.moments ol::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:rgba(82,192,207,.35)}
.moments li a{display:flex;align-items:center;gap:16px;text-decoration:none;color:#fff;padding:8px 0;position:relative}
.moments .mi{flex:0 0 44px;height:44px;border-radius:50%;background:#02343F;border:1.5px solid rgba(82,192,207,.6);color:#7FD6E2;display:grid;place-items:center;transition:background .25s,color .25s,transform .25s}
.moments li a:hover .mi{background:#52C0CF;color:#02343F;transform:scale(1.06)}
.moments b{display:block;font-family:var(--head);font-weight:600;font-size:16px;line-height:1.2}
.moments em{display:block;font-style:normal;font-size:13.5px;color:#BFE6EC}
.wishband p{max-width:46ch}
@media (max-width:900px){.wish-grid{grid-template-columns:1fr;gap:36px}}
.hb-3{font-family:var(--head);font-size:21px;line-height:1.5;color:#fff}

/* === V10 · la carotte verticale === */
.core-v{position:relative;padding-top:34px}
.core-v .up{position:absolute;top:0;left:0;font-family:var(--head);font-weight:600;font-size:13px;color:var(--tdeep);display:flex;align-items:center;gap:8px}
.core-v .up::before{content:"";width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid var(--tdeep);margin-left:21px}
.core-v ol{list-style:none;margin:0;padding:0}
.lv{display:grid;grid-template-columns:56px 52px 1fr;gap:18px;align-items:center;min-height:96px}
.lv .seg{align-self:stretch;background:var(--bg-soft2);transition:background .7s ease}
.lv5 .seg{border-radius:28px 28px 0 0}.lv1 .seg{border-radius:0 0 28px 28px}
.lv .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--ink-2);background:var(--bg);transition:all .5s ease}
.lv>div{opacity:.4;transform:translateX(8px);transition:opacity .6s ease,transform .6s ease;padding:10px 0}
.lv .st{display:block;font-family:var(--head);font-weight:500;font-size:13px;color:var(--tdeep)}
.lv b{display:block;font-family:var(--head);font-weight:600;font-size:21px;line-height:1.2;margin-top:2px}
.lv p{margin:4px 0 0;color:var(--ink-2);font-size:15.5px}
.lv p strong{color:var(--ink);font-weight:600}
.core-v.in .lv>div{opacity:1;transform:none}
.core-v.in .lv .ic{border-color:var(--tdeep);color:var(--tdeep)}
.core-v.in .lv1 .seg{background:#02343F}.core-v.in .lv2 .seg{background:#035667}.core-v.in .lv3 .seg{background:#007E93}
.core-v.in .lv4 .seg{background:#52C0CF}.core-v.in .lv5 .seg{background:#BFE6EC}
.core-v.in .lv1 *{transition-delay:0s}.core-v.in .lv2 .seg,.core-v.in .lv2>div,.core-v.in .lv2 .ic{transition-delay:.25s}
.core-v.in .lv3 .seg,.core-v.in .lv3>div,.core-v.in .lv3 .ic{transition-delay:.5s}
.core-v.in .lv4 .seg,.core-v.in .lv4>div,.core-v.in .lv4 .ic{transition-delay:.75s}
.core-v.in .lv5 .seg,.core-v.in .lv5>div,.core-v.in .lv5 .ic{transition-delay:1s}
@media (max-width:900px){.lv{grid-template-columns:36px 44px 1fr;gap:12px}.lv .ic{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.lv>div{opacity:1;transform:none}.lv .seg,.lv>div,.lv .ic{transition:none!important}}

/* === V12 · cartes d'offres avec chiffre clé === */
.ocards{grid-template-columns:repeat(2,1fr);gap:20px}
.ocard{display:grid;grid-template-columns:1fr 170px;gap:24px;align-items:stretch;padding:30px 30px}
.otext{display:flex;flex-direction:column}
.otext p{margin:0 0 20px}
.ofig{border-left:1px solid var(--line);padding-left:24px;display:flex;flex-direction:column;justify-content:center}
.ofig b{font-family:var(--head);font-weight:600;font-size:48px;white-space:nowrap;line-height:1;color:var(--tdeep);letter-spacing:-0.02em}
.ofig span{margin-top:8px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.ofig.todo{border-left:1px dashed var(--line)}
.ofig.todo span{font-family:var(--head);font-weight:500;color:#9AB3B9;font-size:13px}
@media (max-width:900px){.ocards{grid-template-columns:1fr}.ocard{grid-template-columns:1fr 120px}.ofig b{font-size:42px}}

/* === V13 === */
.src{display:block;font-size:12.5px;color:var(--ink-2);margin-top:10px}
.otext .pb{display:block;font-size:13.5px;color:var(--ink-2);margin:-8px 0 18px;padding-left:12px;border-left:2px solid var(--line)}
.mini-stats span{line-height:1.5}

/* === V14 === */
.bigstats.b3{grid-template-columns:repeat(3,1fr)}
.lv .mes{display:inline-block;margin-top:8px;font-family:var(--head);font-weight:500;font-size:13px;color:var(--tdeep);background:var(--bg-soft);border-radius:999px;padding:4px 12px}
@media (max-width:900px){.bigstats.b3{grid-template-columns:1fr}}

/* ===== Compléments Perfilment (13/10/2026) =====
   1) Bandes claires (sable) et cartes blanches : la page est en thème sombre
      par défaut, mais ces zones gardent un fond clair ; leur texte doit donc
      reprendre l'encre du thème clair (constat Mehdi : texte invisible). */
.band-sand,.band-sand h2,.band-sand h3,.band-sand h4,.ocard,.ocard h3{color:#02343F}
.band-sand .lede,.band-sand p,.band-sand li,.band-sand .refs-cap,.band-sand .bigstats span{color:#2F4F57}
.band-sand .note,.band-sand .src,.otext .pb,.ofig span,.ocard p{color:#3C5A62}
.band-sand .sec-kicker,.ofig b,.ocard .go{color:var(--tdeep)}
.marquee .track{color:#2F4F57}
/* 2) Logos clients dans le bandeau défilant */
.marquee .track img{height:34px;width:auto;max-width:150px;object-fit:contain;opacity:.85;filter:grayscale(1);transition:opacity .3s,filter .3s}
.marquee .track img:hover{opacity:1;filter:none}
/* 3) Bouton « Se connecter » visible dans l'en-tête */
.nav .nav-right{display:flex;align-items:center;gap:12px}
.btn-login{background:transparent;color:var(--tlight);border:1.5px solid var(--tlight);padding:12px 22px;font-size:16px}
.btn-login:hover{background:var(--tlight);color:#02343F}
@media (max-width:900px){.nav ul{display:none}.btn-login{padding:10px 16px;font-size:15px}}
/* 4) Vidéo de présentation */
.video-sec{padding:84px 0}
.video-sec .head{text-align:center;max-width:760px;margin:0 auto 28px}
.video-sec h2{margin:0 auto}
.video-sec .byline{color:var(--ink-2);margin:12px 0 0;font-size:17px}
.video-frame{position:relative;aspect-ratio:16/9;max-width:960px;margin:0 auto;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);background:#000}
.video-frame iframe,.video-frame img{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame img{object-fit:cover}
.video-frame .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,52,63,.25);border:0;cursor:pointer;padding:0}
.video-frame .play span{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:999px;background:var(--orange);box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .25s}
.video-frame .play:hover span{transform:scale(1.08)}
/* 5) Témoignages */
.temoignages{padding:84px 0}
.temoignages h2{text-align:center;max-width:none;margin:0 auto}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
.tcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 28px;color:#02343F}
.tcard blockquote{margin:0;flex:1;font-size:18px;line-height:1.6;color:#1E3E46}
.tcard figcaption{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:15px}
.tcard figcaption img,.tcard .ini{width:52px;height:52px;border-radius:999px;object-fit:cover;flex:none;border:1px solid var(--line)}
.tcard .ini{display:flex;align-items:center;justify-content:center;background:#E3F3F6;color:var(--tdeep);font-family:var(--head);font-weight:600}
.tcard .who{flex:1;min-width:0}
.tcard .who b{display:block;font-family:var(--head);font-weight:600}
.tcard .who span{color:#3C5A62}
.lnk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);color:#3C5A62;text-decoration:none}
.lnk:hover{border-color:#0A66C2;color:#0A66C2}
/* 6) Équipe */
.equipe{padding:84px 0}
.equipe h2{text-align:center;max-width:none}
.equipe .lede{text-align:center;max-width:60ch;margin:14px auto 0}
.equipe h3{text-align:center;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--tlight);margin:52px 0 22px}
.tgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tgrid5{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.mcard img,.mcard .ini{width:104px;height:104px;border-radius:999px;object-fit:cover;border:1px solid var(--line)}
.mcard .ini{display:flex;align-items:center;justify-content:center;background:#0E3A43;color:var(--tlight);font-family:var(--head);font-weight:600;font-size:30px}
.mcard b{font-family:var(--head);font-weight:600;font-size:17px;margin-top:6px}
.mcard span{color:var(--ink-2);font-size:14px}
.mcard .lnk{color:var(--ink-2);margin-top:4px}
@media (max-width:900px){.tgrid,.tgrid4{grid-template-columns:1fr 1fr}.tgrid5{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:600px){.tgrid{grid-template-columns:1fr}.tgrid5{grid-template-columns:1fr 1fr}}
/* 7) Corrections après contrôle visuel : les cartes de chiffres clés restent
   sombres dans la bande sable ; navigation sans retour à la ligne. */
.band-sand .bigstats div{color:#fff}
.band-sand .bigstats b{color:var(--tlight)}
.band-sand .bigstats span{color:#CDE9EF}
.nav a,.btn{white-space:nowrap}
@media (max-width:1180px){.nav ul{gap:18px;font-size:15px}}
@media (max-width:1040px){.nav ul{display:none}}