/* Barre latérale des panels /studio et /admin (assets/sidebar.js). * * Maquette Claude Design « Tone Record Studio Sidebar » (validée par la * cliente le 2026-09-26, tools/design/claude-design-sidebar.html) reprise à * ~95 %. Écarts voulus : * - la barre vit dans la grille du panel (.studio__rail, collante sur toute * la hauteur) au lieu d'être posée en `fixed` par-dessus la page ; replier * = la colonne rétrécit (transition de grid-template-columns) ; * - le logo est le VRAI logo (images/tr2-logo.webp, tr2-mark.webp replié) ; * - le disque d'identité est un VRAI vinyle du site (celui de l'album de * l'artiste (sa pochette en étiquette d'un disque à sillons), sinon le vinyle du * logo), qui tourne au survol ; la photo de l'artiste se pose sur * l'étiquette ; * - la barre du site (.gx-top) est masquée sur ces pages : la barre latérale * porte le logo et le retour au site ; sur mobile, le lecteur du site * remonte au-dessus de la capsule. * Préfixe .ss. Chargée partout (Barba ne recharge pas le ). */ html:has([data-barba-namespace="studio"], [data-barba-namespace="admin"]) .gx-top { display: none !important; } .ss-root { --ss-paper: #F2F0EC; --ss-cream: #F6F6F0; --ss-ink: #0B0B0C; --ss-ink2: rgba(11, 11, 12, .58); --ss-line: rgba(11, 11, 12, .14); --ss-red: #900011; --ss-led: #FF4A4A; --ss-w: 260px; --ss-wc: 76px; --ss-r: 28px; --ss-gap: 12px; --ss-spring: cubic-bezier(.3, 1.35, .5, 1); --ss-soft: cubic-bezier(.2, .8, .2, 1); font-family: "Archivo Sillon", Archivo, "Helvetica Neue", Arial, sans-serif; color: var(--ss-ink); font-size: 14px; line-height: 1.3; -webkit-font-smoothing: antialiased; height: 100%; } @supports (transition-timing-function: linear(0, 1)) { .ss-root { --ss-spring: linear(0, .14 4%, .46 10%, .8 17%, 1.02 25%, 1.075 31%, 1.05 38%, 1.012 48%, .995 60%, 1); } } .ss-root *, .ss-root *::before, .ss-root *::after { box-sizing: border-box; } .ss-root svg { flex: none; } .ss-root [hidden] { display: none !important; } .ss-mono { font-family: "JetBrains Mono Sillon", "JetBrains Mono", ui-monospace, Menlo, monospace; font-feature-settings: "zero" 0; } /* ---- Place dans le panel --------------------------------------------------- * La grille du panel (.studio) réserve la colonne ; la barre y est collante, * sur toute la hauteur de l'écran. */ .studio:has(> .studio__rail .ss-root) { grid-template-columns: 260px minmax(0, 1fr); padding-top: var(--ss-gap, 12px); transition: grid-template-columns .5s cubic-bezier(.2, .8, .2, 1); } .studio:has(> .studio__rail .ss.is-collapsed) { grid-template-columns: 76px minmax(0, 1fr); } .studio:has(> .studio__rail .ss-root) > .studio__main { padding-top: 1.75rem; } .studio__rail:has(.ss-root) { position: sticky; top: 12px; z-index: 30; height: calc(100svh - 24px); } .ss { position: relative; height: 100%; width: 100%; } .ss-panel { position: relative; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: rgba(242, 240, 236, .8); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); border-radius: var(--ss-r); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 0 0 1px var(--ss-line), 0 18px 40px -28px rgba(11, 11, 12, .35); overflow: hidden; } /* ---- Tête : logo, « Studio », replier ---- */ .ss-head { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 6px; flex: none; } .ss-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; border-radius: 999px; padding: 4px; } .ss-word { height: 17px; width: auto; display: block; transition: opacity .25s ease; } .ss-mark { position: absolute; left: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; opacity: 0; transition: opacity .25s ease; } .ss-kicker { font-size: 12.5px; color: var(--ss-ink2); white-space: nowrap; transition: opacity .2s ease; } .ss-toggle { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--ss-ink2); cursor: pointer; padding: 0; transition: background .2s ease, color .2s ease, transform .5s var(--ss-soft); } .ss-toggle:hover { background: rgba(11, 11, 12, .06); color: var(--ss-ink); } /* ---- Identité : un vrai vinyle, la photo sur l'étiquette ---- */ .ss-id { display: flex; align-items: center; gap: 12px; margin: 8px 0 6px; padding: 6px 8px 6px 1px; border-radius: 999px; color: inherit; text-decoration: none; min-width: 0; flex: none; } .ss-disc { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; margin-left: 1px; box-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 5px 12px -6px rgba(11, 11, 12, .65); } .ss-vinyl { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; transition: transform 1.8s cubic-bezier(.2, .8, .2, 1); } .ss-disc::before { /* le reflet de la pièce : il ne tourne pas avec le disque */ content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none; background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .16) 12%, transparent 18% 58%, rgba(255, 255, 255, .1) 62%, transparent 68%); } .ss-id:hover .ss-vinyl, .ss-me:hover .ss-vinyl { transform: rotate(360deg); } .ss-avatar, .ss-initial { position: absolute; z-index: 2; inset: 31%; border-radius: 50%; overflow: hidden; } .ss-avatar { width: 38%; height: 38%; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(11, 11, 12, .35); } .ss-initial { display: grid; place-items: center; font-weight: 700; font-size: 10px; color: #3b3220; font-stretch: 90%; } .ss-initial:empty { display: none; } .ss-led { position: absolute; z-index: 3; right: -1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ss-led); box-shadow: 0 0 0 2.5px var(--ss-paper), 0 0 8px 1px rgba(255, 74, 74, .55); } .ss-led::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #FFF4E8; opacity: .9; } .ss.is-pending .ss-led { background: var(--ss-paper); box-shadow: 0 0 0 2.5px var(--ss-paper), inset 0 0 0 1.6px var(--ss-ink2); animation: ss-breathe 2.6s ease-in-out infinite; } .ss.is-pending .ss-led::after { display: none; } @keyframes ss-breathe { 50% { opacity: .35; } } .ss-idtext { display: grid; gap: 2px; min-width: 0; transition: opacity .2s ease; } .ss-name { font-weight: 650; font-size: 15px; font-stretch: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-status { font-size: 12px; color: var(--ss-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Navigation : capsule qui glisse, LED sur la vue ouverte ---- */ .ss-nav { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-top: 8px; border-top: 1px solid var(--ss-line); flex: none; } .ss-ind { position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 999px; pointer-events: none; opacity: 0; background: var(--ss-cream); box-shadow: 0 0 0 1px var(--ss-line), 0 1px 2px rgba(11, 11, 12, .06), inset 0 1px 0 #fff; transition: transform .55s var(--ss-spring), height .4s var(--ss-soft), width .55s var(--ss-spring), opacity .2s ease; } .ss-ind::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ss-led); box-shadow: 0 0 6px 1px rgba(255, 74, 74, .55); transition: opacity .2s ease; } .ss-ind.no-led::after { opacity: 0; } .ss-root .ss-link { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ss-ink2); font: inherit; font-weight: 500; font-size: 14.5px; text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; width: 100%; text-align: left; transition: color .15s ease, background .15s ease; } .ss-root .ss-link:hover { color: var(--ss-ink); background: rgba(11, 11, 12, .045); } .ss-root .ss-link[aria-current="page"] { color: var(--ss-ink); font-weight: 620; background: transparent; } .ss-root .ss-link:focus-visible, .ss-toggle:focus-visible, .ss-brand:focus-visible, .ss-me:focus-visible, .ss-sheet a:focus-visible, .ss-sheet button:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; } .ss-link > svg { width: 22px; height: 22px; } .ss-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; transition: opacity .2s ease; } .ss-trail { font-size: 10.5px; color: var(--ss-ink2); letter-spacing: .02em; white-space: nowrap; transition: opacity .2s ease; } .ss-trail:empty { display: none; } .ss-badge { position: relative; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--ss-red); color: var(--ss-cream); font-size: 11px; font-weight: 500; line-height: 1; transition: transform .3s var(--ss-spring); } .ss-badge.is-pulse { animation: ss-pulse .7s var(--ss-soft); } .ss-badge.is-pulse::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(144, 0, 17, .45); animation: ss-ring .9s ease-out; } @keyframes ss-pulse { 0% { transform: scale(.6); } 40% { transform: scale(1.22); } 70% { transform: scale(.94); } 100% { transform: scale(1); } } @keyframes ss-ring { to { box-shadow: 0 0 0 9px rgba(144, 0, 17, 0); } } /* ---- Carte « Cette semaine » (vraies écoutes) ---- */ .ss-card { margin-top: auto; display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(246, 246, 240, .7); box-shadow: 0 0 0 1px var(--ss-line); transition: opacity .2s ease; flex: none; } .ss-card-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ss-ink2); } .ss-big { font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--ss-ink); line-height: 1; } .ss-big small { font-family: "Archivo Sillon", Archivo, sans-serif; font-size: 12px; letter-spacing: 0; color: var(--ss-ink2); margin-left: 6px; font-weight: 500; } .ss-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-items: end; justify-items: center; height: 30px; } .ss-bars i { display: block; width: 6px; border-radius: 999px; background: rgba(11, 11, 12, .16); min-height: 6px; } .ss-bars i:last-child { background: var(--ss-ink); } .ss-top { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding-top: 10px; border-top: 1px solid var(--ss-line); min-width: 0; } .ss-top-disc { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .ss-top span:nth-of-type(1) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-top .ss-mono { color: var(--ss-ink2); font-size: 11px; } .ss-note { margin-top: auto; padding: 14px; border-radius: 20px; font-size: 12.5px; line-height: 1.45; color: var(--ss-ink2); box-shadow: inset 0 0 0 1px var(--ss-line); transition: opacity .2s ease; flex: none; } .ss-note strong { display: block; color: var(--ss-ink); font-weight: 620; margin-bottom: 2px; } .ss-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-top: 8px; margin-top: auto; border-top: 1px solid var(--ss-line); flex: none; } .ss-card:not([hidden]) + .ss-note[hidden] + .ss-foot, .ss-note:not([hidden]) + .ss-foot { margin-top: 10px; } .ss-root .ss-foot .ss-link { height: 36px; font-size: 13.5px; } .ss-foot .ss-link > svg { width: 20px; height: 20px; margin: 0 1px; } .ss-ext { margin-left: auto; opacity: .5; width: 14px !important; height: 14px !important; } /* Bulles d'aide (barre repliée) */ .ss-tip { position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-4px, -50%); padding: 6px 11px; border-radius: 999px; background: var(--ss-ink); color: var(--ss-cream); font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease, transform .2s var(--ss-soft); display: none; z-index: 5; } /* ---- Barre repliée (rail d'icônes) ---- */ .ss.is-collapsed .ss-panel { overflow: visible; } .ss.is-collapsed .ss-word, .ss.is-collapsed .ss-kicker, .ss.is-collapsed .ss-idtext, .ss.is-collapsed .ss-label, .ss.is-collapsed .ss-trail, .ss.is-collapsed .ss-card, .ss.is-collapsed .ss-note, .ss.is-collapsed .ss-ext { opacity: 0; pointer-events: none; } .ss.is-collapsed .ss-card, .ss.is-collapsed .ss-note { visibility: hidden; position: absolute; } .ss.is-collapsed .ss-mark { opacity: 1; } .ss.is-collapsed .ss-head { flex-direction: column; height: auto; gap: 4px; padding: 0; } .ss.is-collapsed .ss-brand { height: 40px; width: 46px; } .ss.is-collapsed .ss-mark { top: 20px; left: 9px; } .ss.is-collapsed .ss-toggle { margin: 0 auto; transform: scaleX(-1); } .ss.is-collapsed .ss-ind::after { opacity: 0; } .ss.is-collapsed .ss-link .ss-badge { position: absolute; left: 25px; top: 4px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--ss-paper); } .ss.is-collapsed .ss-tip { display: block; } .ss.is-collapsed .ss-link:hover .ss-tip, .ss.is-collapsed .ss-link:focus-visible .ss-tip { opacity: 1; transform: translate(0, -50%); } .ss.is-collapsed .ss-foot { margin-top: auto; } /* ---- Mobile : capsule flottante en bas + tiroir « Mon compte » ---- */ .ss-me, .ss-sheet, .ss-scrim { display: none; } @media (max-width: 759px) { .studio:has(> .studio__rail .ss-root), .studio:has(> .studio__rail .ss.is-collapsed) { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; padding-top: 1.5rem; padding-bottom: 9rem; } .studio:has(> .studio__rail .ss-root) > .studio__main { padding-top: 0; } .studio__rail:has(.ss-root) { position: static; height: auto; } .ss, .ss.is-collapsed { position: fixed; z-index: 40; top: auto; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; height: 64px; } .ss-panel, .ss.is-collapsed .ss-panel { flex-direction: row; align-items: center; gap: 4px; padding: 8px; border-radius: 999px; background: rgba(242, 240, 236, .72); overflow: visible; } .ss .ss-head { display: none; } .ss-nav { flex: 1; display: flex; justify-content: space-between; gap: 0; padding: 0; border: 0; } .ss-root .ss-nav .ss-link { width: 48px; height: 48px; padding: 0; justify-content: center; } .ss .ss-label, .ss .ss-trail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ss-link .ss-badge { position: absolute; left: 27px; top: 6px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--ss-paper); } .ss-ind { left: 0; right: auto; width: 48px; height: 48px; } .ss-ind::after { right: auto; left: 50%; top: auto; bottom: 5px; margin: 0 0 0 -2px; width: 4px; height: 4px; } .ss-tip { display: none !important; } .ss-me { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: transparent; padding: 0; cursor: pointer; flex: none; } .ss-me .ss-disc { width: 40px; height: 40px; } .ss-scrim { display: block; position: fixed; inset: 0; z-index: 41; background: rgba(11, 11, 12, .28); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .ss-sheet { display: grid; gap: 6px; position: fixed; z-index: 42; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 18px 14px 14px; border-radius: var(--ss-r); background: rgba(242, 240, 236, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px var(--ss-line), 0 -10px 40px -20px rgba(11, 11, 12, .4); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; transform: translateY(calc(100% + 24px)); transition: transform .5s var(--ss-spring), visibility 0s .5s; visibility: hidden; } .ss-sheet::before { content: ""; justify-self: center; width: 36px; height: 4px; border-radius: 999px; background: var(--ss-line); margin: -8px 0 6px; } .ss.is-open ~ .ss-scrim { opacity: 1; pointer-events: auto; } .ss.is-open ~ .ss-sheet { transform: none; visibility: visible; transition: transform .5s var(--ss-spring), visibility 0s; } .ss-sheet .ss-card, .ss-sheet .ss-note { margin-top: 4px; } .ss-sheet .ss-id { margin: 0 0 4px; } .ss-sheet .ss-foot { margin-top: 4px; } /* Le lecteur du site remonte au-dessus de la capsule, et s'efface tant que le tiroir « Mon compte » est ouvert. */ html:has([data-barba-namespace="studio"], [data-barba-namespace="admin"]) .gx-dock { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); transition: opacity .25s ease; } html:has(.ss.is-open) .gx-dock { opacity: 0; pointer-events: none; } } @media (min-width: 760px) and (max-height: 720px) { .ss-card { display: none; } .ss-root .ss-link { height: 36px; } .ss-ind { height: 36px; } .ss-id { margin: 4px 0 2px; } .ss.is-collapsed .ss-head { gap: 0; } } @media (min-width: 760px) and (max-height: 560px) { .ss.is-collapsed .ss-toggle { position: absolute; right: -14px; top: 24px; width: 28px; height: 28px; background: var(--ss-cream); box-shadow: 0 0 0 1px var(--ss-line); } .ss-root .ss-foot .ss-link { height: 32px; } } @media (prefers-reduced-motion: reduce) { .ss-root, .ss-root *, .studio:has(> .studio__rail .ss-root) { transition-duration: .01ms !important; animation: none !important; } } /* Sa vraie pochette : étiquette d'un disque à sillons (catalogue réel). */ .ss-disc.has-cover { background: radial-gradient(circle, #1c1c1c 0 57%, #0a0a0a 57% 100%), repeating-radial-gradient(circle, #0F0F10 0 1px, #202023 1px 2px); } .ss-disc.has-cover .ss-vinyl { inset: 31%; width: 38%; height: 38%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); } .ss-disc.has-cover .ss-avatar { inset: 31%; width: 38%; height: 38%; }