/* Polices hébergées sur le site (fichiers dans /fonts/) */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
:root{--bg:#12163a;--surf:rgba(22,27,70,.88);--ink:#ffffff;--mute:#b6b9e6;--acc:#ff8a5b;--acc2:#7c8cff;--line:rgba(124,140,255,.35);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:70px}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.6 "DM Sans",system-ui,sans-serif}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;line-height:1.05;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:800;text-shadow:0 4px 28px rgba(10,14,30,.55)}
h2{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800}
h3{font-size:1.25rem;font-weight:600;margin-bottom:.3em}
p{margin:0 0 1em;color:var(--mute);max-width:60ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
nav{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) 5vw 14px;background:linear-gradient(rgba(14,18,34,.85),transparent)}
.logo{font:800 1.2rem "Bricolage Grotesque",sans-serif;text-decoration:none}
.logo i{display:inline-block;width:.8em;height:.8em;background:var(--acc);margin-right:.45em;transform:rotate(45deg);border-radius:2px}
nav div a{margin-left:1.4rem;text-decoration:none;color:var(--ink);font-weight:500}
nav div a:hover{color:var(--ink)}
main{position:relative;z-index:1}
.sec{min-height:100vh;display:flex;align-items:center;padding:110px 5vw 70px}
.sec.r{justify-content:flex-end}
.box{max-width:620px}
.glass{background:var(--surf);-webkit-border:1px solid var(--line);border-radius:18px;padding:clamp(1.2rem,3vw,2.2rem)}
.btn{display:inline-block;background:var(--acc);color:#2a1308;font-weight:600;padding:.9em 1.6em;border-radius:999px;text-decoration:none;border:0;font-size:1rem;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-3px)}
.btn.o{background:transparent;color:var(--ink);border:1.5px solid var(--line);margin-left:.6rem}
.hero .box{background:rgba(14,18,34,.72);-webkit-border-radius:24px;padding:clamp(1.4rem,3vw,2.4rem)}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(40px) rotateX(-50deg);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.9s + var(--d,0s));animation-play-state:paused}
body.in .hero h1 span{animation-play-state:running}
@keyframes up{to{opacity:1;transform:none}}
.hero p{font-size:1.2rem;color:var(--ink);text-shadow:0 1px 12px rgba(10,12,50,.6)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.5rem}
.svc{border-left:3px solid var(--acc);padding:.2rem 0 .2rem 1rem}
.svc p{margin:0;font-size:.98rem}
.wide{max-width:900px}
ol{list-style:none;margin:1.2rem 0 0;padding:0;counter-reset:s}
ol li{counter-increment:s;position:relative;padding:0 0 1.3rem 3.2rem;border-left:2px dashed var(--line);margin-left:1.1rem}
ol li:last-child{border-color:transparent;padding-bottom:0}
ol li::before{content:counter(s);position:absolute;left:-1.1rem;top:-.1rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--acc2);color:#0d1033;font:800 1rem/2.1rem "Bricolage Grotesque",sans-serif;text-align:center}
ol li{margin-left:1.1rem}
ol p{margin:0}
.thumb{height:90px;border-radius:10px;margin-bottom:.9rem}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.4rem}
.pack{border:1px solid var(--line);border-radius:14px;padding:1.3rem}
.pack.hot{border-color:var(--acc);background:rgba(255,138,91,.09)}
.pack ul{padding-left:1.1rem;margin:.6rem 0 0;color:var(--mute);font-size:.97rem}
.pack li{margin-bottom:.3rem}
label{display:block;font-weight:500;margin:0 0 1rem}
input,textarea{width:100%;margin-top:.35rem;padding:.8em 1em;border-radius:10px;border:1px solid var(--line);background:rgba(10,12,40,.6);color:var(--ink);font:inherit}
textarea{min-height:110px;resize:vertical}
#ok{margin:1rem 0 0;color:var(--acc2)}
footer{position:relative;z-index:1;text-align:center;padding:2rem 5vw calc(2rem + env(safe-area-inset-bottom,0px));color:var(--mute);font-size:.9rem}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--acc);color:#2a1308;padding:.6em 1em;border-radius:8px}.skip:focus{left:8px}
nav.s{background:rgba(14,18,34,.92)}
nav div a.btn{margin-left:1.2rem;padding:.55em 1.1em;color:#2a1308;font-size:.95rem}
.fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;box-shadow:0 8px 24px rgba(0,0,0,.4)}
body.lock .fab{display:none}
.pack{position:relative;display:flex;flex-direction:column}.pack .btn{margin-top:auto;width:100%;text-align:center}.pack ul{margin-bottom:1.1rem}
.pack.hot{box-shadow:0 0 0 1px var(--acc),0 0 30px rgba(255,138,91,.5)}
.price{font:800 2.6rem/1 "Bricolage Grotesque",sans-serif;margin:.2rem 0 .6rem}.price small{font:500 .9rem "DM Sans",sans-serif;color:var(--mute);margin-right:.3rem}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--acc);color:#2a1308;font-weight:600;font-size:.8rem;padding:.25em .9em;border-radius:999px;white-space:nowrap}
.note{margin:1.2rem 0 0;font-size:.9rem}
.proj{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s}
.thumb{height:130px;position:relative;overflow:hidden}
.thumb::before{content:"";position:absolute;left:12px;right:12px;top:12px;height:10px;border-radius:5px;background:rgba(255,255,255,.55)}
.thumb::after{content:"";position:absolute;left:12px;right:42%;bottom:12px;height:56px;border-radius:8px;background:rgba(255,255,255,.35)}
.tg{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1rem}.tg span{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:.15em .7em}
.btn.s{padding:.55em 1.2em;font-size:.92rem;background:transparent;color:var(--ink);border:1.5px solid var(--line)}.btn.s:hover{border-color:var(--acc)}
.sec.c{justify-content:center;min-height:auto;padding-top:50px;padding-bottom:50px}
.stg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.2rem;text-align:center}.stg b{display:block;font:800 clamp(2.2rem,5vw,3.4rem)/1 "Bricolage Grotesque",sans-serif;color:var(--acc)}.stg span{color:var(--mute)}
.car{min-height:190px}.sl{display:none}.sl.on{display:block;animation:up .6s both}.sl p{margin:.8rem 0 0;color:var(--ink);font-size:1.1rem}
.av{display:inline-flex;width:48px;height:48px;border-radius:50%;background:var(--acc2);color:#0d1033;font:800 1rem "Bricolage Grotesque",sans-serif;align-items:center;justify-content:center;margin-right:.8rem}
.who{display:flex;align-items:center;margin-top:1rem}.who small{display:block;color:var(--mute)}.stars{color:#ffc857;letter-spacing:2px}
.cc{display:flex;gap:.6rem;align-items:center;margin-top:1rem}.cc button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1.1rem}
.dots{display:flex;gap:.4rem}.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--acc)}
details{border-bottom:1px solid var(--line);padding:.9rem 0}summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--acc);font-size:1.4rem;line-height:1}details[open] summary::after{content:"–"}details p{margin:.6rem 0 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
select{width:100%;margin-top:.35rem;padding:.8em 1em;border-radius:10px;border:1px solid var(--line);background:#121744;color:var(--ink);font:inherit}
.chk{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}.chk input{width:auto;margin:.3rem 0 0}
.err{color:#ffb4a2;font-size:.88rem;display:block;min-height:1em;font-weight:400}
#ok{min-height:1.4em}#ok.good{color:#8ff0b0;font-weight:600;animation:up .6s both}#ok.bad{color:#ffb4a2}
.btn:disabled{opacity:.6;cursor:wait}
#modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(5,7,20,.75);padding:5vw}
.mbox{position:relative;max-width:620px;max-height:85vh;overflow:auto;background:#161b46;border:1px solid var(--line);border-radius:18px;padding:2rem}.mx{position:absolute;right:12px;top:6px;background:none;border:0;color:var(--ink);font-size:1.9rem;cursor:pointer}
footer{text-align:left}.fgrid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:2rem;max-width:1100px;margin:0 auto 1.5rem}.fgrid a{display:block;color:var(--mute);text-decoration:none;margin:.3rem 0}.fgrid a:hover{color:var(--ink)}.fgrid p{font-size:.92rem}.fgrid .logo{color:var(--ink);font-size:1.3rem;margin-bottom:.6rem}
.soc{display:flex;gap:.8rem;margin-top:.8rem}.fgrid .soc a{display:inline-flex;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;align-items:center;justify-content:center;margin:0}.soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fbot{max-width:1100px;margin:0 auto;border-top:1px solid var(--line);padding-top:1rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}.lk{background:none;border:0;color:var(--mute);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cnt{display:block;font-size:.82rem;color:var(--mute);text-align:right;font-weight:400}
@media(max-width:700px){.btn.o{margin-left:0;margin-top:.6rem}.row2,.fgrid{grid-template-columns:1fr}.fgrid{gap:1.2rem}nav div a.btn{margin-left:0}}
@media(prefers-reduced-motion:reduce){.proj{transition:none}.sl.on,#ok.good{animation:none}}
@media(max-width:700px){nav div a:not(:last-child){display:none}.sec,.sec.r{justify-content:flex-start}.glass{background:rgba(22,27,70,.88)}.hero .box{padding:1.2rem}}
#intro{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;background:linear-gradient(#1c2170,#d0607a);animation:out .9s 2.2s forwards}
@keyframes out{to{opacity:0;visibility:hidden}}
#intro i{width:54px;height:54px;background:var(--acc);border-radius:8px;animation:sp 2s ease-in-out infinite}
@keyframes sp{0%{transform:rotate(45deg) scale(.6)}50%{transform:rotate(225deg) scale(1)}100%{transform:rotate(405deg) scale(.6)}}
#intro b{font:800 2rem "Bricolage Grotesque",sans-serif}
#intro u{display:block;width:180px;height:3px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
#intro u::after{content:"";display:block;height:100%;background:var(--ink);animation:ld 2.1s linear forwards}
@keyframes ld{from{width:0}to{width:100%}}
body.lock{overflow:hidden}
body.lock main,body.lock nav,body.lock footer{visibility:hidden}
main,nav,footer{transition:opacity 1s .5s}
body.lock main,body.lock nav,body.lock footer{opacity:0}
#home{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;text-align:center;padding:5vw;transition:opacity 1s,visibility 1s}
#home.out{opacity:0;visibility:hidden}
.hbox{max-width:780px;background:rgba(14,18,34,.68);-webkit-border-radius:24px;padding:clamp(1.4rem,4vw,2.6rem)}
.hlogo{font:800 1.3rem "Bricolage Grotesque",sans-serif;margin-bottom:1.6rem}
.hlogo i{display:inline-block;width:.8em;height:.8em;background:var(--acc);margin-right:.5em;border-radius:2px;animation:sp 5s linear infinite}
#home h2{font-size:clamp(2.4rem,7vw,5rem);text-shadow:0 4px 30px rgba(20,20,80,.55)}
#home p{margin:0 auto 2rem;color:var(--ink);font-size:1.2rem;text-shadow:0 1px 14px rgba(10,12,50,.7)}
.btn.big{font-size:1.15rem;padding:1.1em 2.4em;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,138,91,.6)}70%,100%{box-shadow:0 0 0 22px rgba(255,138,91,0)}}
.hero{position:relative}
.sec.hero{padding-bottom:120px}
.cue{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);font-size:.85rem;color:var(--ink);text-align:center}
.cue::after{content:"";display:block;width:2px;height:34px;margin:8px auto 0;background:var(--ink);animation:cue 1.6s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0}
.tags span{border:1px solid var(--line);border-radius:999px;padding:.35em .9em;font-size:.9rem;background:rgba(18,22,58,.45)}
.sky{display:none;position:fixed;inset:0;z-index:0;overflow:hidden}
.nogl .sky{display:block}
.nogl{background:linear-gradient(#0b1030,#3b2a8a) fixed}
.sky s{position:absolute;left:-30%;width:300px;height:90px;border-radius:90px;background:rgba(124,140,255,.25);filter:blur(10px);animation:dr 60s linear infinite}
@keyframes dr{to{transform:translateX(160vw)}}
@media(prefers-reduced-motion:reduce){#intro{display:none}.hero h1 span{animation:none;opacity:1;transform:none}html{scroll-behavior:auto}}

.t1{background:linear-gradient(135deg,#ff8a5b,#7c8cff)}.t2{background:linear-gradient(135deg,#7c8cff,#3b4690)}.t3{background:linear-gradient(135deg,#69727f,#ff8a5b)}
.d1{--d:.1s}.d2{--d:.2s}.d3{--d:.3s}.d4{--d:.4s}.d5{--d:.5s}.d6{--d:.6s}
.fw{width:100%}
.sky s:nth-child(1){top:12%}.sky s:nth-child(2){top:30%;animation-delay:-20s;width:420px}.sky s:nth-child(3){top:52%;animation-delay:-35s}.sky s:nth-child(4){top:70%;animation-delay:-8s;width:380px}
/* Page 404 */
body.p404{display:flex;min-height:100vh;align-items:center;justify-content:center;text-align:center;padding:5vw;background:linear-gradient(160deg,#0b1030,#3b2a8a 60%,#6a3fd6);overflow:hidden;position:relative}
.p404 .orb{position:absolute;width:520px;height:520px;max-width:90vw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7c8cff,#5b3df5 45%,#ff6b4a);filter:blur(60px);opacity:.5;animation:fl 12s ease-in-out infinite}
@keyframes fl{50%{transform:translate(40px,-30px) scale(1.08)}}
.p404 .big{font:800 clamp(6rem,24vw,14rem)/1 "Bricolage Grotesque",system-ui,sans-serif;background:linear-gradient(120deg,#fff,#ff8a5b);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
.p404 h1{font-size:clamp(1.8rem,5vw,3rem);margin:.2em 0 .4em}
.p404 p{margin-left:auto;margin-right:auto}
@media(prefers-reduced-motion:reduce){.p404 .orb{animation:none}}

/* Pages juridiques */
.cl{margin:.3rem 0 .8rem;font-size:.88rem;color:var(--mute)}.cl a{color:var(--ink)}
body.doc{background:linear-gradient(160deg,#0b1030,#1c2252 55%,#3b2a8a) fixed;min-height:100vh}
.doc main{max-width:820px;margin:0 auto;padding:120px 5vw 40px}
.doc h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:.2em}
.doc h2{font-size:1.4rem;margin:2.2rem 0 .6rem}
.doc p,.doc li{color:var(--ink);opacity:.92;max-width:none}
.doc ul{padding-left:1.2rem}.doc li{margin-bottom:.45rem}
.doc a{color:var(--acc)}.doc a.btn{color:#2a1308}
.doc .maj{color:var(--mute);font-size:.92rem}
.doc .note-doc{border:1px solid var(--line);border-radius:12px;padding:1rem;background:rgba(14,18,34,.5)}
.doc footer{text-align:left;padding-top:1rem}
.doc nav{background:linear-gradient(rgba(14,18,34,.92),transparent)}
.todo{background:rgba(255,138,91,.22);color:#ffd9c8;padding:.05em .35em;border-radius:5px}
.doc a.logo,.doc a.lk{color:var(--ink)}.doc a.lk{color:var(--mute)}