@font-face { font-family:'Press Start 2P'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/fonts/press-start-2p-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Press Start 2P'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/fonts/press-start-2p-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('/fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('/fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@view-transition { navigation: auto; }
.field { position:fixed; inset:0; z-index:0; background:var(--bg);
  view-transition-name:field; }
::view-transition-group(field) { animation-duration:.62s;
  animation-timing-function:cubic-bezier(.62,.04,.16,1); }
[data-pol="neg"]::view-transition-old(root),
[data-pol="neg"]::view-transition-new(root) {
  animation-duration:.32s; animation-timing-function:steps(6); }

.vt-out #cursor, .vt-out #focus, .vt-out .ghost { opacity:0 !important; }

@property --seam { syntax:'<percentage>'; inherits:true; initial-value:50%; }
:root,
[data-pol="neg"] {
  --bg:#0a0a0a; --bg-2:#0f0f0f;
  --panel:#141414; --panel-2:#1c1c1c;
  --line:#2b2b2b; --line-2:#3a3a3a;
  --ink:#f4f4f4; --dim:#9c9c9c; --dim-2:#c4c4c4;
  --pure:#ffffff;   
  --anti:#0a0a0a;

  --display:"Press Start 2P", monospace;
  --display-w:400; --display-ls:1px; --display-lh:1.12; --ds:.60;
  
  --f-titre:var(--display);
  --corner:5px;

  --ease:cubic-bezier(.2,.9,.15,1);
  --dur:.26s; --dur-2:.42s;

  --ghost-bg:var(--pure); --ghost-ink:var(--anti);
  --ghost-pad:14px 24px; --ghost-line:0; --ghost-gap:16px;
}

:root { --maxw:1180px; --gut:clamp(18px,5vw,58px); }
:root {
  --f-sous:"Space Grotesk", system-ui, sans-serif;
  --f-texte:"Space Grotesk", system-ui, sans-serif;
  --f-pixel:"Press Start 2P", monospace;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--bg);
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body {
  font-family:var(--f-texte);
  background:var(--bg); color:var(--ink); line-height:1.65;
  overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; cursor:none;
  transition:background .6s var(--ease), color .6s var(--ease);
}
a { color:inherit; text-decoration:none; }
a, a:link, label, summary, select, input, textarea,
[role="button"], [data-hov], [data-nav], [data-cursor] { cursor:none; }
img { max-width:100%; display:block; }
button { appearance:none; -webkit-appearance:none;
  background:none; border:0; border-radius:0; padding:0; color:inherit; font:inherit;
  letter-spacing:inherit; text-align:inherit; cursor:none; }

:focus-visible { outline:2px solid var(--pure); outline-offset:3px; }
nav#nav :focus-visible { outline-color:#fff; }
html[data-pol="neg"] { color-scheme:dark; }
html { scrollbar-width:thin; scrollbar-color:var(--line-2) var(--bg); }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--line-2); border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--dim); }
::selection { background:var(--pure); color:var(--anti); }
.pix { clip-path:polygon(
  0 var(--corner), var(--corner) var(--corner), var(--corner) 0,
  calc(100% - var(--corner)) 0, calc(100% - var(--corner)) var(--corner), 100% var(--corner),
  100% calc(100% - var(--corner)), calc(100% - var(--corner)) calc(100% - var(--corner)), calc(100% - var(--corner)) 100%,
  var(--corner) 100%, var(--corner) calc(100% - var(--corner)), 0 calc(100% - var(--corner))); }
.tex { position:fixed; inset:0; z-index:1; pointer-events:none; }
.tex .grain {
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-pol="neg"] .tex .grain { opacity:.06; mix-blend-mode:screen; }

.tex .weave { position:absolute; inset:0; }
[data-pol="neg"] .tex .weave {
  opacity:.5;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); }
:root { --ciel:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='977' height='733' fill='%23fff'%3E%3Ccircle cx='769' cy='674' r='0.56' fill-opacity='0.35'/%3E%3Ccircle cx='780' cy='575' r='0.47' fill-opacity='0.55'/%3E%3Ccircle cx='592' cy='212' r='0.56' fill-opacity='0.54'/%3E%3Ccircle cx='657' cy='201' r='0.57' fill-opacity='0.38'/%3E%3Ccircle cx='648' cy='69' r='0.66' fill-opacity='0.32'/%3E%3Ccircle cx='684' cy='348' r='0.47' fill-opacity='0.37'/%3E%3Ccircle cx='850' cy='620' r='0.77' fill-opacity='0.52'/%3E%3Ccircle cx='771' cy='591' r='0.59' fill-opacity='0.46'/%3E%3Ccircle cx='154' cy='256' r='0.64' fill-opacity='0.44'/%3E%3Ccircle cx='37' cy='496' r='0.53' fill-opacity='0.38'/%3E%3Ccircle cx='286' cy='11' r='0.60' fill-opacity='0.33'/%3E%3Ccircle cx='343' cy='451' r='0.64' fill-opacity='0.37'/%3E%3Ccircle cx='595' cy='186' r='0.45' fill-opacity='0.31'/%3E%3Ccircle cx='327' cy='416' r='0.58' fill-opacity='0.42'/%3E%3Ccircle cx='36' cy='229' r='0.52' fill-opacity='0.44'/%3E%3Ccircle cx='898' cy='699' r='0.53' fill-opacity='0.54'/%3E%3Ccircle cx='306' cy='627' r='0.67' fill-opacity='0.34'/%3E%3Ccircle cx='676' cy='282' r='0.72' fill-opacity='0.35'/%3E%3Ccircle cx='279' cy='122' r='0.69' fill-opacity='0.24'/%3E%3Ccircle cx='125' cy='691' r='0.69' fill-opacity='0.50'/%3E%3Ccircle cx='298' cy='642' r='0.54' fill-opacity='0.39'/%3E%3Ccircle cx='653' cy='299' r='0.55' fill-opacity='0.35'/%3E%3Ccircle cx='936' cy='490' r='0.77' fill-opacity='0.31'/%3E%3Ccircle cx='306' cy='370' r='0.68' fill-opacity='0.26'/%3E%3Ccircle cx='597' cy='52' r='0.58' fill-opacity='0.28'/%3E%3Ccircle cx='206' cy='87' r='0.61' fill-opacity='0.43'/%3E%3Ccircle cx='280' cy='525' r='0.70' fill-opacity='0.40'/%3E%3Ccircle cx='911' cy='627' r='0.55' fill-opacity='0.50'/%3E%3Ccircle cx='543' cy='683' r='0.76' fill-opacity='0.48'/%3E%3Ccircle cx='250' cy='488' r='0.56' fill-opacity='0.22'/%3E%3C/svg%3E") 0 0 / 977px 733px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1427' height='1061' fill='%23fff'%3E%3Ccircle cx='536' cy='266' r='3.6' fill-opacity='.07'/%3E%3Ccircle cx='536' cy='266' r='1.11' fill-opacity='0.78'/%3E%3Ccircle cx='1225' cy='228' r='3.3' fill-opacity='.07'/%3E%3Ccircle cx='1225' cy='228' r='1.02' fill-opacity='0.51'/%3E%3Ccircle cx='425' cy='1023' r='3.5' fill-opacity='.07'/%3E%3Ccircle cx='425' cy='1023' r='1.09' fill-opacity='0.51'/%3E%3Ccircle cx='711' cy='615' r='3.2' fill-opacity='.07'/%3E%3Ccircle cx='711' cy='615' r='1.01' fill-opacity='0.58'/%3E%3Ccircle cx='642' cy='681' r='3.4' fill-opacity='.07'/%3E%3Ccircle cx='642' cy='681' r='1.05' fill-opacity='0.64'/%3E%3Ccircle cx='702' cy='550' r='3.2' fill-opacity='.07'/%3E%3Ccircle cx='702' cy='550' r='1.00' fill-opacity='0.53'/%3E%3Ccircle cx='1048' cy='131' r='3.0' fill-opacity='.07'/%3E%3Ccircle cx='1048' cy='131' r='0.95' fill-opacity='0.70'/%3E%3Ccircle cx='415' cy='1010' r='3.6' fill-opacity='.07'/%3E%3Ccircle cx='415' cy='1010' r='1.14' fill-opacity='0.56'/%3E%3Ccircle cx='636' cy='548' r='3.1' fill-opacity='.07'/%3E%3Ccircle cx='636' cy='548' r='0.96' fill-opacity='0.77'/%3E%3C/svg%3E") 0 0 / 1427px 1061px; }

.mention-v { position:absolute; left:calc(var(--gut) * .35 + 14px); z-index:2; pointer-events:none;
  writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-family:var(--f-sous);
  font-size:9px; letter-spacing:.45em; text-transform:uppercase; color:var(--dim); }
:root { --cad-t:10px; --cad-r:10px; --cad-b:10px; --cad-l:10px; }
html::before, html::after, body::before, body::after { content:""; position:fixed; z-index:205;
  pointer-events:none; background:#fff; mix-blend-mode:difference; opacity:.6; }
html::before, html::after { left:var(--cad-l); right:var(--cad-r); height:12px; }
html::before { top:var(--cad-t);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0zM1 1v2h2V1zM5 5h1v1H5z'/%3E%3C/svg%3E") left top / 12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 0h4v4H2zM3 1v2h2V1zM0 5h1v1H0z'/%3E%3C/svg%3E") right top / 12px 12px no-repeat,
    linear-gradient(#000,#000) left 10px top 6px / calc(100% - 20px) 2px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0zM1 1v2h2V1zM5 5h1v1H5z'/%3E%3C/svg%3E") left top / 12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 0h4v4H2zM3 1v2h2V1zM0 5h1v1H0z'/%3E%3C/svg%3E") right top / 12px 12px no-repeat,
    linear-gradient(#000,#000) left 10px top 6px / calc(100% - 20px) 2px no-repeat; }
html::after { bottom:var(--cad-b);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 2h4v4H0zM1 3v2h2V3zM5 0h1v1H5z'/%3E%3C/svg%3E") left bottom / 12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 2h4v4H2zM3 3v2h2V3zM0 0h1v1H0z'/%3E%3C/svg%3E") right bottom / 12px 12px no-repeat,
    linear-gradient(#000,#000) left 10px top 4px / calc(100% - 20px) 2px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 2h4v4H0zM1 3v2h2V3zM5 0h1v1H5z'/%3E%3C/svg%3E") left bottom / 12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 2h4v4H2zM3 3v2h2V3zM0 0h1v1H0z'/%3E%3C/svg%3E") right bottom / 12px 12px no-repeat,
    linear-gradient(#000,#000) left 10px top 4px / calc(100% - 20px) 2px no-repeat; }
body::before, body::after { top:calc(var(--cad-t) + 10px); bottom:calc(var(--cad-b) + 10px); width:2px; }
body::before { left:calc(var(--cad-l) + 6px); }
body::after { right:calc(var(--cad-r) + 6px); }
#cursor {
  position:fixed; top:0; left:0; width:13px; height:13px; background:var(--pure);
  z-index:9999; pointer-events:none; mix-blend-mode:difference;
  transition:width .16s var(--ease), height .16s var(--ease), opacity .2s; }
[data-pol="neg"] #cursor { background:#fff; }
#cursor.big, [data-pol] #cursor.big {
  width:38px; height:38px; background:none; box-shadow:inset 0 0 0 1px #fff; }

html.hovering .ghost { opacity:0 !important; }
#cursor.aim { width:30px; height:30px; background:none; }
#cursor.aim::before, #cursor.aim::after {
  content:""; position:absolute; top:50%; left:50%; background:#fff; }
#cursor.aim::before { width:30px; height:1px; transform:translate(-50%,-50%); }
#cursor.aim::after { width:1px; height:30px; transform:translate(-50%,-50%); }
#cursor.aim.big::before, #cursor.aim.big::after { display:none; }
#cursor .lab {
  position:absolute; left:50%; top:calc(100% + 12px); transform:translateX(-50%);
  font-family:var(--f-sous); font-size:10px; letter-spacing:2px; white-space:nowrap;
  color:#fff; opacity:0; transition:opacity .2s; text-transform:uppercase; }
#cursor.has-lab .lab { opacity:1; }
.ghost { position:fixed; top:0; left:0; width:13px; height:13px; background:#fff;
  z-index:9998; pointer-events:none; mix-blend-mode:difference; opacity:0; }
@media (hover:none) { body { cursor:auto; } #cursor, .ghost { display:none; }
}
#leader { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; }
#leader::before, #leader::after { content:""; position:absolute; left:0; right:0; height:calc(50% + 1px);
  background:var(--bg); transition:transform .8s cubic-bezier(.76,0,.24,1); }
#leader::before { top:0; }
#leader::after { bottom:0; }
#leader.open { pointer-events:none; }
#leader.open::before { transform:translateY(-100%); }
#leader.open::after { transform:translateY(100%); }
html.sans-amorce #leader { display:none; }

#wipe { position:fixed; inset:0; z-index:9990; display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .3s steps(5), visibility .3s;
  background:#0a0a0a; }
#wipe.on { opacity:1; visibility:visible; }
#wipe .w { font-family:var(--f-titre); font-size:clamp(13px,2.4vw,18px);
  letter-spacing:1px; color:#fff; }
#wipe.on .w { animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.25; } }
nav#nav { position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; gap:10px; padding:28px var(--gut) 16px;
  color:var(--nav-ink);
  
  --nav-ink:var(--ink); --nav-dim:var(--dim); --nav-line:var(--line-2);
  --nav-bg:var(--bg); }

nav#nav::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bg); border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(-101%);
  transition:opacity .32s var(--ease), transform .42s var(--ease); }
html.lifted nav#nav::before { opacity:1; transform:none; }

nav#nav .brand { font-family:var(--f-pixel); font-size:12px; letter-spacing:1px;
  display:flex; align-items:center; gap:10px; }
nav#nav .brand .mark { width:14px; height:14px; background:var(--nav-ink);
  animation:spin 6s steps(4) infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
nav#nav .tool-btn.lang { margin-left:auto; }

nav#nav .tool-btn { font-family:var(--f-sous); font-size:11.5px; padding:8px 12px;
  box-shadow:inset 0 0 0 1px var(--nav-line); color:var(--nav-dim);
  transition:color .22s, box-shadow .22s; }
nav#nav .tool-btn:hover, nav#nav .tool-btn.on { color:var(--nav-ink);
  box-shadow:inset 0 0 0 1px var(--nav-ink); }

nav#nav .lang b { color:var(--nav-ink); }
nav#nav :focus-visible { outline-color:var(--nav-ink); }

#prog { position:fixed; top:0; left:0; height:2px; width:100%; background:#fff;
  z-index:210; mix-blend-mode:difference; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%; }

.wrap { max-width:var(--maxw); margin:0 auto; }
.sec { position:relative; z-index:2; padding:clamp(76px,13vh,150px) var(--gut); }

.eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--f-sous);
  font-size:11.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink); margin-bottom:16px; }
.eyebrow i { width:8px; height:8px; background:var(--pure); display:block; --corner:2px; }
.display { font-family:var(--f-titre); font-weight:var(--display-w);
  letter-spacing:var(--display-ls); line-height:var(--display-lh);
  font-size:calc(clamp(30px,6.4vw,80px) * var(--ds)); }
.display--sm { font-size:calc(clamp(22px,3.6vw,42px) * var(--ds)); }

.lead { color:var(--dim); font-size:clamp(15px,2vw,19px); max-width:600px; margin-top:18px; }

.sec-head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:42px; flex-wrap:wrap; }
.sec-head .idx { font-family:var(--f-sous); font-size:11px; letter-spacing:3px; color:var(--dim); }

.btn { display:inline-flex; align-items:center; gap:10px; width:max-content;
  font-family:var(--f-sous); font-size:13.5px; letter-spacing:.5px;
  padding:14px 24px; transition:transform .14s var(--ease), gap .3s var(--ease); }
.btn--solid { background:var(--pure); color:var(--anti); }
.btn--line { box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); }
.btn--line:hover { box-shadow:inset 0 0 0 1px var(--pure); }
.btn:hover { gap:16px; }

.rev { opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rev.in { opacity:1; transform:none; }
[data-rev="left"] { transform:translateX(-30px); }
[data-rev="clip"] { opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path .95s var(--ease); }
[data-rev="clip"].in { clip-path:inset(0 0 0 0); }
[data-rev="line"] { opacity:1; transform:none; }
[data-rev="line"]::after { content:""; display:block; height:1px; background:var(--line-2);
  transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
[data-rev="line"].in::after { transform:scaleX(1); }

.wd { display:inline-block; white-space:nowrap; }

.ch { display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.16em 0 .1em; margin:-.16em 0 -.1em; }
.ch > i { display:inline-block; font-style:normal; transform:translateY(115%);
  transition:transform .7s var(--ease); }
.ch.in > i { transform:none; }

@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rev, .ch > i { opacity:1 !important; transform:none !important; clip-path:none !important; }
}
.tag { font-family:var(--f-sous); font-size:10.5px; letter-spacing:1.5px; padding:4px 9px;
  box-shadow:inset 0 0 0 1px var(--line-2); color:var(--dim); }

.une { overflow:hidden; }
.une-piste { display:flex; align-items:stretch;
  transition:transform .8s var(--ease); will-change:transform; }

.une-d { flex:0 0 100%; display:grid; gap:clamp(24px,4vw,58px);
  grid-template-columns:minmax(0,clamp(240px,34%,420px)) 1fr; align-items:center;
  padding-right:2px; }

.une-art { position:relative; display:block; aspect-ratio:1; overflow:hidden;
  background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .6s var(--ease); }
.une-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease); }
.une-vide { position:absolute; inset:0; display:grid; place-items:center;
  font-size:64px; color:var(--dim-2); }
.une-grain { position:absolute; inset:0; pointer-events:none; opacity:.42;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  transition:opacity .6s var(--ease); }
.une-play { position:absolute; right:14px; bottom:14px;
  width:60px; height:60px; display:grid; place-items:center;
  font-size:18px; color:#000; background:var(--teinte,var(--pure));
  box-shadow:0 14px 34px -12px rgba(0,0,0,.8);
  opacity:0; transform:translateY(16px) scale(.9);
  transition:opacity .35s var(--ease), transform .5s cubic-bezier(.2,1.5,.35,1); }

.une-txt { min-width:0; }
.une-n { display:block; font-family:var(--f-sous); font-size:12px; letter-spacing:3px;
  color:var(--teinte,var(--dim)); font-variant-numeric:tabular-nums;
  transition:color .8s var(--ease); }
.une-n em { font-style:normal; color:var(--dim-2); }
.une-t { margin-top:14px; font-family:var(--f-titre);
  font-size:clamp(26px,3.6vw,46px); font-weight:600; letter-spacing:-.6px;
  line-height:1.12; text-wrap:balance; }
[data-pol="neg"] .une-t { font-weight:400; letter-spacing:0; }
.une-p { margin-top:16px; max-width:52ch; color:var(--dim);
  font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.65; text-wrap:pretty; }
.une-go { display:inline-flex; align-items:center; gap:11px; margin-top:26px;
  padding:13px 20px; font-family:var(--f-sous); font-size:11.5px; letter-spacing:2px;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:color .3s var(--ease), background .3s var(--ease),
    box-shadow .3s var(--ease), transform .3s var(--ease); }
.une-go .i { font-size:17px; }
.une-go:hover { color:#000; background:var(--teinte,var(--pure));
  box-shadow:inset 0 0 0 1px var(--teinte,var(--pure)); }
.une-go:active { transform:scale(.98); }
.une-eq { display:flex; align-items:flex-end; gap:2px; height:12px; }
.une-eq b { width:2px; height:3px; background:currentColor;
  animation:eq .9s ease-in-out infinite alternate; }
.une-eq b:nth-child(2) { animation-duration:.62s; }
.une-eq b:nth-child(3) { animation-duration:1.05s; }
@keyframes eq { from { height:3px; } to { height:12px; } }

.une-d.on .une-n,
.une-d.on .une-t,
.une-d.on .une-p,
.une-d.on .une-go { animation:monteLigne .75s var(--ease) both; }
.une-d.on .une-t { animation-delay:.07s; }
.une-d.on .une-p { animation-delay:.14s; }
.une-d.on .une-go { animation-delay:.21s; }
@keyframes monteLigne { from { opacity:0; transform:translateY(16px); } }

@media (hover:hover) {
  .une-art:hover img { transform:scale(1.05); }
  .une-art:hover .une-grain { opacity:0; }
  .une-art:hover { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--teinte,var(--line-2)) 55%, transparent),
    0 36px 80px -40px var(--teinte,#000); }
  .une-art:hover .une-play { opacity:1; transform:none; }
}
@media (hover:none) { .une-play { opacity:1; transform:none; }
}

.une-nav { display:flex; gap:8px; }
.une-fleche { width:44px; height:44px; display:grid; place-items:center;
  font-family:var(--f-titre); font-size:23px; line-height:1; color:var(--dim);
  background:transparent; border:0; box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer;
  transition:color .22s var(--ease), background .22s var(--ease),
    box-shadow .22s var(--ease), transform .25s var(--ease); }
.une-fleche:hover { color:var(--bg); background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.une-fleche:active { transform:scale(.92); }

.une-bas { display:flex; align-items:center; gap:22px; margin-top:clamp(24px,3vw,38px); }
.une-points { display:flex; gap:9px; }
.une-pt { width:11px; height:11px; padding:0; border:0; cursor:pointer;
  background:var(--line-2); transition:background .3s var(--ease), transform .3s var(--ease); }
.une-pt:hover { transform:scale(1.25); }
.une-pt.on { background:var(--teinte-active,var(--ink)); }
.une-jauge { position:relative; flex:1; height:2px; background:var(--line); overflow:hidden; }
.une-jauge i { position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:var(--teinte-active,var(--ink)); }
.une.court .une-jauge i { animation:jauge var(--delai,7s) linear forwards; }
.une.court.gel .une-jauge i { animation-play-state:paused; }
@keyframes jauge { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media (max-width:860px) {
  .une-d { grid-template-columns:1fr; gap:22px; align-items:start; }
  .une-art { max-width:min(78vw, 360px); }
  .une-bas { gap:16px; }
  .une-fleche { width:40px; height:40px; font-size:21px; }
}

@media (prefers-reduced-motion:reduce) {
  .une-piste { transition:none; }
  .une-d.on .une-n, .une-d.on .une-t, .une-d.on .une-p, .une-d.on .une-go { animation:none; }
  .une-eq b { animation:none; height:7px; }
  .une.court .une-jauge i { animation:none; }
}

.music-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:20px; align-items:start; }
.player-card { position:relative; padding:28px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); }
.now { display:flex; align-items:center; gap:18px; }
.now-meta { min-width:0; }
.now-meta b { overflow-wrap:anywhere; }
.cover { width:86px; height:86px; flex:none; display:grid; place-items:center; font-size:34px;
  background:var(--dim-2); color:var(--anti); background-size:cover; background-position:center;
  overflow:hidden; transition:transform .3s; }
.player-card.playing .cover { animation:pulse 1.15s steps(2) infinite; }
@keyframes pulse { 50% { transform:scale(.94); } }
.now-meta b { font-size:19px; display:block; line-height:1.25; }
.now-meta small { color:var(--dim); font-family:var(--f-sous); }
.prog-bar { position:relative; height:13px; margin:22px 0 13px; background:var(--line);
  touch-action:none; }
.prog-bar::before { content:""; position:absolute; inset:1px; background:var(--panel-2); }
.prog-bar i { position:absolute; left:1px; top:1px; bottom:1px; width:0; height:auto;
  background:var(--dim-2);
  background-image:radial-gradient(rgba(128,128,128,.25) 1px, transparent 1.4px); background-size:6px 6px;
  transition:width .15s linear; }
.prog-bar.scrub i { transition:none; }
.prog-bar.scrub { background:var(--pure); }
.controls { display:flex; align-items:center; gap:15px; color:var(--dim);
  font-family:var(--f-sous); font-size:12.5px; }
.ctl { font-size:16px; color:var(--dim); transition:color .2s, transform .14s; }
.ctl:hover { color:var(--ink); transform:scale(1.16); }
.play { width:44px; height:44px; background:var(--pure); color:var(--anti);
  display:grid; place-items:center; font-size:15px; transition:transform .14s; }
.play:hover { transform:scale(1.09); }
.time { margin-left:auto; }
.tracks { background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);
  max-height:min(340px, 52svh); overflow-y:auto; overscroll-behavior:contain; }
.tracks::-webkit-scrollbar { width:7px; }
.tracks::-webkit-scrollbar-thumb { background:var(--line-2); }
.track { display:flex; align-items:center; gap:15px; padding:16px 21px;
  border-bottom:1px dashed var(--line); transition:background .2s, padding-left .25s; }
.track:last-child { border-bottom:none; }
.track.active, .track:hover { background:var(--panel-2); padding-left:26px; }
.track .n { font-family:var(--f-sous); color:var(--dim); width:22px; }
.track.active .n, .track:hover .n { color:var(--ink); }
.track .t { min-width:0; }
.track .t b { display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track .t small { color:var(--dim); font-size:12px; }
.track .dur { margin-left:auto; font-family:var(--f-sous); color:var(--dim); font-size:12.5px; }
.track-load { display:block; padding:22px; color:var(--dim); font-size:13px; font-family:var(--f-sous); }

footer { position:relative; z-index:2; padding:70px var(--gut) 46px;
  border-top:1px solid var(--line); margin-top:30px; }
.foot { max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between;
  gap:28px; flex-wrap:wrap; align-items:center; }
.foot .big { font-family:var(--f-titre); font-weight:var(--display-w);
  letter-spacing:var(--display-ls); line-height:1.4;
  font-size:calc(clamp(22px,4.6vw,44px) * var(--ds)); }
.socials { display:flex; gap:9px; flex-wrap:wrap; }
.socials a { display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-sous); font-size:12.5px; padding:11px 16px;
  box-shadow:inset 0 0 0 1px var(--line); color:var(--dim); transition:color .25s, box-shadow .25s; }
.socials a:hover { color:var(--ink); box-shadow:inset 0 0 0 1px var(--pure); }
.i { width:1em; height:1em; display:block; flex:none; fill:currentColor;
  pointer-events:none; }
.socials .i { font-size:15px; opacity:.85; transition:opacity .25s; }
.socials a:hover .i { opacity:1; }
.btn .i { font-size:15px; }
.copyright { max-width:var(--maxw); margin:38px auto 0; font-family:var(--f-sous);
  font-size:11.5px; color:var(--dim); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

#focus { position:fixed; left:0; top:0; z-index:9997; pointer-events:none;
  mix-blend-mode:difference; opacity:0; }
#focus.on { opacity:1; }
#focus i { position:absolute; width:9px; height:9px; border:1px solid #fff; }
#focus i:nth-child(1) { left:0;  top:0;    border-right:0; border-bottom:0; }
#focus i:nth-child(2) { right:0; top:0;    border-left:0;  border-bottom:0; }
#focus i:nth-child(3) { left:0;  bottom:0; border-right:0; border-top:0; }
#focus i:nth-child(4) { right:0; bottom:0; border-left:0;  border-top:0; }
[data-pol="neg"] #focus { transition:opacity .1s, transform .16s steps(4),
  width .16s steps(4), height .16s steps(4); }
@media (hover:none) { #focus { display:none; }
}
#hud { position:fixed; right:32px; bottom:32px; z-index:180; mix-blend-mode:difference;
  font-family:var(--f-sous); font-size:10.5px; letter-spacing:2px;
  color:rgba(255,255,255,.5); pointer-events:none; }

[data-rev="focus"] { opacity:0; filter:blur(10px); transform:translateY(16px) scale(1.012);
  transition:opacity .9s var(--ease), filter 1.15s var(--ease), transform 1.15s var(--ease); }
[data-rev="focus"].in { opacity:1; filter:blur(0); transform:none; }

[data-rev="dither"] { opacity:1; transform:none; position:relative; }
[data-rev="dither"]::after { content:""; position:absolute; inset:0; z-index:6;
  background:var(--bg); transform-origin:right; transition:transform .6s steps(9); }
[data-rev="dither"].in::after { transform:scaleX(0); }

[data-rev="iris"] { opacity:1; transform:none; position:relative; }
[data-rev="iris"]::after { content:""; position:absolute; inset:0; z-index:6;
  background:var(--bg); transform-origin:top; transition:transform 1s var(--ease); }
[data-rev="iris"].in::after { transform:scaleY(0); }
[data-rev="iris"] canvas { transform:scale(1.12); transition:transform 1.5s var(--ease); }
[data-rev="iris"].in canvas { transform:none; }
[data-pol="neg"] [data-rev="iris"]::after { transition:transform .55s steps(7); }

.btn--line { position:relative; overflow:hidden; z-index:0; }
.btn--line::before { content:""; position:absolute; inset:0; background:var(--pure);
  transform:scaleX(0); transform-origin:left; z-index:-1; }
[data-pol="neg"] .btn--line::before { transition:transform .3s steps(5); }
.btn--line:hover::before { transform:scaleX(1); }
.btn--line:hover { color:var(--anti); }

[data-pol="neg"] .tex::after { content:""; position:absolute; left:0; right:0; top:0; height:130px;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.05), rgba(255,255,255,0));
  animation:sweepdown 7.5s linear infinite; }
@keyframes sweepdown { from { transform:translate3d(0,-150px,0); } to { transform:translate3d(0,100vh,0); } }

[data-enter] { opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-pol="neg"] [data-enter] { transition:opacity .3s steps(4), transform .3s steps(4); }
[data-enter].in { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  [data-rev="focus"], [data-rev="dither"], [data-rev="iris"], [data-enter] {
    opacity:1 !important; filter:none !important; transform:none !important; clip-path:none !important; }
  [data-pol="neg"] .tex::after { display:none; }
}

.rls { position:relative; z-index:2; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh; display:grid; place-items:center;
  padding:calc(110px + env(safe-area-inset-top)) var(--gut) 56px; }
.rls-art { position:absolute; inset:-14%; z-index:-2; pointer-events:none;
  background:var(--art) center/cover no-repeat;
  filter:blur(90px) saturate(1.8); transform:scale(1.08); opacity:.45; }
.rls::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 75% at 50% 30%, transparent 10%, var(--bg) 78%); }
.rls-in { width:min(440px,100%); display:flex; flex-direction:column; align-items:center;
  text-align:center; }
.rls-cover { width:100%; height:auto; aspect-ratio:1; object-fit:cover; margin-bottom:34px; }
.rls .rls-t { font-size:calc(clamp(30px,4.6vw,58px) * var(--ds)); overflow-wrap:anywhere; }
.rls-by { font-family:var(--f-sous); font-size:12px; letter-spacing:4px; color:var(--dim);
  margin-top:14px; }
.rls-list { width:100%; margin-top:34px; display:grid; gap:10px; }
.rls-list a { --brand:var(--pure); --brand-ink:var(--brand); position:relative; overflow:hidden;
  display:flex; align-items:center; gap:16px; padding:11px 20px 11px 11px;
  background:var(--panel); text-align:left; transition:background .3s var(--ease); }
.rls-list a::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(70% 160% at 0% 50%, var(--brand), transparent 70%);
  transition:opacity .45s var(--ease); }
.rls-list a::after { content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s; }
.rls-list a > * { position:relative; }
.rls-list .ic { width:42px; height:42px; flex:none; display:grid; place-items:center;
  background:var(--pure); color:var(--anti); transition:color .3s var(--ease); }
.rls-list .ic .i { font-size:19px; }
.rls-list b { flex:1; font-size:16px; letter-spacing:-.2px; }
.rls-list .go { font-family:var(--f-sous); font-size:12px; color:var(--dim);
  display:flex; align-items:center; gap:6px; transition:gap .3s var(--ease), color .3s; }
.rls-list a:hover { background:var(--panel-2); }
.rls-list a:hover::before { opacity:.22; }
.rls-list a:hover::after { box-shadow:inset 0 0 0 1px var(--brand); }
.rls-list a:hover .ic { color:var(--brand-ink); }
.rls-list a:hover .go { gap:13px; color:var(--ink); }
.rls-back { margin-top:40px; font-family:var(--f-sous); font-size:12px; letter-spacing:1.5px;
  color:var(--dim); transition:color .25s; }
.rls-back:hover { color:var(--ink); }
.rls + footer { padding-top:0; }
.rls + footer .copyright { margin-top:0; text-align:center; }

@media (max-width:1100px) {
  #hud { display:none; }
  .mention-v { display:none; }
}

@media (max-width:820px) {
  :root { --cad-t:calc(4px + env(safe-area-inset-top)); --cad-r:calc(4px + env(safe-area-inset-right));
    --cad-b:calc(4px + env(safe-area-inset-bottom)); --cad-l:calc(4px + env(safe-area-inset-left)); }
  html::after, body::before, body::after { transition:bottom .34s var(--ease); }
  nav#nav .brand { margin-right:auto; }
  nav#nav { padding:calc(24px + env(safe-area-inset-top)) var(--gut) 13px; }

  .tex { display:none; }
  #prog { mix-blend-mode:normal; background:var(--pure); opacity:.85; }
  .field { display:none; }
  html { scroll-behavior:auto; }

  nav#nav .tool-btn { min-height:42px; padding:8px 12px; }

  .sec { padding:clamp(58px,9vh,96px) var(--gut); }
  .sec-head { margin-bottom:30px; }
  .sec-head .idx { display:none; }

  .lead { font-size:16px; line-height:1.7; }
  .lead { text-wrap:pretty; }

  .music-grid { grid-template-columns:1fr; }
  .player-card { padding:20px; }
  .cover { width:68px; height:68px; font-size:26px; }
  .now-meta b { font-size:16px; }
  .ctl { padding:12px 10px; font-size:18px; }
  .controls { gap:6px; }
  .prog-bar { height:18px; }
  .tracks { max-height:56svh; }

  footer { padding:52px var(--gut) 40px; }
  .foot { flex-direction:column; align-items:center; text-align:center; gap:26px; }
  .socials { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .socials a { padding:14px; justify-content:center; }
  .socials a:last-child:nth-child(odd) { grid-column:1 / -1; }
  .copyright { margin-top:30px; flex-direction:column; align-items:center;
    text-align:center; gap:6px; }
}

@media (max-width:560px) {
  .display--sm { font-size:calc(clamp(20px,5.4vw,30px) * var(--ds)); }
  [data-pol="neg"] .display { font-size:calc(clamp(40px,9.4vw,80px) * var(--ds)); }
  [data-pol="neg"] .foot .big { font-size:calc(clamp(30px,7.5vw,44px) * var(--ds)); }
  .rls .rls-t { font-size:calc(clamp(26px,7vw,40px) * var(--ds)); }

  nav#nav { gap:6px; padding:calc(24px + env(safe-area-inset-top)) var(--gut) 13px; }
  nav#nav .brand, nav#nav .tool-btn { white-space:nowrap; }
  nav#nav .brand { font-size:10px; letter-spacing:.5px; gap:7px; min-width:0; overflow:hidden; }
  nav#nav .brand .mark { width:11px; height:11px; }
  nav#nav .tool-btn { font-size:10px; padding:7px 9px; min-height:42px; }
  .tag { font-size:11px; }
}
@media (hover:none) {
  .btn:hover { gap:10px; }
  .btn--line:hover { color:var(--ink); }
  .btn--line:hover::before { transform:scaleX(0); }
  .socials a:hover { color:var(--dim); box-shadow:inset 0 0 0 1px var(--line); }
  .track:hover { background:transparent; padding-left:21px; }
  .track:hover .n { color:var(--dim); }
  .track.active { background:var(--panel-2); padding-left:26px; }
  .track.active .n { color:var(--ink); }
  .ctl:hover { color:var(--dim); transform:none; }
  .play:hover { transform:none; }
  .rls-list a:hover { background:var(--panel); }
  .rls-list a:hover::before { opacity:0; }
  .rls-list a:hover::after { box-shadow:inset 0 0 0 1px var(--line); }
  .rls-list a:hover .ic { color:var(--anti); }
  .rls-list a:hover .go { gap:6px; color:var(--dim); }

  .btn:active { transform:scale(.97); transition-duration:.08s; }
  .btn--line:active::before { transform:scaleX(1); transition-duration:.08s; }
  .btn--line:active { color:var(--anti); }
  .rls-list a:active { background:var(--panel-2); transform:scale(.985); transition-duration:.1s; }
  .rls-list a:active::before { opacity:.22; }
  .rls-list a:active::after { box-shadow:inset 0 0 0 1px var(--brand); }
  .rls-list a:active .ic { color:var(--brand-ink); }
  .socials a:active, nav#nav .tool-btn:active { color:var(--ink); transition-duration:.08s; }
  .track:active { background:var(--panel-2); }
  .ctl:active { color:var(--ink); transform:scale(1.16); }
  .play:active { transform:scale(.92); }
}

@media (pointer:coarse) {
  html { height:100%; overflow:hidden; }
  body { height:100%; overflow:hidden auto; overscroll-behavior:contain; scroll-behavior:inherit; }
}