/* ===========================================================
   KARTEL — feuille de style
   Noir & blanc. Violet #8b5cf6 = stratégie. Rouge #f43f5e = exécution.
   Le logo reste toujours blanc, jamais rouge.
   =========================================================== */
:root{
  --bg:#000000;
  --bg2:#141414;
  --bg3:#1e1e1e;
  --line:#2a2a2a;
  --line2:#3a3a3a;
  --ink:#ffffff;
  --muted:#b3b3b3;
  --dim:#7d7d7d;
  --violet:#8b5cf6;
  --rose:#f43f5e;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.9);backdrop-filter:blur(14px)}
nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img.mark{height:24px}
.brand img.flag{height:22px;opacity:.9}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{font-size:12.5px;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.navlinks a:hover,.navlinks a.active{color:var(--ink)}

/* bouton burger : mobile uniquement */
.navtoggle{display:none;background:none;border:1px solid var(--line2);color:var(--ink);
  width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.navtoggle span{display:block;width:18px;height:2px;background:var(--ink);transition:.2s}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){
  .navtoggle{display:flex}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:#000;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:6px 0}
  .navlinks.open{display:flex}
  .navlinks a:not(.btn){padding:17px 28px;border-bottom:1px solid var(--line);font-size:13px}
  .navlinks a.btn{margin:16px 28px;justify-content:center}
}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rose);background:var(--rose);color:#fff;
  padding:14px 24px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  transition:.18s;cursor:pointer;font-family:inherit}
.btn:hover{background:#d92c4a;border-color:#d92c4a;transform:translateY(-1px)}
.btn-violet{background:var(--violet);border-color:var(--violet)}
.btn-violet:hover{background:#7546e0;border-color:#7546e0}
.btn-ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{background:transparent;border-color:var(--ink);transform:translateY(-1px)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- SECTIONS ---------- */
section{padding:92px 0}
.eyebrow{display:flex;align-items:center;gap:11px;color:var(--dim);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:20px;font-family:'SF Mono',ui-monospace,Menlo,monospace}
.eyebrow img{height:15px;opacity:.75}
h1,h2,h3{text-transform:uppercase;letter-spacing:.005em;line-height:1.05;font-weight:800}
h2{font-size:clamp(28px,4.2vw,46px);margin-bottom:16px}
h3{font-size:17px;letter-spacing:.02em}
.lead{color:var(--muted);font-size:17.5px;max-width:620px}
.pagetitle{font-size:clamp(32px,4.8vw,54px);margin-bottom:22px}
.dlrow{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.dlink{background:none;border:none;color:var(--rose);font-family:'SF Mono',ui-monospace,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0;white-space:nowrap;
  text-decoration:underline;text-underline-offset:4px;opacity:.85}
.dlink:hover{opacity:1;color:var(--ink)}
.redline{color:var(--rose);font-weight:700;display:block;margin-top:14px}
.sub{color:var(--dim);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  margin:52px 0 20px;font-family:'SF Mono',monospace}

/* ---------- HERO ---------- */
/* Le visuel est posé en absolu, calé sur le bord droit du conteneur :
   il peut être large et passer sous le texte, sans jamais sortir du cadre. */
.hero{background:#000;padding:60px 0 72px;position:relative;overflow:hidden}
.hero-grid{position:relative;min-height:500px;display:flex;align-items:center}
.hero-inner{position:relative;z-index:2;max-width:680px;min-width:0;padding:26px 0}
.hero-visual{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:66%;max-width:800px;z-index:0;pointer-events:none}
.hero-visual img{width:100%;display:block}
/* voile sombre sur la gauche de l'image : le texte reste lisible par-dessus */
.hero-visual:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 26%,rgba(0,0,0,.25) 50%,rgba(0,0,0,0) 66%)}
.hero h1{font-size:clamp(23px,2.9vw,37px);white-space:nowrap}
.hero .triad{font-size:clamp(17px,2.1vw,25px);font-weight:800;margin-top:20px;text-transform:uppercase}
.hero .triad .v{color:var(--violet)}
.hero .triad .r{color:var(--rose)}
.hero p.sig{color:var(--muted);font-size:17px;max-width:560px;margin:22px 0 32px}
@media(max-width:900px){
  .hero{padding:48px 0 54px}
  .hero-grid{min-height:0;flex-direction:column-reverse;align-items:stretch}
  .hero-visual{position:static;transform:none;width:100%;max-width:none;margin-bottom:24px}
  .hero-visual:after{display:none}
  .hero-inner{max-width:none;padding:0}
}
@media(max-width:470px){.hero h1{white-space:normal}}

/* ---------- CHIFFRES ---------- */
.statband{padding:0 0 10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.stats .s{background:var(--bg2);border:1px solid var(--line);padding:30px 26px}
.stats .s .n{font-size:34px;font-weight:800;line-height:1}
.stats .s:nth-child(odd) .n{color:var(--violet)}
.stats .s:nth-child(even) .n{color:var(--rose)}
.stats .s .l{font-size:13.5px;color:var(--muted);margin-top:9px}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- CARTES ---------- */
.cards{display:grid;gap:18px}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--bg2);border:1px solid var(--line);padding:30px 26px}
.card.rose{border-color:var(--rose)}
.card.violet{border-color:var(--violet)}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}
.card .k{font-family:'SF Mono',monospace;font-size:12px;letter-spacing:.14em;margin-bottom:14px}
.card.rose .k{color:var(--rose)}
.card.violet .k{color:var(--violet)}
@media(max-width:880px){.c3,.c2{grid-template-columns:1fr}}

/* ---------- MOMENTUM ---------- */
.mom{display:flex;border:1px solid var(--line);flex-wrap:wrap;margin-top:22px}
.mom .m{flex:1;min-width:168px;padding:26px 22px;border-right:1px solid var(--line)}
.mom .m:last-child{border-right:none}
.mom .m .no{font-size:28px;font-weight:800;color:var(--rose)}
.mom .m h3{font-size:14.5px;margin-top:9px}

/* ---------- CITATION ---------- */
.pull{border-left:3px solid var(--violet);padding:6px 0 6px 26px;margin:34px 0 0;max-width:720px}
.pull p{font-size:clamp(19px,2.3vw,26px);font-weight:700;line-height:1.3}
.pull .zero{color:var(--rose);margin-top:10px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* ---------- PANNEAUX ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.panel{border:1px solid var(--line);padding:30px 26px;background:var(--bg2)}
.panel .pk{font-family:'SF Mono',monospace;font-size:12px;letter-spacing:.14em;margin-bottom:16px}
.panel.strat{border-color:var(--violet)}.panel.strat .pk{color:var(--violet)}
.panel.exec{border-color:var(--rose)}.panel.exec .pk{color:var(--rose)}
.panel ul{list-style:none}
.panel li{color:var(--muted);font-size:15px;padding:10px 0;border-bottom:1px solid var(--line)}
.panel li:last-child{border-bottom:none}
@media(max-width:880px){.two{grid-template-columns:1fr}}

/* ---------- PREUVE ---------- */
.tst{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}
.did-h{font-family:'SF Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:var(--violet);
  text-transform:uppercase;margin-bottom:9px}
.did{list-style:none;margin:0 0 18px}
.did li{color:var(--muted);font-size:14px;padding:5px 0 5px 16px;position:relative;line-height:1.5}
.did li:before{content:"";position:absolute;left:0;top:13px;width:7px;height:1px;background:var(--rose)}
.person{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:16px}
/* petit bandeau autour des portraits : masque les legers decalages de cadrage */
.person img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(255,255,255,.22);background:#000;box-sizing:border-box}
.roi{display:block;color:var(--rose);font-family:'SF Mono',monospace;font-weight:700;
  font-size:12.5px;letter-spacing:.14em;margin-bottom:14px}
.tst .t{border:1px solid var(--line);background:var(--bg2);padding:28px 24px;display:flex;flex-direction:column}
.tst .t .logo{height:50px;display:flex;align-items:center;margin-bottom:18px}
.tst .t .logo img{max-height:42px;max-width:78%;object-fit:contain}
.tst .t .cat{color:var(--rose);font-size:12.5px;margin-bottom:12px;font-family:'SF Mono',monospace}
.tst .t q{display:block;quotes:none;font-style:italic;color:var(--muted);font-size:14.5px;line-height:1.6;flex:1;margin-bottom:16px}
.tst .t q:before,.tst .t q:after{content:none}
.tst .t .who{font-size:13.5px;color:var(--dim)}
.tst .t .who b{color:var(--ink);font-style:normal}
@media(max-width:880px){.tst{grid-template-columns:1fr}}

/* ---------- OFFRE ---------- */
.nofee{border:1px solid var(--line);background:var(--bg2);padding:22px 26px;margin-top:22px;color:var(--muted);font-size:15.5px}
.nofee b{color:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:22px}
.steps .st .no{font-family:'SF Mono',monospace;color:var(--rose);font-size:12.5px;letter-spacing:.14em}
.steps .st h3{margin:12px 0 8px;font-size:17px}
.steps .st p{color:var(--muted);font-size:14.5px}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

/* ---------- PERIMETRE / CLUB ---------- */
.legend{display:flex;gap:24px;margin:24px 0 20px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.legend i{width:10px;height:10px;display:block}
.legend .lv i{background:var(--violet)}.legend .lr i{background:var(--rose)}
.peri{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.peri .p{background:var(--bg2);border:1px solid var(--line);padding:20px 20px}
.peri .p .no{font-family:'SF Mono',monospace;font-size:18px;font-weight:800;margin-bottom:8px}
.peri .p.v .no{color:var(--violet)}.peri .p.r .no{color:var(--rose)}
.peri .p h3{font-size:14.5px}
@media(max-width:880px){.peri{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.peri{grid-template-columns:1fr}}

/* ---------- TEASER AUTODIAG ---------- */
.teaser-strip{border:1px solid var(--violet);background:linear-gradient(90deg,rgba(139,92,246,.14),rgba(244,63,94,.07));
  padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-top:10px}
.teaser-strip .tx h3{font-size:20px;margin-bottom:7px}
.teaser-strip .tx p{color:var(--muted);font-size:15px}

/* ---------- BIO ---------- */
.bio{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
.bio .ph{position:relative;z-index:1}
.bio .ph img{width:100%;display:block;filter:grayscale(1) contrast(1.05)}
.bio .ph:after{content:"";position:absolute;left:14px;top:14px;right:-14px;bottom:-14px;
  border:1px solid var(--violet);border-right-color:var(--rose);border-bottom-color:var(--rose);z-index:-1}
.tl{list-style:none;margin-top:22px}
.tl li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:none}
.tl .yr{font-family:'SF Mono',monospace;font-size:13px;color:var(--violet)}
.tl li:nth-child(even) .yr{color:var(--rose)}
.tl .tx{color:var(--muted);font-size:15px}
.tl .tx b{color:var(--ink)}
@media(max-width:880px){.bio{grid-template-columns:1fr}.bio .ph:after{display:none}}

/* ---------- RESSOURCES ---------- */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.dlcard{border:1px solid var(--line);background:var(--bg2);padding:26px 24px;display:flex;flex-direction:column}
/* logos des etudes de cas : centres dans une boite de hauteur fixe */
.dlcard .logo{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.dlcard .logo img{max-height:44px;max-width:88%;width:auto;object-fit:contain}
.dlcard .cat{color:var(--violet);font-size:12px;font-family:'SF Mono',monospace;margin-bottom:10px}
.dlcard h3{font-size:16px;margin-bottom:10px}
.dlcard p{color:var(--muted);font-size:14px;flex:1;margin-bottom:18px}
@media(max-width:880px){.dl{grid-template-columns:1fr}}
.guides{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:26px}
.guides h3{margin-bottom:14px;font-size:12.5px;color:var(--dim);letter-spacing:.2em;font-family:'SF Mono',monospace}
.glist{list-style:none}
.glist li{padding:15px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:flex-start}
.glist li .idx{color:var(--violet);font-family:'SF Mono',monospace;font-size:12.5px;padding-top:3px}
.glist li:nth-child(even) .idx{color:var(--rose)}
.glist li .g b{font-size:15.5px;font-weight:600}
.glist li .g small{color:var(--muted);display:block;font-size:13.5px;margin-top:3px}
@media(max-width:880px){.guides{grid-template-columns:1fr}}

/* ---------- CONVICTIONS DEFILANTES ---------- */
.marquee{overflow:hidden}
.mtrack{display:flex;width:max-content;animation:mscroll 48s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.conv{width:440px;padding:40px 34px;flex:none}
.conv .cn{font-family:'SF Mono',monospace;font-size:11.5px;letter-spacing:.18em;color:var(--violet);margin-bottom:14px}
.conv:nth-child(even) .cn{color:var(--rose)}
.conv p{font-size:19px;font-weight:700;line-height:1.3;text-transform:uppercase}
@media(max-width:600px){.conv{width:300px;padding:30px 24px}.conv p{font-size:16px}}

/* ---------- CONTACT ---------- */
.contact{background:var(--bg)}
.contact h2 span.v{color:var(--violet)}
.contact h2 span.r{color:var(--rose)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:34px;align-items:start}
.cbox{border:1px solid var(--line);background:var(--bg2);padding:32px 30px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fgrid .full{grid-column:1/-1}
label.fl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  margin-bottom:7px;font-family:'SF Mono',monospace}
input[type=text],input[type=email],input[type=tel],select,textarea{
  background:#000;border:1px solid var(--line2);color:var(--ink);padding:13px 15px;font-size:15px;width:100%;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet)}
textarea{min-height:100px;resize:vertical}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);padding:12px 14px;cursor:pointer;
  font-size:14px;color:var(--muted);transition:.15s}
.chk:hover{border-color:var(--violet);color:var(--ink)}
.chk input{accent-color:var(--rose);width:15px;height:15px}
.chk.on{border-color:var(--rose);color:var(--ink)}
.okmsg{display:none;border:1px solid var(--violet);background:rgba(139,92,246,.12);padding:16px 20px;margin-top:16px;font-size:15px}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.formnote{color:var(--dim);font-size:12.5px;margin-top:14px}
.direct{border:1px solid var(--line);padding:28px 26px;margin-bottom:18px}
.direct h3{margin-bottom:12px}
.direct p{color:var(--muted);font-size:15px;margin-bottom:18px}
@media(max-width:880px){.cgrid{grid-template-columns:1fr}.checks{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
footer{padding:0 0 46px;color:var(--dim);font-size:13px}
footer .marquee{margin-bottom:40px}
footer .conv{width:400px;padding:30px 30px}
footer .conv p{font-size:16.5px}
@media(max-width:600px){footer .conv{width:280px;padding:24px 22px}footer .conv p{font-size:15px}}
footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center}
footer img.mark{height:20px;opacity:.9}
footer a:hover{color:var(--ink)}

/* ---------- FORMULAIRE DE TELECHARGEMENT ---------- */
.dlform .checks{grid-template-columns:repeat(3,1fr)}
.dlform .chk{font-size:13.5px;padding:11px 13px;align-items:flex-start}
.chk.off{opacity:.35;cursor:not-allowed}
.counter{font-family:'SF Mono',monospace;font-size:11.5px;letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase;margin:14px 0 0}
.counter b{color:var(--rose)}
@media(max-width:980px){.dlform .checks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dlform .checks{grid-template-columns:1fr}}

/* ---------- AUTODIAG ---------- */
/* autodiag condensé : intro à gauche, questionnaire à droite */
.diag-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:40px;align-items:start;margin-top:22px}
.diag-intro{position:sticky;top:104px}
.diag-intro h2{margin-bottom:14px}
.diag-intro .lead{font-size:16px}
@media(max-width:980px){
  .diag-grid{grid-template-columns:1fr;gap:26px}
  .diag-intro{position:static}
}
.diag-box{border:1px solid var(--line);margin-top:0;background:var(--bg2)}
.diag-head{padding:15px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:18px;flex-wrap:wrap}
.diag-head .prog{font-family:'SF Mono',monospace;font-size:12.5px;color:var(--dim)}
.barwrap{height:3px;background:var(--line);flex:1;min-width:140px}
.bar{height:3px;background:linear-gradient(90deg,var(--violet),var(--rose));width:0;transition:width .3s}
.q{padding:24px 22px}
.q .dim{color:var(--violet);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:9px;font-family:'SF Mono',monospace}
.q .qtxt{font-size:19px;font-weight:700;margin-bottom:17px;line-height:1.28}
.opts{display:grid;gap:7px}
.opt{border:1px solid var(--line2);padding:11px 16px;cursor:pointer;font-size:15px;color:var(--ink);
  transition:.15s;background:transparent;text-align:left;width:100%;font-family:inherit}
.opt:hover{border-color:var(--rose);background:rgba(244,63,94,.09)}
.diag-nav{padding:11px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.lnk{background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-family:inherit}
.lnk:hover{color:var(--ink)}.lnk:disabled{opacity:.3;cursor:default}
.gate,.result{padding:26px 22px;display:none}
.gate h3{font-size:21px;margin-bottom:6px}
.gate .teaser{font-size:48px;font-weight:800;color:var(--rose);margin:10px 0;line-height:1}
.gate p{color:var(--muted);max-width:520px;margin-bottom:22px}
.result .rtop{display:grid;grid-template-columns:290px 1fr;gap:42px;align-items:center}
.result .score-big{font-size:70px;font-weight:800;line-height:1}
.result .palier{font-size:19px;font-weight:700;margin:8px 0 6px;text-transform:uppercase}
.result .palier.low{color:var(--rose)}.result .palier.mid{color:var(--violet)}.result .palier.high{color:#4ade80}
.result .rdesc{color:var(--muted);font-size:15.5px}
.chantiers{margin-top:32px;border-top:1px solid var(--line);padding-top:26px}
.chantiers h4{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--dim);margin-bottom:16px;font-family:'SF Mono',monospace}
.qw{border-left:2px solid var(--rose);padding:6px 0 6px 18px;margin-bottom:16px}
.qw b{display:block;margin-bottom:4px}.qw span{color:var(--muted);font-size:14.5px}
@media(max-width:760px){.result .rtop{grid-template-columns:1fr;text-align:center}svg.radar{margin:0 auto}}