/* bounce — DA : noir studio, papier, une seule touche rouge (le voyant REC). La couleur de chaque écran vient de sa pochette (--dyn). */
:root {
  --bg: #0B0B0C; --ink: #F2F0EC; --rec: #FF3B2F; --card: #19191B; --card2: #232326; --mute: #9A9792; --line: #2A2A2D;
  --dyn: #3a1512; --rec-sombre: #3a1512; --sur-rec: #0B0B0C;
  --police: Archivo; --large: 125%; --casse: none;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --ressort: cubic-bezier(.34, 1.45, .64, 1); --doux: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--ink); font: 15px/1.45 Geist, system-ui, sans-serif; overflow-x: clip; touch-action: pan-x pan-y; }
body { overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; font-size: 16px; } /* 16 px : l'iPhone ne zoome pas */
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; -webkit-user-drag: none; -webkit-touch-callout: none; } /* SOP Lessgo §25 : pas d'enregistrement par appui long */
[hidden]:not(.mini) { display: none !important; } /* SOP Lessgo §27 : un display de classe écrase sinon l'attribut hidden */
:focus-visible { outline: 2px solid var(--rec); outline-offset: 2px; border-radius: 4px; }
.mute { color: var(--mute); }
.large { font-family: var(--police); font-stretch: var(--large); letter-spacing: -.025em; }
.appui { transition: transform .18s var(--doux), opacity .18s; }
.appui:active { transform: scale(.96); opacity: .85; }

/* ---------- Mise en page ---------- */
main { position: relative; padding: 0 16px calc(160px + var(--safe-b)); max-width: 1180px; margin: 0 auto; min-height: 100vh; }
.fond-dyn { position: absolute; left: 0; right: 0; top: 0; height: 420px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--dyn) 0%, color-mix(in srgb, var(--dyn) 45%, var(--bg)) 45%, var(--bg) 100%); transition: background .6s; }
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around;
  padding: 26px 0 calc(6px + var(--safe-b)); background: linear-gradient(transparent, #0B0B0Cee 38%, var(--bg)); }
.nav a { color: var(--mute); text-decoration: none; font-size: 10.5px; text-align: center; min-width: 64px; transition: color .2s; }
.nav a.on { color: var(--ink); }
.nav svg { display: block; margin: 0 auto 3px; width: 25px; height: 25px; }
.nav a.on svg { animation: rebond .45s var(--ressort); }
@keyframes rebond { 40% { transform: translateY(-4px) scale(1.08); } }
.nav .marque { display: none; }
@media (min-width: 900px) {
  .nav { top: 0; right: auto; width: 240px; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 26px 12px; background: #000; }
  .nav a { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; padding: 10px 12px; border-radius: 8px; }
  .nav a:hover { color: var(--ink); background: #ffffff08; }
  .nav svg { margin: 0; }
  .nav .marque { display: flex; align-items: center; gap: 10px; padding: 0 10px 22px; font: 900 25px var(--police); font-stretch: var(--large); letter-spacing: -.035em; }
  .nav .marque img { width: 34px; height: 34px; border-radius: 9px; }
  main { margin-left: 240px; padding: 0 40px 140px; max-width: none; }
  .fond-dyn { height: 380px; }
}

/* Barre du haut qui apparaît au défilement (titre de la page sur la couleur de sa pochette) */
.barre-haut { position: fixed; z-index: 15; left: 0; right: 0; top: 0; height: calc(var(--safe-t) + 56px); padding: var(--safe-t) 56px 0;
  display: flex; align-items: center; justify-content: center; font: 800 16px var(--police); font-stretch: var(--large);
  background: color-mix(in srgb, var(--dyn) 80%, #000); opacity: 0; pointer-events: none; transition: opacity .2s; }
.barre-haut.vue { opacity: 1; }
.barre-haut span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .barre-haut { left: 240px; } }

/* ---------- Accueil ---------- */
.entete { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--safe-t) + 22px) 0 14px; }
.entete h1 { font: 900 28px/1.05 var(--police); font-stretch: var(--large); letter-spacing: -.035em; }
.entete img { width: 34px; height: 34px; border-radius: 9px; }
.puces { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.puces::-webkit-scrollbar { display: none; }
.puce { flex: none; font-size: 13.5px; padding: 7px 15px; border-radius: 99px; background: #ffffff14; } /* SOP Lessgo §12 : pas de flou sur ce qui défile */
.puce.on { background: var(--rec); color: var(--bg); font-weight: 700; }
.raccourcis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .raccourcis { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.raccourci { position: relative; display: flex; align-items: center; gap: 10px; background: #ffffff12; border-radius: 6px; overflow: hidden; height: 56px;
  font-size: 13px; font-weight: 700; text-align: left; }
.raccourci:hover { background: #ffffff1f; }
.raccourci .pochette { width: 56px; height: 56px; border-radius: 0; flex: none; box-shadow: 4px 0 14px #0006; }
.raccourci > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 26px; line-height: 1.25; }
.raccourci .eq { position: absolute; right: 9px; top: 50%; translate: 0 -50%; }

/* Grande carte « reprendre » */
.reprise { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px; border-radius: 12px; width: 100%; text-align: left;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c, var(--rec-sombre)) 85%, #000), #151517 90%); overflow: hidden; }
.reprise .pochette { width: 92px; height: 92px; border-radius: 6px; flex: none; box-shadow: 0 10px 24px #0008; }
.reprise small { color: #ffffffa6; font-size: 12px; text-transform: none; }
.reprise b { display: block; font: 800 19px/1.15 var(--police); font-stretch: var(--large); letter-spacing: -.02em; margin: 2px 0 3px; }
.reprise .lire { margin-left: auto; width: 46px; height: 46px; }
.reprise .lire svg { width: 20px; height: 20px; }

.sec { display: flex; align-items: baseline; justify-content: space-between; font: 900 21px/1.15 var(--police); font-stretch: var(--large); letter-spacing: -.03em; margin: 30px 0 14px; }
.sec a { font: 600 13px Geist; color: var(--mute); text-decoration: none; letter-spacing: 0; }
.rangee { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; scroll-snap-type: x mandatory; }
.rangee::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .rangee { margin: 0; padding: 0 0 4px; scroll-padding: 0; } }
.carte { width: 148px; flex: none; text-align: left; font-size: 13px; scroll-snap-align: start; }
.carte .pochette { width: 148px; height: 148px; margin-bottom: 9px; box-shadow: 0 8px 22px #0007; }
.carte b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.carte small { color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte.artiste { width: 120px; text-align: center; }
.carte.artiste .pochette { width: 120px; height: 120px; border-radius: 50%; }
@media (min-width: 900px) { .carte { width: 180px; } .carte .pochette { width: 180px; height: 180px; } }

/* ---------- Pochettes ---------- */
.pochette { position: relative; border-radius: 6px; overflow: hidden; background: #222 center / cover no-repeat; flex: none; }
.pochette img { width: 100%; height: 100%; object-fit: cover; }
.pochette .titre-p { position: absolute; left: 0; right: 0; bottom: 0; padding: 9% 9% 8%; font: 900 clamp(11px, 12cqw, 34px)/.95 var(--police); font-stretch: var(--large);
  letter-spacing: -.035em; color: #fff; text-shadow: 0 2px 14px #0009; background: linear-gradient(transparent, #0008); word-break: break-word; }
.pochette { container-type: inline-size; }
.pochette .bande { position: absolute; left: 0; top: 0; width: 5%; height: 100%; background: var(--rec); opacity: .9; }
.pochette.mosaique { display: grid; grid-template-columns: 1fr 1fr; }
.pochette.mosaique img { width: 100%; height: 100%; aspect-ratio: 1; }
.pochette.likes { background: linear-gradient(135deg, var(--rec), var(--rec-sombre)); display: grid; place-items: center; color: #fff; }
.pochette.likes svg { width: 42%; height: 42%; }

/* ---------- Listes de sons ---------- */
.sons { list-style: none; }
.son { display: flex; align-items: center; gap: 12px; padding: 7px 0; cursor: pointer; border-radius: 6px; }
@media (hover: hover) { .son:hover { background: #ffffff0a; } }
.son .num { width: 20px; text-align: center; color: var(--mute); font-size: 14px; font-variant-numeric: tabular-nums; flex: none; }
.son .pochette { width: 50px; height: 50px; border-radius: 4px; }
.son .infos { flex: 1; min-width: 0; }
.son .infos b { display: flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.son .infos small { color: var(--mute); font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.son.joue .infos b { color: var(--rec); }
.son .duree { color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.btn-icone { width: 42px; height: 42px; display: grid; place-items: center; color: var(--mute); border-radius: 50%; flex: none; transition: color .15s, transform .2s var(--doux); }
.btn-icone:hover { color: var(--ink); }
.btn-icone:active { transform: scale(.88); }
.btn-icone svg { width: 23px; height: 23px; }
.aime { color: var(--rec) !important; }

/* L'égaliseur qui danse sur le son en cours */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; flex: none; }
.eq i { width: 3px; height: 100%; background: var(--rec); border-radius: 1px; transform-origin: bottom; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
body.pause .eq i { animation-play-state: paused; }

/* ---------- Page d'une playlist / d'un artiste ---------- */
.retour { position: fixed; z-index: 16; top: calc(var(--safe-t) + 8px); left: 8px; width: 40px; height: 40px; border-radius: 50%; background: #0007; color: var(--ink);
  display: grid; place-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.retour svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .retour { left: 256px; } }
.tete { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: calc(var(--safe-t) + 58px); }
.tete .pochette { width: min(62vw, 250px); height: min(62vw, 250px); box-shadow: 0 22px 60px #000b; border-radius: 4px; }
.tete .pochette.ronde { border-radius: 50%; }
.tete-infos { align-self: stretch; }
.tete-infos h1 { font: 900 30px/1.02 var(--police); font-stretch: var(--large); letter-spacing: -.035em; word-break: break-word; }
.tete-infos .meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: #ffffffb3; font-size: 13px; }
.tete-infos .meta img { width: 22px; height: 22px; border-radius: 50%; }
@media (min-width: 900px) {
  .tete { flex-direction: row; align-items: flex-end; gap: 28px; padding-top: 90px; }
  .tete .pochette { width: 232px; height: 232px; }
  .tete-infos h1 { font-size: clamp(40px, 6vw, 84px); }
}
.actions { display: flex; align-items: center; gap: 4px; margin: 14px -8px 12px; }
.lire { width: 56px; height: 56px; border-radius: 50%; background: var(--rec); color: var(--sur-rec); display: grid; place-items: center; margin-left: auto;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--rec) 25%, transparent); transition: transform .2s var(--ressort); flex: none; }
.lire:hover { transform: scale(1.05); }
.lire:active { transform: scale(.92); }
.lire svg { width: 24px; height: 24px; }

/* ---------- Boutons, champs ---------- */
.btn { display: inline-block; padding: 12px 22px; border-radius: 99px; background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; transition: transform .2s var(--ressort); }
.btn:active { transform: scale(.95); }
.btn.sec2 { background: transparent; color: var(--ink); border: 1px solid #ffffff3a; }
.btn.rouge { background: var(--rec); color: var(--bg); }
.champ { width: 100%; padding: 13px 14px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.champ:focus { outline: none; border-color: var(--ink); }
.recherche { position: sticky; top: calc(var(--safe-t) + 8px); z-index: 5; margin: 0 0 8px; }
.recherche .champ { padding-left: 46px; background: var(--ink); color: var(--bg); font-weight: 500; border: 0; }
.recherche svg { position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; color: var(--bg); }

/* Grille « Parcourir » de la recherche */
.parcourir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .parcourir { grid-template-columns: repeat(4, 1fr); } }
.tuile { position: relative; height: 100px; border-radius: 8px; overflow: hidden; padding: 12px; text-align: left; font: 800 17px/1.05 var(--police); font-stretch: var(--large); letter-spacing: -.02em; }
.tuile .pochette { position: absolute; width: 66px; height: 66px; right: -10px; bottom: -6px; rotate: 25deg; box-shadow: -4px 4px 14px #0007; border-radius: 4px; }

/* ---------- Ajouter des sons ---------- */
.page-titre { font: 900 28px/1.05 var(--police); font-stretch: var(--large); letter-spacing: -.035em; padding-top: calc(var(--safe-t) + 22px); }
.depot { position: relative; display: block; border-radius: 18px; padding: 34px 20px 30px; text-align: center; cursor: pointer; margin: 18px 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, var(--rec-sombre) 0%, #151517 70%); border: 1px solid #ffffff14; transition: transform .2s var(--doux), border-color .2s; }
.depot:active { transform: scale(.98); }
.depot.survol { border-color: var(--rec); }
.depot .balle { width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px color-mix(in srgb, var(--rec) 20%, transparent); animation: flotte 2.6s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-6px); } }
.depot b { display: block; font: 900 21px var(--police); font-stretch: var(--large); letter-spacing: -.03em; margin-bottom: 4px; }
.formulaire { display: grid; gap: 14px; }
.formulaire label { font-size: 13px; color: var(--mute); display: grid; gap: 6px; }
.aide { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: 12px; padding: 14px; margin-top: 22px; font-size: 13.5px; color: #cfccc6; }
.aide b { color: var(--ink); }
.envoi { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; }
.envoi .pochette { width: 44px; height: 44px; border-radius: 4px; }
.envoi .nom { flex: 1; min-width: 0; }
.envoi .nom span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envoi .jauge { height: 3px; background: #ffffff1f; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.envoi .jauge i { display: block; height: 100%; width: 0; background: var(--rec); transition: width .2s; }
.envoi .etat { width: 74px; text-align: right; color: var(--mute); font-size: 12px; }
.envoi .etat.ok { color: var(--ink); }
.envoi .etat.ko { color: var(--rec); }

/* ---------- Mini lecteur ---------- */
.mini { position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(76px + var(--safe-b)); height: 60px; border-radius: 9px;
  background: color-mix(in srgb, var(--dyn) 88%, #000); display: flex; align-items: center; gap: 10px; padding: 0 4px 0 8px; cursor: pointer; overflow: hidden;
  box-shadow: 0 10px 30px #000a; transition: background .6s, translate .35s var(--ressort), opacity .25s; }
.mini[hidden] { display: flex; translate: 0 140%; opacity: 0; pointer-events: none; }
.mini .pochette { width: 44px; height: 44px; border-radius: 5px; }
.mini .infos { flex: 1; min-width: 0; font-size: 13px; }
.mini .infos b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .infos small { color: #ffffffb0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .barre { position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: #ffffff2e; border-radius: 1px; }
.mini .barre i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 1px; }
.mini .btn-icone { color: var(--ink); }
@media (min-width: 900px) { .mini { left: 256px; right: 16px; bottom: 16px; height: 72px; } .mini .pochette { width: 54px; height: 54px; } }

/* ---------- Lecteur plein écran ---------- */
.lecteur { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--dyn) 0%, color-mix(in srgb, var(--dyn) 40%, #000) 60%, #050505 100%);
  padding: calc(var(--safe-t) + 10px) 24px calc(22px + var(--safe-b)); transform: translateY(105%); transition: transform .42s var(--doux), background .6s; }
.lecteur.ouvert { transform: none; }
.lecteur.glisse { transition: background .6s; }
.lecteur .haut { display: flex; align-items: center; justify-content: space-between; text-align: center; flex: none; }
.lecteur .haut small { display: block; font-size: 11px; color: #ffffffa8; letter-spacing: .02em; }
.lecteur .haut b { display: block; font-size: 13px; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lecteur .btn-icone { color: var(--ink); }
.lecteur .grande { flex: 1; display: flex; align-items: center; justify-content: center; padding: 22px 0; min-height: 0; touch-action: pan-y; }
.lecteur .grande .pochette { width: min(100%, 440px, 44vh); aspect-ratio: 1; height: auto; border-radius: 8px; box-shadow: 0 30px 70px #000c;
  transition: transform .5s var(--ressort), opacity .3s; }
body.pause .lecteur .grande .pochette { transform: scale(.9); }
.lecteur .ligne { display: flex; align-items: center; gap: 12px; max-width: 520px; width: 100%; margin: 0 auto; flex: none; }
.lecteur .ligne .infos { flex: 1; min-width: 0; }
.lecteur .ligne h2 { font: 900 24px/1.15 var(--police); font-stretch: var(--large); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lecteur .ligne .infos div { color: #ffffffb3; }
.onde { position: relative; max-width: 520px; width: 100%; margin: 18px auto 0; height: 46px; cursor: pointer; touch-action: none; flex: none; }
.onde canvas { width: 100%; height: 100%; display: block; }
.temps { display: flex; justify-content: space-between; max-width: 520px; width: 100%; margin: 6px auto 0; font-size: 11px; color: #ffffffa8; font-variant-numeric: tabular-nums; flex: none; }
.commandes { display: flex; align-items: center; justify-content: space-between; max-width: 440px; width: 100%; margin: 10px auto 0; flex: none; }
.commandes .off { color: #ffffff8c !important; }
.commandes .gros { width: 70px; height: 70px; border-radius: 50%; background: var(--ink); color: #000; display: grid; place-items: center; transition: transform .25s var(--ressort); }
.commandes .gros:active { transform: scale(.9); }
.commandes .gros svg { width: 30px; height: 30px; }
.commandes .moyen svg { width: 34px; height: 34px; }
.repete1 { position: relative; }
.repete1::after { content: '1'; position: absolute; font-size: 9px; font-weight: 800; top: 8px; right: 6px; }
.point-actif { position: relative; }
.point-actif::before { content: ''; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--rec); }
.bas-lecteur { display: flex; justify-content: flex-end; max-width: 440px; width: 100%; margin: 10px auto 0; flex: none; }

/* ---------- Feuilles d'actions ---------- */
.voile { position: fixed; inset: 0; z-index: 60; background: #000b; display: flex; align-items: flex-end; justify-content: center; animation: fondu .2s; }
@keyframes fondu { from { opacity: 0; } }
.feuille { width: 100%; max-width: 540px; background: #1C1C1F; border-radius: 18px 18px 0 0; padding: 8px 0 calc(16px + var(--safe-b)); max-height: 82vh; overflow: auto;
  animation: monte .32s var(--doux); }
@keyframes monte { from { transform: translateY(40%); opacity: .4; } }
.feuille::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 2px; background: #ffffff33; margin: 2px auto 10px; }
@media (min-width: 600px) { .voile { align-items: center; } .feuille { border-radius: 18px; } }
.feuille .qui { display: flex; align-items: center; gap: 12px; padding: 4px 18px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.feuille .qui .pochette { width: 52px; height: 52px; border-radius: 4px; }
.feuille .qui b { display: block; }
.feuille .choix { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 20px; text-align: left; font-size: 15.5px; }
.feuille .choix:active { background: #ffffff10; }
@media (hover: hover) { .feuille .choix:hover { background: #ffffff0d; } }
.feuille .choix svg { width: 23px; height: 23px; color: var(--mute); flex: none; }
.feuille .choix .pochette { width: 44px; height: 44px; border-radius: 4px; margin: -6px 0; }
.feuille .choix.danger { color: var(--rec); }
.feuille .corps { padding: 6px 20px; display: grid; gap: 12px; }
.feuille .corps h3 { font: 900 20px var(--police); font-stretch: var(--large); letter-spacing: -.02em; }
.feuille .boutons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(140px + var(--safe-b)); transform: translateX(-50%); background: var(--ink); color: #000;
  padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; animation: toast .35s var(--ressort); max-width: calc(100% - 32px); box-shadow: 0 10px 30px #0008; }
@keyframes toast { from { transform: translate(-50%, 20px); opacity: 0; } }

/* ---------- Connexion ---------- */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(80% 60% at 50% 30%, var(--rec-sombre), var(--bg) 70%); }
.connexion form { width: 100%; max-width: 340px; display: grid; gap: 14px; text-align: center; }
.connexion img { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 8px; box-shadow: 0 20px 50px color-mix(in srgb, var(--rec) 25%, transparent); }
.connexion h1 { font: 900 40px var(--police); font-stretch: var(--large); letter-spacing: -.04em; margin-bottom: 8px; }
.connexion .erreur { color: var(--rec); font-size: 14px; min-height: 20px; }

/* Entrée des écrans */
.entre > * { animation: entre .45s var(--doux) both; }
.entre > *:nth-child(2) { animation-delay: .03s; } .entre > *:nth-child(3) { animation-delay: .06s; }
.entre > *:nth-child(4) { animation-delay: .09s; } .entre > *:nth-child(n+5) { animation-delay: .12s; }
@keyframes entre { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; animation: none !important; } }

.aide svg { width: 22px; height: 22px; flex: none; color: var(--rec); }

/* La casse des titres suit la marque (Minuit : capitales) */
.entete h1, .sec, .page-titre, .tete-infos h1, .pochette .titre-p, .lecteur .ligne h2, .nav .marque, .connexion h1, .feuille .corps h3, .depot b { text-transform: var(--casse); }

/* ---------- v3 : playlists façon Spotify, pochette à l'envoi ---------- */
.ecran-nom { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rec-sombre) 90%, #000), #121212 75%); animation: fondu .25s; }
.ecran-nom h2 { font: 900 24px/1.2 var(--police); font-stretch: var(--large); letter-spacing: -.02em; text-align: center; text-transform: var(--casse); }
.nom-playlist { width: min(100%, 420px); background: none; border: 0; border-bottom: 1px solid #ffffff66; padding: 8px 4px; color: var(--ink);
  font: 800 30px var(--police); font-stretch: var(--large); text-align: center; letter-spacing: -.02em; }
.nom-playlist:focus { outline: none; border-bottom-color: var(--ink); }
.ecran-nom .boutons { display: flex; gap: 12px; }
.feuille.creer { padding-top: 8px; }
.feuille.creer .choix { padding: 14px 20px; }
.feuille.creer .choix b { display: block; font-weight: 600; }
.feuille.creer .choix small { display: block; color: var(--mute); font-size: 13px; }
.rond-ico { width: 48px; height: 48px; border-radius: 50%; background: #2c2c30; display: grid; place-items: center; flex: none; }
.rond-ico svg { width: 22px !important; height: 22px !important; color: var(--ink) !important; }
.feuille.haute { min-height: 70vh; }
.btn-icone.ajout { color: var(--ink); }
.btn-icone.ajout.fait { color: var(--rec); }
.ligne-ajout { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 0 10px; font-weight: 500; text-align: left; }
.case-plus { width: 50px; height: 50px; border-radius: 4px; background: #2a2a2e; display: grid; place-items: center; flex: none; }
.case-plus svg { width: 24px; height: 24px; }
.invite { text-align: center; padding: 34px 10px 20px; }
.invite b { display: block; font: 900 20px/1.2 var(--police); font-stretch: var(--large); letter-spacing: -.02em; margin-bottom: 6px; text-transform: var(--casse); }
.invite p { margin-bottom: 18px; }
.invite .boutons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.carte-invite { margin-top: 22px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--rec) 22%, #151517), #151517 70%); }
.titre-biblio { display: flex; align-items: center; gap: 10px; }
.titre-biblio img { width: 32px; height: 32px; border-radius: 50%; }
.tri { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 4px 0; font-size: 13px; }
.tri > button:first-child { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.tri svg { width: 16px; height: 16px; }
.sons.biblio .pochette { width: 64px; height: 64px; }
.sons.biblio .pochette.ronde { border-radius: 50%; }
.epingle svg { width: 12px; height: 12px; color: var(--rec); vertical-align: -1px; margin-right: 4px; }
.grille-biblio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; margin-top: 8px; }
@media (min-width: 900px) { .grille-biblio { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.grille-biblio .carte, .grille-biblio .carte.artiste { width: auto; }
.grille-biblio .carte .pochette { width: 100%; height: auto; aspect-ratio: 1; }
.fiche-envoi { display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; }
.fiche-envoi .formulaire { flex: 1; min-width: 0; }
.col-cover { display: grid; gap: 6px; justify-items: center; flex: none; }
.case-cover { position: relative; width: 132px; height: 132px; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 30px #0009; }
.case-cover .pochette { width: 100%; height: 100%; border-radius: 0; }
.voile-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #000a; font-size: 13px; font-weight: 600; transition: opacity .2s; }
.voile-cover svg { width: 26px; height: 26px; }
.case-cover.choisie .voile-cover { opacity: 0; }
.case-cover.choisie:hover .voile-cover { opacity: 1; }
.lien-mute { color: var(--mute); font-size: 12px; text-decoration: underline; }
.lien-mute[hidden] { display: none; }
.petit { font-size: 12.5px; margin-top: -6px; }
.envoi .pochette.modifiable { cursor: pointer; outline: 1px solid #ffffff2a; }
@media (max-width: 380px) { .case-cover { width: 108px; height: 108px; } }
.entete > div:last-child:not(.titre-biblio) { display: flex; margin-right: -8px; }

/* ---------- v4 : RÉGIE — 5 onglets, Carrière, Profil, crédits, options à cadenas, habillage drip ---------- */
* { font-synthesis: none; } /* Bowlby One n'a qu'une graisse : pas de faux gras */
body.glossy .entete h1, body.glossy .sec, body.glossy .page-titre, body.glossy .tete-infos h1, body.glossy .lecteur .ligne h2, body.glossy .nav .marque,
body.glossy .pochette .titre-p, body.glossy .feuille .corps h3, body.glossy .depot b, body.glossy .invite b, body.glossy .ecran-nom h2, body.glossy .nom-playlist,
body.glossy .connexion h1, body.glossy .reprise b, body.glossy .tuile, body.glossy .barre-haut { letter-spacing: 0; font-weight: 400; }
/* le brillant : boutons en billes, reflet sur les pochettes */
.bille, body.glossy .lire, body.glossy .commandes .gros, body.glossy .btn.rouge, body.glossy .puce.on {
  background: linear-gradient(160deg, color-mix(in srgb, var(--rec) 55%, #fff), var(--rec) 50%, color-mix(in srgb, var(--rec) 70%, #000)); color: var(--sur-rec);
  box-shadow: inset 0 2px 1px #ffffff8c, inset 0 -8px 12px #00000038, 0 8px 22px color-mix(in srgb, var(--rec) 35%, transparent); }
body.glossy .carte .pochette::after, body.glossy .tete .pochette::after, body.glossy .lecteur .grande .pochette::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, #ffffff2e 0%, transparent 28%); pointer-events: none; }
.nav a.creer { color: var(--sur-rec); }
.nav .bille { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin: -8px auto 0; }
.nav .bille svg { margin: 0; width: 22px; height: 22px; }
.nav .nom-creer { display: none; }
.nav { padding-top: 22px; }
@media (min-width: 900px) { .nav a.creer { color: var(--mute); } .nav .bille { width: 26px; height: 26px; margin: 0; } .nav .bille svg { width: 14px; height: 14px; color: var(--sur-rec); } .nav .nom-creer { display: inline; } }

.chapo { color: #cfccc6; max-width: 640px; margin: -4px 0 4px; }
.options { display: grid; gap: 10px; }
@media (min-width: 900px) { .options { grid-template-columns: 1fr 1fr; } }
.option { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff10; width: 100%; }
.option .txt { flex: 1; min-width: 0; }
.option b { display: block; font-weight: 600; }
.option small { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.pastille { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 99px; background: #ffffff14; color: #d9d6cf; white-space: nowrap; flex: none; }
.pastille svg { width: 11px; height: 11px; }
.pastille.ok { background: color-mix(in srgb, var(--rec) 22%, transparent); color: var(--rec); }
.fondateur { margin-top: 26px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--rec) 26%, #151517), #151517 75%); }
.fondateur b { font: 400 19px var(--police); display: block; margin-bottom: 4px; }
.fondateur small { color: var(--mute); display: block; margin-top: 6px; }
.feuille .choix .cadenas { margin-left: auto; display: inline-flex; }
.feuille .choix .cadenas svg { width: 15px; height: 15px; color: var(--mute); }
.bientot { text-align: center; justify-items: center; padding-top: 14px !important; }
.rond-ico.grand { width: 72px; height: 72px; background: color-mix(in srgb, var(--rec) 22%, #1c1c1f); }
.rond-ico.grand svg { width: 32px !important; height: 32px !important; color: var(--rec) !important; }
.bientot .etiquette { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }
.bientot .etiquette svg { width: 12px; height: 12px; }
.bientot .pour-son { font-size: 13px; color: #d9d6cf; }
.bientot .btn { justify-self: stretch; text-align: center; margin: 4px 0 6px; }
.sortie-son { display: flex; align-items: center; gap: 10px; text-align: left; max-width: 520px; width: 100%; margin: 14px auto 0; padding: 11px 14px; border-radius: 12px; background: #ffffff14; font-size: 13px; font-weight: 600; flex: none; }
.sortie-son div { flex: 1; }
.sortie-son small { display: block; font-weight: 400; color: #ffffffa0; font-size: 11.5px; }
.sortie-son svg { width: 16px; height: 16px; color: #ffffffa0; }
.lecteur .bas-lecteur { margin-top: 2px; }

.carte-profil { display: flex; align-items: center; gap: 14px; }
.carte-profil img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 30px #0009; }
.nom-artiste { display: flex; align-items: center; gap: 8px; }
.nom-artiste b { font: 400 24px/1.1 var(--police); text-align: left; }
.nom-artiste svg { width: 16px; height: 16px; color: var(--mute); }
.carte-profil small { color: var(--mute); display: block; margin-top: 4px; }
.je-suis { margin-top: 20px; }
.je-suis small { color: var(--mute); display: block; margin-bottom: 8px; font-size: 13px; }
.je-suis .puces { margin-bottom: 0; }
.carte-qr { display: flex; gap: 14px; align-items: center; margin-top: 20px; padding: 14px; border-radius: 16px; background: #ffffff0d; border: 1px solid #ffffff10; }
.faux-qr { width: 92px; height: 92px; border-radius: 12px; background: var(--ink); color: #0B0B0C; display: grid; place-items: center; flex: none; }
.faux-qr svg { width: 60px; height: 60px; }
.carte-qr p { font-size: 13px; color: #cfccc6; margin: 3px 0 8px; }
.liste-profil { margin-top: 18px; }
.ligne-profil { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 2px; border-bottom: 1px solid #ffffff10; text-align: left; }
.ligne-profil svg { width: 22px; height: 22px; color: var(--mute); }
.ligne-profil span { flex: 1; }
.ligne-profil small { color: var(--mute); text-transform: capitalize; }

.credit { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ffffff10; }
.credit div { flex: 1; min-width: 0; }
.credit b { display: block; }
.credit small { color: var(--mute); }
.credit .part { font: 400 18px var(--police); color: var(--rec); }
.jauge-parts { height: 6px; border-radius: 3px; background: #ffffff1a; margin-top: 14px; overflow: hidden; }
.jauge-parts i { display: block; height: 100%; background: var(--rec); border-radius: 3px; transition: width .3s; }
.total { font-size: 13px; color: var(--mute); margin-top: -4px; }
.ajout-credit { display: grid; grid-template-columns: 1fr 1fr 84px; gap: 8px; }
.ajout-credit .btn { grid-column: 1 / -1; text-align: center; }
.note-verrou { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 12.5px; color: var(--mute); padding: 6px 0 2px; }
.note-verrou svg { width: 14px; height: 14px; flex: none; }

/* v5 : piste grand public, à plat (pas de brillant) */
body:not(.glossy) .bille { background: var(--rec); color: var(--sur-rec); box-shadow: none; }
body:not(.glossy) .commandes .gros { background: var(--ink); color: #000; }

/* v6 : graisses pour la police grand public (Figtree) */
body:not(.glossy) .nom-artiste b, body:not(.glossy) .fondateur b, body:not(.glossy) .credit .part { font-weight: 800; letter-spacing: -.02em; }

/* v7 : Raccord = le R en jaune + « accord » */
.nom-marque i { font-style: normal; color: var(--rec); }

/* v8 : les comptes */
.connexion .accroche { color: var(--mute); margin: -8px 0 6px; }
.connexion .bascule { color: var(--mute); font-size: 14px; padding: 10px; text-decoration: underline; text-underline-offset: 3px; }
.connexion .je-suis { text-align: left; }
.espace { margin-top: 18px; }
.espace small { display: block; margin-top: 8px; color: var(--mute); font-size: 13px; }
.feuille .erreur { color: var(--rec); font-size: 14px; min-height: 20px; }
.feuille form.corps .champ + .champ { margin-top: 10px; }

/* v11 : partage par lien et QR code */
.carte-qr { width: 100%; text-align: left; }
.vrai-qr { width: 92px; height: 92px; border-radius: 12px; overflow: hidden; flex: none; background: #fff; }
.vrai-qr svg, .grand-qr svg { display: block; width: 100%; height: 100%; }
.grand-qr { width: min(72vw, 280px); aspect-ratio: 1; margin: 6px auto 18px; border-radius: 18px; overflow: hidden; background: #fff; }
.corps.centre { text-align: center; }
.corps.centre .boutons { justify-content: center; }
.lien-partage { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 10px; background: #ffffff0d; border: 1px solid #ffffff14; }
.lien-partage span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; -webkit-user-select: all; user-select: all; }
.lien-partage small { color: var(--mute); flex: none; font-size: 13px; }
.reglage { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 2px 6px; text-align: left; }
.reglage span { flex: 1; }
.reglage small { display: block; color: var(--mute); font-size: 13px; }
.bascule-i { flex: none; width: 46px; height: 28px; border-radius: 99px; background: #ffffff24; position: relative; transition: background .2s; }
.bascule-i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: translate .2s; }
.reglage[aria-checked=true] .bascule-i { background: var(--rec); }
.reglage[aria-checked=true] .bascule-i::after { translate: 18px 0; }
button.credit { width: 100%; text-align: left; }