/* Asuna StudioLink — sombre, cyberpunk, aux accents d'Asuna (Sam,
   25-OCT-2026 ; révise le thème clair du matin). Le fond est l'accent 1
   poussé dans le noir — un cyan de nuit —, les surfaces un cran au-dessus ;
   l'accent 1 en néon pour les liens et l'action, l'accent 2 orange pour ce
   qui est nouveau, l'accent 3 violet pour les titres de section. Des
   lueurs, des traits fins, des libellés en capitales espacées ; et des
   scanlines très légères, comme Studio Assets dans l'app. Lisible sur un
   téléphone : un lien reçu dans LINE s'ouvre dans sa WebView. */
/* Still Time (CC0), la police des titres dans l'app — en néon ici : claire,
   et un halo de la même teinte un rien plus foncé. */
@font-face {
    font-family: "Still Time";
    src: url("fonts/StillTime-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* LINE Seed JP (LY Corporation, OFL) pour le texte courant (Sam,
   25-OCT-2026) : japonais et latin d'un seul dessin, le « a » rond. Livrée
   en tranches — latin, latin étendu, kana, kanji en deux moitiés —, chacune
   bornée par unicode-range : une page en anglais ne charge que 44 Ko, le
   japonais n'arrive que si un texte en contient. Regular et Bold. */
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Regular-latin.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Regular-latin-ext.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Regular-kana.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+3000-30FF, U+31F0-31FF, U+FF00-FFEF, U+2E80-2FDF, U+3200-33FF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Regular-kanji-1.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+4E00-6FFF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Regular-kanji-2.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+7000-9FFF, U+F900-FAFF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Bold-latin.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Bold-latin-ext.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Bold-kana.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+3000-30FF, U+31F0-31FF, U+FF00-FFEF, U+2E80-2FDF, U+3200-33FF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Bold-kanji-1.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+4E00-6FFF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Bold-kanji-2.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+7000-9FFF, U+F900-FAFF;
}
/* La graisse Thin, déclarée en 300 : le texte courant (Sam, « dégraisser »). */
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Thin-latin.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Thin-latin-ext.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Thin-kana.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+3000-30FF, U+31F0-31FF, U+FF00-FFEF, U+2E80-2FDF, U+3200-33FF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Thin-kanji-1.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+4E00-6FFF;
}
@font-face {
    font-family: "LINE Seed JP";
    src: url("fonts/LINESeedJP-Thin-kanji-2.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+7000-9FFF, U+F900-FAFF;
}
/* Nasalization (Typodermic), la « police NASA », pour la marque seule. */
@font-face {
    font-family: "Nasalization";
    src: url("fonts/Nasalization-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* しょかきさらり行体, du même esprit, pour les kana et les kanji que Still
   Time n'a pas — la même paire que le titre du stream dans l'app. Bornée
   aux plages japonaises : le navigateur ne la charge (2 Mo) que si un
   titre en a besoin. */
@font-face {
    font-family: "Shokaki Sarari Gyotai";
    src: url("fonts/ShokakiSarariGyotai.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+3000-30FF, U+31F0-31FF, U+4E00-9FFF, U+FF00-FFEF;
}
/* DotGothic16 (Fontworks, OFL), la police à points d'un ordinateur des années
   80, pour le chat seul (Sam, 01-NOV-2026) — essayée pour tout le site en
   1.10 et écartée. Deux tranches : le latin, léger ; le japonais, chargé
   seulement si un message en a. */
@font-face {
    font-family: "DotGothic16";
    src: url("fonts/DotGothic16-latin.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-024F, U+02C6-02DC, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2500-26FF, U+FFFD;
}
@font-face {
    font-family: "DotGothic16";
    src: url("fonts/DotGothic16-japanese.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+3000-30FF, U+31F0-31FF, U+4E00-9FFF, U+FF00-FFEF;
}
/* Neo둥근모 (Dalgona, OFL, v1.601), la 둥근모꼴 des PC coréens sous DOS
   convertie en TrueType — dessinée sur 16 pixels comme DotGothic16, qui n'a
   pas de hangul (Sam, 01-NOV-2026). Le kit web officiel, tel quel : l'OFL
   réserve son nom, un découpage aurait dû la renommer. Bornée au coréen,
   chargée seulement si un message en a. */
@font-face {
    font-family: "NeoDunggeunmo";
    src: url("fonts/NeoDunggeunmo.woff2") format("woff2"), url("fonts/NeoDunggeunmo.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7FF;
}
/* Les nuances des quatre accents (Sam, 30-OCT-2026) — app/Theme.php les
   recalcule à partir des accents réglés dans AsunaLab, envoyés par la
   synchro, et les repose après cette feuille. Ces valeurs-ci sont celles
   des accents par défaut : le site reste juste tant que rien n'est arrivé.
   --aN-LL : accent N, clarté perçue LL %. */
:root {
    --a1-15: #020d10; --a1-15-rgb: 2, 13, 16;
    --a1-19: #04161a; --a1-19-rgb: 4, 22, 26;
    --a1-20: #031a1d; --a1-20-rgb: 3, 26, 29;
    --a1-21: #061d21; --a1-21-rgb: 6, 29, 33;
    --a1-24: #072328; --a1-24-rgb: 7, 35, 40;
    --a1-25: #04262a; --a1-25-rgb: 4, 38, 42;
    --a1-30: #0b343a; --a1-30-rgb: 11, 52, 58;
    --a1-58: #008c8c; --a1-58-rgb: 0, 140, 140;
    --a1-69: #00b2b2; --a1-69-rgb: 0, 178, 178;
    --a1-73: #7fb3b6; --a1-73-rgb: 127, 179, 182;
    --a1-76: #1fc8d6; --a1-76-rgb: 31, 200, 214;
    --a1-83: #00e5e5; --a1-83-rgb: 0, 229, 229;
    --a1-91: #7ff7f7; --a1-91-rgb: 127, 247, 247;
    --a1-91-2: #9df3f3; --a1-91-2-rgb: 157, 243, 243;
    --a1-93: #9ffafa; --a1-93-rgb: 159, 250, 250;
    --a1-95: #d7f4f4; --a1-95-rgb: 215, 244, 244;
    --a1-97: #d9fdfd; --a1-97-rgb: 217, 253, 253;
    --a1-98: #e0ffff; --a1-98-rgb: 224, 255, 255;
    --a1-99: #f0ffff; --a1-99-rgb: 240, 255, 255;
    --a2-19: #1c1105; --a2-19-rgb: 28, 17, 5;
    --a2-23: #2a1a08; --a2-23-rgb: 42, 26, 8;
    --a2-58: #be5a00; --a2-58-rgb: 190, 90, 0;
    --a2-68: #e17a12; --a2-68-rgb: 225, 122, 18;
    --a2-78: #ff9a2e; --a2-78-rgb: 255, 154, 46;
    --a2-82: #ffb15e; --a2-82-rgb: 255, 177, 94;
    --a2-86: #ffc48a; --a2-86-rgb: 255, 196, 138;
    --a2-93: #ffe2c2; --a2-93-rgb: 255, 226, 194;
    --a2-98: #fff6ec; --a2-98-rgb: 255, 246, 236;
    --a3-18: #150b22; --a3-18-rgb: 21, 11, 34;
    --a3-21: #1f1030; --a3-21-rgb: 31, 16, 48;
    --a3-65: #af64f5; --a3-65-rgb: 175, 100, 245;
    --a3-72-2: #c084f5; --a3-72-2-rgb: 192, 132, 245;
    --a3-72: #c77dff; --a3-72-rgb: 199, 125, 255;
    --a3-78: #d79bff; --a3-78-rgb: 215, 155, 255;
    --a3-80: #dea0ff; --a3-80-rgb: 222, 160, 255;
    --a3-86: #ecbeff; --a3-86-rgb: 236, 190, 255;
    --a3-88: #ecc9ff; --a3-88-rgb: 236, 201, 255;
    --a3-93: #f5dcff; --a3-93-rgb: 245, 220, 255;
}
:root {
    --bg: var(--a1-19);
    --bg-deep: var(--a1-15);
    --card: var(--a1-24);
    --card-edge: var(--a1-30);
    --line: rgba(var(--a1-83-rgb), .18);
    --ink: var(--a1-95);
    --muted: var(--a1-73);
    --accent: var(--a1-83);
    --accent-dim: var(--a1-69);
    --accent-soft: rgba(var(--a1-83-rgb), .10);
    --accent-glow: 0 0 10px rgba(var(--a1-83-rgb), .45), 0 0 26px rgba(var(--a1-83-rgb), .18);
    --accent-2: var(--a2-78);
    --accent-2-soft: rgba(var(--a2-78-rgb), .14);
    --accent-2-glow: 0 0 10px rgba(var(--a2-78-rgb), .5);
    --accent-3: var(--a3-72);
    --accent-3-soft: rgba(var(--a3-72-rgb), .14);
    --danger: #ff5c6c;
    --warn: #ffbf47;
    --ok: #3ddc97;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; color: var(--ink); min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(var(--a1-83-rgb), .12), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(var(--a3-72-rgb), .10), transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    background-attachment: fixed;
    font: 300 17px/1.6 "LINE Seed JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", Helvetica, Arial, sans-serif;
}
/* Les scanlines : une rayure sur quatre pixels, à peine là. */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 4px);
    mix-blend-mode: multiply;
}
main, .topbar, .footer, .flash { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--a1-91); text-shadow: var(--accent-glow); }
main { max-width: 980px; margin: 0 auto; padding: 20px 16px 56px; }
h1 { font-size: 26px; margin: 18px 0 12px; line-height: 1.2; letter-spacing: .01em; }
h1.neon, .neon {
    font-family: "Still Time", "Shokaki Sarari Gyotai", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; font-weight: normal;
    font-size: 40px; letter-spacing: .02em; color: var(--a1-97);
    text-shadow:
        0 0 2px var(--a1-91-2),
        0 0 8px rgba(var(--a1-83-rgb), .85),
        0 0 18px rgba(var(--a1-69-rgb), .7),
        0 0 36px rgba(var(--a1-58-rgb), .45);
}
/* La mention devant un titre — Track:, Artist:, Project: — plus discrète que lui. */
.label { font-family: "LINE Seed JP", sans-serif; font-weight: 700; font-size: .42em; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--accent-dim); text-shadow: none; vertical-align: .35em; margin-right: .2em; }
.eyebrow .label, small .label, strong .label, .artist .label, a .label { font-size: .8em; vertical-align: baseline; }
/* Chaque mention dans son accent (Sam, 25-OCT-2026) : Track orange, Artist cyan, Project violet. */
.label-track { color: var(--accent-2); }
.label-artist { color: var(--accent); }
.label-project { color: var(--accent-3); }
.lead { font-size: 18px; margin: 0 0 12px; }
/* Les titres de panneau en Nasalization (Sam, 25-OCT-2026), chacun dans
   l'accent de son panneau — .panel-1 cyan, .panel-2 orange, .panel-3
   violet ; violet par défaut. Le trait et le coin de la carte suivent. */
h2 {
    font-family: "Nasalization", sans-serif; font-weight: normal;
    font-size: 15px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .2em; color: var(--panel, var(--accent-3));
    text-shadow: 0 0 8px var(--panel-glow, rgba(var(--a3-72-rgb), .45));
    display: flex; align-items: center; gap: 10px;
}
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--panel, var(--accent-3)), transparent); opacity: .6; }
/* Le cadre lui-même prend l'accent du panneau (Sam, 25-OCT-2026) : un
   trait franc, et sa lueur autour, en plus de l'ombre portée. */
.panel-1 { --panel: var(--accent); --panel-glow: rgba(var(--a1-83-rgb), .45); }
.panel-2 { --panel: var(--accent-2); --panel-glow: rgba(var(--a2-78-rgb), .45); }
.panel-3 { --panel: var(--accent-3); --panel-glow: rgba(var(--a3-72-rgb), .45); }
/* Et le fond (Sam) : l'accent du panneau poussé dans le noir, comme le
   fond de la page l'est pour l'accent 1. */
.panel-1 { --panel-bg: var(--a1-25); --panel-bg-deep: var(--a1-20); }
.panel-2 { --panel-bg: var(--a2-23); --panel-bg-deep: var(--a2-19); }
.panel-3 { --panel-bg: var(--a3-21); --panel-bg-deep: var(--a3-18); }

/* **Un seul accent par panneau** (Sam, 26-OCT-2026, règle générale) : dans
   un cadre, tout ce qui est teinté prend la teinte du panneau — seule la
   teinte change, la clarté de chaque élément reste. Les gris restent gris.
   Chaque panneau donne sa couleur en quatre clartés et ses composantes, pour
   le néon : --tone-light (le texte d'un titre néon), --tone-mid (le cœur du
   halo, les mentions), --tone (l'accent), --tone-rgb et --tone-dark-rgb (les
   couches du halo). */
.panel-1 { --tone: var(--a1-83); --tone-light: var(--a1-99); --tone-mid: var(--a1-91); --tone-dim: var(--a1-69); --tone-dark: var(--a1-58); --tone-rgb: var(--a1-83-rgb); --tone-dark-rgb: var(--a1-58-rgb); }
.panel-2, .invite { --tone: var(--a2-78); --tone-light: var(--a2-98); --tone-mid: var(--a2-86); --tone-dim: var(--a2-68); --tone-dark: var(--a2-58); --tone-rgb: var(--a2-78-rgb); --tone-dark-rgb: var(--a2-58-rgb); }
/* Le violet perd en luminance ce que le cyan a d'office : à clarté égale il
   paraît plus sombre. Son néon est donc poussé — le texte presque blanc, le
   cœur et le halo plus clairs — pour luire autant que le cyan (Sam). */
.panel-3 { --tone: var(--a3-78); --tone-light: #fefaff; --tone-mid: var(--a3-88); --tone-dim: var(--a3-72-2); --tone-dark: var(--a3-65); --tone-rgb: var(--a3-80-rgb); --tone-dark-rgb: var(--a3-65-rgb); }
.panel-3 .neon.neon {
    color: #ffffff;
    text-shadow: 0 0 1px #fff, 0 0 3px var(--a3-93), 0 0 8px rgba(var(--a3-86-rgb), 1), 0 0 18px rgba(var(--tone-rgb), .95), 0 0 40px rgba(var(--tone-dark-rgb), .7);
}
:is(.panel-1, .panel-2, .panel-3, .invite) .neon {
    color: var(--tone-light);
    text-shadow: 0 0 1px #fff, 0 0 3px var(--tone-mid), 0 0 9px rgba(var(--tone-rgb), .95), 0 0 20px rgba(var(--tone-rgb), .75), 0 0 40px rgba(var(--tone-dark-rgb), .55);
}
:is(.panel-1, .panel-2, .panel-3, .invite) :is(.label, .label-track, .label-artist, .label-project) { color: var(--tone-dim); }
:is(.panel-1, .panel-2, .panel-3, .invite) :is(.artist, .eyebrow, .sheet, a:not(.session-tile):not(.entry-link):not(.neon-link):not(.material)) { color: var(--tone-mid); }
:is(.panel-1, .panel-2, .panel-3, .invite) a:not(.session-tile):not(.entry-link):not(.neon-link):not(.material):hover { color: var(--tone-light); text-shadow: 0 0 8px rgba(var(--tone-rgb), .6); }
/* Un titre néon qui est aussi un lien garde le texte presque blanc du néon :
   c'est le halo qui dit la couleur (Sam, 26-OCT-2026, règle générale). */
:is(.panel-1, .panel-2, .panel-3, .invite) .neon a.neon-link, :is(.panel-1, .panel-2, .panel-3, .invite) .neon a.neon-link:hover { color: inherit; text-shadow: inherit; text-decoration: none; }
:is(.panel-1, .panel-2, .panel-3, .invite) .tag { color: var(--tone); background: rgba(var(--tone-rgb), .14); border-color: rgba(var(--tone-rgb), .45); }
:is(.panel-1, .panel-2, .panel-3, .invite) .session-tile:hover .tile-title { color: var(--tone-mid); text-shadow: 0 0 8px rgba(var(--tone-rgb), .6); }
:is(.panel-1, .panel-2, .panel-3, .invite) .avatar { color: var(--tone); background: rgba(var(--tone-rgb), .10); border-color: rgba(var(--tone-rgb), .3); }
:is(.panel-1, .panel-2, .panel-3, .invite) button:not(.play) { background: var(--tone); box-shadow: 0 0 10px rgba(var(--tone-rgb), .5); }
:is(.panel-1, .panel-2, .panel-3, .invite) input:focus { border-color: var(--tone); box-shadow: 0 0 10px rgba(var(--tone-rgb), .45); }
.card.panel-1, .card.panel-2, .card.panel-3 {
    border-color: var(--panel);
    background: linear-gradient(180deg, var(--panel-bg), var(--panel-bg-deep));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 40px -20px var(--panel), 0 0 14px -2px var(--panel-glow), 0 10px 30px rgba(0, 0, 0, .35);
}
.card.panel-1::after { background: linear-gradient(225deg, var(--accent) 0 1px, transparent 1px); }
.card.panel-2::after { background: linear-gradient(225deg, var(--accent-2) 0 1px, transparent 1px); }
.card.panel-3::after { background: linear-gradient(225deg, var(--accent-3) 0 1px, transparent 1px); }
.count { font-weight: normal; color: var(--muted); font-size: .85em; text-transform: none; letter-spacing: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
small, .small, .footer, .entry time, .people small, .gallery small, .eyebrow, .topbar nav, .tag { font-weight: 400; }
strong { font-weight: 700; }
.error { color: var(--danger); }
.warn { color: var(--warn); }
.eyebrow { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent-dim); }
code { background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: 3px; font-size: .9em; }

.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; background: rgba(var(--a1-15-rgb), .85); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(var(--a1-83-rgb), .08), 0 6px 24px rgba(0, 0, 0, .35);
}
/* La marque : Asuna StudioLink, en Nasalization (Sam, 25-OCT-2026) —
   « Asuna » en néon orange, « StudioLink » en néon cyan, la même astuce que
   les titres. */
/* La marque (Sam, 26-OCT-2026) : les deux mots collés, sans halo —
   « Asuna » en Nasalization, turquoise (l'accent d'Asuna, var(--a1-69)), un peu
   plus grand ; « StudioLink » orange, dans la police fine des titres de morceaux, en grand. */
.brand { font-family: "Nasalization", "Still Time", sans-serif; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; color: #ffffff; line-height: 1; text-shadow: none; }
.brand:hover { text-decoration: none; }
.brand .asuna { color: var(--a1-69); text-shadow: none; font-size: 23px; }
/* « StudioLink » dans la police des titres de morceaux — LINE Seed JP, fine,
   en capitales espacées —, en grand. */
.brand .studiolink { color: var(--a2-78); font-family: "LINE Seed JP", sans-serif; font-weight: 300; font-size: 30px; text-transform: uppercase; letter-spacing: .26em; }
/* Entre les deux, « .:: » en blanc (Sam, 26-OCT-2026). */
.brand .brand-sep { color: #ffffff; font-family: "LINE Seed JP", sans-serif; font-weight: 300; font-size: 30px; letter-spacing: .04em; margin-left: .1em; }
.topbar nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.topbar nav a { color: var(--a1-93); }
.topbar nav a:hover { color: var(--a1-98); text-shadow: var(--accent-glow); }
.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 18px; border-top: 1px solid var(--line); letter-spacing: .04em; }

.flash { max-width: 980px; margin: 12px auto 0; padding: 10px 16px; border-radius: 4px; border: 1px solid; }
.flash-ok { background: rgba(61, 220, 151, .12); color: var(--ok); border-color: rgba(61, 220, 151, .4); }
.flash-error { background: rgba(255, 92, 108, .12); color: var(--danger); border-color: rgba(255, 92, 108, .4); }

/* Les cartes : un trait fin cyan, un coin coupé en haut à droite. */
.card {
    position: relative; background: linear-gradient(180deg, var(--card), var(--a1-21)); border: 1px solid var(--line);
    border-radius: 6px; padding: 18px; margin: 0 0 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .35);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.card::after {
    content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px;
    background: linear-gradient(225deg, var(--accent) 0 1px, transparent 1px); opacity: .7;
}
.card.narrow { max-width: 420px; margin: 40px auto; }
.card.narrow-wide { max-width: 640px; margin: 24px auto; }
.card.admin { border-style: dashed; }

/* Formulaires */
label { display: block; margin: 0 0 12px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
input, textarea, select {
    display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font: inherit; font-weight: 400; color: var(--ink);
    text-transform: none; letter-spacing: 0;
    border: 1px solid var(--card-edge); border-radius: 3px; background: var(--bg-deep);
}
input[readonly] { color: var(--accent); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }
button, .button {
    display: inline-block; padding: 10px 18px; font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    color: var(--bg-deep); background: var(--accent); border: 0; border-radius: 3px; cursor: pointer;
    box-shadow: var(--accent-glow);
}
button:hover:not(:disabled) { background: var(--a1-91); }
button:disabled { opacity: .4; cursor: default; box-shadow: none; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent-dim); box-shadow: none; }
button.secondary:hover:not(:disabled) { background: var(--accent-soft); box-shadow: var(--accent-glow); }
button.strong { background: var(--accent-2); box-shadow: var(--accent-2-glow); }
button.strong:hover:not(:disabled) { background: var(--a2-82); }
button.danger { background: transparent; color: var(--danger); border: 1px solid rgba(255, 92, 108, .5); box-shadow: none; }
form.inline { display: inline; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-form label { flex: 1; min-width: 200px; margin: 0; }
.inline-form button { margin-bottom: 1px; }
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }

/* Listes */
.list { list-style: none; margin: 0; padding: 0; }
.list li + li { border-top: 1px solid var(--line); }
.list.compact li { padding: 4px 0; font-size: 14px; }
.list.compact li + li { border: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ink); }
.row:hover { text-decoration: none; }
.row:hover strong { color: var(--accent); text-shadow: var(--accent-glow); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.number { width: 24px; text-align: right; color: var(--accent-dim); font-variant-numeric: tabular-nums; }

.avatar {
    flex: none; width: 40px; height: 40px; border-radius: 4px; object-fit: cover; background: var(--accent-soft);
    color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
    border: 1px solid var(--line);
}
.avatar.person { border-radius: 50%; }
.avatar.small { width: 32px; height: 32px; font-size: 12px; }
/* La pochette d'une session est la composition d'AsunaLab — carton usé,
   penché, vinyle qui dépasse, sur fond transparent (Sam, 26-OCT-2026) :
   on la montre entière, sans cadre ni rayures, avec son seul halo. */
.avatar.cover { width: 200px; height: 200px; border-radius: 0; font-size: 40px; object-fit: contain; background: transparent; border: 0;
    filter: drop-shadow(0 0 14px rgba(var(--a1-83-rgb), .35)) drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); }
span.avatar.cover { border-radius: 6px; background: var(--accent-soft); border: 1px solid var(--line); box-shadow: 0 0 0 1px var(--accent-dim), var(--accent-glow); }
.tag {
    display: inline-block; padding: 2px 9px; border-radius: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(var(--a1-83-rgb), .35);
}
.tag.kind-demo { background: var(--accent-2-soft); color: var(--accent-2); border-color: rgba(var(--a2-78-rgb), .45); }
.tag.kind-instrumental, .tag.kind-guideTrack, .tag.kind-clickTrack { background: var(--accent-3-soft); color: var(--accent-3); border-color: rgba(var(--a3-72-rgb), .45); }

/* Le feed */
.columns { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }

/* L'accueil (Sam, 26-OCT-2026) : les projets au centre, chacun un panneau
   avec ses sessions en tuiles — la pochette composée, Track:, Artist: —,
   les dernières mises à jour à droite, en compact. */
/* L'accueil prend plus de largeur que les autres pages (Sam, 26-OCT-2026) : la
   colonne des projets s'élargit, Latest garde ses 300 px. */
main:has(.columns.home) { max-width: 1240px; }
.columns.home { grid-template-columns: minmax(0, 1fr) 300px; }
.project-panel { padding: 20px 22px 22px; }
.project-panel-head { text-align: center; }
.project-panel-head h1 { margin: 0 0 4px; font-size: 38px; justify-content: center; }
.project-panel-head h1 a { color: inherit; }
.project-panel-head h1 a:hover { text-shadow: inherit; text-decoration: none; }
.project-panel-head .artist { margin: 0 0 22px; }
/* **Home, un panneau par projet** (Sam, 29-OCT-2026). La Quick Preview
   dans un panneau néon accent 2, le pitch juste au-dessus ; les sessions
   repliées, dépliées par la zone colorée du bas, son chevron blanc. */
.quick-preview { margin: 4px 0 16px; padding: 16px 18px 14px; }
.quick-preview h2.preview-title { margin: 0 0 8px; }
.quick-preview .project-pitch { margin: 0 0 14px; }
.quick-preview .project-pitch .concept { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tone-light); }
.quick-preview .project-pitch .pitch-more .concept { margin-top: 8px; }
/* Sans « ## », trois lignes tant qu'on n'a pas déplié. */
.quick-preview .project-pitch.clamped:not(.expanded) .pitch-excerpt {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* **Read more** (Sam, 31-OCT-2026) : texte clair en maigre, un œil devant ;
   son cadre est celui des petits boutons, le dessin des cartes Latest
   (.neon-button, plus bas). */
.quick-preview .project-pitch button.read-more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 12px 4px 9px;
    color: var(--a2-98); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.quick-preview .project-pitch button.read-more[hidden] { display: none; }
.quick-preview .project-pitch button.read-more svg { width: 15px; height: 15px; }
.quick-preview .player { padding-left: 0; }
.project-panel { padding-bottom: 0; }
.project-panel .session-rows { display: none; }
.project-panel.open .session-rows { display: block; }
.project-panel .panel-foot {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 12px -22px 0; padding: 0 16px; min-height: 40px; width: calc(100% + 44px);
    font-size: 13px; font-weight: 600; letter-spacing: .03em; color: #fff;
    background: rgba(var(--tone-rgb), .55); border: 0; border-radius: 0; box-shadow: none;
}
.project-panel p.panel-foot { background: rgba(var(--tone-rgb), .22); color: var(--tone-mid); font-weight: 500; }
.project-panel button.panel-foot { cursor: pointer; background: rgba(var(--tone-rgb), .55); box-shadow: none; }
.project-panel button.panel-foot:hover { background: rgba(var(--tone-rgb), .75); }
.project-panel .panel-foot .chevron {
    width: 11px; height: 11px; border-right: 3px solid #fff; border-bottom: 3px solid #fff;
    transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.project-panel.open .panel-foot .chevron { transform: translateY(3px) rotate(225deg); }
.row-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.row-foot .row-people { margin: 0; }
/* **Studio Session Material** : lumineux s'il y a des fichiers pour soi,
   éteint sinon. */
/* **Studio Session Material**, une pilule néon centrée (Sam, 31-OCT-2026) :
   fond sombre, texte très clair, trait et halo en accent 2, la bobine
   devant ; grise et éteinte quand rien n'est ouvert pour soi. */
.material {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
    color: var(--a2-98);
}
.material .material-icon { width: 30px; height: 25px; object-fit: contain; }
.material.on .material-icon { filter: drop-shadow(0 0 4px rgba(var(--a2-78-rgb), .8)); }
.material.on:hover { text-decoration: none; color: #fff; }
.material.off { color: rgba(255, 255, 255, .35); cursor: default; }
.material.off .material-icon { opacity: .3; filter: grayscale(1); }
/* Studio Session Material est la dernière ligne du bloc de droite (Sam, 01-NOV-2026) : la pochette, centrée sur la hauteur de la ligne, se centre ainsi sur tout le bloc. */
.session-row .row-body > .row-foot { justify-content: center; margin-top: 10px; padding-bottom: 6px; position: relative; z-index: 1; }
/* « Collaborators » devant les médaillons, dans la teinte du cadre où il se trouve — accent 2 dans la Quick Preview, accent 3 sur une session (Sam, 31-OCT-2026 ; l'accent 1 essayé et retiré). */
.people-title { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--tone); }
.preview-people-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.preview-people-row .row-people { margin: 0; }
.session-row .preview-people-row { margin-top: 8px; }
.session-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.session-tile { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.session-tile:hover { text-decoration: none; }
.session-tile:hover .tile-title { color: var(--accent); text-shadow: var(--accent-glow); }
.avatar.tile-cover { width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: 0; object-fit: contain; background: transparent; border: 0;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
span.avatar.tile-cover { aspect-ratio: 1; border-radius: 6px; background: var(--accent-soft); border: 1px solid var(--line); font-size: 32px; }
.tile-title { font-weight: 700; line-height: 1.3; }
.session-tile small { color: var(--muted); }
.latest .entry-link { padding: 10px 12px; }
.latest .entry strong { display: block; font-size: 14px; line-height: 1.35; margin-top: 2px; }
.latest .entry time { display: block; margin-top: 4px; font-size: 12px; }
.feed h1 { margin-top: 10px; }
/* Une entrée du feed est colorée comme un panneau de session : son cadre,
   son fond et son titre dans l'accent de sa catégorie (Sam, 25-OCT-2026). */
.entry {
    border: 1px solid var(--panel); border-left-width: 3px; border-radius: 4px; margin: 0 0 10px;
    background: linear-gradient(180deg, var(--panel-bg), var(--panel-bg-deep));
    box-shadow: inset 0 0 40px -20px var(--panel), 0 0 14px -2px var(--panel-glow), 0 6px 20px rgba(0, 0, 0, .3);
}
.entry strong { color: var(--panel); text-shadow: 0 0 8px var(--panel-glow); }
.entry-link { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; color: var(--ink); }
.entry-link:hover { text-decoration: none; text-shadow: none; }
.entry-link:hover strong { color: #fff; }
.entry-main { flex: 1; min-width: 0; }
.entry-main p { margin: 4px 0 0; font-size: 14px; }
.entry time { font-size: 12px; color: var(--muted); white-space: nowrap; letter-spacing: .06em; }
.side h2 { margin-top: 10px; }
.project-card { padding: 12px 14px; }
.project-link { display: flex; gap: 10px; align-items: center; color: var(--ink); margin-bottom: 6px; }
.project-link span { display: flex; flex-direction: column; min-width: 0; }
.project-link small { color: var(--muted); }

/* Le pitch */
.pitch-head { display: flex; gap: 24px; align-items: flex-start; margin: 14px 0 20px; }
.pitch-title { flex: 1; min-width: 0; }
.pitch-title h1 { margin: 2px 0 8px; font-size: 48px; line-height: 1.1; }
.artist { margin: 0 0 10px; font-size: 18px; color: var(--accent-dim); letter-spacing: .04em; }
.people { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.people li { display: inline-flex; align-items: center; gap: 6px; }
.people small { color: var(--muted); }
.concept { margin: 0; white-space: pre-line; font-size: 17px; line-height: 1.6; }
.tracks { list-style: none; margin: 0; padding: 0; }
.track + .track { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.track-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
/* Le lecteur à nous (player.js), en néon (Sam, 25-OCT-2026) : pas de
   bouton, l'icône seule, très claire avec un halo — la même astuce que les
   titres —, et la barre pareil ; icône et barre pulsent. **Dans la teinte de
   son panneau** (un seul accent par panneau, 26-OCT-2026) : orange dans
   Listen, violet dans un panneau de projet ; orange hors panneau. */
.player { --p-light: var(--tone-light, var(--a2-93)); --p-mid: var(--tone-mid, var(--a2-86)); --p-dark: var(--tone-dark, var(--a2-58)); --p-rgb: var(--tone-rgb, var(--a2-78-rgb)); --p-dark-rgb: var(--tone-dark-rgb, var(--a2-58-rgb));
    display: flex; align-items: center; gap: 16px; padding: 10px 4px; }
.player audio { display: none; }
.player .play {
    flex: none; width: 36px; height: 36px; padding: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center;
    background: none; box-shadow: none; color: var(--p-light);
    filter: drop-shadow(0 0 3px var(--p-mid)) drop-shadow(0 0 8px rgba(var(--p-rgb), .9)) drop-shadow(0 0 18px rgba(var(--p-dark-rgb), .6));
    animation: neon-breathe 2.6s ease-in-out infinite;
}
.player .play:hover:not(:disabled) { background: none; color: #fff; box-shadow: none; }
.player .play .icon { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent currentColor; }
.player.playing .play .icon { width: 18px; height: 22px; margin: 0; border: 0; border-left: 6px solid currentColor; border-right: 6px solid currentColor; box-sizing: border-box; }
.player.playing .play { animation-duration: 1.2s; }
.player .bar { position: relative; flex: 1; height: 6px; border-radius: 3px; cursor: pointer; outline: none;
    background: rgba(var(--p-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--p-rgb), .25); }
.player .bar:focus-visible { box-shadow: 0 0 0 2px rgba(var(--p-rgb), .5); }
.player .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px;
    background: var(--p-light); box-shadow: 0 0 3px var(--p-mid), 0 0 8px rgba(var(--p-rgb), .9), 0 0 18px rgba(var(--p-dark-rgb), .6);
    animation: neon-breathe 2.6s ease-in-out infinite; }
.player.playing .fill { animation-duration: 1.2s; }
.player .head { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 4px var(--p-mid), 0 0 12px rgba(var(--p-rgb), .9), 0 0 24px rgba(var(--p-dark-rgb), .6); pointer-events: none; }
.player.buffering .head { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.7); opacity: .6; } }
@keyframes neon-breathe { 50% { opacity: .78; } }
.player .times { flex: none; font-size: 13px; font-weight: 400; color: var(--p-mid); font-variant-numeric: tabular-nums; letter-spacing: .04em; text-shadow: 0 0 6px rgba(var(--p-rgb), .5); }
.player .times .current { color: var(--p-light); }
/* **Download** au bout de la barre (Sam, 31-OCT-2026) : un carré néon à fond
   sombre, le trait et le halo dans la teinte du lecteur. */
.player .download {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px;
    color: var(--p-light);
}
.player .download svg { width: 17px; height: 17px; }
.player .download:hover { color: #fff; text-decoration: none; }
.player.failed .bar { box-shadow: inset 0 0 0 1px rgba(255, 92, 108, .6); }
.player.failed .times::after { content: ' · can’t play this file'; color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .player .play, .player .fill { animation: none; } }
.sheet { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--accent-3); letter-spacing: .08em; text-transform: uppercase; }
.sheet .muted { font-weight: normal; text-transform: none; letter-spacing: 0; font-size: 14px; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
/* Les visuels sous scanlines (Sam, 25-OCT-2026) : des rayures plus
   marquées que celles de la page, et un léger voile cyan — un écran, pas une
   photo. L'image elle-même n'est pas touchée : le lien l'ouvre nette. */
.gallery a { position: relative; display: block; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.gallery a::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(var(--a1-15-rgb), .55) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, rgba(var(--a1-83-rgb), .10), rgba(var(--a1-83-rgb), 0) 40%, rgba(var(--a1-83-rgb), .08));
    mix-blend-mode: multiply;
}
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.05); }
.gallery a:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
.gallery a:hover::after { opacity: .6; }
/* La pochette aussi, dans le même esprit. */
.pitch-head { position: relative; }
.gallery small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.invite { border-color: rgba(var(--a2-78-rgb), .5); background: linear-gradient(180deg, rgba(var(--a2-78-rgb), .10), var(--card)); box-shadow: 0 0 0 1px rgba(var(--a2-78-rgb), .15), var(--accent-2-glow), 0 10px 30px rgba(0, 0, 0, .35); }
.invite::after { background: linear-gradient(225deg, var(--accent-2) 0 1px, transparent 1px); }
.invite h1 { margin-top: 0; }

.report ol { margin: 0; padding-left: 20px; }
.report-ok { border-color: rgba(61, 220, 151, .5); }
.report-failed { border-color: rgba(255, 92, 108, .5); }
.version { font-size: 18px; }

@media (max-width: 720px) {
    .columns { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr; }
    .pitch-head { flex-direction: column; gap: 14px; }
    .avatar.cover { width: 150px; height: 150px; }
    h1.neon, .neon { font-size: 32px; }
    .pitch-title h1 { font-size: 36px; }
    .entry time { white-space: normal; }
    body { background-attachment: scroll; }
}

/* Le grésillement (neon.js), à la limite du perceptible (Sam, 26-OCT-2026) :
   qui le voit doit se demander s'il a halluciné. Le tube ne s'éteint pas,
   il faiblit — le halo se resserre, les lettres pâlissent à peine — et la
   rétine en garde la trace : il faiblit en glissant (30 ms), il revient
   d'un coup. Plus spécifique que toutes les règles de néon. */
.neon { transition: text-shadow 0s, color 0s; }
.neon.neon-off.neon-off, :is(.panel-1, .panel-2, .panel-3, .invite) .neon.neon-off.neon-off {
    transition: text-shadow .03s ease-out, color .03s ease-out;
    color: rgba(255, 255, 255, .8);
    text-shadow: 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(var(--tone-rgb, var(--a1-83-rgb)), .55), 0 0 12px rgba(var(--tone-rgb, var(--a1-83-rgb)), .3);
}

/* La respiration lente des néons (Sam, 26-OCT-2026), sous le grésillement :
   le halo monte et redescend en quatre secondes — c'est la luminosité qui
   varie, les lettres déjà blanches restent nettes. Chaque titre part à un
   point différent du cycle (neon.js), jamais à l'unisson. */
@keyframes neon-breath { 0%, 100% { filter: brightness(.82) saturate(1); } 50% { filter: brightness(1.22) saturate(1.15); } }
.neon { animation: neon-breath 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .neon { animation: none; } }

/* **Le cadre en néon, lui aussi** (Sam, 26-OCT-2026) : la bordure d'un
   panneau, d'une entrée du feed, de l'invitation est un tube. Elle est
   dessinée par une couche à part (::before) — trait et lueur intérieure —
   pour que seule elle respire et grésille, jamais le contenu. Le vrai
   bord du cadre s'efface sous elle. Même respiration et même grésillement
   que les titres, chaque cadre sur ses propres horloges (neon.js). */
.card.panel-1, .card.panel-2, .card.panel-3, .entry, .invite { border-color: rgba(var(--tone-rgb), .18); }
.entry { position: relative; }
.card.panel-1::before, .card.panel-2::before, .card.panel-3::before, .entry::before, .invite::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    border: 1px solid var(--tone-mid);
    box-shadow: inset 0 0 0 1px rgba(var(--tone-rgb), .55), inset 0 0 14px rgba(var(--tone-rgb), .45), inset 0 0 36px -10px rgba(var(--tone-rgb), .5);
    animation: frame-breath var(--breath-duration, 4s) ease-in-out var(--breath-delay, 0s) infinite;
    transition: opacity 0s;
}
@keyframes frame-breath { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.frame-off.frame-off::before { animation-play-state: paused; opacity: .38; transition: opacity .03s ease-out; }
.card > *, .entry > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .card::before, .entry::before, .invite::before { animation: none; } }

/* **Le néon éclaire le panneau** (Sam, 26-OCT-2026) : depuis la zone du
   titre, une lumière de sa teinte s'étale en dégradé circulaire sur le fond
   et les pochettes — en réalité une couche en mode « screen », au-dessus du
   contenu, qui éclaircit ce qu'elle couvre. Elle ne sort pas du panneau (le
   cadre la découpe), elle respire avec le titre (mêmes horloges, recopiées
   par neon.js) et faiblit quand il grésille. */
.project-panel .panel-light {
    position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 34% 26% at 30% 9%, rgba(255, 255, 255, .06), transparent 70%),
        radial-gradient(ellipse 75% 60% at 30% 6%, rgba(var(--tone-rgb), .22), rgba(var(--tone-rgb), .07) 45%, transparent 75%);
    animation: light-breath 4s ease-in-out infinite;
    transition: opacity 0s;
}
@keyframes light-breath { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.project-panel:has(.neon.neon-off) .panel-light { animation-play-state: paused; opacity: .35; transition: opacity .03s ease-out; }
.project-panel > .panel-light { position: absolute; }
@media (prefers-reduced-motion: reduce) { .project-panel .panel-light { animation: none; } }

/* **La lumière déborde sur le panneau précédent** (Sam, 26-OCT-2026) : la
   lumière d'un titre de projet monte aussi au-dessus de son panneau — sur
   l'espace entre les deux, comme un mur éclairé par une enseigne, et sur le
   bas du projet précédent. Une couche posée entre les deux panneaux, sans
   hauteur dans la page, dont la lueur s'étend vers le haut ; le centre du
   dégradé est sous elle, là où est le titre. Elle respire et grésille avec
   son titre (neon.js recopie les horloges ; :has() suit la coupure). Le
   premier projet n'a personne au-dessus : sa lumière reste dans son cadre. */
.projects { position: relative; }
.spill-light { position: relative; height: 0; z-index: 3; pointer-events: none; }
.spill-glow {
    position: absolute; left: 0; right: 0; bottom: 0; height: 300px; mix-blend-mode: screen;
    background: radial-gradient(ellipse 70% 105% at 30% calc(100% + 44px), rgba(var(--tone-rgb), .19), rgba(var(--tone-rgb), .06) 50%, transparent 78%);
    animation: light-breath 4s ease-in-out infinite;
    transition: opacity 0s;
}
.spill-light:has(+ .project-panel .neon.neon-off) .spill-glow { animation-play-state: paused; opacity: .35; transition: opacity .03s ease-out; }
@media (prefers-reduced-motion: reduce) { .spill-glow { animation: none; } }

/* **Une session par ligne** sur l'accueil (Sam, 26-OCT-2026) : la pochette
   composée à gauche, en grand ; à droite Track, Artist et le lecteur de la
   démo — celui des pages de session, dans la teinte du panneau. */
.session-rows { list-style: none; margin: 0; padding: 0; }
.session-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: center; padding: 14px 0; }
/* Un séparateur avant le premier morceau aussi, et un peu d'air sous la pilule du matériel (Sam, 31-OCT-2026). */
.session-row, .session-row + .session-row { border-top: 1px solid rgba(var(--tone-rgb), .15); }
.session-row .row-cover { display: block; }
.session-row .avatar.tile-cover { width: 220px; }
.session-row .row-body { min-width: 0; }
/* Le titre d'une session, dans le style des petites cartes de Latest (Sam,
   26-OCT-2026) — capitales espacées, graisse fine, teinte du panneau —, un
   peu plus grand. */
.session-row .tile-title { display: block; font-size: 20px; font-weight: 300; text-transform: uppercase; letter-spacing: .16em; line-height: 1.35; color: var(--tone-mid); }
.session-row .tile-title .label { font-size: .8em; vertical-align: baseline; }
.session-row .tile-title:hover { text-decoration: none; }
/* **Exception à « un seul accent par panneau »** (Sam, 26-OCT-2026) : dans un
   panneau de projet, chaque morceau se dit en orange — « Track: » en orange,
   le titre en blanc, sans halo. */
.session-row .tile-title .label.label-track { color: var(--a2-78); }
.session-row .track-name { color: #ffffff; }
.session-row .tile-title:hover .track-name { color: #fff; }
/* De même, l'artiste en turquoise (Sam, 26-OCT-2026) — dans l'en-tête du
   projet comme sur chaque morceau : « Artist: » en turquoise franc, le nom
   en gris très clair, sans halo. */
.project-panel :is(.artist, .session-row small) .label.label-artist { color: var(--a1-76); }
.project-panel .artist-name { color: #dde1e4; }
.session-row small { display: block; color: var(--muted); margin: 2px 0 6px; }
.session-row .player { padding-left: 0; }

/* Track et Artist d'un morceau en deux colonnes (Sam, 26-OCT-2026) : les
   mentions alignées à droite, le titre et le nom alignés à gauche, sur une
   même ligne de base. */
.session-row .row-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: .55em; row-gap: 2px; align-items: baseline; margin-bottom: 6px; }
.session-row .row-meta .label { justify-self: end; margin: 0; vertical-align: baseline; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.session-row .row-meta .label-track { font-size: 15px; color: var(--a2-78); }
/* **La pastille du numéro de piste** (Sam, 01-NOV-2026) : dans le coin
   supérieur gauche de la pochette, un rond accent 2 saturé, le numéro en
   blanc, et le halo de la pochette — un liseré blanc puis l'orange qui
   s'étale. */
.session-row .row-cover { position: relative; }
.session-row .track-no {
    position: absolute; top: 15px; left: 15px; z-index: 2; /* la composition a une marge transparente avant le carton */
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
    font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; color: #fff; text-shadow: none;
    background: var(--a2-78);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 5px rgba(var(--a2-78-rgb), .9), 0 0 14px rgba(var(--a2-78-rgb), .6), 0 0 28px rgba(var(--a2-78-rgb), .35);
}
.session-row .row-meta .label-artist { font-size: 11px; color: var(--a1-76); }
.session-row .row-meta .tile-title { font-size: 20px; }
.session-row .row-meta .artist-name { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: #dde1e4; }

/* Les cartes de Latest (Sam, 26-OCT-2026) : des rectangles aux coins
   arrondis, la lueur intérieure un peu baissée ; elles se tiennent à la
   même distance du panneau principal que l'une de l'autre (10 px). */
.entry {
    border-radius: 8px; border-left-width: 1px;
    box-shadow: inset 0 0 30px -20px var(--panel), 0 6px 20px rgba(0, 0, 0, .3);
}
.entry::before {
    border-left-width: 1px;
    box-shadow: inset 0 0 0 1px rgba(var(--tone-rgb), .4), inset 0 0 10px rgba(var(--tone-rgb), .28), inset 0 0 26px -12px rgba(var(--tone-rgb), .32);
}
.columns.home { column-gap: 10px; }

/* Dans les cartes de Latest, le même codage que le panneau principal (Sam,
   26-OCT-2026) : « Track: » en orange, le titre du morceau en blanc. */
.columns.home .latest .entry .label-track { color: var(--a2-78); }
.columns.home .latest .entry .track-name { color: #ffffff; }
.columns.home .latest .entry time { color: #ffffff; }

/* Le menu du haut en cyan ; et « Latest » dans sa police — la police du
   texte, en capitales espacées —, en cyan, calé à droite, son trait cyan
   à gauche (Sam, 26-OCT-2026 ; le blanc essayé d'abord). */
.columns.home .latest > h2 {
    flex-direction: row-reverse; font-family: inherit; font-weight: 400; font-size: 13px; letter-spacing: .12em;
    color: var(--a1-93); text-shadow: none;
}
.columns.home .latest > h2::after { background: linear-gradient(270deg, rgba(var(--a1-93-rgb), .85), transparent); opacity: 1; }

/* Le spectre lumineux sous le lecteur (spectrum.js) : une toile posée
   derrière toute la ligne d'un morceau — sa base sur le trait qui la sépare
   de la suivante, d'un bout à l'autre, son sommet un peu au-dessus des
   textes —, très floue, sous le contenu (la pochette passe devant). */
.session-row { position: relative; }
.session-row > .row-cover, .session-row > .row-body { position: relative; z-index: 1; }
.session-row > .spectrum {
    position: absolute; left: 0; right: 0; bottom: 0; top: -18px; width: 100%; height: calc(100% + 18px);
    z-index: 0; pointer-events: none; opacity: .9;
    /* Des scanlines sur le spectre (Sam, 26-OCT-2026) : un masque plutôt qu'une
       couche par-dessus — les rayures n'existent que là où il y a de la
       lumière, et la toile, minuscule, n'a pas à les dessiner à pleine
       résolution. Le pas des visuels : un pixel sur trois. */
    -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, #000 1px 3px);
    mask-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, #000 1px 3px);
}

/* Les collaborateurs d'une session sous son lecteur (Sam, 26-OCT-2026) :
   leurs pastilles rondes, le nom au survol. */
.row-people { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.row-people li { display: block; line-height: 0; }
.row-people .avatar.small { width: 28px; height: 28px; font-size: 11px; line-height: 26px; }

/* **La langue, sous le menu** (Sam, 31-OCT-2026) : « Language : » et le
   drapeau en cours, un clic déroule les autres — un <details>, sans script. */
/* **Les langues en billes** (Sam, 31-OCT-2026) : sur une ligne sous le menu,
   pas trop petites ; la langue en cours a un halo néon, les autres sont un
   peu éteintes et s'allument au survol. */
.topbar-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.langbar { display: flex; align-items: center; gap: 10px; }
@media (max-width: 720px) { .topbar-right { width: 100%; } .langbar { width: 100%; justify-content: flex-start; } }
.lang-ball { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; opacity: .55; filter: saturate(.75); transition: opacity .15s, filter .15s, box-shadow .15s; }
.lang-ball img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.lang-ball:hover { opacity: 1; filter: none; }
.lang-ball.is-current { opacity: 1; filter: none; box-shadow: 0 0 0 1px rgba(var(--a1-83-rgb), .9), 0 0 10px rgba(var(--a1-83-rgb), .8), 0 0 22px rgba(var(--a1-83-rgb), .45); }

/* L'original d'un texte traduit, replié sous la traduction (31-OCT-2026). */
details.original { margin-top: 8px; }
details.original summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
details.original summary:hover { color: var(--accent); }
details.original .concept { margin-top: 6px; opacity: .8; }

/* **Le bouton des sessions** (Sam, 31-OCT-2026) : le dessin de Read more et
   de l'icône Download — fond sombre, trait et halo néon dans la teinte du
   panneau, texte clair en maigre —, la bobine devant, centré. Deux par projet : en bas du panneau, toujours ; sous
   les collaborateurs de la Quick Preview, seulement une fois déplié, pour
   refermer sans descendre. Celle du bas flotte tant que les sessions défilent. */
.project-panel button.panel-foot.toggle {
    display: flex; width: fit-content; min-height: 0; margin: 16px auto 0; padding: 4px 12px 4px 8px; gap: 8px;
    color: var(--tone-light); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
}
.project-panel button.panel-foot.toggle:hover { color: #fff; }
.project-panel button.panel-foot.toggle .pill-reel { width: 24px; height: 20px; object-fit: contain; }
.project-panel button.panel-foot.toggle .chevron { width: 8px; height: 8px; border-width: 2px; }
.project-panel button.panel-foot.toggle.main { margin: 4px auto 16px; }
.project-panel button.panel-foot.toggle.foot { display: none; }
.project-panel.open button.panel-foot.toggle.foot { display: flex; }
.project-panel { text-align: center; padding-bottom: 18px; }
.project-panel > :not(.panel-foot, .project-panel-head) { text-align: left; }
.project-panel .quick-preview { text-align: left; }
.project-panel .panel-foot .chevron { border-color: #fff; }
.project-panel.open button.panel-foot.toggle.foot { position: sticky; bottom: 12px; z-index: 3; }
/* **Quick Preview** : le style du nom d'artiste — capitales espacées, sans
   halo —, en accent 2, et la ligne de panneau à sa droite. */
.quick-preview .preview-title { font-family: inherit; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--a2-78); text-shadow: none; }
/* **Latest s'escamote** (Sam, 31-OCT-2026) : sous 1 100 px, la colonne
   partirait de travers avec les titres sur deux lignes ; elle disparaît,
   les projets prennent toute la largeur, et « Latest » entre au menu. */
.topbar nav .nav-latest { display: none; }
@media (max-width: 1100px) {
    .columns.home { grid-template-columns: minmax(0, 1fr); }
    .columns.home .side.latest { display: none; }
    .topbar nav .nav-latest { display: inline; }
}
.latest-page { max-width: 640px; margin: 0 auto; }

/* **La page Settings** (Sam, 31-OCT-2026) : une carte par sujet, des
   sous-titres dans la carte, et la liste des comptes repliée tout en bas —
   un <details>, son résumé est le titre de la carte. */
.card h3 { font-size: 13px; margin: 22px 0 8px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.card h3:first-of-type { margin-top: 18px; }
.card .report { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; }
.card .report h3 { margin-top: 0; }
.card .report input { margin-top: 8px; }
.fold summary { list-style: none; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary h2 { margin: 0; }
.fold summary h2::before { content: "▸"; font-family: sans-serif; font-size: 13px; transition: transform .15s; }
.fold[open] summary h2::before { transform: rotate(90deg); }
.fold[open] summary h2 { margin-bottom: 14px; }
.fold summary h2 small { font-family: sans-serif; font-size: 12px; letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--muted); }

/* **Les petits boutons** (Sam, 31-OCT-2026, après trois essais) : Read more,
   l'icône Download, les boutons des sessions et la pilule du matériel sont
   de **simples aplats** — sans bordure, sans halo, sans dégradé —, dans
   l'accent de leur arrière-plan, assez sombre mais bien saturé, le texte en
   capitales fines, blanc. Accent 2 pour la Quick Preview et le matériel, la
   teinte du panneau pour les sessions. */
.quick-preview .project-pitch button.read-more, .player .download, .project-panel button.panel-foot.toggle, .material {
    /* La teinte des petits titres en capitales (accent 2 à 78), baissée d'un
       rien pour que le blanc se lise (Sam) — dérivée du jeton lui-même, que
       la synchro d'AsunaLab remplace (Theme.php) : un jeton à part ne suivait
       pas, et la teinte virait ; à 58 le bouton tirait au rouge. Au survol,
       les deux accents s'échangent — 2 devient 3, 3 devient 2. */
    --b: color-mix(in srgb, var(--a2-78) 92%, black); --b-hover: color-mix(in srgb, var(--a3-78) 92%, black);
    border: 0; border-radius: 6px; background: var(--b); color: #fff; box-shadow: none;
}
.quick-preview .project-pitch button.read-more { padding: 5px 13px 5px 10px; }
/* L'icône du téléchargement, à part (Sam) : fond sombre, un halo intérieur
   de l'accent 2, une bordure accent 2 très claire, l'icône en blanc pur,
   trait plein — elle doit se voir. Tout dérivé des jetons synchronisés. */
.player .download, .title-download {
    width: 30px; height: 30px; color: #fff; align-items: center; justify-content: center; border-radius: 6px;
    background: rgba(var(--a2-58-rgb), .22); border: 1px solid var(--a2-93);
    box-shadow: inset 0 0 6px rgba(var(--a2-78-rgb), .55);
}
.player .download svg, .title-download svg { width: 17px; height: 17px; }
.player .download svg path, .title-download svg path { stroke-width: 2.2; }
/* Download au bout de la ligne d'un petit titre, après son trait (Sam, 31-OCT-2026). */
h2.preview-title .title-download { order: 1; margin-left: 10px; display: inline-flex; }
.player .download:hover { background: rgba(var(--a2-58-rgb), .22); color: #fff; box-shadow: inset 0 0 9px rgba(var(--a2-78-rgb), .8); }
/* Les boutons des sessions, du même jeton, un peu plus sombres encore (Sam). */
.project-panel button.panel-foot.toggle { --b: color-mix(in srgb, var(--a3-78) 84%, black); --b-hover: color-mix(in srgb, var(--a2-78) 84%, black); padding: 5px 13px 5px 9px; }
.material { padding: 5px 15px 5px 9px; }
.quick-preview .project-pitch button.read-more:hover, .project-panel button.panel-foot.toggle:hover, .material.on:hover { background: var(--b-hover); box-shadow: none; }
.material.off { --b: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .35); cursor: default; }
.project-panel.open button.panel-foot.toggle.foot { box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }

/* **La page d'une session** (Sam, 31-OCT-2026) : les codes de Projects un
   étage plus bas — le grand cadre en accent 1, toujours déplié ; l'encart
   accent 2 avec le pitch, la démo et Access granted en liste ; un panneau
   par fichier dans la couleur de sa catégorie (.kind-<kind>, posé par le
   serveur), sans pochette. */
.session-panel { padding-bottom: 22px; }
.session-panel .project-panel-head .eyebrow { margin: 0 0 4px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.session-panel .quick-preview h2.preview-title + h2.preview-title { margin-top: 14px; }
.session-panel .quick-preview .project-pitch + h2.preview-title { margin-top: 16px; }
/* Un peu d'air sous le lecteur, avant l'accès (Sam, 31-OCT-2026). */
.session-panel .quick-preview .preview-row + h2.preview-title { margin-top: 22px; }
.quick-preview .preview-row + .preview-people-row { margin-top: 20px; }
.access-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.access-list li { display: flex; align-items: center; gap: 12px; }
.access-list .avatar.medallion { width: 40px; height: 40px; font-size: 14px; flex: none; }
/* Nom, statut et instruments sur une seule ligne (Sam, 31-OCT-2026) ; le
   bloc prend la largeur qui reste et replie les instruments quand il y en a
   plusieurs — sans ça, il débordait du cadre. */
.access-list .access-who { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; line-height: 1.3; }
.access-list .access-who small { min-width: 0; overflow-wrap: anywhere; }
.access-list .access-who strong { color: var(--tone-light); font-weight: 500; }
.access-list .access-who small { color: var(--tone-mid); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.file-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.session-panel.open .file-rows { display: grid; }
.file-row { padding: 14px 18px 12px; border-top: 0; }
.file-row .row-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: .55em; row-gap: 2px; align-items: baseline; margin-bottom: 6px; }
.file-row .row-meta .label { justify-self: end; margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.file-row .row-meta .label-track { font-size: 15px; color: var(--tone); }
.file-row .row-meta .label-artist { font-size: 11px; color: var(--tone-dim); }
.file-row .row-meta .tile-title { font-size: 20px; font-weight: 700; color: #fff; }
.file-row .row-meta .artist-name { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: #dde1e4; }
.file-row .player { padding-left: 0; }
.file-row .sheet { margin: 4px 0 0; font-size: 13px; }

/* **Le visuel à gauche du lecteur** (Sam, 31-OCT-2026) — la pochette vinyle
   d'une session, le visuel d'un projet — ; sur un écran étroit, au-dessus,
   en petit. */
.preview-row { display: flex; align-items: center; gap: 18px; margin-top: 12px; padding-left: 14px; }
.preview-cover { flex: none; width: 180px; }
.preview-cover .avatar.tile-cover { display: block; width: 100%; }
.preview-main { flex: 1; min-width: 0; }
@media (max-width: 720px) {
    /* En colonne, le lecteur prend toute la largeur et la pochette se centre : alignés au début, les deux se serraient à gauche et la barre n'avait plus de place. */
    .preview-row { flex-direction: column; align-items: center; gap: 8px; padding-left: 0; }
    .preview-main { width: 100%; }
    .preview-cover { width: 220px; }
    /* Session access en plus petit, pour que nom, statut et instruments tiennent sur la ligne (Sam). */
    .access-list .access-who { gap: 0 6px; }
    .access-list .access-who strong { font-size: 13px; white-space: nowrap; }
    .access-list .access-who small { font-size: 9.5px; letter-spacing: .02em; }
    .access-list .avatar.medallion { width: 34px; height: 34px; }
    /* Le lecteur reste sur une seule ligne — seule la pochette a son étage (Sam) ; les écarts se resserrent pour laisser de la place à la barre. */
    .player { gap: 8px; padding-left: 0; padding-right: 0; }
    .player .times { font-size: 12px; }
    .session-row { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
    .session-row .avatar.tile-cover { width: 120px; }
}

/* **Un halo néon autour de toute image** (Sam, 31-OCT-2026) — pochettes,
   boîte de projet, visuels — : un liseré blanc, puis la couleur du panneau
   en dégradé qui s'étale ; drop-shadow suit la forme, vinyle compris. */
.avatar.tile-cover, .gallery img, .avatar.cover {
    filter: saturate(1.05) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px rgba(255, 255, 255, .95))
            drop-shadow(0 0 5px rgba(var(--tone-rgb, var(--a2-78-rgb)), .9)) drop-shadow(0 0 14px rgba(var(--tone-rgb, var(--a2-78-rgb)), .6)) drop-shadow(0 0 28px rgba(var(--tone-rgb, var(--a2-78-rgb)), .35))
            drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}

/* **La zone de dépôt** (Sam, 31-OCT-2026) : un cadre en pointillés néon dans
   la carte accent 1, qui s'allume quand un fichier passe dessus ; la barre
   d'envoi ; la liste des dépôts et leur état. */
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; cursor: pointer; text-align: center;
    border: 1px dashed rgba(var(--tone-rgb), .6); border-radius: 8px; background: rgba(var(--tone-rgb), .05); transition: background .15s, box-shadow .15s; }
.drop-zone input[type=file] { display: none; }
.drop-zone:hover, .drop-zone.is-over { background: rgba(var(--tone-rgb), .12); box-shadow: inset 0 0 18px rgba(var(--tone-rgb), .25); }
.drop-zone.is-busy { pointer-events: none; opacity: .7; }
.drop-zone .drop-icon svg { width: 34px; height: 34px; color: var(--tone); filter: drop-shadow(0 0 6px rgba(var(--tone-rgb), .7)); }
.drop-zone .drop-text { font-size: 15px; color: var(--tone-light); }
.drop-zone .drop-sub { font-size: 12px; color: var(--tone-mid); }
.drop-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.drop-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(var(--tone-rgb), .18); overflow: hidden; }
.drop-fill { height: 100%; width: 0; background: var(--tone); box-shadow: 0 0 8px rgba(var(--tone-rgb), .8); transition: width .2s; }
.drop-status { font-size: 12px; color: var(--tone-mid); white-space: nowrap; }
.drop-error { margin: 10px 0 0; }
.drop-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.drop-list li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.drop-list small { color: var(--tone-mid); }
.drop-state { margin-left: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.drop-state.is-waiting { color: var(--tone-light); border: 1px solid rgba(var(--tone-rgb), .5); }
.drop-state.is-received { color: #3ddc97; border: 1px solid rgba(61, 220, 151, .5); }

/* **Le chat d'un projet** (Sam, 01-NOV-2026) : sous la Quick Preview, une
   pilule l'ouvre ; le fil en **bulles néon** — le dessin des pilules néon à
   fond sombre : un bord très clair, presque blanc, un halo de la teinte qui
   s'étale vers l'extérieur, le texte clair dedans —, les miennes en accent 2
   à droite, celles des autres dans la teinte du panneau à gauche. Tout vient
   des jetons synchronisés, rien en dur. */
/* Le chat dans un panneau néon de la teinte du bloc juste au-dessus (Sam,
   01-NOV-2026) — accent 1 sous la Quick Preview d'un projet, accent 2 sous
   Listen sur la page d'une session —, mais **plus sombre, un écran** : le fond
   tiré vers le noir, des scanlines par-dessus (`.chat-scan`, le ::before et
   le ::after de la carte étant pris par le néon et le coin), et DotGothic16
   dans le fil. Son petit titre dans la teinte du panneau. */
.project-panel .chat-card { margin: 0 0 16px; --panel-bg: color-mix(in srgb, var(--panel-bg-deep) 55%, black); --panel-bg-deep: black; }
.chat-card .preview-title { color: var(--tone); }
.chat-card .chat-scan {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
}
.chat-card .chat-body, .chat-card .chat-messages.is-empty::before { font-family: "DotGothic16", "NeoDunggeunmo", "LINE Seed JP", monospace; }
/* Sur Projects, la pastille du salon d'une session, au bout de la ligne du matériel, mène à sa page. */
.row-foot .row-chat { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--tone-mid); }
.row-foot .row-chat[hidden] { display: none; }
.row-foot .row-chat .chat-icon { width: 20px; height: 20px; }
.row-foot .row-chat:hover { color: #fff; text-decoration: none; }
.chat { margin: 0; text-align: left; }
/* La pilule dans la teinte de son panneau, quel qu'il soit. */
.project-panel button.panel-foot.toggle.chat-toggle, .project-panel .chat-card button.panel-foot.toggle.chat-toggle { position: relative; margin: 2px auto 0; padding-right: 14px; --b: color-mix(in srgb, var(--tone) 72%, black); --b-hover: color-mix(in srgb, var(--a2-78) 84%, black); }
.chat.open .chat-toggle { margin-bottom: 14px; }
.project-panel button.panel-foot.toggle.chat-toggle .chat-icon { width: 18px; height: 18px; }
.chat-body { max-width: 760px; margin: 0 auto; }
.chat-presence { margin: 0 0 8px; text-align: center; color: var(--tone-mid); }
.chat-messages { list-style: none; margin: 0; padding: 6px 4px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.chat-messages.is-empty::before { content: attr(data-empty); display: block; text-align: center; color: var(--tone-mid); font-size: 13px; padding: 18px 0; }
.chat-message { display: flex; align-items: flex-end; gap: 10px; max-width: 84%; }
.chat-message.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-message .avatar.small { width: 30px; height: 30px; font-size: 11px; flex: none; }
/* Sam, l'administrateur, n'a pas de fiche : la marque Asuna tient lieu de photo. */
.chat-message .avatar.brand-mark { font-family: "Nasalization", sans-serif; font-weight: normal; font-size: 15px; color: var(--a1-69); background: rgba(var(--a1-15-rgb), .9); border-color: rgba(var(--a1-83-rgb), .6); }
.chat-message .bubble {
    --bt: var(--tone-rgb); --bt-light: var(--tone-light); --bt-mid: var(--tone-mid);
    position: relative; min-width: 0; padding: 8px 14px 9px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(var(--bt), .16), rgba(var(--bt), .08)), var(--panel-bg-deep, #000);
    border: 1px solid var(--bt-light);
    box-shadow: inset 0 0 10px rgba(var(--bt), .35), 0 0 2px rgba(255, 255, 255, .7), 0 0 6px rgba(var(--bt), .85), 0 0 16px rgba(var(--bt), .45), 0 0 30px rgba(var(--bt), .2);
}
.chat-message.mine .bubble { --bt: var(--a2-78-rgb); --bt-light: var(--a2-98); --bt-mid: var(--a2-86); }
/* Sous le panneau orange d'une session, les miennes resteraient de la couleur des autres : celles des autres passent en accent 1. */
.chat-card.panel-2 .chat-message:not(.mine) .bubble { --bt: var(--a1-83-rgb); --bt-light: var(--a1-99); --bt-mid: var(--a1-91); }
.chat-message .bubble-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.chat-message .bubble-head strong { color: var(--bt-light); font-weight: 500; text-shadow: 0 0 6px rgba(var(--bt), .7); }
.chat-message .bubble-head time { color: var(--bt-mid); font-size: 10.5px; letter-spacing: .04em; }
/* 16 px : la taille native d'une police à 16 points, où chaque point tombe sur un pixel. */
.chat-message .bubble p { margin: 0; font-size: 16px; line-height: 1.45; color: #fff; overflow-wrap: anywhere; }
.chat-message .bubble p a { color: var(--bt-light); text-decoration: underline; }
.chat-message .bubble-delete { margin-left: auto; padding: 0 2px; width: auto; min-width: 0; font: inherit; font-size: 14px; line-height: 1; color: var(--bt-mid); background: transparent; border: 0; box-shadow: none; cursor: pointer; opacity: 0; transition: opacity .15s; }
.chat-message:hover .bubble-delete, .chat-message .bubble-delete:focus-visible { opacity: 1; }
.chat-message .bubble-delete:hover { color: #fff; background: transparent; }
/* La saisie : un champ sombre dans la teinte du panneau, le bouton d'envoi en petit carré néon, comme Download. */
.chat-compose { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; padding: 0 4px; }
.chat-compose textarea { margin: 0; resize: none; min-height: 40px; max-height: 144px; font-family: inherit; font-size: 16px; line-height: 24px; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); border-color: rgba(var(--tone-rgb), .35); color: #fff; }
.chat-compose textarea:focus { border-color: var(--tone-light); box-shadow: 0 0 8px rgba(var(--tone-rgb), .55); }
:is(.panel-1, .panel-2, .panel-3) .chat-compose button.chat-send {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px;
    color: #fff; background: rgba(var(--a2-58-rgb), .22); border: 1px solid var(--a2-93); box-shadow: inset 0 0 6px rgba(var(--a2-78-rgb), .55);
}
:is(.panel-1, .panel-2, .panel-3) .chat-compose button.chat-send:hover { background: rgba(var(--a2-58-rgb), .22); box-shadow: inset 0 0 10px rgba(var(--a2-78-rgb), .85); }
.chat-compose button.chat-send svg { width: 18px; height: 18px; }
.chat-error { margin: 8px 4px 0; }

/* **La pastille** (Sam, 01-NOV-2026) : la traditionnelle — ronde, accent 2,
   le nombre en blanc — ; elle **pulse** quand quelqu'un d'autre est en
   ligne ; un simple point si personne n'a rien à lire mais que quelqu'un
   est là. En haut à droite du panneau du projet, sur la pilule du chat, et
   sur Projects au menu. */
.chat-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0; line-height: 1; color: #fff; text-shadow: none;
    background: var(--a2-78); box-shadow: 0 0 6px rgba(var(--a2-78-rgb), .75), 0 0 14px rgba(var(--a2-78-rgb), .35);
}
.chat-badge[hidden] { display: none; }
.chat-badge.is-dot { min-width: 12px; height: 12px; padding: 0; }
.chat-badge.is-live { animation: badge-pulse 1.6s ease-in-out infinite; }
@keyframes badge-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(var(--a2-78-rgb), .75), 0 0 14px rgba(var(--a2-78-rgb), .35); } 50% { transform: scale(1.12); box-shadow: 0 0 10px rgba(var(--a2-78-rgb), 1), 0 0 24px rgba(var(--a2-78-rgb), .6); } }
@media (prefers-reduced-motion: reduce) { .chat-badge.is-live { animation: none; } }
.project-panel .panel-badge { position: absolute; top: 14px; right: 26px; z-index: 4; }
.chat-toggle .chat-badge { margin-left: 2px; }
.topbar nav .nav-chat { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.topbar nav .nav-badge { font-size: 10.5px; min-width: 18px; height: 18px; }
@media (max-width: 720px) {
    .chat-message { max-width: 94%; }
    .chat-messages { max-height: 60vh; }
    .project-panel .panel-badge { right: 22px; top: 12px; }
}

/* **L'assistant d'installation** (Sam, 01-NOV-2026) : le bandeau des cinq
   écrans, les lignes de contrôle en vert, orange et rouge, les champs à
   copier. Sobre : c'est la seule page qu'un néophyte voit avant le site. */
.install .install-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; padding: 0 0 12px; border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.install .install-steps .is-current { color: var(--accent); text-shadow: var(--accent-glow); }
.install .install-steps .is-done { color: var(--text); }
.install .install-steps a { color: inherit; }
.install .checks { list-style: none; margin: 0 0 16px; padding: 0; }
.install .check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.install .check > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.install .check .muted { font-size: 12px; }
.install .check:first-child { border-top: 0; }
.install .check-mark { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.install .check.ok .check-mark { background: var(--accent); box-shadow: var(--accent-glow); }
.install .check.warn .check-mark { background: var(--accent-2); box-shadow: var(--accent-2-glow); }
.install .check.block .check-mark { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.install .check.info .check-mark { background: var(--muted); }
.install .ok { color: var(--accent); }
.install .copy-field { display: flex; gap: 8px; align-items: center; }
.install .copy-field input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.install .copy-field button, .install button.copy { flex: none; padding: 6px 12px; min-height: 0; font-size: 12px; }
.install .copy-block { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .35); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.install form.inline { display: inline; }
.install .install-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.install .install-actions form { display: inline-flex; gap: 10px; }
.install details { margin: 8px 0 14px; }
.install summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.install h2 { margin-top: 22px; }