@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/atkinson-hyperlegible-normal-400.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/atkinson-hyperlegible-normal-700.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/lexend-variable.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/lexend-variable.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/lexend-variable.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/lexend-variable.woff2") format("woff2")}

:root{--ink:#14162B;--ink2:#1B1E3F;--line:#2F3366;--text:#ECEBFA;--muted:#A9ACD0;--cyan:#2EE6F0;--violet:#9B7BF2;--pink:#F27AEC;
--grad:linear-gradient(90deg,#2EE6F0,#8AB8F8 35%,#9B7BF2 60%,#F27AEC);
--display:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;--body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--ink);color:var(--text);font:18px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
/* Fond : grille de plan qui dérive, deux halos */
.bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.grid{position:absolute;inset:-60px;background-image:linear-gradient(rgba(155,123,242,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(155,123,242,.10) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 100%);animation:drift 24s linear infinite}
@keyframes drift{to{transform:translate(56px,56px)}}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.34}
.o1{width:44vmax;height:44vmax;left:-14vmax;top:-16vmax;background:#2EE6F0;animation:float1 18s ease-in-out infinite alternate}
.o2{width:40vmax;height:40vmax;right:-14vmax;bottom:-16vmax;background:#F27AEC;animation:float2 22s ease-in-out infinite alternate}
@keyframes float1{to{transform:translate(8vmax,6vmax)}}
@keyframes float2{to{transform:translate(-8vmax,-5vmax)}}
.page{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:28px clamp(20px,5vw,64px)}
header img{height:34px;width:auto;display:block}
main{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,88px);align-items:center;padding-block:clamp(32px,7vh,72px)}
@media (max-width:860px){main{grid-template-columns:minmax(0,1fr)}.art{order:-1;max-width:420px}}
.badge{display:inline-flex;align-items:center;gap:10px;font:600 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid var(--line);background:rgba(27,30,63,.7);padding:8px 14px;border-radius:999px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(46,230,240,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(46,230,240,0)}100%{box-shadow:0 0 0 0 rgba(46,230,240,0)}}
h1{font:700 clamp(2.4rem,6.4vw,4.4rem)/1.05 var(--display);letter-spacing:-.02em;margin:22px 0 14px;text-wrap:balance}
h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font:500 clamp(1.1rem,2.4vw,1.4rem)/1.35 var(--display);color:#E1E0F5;margin:0 0 14px;max-width:30ch;text-wrap:balance}
.lead{color:var(--muted);max-width:52ch;margin:0}
/* Trait de marque qui se construit + barre indéterminée */
.rule{position:relative;height:4px;width:min(360px,100%);border-radius:4px;background:#262a55;overflow:hidden;margin:30px 0 22px}
.rule::before{content:"";position:absolute;inset:0;width:38%;border-radius:4px;background:var(--grad);animation:build 2.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes build{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{font:500 .95rem var(--display);padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(27,30,63,.75);opacity:0;transform:translateY(8px);animation:up .6s ease forwards}
.chips li:nth-child(1){animation-delay:.5s}.chips li:nth-child(2){animation-delay:.8s}.chips li:nth-child(3){animation-delay:1.1s}.chips li:nth-child(4){animation-delay:1.4s}
@keyframes up{to{opacity:1;transform:none}}
/* Croquis de la page qui se dessine */
.art{width:100%;justify-self:center;filter:drop-shadow(0 20px 50px rgba(155,123,242,.25))}
.art svg{width:100%;height:auto;display:block;overflow:visible}
.ln{fill:none;stroke:url(#g);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 9s ease-in-out infinite}
.fill{fill:rgba(155,123,242,.10);stroke:none;opacity:0;animation:fillin 9s ease-in-out infinite}
.txt{font:600 8px var(--display);text-anchor:middle;fill:#DADCF3;opacity:0;animation:fillin 9s ease-in-out infinite;letter-spacing:.04em}
.d1{animation-delay:.2s}.d2{animation-delay:.9s}.d3{animation-delay:1.6s}.d4{animation-delay:2.3s}.d5{animation-delay:2.9s}.d6{animation-delay:3.5s}
@keyframes draw{0%{stroke-dashoffset:1}22%,84%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:-1}}
@keyframes fillin{0%,14%{opacity:0}30%,84%{opacity:1}94%,100%{opacity:0}}
.crane{transform-origin:264px 30px;animation:sway 5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
footer{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:22px;font-size:.92rem;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer a{color:var(--text);text-decoration:none;font:500 .92rem var(--display);padding:4px 0;border-bottom:1px solid transparent}
footer a:hover{border-bottom-color:var(--violet)}
footer a[aria-current]{color:var(--cyan);pointer-events:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.ln{stroke-dashoffset:0}.fill,.txt,.chips li{opacity:1;transform:none}.rule::before{width:60%}}