:root{
  --bg:#f4f6f8; --surface:#fff; --ink:#0b1b2b; --muted:#506274; --line:#d6dee6;
  --night:#07111c; --night2:#0c1d2d; --on-night:#eef3f7; --acc:#ffc700; --acc2:#5ad1ff; --on-acc:#07111c;
  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:#0b1927;--surface:#122434;--ink:#eef3f7;--muted:#9fb2c3;--line:#25405a}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(68px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 Barlow,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Barlow Semi Condensed",Barlow,sans-serif;margin:0 0 .5em;line-height:1.02;letter-spacing:-.01em}
h1{font-size:clamp(2.8rem,9vw,6.2rem);font-weight:700}
h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:700}
h3{font-size:1.3rem;font-weight:700}
p{margin:0 0 1em;max-width:60ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc2);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;background:var(--acc);color:var(--on-acc);font:700 1.05rem "Barlow Semi Condensed",sans-serif;text-decoration:none;padding:14px 26px;border:0;border-radius:4px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.btn.line{background:transparent;color:inherit;border:2px solid currentColor}

header{position:fixed;inset:env(safe-area-inset-top,0px) 0 auto 0;z-index:30;height:68px;transition:background .25s}
header.solid{background:rgba(7,17,28,.92);backdrop-filter:blur(8px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--night);z-index:31}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px;color:var(--on-night)}
.logo{font:700 1.3rem "Barlow Semi Condensed",sans-serif;text-decoration:none;line-height:1.05;display:flex;align-items:center;gap:10px}
.logo i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--acc);transform:rotate(-6deg)}
.logo i svg{width:22px;height:22px}
.logo small{display:block;color:var(--acc);font-size:.82rem;font-weight:600;letter-spacing:.04em}
nav{display:flex;gap:28px}nav a{text-decoration:none;font-weight:500;opacity:.8}nav a:hover{opacity:1;color:var(--acc2)}


/* hero */
.hero{position:relative;background:var(--night);color:var(--on-night);min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:110px 0 70px}
.hero svg.circuit{position:absolute;inset:0;width:100%;height:100%}
.trace{fill:none;stroke:#1b3248;stroke-width:2}
.pulse{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-dasharray:60 900;animation:run 4.5s linear infinite;filter:drop-shadow(0 0 6px var(--acc))}
.pulse.b{animation-duration:6s;animation-delay:-2s;stroke:var(--acc2);filter:drop-shadow(0 0 6px var(--acc2))}
.pulse.c{animation-duration:5.2s;animation-delay:-3.4s}
@keyframes run{to{stroke-dashoffset:-960}}
.hero .in{position:relative;z-index:2}
.tag{display:inline-block;border:1px solid #28445e;border-radius:99px;padding:6px 16px;font-size:.95rem;margin-bottom:26px;color:#cfe0ee}
.rot{display:block;color:var(--acc);height:1.05em;overflow:hidden}
.rot span{display:block;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.hero p.lead{font-size:1.3rem;color:#b9c8d6;margin:22px 0 32px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

.marq{background:var(--acc);color:var(--on-acc);overflow:hidden;white-space:nowrap;border-block:3px solid var(--night)}
.marq div{display:inline-block;padding:12px 0;font:700 1.5rem "Barlow Semi Condensed",sans-serif;animation:mq 30s linear infinite;text-transform:uppercase}
.marq span{margin:0 22px}
@keyframes mq{to{transform:translateX(-50%)}}

section{padding:88px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stats div{border-left:4px solid var(--acc);padding-left:16px}
.stats strong{display:block;font:700 clamp(2.4rem,5vw,3.8rem) "Barlow Semi Condensed",sans-serif;line-height:1}
.stats span{color:var(--muted)}
@media(max-width:640px){.stats{grid-template-columns:1fr}}

/* services : onglets */
.svc{display:grid;grid-template-columns:.8fr 1.2fr;margin-top:36px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.tabs{display:flex;flex-direction:column;background:var(--surface)}
.tabs button{all:unset;cursor:pointer;padding:20px 24px;font:700 1.2rem "Barlow Semi Condensed",sans-serif;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;transition:background .2s,padding .2s}
.tabs button:last-child{border-bottom:0}
.tabs button:hover{padding-left:32px}
.tabs button[aria-selected=true]{background:var(--acc);color:var(--on-acc)}
.tabs button:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.pane{background:var(--night);color:var(--on-night);padding:40px;min-height:320px;display:flex;flex-direction:column;justify-content:center}
.pane h3{font-size:2rem}
.pane p{color:#b9c8d6}
.pane ul{padding-left:1.1em;color:#b9c8d6}
.pane.swap{animation:sw .35s ease}
@keyframes sw{from{opacity:0;transform:translateX(18px)}}
@media(max-width:760px){.svc{grid-template-columns:1fr}.pane{min-height:0;padding:28px}}

/* photos */
.hg{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hg h1{font-size:clamp(2.6rem,6vw,4.8rem)}
.shot{margin:0 14px 14px 0}
.shot img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:14px 14px 0 var(--acc)}
@media(max-width:860px){.hg{grid-template-columns:1fr;gap:40px}.shot{max-width:520px}}
.ban img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 40%;border-radius:8px;margin-top:36px}
@media(max-width:640px){.ban img{aspect-ratio:4/3}}
.ban2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.ban2 img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
@media(max-width:640px){.ban2{grid-template-columns:1fr}}
/* manière de travailler */
.why{background:var(--surface);border-block:1px solid var(--line)}
.wg{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.wg div{border-top:4px solid var(--ink);padding-top:16px}
.wg h3{margin-bottom:.3em}
.wg p{color:var(--muted);font-size:1rem;margin:0}
@media(max-width:860px){.wg{grid-template-columns:1fr 1fr}}@media(max-width:520px){.wg{grid-template-columns:1fr}}

/* méthode */
.flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px}
.flow::before{content:"";position:absolute;top:19px;left:0;height:4px;width:100%;background:var(--line)}
.flow::after{content:"";position:absolute;top:19px;left:0;height:4px;width:var(--fill,0%);background:var(--acc);transition:width 1.4s ease}
.flow div{position:relative;z-index:1;padding-top:52px}
.flow div::before{content:"";position:absolute;top:8px;left:0;width:26px;height:26px;border-radius:50%;background:var(--bg);border:4px solid var(--acc)}
.flow p{color:var(--muted)}
@media(max-width:760px){.flow{grid-template-columns:1fr}.flow::before,.flow::after{display:none}.flow div{padding-top:44px}}

/* contact */
.contact{background:var(--night);color:var(--on-night)}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.phone{display:block;font:700 clamp(2.2rem,6vw,3.8rem) "Barlow Semi Condensed",sans-serif;color:var(--acc);text-decoration:none;margin:10px 0 20px;line-height:1}
.contact p{color:#b9c8d6}
.box{border:2px solid #28445e;border-radius:10px;padding:32px}
.box h3{font-size:1.8rem}
@media(max-width:760px){.cg{grid-template-columns:1fr;gap:36px}}
footer{background:var(--night);color:#8ea3b5;padding:22px 0;font-size:.92rem;border-top:1px solid #16293b}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

.call{display:none}
@media(max-width:760px){.call{display:block;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;box-shadow:0 8px 24px rgba(0,0,0,.4)}}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ===== ajouts multi-pages ===== */
.wg{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.legal h2{font-size:1.7rem;margin:1.8em 0 .5em}.legal h2:first-child{margin-top:0}
.legal p,.legal li{max-width:72ch}.legal ul{padding-left:1.2em}.legal a{color:var(--ink);font-weight:600}
.form{display:grid;gap:16px}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);width:100%}
.form textarea{min-height:150px;resize:vertical}
.form .fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.form .fr{grid-template-columns:1fr}}
.form .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--muted);font-size:.95rem}
.form .chk input{width:auto;margin-top:5px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form button{justify-self:start}
.form button[disabled]{opacity:.6;cursor:wait}
.msg{padding:14px 16px;border-radius:6px;font-weight:500}
.msg.ok{background:#e3f6e8;color:#0b3d1a;border:1px solid #9fd8ae}
.msg.err{background:#fde8e6;color:#5a1710;border:1px solid #f0a9a1}
.msg a{color:inherit;font-weight:700}
.info{background:var(--night);color:var(--on-night);border-radius:10px;padding:32px}
.info h3{color:var(--acc)}.info p{color:#b9c8d6;margin:0 0 1em}
.info .phone{margin:6px 0 18px;font-size:clamp(1.8rem,3vw,2.3rem);white-space:nowrap}
.ct{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
@media(max-width:860px){.ct{grid-template-columns:1fr;gap:32px}}
nav{gap:22px}nav a{font-size:.97rem;white-space:nowrap}.btn{white-space:nowrap}.ban2 img{height:auto}
.menu{display:none;background:none;border:2px solid var(--on-night);color:var(--on-night);border-radius:4px;padding:7px 14px;font:700 1rem "Barlow Semi Condensed",sans-serif;cursor:pointer}
.mnav{display:none;position:fixed;left:0;right:0;top:calc(68px + env(safe-area-inset-top,0px));background:var(--night);padding:8px 20px 24px;z-index:29;flex-direction:column;border-top:1px solid #16293b}
.mnav a{color:var(--on-night);text-decoration:none;font:600 1.25rem "Barlow Semi Condensed",sans-serif;padding:14px 0;border-bottom:1px solid #16293b}
.mnav.open{display:flex}header.open{background:var(--night)}
@media(max-width:1200px){nav{display:none}.menu{display:block}}
@media(max-width:600px){.bar>.btn{display:none}}
.hero.sub{min-height:auto;padding:130px 0 84px}
.hero.sub .wrap{width:100%}
.hero.sub h1{font-size:clamp(2.3rem,5.4vw,4rem)}
.hero.sub p.lead{font-size:1.2rem}
.crumb{margin:0 0 18px;font-size:.95rem;color:#9fb6c9;max-width:none}
.crumb a{text-decoration:none;color:var(--acc2)}
.two{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:12px}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:32px}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--ink);border-radius:8px;padding:24px;text-decoration:none;transition:transform .2s,border-color .2s}
a.card:hover{transform:translateY(-4px);border-top-color:var(--acc)}
.card h3{margin-bottom:.35em}
.card p{color:var(--muted);margin:0 0 .8em;font-size:1rem}
.card p:last-child{margin:0}
.card .more{font:700 1rem "Barlow Semi Condensed",sans-serif;color:var(--ink)}
.cards.five{grid-template-columns:repeat(6,1fr)}
.cards.five>*{grid-column:span 2}.cards.five>*:nth-child(n+4){grid-column:span 3}
@media(max-width:860px){.cards.five{grid-template-columns:1fr 1fr}.cards.five>*,.cards.five>*:nth-child(n+4){grid-column:auto}}
@media(max-width:560px){.cards.five{grid-template-columns:1fr}}
.alt{background:var(--surface);border-block:1px solid var(--line)}
.alt .card{background:var(--bg)}
.tips{background:var(--night);color:var(--on-night);border-radius:10px;padding:32px;margin-top:36px}
.tips h3{color:var(--acc);font-size:1.6rem}
.tips ul{margin:0;padding-left:1.2em;color:#b9c8d6}.tips li{margin:.4em 0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.chips li,.chips a{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 16px;text-decoration:none}
.chips a:hover{border-color:var(--acc);box-shadow:inset 0 -3px 0 var(--acc)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font:700 1.25rem "Barlow Semi Condensed",sans-serif;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.8em 0 0;color:var(--muted)}
.fl{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;width:100%}
.fl a{color:#b9c8d6;text-decoration:none}.fl a:hover{color:var(--acc)}