/* Version « badass » : affiche futuriste, typographie XXL, mouvement */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--sl:clamp(18px,3.2vw,46px)}
h1,h2{text-transform:uppercase}
h1{font-size:clamp(2.7rem,10.5vw,6rem);line-height:.96;letter-spacing:-.03em;max-width:none;margin-inline:auto;text-align:center}
h1 em{font-weight:800;color:transparent;-webkit-text-stroke:2px var(--cy);paint-order:stroke fill;animation:fill 1.1s cubic-bezier(.16,1,.3,1) 2.6s both}
@keyframes fill{to{color:var(--cy);-webkit-text-stroke-color:var(--cy)}}
h2{font-size:clamp(2.1rem,7vw,4.2rem);line-height:1;letter-spacing:-.025em}
.js h2.rv{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.16,1,.3,1)}
.js h2.rv.in{clip-path:inset(-8px 0 -8px 0)}
.sub{font-size:1.12rem}

/* Accueil : portail + sol en perspective */
.hero{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:calc(100svh - 68px);padding:0 0 70px;text-align:center}
.hero .wrap{padding-block:0}
.hero-txt{max-width:none;margin:0 auto}
.lead{margin-inline:auto;max-width:46ch}
.cta,.pts{justify-content:center}
.emblem{position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:min(1100px,118%)!important;max-height:36vh!important;margin:8px auto 0!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)!important;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)!important;filter:drop-shadow(0 0 18px var(--shade)) drop-shadow(0 0 2px var(--cy))}
.floor{position:absolute;left:0;right:0;bottom:0;height:46%;overflow:hidden;pointer-events:none;perspective:700px;
  -webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%)}
.floor::before{content:"";position:absolute;left:-60%;right:-60%;top:0;height:150%;transform-origin:50% 0;transform:rotateX(62deg);
  background-image:linear-gradient(var(--cy) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--cy) 1.5px,transparent 1.5px);background-size:64px 64px;opacity:.35;animation:fly 1.8s linear infinite}
@keyframes fly{to{background-position:0 64px}}
.hero::before{display:none}
.hero .glow{background:radial-gradient(700px 420px at 50% 30%,var(--glow),transparent 72%)}
.pts{margin-top:28px}

/* Bandeau défilant */
.marq{position:relative;z-index:2;margin:-26px -4vw 0;transform:rotate(-1.6deg);background:var(--cy);color:var(--on);overflow:hidden;border-block:2px solid var(--cyh);padding:14px 0}
.marq .track{display:flex;width:max-content;align-items:center;gap:28px;animation:marq 38s linear infinite}
.marq span{font-weight:800;font-size:clamp(1.15rem,3.6vw,1.9rem);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.marq i{width:12px;height:12px;border-radius:50%;border:3px solid var(--on);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
.paused .marq .track{animation-play-state:paused}

/* Sections biseautées */
.alt{border-block:0;clip-path:polygon(0 var(--sl),100% 0,100% calc(100% - var(--sl)),0 100%);padding-block:calc(84px + var(--sl));margin-block:calc(var(--sl) * -.5)}
#moi{margin-top:0}
section{position:relative}

/* Présentation */
.me-photo{width:min(330px,76vw)}
.me-photo img{border-radius:0;border:0;clip-path:polygon(0 0,100% 7%,100% 100%,0 93%);box-shadow:none;inset:0}
.me-photo::before{content:"";position:absolute;inset:0;transform:translate(-14px,-14px);clip-path:polygon(0 0,100% 7%,100% 100%,0 93%);background:linear-gradient(135deg,var(--g1),var(--g2));opacity:.9}
.me-photo::after{content:"";position:absolute;left:-14px;right:14px;top:-14px;bottom:14px;clip-path:polygon(0 0,100% 7%,100% 100%,0 93%);background:var(--bg2);transform:translate(10px,10px) scale(.985);z-index:0}
.me-photo img{z-index:1}
.about-lead{text-transform:uppercase;letter-spacing:.04em}
.vals li{border-radius:0;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);padding:9px 24px;border:0;background:var(--cy);color:var(--on)}
.vals li::before{background:var(--on)}

/* Services : grandes lignes */
.bays{gap:56px 64px}
.bay{font-size:1.1rem;text-transform:uppercase;letter-spacing:.12em}
.svc li{padding:26px 8px 26px 0;transition:padding-left .45s cubic-bezier(.16,1,.3,1)}
.svc li:hover{padding-left:14px}
.svc h3{font-size:clamp(1.3rem,3.4vw,1.75rem);font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.svc svg.ic{width:38px;height:38px}
.svc li::after{height:2px}

/* Étapes */
/* Tarif */
/* Zone */
.radar{width:min(100%,420px)}

/* Contact */
.big{background:var(--bg);border:0;border-radius:0;padding:34px 30px;isolation:isolate}
.big::after{content:"";position:absolute;inset:0;z-index:-1;padding:2px;background:conic-gradient(from var(--a),transparent 0 70%,var(--cy) 100%);animation:spinb 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes spinb{to{--a:360deg}}
.big::before{z-index:-1}
.big b{font-size:clamp(1.7rem,6.4vw,2.7rem);font-weight:800}

/* Curseur lumineux sur toute la page */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.55;background:radial-gradient(420px 420px at var(--px,50%) var(--py,35%),var(--glow),transparent 70%)}
@media(pointer:coarse){body::after{display:none}}
html:not(.js) .floor::before{animation:none}

[data-theme="light"] .floor::before{opacity:.5}
[data-theme="light"] .marq{background:var(--cy)}
[data-theme="light"] .me-photo::after{background:var(--bg2)}
[data-theme="light"] .big{background:#fff}

@media(prefers-reduced-motion:reduce){
  h1 em{animation:none;color:var(--cy)}
  .floor::before,.marq .track,.big::after{animation:none}
  .js h2.rv{clip-path:none;transition:none}
}
@media(min-width:900px){.lead{max-width:62ch}.hero{padding-bottom:56px}h1{font-size:clamp(3rem,7.2vw,5.6rem)}.pts{margin-top:22px}}
.svc h3{line-height:1.2}
@media(max-width:620px){.floor::before{opacity:.22}}

/* Icônes de services animées */
.svc svg.ic{overflow:visible}
.svc svg.ic *{transform-box:fill-box;transform-origin:center}
.svc svg.ic .f{fill:currentColor;stroke:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes dashrun{to{stroke-dashoffset:-8}}
@keyframes scan{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(6px);opacity:0}}
@keyframes chk{0%,12%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes core{0%,100%{transform:scale(.55)}50%{transform:scale(1.15)}}
@keyframes pins{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes drop{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}65%{transform:translateY(8px);opacity:1}80%,100%{transform:translateY(8px);opacity:0}}
@keyframes wr{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes paper{0%{transform:translateY(-5px)}60%,100%{transform:translateY(0)}}
@keyframes buzz{0%,70%,100%{transform:translateX(0)}74%{transform:translateX(-1px)}78%{transform:translateX(1px)}82%{transform:translateX(-1px)}86%{transform:translateX(1px)}90%{transform:translateX(0)}}
@keyframes wave{0%,60%{opacity:0}75%{opacity:1}100%{opacity:0}}
@keyframes prog{0%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes tas{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.svc .led{animation:blink 1.6s ease-in-out infinite}
.svc .l2{animation-delay:.8s}
.svc .dsh{stroke-dasharray:2 2;animation:dashrun 1.2s linear infinite}
.svc .scan{animation:scan 2.4s ease-in-out infinite}
.svc .chk{stroke-dasharray:1;animation:chk 3.2s ease-in-out infinite}
.svc .core{animation:core 2s ease-in-out infinite}
.svc .pins{animation:pins 2s ease-in-out infinite}
.svc .box{animation:drop 2.6s ease-in infinite}
.svc .wr{transform-origin:25% 78%;animation:wr 2.2s ease-in-out infinite}
.svc .paper{animation:paper 2.2s ease-out infinite}
.svc .ph{animation:buzz 3s ease-in-out infinite}
.svc .wv{animation:wave 3s ease-in-out infinite}
.svc .w2{animation-delay:.25s}
.svc .prog{stroke-dasharray:1;animation:prog 2.6s ease-in-out infinite}
.svc .cap{animation:bob 2.6s ease-in-out infinite}
.svc .tas{transform-origin:50% 0;animation:tas 2.6s ease-in-out infinite}
.svc li:hover svg.ic *{animation-duration:calc(var(--sp,1)*.6s)!important}
@media(prefers-reduced-motion:reduce){.svc svg.ic *{animation:none!important}.svc .box,.svc .scan{opacity:0}.svc .wv{opacity:.6}}

/* Étapes : pastilles numérotées lisibles */
.steps{gap:40px 34px}
.steps li{padding-top:76px}
.steps li::before{top:0;left:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.55rem;font-weight:800;line-height:1;color:var(--cy);-webkit-text-stroke:0;
  background:var(--surface);border:2px solid var(--cy);box-shadow:0 0 0 6px var(--glow2)}
.steps li::after{top:27px;left:68px;right:-34px;height:2px;background:linear-gradient(90deg,var(--cy),transparent);opacity:.55}
.steps h3{font-size:1.2rem;font-weight:800}
@media(max-width:620px){.steps li{padding:2px 0 0 78px;min-height:56px}.steps li::after{display:block;top:62px;bottom:-40px;left:27px;right:auto;width:2px;height:auto;background:linear-gradient(var(--cy),transparent)}}

/* Tarifs : deux offres bien distinctes */
.rate{display:grid;gap:22px;grid-template-columns:1fr 1fr;border:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
.plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:30px 28px 28px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);min-width:0}
.plan-main{border-color:var(--cy);background:linear-gradient(160deg,var(--surface),var(--bg2))}
.plan-tag{margin:0 0 14px;padding:5px 12px;background:var(--cy);color:var(--on);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;border-radius:999px}
.plan h3{margin:0 0 6px;font-size:1.2rem;font-weight:600;color:var(--tx)}
.plan-fig{margin:0 0 18px;font-weight:800;font-size:clamp(3.4rem,13vw,5rem);line-height:1;letter-spacing:-.03em;color:var(--cy);-webkit-text-stroke:0;font-variant-numeric:tabular-nums}
.plan-fig small{font-weight:400;font-size:1.1rem;letter-spacing:0;color:var(--mu);margin-left:8px}
.plan-fig-s{font-size:clamp(2.1rem,8vw,3rem);color:var(--tx);margin-bottom:18px}
.plan-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px;color:var(--mu)}
.plan-list li{display:flex;gap:12px;align-items:flex-start}
.plan-list li::before{content:"";flex:none;margin-top:.5em;width:9px;height:9px;border-radius:50%;border:2px solid var(--cy)}
.plan-cta{margin-top:22px}
@media(max-width:760px){.rate{grid-template-columns:1fr}}
[data-theme="light"] .plan{background:#fff;box-shadow:0 14px 30px -22px rgba(60,90,140,.35)}
[data-theme="light"] .plan-main{background:linear-gradient(160deg,#fff,#f3f0ff)}
[data-theme="light"] .steps li::before{background:#fff;color:var(--cy)}

/* Petits écrans / texte agrandi : rien ne dépasse */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
h1{font-size:clamp(1.5rem,10vw,6rem);overflow-wrap:anywhere}
.cta .btn{max-width:100%}
@media(max-width:430px){
  .top .wrap{gap:8px}
  .brand svg{width:118px}
  .top .btn{font-size:14px;padding:8px 11px;gap:6px}
  .top .btn svg{width:16px;height:16px}
  .theme-btn{width:36px;height:36px}
}
@media(min-width:900px){h1{font-size:clamp(3rem,7.2vw,5.6rem)}}
@media(max-width:350px){
  .brand svg{width:100px}
  .top .btn{font-size:13px;padding:7px 9px}
  .top .btn svg{display:none}
}
.cta .btn{font-size:min(1rem,4.4vw)}
.cta .btn span{white-space:nowrap}
@media(max-width:430px){h1{font-size:7.8vw;letter-spacing:-.02em}}