@font-face{font-family:"Plus Jakarta Sans";src:url(plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--bg:#fff;--soft:#f5f7fa;--card:#fff;--line:#e2e7ee;--tx:#0f1b33;--mut:#55617a;--or:#1f5fbf;--or2:#174a96;--navy:#0f1b33;--onor:#fff;--hdr:rgba(255,255,255,.96);--field:#c9d1de;color-scheme:light}
:root[data-theme=dark]{--bg:#0b1220;--soft:#101a2e;--card:#131e35;--line:#243049;--tx:#e8edf7;--mut:#9aa8c4;--or:#6aa5ff;--or2:#9bc0ff;--navy:#0a1120;--onor:#07142b;--hdr:rgba(11,18,32,.95);--field:#33415f;color-scheme:dark}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:16px/1.7 "Plus Jakarta Sans",system-ui,sans-serif;background:var(--bg);color:var(--tx)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;font-weight:700}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--card);color:var(--tx);padding:8px 14px;z-index:99;border:1px solid var(--line)}
:focus-visible{outline:3px solid #7fb0ff;outline-offset:2px}
.grad{color:var(--or)}
/* header */
header{position:sticky;top:0;z-index:40;background:var(--hdr);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
nav ul{display:flex;align-items:center;gap:4px;list-style:none;padding:0}
nav a{display:block;padding:8px 14px;border-radius:6px;font-size:15px;font-weight:500;color:var(--mut);text-decoration:none}
nav a:hover,nav a[aria-current]{color:var(--tx)}
nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--or);border-radius:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:6px;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:inherit;transition:background .15s}
.btn-o{background:var(--or);color:var(--onor)}.btn-o:hover{background:var(--or2)}
.btn-l{border-color:var(--line);color:var(--tx);background:var(--card)}.btn-l:hover{border-color:var(--tx)}
nav a.btn{padding:0 18px;min-height:40px;margin-left:12px;color:var(--onor)}nav a.btn:hover{color:var(--onor);background:var(--or2)}
.menu{display:none;background:var(--card);border:1px solid var(--line);color:var(--tx);width:44px;height:44px;border-radius:6px;font-size:20px;cursor:pointer}
/* hero */
.hero{padding:72px 0 80px;background:var(--soft);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.pill{display:block;font-size:13px;font-weight:600;color:var(--or);margin-bottom:16px}
h1{font-size:clamp(30px,3.8vw,42px);font-weight:700}
.hero p.lead{font-size:18px;color:var(--mut);max-width:540px;margin:20px 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.sub{margin-top:16px;font-size:14px;color:var(--mut)}
.idx{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 24px}
.idx a{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--tx)}
.idx a:last-child{border-bottom:0}.idx a:hover span{color:var(--or)}
.idx b{font-size:13px;color:var(--or);font-weight:700}.idx span{font-weight:600;font-size:16px}.idx small{color:var(--mut)}
/* plateformes */
/* sections */
section.s{padding:80px 0}
.head{max-width:640px;margin-bottom:40px}
.eye{display:block;font-size:13px;font-weight:600;color:var(--or);margin-bottom:10px}
h2{font-size:clamp(24px,2.8vw,32px)}
.head p{margin-top:14px;color:var(--mut);font-size:17px}
/* grille */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px;text-decoration:none;display:flex;flex-direction:column;transition:border-color .15s}
a.tile:hover{border-color:var(--or)}
.c4{grid-column:span 4}.c3{grid-column:span 3}.c2{grid-column:span 2}
.ic{font-size:13px;font-weight:700;color:var(--or);margin-bottom:14px;display:block}
.tile h3{font-size:19px;margin-bottom:8px}.tile p{color:var(--mut);font-size:15px}
.more{margin-top:auto;padding-top:18px;font-size:14px;font-weight:600;color:var(--or)}
/* chiffres */
.stats{background:var(--navy);color:#fff;padding:48px 0;border-block:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stats strong{display:block;font-size:30px;font-weight:700}.stats span{font-size:14px;color:#b6c2da}
/* sections claires alternées */
.light{background:var(--soft);border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:26px;counter-increment:s}
.step::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--or);color:var(--onor);font-size:14px;font-weight:700;margin-bottom:16px}
.step h3{font-size:17px;margin-bottom:8px}.step p{font-size:15px;color:var(--mut)}.step small{display:block;margin-top:12px;font-weight:600;font-size:13px;color:var(--or)}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.tagrow span{padding:6px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500}
/* en-tête de page */
.ph{padding:56px 0 48px;background:var(--soft);border-bottom:1px solid var(--line)}
.ph h1{max-width:760px}.ph p{color:var(--mut);font-size:18px;max-width:620px;margin-top:16px}
/* services */
.row{display:grid;grid-template-columns:56px 1fr 1fr;gap:32px;padding:40px 0;border-top:1px solid var(--line);align-items:start}
.row:last-child{border-bottom:1px solid var(--line)}
.row .n{font-weight:700;color:var(--or)}.row h2{font-size:24px}
.row p{color:var(--mut)}.row ul{padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.row li::before{content:"✓";color:var(--or);font-weight:700;margin-right:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.box{border:1px solid var(--line);border-radius:8px;padding:26px;background:var(--card)}
.box h3{font-size:18px;margin-bottom:8px}.box p{color:var(--mut);font-size:15px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:700;background:var(--or);color:var(--onor);margin-bottom:14px}
/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-size:17px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::after{content:"+";font-size:22px;line-height:1;color:var(--or)}details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--mut);max-width:680px}
/* formulaire */
.fgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
form{display:grid;gap:16px;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:30px}
label{font-weight:600;font-size:14px;display:block;margin-bottom:6px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--field);color:var(--tx);border-radius:6px;padding:12px 14px;font:inherit}
textarea{min-height:120px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chk{display:flex;gap:10px;font-size:14px;color:var(--mut);font-weight:400}.chk input{width:18px;height:18px;margin-top:3px;flex:none}
.ch{display:grid;gap:10px;margin-top:22px}
.ch a{display:block;padding:14px 18px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-weight:600;background:var(--card)}
.ch a:hover{border-color:var(--or)}.ch a small{display:block;color:var(--mut);font-weight:400;font-size:14px}
/* cta final */
.final{border-radius:8px;padding:48px 40px;text-align:center;background:var(--navy);color:#fff;border:1px solid var(--line)}
.final h2{max-width:640px;margin:0 auto}.final p{color:#b6c2da;margin:14px auto 26px;max-width:520px}.final .cta{justify-content:center}
.final .btn-l{background:transparent;color:#fff;border-color:#4b5a7a}.final .btn-l:hover{border-color:#fff}
footer{border-top:1px solid var(--line);background:var(--soft);padding:56px 0 32px;margin-top:80px;color:var(--mut);font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px}
footer b{color:var(--tx)}footer a{display:block;margin-top:8px;text-decoration:none}footer a:hover{color:var(--tx)}
.copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:16px;font-size:13px;text-align:center}
.theme{background:var(--card);border:1px solid var(--line);color:var(--tx);width:40px;height:40px;border-radius:6px;cursor:pointer;display:grid;place-items:center;margin-left:8px}
.theme:hover{border-color:var(--or)}.theme svg{width:18px;height:18px}
.theme .sun{display:none}:root[data-theme=dark] .theme .sun{display:block}:root[data-theme=dark] .theme .moon{display:none}
/* rails réseaux sociaux */
.rail{display:none;position:fixed;top:50%;transform:translateY(-50%);z-index:30;flex-direction:column;align-items:center;gap:10px}
.rail::before,.rail::after{content:"";width:1px;height:70px;background:var(--line)}
.rail.l{left:22px}.rail.r{right:22px}
.rail a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--mut);border:1px solid var(--line);background:var(--card);transition:.15s}
.rail a:hover{color:var(--or);border-color:var(--or)}.rail svg{width:16px;height:16px}
@media(min-width:1320px){.rail{display:flex}}
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}.js .rv.in{opacity:1;transform:none}
@media(max-width:900px){
 .menu{display:block}
 nav ul{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;background:var(--bg);padding:12px 24px 20px;border-bottom:1px solid var(--line)}
 nav ul.open{display:flex}nav a.btn{margin:8px 0 0}.theme{margin:8px 0 0}nav a[aria-current]{box-shadow:none}
 .hero{padding:44px 0 52px}.hero .wrap,.fgrid,.two{grid-template-columns:1fr;gap:32px}
 .bento{grid-template-columns:1fr}.c4,.c3,.c2{grid-column:auto}
 .stats .wrap{grid-template-columns:1fr}.steps,.team{grid-template-columns:1fr}
 .row{grid-template-columns:1fr;gap:12px;padding:32px 0}.f2{grid-template-columns:1fr}
 section.s{padding:56px 0}.final{padding:36px 22px}footer .wrap{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.js .rv{opacity:1;transform:none}html{scroll-behavior:auto}}
/* utilitaires (aucun style en ligne : la CSP les interdit) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide{display:none}
.mt{margin-top:20px}.muted{color:var(--mut)}
.narrow{max-width:860px}
.tight{padding-top:24px}.nobot{padding-bottom:0}.nopad{padding-top:0}
.stack{display:grid;gap:16px}.top{align-items:start}.center-y{align-items:center}
.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}
.steps.three{grid-template-columns:repeat(3,1fr)}
.cards{list-style:none;padding:0}
.cards .eye{margin-bottom:8px}.cards .box h3{margin-bottom:8px}
.lnk{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--or);text-decoration:none}.lnk:hover{text-decoration:underline}
.ideal{font-size:14px;margin-top:14px}.ideal b{color:var(--tx)}
.row div p{margin-top:12px}.row div p:first-of-type{margin-top:12px}
.fabout{margin-top:14px;max-width:320px}
.fsoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fsoc a{display:grid;place-items:center;width:36px;height:36px;margin:0;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--mut)}
.fsoc a:hover{color:var(--or);border-color:var(--or)}.fsoc svg{width:16px;height:16px}
.rail a:hover{color:var(--or)}
footer .brk{word-break:break-all}.loc{display:block;margin-top:8px}
footer .copy a.inl{display:inline;margin-left:14px}
.msg{display:none;padding:14px 18px;border-radius:6px;font-weight:600;font-size:15px;border:1px solid}
.msg.show{display:block}.msg.ok{border-color:#2e8b57;color:var(--tx);background:rgba(46,139,87,.12)}.msg.err{border-color:#c0392b;color:var(--tx);background:rgba(192,57,43,.12)}
.legal h2{font-size:20px;margin:36px 0 10px}.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--mut);margin-top:8px}.legal ul{padding-left:22px}.legal a{color:var(--or)}.legal b{color:var(--tx)}
.nf{text-align:center;padding:110px 0}.nf .wrap{display:grid;justify-items:center;gap:14px}.nf .cta{justify-content:center;margin-top:12px}
.code404{font-size:72px;font-weight:800;color:var(--or);line-height:1}
@media(max-width:900px){.three,.four,.steps.three{grid-template-columns:1fr}.tight{padding-top:8px}}
/* bouton « Nous contacter » toujours mis en évidence */
nav a.btn.btn-o,nav a.btn.btn-o:hover,nav a.btn.btn-o[aria-current]{color:var(--onor);background:var(--or);box-shadow:none;border-radius:6px}
nav a.btn.btn-o:hover{background:var(--or2)}
/* canaux de contact avec icônes */
.ch a{display:flex;align-items:center;gap:16px}
.chi{flex:none;width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);color:var(--or)}
.chi svg,.qrow svg{width:22px;height:22px}
.qrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--mut)}
.qrow span{margin-right:6px}
.qrow a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);color:var(--or);transition:border-color .15s}
.qrow a:hover{border-color:var(--or)}
.hint{font-size:13px;color:var(--mut);margin-top:-6px}
.msg a{color:inherit;text-decoration:underline}
/* accueil : services décalés, reliés entre eux */
.hero .wrap.one{grid-template-columns:1fr}.hero .wrap.one>div{max-width:780px}
.c6{grid-column:span 6}
.flow{display:grid;gap:64px}
.chain{position:relative;display:grid;gap:26px}
.chain::before{content:"";position:absolute;left:50%;top:44px;bottom:30px;width:2px;margin-left:-1px;background:var(--line);transform-origin:top;transition:transform 1.2s ease}
.js .chain:not(.in)::before{transform:scaleY(0)}
.grp{font-size:13px;font-weight:600;color:var(--or);letter-spacing:.02em}
.node{position:relative;width:calc(50% - 48px)}
.node.r{margin-left:calc(50% + 48px)}
.nbox{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;transition:border-color .2s}
.nbox:hover{border-color:var(--or)}
.nbox h3{font-size:18px;margin-bottom:6px}.nbox p{color:var(--mut);font-size:15px}
.dot{position:absolute;top:32px;width:12px;height:12px;border-radius:50%;background:var(--or);box-shadow:0 0 0 4px var(--bg)}
.node.l .dot{right:-54px}.node.r .dot{left:-54px}
.con{position:absolute;top:37px;height:2px;width:48px;background:var(--or)}
.node.l .con{right:-48px}.node.r .con{left:-48px}
.js .con{transform:scaleX(0);transform-origin:left;transition:transform .7s ease .3s}
.js .node.in .con{transform:scaleX(1)}
.chain.solo::before,.chain.solo .dot,.chain.solo .con{display:none}
.lnk2{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--or);text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;padding-bottom:2px;transition:background-size .35s ease}
.lnk2::after{content:" →"}
.nbox:hover .lnk2,.lnk2:focus-visible{background-size:100% 2px}
@media(max-width:900px){
 .chain::before{left:8px}
 .node,.node.r{width:auto;margin-left:40px}
 .node.l .dot,.node.r .dot{left:-38px;right:auto}
 .node.l .con,.node.r .con{left:-26px;right:auto;width:26px}
 .c6{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){.js .con{transform:none}.js .chain:not(.in)::before{transform:none}}
/* formations : thèmes à la une */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat .box{border-top:3px solid var(--or)}
.feat .box h3{font-size:21px}
.tick{list-style:none;padding:0;margin-top:16px;display:grid;gap:8px;font-size:14px;color:var(--mut)}
.tick li::before{content:"✓";color:var(--or);font-weight:700;margin-right:10px}
.sp{margin-top:56px;margin-bottom:24px}
@media(max-width:900px){.feat{grid-template-columns:1fr}}

/* logo Kodem Group : bleu nuit en thème clair, blanc en thème sombre */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ac{fill:var(--ac)}
.wm{display:inline-flex;align-items:baseline;color:var(--tx);--ac:var(--or);font-weight:700;font-size:24px;line-height:1;letter-spacing:-.02em}
.wm svg{display:block;flex:none;overflow:visible}
.wm .wk{height:.72em;width:.576em;margin-right:.07em}
.wm .wo{height:.57em;width:.57em;margin-right:.035em}
.wm .wgp{display:inline-flex;align-items:baseline;font-weight:500;color:var(--mut);margin-left:.3em}
.wm.lg{font-size:28px}
/* plateformes : deux rangées défilantes, sens opposés */
.band{padding:28px 0 32px;border-bottom:1px solid var(--line)}
.band h2{font-size:13px;font-weight:600;color:var(--mut);margin-bottom:18px}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq+.mq{margin-top:14px}
.trk{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq.rev .trk{animation-direction:reverse}
.mq:hover .trk{animation-play-state:paused}
.trk ul{display:flex;gap:14px;padding:0 14px 0 0;list-style:none;margin:0}
.trk li{display:flex;align-items:center;gap:12px;height:64px;padding:0 22px;background:#fff;border:1px solid var(--line);border-radius:12px;color:#0b1730;font-weight:600;font-size:15px;white-space:nowrap}
.trk img{height:30px;width:auto;max-width:56px;display:block}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.trk{animation:none}.mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.trk ul[aria-hidden]{display:none}}