h1.pt{line-height:inherit;max-width:none}

:root{--ink:#16151a;--muted:#4f4c56;--accent:#00b1a4;--deep:#007f75;color-scheme:light;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:#030303}

body{background:transparent!important}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;color:#fff;text-align:center;font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;min-height:100vh}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;transition:opacity .4s}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{background:transparent;position:relative;z-index:5}
main,footer{position:relative;z-index:1}
header .wrap{position:relative}
#menu-btn{position:absolute;right:20px;top:50%;margin-top:-22px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:10px;cursor:pointer}
#menu-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
#menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#menu-btn.open span:nth-child(2){opacity:0}
#menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#menu-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding-top:12px;padding-bottom:12px}
.logo{display:block;line-height:0}
.logo img{height:36px;width:auto;max-width:100%}
nav{display:none;position:absolute;right:20px;top:100%;margin-top:6px;min-width:230px;padding:8px;background:#000;border:1px solid rgba(255,255,255,.2);border-radius:28px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
nav.open{display:flex;flex-direction:column;gap:2px}
nav a{color:#c9c6cf;text-decoration:none;padding:10px 14px;border-radius:999px;font-size:1rem}
nav a:hover,nav a.on:hover,nav a:focus-visible{background:#00d9ae;color:#000}
nav a.on{background:#fff;color:#000}
.view{display:none;padding:56px 0 72px}
.view.on{display:block}
h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;letter-spacing:-.03em;margin:0 auto 20px;max-width:14em}
h1 em{font-style:normal;color:var(--deep)}
h2,h1.pt{font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.02em;margin:0 0 16px}
p{margin:0 auto 14px;max-width:62ch}
.lead{font-size:1.15rem;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.btn{display:inline-block;padding:12px 22px;border-radius:99px;text-decoration:none;font-weight:500;border:1.5px solid var(--ink);color:var(--ink);background:rgba(255,255,255,.5)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 28px;margin-top:44px}
.contact{display:flex;flex-direction:column;align-items:center;gap:36px;margin-top:44px}
.contact .svc{flex:0 0 auto;width:min(430px,100%)}
.contact .svc-d a{color:#fff;font-weight:500;overflow-wrap:anywhere;text-decoration:none;transition:color .2s}
.contact .svc-d a:hover,.contact .svc-d a:focus-visible{color:#00d9ae}
footer{padding:24px 0;color:#fff;font-size:.9rem}
a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}header a:focus-visible{outline-color:#fff}
.bg.w{background-color:#030303;background-image:radial-gradient(ellipse at 50% 30%,rgba(0,217,174,.10),transparent 62%),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 78px),url(../img/noise-w.png);background-size:100% 100%,auto,220px 220px;background-repeat:no-repeat,repeat,repeat;background-position:center}
body[data-view="accueil"] .logo img{visibility:hidden}
.ln{position:fixed;z-index:0;height:3px;pointer-events:none;transform-origin:center;transform:rotate(-45deg)}
.ln i{position:absolute;top:0;left:0;height:100%;width:var(--w,420px);background:linear-gradient(90deg,rgba(0,217,174,0),rgba(0,217,174,.55) 70%,#7dffe6);filter:drop-shadow(0 0 5px #00d9ae)}
.ln.rev i{background:linear-gradient(270deg,rgba(0,217,174,0),rgba(0,217,174,.55) 70%,#7dffe6)}
@media (prefers-reduced-motion:reduce){.ln{display:none}}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;color:#000}
.hero-logo{display:block;width:min(680px,92%);height:auto;margin:0 auto 40px}
.hero-logo .lt,.hero-logo .ic,.hero-logo .sp{transform-box:fill-box;transform-origin:center}
.hero-logo .ic{animation:popL 3.75s cubic-bezier(.2,.7,.2,1) .1s infinite alternate both}
.hero-logo .sp{animation:slideL 3.75s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i)*.06s) infinite alternate both}
.hero-logo .lt{animation:up .7s cubic-bezier(.2,.7,.2,1) calc(1.3s + var(--i)*.07s) both}
.hero h1{font-size:clamp(.9rem,3.8vw,3rem);white-space:nowrap;max-width:none;margin:0 auto 18px;animation:fade .8s ease 2.3s both}
.hero h1 em{color:#fff}
.hero .lead{color:#000;margin:0 auto 14px;animation:fade .8s ease 2.6s both}
.hero .btns{justify-content:center;animation:fade .8s ease 2.9s both}
.hero .btn{color:#000;border-color:#000;background:transparent;transition:background .2s,color .2s,border-color .2s}
.hero .btn.pri{background:transparent;border-color:#000;color:#000}
.hero .btn:hover,.hero .btn.pri:hover,.hero .btn:focus-visible{background:#000;border-color:#000;color:#fff}
body[data-view="accueil"] .bg.w{background-color:#00d9ae;background-image:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.22),transparent 62%),repeating-linear-gradient(135deg,rgba(0,0,0,.075) 0 2px,transparent 2px 78px),url(../img/noise-b.png);background-size:100% 100%,auto,220px 220px;background-repeat:no-repeat,repeat,repeat;background-position:center}
body[data-view="accueil"] .ln i{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5) 70%,#fff);filter:drop-shadow(0 0 5px #fff)}
body[data-view="accueil"] .ln.rev i{background:linear-gradient(270deg,rgba(255,255,255,0),rgba(255,255,255,.5) 70%,#fff)}
body[data-view="presentation"] .bg.w,body[data-view="services"] .bg.w{background-image:radial-gradient(ellipse at 50% 30%,rgba(0,217,174,.10),transparent 62%),repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 52px),url(../img/noise-w.png)}
#menu-btn{transition:background .2s,border-color .2s,opacity .6s}
.hero-logo{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
body.intro .hero-logo{transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--s,1));cursor:pointer}
body.intro .hero-logo .word{display:none}
body.intro{overflow:hidden}
#v-accueil.reveal .hero-logo .lt{animation-delay:calc(.35s + var(--i)*.07s)}
body.intro .hero>:not(.hero-logo){display:none}
body.intro footer{display:none}
body.intro #menu-btn{opacity:0;pointer-events:none}
.hero-logo:focus-visible{outline:3px solid #000;outline-offset:8px}
#v-accueil.reveal .hero h1{animation:fade .8s ease .3s both}
#v-accueil.reveal .hero .lead{animation:fade .8s ease .55s both}
#v-accueil.reveal .hero .btns{animation:fade .8s ease .8s both}
@media (prefers-reduced-motion:reduce){.hero-logo{transition:none}}
#menu-btn span{transition:transform .25s,opacity .25s,background .2s}
#menu-btn:hover{background:#00d9ae;border-color:#00d9ae}
#menu-btn:hover span{background:#000}
body[data-view="accueil"] #menu-btn:hover{background:#000;border-color:#000}
body[data-view="accueil"] #menu-btn:hover span{background:#fff}
.hero-logo .st0{fill:#000}
.hero-logo .st1{fill:#fff}
body[data-view="accueil"] #menu-btn{border-color:rgba(0,0,0,.45)}
body[data-view="accueil"] #menu-btn span{background:#000}
body[data-view="accueil"] #menu-btn:focus-visible{outline-color:#000}
body[data-view="accueil"] footer{color:rgba(0,0,0,.7);border-color:rgba(0,0,0,.2)}
.hero-logo .word{transform-box:fill-box;transform-origin:50% 0;transform:translateY(-40px) scale(.62)}
@keyframes popL{0%,16%{opacity:0;transform:scale(.85)}73.3%,100%{opacity:1;transform:none}}
@keyframes slideL{0%,16%{opacity:0;transform:translate(-220px,220px)}80%,100%{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(160px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-logo *,.hero h1,.hero .lead,.hero .btns,.hero .chips{animation:none!important}}
h2,h1.pt{color:#fff}
.lead{color:#fff}
.btn,.btn.pri{color:#fff;border-color:#fff;background:transparent;transition:background .2s,color .2s,border-color .2s}
.btn:hover,.btn.pri:hover,.btn:focus-visible{background:#00d9ae;border-color:#00d9ae;color:#000}
.svc{display:flex;flex-direction:column;gap:8px;flex:0 1 calc((100% - 56px)/3)}
.svc-t{margin:0;padding:16px 20px;border-radius:999px;border:1.5px solid rgba(0,217,174,.7);background:rgba(255,255,255,.06);color:#00d9ae;font-size:1.3rem;line-height:1.25;text-wrap:balance}
.svc-d{flex:1;display:block;padding:4px 12px 14px;border:0;background:none;color:#fff;font:inherit;text-align:center}
.svc-d p{margin:0;font-size:1rem;font-weight:400;color:inherit}
.svc-tbtn[href="contact.html"]{color:#ff005f;border-color:rgba(255,0,95,.8)}
.svc-tbtn[href="contact.html"]:is(:hover,:focus-visible){background:#ff005f;border-color:#ff005f;color:#000}
.svc-tbtn{display:grid;place-items:center;width:100%;cursor:pointer;text-decoration:none;font-family:inherit;font-weight:700;transition:background .2s,color .2s,border-color .2s}
.svc-tbtn span{grid-area:1/1}
.svc-tbtn .t2{visibility:hidden}

.svc-tbtn:is(:hover,:focus-visible,[aria-expanded="true"]){background:#00d9ae;border-color:#00d9ae;color:#000;outline:none}
.svc-tbtn:is(:hover,:focus-visible) .t1{visibility:hidden}
.svc-tbtn:is(:hover,:focus-visible) .t2{visibility:visible}
.btn:hover,.btn:focus-visible,.svc-tbtn:hover,.svc-tbtn:focus-visible,#menu-btn:hover{animation:gbtn .42s steps(1,end) 1}
@keyframes gbtn{0%{translate:-3px 1px;filter:drop-shadow(4px 0 0 #ff005f) drop-shadow(-4px 0 0 #fff)}
14%{translate:4px -1px;filter:drop-shadow(-5px 0 0 #ff005f) drop-shadow(5px 0 0 #fff)}
28%{translate:-2px 0;filter:drop-shadow(3px 1px 0 #ff005f) drop-shadow(-3px -1px 0 #fff)}
42%{translate:3px 1px;filter:drop-shadow(-4px 0 0 #ff005f) drop-shadow(4px 0 0 #fff)}
60%{translate:-1px 0;filter:drop-shadow(2px 0 0 #ff005f) drop-shadow(-2px 0 0 #fff)}
78%{translate:1px 0;filter:drop-shadow(-1px 0 0 #ff005f) drop-shadow(1px 0 0 #fff)}
100%{translate:0 0;filter:none}}
@media (prefers-reduced-motion:reduce){.btn,.svc-tbtn,#menu-btn{animation:none!important}}
.car{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:flex;flex-direction:column}
.car[hidden]{display:none}
.track{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:calc(64px + env(safe-area-inset-top,0px)) 80px calc(64px + env(safe-area-inset-bottom,0px))}
.slide img{display:block;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;border-radius:10px}
.cb{position:absolute;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cb:hover,.cb:focus-visible{background:#00d9ae;border-color:#00d9ae;color:#000;outline:none}
.cx{top:calc(14px + env(safe-area-inset-top,0px));right:14px}
.cp,.cn{top:50%;margin-top:-23px}
.cp{left:14px}
.cn{right:14px}
.dots{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:10px}
.dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}
.dot.on{background:#00d9ae}
.dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
#v-presentation p{font-size:1.2rem;font-weight:300;line-height:1.7;max-width:68ch;text-align:left}
#v-services .lead{font-size:1.2rem;font-weight:300;line-height:1.7;max-width:68ch;color:#fff}
#v-presentation h2,#v-presentation h1.pt{margin-bottom:38px}
h2 em,h1.pt em{font-style:normal;color:#00d9ae}
.trust{margin-top:48px}
.trust h3{margin:0 0 6px;font-size:1.1rem;color:#00d9ae;text-transform:none;letter-spacing:.02em}
.trust-logos{display:block;max-width:100%}
.trust-logos img{display:block;width:min(700px,100%);height:auto;margin:0 auto}
@media (max-width:720px){.svc{flex-basis:100%}.grid>.card{flex-basis:100%}.cp,.cn{display:none}.slide{padding-left:12px;padding-right:12px}}
@media (max-width:720px){.view{padding:36px 0 56px}.logo img{height:30px}}
@media (max-width:720px){.hero h1{white-space:normal;font-size:clamp(1.45rem,6.6vw,2.1rem);line-height:1.2;text-wrap:balance;padding:0 8px}}
@media (max-width:720px){body{line-height:1.4}.hero h1{line-height:1.12}.hero .lead{line-height:1.3}#v-presentation p,#v-services .lead{line-height:1.45}.svc-d p{line-height:1.35}}
.mbr{display:none}
@media (max-width:720px){.mbr{display:inline}}
.tl-stack{display:none}
@media (max-width:720px){.tl-all{display:none!important}.tl-stack{display:flex;flex-direction:column;align-items:center;gap:22px}.tl{overflow:hidden;aspect-ratio:var(--r);height:auto}.tl img{display:block;height:auto;max-width:none}.tl.a{--r:184/84;width:61%}.tl.b{--r:193/84;width:64%}.tl.c{--r:240/84;width:80%}}
@media (max-width:720px){.lead,.hero .lead{font-size:1.04rem}#v-presentation p,#v-services .lead{font-size:1.08rem}.svc-d p{font-size:.93rem}footer{font-size:.8rem}}
@media (orientation:landscape) and (max-height:520px){.slide{padding:calc(6px + env(safe-area-inset-top,0px)) 64px calc(6px + env(safe-area-inset-bottom,0px))}.slide img{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);border-radius:8px}.cx{top:8px;right:10px;width:40px;height:40px}.cp,.cn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px}.cp{left:10px}.cn{right:10px}.dots{bottom:10px;left:50%;right:auto;transform:translateX(-50%);padding:5px 10px;border-radius:99px;background:rgba(0,0,0,.45)}}
@media (max-width:720px) and (orientation:portrait){.slide{padding-left:6px;padding-right:6px}}
@media (max-width:720px){.hero h1{line-height:1.05}h2,h1.pt{line-height:1.12}.svc-t{line-height:1.15}.trust h3{line-height:1.2}}
:root{--ft:"Outfit","Space Grotesk",system-ui,sans-serif}
h1,h2,h3,.svc-t,.svc-tbtn,.trust h3,h1.pt{font-family:var(--ft)}
h1,h2,h1.pt{font-weight:250}
h1 em,h2 em,h1.pt em{font-weight:700}
.hero h1{font-weight:320}
.hero h1 em{font-weight:700}
h1 em,h2 em,.hero h1 em,h1.pt em{font-weight:600}
.svc-t,.svc-tbtn,.trust h3{font-weight:600}

#v-presentation,#v-services,#v-contact{padding-top:24px}
@media (max-width:720px){#v-presentation,#v-services,#v-contact{padding-top:14px}}
#v-presentation h2,#v-services h2,#v-contact h2,#v-presentation h1.pt,#v-services h1.pt,#v-contact h1.pt{margin-bottom:28px}
