@font-face{font-family:"Italiana";font-weight:400;font-display:swap;src:url(../fonts/italiana-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/bodoni-moda-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/bodoni-moda-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument";font-weight:400;font-display:swap;src:url(../fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument";font-weight:500;font-display:swap;src:url(../fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument";font-weight:600;font-display:swap;src:url(../fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Mono";font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --minuit:#06152b;--profond:#0b2340;--azur:#2f6fb0;--ciel:#8cc3ea;
  --nacre:#f7f2ea;--nacre-2:rgba(247,242,234,.72);--voile:rgba(247,242,234,.18);
  --or:#ffb66b;--rose:#ff8fb1;--menthe:#8be8c8;--lilas:#c79bff;
  --prisme:linear-gradient(100deg,#ff8a5b,#ffd36b,#8be8c8,#7cb8ff,#c79bff,#ff8fb1);
  --display:"Italiana",Didot,"Bodoni",serif;
  --serif:"Bodoni","Bodoni Moda",Didot,Georgia,serif;
  --sans:"Instrument","Instrument Sans",system-ui,sans-serif;
  --mono:"Mono","JetBrains Mono",ui-monospace,monospace;
  --marge:clamp(1.2rem,6vw,5rem);
  --nuit:var(--minuit);--papier:var(--nacre);--brume:var(--nacre-2);--ecru:var(--voile);--ecru-fort:rgba(247,242,234,.4);--abricot:var(--or);--sarcelle:var(--azur);--plex:var(--ciel);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--minuit);color:var(--nacre);font-family:var(--sans);font-size:1.05rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--nacre-2);text-decoration:none;border-bottom:1px solid var(--voile)}
a:hover{color:var(--nacre)}
img,picture,svg{display:block;max-width:100%}
::selection{background:var(--azur);color:var(--nacre)}
:focus-visible{outline:2px solid var(--ciel);outline-offset:3px}
.eti{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nacre-2)}
.display{font-family:var(--display);font-weight:400;letter-spacing:.04em;line-height:.95}
.serif{font-family:var(--serif);font-weight:400}
.visu-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* grain + curseur + fond */
.grain{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.06;mix-blend-mode:overlay}
.grain svg{width:100%;height:100%}
.curseur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;z-index:69;background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,182,107,.5) 25%,rgba(124,184,255,.25) 55%,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .4s;will-change:transform}
@media (hover:hover) and (pointer:fine){body.souris .curseur{opacity:1}}
.fond{position:fixed;inset:0;z-index:-1;background:radial-gradient(120vw 80vh at 50% 110%,#123a63 0%,var(--profond) 40%,var(--minuit) 80%)}
.bokeh{position:absolute;border-radius:50%;pointer-events:none;filter:blur(14px);opacity:.55;mix-blend-mode:screen}

/* coins */
.coins{position:absolute;inset:clamp(1rem,3vw,1.8rem);pointer-events:none;z-index:6}
.coins .eti{position:absolute;white-space:nowrap}
.coins .hg{top:0;left:0}.coins .hd{top:0;right:0}.coins .bg{bottom:0;left:0}.coins .bd{bottom:0;right:0}
@media (max-width:640px){.coins .hd,.coins .bg{display:none}}

/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.hero canvas,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .fallback img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero .voile{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,21,43,.25) 0%,transparent 30%,transparent 60%,rgba(6,21,43,.85) 100%)}
.sphere{position:absolute;z-index:3;left:50%;top:44%;width:min(74vmin,560px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px) saturate(1.3) brightness(.86);-webkit-backdrop-filter:blur(4px) saturate(1.3) brightness(.86);background:radial-gradient(circle at 50% 60%,rgba(6,21,43,.28),rgba(6,21,43,.08) 60%,transparent 75%);will-change:transform,opacity}
.sphere::before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1px;background:var(--prisme);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75}
.sphere::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 45%),radial-gradient(circle at 70% 80%,rgba(255,182,107,.18),transparent 40%);box-shadow:inset 0 0 60px rgba(140,195,234,.15),0 0 90px rgba(124,184,255,.18)}
.titre{position:relative;z-index:2;margin:0;font-family:var(--display);font-weight:400;font-size:clamp(4.6rem,20vmin,11rem);line-height:.9;letter-spacing:.06em;color:var(--nacre);text-shadow:0 2px 6px rgba(6,21,43,.55),0 0 40px rgba(6,21,43,.45)}
.titre .chroma::before,.titre .chroma::after{text-shadow:none}
.titre .h{font-family:var(--serif);font-style:italic;font-size:.42em;vertical-align:.55em;letter-spacing:0;margin:0 .04em;color:var(--or)}
.hero .contenu{position:absolute;z-index:4;left:0;right:0;bottom:clamp(2rem,7vh,5rem);padding:0 var(--marge);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.phrase{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.15;max-width:22ch;text-shadow:0 2px 30px rgba(6,21,43,.8)}
.defile{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);z-index:4;width:1px;height:2.4rem;background:linear-gradient(var(--nacre),transparent);opacity:.6}

/* texte prismatique (aberration chromatique) */
.chroma{position:relative;display:inline-block;--split:0px}
.chroma::before,.chroma::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.85}
.chroma::before{color:#ff6a8a;transform:translateX(calc(var(--split) * -1))}
.chroma::after{color:#6ad3ff;transform:translateX(var(--split))}

/* action */
.action{display:inline-flex;align-items:center;gap:.8rem;padding:.95rem 1.5rem .95rem 1.6rem;border-radius:999px;border:1px solid rgba(247,242,234,.35);background:rgba(6,21,43,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--nacre);font-family:var(--sans);font-weight:500;font-size:1rem;cursor:pointer;position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s}
.action::before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;background:var(--prisme);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
.action::after{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;background:var(--prisme);filter:blur(22px);opacity:.25;transition:opacity .5s}
.action:hover{transform:translateY(-2px);border-color:transparent;color:var(--nacre)}
.action:hover::before{opacity:1}.action:hover::after{opacity:.55}
.action .inf{width:1.6rem;height:.8rem;flex:none}
.action .inf path{fill:none;stroke:url(#prisme-btn);stroke-width:2.2;stroke-linecap:round}

/* écrans */
.ecran{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(4rem,12vh,8rem) var(--marge);overflow:hidden}
.ecran.court{min-height:78svh}
.centre{max-width:72rem;margin:0 auto;width:100%;position:relative;z-index:2}
.grand{font-family:var(--display);font-size:clamp(2.4rem,7vw,6.2rem);letter-spacing:.03em;line-height:1;margin:0;max-width:18ch}
.grand em{font-family:var(--serif);font-style:italic;letter-spacing:0;color:var(--or)}
.mots{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.2;margin:0;max-width:26ch;color:var(--nacre-2)}

/* portail */
.portail{padding:0;min-height:100svh;background:var(--minuit)}
.portail .scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.portail .cadre{position:absolute;inset:0;clip-path:circle(0% at 50% 50%);will-change:clip-path}
.portail .cadre img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.portail .anneau{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 60px 18px rgba(124,184,255,.35),0 0 120px 40px rgba(255,182,107,.18);will-change:width,height;pointer-events:none}
.portail .texte{position:relative;z-index:2;text-align:center;padding:0 var(--marge);text-shadow:0 2px 40px rgba(6,21,43,.9)}
.portail .texte .grand{margin:0 auto}

/* piste horizontale */
.piste{padding:0;min-height:100svh;display:block}
.piste .cadre{height:100svh;display:flex;align-items:center;overflow:hidden}
.piste .rail{display:flex;gap:clamp(1.2rem,4vw,3rem);padding:0 var(--marge);will-change:transform}
.carte{flex:0 0 min(78vw,34rem);position:relative;padding:clamp(1.6rem,3vw,2.6rem);border-radius:28px;background:linear-gradient(160deg,rgba(247,242,234,.08),rgba(247,242,234,.02));border:1px solid rgba(247,242,234,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-height:min(60svh,30rem);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.carte::after{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;right:-20%;bottom:-25%;background:radial-gradient(circle,rgba(255,182,107,.35),rgba(124,184,255,.15) 45%,transparent 70%);filter:blur(30px);pointer-events:none}
.carte .n{font-family:var(--display);font-size:clamp(3rem,9vw,6rem);letter-spacing:.05em;line-height:1;color:var(--nacre)}
.carte .mot{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;margin:1.2rem 0 .5rem}
.carte p{margin:0;color:var(--nacre-2);max-width:28ch}
@media (max-width:720px){.piste .cadre{height:auto;padding:4rem 0}.piste .rail{flex-direction:column;transform:none!important}.carte{flex-basis:auto;min-height:0}}

/* trois mots flottants */
.trois{display:grid;gap:clamp(2rem,6vw,5rem);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:clamp(2rem,6vh,3rem)}
.trois>div{position:relative;padding-top:1.4rem;will-change:transform}
.trois>div::before{content:"";position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 18px 4px rgba(255,255,255,.6),0 0 40px 10px rgba(124,184,255,.4)}
.trois .mot{font-family:var(--display);font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:.04em;line-height:1;margin:0 0 .6rem}
.trois p{margin:0;color:var(--nacre-2);max-width:26ch;font-family:var(--serif);font-style:italic;font-size:1.25rem}

/* citation */
.citation{padding:0;min-height:90svh;justify-content:center}
.citation .image{position:absolute;inset:0;z-index:0;overflow:hidden}
.citation .image img{width:100%;height:100%;object-fit:cover;object-position:center 55%;transform:scale(1.12);will-change:transform}
.citation .voile{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--minuit) 0%,rgba(6,21,43,.15) 30%,rgba(6,21,43,.15) 70%,var(--minuit) 100%)}
.citation .contenu{position:relative;z-index:2;padding:clamp(4rem,12vh,8rem) var(--marge);max-width:72rem;margin:0 auto;width:100%;text-align:center}
.citation blockquote{margin:0 auto;font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,4.2vw,3.6rem);line-height:1.15;max-width:22ch;text-shadow:0 2px 40px rgba(6,21,43,.9)}
.citation cite{display:block;margin-top:1.4rem;font-style:normal}

/* infini + formulaire */
.infini-bloc{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.infini-bloc{grid-template-columns:1.1fr 1fr}}
.lemniscate{width:100%;max-width:38rem;overflow:visible}
.lemniscate .trace{fill:none;stroke:url(#prisme);stroke-width:3;stroke-linecap:round;filter:url(#lueur)}
.lemniscate .halo{fill:none;stroke:url(#prisme);stroke-width:14;stroke-linecap:round;opacity:.22;filter:blur(8px)}
.lemniscate .lumiere{fill:#fff;filter:url(#lueur-forte)}
.prix-legende{margin-top:.6rem}
.compte{display:flex;gap:clamp(1rem,3vw,2rem);margin:1.4rem 0 0}
.compte div{display:flex;flex-direction:column;gap:.2rem}
.compte b{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.verre{position:relative;padding:clamp(1.6rem,3vw,2.4rem);border-radius:28px;background:linear-gradient(160deg,rgba(247,242,234,.09),rgba(247,242,234,.025));border:1px solid rgba(247,242,234,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.verre::before{content:"";position:absolute;inset:-1px;border-radius:28px;padding:1px;background:var(--prisme);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;pointer-events:none}
.verre .titre-verre{font-family:var(--serif);font-style:italic;font-size:1.7rem;margin:0 0 1.2rem;line-height:1.15}
.formulaire label{display:block;margin-bottom:.6rem}
.champ{display:flex;flex-direction:column;gap:1rem}
.champ input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(247,242,234,.4);color:var(--nacre);font:inherit;font-size:1.15rem;padding:.7rem 0;border-radius:0}
.champ input::placeholder{color:rgba(247,242,234,.4)}
.champ input:focus{outline:0;border-bottom-color:var(--ciel)}
.champ .action{align-self:flex-start}
.retour{margin:1rem 0 0;min-height:1.6em;color:var(--nacre-2)}
.retour.oui{color:var(--or)}
.formulaire.fini .champ,.formulaire.fini label,.formulaire.fini .titre-verre{display:none}

/* pied */
.pied{border-top:1px solid var(--voile);padding:2.4rem var(--marge) 3rem;display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:baseline;justify-content:space-between;max-width:72rem;margin:0 auto;width:100%}
.pied p{margin:0;color:var(--nacre-2);font-size:.95rem}
.pied nav{display:flex;gap:1.6rem}

/* son */
.son{position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:60;width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid rgba(247,242,234,.3);background:rgba(6,21,43,.5);backdrop-filter:blur(8px);cursor:pointer;color:var(--nacre);padding:0;display:grid;place-items:center;isolation:isolate}
.son[hidden]{display:none}
.son::before{content:"";position:absolute;inset:3px;border-radius:50%;background:conic-gradient(from 0deg,#ff8a5b,#ffd36b,#8be8c8,#7cb8ff,#c79bff,#ff8fb1,#ff8a5b);opacity:.35;filter:blur(4px);z-index:-1}
.son.joue::before{animation:tourne 6s linear infinite;opacity:.8}
.son i{display:inline-block;width:2px;height:9px;margin:0 1.5px;background:currentColor;border-radius:1px;transform-origin:bottom}
.son.joue i{animation:onde 1.1s ease-in-out infinite}
.son.joue i:nth-child(2){animation-delay:.18s}.son.joue i:nth-child(3){animation-delay:.36s}
@keyframes onde{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.7)}}
@keyframes tourne{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px)}
  .bokeh{animation:derive var(--d,26s) ease-in-out infinite alternate}
  @keyframes derive{to{transform:translate(var(--dx,4vw),var(--dy,-6vh)) scale(1.15)}}
}
@media (prefers-reduced-motion:reduce){.defile,.curseur{display:none}.portail .cadre{clip-path:none}.portail .anneau{display:none}}