/* ═══════════════════════════════════════════════════════════════════════════ THÈME CLAIR — Sonothèque Giri · 12/09/2026 Demande de Maha : « un thème très simple, style Apple », par défaut, et le thème bois récupérable à tout moment. ⛔ CE FICHIER EST UN CALQUE. Il ne modifie pas une seule couleur du thème bois : il les recouvre quand . Retirer l'attribut rend le bois intact, au pixel près. C'est la garantie du « à tout moment ». ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="clair"]{ /* ⛔ LA COULEUR SE PREND DANS LA PALETTE GIRI, pas dans un nuancier. Source : reference_palette_giri_collection_2026 (mesurée le 10/09). La première version de ce calque avait inventé ses propres gris (Apple, froids) et QUATRE ors différents : c'est ce que Maha a senti — « les couleurs ne sont pas encore parfaitement harmonisées ». Ici : des neutres CHAUDS, et DEUX ors seulement. */ /* Les neutres chauds — Cloud Dancer réchauffé, onyx chaud, greige */ --bg-0:#F7F5F1; --bg-1:#FFFFFF; --bg-2:#FBFAF7; --wood-1:#FFFFFF; --wood-2:#F7F5F1; --wood-3:#EFEBE3; --wood-grain:#E9E4DA; --ink:#14120F; --ink-soft:#4A453D; --ink-dim:#6B655C; --ink-mute:#8C857A; --filet:rgba(20,18,15,.10); --filet-fort:rgba(20,18,15,.17); /* ⛔ L'OR DU DÉCOR N'EST PAS L'OR DU TEXTE (règle de la palette). --or-decor sur blanc chaud = 3,7:1 — assez pour un filet, jamais pour un mot. */ --or-decor:#9A7B34; --or-texte:#7A6126; /* La rampe du lingot maison (skill « bouton », l'Affilié) — la seule rampe dorée. */ --or-haut:#F4D58A; --or-mi:#E8C078; --or-bas:#C9A253; --or-pied:#A07840; --or-encre:#3A2708; /* l'encre qui se pose SUR l'or */ /* Les anciens noms gardent leur SENS : un or clair reste un or clair. Les mots dorés sont recolorés un par un plus bas — jamais en cassant la variable. */ --gold:var(--or-decor); --gold-light:#E8C078; --gold-deep:#C9A253; --gold-burn:#E6DBC2; --gold-glow:rgba(154,123,52,.16); --gold-faint:rgba(20,18,15,.035); --ember:#B8621A; --rose:#B23A52; --ombre-1:0 1px 2px rgba(20,18,15,.05); --ombre-2:0 1px 2px rgba(20,18,15,.05),0 8px 26px rgba(20,18,15,.07); background:#F7F5F1; color-scheme:light; } /* ── La pierre du fond : plus de bois, une lumière neutre ─────────────────── */ html[data-theme="clair"]::before{ background:linear-gradient(180deg,#ffffff 0%,var(--bg-0) 42%,var(--wood-2) 100%) !important; } html[data-theme="clair"] body::before{ background: radial-gradient(ellipse 90% 55% at 50% 0%,rgba(154,123,52,.045),transparent 62%), radial-gradient(ellipse 80% 45% at 50% 100%,rgba(0,0,0,.028),transparent 70%) !important; } html[data-theme="clair"] body{ color:var(--ink) } html[data-theme="clair"]{ scrollbar-color:rgba(20,18,15,.26) var(--wood-3) } html[data-theme="clair"] ::-webkit-scrollbar-track, html[data-theme="clair"] ::-webkit-scrollbar-corner{ background:var(--wood-3) } /* ── Les surfaces : une carte blanche, un filet fin, une ombre à peine posée ─ */ html[data-theme="clair"] .card, html[data-theme="clair"] .pl-card, html[data-theme="clair"] .me-quick-card, html[data-theme="clair"] .me-hero, html[data-theme="clair"] .me-stat, html[data-theme="clair"] .rdvm-card, html[data-theme="clair"] .marbre-panneau, html[data-theme="clair"] .sg-box, html[data-theme="clair"] .mini-box, html[data-theme="clair"] .ctx-sheet, html[data-theme="clair"] .cm-head, html[data-theme="clair"] .cm-footer, html[data-theme="clair"] .loop-menu, html[data-theme="clair"] .tracks.is-open{ background:#ffffff !important; border-color:var(--filet) !important; box-shadow:var(--ombre-2) !important; color:var(--ink); } html[data-theme="clair"] .card:hover, html[data-theme="clair"] .pl-card:hover, html[data-theme="clair"] .me-quick-card:hover, html[data-theme="clair"] .rdvm-card:hover{ border-color:rgba(20,18,15,.17) !important; box-shadow:0 2px 6px rgba(20,18,15,.06),0 14px 34px rgba(20,18,15,.10) !important; } /* ── Les vignettes : un gris de repos plutôt qu'un trou noir ──────────────── */ html[data-theme="clair"] .card-art, html[data-theme="clair"] .sc-cover, html[data-theme="clair"] .tr-cover, html[data-theme="clair"] .plr-cov, html[data-theme="clair"] .ch-cover, html[data-theme="clair"] .masq-cover, html[data-theme="clair"] .pl-card-cover{ background-color:var(--wood-3) !important } html[data-theme="clair"] .card-amb:not([style*="background-image"]){ background:linear-gradient(160deg,var(--bg-2),var(--wood-3)) !important } html[data-theme="clair"] .card-art .ico-disq, html[data-theme="clair"] .sc-cover .ico-disq{ color:#86868b; opacity:.6 } /* ── Le texte ─────────────────────────────────────────────────────────────── */ html[data-theme="clair"] .card-t, html[data-theme="clair"] .rdvm-t, html[data-theme="clair"] .mqc-t, html[data-theme="clair"] .sg-title, html[data-theme="clair"] .sp-h, html[data-theme="clair"] h1,html[data-theme="clair"] h2,html[data-theme="clair"] h3{ color:var(--ink) !important } html[data-theme="clair"] .card-m, html[data-theme="clair"] .rdvm-s, html[data-theme="clair"] .mqc-s, html[data-theme="clair"] .plr-s, html[data-theme="clair"] .feed-vide, html[data-theme="clair"] .empty{ color:var(--ink-dim) !important } /* ── La barre du haut, en verre dépoli ────────────────────────────────────── */ html[data-theme="clair"] .topbar, html[data-theme="clair"] .tb, html[data-theme="clair"] .sono-topbar{ background:rgba(255,255,255,.82) !important; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--filet) !important; box-shadow:none !important; } html[data-theme="clair"] .tb-link,html[data-theme="clair"] .tbl-txt{ color:var(--ink-soft) !important } html[data-theme="clair"] .tb-link:hover{ color:var(--gold) !important } /* ── Les lignes de piste ──────────────────────────────────────────────────── */ html[data-theme="clair"] .tr-row, html[data-theme="clair"] .tr{ border-color:var(--filet) !important } html[data-theme="clair"] .tr-row:hover, html[data-theme="clair"] .tr:hover{ background:rgba(0,0,0,.03) !important } html[data-theme="clair"] .tr-t{ color:var(--ink) !important } html[data-theme="clair"] .tr-s,html[data-theme="clair"] .tr-score{ color:var(--ink-dim) !important } html[data-theme="clair"] .tr-like{ color:var(--rose) !important } html[data-theme="clair"] .tr-add,html[data-theme="clair"] .tr-menu{ color:var(--ink-dim) !important } html[data-theme="clair"] .tr-add:hover,html[data-theme="clair"] .tr-menu:hover{ color:var(--gold) !important; background:rgba(20,18,15,.05) !important } /* ── Le lecteur, posé comme une barre d'app ───────────────────────────────── */ html[data-theme="clair"] .player{ background:rgba(255,255,255,.92) !important; -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); border-top:1px solid var(--filet) !important; box-shadow:0 -1px 24px rgba(20,18,15,.07) !important; } html[data-theme="clair"] .p-title{ color:var(--ink) !important } html[data-theme="clair"] .p-sub{ color:var(--ink-dim) !important } html[data-theme="clair"] .p-btn{ color:var(--ink) !important } html[data-theme="clair"] .p-btn:hover{ color:var(--gold) !important } html[data-theme="clair"] .p-bar,html[data-theme="clair"] .p-rail{ background:rgba(20,18,15,.10) !important } /* ⛔ [2026-09-12] `background:` (forme courte) remet background-image a NONE, et un !important de feuille bat un style pose EN LIGNE par le JS. Cette regle effaçait donc la pochette du morceau dans le lecteur (Maha : « je ne vois pas l'image du morceau en bas a gauche »). On ne peint QUE la couleur de repos. */ html[data-theme="clair"] .p-disc{ background-color:var(--wood-3) !important } /* ── Les boutons ──────────────────────────────────────────────────────────── */ html[data-theme="clair"] .sg-btn, html[data-theme="clair"] .mini-btn.primary, html[data-theme="clair"] .rdvm-cta{ background:linear-gradient(180deg,var(--or-mi),var(--or-bas) 55%,var(--or-pied)) !important; color:#fff !important; border:1px solid rgba(20,18,15,.06) !important; box-shadow:0 1px 2px rgba(20,18,15,.12) !important; } html[data-theme="clair"] .mini-btn, html[data-theme="clair"] .pl-act{ background:var(--wood-2) !important; color:var(--ink) !important; border:1px solid var(--filet) !important; } html[data-theme="clair"] .pl-act:hover{ background:var(--wood-3) !important } html[data-theme="clair"] .pl-act.danger{ color:var(--rose) !important } /* ── Les champs ───────────────────────────────────────────────────────────── */ html[data-theme="clair"] input,html[data-theme="clair"] textarea,html[data-theme="clair"] select, html[data-theme="clair"] .sg-input,html[data-theme="clair"] .mini-box input{ background:#fff !important; color:var(--ink) !important; border:1px solid var(--filet-fort) !important; } html[data-theme="clair"] input::placeholder,html[data-theme="clair"] textarea::placeholder{ color:var(--ink-mute) !important } /* ── Pastilles, filtres, messages ─────────────────────────────────────────── */ html[data-theme="clair"] .feed-chips button, html[data-theme="clair"] .chip{ background:#fff !important; color:var(--ink-soft) !important; border:1px solid var(--filet) !important } html[data-theme="clair"] .feed-chips button.on, html[data-theme="clair"] .chip.on{ background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important } html[data-theme="clair"] .card-badge{ background:rgba(255,255,255,.92) !important; color:var(--ink) !important; border:1px solid var(--filet) !important } html[data-theme="clair"] .card-badge.neuf{ background:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; color:#3a2708 !important; border-color:rgba(160,120,64,.4) !important } html[data-theme="clair"] .toast{ background:rgba(29,29,31,.94) !important; color:#fff !important; border:0 !important } html[data-theme="clair"] .rdvm-x{ color:rgba(20,18,15,.28) !important } html[data-theme="clair"] .rdvm-x:hover{ color:var(--gold) !important; background:rgba(20,18,15,.05) !important } /* ═══ Deuxième passe : ce que la mesure a montré encore sombre ═════════════ */ /* Les raccourcis du haut : des cartes blanches, pas des planches de bois. */ html[data-theme="clair"] .sc{ background:#fff !important; background-image:none !important; border:1px solid var(--filet) !important; box-shadow:var(--ombre-1) !important; color:var(--ink) !important } html[data-theme="clair"] .sc:hover{ background:var(--bg-2) !important; border-color:rgba(20,18,15,.17) !important } html[data-theme="clair"] .sc-label, html[data-theme="clair"] .sc-t, html[data-theme="clair"] .sc-m{ color:var(--ink) !important; text-shadow:none !important } html[data-theme="clair"] .sc-play{ color:var(--ink) !important } /* La barre du haut : des pastilles grises, un seul bouton doré. */ html[data-theme="clair"] .tb-link{ background:var(--wood-2) !important; background-image:none !important; border:1px solid var(--filet) !important; color:var(--ink-soft) !important; box-shadow:none !important } html[data-theme="clair"] .tb-link:hover{ background:var(--wood-3) !important; color:var(--ink) !important } html[data-theme="clair"] .tb-link.tb-join{ background:linear-gradient(180deg,var(--or-mi),var(--or-bas) 55%,var(--or-pied)) !important; color:#fff !important; border-color:transparent !important } html[data-theme="clair"] .tbl-txt{ text-shadow:none !important } html[data-theme="clair"] .brand-name{ color:var(--ink) !important; text-shadow:none !important } /* Le grand titre : l'or devient une encre chaude, sans ombre portée. */ html[data-theme="clair"] .gold-word{ color:var(--or-decor) !important; -webkit-text-fill-color:var(--or-decor) !important; text-shadow:none !important; filter:none !important } html[data-theme="clair"] .hero h1, html[data-theme="clair"] .hero h2, html[data-theme="clair"] .hero p, html[data-theme="clair"] #feedHello{ color:var(--ink) !important; text-shadow:none !important } html[data-theme="clair"] .hero *, html[data-theme="clair"] #feedHello *{ text-shadow:none !important } html[data-theme="clair"] .hero p, html[data-theme="clair"] .hero .sous{ color:var(--ink-dim) !important } /* La pastille d'écoute offerte. */ html[data-theme="clair"] .sono-quota{ background:rgba(255,255,255,.94) !important; background-image:none !important; color:var(--ink) !important; border:1px solid var(--filet) !important; box-shadow:var(--ombre-1) !important } html[data-theme="clair"] .sono-quota .sq-dot{ background:#34c759 !important } /* Le menu boucle et minuteur. */ html[data-theme="clair"] .loop-menu{ background:#fff !important } html[data-theme="clair"] .loop-menu-title{ color:var(--ink) !important } html[data-theme="clair"] .loop-opt{ background:var(--wood-2) !important; color:var(--ink) !important; border:1px solid var(--filet) !important } html[data-theme="clair"] .loop-opt:hover{ background:var(--wood-3) !important } html[data-theme="clair"] .loop-opt.on{ background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important } /* Plus aucune ombre de texte héritée du bois. */ html[data-theme="clair"] .card-t, html[data-theme="clair"] .card-m, html[data-theme="clair"] .tr-t, html[data-theme="clair"] .tr-s, html[data-theme="clair"] .mqc-t, html[data-theme="clair"] .mqc-s, html[data-theme="clair"] .rdvm-t, html[data-theme="clair"] .rdvm-s, html[data-theme="clair"] .pl-card-t, html[data-theme="clair"] .sp-h{ text-shadow:none !important } /* ═══ Troisième passe : les calques et les ombres héritées ════════════════ */ /* La bande sombre derrière les filtres (un ::before du thème bois). */ /* La bande sous les filtres : elle doit CACHER ce qui défile dessous, sans jamais montrer son bord. Fondu long et couleur de la page, pas l'ancien gris froid. */ html[data-theme="clair"] #feedChips::before{ background:linear-gradient(180deg,#F7F5F1 0%,#F7F5F1 42%,rgba(247,245,241,.82) 72%,rgba(247,245,241,0) 100%) !important; } /* ⛔ Dans un thème clair, une ombre de texte noire est TOUJOURS une salissure. */ html[data-theme="clair"] body *{ text-shadow:none !important } html[data-theme="clair"] .toast{ text-shadow:none !important } /* ═══════════════════════════════════════════════════════════════════════════ QUATRIÈME PASSE — LES VUES DE LA BIBLIOTHÈQUE (12/09/2026) Maha : « récents, coups de cœur, playlist, classement et masqué : plein de trucs pas encore adaptés, plein de trucs illisibles ». Mesuré au pixel : `.tracks` gardait son brun plein `#241407` (seul `.tracks.is-open` était recouvert), et la vue Classement gardait son écrin émeraude `#052018` — encre noire sur vert nuit, 1,02:1. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Le bouton Retour : une pastille, plus une planche de bois ────────────── */ html[data-theme="clair"] .back-btn{ background:var(--wood-2) !important; background-image:none !important; border:1px solid var(--filet) !important; color:var(--ink-soft) !important; box-shadow:none !important; text-shadow:none !important; } html[data-theme="clair"] .back-btn::after{ display:none !important } html[data-theme="clair"] .back-btn:hover{ background:var(--wood-3) !important; color:var(--ink) !important; border-color:var(--filet-fort) !important; box-shadow:none !important; } /* ── La surface des listes, DANS LES DEUX ÉTATS ───────────────────────────── */ /* ⛔ Maha, 12/09 : « ce truc du cadre qui colle a toutes les cartes […] toujours present dans soins et podcasts, univers, album, masques, playlist, coups de coeur, recents ». Le conteneur ne porte PLUS de surface : les lignes et les cartes se posent directement sur la page, comme dans une liste Apple. */ html[data-theme="clair"] .tracks, html[data-theme="clair"] .tracks.is-open, html[data-theme="clair"].vue-emeraude .tracks, html[data-theme="clair"].vue-emeraude .tracks.is-open{ background:none !important; background-color:transparent !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; } /* Mon espace : la liste ne porte que des cartes — le cadre était de trop. Maha : « un espèce de cadre inutile […] elle touche les bords de chaque bouton ». */ html[data-theme="clair"] .tracks.is-open:has(.me-hero), html[data-theme="clair"] .tracks.is-open:has(.me-stats){ background:none !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; } /* ── Le titre de vue et son disque ────────────────────────────────────────── */ html[data-theme="clair"] .pl-hero h2{ color:var(--ink) !important; text-shadow:none !important } html[data-theme="clair"] .pl-hero p{ color:var(--ink-dim) !important } /* ── Les lignes de piste ──────────────────────────────────────────────────── */ html[data-theme="clair"] .track-row{ border-bottom-color:var(--filet) !important } html[data-theme="clair"] .track-row:hover{ background:rgba(20,18,15,.035) !important } html[data-theme="clair"] .track-row.playing{ background:rgba(154,123,52,.09) !important } html[data-theme="clair"] .tr-title{ color:var(--ink) !important } html[data-theme="clair"] .track-row.playing .tr-title{ color:var(--or-texte) !important; font-weight:600 } html[data-theme="clair"] .tr-num, html[data-theme="clair"] .tr-meta, html[data-theme="clair"] .tr-score, html[data-theme="clair"] .time{ color:var(--ink-dim) !important } html[data-theme="clair"] .tr-cover{ box-shadow:inset 0 0 0 1px rgba(20,18,15,.08),0 2px 6px rgba(20,18,15,.12) !important } html[data-theme="clair"] .tr-play{ background:var(--wood-2) !important; border-color:var(--filet) !important; color:var(--ink) !important; } html[data-theme="clair"] .track-row:hover .tr-play, html[data-theme="clair"] .track-row.playing .tr-play{ background:linear-gradient(180deg,var(--or-mi),var(--or-bas) 55%,var(--or-pied)) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 4px 12px rgba(122,90,22,.26) !important; } html[data-theme="clair"] .tr-like{ color:var(--ink-mute) !important } html[data-theme="clair"] .tr-like.liked, html[data-theme="clair"] .tr-like:hover{ color:var(--rose) !important } html[data-theme="clair"] .sub-chapter-h{ color:var(--ink) !important; text-shadow:none !important } html[data-theme="clair"] .sub-chapter-n{ color:var(--ink-dim) !important; border-color:var(--filet) !important } html[data-theme="clair"] .empty{ color:var(--ink-dim) !important } /* ── Le classement : l'écrin émeraude devient une lumière verte, pas une nuit ─ */ html[data-theme="clair"].vue-emeraude .top-periods{ background:linear-gradient(180deg,rgba(10,107,74,.05),transparent 85%) !important; border-bottom:1px solid var(--filet) !important; } html[data-theme="clair"] .top-seg, html[data-theme="clair"].vue-emeraude .top-seg{ background:var(--wood-2) !important; background-image:none !important; color:var(--ink-soft) !important; border:1px solid var(--filet) !important; box-shadow:none !important; text-shadow:none !important; } html[data-theme="clair"] .top-seg:hover, html[data-theme="clair"].vue-emeraude .top-seg:hover{ background:var(--wood-3) !important; color:var(--ink) !important; border-color:var(--filet-fort) !important; } html[data-theme="clair"] .top-seg.on, html[data-theme="clair"].vue-emeraude .top-seg.on{ background:#0a6b4a !important; background-image:none !important; color:#ffffff !important; border-color:transparent !important; font-weight:600; box-shadow:0 2px 10px rgba(10,107,74,.28) !important; } html[data-theme="clair"] .top-row .tr-num{ color:var(--or-texte) !important; text-shadow:none !important } html[data-theme="clair"] .top-row.top-1 .tr-num{ color:#0a6b4a !important; font-weight:700 } html[data-theme="clair"] .top-row.top-2 .tr-num, html[data-theme="clair"] .top-row.top-3 .tr-num{ color:var(--ink) !important } /* ── Mon espace ───────────────────────────────────────────────────────────── */ html[data-theme="clair"] .me-hero{ background:none !important; border:0 !important; box-shadow:none !important; border-bottom:1px solid var(--filet) !important; border-radius:0 !important; } html[data-theme="clair"] .me-hello{ color:var(--ink) !important; text-shadow:none !important } html[data-theme="clair"] .me-sub{ color:var(--ink-dim) !important } html[data-theme="clair"] .me-avatar{ box-shadow:0 4px 14px rgba(154,123,52,.22),inset 0 1px 0 rgba(255,255,255,.6) !important; } html[data-theme="clair"] .me-avatar::after{ border-color:rgba(154,123,52,.22) !important } html[data-theme="clair"] .me-avatar .me-av-cam{ border-color:#fff !important; box-shadow:0 1px 4px rgba(20,18,15,.26) !important } html[data-theme="clair"] .me-stat::before{ display:none !important } html[data-theme="clair"] .me-stat .ms-num{ color:var(--or-texte) !important; text-shadow:none !important } html[data-theme="clair"] .me-stat .ms-lab{ color:var(--ink-dim) !important } html[data-theme="clair"] .me-stat:hover{ border-color:var(--filet-fort) !important; box-shadow:var(--ombre-2) !important } html[data-theme="clair"] .me-section-head .msh-title{ color:var(--ink) !important; text-shadow:none !important } html[data-theme="clair"] .me-section-head .msh-link{ color:var(--or-texte) !important; background:var(--wood-2) !important; border:1px solid var(--filet) !important; } html[data-theme="clair"] .me-section-head .msh-link:hover{ background:var(--wood-3) !important; border-color:var(--filet-fort) !important; box-shadow:none !important; } html[data-theme="clair"] .me-quick-card .mqc-t{ color:var(--ink) !important } html[data-theme="clair"] .me-quick-card .mqc-s{ color:var(--ink-dim) !important } html[data-theme="clair"] .me-quick-card .mqc-ico{ color:var(--or-texte) !important; filter:none !important } html[data-theme="clair"] .me-quick-card.hearts .mqc-ico{ color:var(--rose) !important; filter:none !important } html[data-theme="clair"] .me-quick-card:hover{ border-color:var(--filet-fort) !important; box-shadow:var(--ombre-2) !important } /* ── Les cartes de playlist ───────────────────────────────────────────────── */ html[data-theme="clair"] .pl-card{ background-image:none !important } html[data-theme="clair"] .pl-card:hover{ border-color:var(--filet-fort) !important; box-shadow:var(--ombre-2) !important } html[data-theme="clair"] .pl-card-name{ color:var(--ink) !important } html[data-theme="clair"] .pl-card-meta{ color:var(--ink-dim) !important } html[data-theme="clair"] .pl-create-card{ color:var(--ink-soft) !important; border-style:dashed !important; border-color:var(--filet-fort) !important } html[data-theme="clair"] .pl-create-card .pcc-plus{ color:var(--or-texte) !important } html[data-theme="clair"] .pl-tools .pl-count{ color:var(--ink-dim) !important } html[data-theme="clair"] .pl-act{ color:var(--ink-soft) !important; border-color:var(--filet) !important } html[data-theme="clair"] .pl-act:hover{ color:var(--ink) !important; border-color:var(--filet-fort) !important; background:var(--wood-2) !important } html[data-theme="clair"] .pl-act.danger:hover{ color:var(--rose) !important; border-color:rgba(194,65,90,.45) !important } /* ── Le pied de page : il était à 1,03:1, donc invisible ──────────────────── */ html[data-theme="clair"] .foot-note{ color:var(--ink-dim) !important; text-shadow:none !important } html[data-theme="clair"] .foot-note .sep{ color:var(--ink-mute) !important; text-shadow:none !important } html[data-theme="clair"] .foot-legal{ color:var(--ink-mute) !important } html[data-theme="clair"] .foot-legal a{ color:var(--ink-dim) !important } html[data-theme="clair"] .foot-legal a:hover{ color:var(--ink) !important } html[data-theme="clair"] .foot-legal span{ color:var(--ink-dim) !important } /* ── Le mot doré du grand titre, remonté à 4,6:1 ──────────────────────────── */ html[data-theme="clair"] .gold-word{ color:var(--or-texte) !important; -webkit-text-fill-color:var(--or-texte) !important } /* ── Le sceau de validation des listes d'engagement (remplace l'ancien ✦) ─── */ html[data-theme="clair"] .ico-ok{ color:#0a6b4a } /* ═══════════════════════════════════════════════════════════════════════════ CINQUIÈME PASSE — LES POP-UP (12/09/2026) Maha avait demandé « toutes les pages, tous les pop-up, tous les effets ». Mesuré : le panneau « Espace membre » gardait sa planche de bois en dur (background-image wood-body.jpg posé sur .sono-gate-card) et son titre en #fff — blanc sur bois clair, illisible. Idem pour la feuille d'actions, les mini-fenêtres et les commentaires. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Le voile : un verre dépoli clair, pas une nuit ───────────────────────── */ html[data-theme="clair"] .sono-gate{ background:rgba(20,18,15,.30) !important; -webkit-backdrop-filter:blur(16px) saturate(1.06); backdrop-filter:blur(16px) saturate(1.06); } html[data-theme="clair"] .ctx-overlay, html[data-theme="clair"] .mini-modal{ background:rgba(20,18,15,.30) !important } /* ── La carte : du blanc, et surtout PLUS DE TEXTURE DE BOIS ──────────────── */ html[data-theme="clair"] .sono-gate-card{ background:#ffffff !important; background-color:#ffffff !important; background-image:none !important; border:1px solid var(--filet) !important; box-shadow:0 24px 70px rgba(20,18,15,.18) !important; } html[data-theme="clair"] .sg-title{ color:var(--ink) !important; text-shadow:none !important } html[data-theme="clair"] .sg-lede, html[data-theme="clair"] .sg-offer{ color:var(--ink-soft) !important } html[data-theme="clair"] .sg-offer strong{ color:var(--or-texte) !important } html[data-theme="clair"] .sg-eyebrow{ color:var(--or-texte) !important; background:#faf6ec !important; border-color:rgba(138,101,18,.28) !important; } html[data-theme="clair"] .sg-feat{ color:var(--ink) !important; border-bottom-color:var(--filet) !important } html[data-theme="clair"] .sg-feat::before{ background:var(--or-texte) !important } html[data-theme="clair"] .sg-btn{ background:linear-gradient(180deg,var(--or-mi),var(--or-bas) 55%,var(--or-pied)) !important; color:#ffffff !important; box-shadow:0 6px 20px rgba(122,90,22,.24) !important; border:0 !important; } html[data-theme="clair"] .sg-btn:hover{ box-shadow:0 10px 26px rgba(122,90,22,.32) !important } html[data-theme="clair"] .sg-link{ color:var(--ink-dim) !important } html[data-theme="clair"] .sg-link:hover{ color:var(--ink) !important } html[data-theme="clair"] .sg-restore-btn{ background:var(--wood-2) !important; border:1px solid var(--filet) !important; color:var(--ink) !important; } html[data-theme="clair"] .sg-restore-btn:hover{ background:var(--wood-3) !important } html[data-theme="clair"] .sg-msg{ color:var(--ink-dim) !important } html[data-theme="clair"] .sg-msg.err{ color:var(--rose) !important } html[data-theme="clair"] .sg-msg.ok{ color:#0a6b4a !important } html[data-theme="clair"] .sg-close{ color:var(--ink-dim) !important; opacity:1 !important } html[data-theme="clair"] .sg-close:hover{ color:var(--ink) !important } html[data-theme="clair"] .sg-google-sep{ color:var(--ink-mute) !important } html[data-theme="clair"] .sg-google-sep::before, html[data-theme="clair"] .sg-google-sep::after{ background:linear-gradient(90deg,transparent,var(--filet-fort),transparent) !important; } html[data-theme="clair"] .sg-app-note{ color:var(--ink-dim) !important } /* Les petites lignes légales du panneau : elles étaient en or pâle. */ html[data-theme="clair"] .sono-gate-card a{ color:var(--ink-soft) !important } html[data-theme="clair"] .sono-gate-card small, html[data-theme="clair"] .sono-gate-card .sg-fine{ color:var(--ink-dim) !important } /* ── La feuille d'actions d'une piste ─────────────────────────────────────── */ html[data-theme="clair"] .ctx-sheet{ background:#ffffff !important; background-image:none !important; border-color:var(--filet) !important; box-shadow:0 -10px 44px rgba(20,18,15,.17) !important; } html[data-theme="clair"] .ctx-head{ border-bottom-color:var(--filet) !important } html[data-theme="clair"] .ctx-head .ch-cover{ background-color:var(--wood-3) !important } html[data-theme="clair"] .ctx-head .ch-title{ color:var(--ink) !important } html[data-theme="clair"] .ctx-head .ch-sub, html[data-theme="clair"] .ctx-empty, html[data-theme="clair"] .ctx-pl-count{ color:var(--ink-dim) !important } html[data-theme="clair"] .ctx-opt{ color:var(--ink) !important } html[data-theme="clair"] .ctx-opt:hover, html[data-theme="clair"] .ctx-opt:active{ background:rgba(20,18,15,.05) !important; color:var(--ink) !important } html[data-theme="clair"] .ctx-opt.new{ color:var(--or-texte) !important } html[data-theme="clair"] .ctx-divider{ background:var(--filet) !important } html[data-theme="clair"] .ctx-section-label{ color:var(--ink-mute) !important } /* ── Les mini-fenêtres (renommer, créer…) ─────────────────────────────────── */ html[data-theme="clair"] .mini-box{ background:#ffffff !important; background-image:none !important; border-color:var(--filet) !important; } html[data-theme="clair"] .mini-box h3{ color:var(--ink) !important } html[data-theme="clair"] .mini-box input, html[data-theme="clair"] .mini-box textarea, html[data-theme="clair"] .cm-form textarea{ background:var(--bg-0) !important; border:1px solid var(--filet) !important; color:var(--ink) !important; } html[data-theme="clair"] .mini-box input:focus, html[data-theme="clair"] .mini-box textarea:focus, html[data-theme="clair"] .cm-form textarea:focus{ border-color:var(--or-texte) !important } html[data-theme="clair"] .mini-btn{ background:var(--wood-2) !important; border:1px solid var(--filet) !important; color:var(--ink) !important; } html[data-theme="clair"] .mini-btn:hover{ background:var(--wood-3) !important } html[data-theme="clair"] .mini-btn.primary, html[data-theme="clair"] .cm-send{ background:linear-gradient(180deg,var(--or-mi),var(--or-bas) 55%,var(--or-pied)) !important; color:#ffffff !important; border:0 !important; } /* ── Les commentaires ─────────────────────────────────────────────────────── */ html[data-theme="clair"] .cm-item{ background:#f7f7f9 !important; border-color:var(--filet) !important } html[data-theme="clair"] .cm-author{ color:var(--ink) !important } html[data-theme="clair"] .cm-body{ color:var(--ink-soft) !important } html[data-theme="clair"] .cm-date, html[data-theme="clair"] .cm-del{ color:var(--ink-mute) !important } html[data-theme="clair"] .cm-del:hover{ color:var(--rose) !important } /* ── Les couleurs écrites en dur dans un attribut style ───────────────────── */ /* ⛔ Une couleur inline ne se surcharge que par un sélecteur d'ATTRIBUT + !important. Ces ors pâles (#d2bb87, #fce8b6, #e8c477) sont lisibles sur bois et invisibles sur blanc : 1,2 à 1,9:1 mesurés. */ html[data-theme="clair"] [style*="d2bb87"], html[data-theme="clair"] [style*="fce8b6"], html[data-theme="clair"] [style*="FCE8B6"]{ color:var(--ink-soft) !important } html[data-theme="clair"] .sono-gate-card [style*="e8c477"], html[data-theme="clair"] .sono-gate-card [style*="E8C477"], html[data-theme="clair"] .mini-box [style*="e8c477"], html[data-theme="clair"] .ctx-sheet [style*="e8c477"]{ color:var(--or-texte) !important } html[data-theme="clair"] .sg-google-sep{ color:var(--ink-dim) !important } /* ── Derniers points mesurés sous le seuil ────────────────────────────────── */ html[data-theme="clair"] .ctx-section-label{ color:var(--ink-dim) !important } html[data-theme="clair"] .me-avatar .me-av-cam{ color:#3a2708 } /* ── Les bandeaux qui restaient collés au cadre disparu ───────────────────── */ /* Sans conteneur, un bandeau à fond dégradé flotte comme une bande grise. L'en-tête de chapitre et la barre de périodes redeviennent du texte nu. */ html[data-theme="clair"] .sub-chapter-h{ background:none !important; background-image:none !important; color:var(--ink) !important; text-shadow:none !important; border-bottom:1px solid var(--filet) !important; padding-left:4px !important; padding-right:4px !important; } html[data-theme="clair"] .sub-chapter-n{ color:var(--ink-dim) !important; background:var(--wood-2) !important; border-color:var(--filet) !important; } html[data-theme="clair"] .top-periods, html[data-theme="clair"].vue-emeraude .top-periods{ background:none !important; background-image:none !important; border-bottom:0 !important; padding-left:2px !important; padding-right:2px !important; margin-bottom:10px !important; } /* Les lignes se posent maintenant sur la page : le filet doit se voir. */ html[data-theme="clair"] .track-row{ padding-left:6px !important; padding-right:6px !important } /* ⛔ Le survol décalait la ligne de 6 px : tout son contenu glissait SOUS le curseur. Mesuré : .tr-play se déplaçait de 5,9 px à chaque passage. Une ligne se signale par sa surface, elle ne bouge pas. */ html[data-theme="clair"] .track-row:hover, html[data-theme="clair"] .track-row.playing{ border-radius:12px } /* ═══════════════════════════════════════════════════════════════════════════ SEPTIÈME PASSE — LES PAGES FILLES (album, accès, offre, cadeau, parrainage, écoute, capsule, offrande, CGV, confidentialité, app) · 12/09/2026 Elles partagent les MÊMES noms de variables que l'app : le calque du haut de ce fichier les recolore déjà. Ce qui restait en bois, c'est ce qui est écrit EN DUR : le fond du body, les voiles fixes, et quelques couleurs littérales. Marqueur posé par le script d'amorçage : html[data-sono-page="fille"]. ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="clair"][data-sono-page="fille"], html[data-theme="clair"][data-sono-page="fille"] body{ background:var(--bg-0) !important; background-color:var(--bg-0) !important; background-image:none !important; color:var(--ink) !important; } /* Les deux voiles fixes : l'un creusait l'ombre, l'autre teintait en acajou. */ html[data-theme="clair"][data-sono-page="fille"] body::before{ background: radial-gradient(ellipse 90% 55% at 50% 0%,rgba(154,123,52,.05),transparent 62%), radial-gradient(ellipse 80% 45% at 50% 100%,rgba(0,0,0,.03),transparent 70%) !important; } html[data-theme="clair"][data-sono-page="fille"] body::after{ background:none !important; mix-blend-mode:normal !important; } html[data-theme="clair"][data-sono-page="fille"]{ scrollbar-color:rgba(20,18,15,.26) var(--wood-3) } /* ── Le haut de page ──────────────────────────────────────────────────────── */ html[data-theme="clair"][data-sono-page="fille"] .eyebrow{ color:var(--or-texte) !important; background:#faf6ec !important; border-color:rgba(138,101,18,.28) !important; backdrop-filter:none !important; } html[data-theme="clair"][data-sono-page="fille"] h1, html[data-theme="clair"][data-sono-page="fille"] h2, html[data-theme="clair"][data-sono-page="fille"] h3, html[data-theme="clair"][data-sono-page="fille"] .sec-title, html[data-theme="clair"][data-sono-page="fille"] .gate-title{ color:var(--ink) !important; text-shadow:none !important } html[data-theme="clair"][data-sono-page="fille"] .lineage, html[data-theme="clair"][data-sono-page="fille"] .lede, html[data-theme="clair"][data-sono-page="fille"] .lead, html[data-theme="clair"][data-sono-page="fille"] .gate-sub, html[data-theme="clair"][data-sono-page="fille"] .sub, html[data-theme="clair"][data-sono-page="fille"] .poem{ color:var(--ink-soft) !important; text-shadow:none !important } html[data-theme="clair"][data-sono-page="fille"] .meta span, html[data-theme="clair"][data-sono-page="fille"] .meta > *{ color:var(--ink-dim) !important; border-color:var(--filet) !important; background:#ffffff !important; } /* ⛔ .alb-back-fl n'est PAS un bouton : c'est le porte-flèche À L'INTÉRIEUR du bouton. Le mettre dans ce groupe lui donnait sa propre pastille blanche à filet — le « carré inutile autour de la flèche » que Maha a vu. Une règle groupée se relit élément par élément, pas par ressemblance de nom. */ html[data-theme="clair"][data-sono-page="fille"] .alb-back, html[data-theme="clair"][data-sono-page="fille"] .back{ background:#ffffff !important; background-image:none !important; color:var(--ink) !important; border:1px solid var(--filet) !important; box-shadow:var(--ombre-1) !important; text-shadow:none !important; } html[data-theme="clair"][data-sono-page="fille"] .alb-back::after, html[data-theme="clair"][data-sono-page="fille"] .back::after{ display:none !important } /* ── Les cartes (achat, portes, étapes, encadrés) ─────────────────────────── */ html[data-theme="clair"][data-sono-page="fille"] .buy-card, html[data-theme="clair"][data-sono-page="fille"] .porte, html[data-theme="clair"][data-sono-page="fille"] .step, html[data-theme="clair"][data-sono-page="fille"] .card, html[data-theme="clair"][data-sono-page="fille"] .box, html[data-theme="clair"][data-sono-page="fille"] .panel, html[data-theme="clair"][data-sono-page="fille"] .pl-mini-box, html[data-theme="clair"][data-sono-page="fille"] .pl-sheet, html[data-theme="clair"][data-sono-page="fille"] .modal > *:not(.modal-bg){ background:#ffffff !important; background-image:none !important; border-color:var(--filet) !important; box-shadow:var(--ombre-2) !important; color:var(--ink) !important; } html[data-theme="clair"][data-sono-page="fille"] .modal-bg, html[data-theme="clair"][data-sono-page="fille"] .pl-overlay{ background:rgba(20,18,15,.30) !important } html[data-theme="clair"][data-sono-page="fille"] .buy-sub, html[data-theme="clair"][data-sono-page="fille"] .buy-guarantee, html[data-theme="clair"][data-sono-page="fille"] .st-d, html[data-theme="clair"][data-sono-page="fille"] .sep{ color:var(--ink-dim) !important } html[data-theme="clair"][data-sono-page="fille"] .buy-price, html[data-theme="clair"][data-sono-page="fille"] .num, html[data-theme="clair"][data-sono-page="fille"] .em, html[data-theme="clair"][data-sono-page="fille"] .em-or, html[data-theme="clair"][data-sono-page="fille"] b, html[data-theme="clair"][data-sono-page="fille"] strong{ color:var(--or-texte) !important; text-shadow:none !important } html[data-theme="clair"][data-sono-page="fille"] p strong, html[data-theme="clair"][data-sono-page="fille"] li strong, html[data-theme="clair"][data-sono-page="fille"] p b{ color:var(--ink) !important } /* ── Les boutons ──────────────────────────────────────────────────────────── */ html[data-theme="clair"][data-sono-page="fille"] .buy-btn, html[data-theme="clair"][data-sono-page="fille"] .btn:not(.ghost):not(.btn-outline), html[data-theme="clair"][data-sono-page="fille"] .cta, html[data-theme="clair"][data-sono-page="fille"] .pl-mini-btn.primary{ background:linear-gradient(180deg,var(--or-mi),var(--or-bas) 55%,var(--or-pied)) !important; background-image:linear-gradient(180deg,var(--or-mi),var(--or-bas) 55%,var(--or-pied)) !important; color:#ffffff !important; border:0 !important; text-shadow:none !important; box-shadow:0 6px 20px rgba(122,90,22,.24) !important; } html[data-theme="clair"][data-sono-page="fille"] .btn.ghost, html[data-theme="clair"][data-sono-page="fille"] .pl-mini-btn{ background:var(--wood-2) !important; background-image:none !important; color:var(--ink) !important; border:1px solid var(--filet) !important; box-shadow:none !important; } html[data-theme="clair"][data-sono-page="fille"] .btn.ghost:hover{ background:var(--wood-3) !important } html[data-theme="clair"][data-sono-page="fille"] input, html[data-theme="clair"][data-sono-page="fille"] textarea, html[data-theme="clair"][data-sono-page="fille"] .buy-email input{ background:#ffffff !important; color:var(--ink) !important; border:1px solid var(--filet) !important; } html[data-theme="clair"][data-sono-page="fille"] a{ color:var(--or-texte) } html[data-theme="clair"][data-sono-page="fille"] .poem-link{ color:var(--ink-soft) !important } /* ── La liste des pistes ──────────────────────────────────────────────────── */ html[data-theme="clair"][data-sono-page="fille"] .track, html[data-theme="clair"][data-sono-page="fille"] .pl-track{ background:none !important; border-color:var(--filet) !important; } html[data-theme="clair"][data-sono-page="fille"] .track:hover{ background:rgba(20,18,15,.035) !important } html[data-theme="clair"][data-sono-page="fille"] .name{ color:var(--ink) !important } html[data-theme="clair"][data-sono-page="fille"] .num, html[data-theme="clair"][data-sono-page="fille"] .m-num, html[data-theme="clair"][data-sono-page="fille"] .dur, html[data-theme="clair"][data-sono-page="fille"] .time{ color:var(--ink-dim) !important } html[data-theme="clair"][data-sono-page="fille"] .play-ic{ color:var(--or-texte) !important } /* ── Le lecteur du bas ────────────────────────────────────────────────────── */ html[data-theme="clair"][data-sono-page="fille"] .player{ background:rgba(255,255,255,.92) !important; background-image:none !important; border-top:1px solid var(--filet) !important; box-shadow:0 -6px 30px rgba(20,18,15,.07) !important; -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5); } html[data-theme="clair"][data-sono-page="fille"] .p-btn{ color:var(--ink) !important } html[data-theme="clair"][data-sono-page="fille"] .p-disc{ background-color:var(--wood-3) !important } html[data-theme="clair"][data-sono-page="fille"] .loop-menu{ background:#ffffff !important; border-color:var(--filet) !important } html[data-theme="clair"][data-sono-page="fille"] .loop-opt{ background:var(--wood-2) !important; color:var(--ink) !important; border-color:var(--filet) !important } html[data-theme="clair"][data-sono-page="fille"] .toast{ background:rgba(29,29,31,.94) !important; color:#fff !important } /* ── Les pages de texte (CGV, confidentialité) ────────────────────────────── */ html[data-theme="clair"][data-sono-page="fille"] p, html[data-theme="clair"][data-sono-page="fille"] li, html[data-theme="clair"][data-sono-page="fille"] td, html[data-theme="clair"][data-sono-page="fille"] dd{ color:var(--ink-soft) !important } /* ⛔ Plus aucune ombre de texte héritée du bois. */ html[data-theme="clair"][data-sono-page="fille"] body *{ text-shadow:none !important } /* ── Ce que la mesure a montré encore pâle sur les pages filles ───────────── */ /* Couleurs littérales, hors variables : elles ne bougent pas toutes seules. */ html[data-theme="clair"][data-sono-page="fille"] .feat div, html[data-theme="clair"][data-sono-page="fille"] .step .st-t, html[data-theme="clair"][data-sono-page="fille"] .st-t{ color:var(--ink) !important } html[data-theme="clair"][data-sono-page="fille"] .feat div{ border-bottom-color:var(--filet) !important } html[data-theme="clair"][data-sono-page="fille"] .feat div::before{ color:var(--or-texte) !important } html[data-theme="clair"][data-sono-page="fille"] h1 .em, html[data-theme="clair"][data-sono-page="fille"] h1 em{ color:var(--or-texte) !important } html[data-theme="clair"][data-sono-page="fille"] .foot, html[data-theme="clair"][data-sono-page="fille"] .footer{ color:var(--ink-dim) !important; opacity:1 !important } /* ⛔ Une couleur inline ne cède qu'à un sélecteur d'attribut + !important. */ html[data-theme="clair"][data-sono-page="fille"] [style*="9c845c"], html[data-theme="clair"][data-sono-page="fille"] [style*="fbf3dc"], html[data-theme="clair"][data-sono-page="fille"] [style*="f4e3b8"], html[data-theme="clair"][data-sono-page="fille"] [style*="d2bb87"]{ color:var(--ink-dim) !important; opacity:1 !important; } /* ── Capsule, offrande, écoute, app : les derniers points mesurés ─────────── */ /* Les cartes de la Capsule étaient peintes en ligne (background-color:#2A1509). Elles portent désormais un NOM — une classe se surcharge, une couleur inline non. */ html[data-theme="clair"][data-sono-page="fille"] .cap-item{ background-color:#ffffff !important; background-image:none !important; border-color:var(--filet) !important; box-shadow:var(--ombre-1) !important; } html[data-theme="clair"][data-sono-page="fille"] .cap-item:hover{ background-color:var(--bg-2) !important } html[data-theme="clair"][data-sono-page="fille"] .cap-item > div > div{ color:var(--ink) !important } html[data-theme="clair"][data-sono-page="fille"] .cap-item > div > div + div{ color:var(--ink-dim) !important } html[data-theme="clair"][data-sono-page="fille"] .cap-item.est-ferme > div:first-child{ background:var(--wood-2) !important; color:var(--ink-dim) !important; border-color:var(--filet) !important; } html[data-theme="clair"][data-sono-page="fille"] .cap-seal{ background:#ffffff !important; color:var(--or-texte) !important; border-color:var(--filet) !important; } /* L'offrande : un titre blanc sur blanc, un kicker et des minuteurs trop pâles. */ html[data-theme="clair"][data-sono-page="fille"] .titre{ color:var(--ink) !important } html[data-theme="clair"][data-sono-page="fille"] .kicker{ color:var(--or-texte) !important } html[data-theme="clair"][data-sono-page="fille"] .duree, html[data-theme="clair"][data-sono-page="fille"] #tcur, html[data-theme="clair"][data-sono-page="fille"] #ttot{ color:var(--ink-dim) !important } html[data-theme="clair"][data-sono-page="fille"] .ps a[href*="whatsapp"]{ color:#0a6b4a !important } html[data-theme="clair"][data-sono-page="fille"] .ps{ color:var(--ink-soft) !important } html[data-theme="clair"][data-sono-page="fille"] .ps b{ color:var(--ink) !important } /* L'erreur d'un lien d'écoute : un rose pâle devenait illisible. */ html[data-theme="clair"][data-sono-page="fille"] .err{ color:var(--rose) !important } /* Le bouton secondaire de la page d'application. */ html[data-theme="clair"][data-sono-page="fille"] .btn.btn-outline, html[data-theme="clair"][data-sono-page="fille"] .btn-outline{ background:var(--wood-2) !important; color:var(--ink) !important; border:1px solid var(--filet) !important; } /* L'étiquette « Accès Capsule » est peinte en ligne : sélecteur d'attribut, insensible à la casse. */ html[data-theme="clair"][data-sono-page="fille"] [style*="DCBE86" i]{ color:var(--ink-dim) !important } /* ── Le sélecteur de morceaux, en thème clair ─────────────────────────────── */ html[data-theme="clair"] .pk-liste{ border-color:var(--filet) !important; background:#fff } html[data-theme="clair"] .pk-row{ border-bottom-color:var(--filet) !important } html[data-theme="clair"] .pk-row:hover{ background:rgba(20,18,15,.035) !important } html[data-theme="clair"] .pk-cov{ background-color:var(--wood-3) !important } html[data-theme="clair"] .pk-t{ color:var(--ink) !important } html[data-theme="clair"] .pk-s,html[data-theme="clair"] .pk-compte,html[data-theme="clair"] .pk-deja{ color:var(--ink-dim) !important } html[data-theme="clair"] .pk-case{ border-color:var(--filet-fort) !important } html[data-theme="clair"] .pk-row.on .pk-case{ background:#0a6b4a !important; color:#fff !important; border-color:transparent !important } html[data-theme="clair"] .pk-row.dedans .pk-case{ background:var(--wood-3) !important; color:var(--ink-dim) !important } html[data-theme="clair"] .pk-quit{ border-color:var(--filet) !important; color:var(--ink-dim) !important } html[data-theme="clair"] .pk-quit:hover{ color:var(--ink) !important; border-color:var(--filet-fort) !important } html[data-theme="clair"] .pk-tout,html[data-theme="clair"] .pk-plus{ color:var(--or-texte) !important } html[data-theme="clair"] .pk-plus{ border-top-color:var(--filet) !important } html[data-theme="clair"] .pk-plus:hover{ background:rgba(20,18,15,.035) !important } html[data-theme="clair"] .pk-groupe{ color:var(--ink-mute) !important; border-left-color:var(--filet) !important } html[data-theme="clair"] .pk-loupe{ color:var(--ink-mute) !important } /* ── L'aléatoire dans le bandeau de lecture ───────────────────────────────── */ html[data-theme="clair"] #bShuffle{ color:var(--ink-dim) !important } html[data-theme="clair"] #bShuffle:hover{ color:var(--ink) !important } html[data-theme="clair"] #bShuffle.on{ color:var(--or-texte) !important } /* ── La page album : ce que la mesure et l'œil ont montré ─────────────────── */ /* Le porte-flèche ne porte plus rien : ni fond, ni filet, ni ombre. */ html[data-theme="clair"][data-sono-page="fille"] .alb-back-fl{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; } /* ⛔ La pastille de lecture était un dégradé `var(--gold-light) → var(--gold-deep)`. En thème clair, --gold-light vaut var(--ink) (une encre, choisie pour le TEXTE) : le dégradé partait donc du presque-noir et donnait un rond brun illisible. Une variable de texte n'a rien à faire dans un dégradé de surface. */ html[data-theme="clair"][data-sono-page="fille"] .porte .play-ic{ background:linear-gradient(180deg,var(--or-mi),var(--or-bas) 55%,var(--or-pied)) !important; color:#ffffff !important; box-shadow:0 3px 10px rgba(122,90,22,.26) !important; } html[data-theme="clair"][data-sono-page="fille"] .porte.playing .play-ic{ background:linear-gradient(180deg,#0e7d57,#0a6b4a) !important; box-shadow:0 3px 12px rgba(10,107,74,.30) !important; } /* Le gros bouton du lecteur : le cerceau de progression se lisait BLANC sur fond clair. */ html[data-theme="clair"] .p-play, html[data-theme="clair"][data-sono-page="fille"] .p-play{ filter:none !important; box-shadow:0 4px 14px rgba(122,90,22,.20) !important; } html[data-theme="clair"] .p-play::before, html[data-theme="clair"][data-sono-page="fille"] .p-play::before{ background:conic-gradient(var(--or-texte) calc(var(--pp,0)*1%), rgba(20,18,15,.10) 0) !important; filter:none !important; } html[data-theme="clair"] .p-play:hover{ filter:none !important; box-shadow:0 6px 20px rgba(122,90,22,.28) !important } /* L'interrupteur de « Ma musique du jour ». */ html[data-theme="clair"] .me-quick-card .mqc-bascule{ background:var(--wood-3) !important; border-color:var(--filet) !important } html[data-theme="clair"] .me-quick-card .mqc-bascule.on{ background:#0a6b4a !important; border-color:transparent !important } html[data-theme="clair"] .me-quick-card .mqc-bascule::after{ background:#fff !important; box-shadow:0 1px 3px rgba(20,18,15,.22) !important } /* ── La cloche et ses nouvelles ───────────────────────────────────────────── */ html[data-theme="clair"] .cloche-voile{ background:rgba(20,18,15,.24) !important } html[data-theme="clair"] .cloche-panneau{ background:#ffffff !important; background-image:none !important; border-color:var(--filet) !important; box-shadow:0 20px 60px rgba(20,18,15,.18) !important; } html[data-theme="clair"] .cl-tete{ border-bottom-color:var(--filet) !important } html[data-theme="clair"] .cl-titre{ color:var(--ink) !important } html[data-theme="clair"] .cl-tout{ color:var(--ink-dim) !important } html[data-theme="clair"] .cl-tout:hover{ color:var(--or-texte) !important } html[data-theme="clair"] .cl-quit{ border-color:var(--filet) !important; color:var(--ink-dim) !important } html[data-theme="clair"] .cl-quit:hover{ color:var(--ink) !important; border-color:var(--filet-fort) !important } html[data-theme="clair"] .cl-item:hover{ background:rgba(20,18,15,.035) !important } html[data-theme="clair"] .cl-vig{ background-color:var(--wood-2) !important; color:var(--or-texte) !important } html[data-theme="clair"] .cl-t{ color:var(--ink) !important } html[data-theme="clair"] .cl-s{ color:var(--ink-dim) !important } html[data-theme="clair"] .cl-quand{ color:var(--ink-mute) !important } html[data-theme="clair"] .cl-point{ background:#0a6b4a !important; box-shadow:none !important } html[data-theme="clair"] .cl-item.lue .cl-point{ background:transparent !important } html[data-theme="clair"] .cl-item.lue .cl-t{ color:var(--ink-dim) !important } html[data-theme="clair"] .cl-vide{ color:var(--ink-dim) !important } html[data-theme="clair"] .tb-pastille{ background:#0a6b4a !important; color:#fff !important; box-shadow:none !important } html[data-theme="clair"] .tb-link-cloche svg{ stroke:var(--ink-soft) !important } html[data-theme="clair"] .tb-link-cloche:hover svg{ stroke:var(--ink) !important } /* ═══════════════════════════════════════════════════════════════════════════ HARMONISATION — UNE SEULE GRAMMAIRE DE COULEUR (12/09/2026) Maha : « j'ai l'impression que les couleurs ne sont pas encore parfaitement harmonisées, c'est pas encore du parfait premium ». Le relevé de ce qui était RÉELLEMENT peint donnait 13 ors distincts sur une seule page. Les quatre rôles, et rien d'autre : · SÉLECTION / état actif → pastille d'encre (var(--ink)) + blanc · ACTION principale → le lingot maison (rampe --or-haut→--or-pied) + --or-encre · MOT doré → var(--or-texte) (jamais --or-decor : 3,7:1) · FILET / halo / picto → var(--or-decor) Le vert reste l'accent UNIQUE du vivant (l'écoute offerte), rien d'autre. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Les mots qui empruntaient l'or CLAIR (23 endroits dans la page) ──────── */ html[data-theme="clair"] .home-entry .he-title, html[data-theme="clair"] .tb-brand .tb-name, html[data-theme="clair"] .cm-head h3, html[data-theme="clair"] .card.playing .card-t, html[data-theme="clair"] .mini-box h3, html[data-theme="clair"] .me-hello, html[data-theme="clair"] .cl-titre, html[data-theme="clair"] .me-section-head .msh-title, html[data-theme="clair"] .me-quick-card .mqc-t, html[data-theme="clair"] .cm-author{ color:var(--ink) !important } html[data-theme="clair"] .home-entry .he-ico, html[data-theme="clair"] .shelf-all:hover, html[data-theme="clair"] .nav-bas button.on, html[data-theme="clair"] .p-btn.share:hover, html[data-theme="clair"] .sg-offer strong, html[data-theme="clair"] .sg-msg.ok, html[data-theme="clair"] .top-row.top-2 .tr-num, html[data-theme="clair"] .top-row.top-3 .tr-num, html[data-theme="clair"] .ctx-opt:hover, html[data-theme="clair"] .ctx-opt:active{ color:var(--or-texte) !important } /* ── SÉLECTION : une seule et même pastille d'encre, partout ──────────────── */ html[data-theme="clair"] .chip.on, html[data-theme="clair"] .top-seg.on, html[data-theme="clair"].vue-emeraude .top-seg.on, html[data-theme="clair"] .loop-opt.on{ background:var(--ink) !important; background-image:none !important; color:#ffffff !important; border-color:transparent !important; box-shadow:none !important; } html[data-theme="clair"] .pk-row.on .pk-case{ background:var(--ink) !important; color:#ffffff !important; border-color:transparent !important; } html[data-theme="clair"] .me-quick-card .mqc-bascule.on{ background:var(--ink) !important; border-color:transparent !important; } html[data-theme="clair"] .top-row.top-1 .tr-num{ color:var(--or-texte) !important; font-weight:700 } /* ── ACTION : le lingot de la maison, une seule rampe ─────────────────────── */ html[data-theme="clair"] .tb-link.tb-join, html[data-theme="clair"] .sg-btn, html[data-theme="clair"] .mini-btn.primary, html[data-theme="clair"] .cm-send, html[data-theme="clair"] .rdvm-cta, html[data-theme="clair"] .track-row:hover .tr-play, html[data-theme="clair"] .track-row.playing .tr-play, html[data-theme="clair"][data-sono-page="fille"] .buy-btn, html[data-theme="clair"][data-sono-page="fille"] .btn:not(.ghost):not(.btn-outline), html[data-theme="clair"][data-sono-page="fille"] .cta, html[data-theme="clair"][data-sono-page="fille"] .pl-mini-btn.primary, html[data-theme="clair"][data-sono-page="fille"] .porte .play-ic{ background:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; background-image:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; color:var(--or-encre) !important; border:0 !important; text-shadow:none !important; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 4px 14px rgba(122,90,22,.22) !important; } html[data-theme="clair"] .tb-link.tb-join:hover, html[data-theme="clair"] .sg-btn:hover, html[data-theme="clair"] .rdvm-cta:hover, html[data-theme="clair"][data-sono-page="fille"] .buy-btn:hover{ box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 7px 20px rgba(122,90,22,.30) !important; } html[data-theme="clair"] .p-play::before{ background:conic-gradient(var(--or-decor) calc(var(--pp,0)*1%), rgba(20,18,15,.10) 0) !important; } html[data-theme="clair"] .card-badge.neuf{ background:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; color:var(--or-encre) !important; border-color:transparent !important; } html[data-theme="clair"][data-sono-page="fille"] .porte.playing .play-ic{ background:var(--ink) !important; color:#fff !important; box-shadow:0 3px 10px rgba(20,18,15,.22) !important; } /* ── LE VERT : l'accent unique du vivant, et rien d'autre ─────────────────── */ html[data-theme="clair"] .sono-quota .sq-dot{ background:#4A7C59 !important } html[data-theme="clair"] .cl-point{ background:var(--or-decor) !important } html[data-theme="clair"] .tb-pastille{ background:var(--ink) !important; color:#fff !important } html[data-theme="clair"] .pk-row.dedans .pk-case{ background:var(--wood-3) !important; color:var(--ink-dim) !important } /* ── Les gris froids qui restaient, réchauffés ────────────────────────────── */ html[data-theme="clair"] .back-btn, html[data-theme="clair"] .top-seg, html[data-theme="clair"] .tb-link, html[data-theme="clair"] .mini-btn, html[data-theme="clair"] .pl-act:hover, html[data-theme="clair"] .loop-opt, html[data-theme="clair"] .me-section-head .msh-link, html[data-theme="clair"] .tr-play, html[data-theme="clair"] .sg-restore-btn, html[data-theme="clair"][data-sono-page="fille"] .btn.ghost, html[data-theme="clair"][data-sono-page="fille"] .btn.btn-outline, html[data-theme="clair"][data-sono-page="fille"] .btn-outline, html[data-theme="clair"][data-sono-page="fille"] .pl-mini-btn{ background:var(--wood-2) !important } html[data-theme="clair"] .back-btn:hover, html[data-theme="clair"] .top-seg:hover, html[data-theme="clair"] .tb-link:hover, html[data-theme="clair"] .mini-btn:hover, html[data-theme="clair"] .loop-opt:hover, html[data-theme="clair"] .me-section-head .msh-link:hover, html[data-theme="clair"] .sg-restore-btn:hover, html[data-theme="clair"][data-sono-page="fille"] .btn.ghost:hover{ background:var(--wood-3) !important } html[data-theme="clair"] .pl-card-cover, html[data-theme="clair"] .pk-cov, html[data-theme="clair"] .p-disc, html[data-theme="clair"] .ctx-head .ch-cover, html[data-theme="clair"] .cl-vig, html[data-theme="clair"] .sc-cover, html[data-theme="clair"][data-sono-page="fille"] .p-disc{ background-color:var(--wood-3) !important } html[data-theme="clair"] .mini-box input, html[data-theme="clair"] .mini-box textarea, html[data-theme="clair"] .cm-form textarea, html[data-theme="clair"] .sg-input{ background:var(--bg-2) !important } html[data-theme="clair"] .track-row:hover{ background:rgba(20,18,15,.035) !important } html[data-theme="clair"] .track-row.playing{ background:rgba(154,123,52,.10) !important } html[data-theme="clair"] .cl-item:hover, html[data-theme="clair"] .pk-row:hover, html[data-theme="clair"] .ctx-opt:hover, html[data-theme="clair"] .pk-plus:hover{ background:rgba(20,18,15,.035) !important } html[data-theme="clair"] .toast{ background:rgba(20,18,15,.94) !important } /* ── Les derniers dégradés dorés écrits EN DUR dans la page ───────────────── */ /* `#fce8b6 → #d9b465` est l'or PÂLE du bois : sur blanc il fait un troisième or. Toutes les pastilles de lecture parlent désormais la langue du lingot. */ html[data-theme="clair"] .card-play, html[data-theme="clair"] .sc-play, html[data-theme="clair"] .rdvm-ico{ background:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; background-image:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; color:var(--or-encre) !important; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 3px 10px rgba(122,90,22,.20) !important; } html[data-theme="clair"] .card-bar i{ background:linear-gradient(90deg,var(--or-pied),var(--or-bas)) !important; } html[data-theme="clair"] .me-avatar{ background-image:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)); } html[data-theme="clair"] .me-avatar.has-photo{ background-image:none } html[data-theme="clair"] .masq-restore{ color:var(--or-texte) !important; border-color:var(--filet) !important } html[data-theme="clair"] .p-btn.voice.active{ color:var(--or-texte) !important; filter:none !important } /* ═══ LES SURVOLS — audit du 12/09 (mesuré élément par élément) ═════════════ */ /* ⛔ Un élément qui RÉAGIT au survol doit être cliquable ; un élément cliquable doit RÉAGIR. Deux manquements mesurés, corrigés ici. */ /* 1. La pastille de filtre ne répondait pas (curseur main, aucun changement). */ html[data-theme="clair"] .chip{ transition:background .2s,border-color .2s,color .2s } html[data-theme="clair"] .chip:not(.on):hover{ background:var(--wood-2) !important; border-color:var(--filet-fort) !important; color:var(--ink) !important; } html[data-theme="clair"] .chip.on:hover{ background:#000 !important } /* 2. Le compteur de « Mon espace » se soulevait comme une carte cliquable — il ne l'est pas. On lui retire le geste plutôt que de promettre un clic qui n'existe pas. */ html[data-theme="clair"] .me-stat:hover{ transform:none !important; border-color:var(--filet) !important; box-shadow:var(--ombre-1) !important; } /* 3. Chaque surface qui change au survol a bien une transition : aucun à-coup. */ html[data-theme="clair"] .cl-item, html[data-theme="clair"] .pk-row, html[data-theme="clair"] .ctx-opt, html[data-theme="clair"] .track-row, html[data-theme="clair"] .pk-plus, html[data-theme="clair"] .foot-legal a, html[data-theme="clair"] .pl-act, html[data-theme="clair"] .msh-link{ transition:background-color .18s ease, color .18s ease, border-color .18s ease } /* 4. Le focus clavier : visible, et de la même encre que le reste. */ html[data-theme="clair"] a:focus-visible, html[data-theme="clair"] button:focus-visible, html[data-theme="clair"] [role="button"]:focus-visible, html[data-theme="clair"] [tabindex]:focus-visible{ outline:2px solid var(--or-decor) !important; outline-offset:2px !important; border-radius:6px; } /* ═══ PASSE POP-UP — ce que l'œil a vu, capture par capture ════════════════ */ /* ⛔ « Publier mon ressenti » restait une PLANCHE DE BOIS à anneau d'argent : il hérite du groupe `.tb-join,.album-cta,.back-btn,.mini-btn.primary,.cm-btn.send` de la page. Ma règle visait `.cm-send`, qui n'existe pas. */ html[data-theme="clair"] .cm-btn.send{ background:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; background-image:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; color:var(--or-encre) !important; border:0 !important; text-shadow:none !important; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 4px 14px rgba(122,90,22,.22) !important; } html[data-theme="clair"] .cm-btn.send::after{ display:none !important } html[data-theme="clair"] .cm-btn.send:hover{ filter:none !important; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 7px 20px rgba(122,90,22,.30) !important } html[data-theme="clair"] .cm-btn.ghost{ border-color:var(--filet-fort) !important; color:var(--ink) !important } html[data-theme="clair"] .cm-btn.ghost:hover{ background:var(--wood-2) !important; border-color:var(--filet-fort) !important; color:var(--ink) !important } html[data-theme="clair"] .cm-head .cm-ico{ filter:none !important; color:var(--or-texte) !important } /* ⛔ DOUBLE EFFET AU FOCUS : la page pose déjà un filet d'or sur le champ actif, et mon `:focus-visible` ajoutait un anneau par-dessus — deux traits dorés concentriques, l'effet « cheap » par excellence. Un champ = UN seul signal. */ html[data-theme="clair"] input:focus-visible, html[data-theme="clair"] textarea:focus-visible, html[data-theme="clair"] select:focus-visible{ outline:none !important } html[data-theme="clair"] input:focus, html[data-theme="clair"] textarea:focus{ border-color:var(--or-decor) !important; box-shadow:0 0 0 2px rgba(154,123,52,.13) !important; } /* Les deux champs du panneau membre portent désormais le même habit. */ html[data-theme="clair"] .sg-input{ background:var(--bg-2) !important; border:1px solid var(--filet) !important; color:var(--ink) !important; text-align:center; } html[data-theme="clair"] .sg-input:focus{ border-color:var(--or-decor) !important } /* Dernier mot resté en or clair : les questions de la FAQ de la page Offre. */ html[data-theme="clair"][data-sono-page="fille"] .faq-q{ color:var(--ink) !important } /* La pastille « appareil photo » de l'avatar : dernier dégradé hors rampe. */ html[data-theme="clair"] .me-avatar .me-av-cam{ background:linear-gradient(180deg,var(--or-mi),var(--or-pied)) !important; color:var(--or-encre) !important; border-color:#fff !important; } /* ── Lisibilité (barème maison, mesuré par mesurer-lisibilite.js) ─────────── */ /* L'invitation du matin était à 5,8:1 : sous le seuil de 7:1 exigé pour un corps. */ html[data-theme="clair"] .rdvm-s{ color:var(--ink-soft) !important } html[data-theme="clair"] .rdvm-t{ color:var(--ink) !important } html[data-theme="clair"] .shelf-s, html[data-theme="clair"] .card-m{ color:var(--ink-dim) !important } html[data-theme="clair"] .feed-sub{ color:var(--ink-soft) !important } html[data-theme="clair"] .tagline{ color:var(--ink-soft) !important } /* ── La barre du bas, sur téléphone : l'élément le plus touché de tous ────── */ /* Elle était restée en bois — fond presque noir sous une page blanche. */ html[data-theme="clair"] .nav-bas{ background:rgba(255,255,255,.94) !important; background-image:none !important; border-top:1px solid var(--filet) !important; box-shadow:0 -4px 22px rgba(20,18,15,.06) !important; -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); } html[data-theme="clair"] .nav-bas button{ color:var(--ink-dim) !important } html[data-theme="clair"] .nav-bas button.on{ color:var(--ink) !important } html[data-theme="clair"] .nav-bas button.on svg{ stroke:var(--or-texte) !important } /* Les libellés étaient à 10,5 px : sous le plancher du barème. */ html[data-theme="clair"] .nav-bas button{ font-size:11.5px } /* ── La pastille « écoute offerte » ───────────────────────────────────────── */ html[data-theme="clair"] .sono-quota.plein{ color:var(--ink) !important; border-color:var(--filet-fort) !important; animation:none !important } html[data-theme="clair"] .sono-quota.epuise{ color:var(--ink-dim) !important } html[data-theme="clair"] .sono-quota .sq-dot{ box-shadow:none !important } /* ═══ CIBLES TACTILES — vaut pour LES DEUX THÈMES ══════════════════════════ */ /* ⛔ Ces règles ne sont PAS sous [data-theme] : une cible trop petite au pouce n'est pas une affaire de couleur. Mesuré au téléphone : boutons du lecteur à 36 px, options de boucle à 36 px, lien du poème à 25 px, retour légal à 33 px. */ @media (max-width:820px), (pointer:coarse){ [data-sono-page="fille"] .p-btn, [data-sono-page="fille"] .p-btn.loop{ width:44px !important; height:44px !important; padding:11px !important } [data-sono-page="fille"] .loop-opt{ min-height:44px; display:flex; align-items:center } [data-sono-page="fille"] .poem-link, [data-sono-page="fille"] .back, [data-sono-page="fille"] .retour, [data-sono-page="fille"] a.alb-back{ min-height:44px; display:inline-flex; align-items:center } [data-sono-page="fille"] .ps a, [data-sono-page="fille"] .sub a{ display:inline-block; padding:10px 4px } } /* ═══ CE QUE MA SONDE AVAIT MANQUÉ : les cartes en TEXTURE ═════════════════ */ /* ⛔ Mon détecteur de surfaces sombres lisait `backgroundColor`. Or une planche de bois est une IMAGE : `background:linear-gradient(...), url(wood-body.jpg)`. La carte « Ton espace parrain » est donc restée un bloc brun au milieu d'une page blanche, titre presque illisible — invisible à la mesure, évidente à l'œil. */ html[data-theme="clair"][data-sono-page="fille"] .gate{ background:#ffffff !important; background-image:none !important; border:1px solid var(--filet) !important; box-shadow:var(--ombre-2) !important; } html[data-theme="clair"][data-sono-page="fille"] .gate-title{ color:var(--ink) !important } html[data-theme="clair"][data-sono-page="fille"] .gate-sub{ color:var(--ink-soft) !important } html[data-theme="clair"][data-sono-page="fille"] .gate-msg{ color:var(--rose) !important } /* Le segmenté Mensuel / Annuel : même grammaire que partout — encre pour l'actif. */ html[data-theme="clair"][data-sono-page="fille"] .plan-toggle{ background:var(--wood-2) !important; border:1px solid var(--filet) !important; } html[data-theme="clair"][data-sono-page="fille"] .pt-opt{ color:var(--ink-dim) !important } html[data-theme="clair"][data-sono-page="fille"] .pt-opt:hover{ color:var(--ink) !important } html[data-theme="clair"][data-sono-page="fille"] .pt-opt.active{ background:var(--ink) !important; background-image:none !important; color:#ffffff !important; box-shadow:none !important; } html[data-theme="clair"][data-sono-page="fille"] .pt-opt.active .pt-save{ background:rgba(255,255,255,.18) !important; color:#fff !important; } /* Le bloc « un trésor de plus » : un aplat gris au milieu de cartes blanches. */ html[data-theme="clair"][data-sono-page="fille"] .lifetime-line{ background:var(--bg-2) !important; border:1px dashed var(--filet-fort) !important; color:var(--ink-soft) !important; } html[data-theme="clair"][data-sono-page="fille"] .lifetime-line b{ color:var(--ink) !important } html[data-theme="clair"][data-sono-page="fille"] .lifetime-line a{ color:var(--or-texte) !important } /* Un bouton SANS CLASSE échappe à toutes les règles nommées : celui de l'espace parrain portait donc sa propre rampe dorée — un cinquième or. */ html[data-theme="clair"][data-sono-page="fille"] .gate button{ background:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; background-image:linear-gradient(180deg,var(--or-haut),var(--or-mi) 42%,var(--or-bas) 72%,var(--or-pied)) !important; color:var(--or-encre) !important; border:0 !important; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 4px 14px rgba(122,90,22,.22) !important; } html[data-theme="clair"][data-sono-page="fille"] .gate input{ background:var(--bg-2) !important; border:1px solid var(--filet) !important; color:var(--ink) !important; } /* ═══════════════════════════════════════════════════════════════════════════ LA MATIÈRE — ce qui manquait vraiment (12/09/2026, soir) Maha : « que ferait un génie pour améliorer encore l'esthétique ? » Regardée à l'œil, la page était propre et VIDE : un aplat parfaitement lisse. Le thème clair avait jeté le bois sans rien mettre à la place — or la maison a une identité (or, marbre, lumière), et « le marbre se sent, il ne se voit pas ». Quatre couches, aucune au-dessus de 4 %. ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="clair"]::before{ background: /* 1. la lumière : une seule source, haute et légèrement à gauche */ radial-gradient(ellipse 120% 80% at 32% -12%, #FFFFFF 0%, rgba(255,255,255,0) 58%), /* 2. la chaleur : un souffle d'or au centre, très bas en intensité */ radial-gradient(ellipse 90% 55% at 50% 22%, rgba(201,162,83,.055), transparent 66%), /* 3. l'assise : la page s'appuie sur une ombre chaude en bas */ radial-gradient(ellipse 100% 45% at 50% 108%, rgba(122,97,38,.07), transparent 70%), /* 4. la pierre : le dégradé chaud de la maison */ linear-gradient(178deg, #FFFDF9 0%, #F9F7F2 38%, #F5F2EC 100%) !important; } /* Le GRAIN — c'est lui qui fait le papier plutôt que le plastique. 2,8 %. */ html[data-theme="clair"] body::after{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } /* ⛔ Le grain est en `position:fixed` : seul le CONTENU a besoin de passer devant. Ma première version posait aussi `z-index:1` sur la barre du haut, le lecteur et la barre du bas — ça ÉCRASAIT leur z-index (880-900) et la pastille d'écoute est passée par-dessus la barre. Un z-index ne se pose que là où il manque. */ html[data-theme="clair"] .wrap{ position:relative; z-index:1 } /* ── LES OMBRES : une feuille posée, pas une bulle ────────────────────────── */ /* Elles étaient larges et diffuses (26 px de flou) : les cartes flottaient dans un halo. Une ombre premium est COURTE, et c'est le filet qui dessine le bord. */ html[data-theme="clair"]{ --ombre-1:0 1px 1px rgba(20,18,15,.04), 0 1px 3px rgba(20,18,15,.05); --ombre-2:0 1px 1px rgba(20,18,15,.04), 0 2px 6px rgba(20,18,15,.05), 0 8px 16px -8px rgba(20,18,15,.10); } html[data-theme="clair"] .card, html[data-theme="clair"] .sc, html[data-theme="clair"] .pl-card, html[data-theme="clair"] .me-quick-card, html[data-theme="clair"] .me-stat, html[data-theme="clair"] .rdvm-card{ box-shadow:var(--ombre-2) !important } html[data-theme="clair"] .card:hover, html[data-theme="clair"] .sc:hover, html[data-theme="clair"] .pl-card:hover, html[data-theme="clair"] .me-quick-card:hover{ box-shadow:0 1px 1px rgba(20,18,15,.04), 0 4px 10px rgba(20,18,15,.06), 0 16px 28px -14px rgba(20,18,15,.16) !important; } /* ── LE RAYON : l'image épouse le coin de la carte ────────────────────────── */ /* La vignette carrée collée dans une carte arrondie dépassait du rayon en haut à gauche — le détail qui dit « bricolé ». */ html[data-theme="clair"] .sc{ border-radius:14px !important } html[data-theme="clair"] .sc-cover{ border-radius:13px 0 0 13px } /* ── L'ALIGNEMENT : la carte du matin rejoint la grille ───────────────────── */ /* Elle était centrée sur 760 px pendant que tout le reste suit la largeur de la page : elle démarrait 350 px plus à droite que la première carte. */ html[data-theme="clair"] .rdv-matin{ max-width:none !important; margin:0 0 40px !important; padding:0 !important } /* ═══ L'ACCORD — la lumière de la page prend la couleur de ce qu'on écoute ══ Le geste qui relie la page à la musique. Le halo du fond se teinte, très bas, de la couleur dominante de la pochette en cours. Imperceptible si on cherche, évident si on écoute : la page respire avec le morceau. ⛔ Jamais plus de 6 % : au-delà, ça devient une ambiance de discothèque. */ html[data-theme="clair"]{ --accord:201,162,83; --accord-force:0; transition:none } html[data-theme="clair"]::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(ellipse 110% 62% at 50% 8%, rgba(var(--accord), calc(.075 * var(--accord-force))), transparent 68%); transition:background 1.6s cubic-bezier(.4,0,.2,1); } /* ═══ L'ENTRÉE EN SCÈNE — chaque rangée se pose au lieu d'apparaître ═══════ */ @media (prefers-reduced-motion:no-preference){ html[data-theme="clair"] .shelf[data-entree]{ opacity:0; transform:translateY(14px) } html[data-theme="clair"] .shelf[data-entree].posee{ opacity:1; transform:none; transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1); } } /* ═══════════════════════════════════════════════════════════════════════════ TROIS DÉFAUTS PUREMENT ESTHÉTIQUES (12/09/2026, mesurés) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LA DOUBLE TITRAILLE ─────────────────────────────────────────────── Deux titres en Cormorant se disputaient le haut de page : « La musique te met en harmonie » 34 px / 500 « Bel après-midi » 44 px / 700, 117 px plus bas Deux serif, deux grandes tailles, l'un sous l'autre : le second écrase le premier et l'œil ne sait plus qui parle. La signature de la maison RECULE — elle reste, mais à mi-voix — et la salutation du jour prend la parole. */ html[data-theme="clair"] .hero h1, html[data-theme="clair"] body.feed-on .hero h1{ font-size:clamp(1.35rem, 2.1vw, 1.62rem) !important; font-weight:500 !important; letter-spacing:.005em; line-height:1.32 !important; color:var(--ink-soft) !important; } html[data-theme="clair"] .hero h1 .gold-word{ color:var(--or-texte) !important } html[data-theme="clair"] .hero .tagline{ font-size:17px !important; color:var(--ink-dim) !important } html[data-theme="clair"] .feed-hello{ letter-spacing:-.012em } /* ── 2. LES RAYONS : dix valeurs différentes sur une même page ──────────── 50%, 14, 10, 999, 9, 13, 12, 18, 8, 20 px. C'est du bruit : un système tient sur TROIS rayons, plus le cercle et la pilule. */ html[data-theme="clair"] .card, html[data-theme="clair"] .sc, html[data-theme="clair"] .pl-card, html[data-theme="clair"] .me-quick-card, html[data-theme="clair"] .me-stat, html[data-theme="clair"] .rdvm-card, html[data-theme="clair"] .cloche-panneau, html[data-theme="clair"] .mini-box, html[data-theme="clair"] .ctx-sheet, html[data-theme="clair"] .sono-gate-card, html[data-theme="clair"] .pk-liste, html[data-theme="clair"] .cm-item, html[data-theme="clair"][data-sono-page="fille"] .gate, html[data-theme="clair"][data-sono-page="fille"] .buy-card, html[data-theme="clair"][data-sono-page="fille"] .porte{ border-radius:16px !important } html[data-theme="clair"] .sc{ border-radius:16px !important } html[data-theme="clair"] .sc-cover{ border-radius:15px 0 0 15px !important } html[data-theme="clair"] .card-art, html[data-theme="clair"] .tr-cover, html[data-theme="clair"] .pk-cov, html[data-theme="clair"] .cl-vig, html[data-theme="clair"] .ctx-head .ch-cover, html[data-theme="clair"] .pl-card-cover, html[data-theme="clair"] .mini-box input, html[data-theme="clair"] .mini-box textarea, html[data-theme="clair"] .cm-form textarea, html[data-theme="clair"] .cl-item, html[data-theme="clair"] .pk-row, html[data-theme="clair"] .ctx-opt, html[data-theme="clair"] .loop-opt{ border-radius:10px !important } html[data-theme="clair"] .pk-case{ border-radius:7px !important } /* ── 3. LA LIGNE DE PISTE TRAVERSAIT UN DÉSERT ─────────────────────────── Mesuré à 1512 px : la ligne fait 1224 px de large, le titre s'étire sur 752 px, et l'œil doit franchir tout ça pour relier un morceau à sa durée. On borne la MESURE de la liste — comme une colonne de texte. Le vide gagné sur les côtés n'est pas perdu : c'est lui qui fait respirer. */ @media (min-width:1180px){ /* ⛔ Borner la liste sans borner ce qui la surplombe crée DEUX axes : le titre restait centré sur la page pendant que la colonne l'était ailleurs, et le bouton Retour partait 94 px plus à gauche que la première ligne. ⛔ Et surtout : NE PAS passer le conteneur en `display:flex` pour y arriver — mon premier essai a fait retomber la liste à 548 px de large. On borne, on centre, et on décale le bouton du même calcul. Rien d'autre ne bouge. */ html[data-theme="clair"] .playlist-view .tracks, html[data-theme="clair"] .playlist-view #plTools, html[data-theme="clair"] .playlist-view .biblio-chips, html[data-theme="clair"] .playlist-view .top-periods, html[data-theme="clair"] .playlist-view .pl-hero{ max-width:1080px; margin-left:auto; margin-right:auto; } html[data-theme="clair"] .playlist-view > .back-btn{ margin-left:max(0px, calc((100% - 1080px) / 2)); } } /* ═══════════════════════════════════════════════════════════════════════════ LE DÉTAIL — ce qu'on regarde cent fois par jour (12/09/2026, mesuré à 4×) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LE POIDS DES ICÔNES DU LECTEUR ──────────────────────────────────── Mesuré : shuffle 1,9 · boucle 2,0 · j'aime 2,0 · je n'aime pas 1,8 · partage 2,0 — cinq icônes de MÊME TAILLE (22 px) avec quatre épaisseurs différentes. Invisible une par une, sensible en rangée : ça fait « assemblé ». Les icônes de transport (précédent / lecture / suivant) restent PLEINES — c'est la convention, et elle porte l'action principale. */ html[data-theme="clair"] .p-right svg path[fill="none"], html[data-theme="clair"] .p-right svg circle[fill="none"], html[data-theme="clair"] .p-right svg rect[fill="none"], html[data-theme="clair"] .p-right svg path:not([fill]), html[data-theme="clair"] #bShuffle svg path, html[data-theme="clair"] #bLoop svg path, html[data-theme="clair"] #bLike svg path, html[data-theme="clair"] #bDislike svg path, html[data-theme="clair"] #bShare svg path, html[data-theme="clair"] #bShare svg circle, html[data-theme="clair"] #bShare svg line{ stroke-width:1.9px } /* Les icônes de la barre du haut : une seule épaisseur, elles sont côte à côte. */ html[data-theme="clair"] .tb-link svg path[fill="none"], html[data-theme="clair"] .tb-link svg path:not([fill]), html[data-theme="clair"] .tb-link svg circle[fill="none"]{ stroke-width:1.7px } /* ── 2. LE HALO BLANC AUTOUR DU BOUTON DE LECTURE ───────────────────────── L'anneau de progression était posé à −5 px : entre la boule d'or et l'anneau restait une bande claire qui, sur fond ivoire, se lisait comme un liseré blanc — la boule paraissait découpée et collée. L'anneau épouse la boule. */ html[data-theme="clair"] .p-play::before{ inset:-3.5px !important; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.6px),#000 calc(100% - 2.2px)) !important; mask:radial-gradient(farthest-side,transparent calc(100% - 2.6px),#000 calc(100% - 2.2px)) !important; } /* ── 3. LA PASTILLE DE LA CLOCHE ────────────────────────────────────────── Elle était en encre : un point noir dur sur une page ivoire. Une notification n'est pas une SÉLECTION, c'est du VIVANT — elle prend l'accent du vivant. */ html[data-theme="clair"] .tb-pastille{ background:#4A7C59 !important; color:#fff !important; box-shadow:0 0 0 2px var(--bg-0) !important; } /* ── 4. LE CERCLE DU BOUTON DE LECTURE D'UNE LIGNE ──────────────────────── Son filet était à peine visible : le bouton n'existait qu'au survol. */ html[data-theme="clair"] .tr-play{ border-color:var(--filet-fort) !important } /* ═══════════════════════════════════════════════════════════════════════════ LE TRAIT DES ICÔNES — une épaisseur d'ÉCRAN, pas une épaisseur de viewBox Relevé sur les 11 pages : de 0,73 px à 1,74 px réels. Les petites icônes (9-12 px) tombaient à 0,73-0,98 px : elles s'effacent, et la rangée paraît « assemblée » sans qu'on sache dire pourquoi. ⛔ La cause : `stroke-width` s'exprime dans les unités du viewBox. Le même « 1.5 » donne 1,5 px dans un viewBox 12 affiché en 12 px, et 0,75 px dans un viewBox 24 affiché en 12 px. `vector-effect:non-scaling-stroke` fait passer l'épaisseur en unités d'ÉCRAN : une seule valeur, un seul poids. ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="clair"] .ico path, html[data-theme="clair"] .ico circle, html[data-theme="clair"] .ico rect, html[data-theme="clair"] .ico line, html[data-theme="clair"] .tbl-ico path, html[data-theme="clair"] .tbl-ico circle, html[data-theme="clair"] .p-btn svg path, html[data-theme="clair"] .p-btn svg circle, html[data-theme="clair"] .p-btn svg line, html[data-theme="clair"] .p-btn svg rect, html[data-theme="clair"] .card-play svg path, html[data-theme="clair"] .sc-play svg path, html[data-theme="clair"] .co-ico svg path, html[data-theme="clair"] .co-ico svg circle, html[data-theme="clair"] .mqc-ico svg path, html[data-theme="clair"] .mqc-ico svg circle, html[data-theme="clair"] .cl-vig svg path, html[data-theme="clair"] .cl-vig svg circle, html[data-theme="clair"] .nav-bas svg path, html[data-theme="clair"] .nav-bas svg circle, html[data-theme="clair"] .pk-loupe path, html[data-theme="clair"] .pk-loupe circle, html[data-theme="clair"] .ss-ico path, html[data-theme="clair"] .ss-ico circle, html[data-theme="clair"] .rdvm-x svg path, html[data-theme="clair"] .ctx-quit svg path, html[data-theme="clair"] .cl-quit svg path, html[data-theme="clair"] .pk-quit svg path, html[data-theme="clair"][data-sono-page="fille"] .play-ic svg path, html[data-theme="clair"][data-sono-page="fille"] .play-ic svg rect{ vector-effect:non-scaling-stroke } /* Trois classes de taille, trois poids — et rien d'autre. */ html[data-theme="clair"] .ico path[fill="none"], html[data-theme="clair"] .ico circle[fill="none"], html[data-theme="clair"] .ico rect[fill="none"], html[data-theme="clair"] .ico line, html[data-theme="clair"] .co-ico svg path[fill="none"], html[data-theme="clair"] .co-ico svg circle[fill="none"], html[data-theme="clair"] .rdvm-x svg path, html[data-theme="clair"] .ctx-quit svg path, html[data-theme="clair"] .cl-quit svg path, html[data-theme="clair"] .pk-quit svg path, html[data-theme="clair"] .card-play svg path[fill="none"], html[data-theme="clair"] .sc-play svg path[fill="none"]{ stroke-width:1.45px } html[data-theme="clair"] .tbl-ico path, html[data-theme="clair"] .tbl-ico circle, html[data-theme="clair"] .mqc-ico svg path[fill="none"], html[data-theme="clair"] .mqc-ico svg circle[fill="none"], html[data-theme="clair"] .cl-vig svg path[fill="none"], html[data-theme="clair"] .cl-vig svg circle[fill="none"], html[data-theme="clair"] .pk-loupe path, html[data-theme="clair"] .pk-loupe circle, html[data-theme="clair"] .ss-ico path, html[data-theme="clair"] .ss-ico circle{ stroke-width:1.55px } html[data-theme="clair"] .p-btn svg path[fill="none"], html[data-theme="clair"] .p-btn svg circle[fill="none"], html[data-theme="clair"] .p-btn svg line, html[data-theme="clair"] .nav-bas svg path, html[data-theme="clair"] .nav-bas svg circle{ stroke-width:1.75px } /* ── LES RAYONS DES PAGES FILLES ────────────────────────────────────────── Le relevé global en montrait encore treize valeurs (16, 10, 99, 999, 14, 8, 12, 15, 20, 13, 40, 28, 22). Les pages filles n'avaient pas été normalisées. */ html[data-theme="clair"][data-sono-page="fille"] .buy-card, html[data-theme="clair"][data-sono-page="fille"] .step, html[data-theme="clair"][data-sono-page="fille"] .card, html[data-theme="clair"][data-sono-page="fille"] .box, html[data-theme="clair"][data-sono-page="fille"] .panel, html[data-theme="clair"][data-sono-page="fille"] .faq-i, html[data-theme="clair"][data-sono-page="fille"] .lifetime-line, html[data-theme="clair"][data-sono-page="fille"] .cap-item, html[data-theme="clair"][data-sono-page="fille"] .pl-mini-box, html[data-theme="clair"][data-sono-page="fille"] .pl-sheet, html[data-theme="clair"][data-sono-page="fille"] .hero-cover{ border-radius:16px !important } html[data-theme="clair"][data-sono-page="fille"] .track, html[data-theme="clair"][data-sono-page="fille"] .pl-track, html[data-theme="clair"][data-sono-page="fille"] input, html[data-theme="clair"][data-sono-page="fille"] textarea, html[data-theme="clair"][data-sono-page="fille"] .pl-opt{ border-radius:10px !important } html[data-theme="clair"][data-sono-page="fille"] .meta span, html[data-theme="clair"][data-sono-page="fille"] .eyebrow, html[data-theme="clair"][data-sono-page="fille"] .btn, html[data-theme="clair"][data-sono-page="fille"] .cta, html[data-theme="clair"][data-sono-page="fille"] .buy-btn, html[data-theme="clair"][data-sono-page="fille"] .alb-back, html[data-theme="clair"][data-sono-page="fille"] .back{ border-radius:999px !important } /* La « porte » de la page Confidentialité est un bloc de deux lignes (un titre puis un ``) : ce n'est pas une rangée, il n'y a rien à recentrer. Mon détecteur d'alignement mesurait un faux positif. */ /* ── LES DERNIERS RAYONS DISPERSÉS, page par page ───────────────────────── Relevé sur les 11 pages : 8, 12, 13, 14, 15, 20, 22, 28 px traînaient encore. Trois valeurs suffisent : 999 (pilule), 16 (surface), 10 (élément). */ html[data-theme="clair"] #tbCloche, html[data-theme="clair"] #tbHearts{ border-radius:999px !important } html[data-theme="clair"] #waveEl{ border-radius:10px !important } html[data-theme="clair"] #loopMenu{ border-radius:16px !important } html[data-theme="clair"] #toast{ border-radius:16px !important } html[data-theme="clair"][data-sono-page="fille"] #toast{ border-radius:16px !important } html[data-theme="clair"][data-sono-page="fille"] .ribbon{ border-radius:999px !important } html[data-theme="clair"][data-sono-page="fille"] .dl-btn, html[data-theme="clair"][data-sono-page="fille"] #gGo{ border-radius:999px !important } html[data-theme="clair"][data-sono-page="fille"] .poem-link{ border-radius:10px !important } html[data-theme="clair"][data-sono-page="fille"] main.feuille, html[data-theme="clair"][data-sono-page="fille"] .qr-wrap, html[data-theme="clair"][data-sono-page="fille"] .encadre{ border-radius:16px !important } html[data-theme="clair"][data-sono-page="fille"] .feuille li, html[data-theme="clair"][data-sono-page="fille"] img.icon-app{ border-radius:10px !important } /* La cloche et le cœur devenus des pilules, ils doivent tenir la même largeur que leurs voisins « Les Livres » et « Classement ». */ html[data-theme="clair"] #tbCloche, html[data-theme="clair"] #tbHearts{ min-width:48px; justify-content:center } html[data-theme="clair"][data-sono-page="fille"] .qr-wrap img{ border-radius:10px !important } /* ── LE LISERÉ CRÈME AUTOUR DE LA BOULE DE LECTURE ──────────────────────── L'image du bouton porte sa propre marge claire. Cadrée à 132 %, cette marge restait visible : sur fond ivoire elle se lisait comme un halo blanc, et la boule paraissait découpée et collée. Comparé à 132 / 150 / 168 % à l'œil : à 150 % la boule remplit son cercle en gardant son biseau. */ html[data-theme="clair"] .p-play{ background-size:150% !important } /* ═══════════════════════════════════════════════════════════════════════════ LES MICRO-DÉTAILS (12/09/2026) — relevés, pas devinés ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LA SÉLECTION DE TEXTE ───────────────────────────────────────────── Elle n'était pas définie : le navigateur peignait donc son BLEU système au milieu d'une page ivoire et or. Un corps étranger, et personne ne le voit avant d'avoir sélectionné un mot. */ html[data-theme="clair"] ::selection{ background:rgba(201,162,83,.30); color:var(--ink) } html[data-theme="clair"] ::-moz-selection{ background:rgba(201,162,83,.30); color:var(--ink) } /* ── 2. LES DURÉES DE TRANSITION ────────────────────────────────────────── Neuf valeurs relevées : .18 · .2 · .22 · .25 · .28 · .3 · .4 · .55 · .62 s. Une main sent la différence entre 0,22 et 0,25 s sans savoir la nommer : les gestes ne « répondent » pas pareil d'un bouton à l'autre. Trois suffisent. */ html[data-theme="clair"] .chip, html[data-theme="clair"] .tb-link, html[data-theme="clair"] .tr-like, html[data-theme="clair"] .tr-add, html[data-theme="clair"] .tr-menu, html[data-theme="clair"] .p-btn, html[data-theme="clair"] .ctx-opt, html[data-theme="clair"] .cl-item, html[data-theme="clair"] .pk-row, html[data-theme="clair"] .mini-btn, html[data-theme="clair"] .top-seg, html[data-theme="clair"] .pl-act, html[data-theme="clair"] .msh-link, html[data-theme="clair"] .loop-opt, html[data-theme="clair"] .ctx-quit, html[data-theme="clair"] .cl-quit, html[data-theme="clair"] .pk-quit, html[data-theme="clair"] .rdvm-x{ transition-duration:.18s !important } html[data-theme="clair"] .card, html[data-theme="clair"] .sc, html[data-theme="clair"] .pl-card, html[data-theme="clair"] .me-quick-card, html[data-theme="clair"] .me-stat, html[data-theme="clair"] .rdvm-card, html[data-theme="clair"] .track-row, html[data-theme="clair"] .back-btn, html[data-theme="clair"] .tr-play, html[data-theme="clair"] .mqc-bascule, html[data-theme="clair"] .sono-quota{ transition-duration:.25s !important } /* ── 3. LES CARTELS EN CAPITALES ────────────────────────────────────────── Relevé : « Tout afficher » 12 px / 1,56 px · « Sonothèque Giri » 10 px / 3,2 px · « Écouter en boucle » 10 px / 1,8 px. Le barème de la maison dit 14 px, `letter-spacing:.16em`, graisse 700, et jamais sous 13 px : une capitale fine et espacée est déjà un handicap de lecture. */ html[data-theme="clair"] .shelf-all, html[data-theme="clair"] .loop-menu-title, html[data-theme="clair"] .ctx-section-label, html[data-theme="clair"] .pk-groupe, html[data-theme="clair"] .card-badge.neuf, html[data-theme="clair"] .foot-legal{ font-size:13px !important; letter-spacing:.14em !important; font-weight:700 !important; } html[data-theme="clair"] .foot-legal{ font-weight:500 !important; letter-spacing:.08em !important } html[data-theme="clair"] .brand-line .brand-name{ font-size:13px !important; letter-spacing:.34em !important } /* La pastille de lecture d'une carte (présente 47 fois) était à .28 s quand sa carte répond en .25 s : le bouton et son support ne bougeaient pas ensemble. */ html[data-theme="clair"] .card-play, html[data-theme="clair"] .sc-play{ transition-duration:.25s !important } html[data-theme="clair"] .shelf-all, html[data-theme="clair"] .tb-avatar{ transition-duration:.18s !important }