@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument";src:url(/assets/fonts/instrument.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family:"Instrument";src:url(/assets/fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --gx{syntax:"<percentage>";initial-value:30%;inherits:false}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
:root{--pink:#e60060;--pink-2:#ff4d94;--violet:#6a2cff;--bg:#faf7f8;--bg2:#fff;--ink:#17101a;--mut:#5d5163;--line:#e6dde2;--card:#fff;--glass:rgba(255,255,255,.62);--glass-b:rgba(23,16,26,.1);--todo:#8a5a00;--todo-bg:#fff3d6;color-scheme:light}
:root[data-theme=dark]{--bg:#0a070c;--bg2:#120c16;--ink:#f6eef2;--mut:#b6a8bd;--line:#2a2030;--card:#150f19;--glass:rgba(24,16,30,.55);--glass-b:rgba(255,255,255,.14);--todo:#ffd37a;--todo-bg:#3a2a07;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0a070c;--bg2:#120c16;--ink:#f6eef2;--mut:#b6a8bd;--line:#2a2030;--card:#150f19;--glass:rgba(24,16,30,.55);--glass-b:rgba(255,255,255,.14);--todo:#ffd37a;--todo-bg:#3a2a07;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 "Bricolage",system-ui,sans-serif;padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - 2rem);margin-inline:auto}
.serif{font-family:"Instrument",Georgia,serif;font-style:italic;font-weight:400}
.sr{position:absolute;left:-999px}
:focus-visible{outline:3px solid var(--pink-2);outline-offset:3px;border-radius:6px}
/* grain */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* header liquid glass */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;margin:.6rem auto 0;width:min(1180px,100% - 1rem);border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .6rem .45rem 1.1rem;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 30px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:800;font-stretch:80%;letter-spacing:-.02em;font-size:1.25rem}
.brand i{display:flex;align-items:flex-end;gap:2px;height:20px}.brand i b{width:4px;background:var(--pink);border-radius:2px}
.brand i b:nth-child(1){height:6px}.brand i b:nth-child(2){height:10px}.brand i b:nth-child(3){height:15px}.brand i b:nth-child(4){height:20px}
.brand em{color:var(--pink);font-style:normal}
.nav{display:none;gap:.2rem}
.nav a{padding:.45rem .85rem;border-radius:999px;text-decoration:none;font-size:.95rem;font-weight:500}
.nav a:hover,.nav a[aria-current]{background:color-mix(in srgb,var(--pink) 16%,transparent)}
.tools{display:flex;gap:.35rem}
.ib{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--glass-b);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;font:inherit}
.ib:hover{background:color-mix(in srgb,var(--pink) 18%,transparent)}
.ib svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(22px);display:none;flex-direction:column;justify-content:center;padding:2rem}
.menu.open{display:flex}.menu a{font-size:clamp(2rem,9vw,3.4rem);font-weight:700;font-stretch:78%;text-decoration:none;line-height:1.2}.menu a:hover{color:var(--pink)}
.menu .ib{position:absolute;top:1rem;right:1rem}
/* tab bar */
.tabs{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(.6rem + env(safe-area-inset-bottom,0px));width:min(30rem,100% - 1rem);display:flex;justify-content:space-around;padding:.35rem;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 34px rgba(0,0,0,.28)}
.tabs a{flex:1;text-align:center;text-decoration:none;font-size:.72rem;font-weight:600;padding:.4rem .2rem;border-radius:999px;display:flex;flex-direction:column;align-items:center;gap:.1rem}
.tabs svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs a[aria-current]{background:var(--pink);color:#fff}
@media(min-width:900px){.nav{display:flex}.tabs,.ib.burger{display:none}body{padding-bottom:0}}
/* hero */
.hero{position:relative;min-height:calc(100svh - 4rem);display:grid;align-items:end;overflow:hidden;margin-top:-4rem;padding-top:6rem;color:#fff;isolation:isolate;background:#0a070c}
.hero picture,.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 50% at var(--gx) 20%,rgba(230,0,96,.55),transparent 70%),radial-gradient(50% 50% at 85% 30%,rgba(106,44,255,.5),transparent 70%),linear-gradient(to top,#0a070c 4%,rgba(10,7,12,.55) 55%,rgba(10,7,12,.25));mix-blend-mode:normal;animation:mesh 14s ease-in-out infinite alternate}
@keyframes mesh{to{--gx:75%}}
.hero .wrap{padding-block:3rem 5.5rem}
.kicker{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--pink-2)}
.hero h1{margin:.4rem 0 1rem;font-size:clamp(3.2rem,15vw,10.5rem);line-height:.88;font-weight:800;font-stretch:75%;letter-spacing:-.015em}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .w>span{display:inline-block;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*90ms + 150ms)}
@keyframes up{to{transform:none}}
.hero h1 .serif{color:var(--pink-2);font-weight:400;font-stretch:100%}
.lead{font-size:clamp(1.1rem,2.4vw,1.5rem);max-width:34ch;margin:0 0 1.6rem;opacity:.92}
.btns{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;font-weight:600;text-decoration:none;background:var(--pink);color:#fff;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:600;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(230,0,96,.45)}
.btn.ghost{background:rgba(10,7,12,.45);border-color:rgba(255,255,255,.35);backdrop-filter:blur(10px);color:inherit}
.main .btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
/* weight scroll */
.vw{font-weight:300;font-stretch:75%}
@supports(animation-timeline:view()){
.vw{animation:wght linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
@keyframes wght{from{font-weight:200;font-stretch:100%;letter-spacing:.02em}to{font-weight:800;font-stretch:75%;letter-spacing:-.03em}}
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
@keyframes rv{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
.px{animation:px linear both;animation-timeline:view();animation-range:cover}
@keyframes px{from{transform:translateY(-6%) scale(1.08)}to{transform:translateY(6%) scale(1.08)}}
.bar{animation:prog linear both;animation-timeline:scroll(root)}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.bar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--pink),var(--violet));z-index:95}
/* sections */
section{padding-block:clamp(3.5rem,9vw,7rem)}
h1,h2{font-size:clamp(2.2rem,7vw,4.6rem);line-height:1;margin:0 0 1rem;letter-spacing:-.03em;font-weight:800}
h2.h3{font-size:1.3rem;margin:1.6rem 0 .4rem;letter-spacing:-.01em;line-height:1.3}
h3{font-size:1.3rem;margin:0 0 .4rem;letter-spacing:-.01em}
p{margin:0 0 1rem}.mut{color:var(--mut)}
.grid{display:grid;gap:1rem}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:1.4rem;padding:1.4rem}
.card.glow{position:relative;overflow:hidden}
.card.glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a),var(--pink),var(--violet),var(--pink));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
@keyframes spin{to{--a:360deg}}
.todo{display:inline-block;padding:.05rem .55rem;border:1px dashed var(--todo);color:var(--todo);background:var(--todo-bg);border-radius:.5rem;font-size:.85em;font-weight:600}
.dark{background:#0a070c;color:#f6eef2;--ink:#f6eef2;--mut:#b6a8bd;--line:#2a2030;--card:#150f19}
/* countdown */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;max-width:26rem;margin-block:1rem}
.cd div{text-align:center;padding:.8rem .2rem;border-radius:1rem;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(12px)}
.cd b{display:block;font-size:2.1rem;font-variant-numeric:tabular-nums;font-weight:800;line-height:1}
.cd span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.next{display:grid;gap:1.4rem;align-items:center}
@media(min-width:860px){.next{grid-template-columns:1.1fr 1fr}}
/* marquee */
.mq{overflow:hidden;border-block:1px solid var(--line);padding:1.1rem 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq div{display:flex;gap:2.4rem;width:max-content;animation:mq 38s linear infinite}
.mq:hover div{animation-play-state:paused}
.mq span{font-size:clamp(1.8rem,5vw,3.2rem);font-weight:700;font-stretch:75%;text-transform:uppercase;white-space:nowrap}
.mq span:nth-child(even){font-family:"Instrument",serif;font-style:italic;text-transform:none;font-weight:400;color:var(--pink)}
@keyframes mq{to{transform:translateX(-50%)}}
/* visualizer */
.viz{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:150px;margin:1.2rem 0}
.viz i{flex:1;max-width:10px;min-height:4px;height:calc(6px + var(--k)*1.7px);border-radius:5px;background:linear-gradient(to top,var(--pink),var(--violet))}
.viz.idle i{animation:idle 2.4s ease-in-out infinite;animation-delay:calc(var(--k)*60ms)}
@keyframes idle{50%{height:calc(8px + var(--k)*.9px)}}
/* gallery */
.gal{columns:1;column-gap:.8rem}
@media(min-width:600px){.gal{columns:2}}@media(min-width:960px){.gal{columns:3}}
.gal figure{margin:0 0 .8rem;break-inside:avoid;position:relative;border-radius:1.1rem;overflow:hidden;cursor:zoom-in;background:#150f19}
.gal img{width:100%;height:auto;transition:transform .6s}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .6rem;font-size:.78rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
/* diaporama (31/10/2026) */
dialog{border:0;background:transparent;padding:0;margin:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;color:#fff;overflow:hidden}
dialog[open]{display:flex;align-items:center;justify-content:center}
dialog::backdrop{background:rgba(5,3,7,.92);backdrop-filter:blur(8px)}
.lb-f{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;padding:3.5rem .5rem 3rem;touch-action:pan-y}
.lb-f img{max-height:calc(100dvh - 9rem);max-width:min(94vw,1400px);width:auto;height:auto;border-radius:1rem;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lb-f figcaption{color:#ddd;text-align:center;font-size:.85rem;margin:.7rem 1rem 0}
.lb-n{position:absolute;top:1.1rem;left:1.2rem;margin:0;font-size:.8rem;letter-spacing:.12em;color:#cdbfd3;font-variant-numeric:tabular-nums}
.lb-nav,.lb-x{position:absolute;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,7,12,.55);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb-nav:hover,.lb-x:hover{background:var(--pink)}
.lb-nav svg,.lb-x svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-nav{top:50%;transform:translateY(-50%)}.lb-prev{left:max(.6rem,env(safe-area-inset-left,0px))}.lb-next{right:max(.6rem,env(safe-area-inset-right,0px))}
.lb-x{top:.6rem;right:.6rem}
dialog :focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:700px){.lb-nav{top:auto;bottom:max(.6rem,env(safe-area-inset-bottom,0px));transform:none}.lb-f{padding-bottom:4.5rem}.lb-f img{max-height:calc(100dvh - 11rem)}}
/* vidéos YouTube en façade (31/10/2026) : l'iframe n'est chargée qu'au clic, ratio fixe = aucun décalage */
.yt{margin:0}
.yt-b,.yt-f{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:1.1rem;overflow:hidden;background:#000}
.yt-b{position:relative;padding:0;cursor:pointer;color:#fff}
.yt-b img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.yt-b:hover img{transform:scale(1.04)}
.yt-p{position:absolute;left:50%;top:50%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;border-radius:50%;background:var(--pink);display:grid;place-items:center;box-shadow:0 8px 30px rgba(230,0,96,.5);transition:transform .25s}
.yt-b:hover .yt-p,.yt-b:focus-visible .yt-p{transform:scale(1.1)}
.yt-p svg{width:1.8rem;height:1.8rem;fill:#fff;margin-left:.2rem}
.yt figcaption{font-size:.92rem;margin-top:.6rem;font-weight:600}
.yt figcaption a{font-weight:400;font-size:.82rem;color:var(--mut);margin-left:.3rem;white-space:nowrap}
/* timeline */
.tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.tl li{position:relative;padding:.1rem 0 1.1rem 1.4rem}
.tl li::before{content:"";position:absolute;left:-7px;top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--pink)}
.tl time{font-weight:700;font-variant-numeric:tabular-nums}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.pills li{padding:.35rem .85rem;border:1px solid var(--line);border-radius:999px;font-size:.92rem}
.ph{border-radius:1.4rem;overflow:hidden;position:relative}
.ph img{width:100%;height:100%;object-fit:cover}
.credit{font-size:.74rem;color:var(--mut);margin-top:.4rem}
.priv{position:relative;z-index:80;font-size:.72rem;text-align:center;background:var(--pink);color:#fff;padding:.12rem .5rem;letter-spacing:.04em}
footer{background:#0a070c;color:#cdbfd3;padding-block:3rem 7rem;--mut:#9d8fa5}
footer a{color:#fff}
footer .row{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between}
footer img{width:190px;border-radius:.6rem}
/* cursor */
.cur{position:fixed;z-index:99;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--pink-2);pointer-events:none;mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s,background .25s;display:none}
.cur.on{display:block}.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,77,148,.35)}
@media(pointer:fine){.cur{display:block}}
@media(pointer:coarse){.cur{display:none!important}}
form label{display:block;font-weight:600;margin:.8rem 0 .25rem}
input,textarea{width:100%;padding:.8rem 1rem;border-radius:.9rem;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.hero h1 .w>span{transform:none}.rv,.px,.vw{opacity:1;transform:none}.bar{display:none}.cur{display:none!important}
}
[hidden]{display:none!important}

/* 31/10/2026 : PageSpeed. Animations infinies (grain, dégradé, bandeau défilant) démarrées à la première interaction : rendu identique, Speed Index non pénalisé */
html:not(.go) body::after,html:not(.go) .hero::before,html:not(.go) .mq div{animation-play-state:paused}