/* Le Bâtisseur du Web : styles de l'accueil (sorti de index.html pour la CSP style-src 'self') */
/* Polices hébergées sur le site (licence SIL OFL 1.1, textes dans fonts/) : aucun appel à Google Fonts */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/syne-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/syne-latin-800-normal.woff2') format('woff2')}

/* Concept : la nuit et les halos de Colin deviennent une matière vivante.
   Une scène WebGL fixe (fluide lumineux + grille + pièce 3D), l'interface flotte dessus en verre.
   Motif de marque : la brique. Le site se construit, les boutons se construisent, le logo reçoit la pièce. */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root{
  color-scheme: dark;
  --nuit:#0a0a14;
  --nuit-3:#181828;
  --ink:#f5f5fa;
  --ink-2:rgba(245,245,250,.84);
  --soft:#b7b7c8;
  --violet:#7c5cff;
  --rose:#ff5da2;
  --cyan:#00d4ff;
  --ambre:#ffb020;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --grad:linear-gradient(105deg,var(--violet),var(--rose) 38%,var(--cyan) 72%,var(--violet));
  --ring:conic-gradient(from var(--a),var(--violet),var(--rose),var(--ambre),var(--cyan),var(--violet));
  --f-display:'Syne','Hanken Grotesk',system-ui,sans-serif;
  --f-serif:'Instrument Serif','Iowan Old Style','Palatino Linotype',serif;
  --f-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --gx:max(clamp(16px,4.4vw,56px),env(safe-area-inset-left,0px));
  --gxr:max(clamp(16px,4.4vw,56px),env(safe-area-inset-right,0px));
}
/* --ring est recalculé sur chaque élément animé : déclaré seulement sur :root,
   var(--a) y serait figé à 0deg et l'anneau ne tournerait pas */
.btn-prime::before,.card::before,.wi-link::before,.menu-preview::after{--ring:conic-gradient(from var(--a),var(--violet),var(--rose),var(--ambre),var(--cyan),var(--violet))}
*{box-sizing:border-box}
/* scrollbar-gutter : la place de la barre de défilement reste réservée, la page ne saute pas quand le menu bloque le défilement */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--nuit);color:var(--ink);font:400 1rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--nuit)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* Lien d'évitement : caché hors écran, il apparaît au premier Tab */
.skip{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:8px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--nuit);font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .3s}
.skip:focus{transform:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-left:var(--gx);padding-right:var(--gxr)}
[tabindex="-1"]:focus{outline:none}

/* Contour en dégradé : le masque ne laisse voir que la bordure (padding).
   Règle commune placée avant les règles propres à chaque élément, qui la complètent ou la corrigent. */
.hdr-bar::before,.btn-prime::before,.btn-ghost::before,.btn-ghost::after,.card::before,.wi-link::before,.menu-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;-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)}
/* Texte en dégradé animé (même principe : seule la durée change selon l'élément) */
.loader-count,.logo-txt em,.grad-serif,.sig-track em,.cta h2 em,.mi-txt .mi-b{background:var(--grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s linear infinite}

/* ---------- Scène ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.aurora-css{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none}
.aurora-css i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.aurora-css i:nth-child(1){width:46vw;height:46vw;top:-12vw;left:-10vw;background:radial-gradient(circle,var(--violet),transparent 70%)}
.aurora-css i:nth-child(2){width:52vw;height:52vw;top:8%;right:-16vw;background:radial-gradient(circle,var(--rose),transparent 70%)}
.aurora-css i:nth-child(3){width:40vw;height:40vw;bottom:-14vw;left:16%;background:radial-gradient(circle,var(--cyan),transparent 70%)}
.aurora-css i:nth-child(4){width:34vw;height:34vw;bottom:4%;right:8%;background:radial-gradient(circle,var(--ambre),transparent 70%);opacity:.3}
.no-webgl .aurora-css{display:block}
.no-webgl #scene{display:none}
main,footer{position:relative;z-index:2}

/* ---------- Ouverture : à travers la brique ---------- */
.loader{position:fixed;inset:0;z-index:90;pointer-events:none}
.loader-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.loader-meta{position:absolute;left:var(--gx);right:var(--gxr);bottom:max(24px,env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.loader-brand{font:600 clamp(.95rem,1.3vw,1.1rem)/1.2 var(--f-body);color:var(--soft);padding-bottom:.8em}
.loader-skip{display:block;margin-top:.5em;font-size:.82em;font-weight:400;color:var(--soft);opacity:.75}
.loader-count{font:800 clamp(4.5rem,15vw,13rem)/.95 var(--f-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;animation-duration:3s;padding-bottom:.04em}
.loader-count small{font-size:.3em;letter-spacing:-.02em;vertical-align:top}
.boot-fail .loader,.no-intro .loader{display:none}
/* Scripts en échec : mêmes replis que sans JavaScript (le <noscript> ne s'applique pas ici) */
.boot-fail .card:not([data-k="0"]),.boot-fail .ring-nav,.boot-fail .menu-btn,.boot-fail .js-anim,.boot-fail .copy{display:none!important}
.boot-fail .works-foot{grid-template-columns:minmax(0,1fr)}
.boot-fail .sig-track{animation:none}
@keyframes flow{to{background-position:-220% 0}}

/* ---------- Header : barre qui devient pilule ---------- */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:70;padding-top:14px;padding-left:max(12px,calc(var(--gx) - 14px));padding-right:max(12px,calc(var(--gxr) - 14px));transition:transform .6s var(--out)}
.hdr.is-hidden{transform:translateY(-130%)}
.hdr-bar{--p:0;position:relative;display:flex;align-items:center;gap:clamp(6px,1.2vw,16px);height:64px;max-width:1412px;margin-inline:auto;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--line);transition:max-width .9s var(--out),background .5s}
.hdr-bar::before{inset:-1px;background:conic-gradient(from -90deg,var(--violet),var(--rose) calc(var(--p) * .5turn),var(--cyan) calc(var(--p) * 1turn),transparent 0);opacity:0;transition:opacity .5s}
.hdr.is-solid .hdr-bar{max-width:880px;background:rgba(14,14,26,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.hdr.is-solid .hdr-bar::before{opacity:1}
.logo{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0;padding:5px;border-radius:14px}
.logo-mark{width:36px;height:36px;flex:none;transition:transform .6s var(--spring)}
.logo.is-hit .logo-mark{animation:hit .9s var(--spring)}
@keyframes hit{0%{transform:scale(1)}30%{transform:scale(1.45) rotate(-8deg)}100%{transform:scale(1)}}
.logo-txt{display:inline-block;overflow:hidden;white-space:nowrap;max-width:260px;font:700 1.06rem/1.3 var(--f-display);letter-spacing:-.02em;transition:max-width .8s var(--out),opacity .5s}
.logo-txt em{font:italic 400 1.18em/1 var(--f-serif);letter-spacing:0;background-size:200% 100%;animation-duration:6s;padding-right:.08em}
.hdr.is-solid .logo-txt{max-width:0;opacity:0}
.hdr-nav{display:none;gap:2px}
.hdr-link{position:relative;padding:12px 14px;font-weight:600;font-size:.95rem;color:var(--ink);border-radius:999px}
/* trait arc-en-ciel toujours visible sous les liens ; il s'allume au survol */
.hdr-link::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;border-radius:2px;background:var(--grad);background-size:200% 100%;animation:flow 4s linear infinite;transition:height .3s,box-shadow .4s,bottom .3s}
.hdr-link:hover::after,.hdr-link:focus-visible::after{height:3px;bottom:6px;box-shadow:0 0 10px rgba(255,93,162,.75),0 0 18px rgba(0,212,255,.45)}
/* point lumineux qui fait le tour du header */
.hdr-comet{position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;background:#fff;pointer-events:none;z-index:3;offset-path:inset(0 round 32px);offset-rotate:0deg;animation:comet 9s linear -1s infinite,comet-c 4.5s linear infinite}
/* traînée arc-en-ciel : elle s'allume derrière le point et s'éteint après son passage */
/* 17 segments de 14px espacés de .044s (même longueur de traînée qu'avec 34 segments de 9px, deux fois moins d'éléments animés) */
.hdr-trail{position:absolute;top:0;left:0;width:14px;height:2px;border-radius:2px;pointer-events:none;z-index:2;offset-path:inset(0 round 32px);offset-rotate:auto;animation:comet 9s linear infinite;animation-delay:calc(-1s + var(--i) * .044s)}
@media (prefers-reduced-motion:reduce){.hdr-comet,.hdr-trail{display:none}}
@keyframes comet{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes comet-c{0%,100%{box-shadow:0 0 6px 2px var(--cyan),0 0 18px 6px rgba(0,212,255,.55)}33%{box-shadow:0 0 6px 2px var(--rose),0 0 18px 6px rgba(255,93,162,.55)}66%{box-shadow:0 0 6px 2px var(--violet),0 0 18px 6px rgba(124,92,255,.6)}}
@supports not (offset-path:inset(0 round 2px)){.hdr-comet,.hdr-trail{display:none}}
@media (min-width:900px){.hdr-nav{display:flex}}

/* Interrupteur d'animations */
.anim-toggle{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer;color:var(--soft);transition:border-color .3s,color .3s}
.anim-toggle:hover{color:var(--ink);border-color:var(--line-2)}
.anim-toggle svg{grid-area:1/1;width:16px;height:16px;transition:transform .5s var(--spring),opacity .3s}
.anim-toggle .ic-play{opacity:0;transform:scale(.4) rotate(-90deg)}
.anim-toggle[aria-pressed="false"] .ic-pause{opacity:0;transform:scale(.4) rotate(90deg)}
.anim-toggle[aria-pressed="false"] .ic-play{opacity:1;transform:none}
.anim-toggle.has-text{width:auto;display:inline-flex;gap:10px;padding:0 16px 0 14px;border-radius:999px}
.anim-toggle.has-text svg{grid-area:auto}
.anim-toggle.has-text .ic-play{position:absolute;left:14px}

/* Bouton menu */
.menu-btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 7px 0 18px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.07);cursor:pointer;font-weight:600;font-size:.92rem;isolation:isolate;overflow:hidden;flex:none}
.menu-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);background-size:200% 100%;transform:translateY(102%);transition:transform .55s var(--out);animation:flow 5s linear infinite}
.menu-btn:hover::before,.menu-btn[aria-expanded="true"]::before{transform:none}
.mb-word{position:relative;display:inline-grid;overflow:hidden;height:1.25em;line-height:1.25em}
.mb-word span{grid-area:1/1;transition:transform .5s var(--out)}
.mb-word span+span{transform:translateY(110%)}
.menu-btn[aria-expanded="true"] .mb-word span:first-child{transform:translateY(-110%)}
.menu-btn[aria-expanded="true"] .mb-word span+span{transform:none}
.mb-lines{position:relative;width:34px;height:34px;border-radius:50%;background:var(--nuit);display:grid;place-items:center}
.mb-lines i{position:absolute;width:13px;height:2px;border-radius:2px;background:var(--ink);transition:transform .55s var(--spring),width .4s,margin .4s}
.mb-lines i:first-child{transform:translateY(-3px)}
.mb-lines i:last-child{transform:translateY(3px);width:8px;margin-left:5px}
.menu-btn:hover .mb-lines i:last-child{width:13px;margin-left:0}
.menu-btn[aria-expanded="true"] .mb-lines i:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .mb-lines i:last-child{transform:rotate(-45deg);width:13px;margin-left:0}

/* ---------- Boutons signature ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:60px;border-radius:999px;border:0;cursor:pointer;font:600 1.02rem/1 var(--f-body);letter-spacing:-.005em;isolation:isolate;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.btn .lbl{position:relative;display:inline-grid;overflow:hidden;padding-block:.34em;margin-block:-.34em}
.btn .lbl>span{grid-area:1/1;display:flex;white-space:pre}
.btn .ch{display:inline-block;transition:transform .55s var(--out);transition-delay:calc(var(--i) * 14ms)}
.btn .lbl-b .ch{transform:translateY(175%)}
.btn:hover .lbl-a .ch,.btn:focus-visible .lbl-a .ch{transform:translateY(-175%)}
.btn:hover .lbl-b .ch,.btn:focus-visible .lbl-b .ch{transform:none}

/* Bouton principal : un anneau qui tourne, des briques qui se posent depuis le curseur */
.btn-prime{padding:0 8px 0 28px;color:#fff}
.btn-prime::before{background:var(--ring);animation:spin 3.6s linear infinite;z-index:2}
/* halo flou volontairement fixe (--ring de :root) : un flou qui tourne se redessine à chaque image */
.btn-prime::after{content:"";position:absolute;inset:8px 12%;border-radius:inherit;background:var(--ring);filter:blur(22px);opacity:.4;z-index:-2;transition:opacity .5s,inset .5s var(--out)}
.btn-prime:hover::after{opacity:.75;inset:0 4%}
.bp-fill{position:absolute;inset:0;border-radius:inherit;z-index:-1;overflow:hidden;background:rgba(26,18,52,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bp-brick{position:absolute;border-radius:4px;background:var(--grad);background-size:var(--bw) var(--bh);background-position:var(--bx) var(--by);transform:translateY(-190%) rotate(-16deg);opacity:0;transition:transform .6s var(--spring) var(--dl,0ms),opacity .25s linear var(--dl,0ms)}
.btn-prime.is-built .bp-brick{transform:none;opacity:1}
.btn-prime.is-falling .bp-brick{transform:translateY(190%) rotate(14deg);opacity:0;transition-timing-function:cubic-bezier(.55,0,.85,.3);transition-duration:.45s}
.btn-prime .lbl,.btn-prime .bp-icon{position:relative;z-index:1}
.btn-prime .lbl{transition:text-shadow .4s}
.btn-prime.is-built .lbl{text-shadow:0 1px 2px rgba(10,10,20,.55),0 0 14px rgba(10,10,20,.5)}
.bp-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--nuit);overflow:hidden;transition:scale .6s var(--spring),rotate .6s var(--spring)}
.bp-icon svg{grid-area:1/1;width:18px;height:18px;transition:transform .55s var(--out)}
.bp-icon svg+svg{transform:translate(-160%,160%)}
.btn-prime:hover .bp-icon{scale:1.08;rotate:-8deg}
.btn-prime:hover .bp-icon svg:first-child{transform:translate(160%,-160%)}
.btn-prime:hover .bp-icon svg+svg{transform:none}
.btn-prime:active .bp-icon{scale:.9}

/* Bouton secondaire : faisceau lumineux qui court sur le contour */
.btn-ghost{--mx:50%;--my:50%;padding:0 26px;color:var(--ink);background:rgba(26,18,52,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost::before{padding:1px;background:linear-gradient(var(--line-2),var(--line-2))}
.btn-ghost::after{background:conic-gradient(from var(--a),transparent 0 72%,var(--cyan) 84%,#fff 88%,var(--rose) 92%,transparent 96%);animation:spin 2.8s linear infinite}
.bg-fill{position:absolute;inset:0;border-radius:inherit;z-index:-1;overflow:hidden}
.bg-fill::before{content:"";position:absolute;width:260%;aspect-ratio:1;left:var(--mx);top:var(--my);border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.34),rgba(124,92,255,.24) 40%,transparent 66%);transform:translate(-50%,-50%) scale(0);transition:transform .7s var(--out)}
.btn-ghost:hover .bg-fill::before{transform:translate(-50%,-50%) scale(1)}
.bg-dots{display:inline-flex;gap:3px}
.bg-dots i{width:9px;height:5px;border-radius:1.5px;background:var(--cyan);transition:transform .5s var(--spring)}
.bg-dots i:nth-child(2){background:var(--rose);transition-delay:.04s}
.bg-dots i:nth-child(3){background:var(--violet);transition-delay:.08s}
.btn-ghost:hover .bg-dots i{transform:translateY(-4px) rotate(-12deg)}
.btn-ghost:hover .bg-dots i:nth-child(2){transform:translateY(3px) rotate(10deg)}
@keyframes spin{to{--a:360deg}}

.spark{position:fixed;z-index:95;width:12px;height:6px;border-radius:1.5px;pointer-events:none;left:0;top:0}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:120px 100px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.hero-copy{max-width:min(860px,59vw);display:grid;gap:26px;min-width:0}
.hero-title{margin:0;font:800 clamp(2.2rem,4.2vw,3.9rem)/.98 var(--f-display);letter-spacing:-.04em}
/* lignes de titre (accueil et sections) : le masque laisse tomber les lettres depuis le haut */
.hero-title .line,.sec-title .line{display:block;overflow:hidden;padding-block:.08em .06em;margin-block:-.08em -.06em}
.hero-title .line-in,.sec-title .line-in{display:inline-block}
.hero-title .line-in{transform-origin:0 100%}
/* sur ordinateur, « Je bâtis » et « des sites » tiennent sur une seule ligne */
@media (min-width:761px){.hero-title{white-space:nowrap}.hero-title .line.l-join{display:inline-block;vertical-align:top}}
.ltr{display:inline-block}
.word{display:inline-block;white-space:nowrap}
.grad-serif{font:italic 400 1.06em/1 var(--f-serif);letter-spacing:-.015em;padding-right:.1em}
.hero-lead{margin:0;max-width:44ch;font-size:clamp(1.05rem,1.25vw,1.22rem);line-height:1.62;color:var(--ink-2)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}

/* ---------- Bandeau signature ---------- */
.signature{position:relative;overflow:hidden;padding-block:clamp(16px,2.4vh,26px);border-block:1px solid var(--line);background:rgba(10,10,20,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sig-track{display:flex;align-items:center;width:max-content;animation:sig 48s linear infinite;font:700 clamp(1.15rem,1.9vw,1.9rem)/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.sig-track>*{margin-right:clamp(22px,3vw,44px)}
.sig-track em{font:italic 400 1.12em/1 var(--f-serif);letter-spacing:-.01em;padding-right:.08em}
.sig-track i{font-style:normal;font-size:.6em;color:var(--cyan)}
.signature:hover .sig-track{animation-play-state:paused}
@keyframes sig{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sig-track{animation:none}}

/* ---------- Réalisations ---------- */
.works{position:relative;padding-block:clamp(90px,14vh,160px) clamp(60px,9vh,110px);overflow:clip}
.works::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(10,10,20,.78) 16%,rgba(10,10,20,.78) 84%,transparent);z-index:-1}
.works-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:end;margin-bottom:clamp(30px,6vh,60px)}
.sec-title{margin:0;font:800 clamp(2rem,3.9vw,4.2rem)/.96 var(--f-display);letter-spacing:-.045em}
.works-head h2 em{font:italic 400 1.08em/1 var(--f-serif);letter-spacing:-.01em;color:var(--soft)}
.works-head p{margin:0;max-width:44ch;color:var(--ink-2)}
@media (min-width:900px){.works-head{grid-template-columns:1.25fr .75fr}.works-head p{justify-self:end}}
.stage{--cw:420px;--chh:280px;position:relative;height:calc(var(--chh) + clamp(56px,7vw,100px));perspective:1300px;perspective-origin:50% 40%;cursor:grab;touch-action:pan-y;outline:none;user-select:none;-webkit-user-select:none}
.stage.is-drag{cursor:grabbing}
.stage:focus-visible{outline:2px solid var(--cyan);outline-offset:-6px;border-radius:24px}
.stage::after{content:"";position:absolute;left:12%;right:12%;top:calc(var(--chh) + 4px);height:clamp(60px,9vw,120px);background:radial-gradient(50% 60% at 50% 0,rgba(124,92,255,.42),rgba(255,93,162,.16) 45%,transparent 75%);filter:blur(6px);pointer-events:none;z-index:-1}
.ring{position:absolute;inset:0;transform-style:preserve-3d}
.card{position:absolute;left:50%;top:calc(var(--chh) / 2 + 10px);width:var(--cw);height:var(--chh);margin-left:calc(var(--cw) / -2);margin-top:calc(var(--chh) / -2);border-radius:22px;overflow:hidden;background:var(--nuit-3);transform-style:preserve-3d;box-shadow:0 50px 90px -40px rgba(0,0,0,.95);will-change:transform}
.card::before{background:var(--ring);opacity:0;transition:opacity .6s;animation:spin 5s linear infinite;z-index:3}
.card.is-front::before{opacity:1}
/* anneau invisible (opacité 0) sur les cartes de côté : inutile de le faire tourner */
.card:not(.is-front)::before{animation:none}
.card img{width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,-10%),rgba(255,255,255,.2),transparent 45%),linear-gradient(180deg,transparent 45%,rgba(10,10,20,.85));z-index:1;pointer-events:none}
.card-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:.95rem}
.badge{flex:none;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;font-size:.78rem;font-weight:600;background:rgba(10,10,20,.7);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.badge i{width:7px;height:7px;border-radius:50%;background:#5dffa8}
.badge.demo i{background:var(--ambre)}
.card-you{display:grid;place-items:center;text-align:center;background:radial-gradient(120% 90% at 20% 10%,rgba(124,92,255,.55),transparent 55%),radial-gradient(90% 80% at 90% 90%,rgba(0,212,255,.45),transparent 60%),radial-gradient(70% 60% at 70% 20%,rgba(255,93,162,.5),transparent 60%),var(--nuit-3)}
.card-you strong{display:block;font:800 clamp(1.8rem,3.4vw,3rem)/.95 var(--f-display);letter-spacing:-.04em;padding-inline:20px}
.card-you strong em{font:italic 400 1.1em/1 var(--f-serif)}
.works-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,3vw,40px);margin-top:clamp(10px,2vh,24px)}
.work-info{min-height:160px;display:grid;align-content:start;text-align:center;justify-items:center}
.wi-anim{display:grid;gap:8px;justify-items:center}
.wi-tag{margin:0;font-size:.9rem;color:var(--soft);font-weight:500}
.wi-title{margin:0;font:700 clamp(1.4rem,2.4vw,2.1rem)/1.05 var(--f-display);letter-spacing:-.03em}
.wi-desc{margin:0;max-width:52ch;color:var(--ink-2);font-size:.98rem}
.wi-link{position:relative;isolation:isolate;margin-top:12px;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 7px 0 26px;border-radius:999px;font-weight:600;font-size:1rem;color:#fff;background:rgba(14,14,26,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:wiGlow 3.2s ease-in-out infinite;transition:gap .45s var(--out),transform .45s var(--out)}
/* contour en dégradé qui tourne, comme le bouton principal */
.wi-link::before{background:var(--ring);animation:spin 3.6s linear infinite;z-index:-1}
/* reflet de lumière qui balaie le bouton à intervalles réguliers */
.wi-link::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.16) 44%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.16) 56%,transparent 64%) no-repeat;background-size:260% 100%;background-position:150% 0;animation:wiSweep 4s cubic-bezier(.4,0,.25,1) infinite;z-index:-1;pointer-events:none}
.wi-link>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#0a0a14;font-size:1.05rem;line-height:1;transition:transform .5s var(--spring),background .4s}
.wi-link:hover,.wi-link:focus-visible{gap:16px;transform:translateY(-2px)}
.wi-link:hover>span,.wi-link:focus-visible>span{transform:rotate(45deg) scale(1.08);background:var(--cyan)}
.wi-link:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@keyframes wiSweep{0%{background-position:150% 0}55%,100%{background-position:-60% 0}}
@keyframes wiGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 10px 34px -10px rgba(255,93,162,.55)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 12px 44px -8px rgba(0,212,255,.6)}}
.ring-nav{--mx:50%;--my:50%;position:relative;width:62px;height:62px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.05);cursor:pointer;display:grid;place-items:center;overflow:hidden;isolation:isolate;transition:border-color .4s}
.ring-nav::before{content:"";position:absolute;width:200%;aspect-ratio:1;left:var(--mx);top:var(--my);border-radius:50%;background:var(--grad);background-size:200% 100%;transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--out);z-index:-1}
.ring-nav:hover{border-color:transparent}
.ring-nav:hover::before{transform:translate(-50%,-50%) scale(1)}
.ring-nav svg{width:22px;height:22px;transition:transform .5s var(--spring)}
.ring-nav.prev:hover svg{transform:translateX(-3px)}
.ring-nav.next:hover svg{transform:translateX(3px)}
.ring-nav:active svg{transform:scale(.85)}

/* ---------- Contact ---------- */
.cta{position:relative;padding-block:clamp(80px,14vh,160px)}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;justify-items:start}
.cta h2{max-width:15ch}
.cta h2 em{font:italic 400 1.08em/1 var(--f-serif);letter-spacing:-.01em;padding-right:.08em}
.cta p{margin:0;max-width:48ch;color:var(--ink-2);font-size:1.08rem}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.mail{display:inline-flex;align-items:center;gap:6px;min-height:60px;padding:0 8px 0 22px;border-radius:999px;border:1px solid var(--line);background:rgba(10,10,20,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:500;max-width:100%}
.mail span{user-select:all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.copy{position:relative;height:44px;padding:0 16px;border-radius:999px;border:0;background:rgba(255,255,255,.1);cursor:pointer;font-weight:600;font-size:.86rem;overflow:hidden;flex:none;transition:background .3s}
.copy:hover{background:rgba(255,255,255,.18)}
.copy .cp-ok{position:absolute;inset:0;display:grid;place-items:center;background:var(--grad);color:#fff;transform:translateY(105%);transition:transform .5s var(--out)}
.copy.is-done .cp-ok{transform:none}
.foot{position:relative;z-index:2;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--soft);font-size:.88rem;background:rgba(10,10,20,.7)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.foot a{text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.foot a:hover{color:var(--ink)}

/* ---------- Menu plein écran ---------- */
.menu{position:fixed;inset:0;z-index:66;pointer-events:none}
.menu.is-open{pointer-events:auto}
.menu svg.wave{position:absolute;inset:0;width:100%;height:100%;display:block}
.menu-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(20px,4vh,40px);padding-block:100px 32px;visibility:hidden;overflow-y:auto}
.menu.is-open .menu-in{visibility:visible}
/* menu fermé : ses dégradés et son anneau sont cachés, on met leurs animations en pause */
.menu:not(.is-open) *,.menu:not(.is-open) *::after{animation-play-state:paused}
.menu-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2px,1vh,10px)}
.mi-row{overflow:hidden;padding-block:.06em}
.mi{display:inline-flex;padding-block:4px;max-width:100%}
.mi-txt{position:relative;display:inline-grid;overflow:hidden;white-space:nowrap;font:800 min(clamp(2.3rem,min(5.4vw,8.6vh),5.8rem),calc((100vw - 2 * var(--gx)) / 9.4))/1.02 var(--f-display);letter-spacing:-.05em;padding-bottom:.04em}
.mi-txt>span{grid-area:1/1;transition:transform .7s var(--out)}
.mi-txt .mi-b{font:italic 400 1.08em/1 var(--f-serif);letter-spacing:-.01em;animation-duration:6s;transform:translateY(105%)}
.mi:hover .mi-a,.mi:focus-visible .mi-a{transform:translateY(-105%)}
.mi:hover .mi-b,.mi:focus-visible .mi-b{transform:none}
.mi-row .mi{transform:translateY(110%)}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;color:var(--soft);font-size:.95rem;border-top:1px solid var(--line);padding-top:22px}
.menu-foot span{user-select:all}
.menu-foot .anim-toggle{margin-left:auto}
.menu-side{display:none}
@media (min-width:900px){
  .menu-in{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);column-gap:40px}
  .menu-foot{grid-column:1/-1}
  .menu-foot .anim-toggle{display:none}
  .menu-side{display:grid;gap:16px;justify-items:end;align-self:center;opacity:0}
  .menu-preview{position:relative;width:100%;max-width:380px;aspect-ratio:4/5;max-height:56vh;border-radius:26px;overflow:hidden;background:var(--nuit-3);transform:perspective(900px) rotateY(-14deg) rotateX(6deg)}
  .menu-preview img,.menu-preview .mp-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform 1s var(--out);transform:scale(1.12)}
  .menu-preview .is-on{opacity:1;transform:none}
  .menu-preview::after{background:var(--ring);animation:spin 5s linear infinite}
  .mp-cap{margin:0;max-width:380px;width:100%;font-size:1rem;color:var(--ink-2)}
}
.mp-art{background:radial-gradient(90% 70% at 30% 20%,rgba(124,92,255,.8),transparent 60%),radial-gradient(80% 70% at 80% 80%,rgba(0,212,255,.6),transparent 60%),radial-gradient(60% 50% at 70% 30%,rgba(255,93,162,.7),transparent 60%),var(--nuit-3)}
.mp-art.a2{background:radial-gradient(80% 60% at 70% 30%,rgba(255,176,32,.7),transparent 60%),radial-gradient(90% 70% at 20% 80%,rgba(255,93,162,.75),transparent 60%),var(--nuit-3)}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .hero{align-items:flex-end;padding-block:44vh 112px}
  .hero::after{content:"";position:absolute;inset:auto 0 0;height:66%;background:linear-gradient(transparent,rgba(10,10,20,.82) 38%);z-index:-1;pointer-events:none}
  .hero-copy{max-width:100%;gap:20px}
  .hero-title{font-size:clamp(2.1rem,9.6vw,3.3rem)}
  .hero-lead{font-size:1rem}
  .btn{min-height:56px}
  .ring-nav{width:50px;height:50px}
  .work-info{min-height:200px}
  .hdr .anim-toggle{display:none}
}
@media (max-width:420px){
  .hero-ctas .btn{width:100%;justify-content:space-between}
  .btn-ghost{justify-content:center}
}
@media (max-width:380px){.mail{border-radius:26px;padding-block:8px}.mail span{white-space:normal}}
@media (max-width:440px){.mb-word{display:none}.menu-btn{padding:0 6px;gap:0}.logo-txt{font-size:.98rem}}
@media (max-width:340px){.logo-txt em{display:none}}

/* ---------- Mouvement réduit / animations coupées ---------- */
.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}