/* =====================================================================
   NOA G — vitrine réaliste : vraies photos et vidéos, fond noir profond,
   bleu électrique en lumière (lueurs, contours), typo condensée.
   Pas d'illustration : le visuel vient des images qui bougent.
   ===================================================================== */
/* Polices hébergées sur le site (pas d'appel à Google : plus rapide, et aucune IP de visiteur envoyée à un tiers).
   Polices variables : un seul fichier couvre toutes les graisses. Jeu de caractères latin (français). */
/* Bricolage Grotesque : une seule famille pour les titres et le texte (taille optique automatique :
   dessin plus serré et contrasté en grand, plus ouvert et lisible en petit). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(fonts/BricolageGrotesque.woff2) format("woff2"); }

:root {
  --sol: #050507;             /* fond de page */
  --surface: #0c0c11;         /* cartes */
  --surface-2: #14141b;       /* champs, survols */
  --ligne: rgba(255, 255, 255, .09);
  --ligne-forte: rgba(255, 255, 255, .18);
  --texte: #f5f5f2;
  --texte-doux: #a6a6b0;
  --bleu: #1f63ff;            /* bleu électrique : boutons, lumière */
  --bleu-texte: #5b8cff;      /* bleu lisible en texte sur le noir */
  --bleu-fonce: #1650d8;
  --bleu-ligne: rgba(31, 99, 255, .55);
  --lueur: 0 0 28px rgba(31, 99, 255, .28);
  --rouge: #ff5a5f;
  --titre: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --corps: "Bricolage Grotesque", system-ui, sans-serif;
  --entete: 72px;
  --cible: 44px;
  --rayon: 14px;
  --marge: clamp(16px, 4vw, 64px);
  --sortie: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 12px);
  color-scheme: dark; accent-color: var(--bleu); caret-color: var(--bleu-texte);
  scrollbar-color: #2a2a33 var(--sol);
}
html:has(body.lecteur-ouvert) { scroll-padding-bottom: 100px; }
::selection { background: var(--bleu); color: #fff; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--sol); }
::-webkit-scrollbar-thumb { background: #24242c; border: 3px solid var(--sol); border-radius: 12px; }
::-webkit-scrollbar-thumb:hover { background: var(--bleu); }
body {
  background: var(--sol); color: var(--texte); font-family: var(--corps); font-size: 1.02rem;
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
/* Pas de sélection sur les objets (pochettes, lecteurs, boutons) ; le texte, lui, reste copiable */
.carte-media, .vedette-cover, .pack-visuel, .lecteur, .entete, .filtres, .btn { -webkit-user-select: none; user-select: none; }
body.lecteur-ouvert { padding-bottom: 84px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--bleu-texte); outline-offset: 3px; border-radius: 6px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.accent { color: var(--bleu-texte); }

/* ---------- Titres ---------- */
h1, h2 { font-family: var(--titre); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; text-wrap: balance; }
h2 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.surtitre {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font: 700 .78rem var(--corps); text-transform: uppercase; letter-spacing: .22em; color: var(--bleu-texte);
}
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px;
  padding: 12px 24px; border-radius: 10px; border: 1px solid transparent;
  font: 700 .95rem/1 var(--corps); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  transition: transform .25s var(--sortie), box-shadow .25s, background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-petit { min-height: var(--cible); padding: 8px 14px; font-size: .8rem; }
.btn-plein { width: 100%; }
.btn-bleu { background: var(--bleu); color: #fff; box-shadow: 0 8px 26px -10px rgba(31, 99, 255, .8); }
.btn-bleu:hover { background: var(--bleu-fonce); box-shadow: 0 12px 30px -10px rgba(31, 99, 255, .9); }
.btn-contour { background: rgba(255, 255, 255, .04); color: var(--texte); border-color: var(--ligne-forte); backdrop-filter: blur(8px); }
.btn-contour:hover { border-color: var(--texte); background: rgba(255, 255, 255, .08); }
.btn.dans-panier { background: rgba(31, 99, 255, .14); border-color: var(--bleu); color: #fff; box-shadow: none; }
.btn[disabled] { background: transparent; color: var(--texte-doux); border-color: var(--ligne-forte); cursor: not-allowed; transform: none; box-shadow: none; }

.lien-fleche { display: inline-flex; align-items: center; gap: 10px; min-height: var(--cible); font: 700 .85rem var(--corps); text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); }
.lien-fleche:hover { color: var(--texte); }

/* Badges */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.badge {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px;
  font: 700 .7rem/1 var(--corps); text-transform: uppercase; letter-spacing: .14em;
  border: 1px solid var(--ligne-forte); color: var(--texte);
}
.badge-bleu { border-color: var(--bleu-ligne); background: rgba(31, 99, 255, .12); color: var(--bleu-texte); }
.badge-texte { font: 700 .72rem var(--corps); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); }
.pastille-lueur {
  display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--bleu); color: #fff;
  font: 700 .8rem/1 var(--corps); text-transform: uppercase; letter-spacing: .12em; box-shadow: 0 0 26px rgba(31, 99, 255, .7);
}

/* ============ EN-TÊTE ============ */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--entete);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--marge);
  background: linear-gradient(rgba(0, 0, 0, .65), transparent); transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.entete.solide { background: rgba(5, 5, 7, .82); backdrop-filter: blur(14px) saturate(1.4); border-bottom-color: var(--ligne); }
.logo { font: 900 2rem/1 var(--titre); text-transform: uppercase; letter-spacing: .02em; display: inline-flex; align-items: center; min-height: var(--cible); white-space: nowrap; flex: none; }
.nav-liens { display: flex; gap: 2px; margin: 0 auto; }
.nav-liens a {
  display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 12px; border-radius: 8px; white-space: nowrap;
  font: 600 .8rem var(--corps); text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); transition: color .2s, background .2s;
}
.nav-liens a:hover { color: var(--texte); }
.nav-liens a[aria-current="true"] { color: #fff; background: rgba(31, 99, 255, .16); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.ico-btn { width: var(--cible); height: var(--cible); display: grid; place-items: center; border-radius: 50%; color: var(--texte-doux); transition: color .2s, background .2s; }
.ico-btn:hover { color: var(--texte); background: rgba(255, 255, 255, .08); }
.ico-btn .ico { width: 22px; height: 22px; }
.compil-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 16px; white-space: nowrap; flex: none;
  border: 1px solid var(--bleu-ligne); border-radius: 10px; background: rgba(31, 99, 255, .1);
  font: 700 .8rem var(--corps); text-transform: uppercase; letter-spacing: .08em; transition: background .2s, box-shadow .2s;
}
.compil-btn:hover { background: var(--bleu); box-shadow: var(--lueur); }
.panier-compte {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: grid; place-items: center; background: var(--bleu); color: #fff; box-shadow: 0 0 12px rgba(31, 99, 255, .8);
  font: 700 .75rem var(--corps); font-variant-numeric: tabular-nums;
}
.panier-compte[hidden] { display: none; }
.panier-compte.pop { animation: pop .5s var(--sortie); }
@keyframes pop { from { transform: scale(1.7); } }

/* ============ ACCUEIL : mur de mes pochettes ============ */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--entete) + 40px) var(--marge) clamp(56px, 10vh, 110px); overflow: hidden; }
.hero-fond { position: absolute; inset: 0; z-index: -1; background: #000; overflow: hidden; }
/* Le mur est légèrement incliné et placé à droite : le texte garde un fond sombre à gauche */
.hero-mur { position: absolute; top: -20%; right: -6%; width: min(1100px, 88%); height: 140%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  transform: rotate(-8deg); opacity: .62; filter: saturate(.85); }
.hero-colonne { display: flex; flex-direction: column; gap: 14px; animation: mur-monte 70s linear infinite; }
.hero-colonne:nth-child(even) { animation-name: mur-descend; animation-duration: 85s; }
.hero-colonne:nth-child(3) { animation-duration: 60s; }
.hero-colonne img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.hero-mur.en-pause .hero-colonne { animation-play-state: paused; }
@keyframes mur-monte { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes mur-descend { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hero-colonne { animation: none; } }
.hero-fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--sol) 0%, rgba(5, 5, 7, .6) 30%, rgba(5, 5, 7, .15) 65%, rgba(5, 5, 7, .7) 100%),
              linear-gradient(90deg, rgba(5, 5, 7, .96) 0%, rgba(5, 5, 7, .8) 32%, transparent 72%);
}
.hero-actions .btn svg:not(.ico) { width: 15px; height: 15px; fill: currentColor; }
/* Les vrais chiffres du catalogue */
.hero-chiffres { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--ligne); max-width: 640px; }
.hero-chiffres b { font: 900 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--titre); color: var(--texte); }
.hero-chiffres span { font-size: .85rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.hero-pour a { font: 900 1.15rem/1 var(--titre); text-transform: uppercase; color: var(--bleu-texte); margin-left: 4px; }
.hero-pour a:hover { color: var(--texte); }
.hero-contenu { max-width: 900px; }
.hero h1 { font-size: clamp(3.6rem, 9vw, 8.6rem); line-height: .86; text-shadow: 0 6px 40px rgba(0, 0, 0, .5); }
.hero-chapo { max-width: 46ch; margin: 22px 0 30px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #d4d4dc; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-pause {
  position: absolute; right: var(--marge); bottom: 28px; width: var(--cible); height: var(--cible); border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .45); border: 1px solid var(--ligne-forte); color: #fff; backdrop-filter: blur(6px);
}
.hero-pause:hover { background: #000; }
.hero-pause svg { width: 16px; height: 16px; fill: currentColor; }

/* ============ POCHETTES PHOTO : la photo vit dans le cadre ============ */
.media { position: absolute; inset: 0; overflow: hidden; background: #000; }
.media img, .media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media img { will-change: transform; }
/* Lent mouvement de caméra (zoom + dérive) ; chaque pochette a sa direction et son rythme */
.media-anime img { animation: camera var(--kb-d, 18s) ease-in-out var(--kb-delai, 0s) infinite alternate; }
@keyframes camera {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.2) translate(var(--kb-x, 2%), var(--kb-y, -2%)); }
}
/* Pochette déjà titrée : simple respiration, sans recadrer le texte */
.media-doux img { animation: respire var(--kb-d, 18s) ease-in-out var(--kb-delai, 0s) infinite alternate; }
@keyframes respire { from { transform: scale(1); } to { transform: scale(1.035); } }
.media-titre::after { /* dégradé pour que le titre se lise sur n'importe quelle photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, transparent 26%, transparent 50%, rgba(0, 0, 0, .85) 100%);
}
.jaquette-titre {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 16px 16px; color: #fff; pointer-events: none; text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}
.jt-haut { display: flex; justify-content: space-between; align-items: baseline; font: 800 .9rem/1 var(--titre); letter-spacing: .16em; }
.jt-haut i { font-style: normal; color: var(--bleu-texte); }
.jt-bas { display: flex; flex-direction: column; gap: 6px; }
.jt-bas strong { font: 900 clamp(1.8rem, 3vw, 2.5rem)/.86 var(--titre); text-transform: uppercase; text-wrap: balance; }
.jt-bas em { font: 600 .74rem var(--corps); font-style: normal; text-transform: uppercase; letter-spacing: .12em; opacity: .85; font-variant-numeric: tabular-nums; }

/* Bouton lecture rond, au centre de la pochette */
.rond-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  backdrop-filter: blur(8px); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .4s var(--sortie), background .2s;
}
.rond-play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 2px; }
.rond-play.pause svg { margin-left: 0; }

/* ============ LOOP VEDETTE ============ */
.vedette { position: relative; padding: clamp(56px, 8vw, 110px) var(--marge); }
.vedette::before { /* halo bleu discret derrière la pochette */
  content: ""; position: absolute; left: 0; top: 10%; width: 60%; height: 80%; z-index: -1;
  background: radial-gradient(closest-side, rgba(31, 99, 255, .16), transparent); pointer-events: none;
}
.vedette .pastille-lueur { margin-bottom: 26px; }
.vedette-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.vedette-visuel { position: relative; }
.vedette-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--bleu-ligne); box-shadow: 0 0 60px -10px rgba(31, 99, 255, .45), 0 40px 80px -40px #000;
  transition: transform .5s var(--sortie);
}
.vedette-cover:hover { transform: translateY(-4px); }
.vedette-cover .rond-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; opacity: 1; transform: none; background: var(--bleu); border-color: var(--bleu); box-shadow: 0 0 30px rgba(31, 99, 255, .8); }
.vedette-cover .rond-play svg { width: 28px; height: 28px; }
.vedette-cover:hover .rond-play { transform: scale(1.06); }
.vedette-cover .jt-bas strong { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.vedette-infos h2 { font-size: clamp(3rem, 6vw, 5.6rem); }
.vedette-desc { margin: 18px 0 24px; max-width: 54ch; color: var(--texte-doux); font-size: 1.05rem; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.stats div { padding: 16px 12px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); text-align: center; }
.stats dd { font: 900 1.7rem/1.05 var(--titre); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.stats dt { font: 600 .68rem var(--corps); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); margin-top: 4px; }
.stats div { display: flex; flex-direction: column-reverse; }
.vedette-barre { height: 3px; border-radius: 2px; background: var(--ligne); margin-bottom: 22px; overflow: hidden; }
.vedette-barre div { height: 100%; width: 0; background: var(--bleu); box-shadow: 0 0 10px var(--bleu); }
.vedette-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }

/* ---------- Like ---------- */
.carte-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.carte-actions .produit-btn { margin-top: 0; }
.like-btn {
  flex: none; width: var(--cible); height: var(--cible); border-radius: 10px; border: 1px solid var(--ligne-forte);
  display: grid; place-items: center; color: var(--texte-doux); transition: color .2s, border-color .2s, background .2s;
}
.like-btn:hover { color: var(--texte); border-color: var(--texte); }
.like-btn .ico { width: 20px; height: 20px; }
.like-btn.aime { color: #ff3b6b; border-color: rgba(255, 59, 107, .55); background: rgba(255, 59, 107, .1); }
.like-btn.aime .ico { fill: currentColor; }
.like-btn.bat .ico { animation: bat .5s var(--sortie); }
@keyframes bat { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } }
/* Nombre de likes de tout le monde, en pastille sur le coin du cœur */
.like-btn { position: relative; }
.like-nb { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; font: 800 .68rem/1 var(--corps); font-variant-numeric: tabular-nums;
  background: #ff3b6b; color: #fff; box-shadow: 0 0 0 2px var(--sol); pointer-events: none; }
.like-grand { width: 50px; height: 50px; }
.like-grand .ico { width: 22px; height: 22px; }

/* ============ BANDEAU DÉFILANT ============ */
.bandeau { overflow: hidden; border-block: 1px solid var(--ligne); background: var(--surface); padding: 18px 0; }
.bandeau-piste { display: flex; width: max-content; animation: defile 40s linear infinite; }
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
.bandeau span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font: 800 1.35rem var(--titre); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.bandeau span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 10px var(--bleu); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ============ SECTIONS ============ */
.section { padding: clamp(64px, 9vw, 120px) var(--marge); }
.section-sombre { background: linear-gradient(180deg, #000 0%, #07070b 100%); border-block: 1px solid var(--ligne); }
.section-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; margin-bottom: 34px; }
.section-tete > p { max-width: 44ch; color: var(--texte-doux); }

/* Filtres en pastilles */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filtres button {
  min-height: var(--cible); padding: 0 18px; border-radius: 999px; border: 1px solid var(--ligne-forte);
  font: 600 .8rem var(--corps); text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux);
  transition: background .2s, color .2s, border-color .2s;
}
.filtres button:hover { color: var(--texte); border-color: var(--texte-doux); }
.filtres button[aria-pressed="true"] { background: var(--texte); color: #000; border-color: var(--texte); }

/* ============ GRILLE DES LOOPS ============ */
.grille-loops { list-style: none; display: grid; gap: clamp(28px, 3vw, 40px) clamp(14px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(max(230px, calc((100% - 48px) / 3)), 1fr)); }
.carte-media {
  position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: var(--rayon); overflow: hidden;
  border: 1px solid var(--ligne); background: #000; transition: border-color .3s, box-shadow .3s, transform .5s var(--sortie);
}
.carte-loop:hover .carte-media, .carte-media:focus-visible { border-color: var(--bleu-ligne); box-shadow: var(--lueur); transform: translateY(-4px); }
.carte-loop:hover .media-anime img { animation-duration: calc(var(--kb-d, 18s) / 3); }
.carte-loop:hover .rond-play, .carte-media:focus-visible .rond-play, .carte-loop.en-lecture .rond-play { opacity: 1; transform: none; }
.carte-loop.en-lecture .carte-media { border-color: var(--bleu); box-shadow: 0 0 34px -4px rgba(31, 99, 255, .6); }
.carte-loop.en-lecture .rond-play { background: var(--bleu); border-color: var(--bleu); }
/* En lecture, la photo respire avec le son */
.carte-loop.en-lecture .media, .vedette.en-lecture .vedette-cover .media { transform: scale(calc(1 + var(--niveau, 0) * .06)); }
.carte-loop.en-lecture .media img, .vedette.en-lecture .media img { filter: saturate(calc(1 + var(--niveau, 0) * .8)) brightness(calc(1 + var(--niveau, 0) * .25)); }
.carte-media .badge { position: absolute; z-index: 2; top: 40px; left: 16px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.carte-media .badge-reserve { top: auto; bottom: 16px; left: 16px; border-color: var(--ligne-forte); }
.carte-loop.prise .media img { filter: grayscale(.9) brightness(.6); }
.carte-infos { padding-top: 14px; }
.info-blocage {
  display: flex; align-items: flex-start; gap: 12px; max-width: 760px; margin: -8px 0 26px; padding: 14px 18px;
  border: 1px solid var(--bleu-ligne); border-radius: 12px; background: rgba(31, 99, 255, .08); font-size: .92rem; color: #c9c9d1;
}
.info-blocage strong { color: var(--texte); }
.info-blocage + .info-blocage { margin-top: -16px; }
.info-blocage a { color: var(--bleu-texte); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.info-blocage .ico { width: 22px; height: 22px; color: var(--bleu-texte); margin-top: 1px; }
.filtres button { display: inline-flex; align-items: center; gap: 8px; }
.filtre-nb { font-size: .7rem; font-variant-numeric: tabular-nums; opacity: .6; }
.voir-genre { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); margin-top: 2px; font: 700 .75rem var(--corps); text-transform: uppercase; letter-spacing: .08em; color: var(--bleu-texte); }
.voir-genre:hover { color: var(--texte); }
.voir-genre .ico { width: 16px; height: 16px; transition: transform .3s var(--sortie); }
.voir-genre:hover .ico { transform: translateX(4px); }
.carte-genre { font: 700 .72rem var(--corps); text-transform: uppercase; letter-spacing: .18em; color: var(--bleu-texte); margin-bottom: 6px; }
.carte-nom { font: 900 1.5rem/1 var(--titre); text-transform: uppercase; }
.carte-meta { font-size: .85rem; color: var(--texte-doux); margin-top: 4px; font-variant-numeric: tabular-nums; }
.progression { height: 16px; margin-top: 2px; cursor: pointer; opacity: 0; transition: opacity .3s; background: linear-gradient(var(--ligne-forte), var(--ligne-forte)) center / 100% 2px no-repeat; }
.carte-loop.en-lecture .progression { opacity: 1; }
.progression div { height: 2px; margin-top: 7px; width: 0; background: var(--bleu); box-shadow: 0 0 8px var(--bleu); }
.produit-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 14px; margin-top: 4px;
  border: 1px solid var(--ligne-forte); border-radius: 10px; font: 700 .75rem var(--corps); text-transform: uppercase; letter-spacing: .08em;
  transition: background .2s, color .2s, border-color .2s;
}
.produit-btn:hover { border-color: var(--texte); background: rgba(255, 255, 255, .06); }
.produit-btn.dans-panier { background: rgba(31, 99, 255, .14); border-color: var(--bleu); color: #fff; }
.produit-btn[disabled] { color: var(--texte-doux); cursor: not-allowed; background: none; border-color: var(--ligne); }
.produit-btn .court { display: none; }
.vide { grid-column: 1 / -1; padding: 40px 0; color: var(--texte-doux); }

/* ============ ARTISTES (visible seulement avec de vrais artistes) ============ */
.artistes[hidden] { display: none; }
/* Façon « mur d'artistes » : photo assombrie, nom en grand au centre, s'éclaire au survol */
.artistes-grille { list-style: none; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(190px, 45%), 1fr)); }
.artiste { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #0b0b0e; }
.artiste img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.9); transition: transform .7s var(--sortie), filter .4s; }
.artistes-grille a:hover .artiste img, .artistes-grille a:focus-visible .artiste img { transform: scale(1.05); filter: brightness(.75) saturate(1); }
.artiste figcaption { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 12px; }
.artiste b { display: block; font: 900 clamp(1.3rem, 2.4vw, 1.7rem)/1 var(--titre); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.artiste span { font-size: .8rem; color: #d9d9e0; }
.artiste span:not(:empty) { display: block; margin-top: 8px; }
/* Sans photo : fond sombre façon pochette, halo bleu discret */
.artiste.sans-photo { background: radial-gradient(120% 90% at 30% 15%, rgba(31, 99, 255, .28), transparent 60%), #08080c; border: 1px solid var(--ligne-forte); }
.artiste.sans-photo b { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.carte-collab { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--texte-doux); margin-top: 2px; }
.lien-collab { color: var(--bleu-texte); text-decoration: underline; text-underline-offset: 2px; }
/* Petits liens dans le texte (2ti, Basscracker, Moubarak) : zone de clic agrandie au doigt, sans bouger la mise en page */
.lien-collab, .hero-pour a { padding: 12px 6px; margin: -12px -6px; }
/* Lien « Aller au contenu » : invisible, apparaît au clavier (Tab) */
.aller-contenu { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--bleu); color: #fff; font-weight: 700; }
.aller-contenu:focus { top: 12px; }
.lien-collab:hover { color: var(--texte); }

/* ============ MES SONS (morceaux sortis que j'ai composés) ============ */
.sons[hidden] { display: none; }
.sons-grille { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); max-width: 960px; }
.son { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--ligne-forte); }
.son-cover { aspect-ratio: 1; overflow: hidden; background: #08080c; }
.son-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sortie); }
.son:hover .son-cover img { transform: scale(1.05); }
.son-infos { display: flex; flex-direction: column; gap: 4px; padding: 16px; flex: 1; min-width: 0; }
.son-infos h3 { font: 900 1.5rem/1 var(--titre); text-transform: uppercase; }
.son-artiste { color: var(--bleu-texte); font-weight: 700; }
.son-meta { font-size: .8rem; color: var(--texte-doux); }
.son-ecouter { margin-top: 12px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }
.son-ecouter svg { width: 14px; height: 14px; fill: currentColor; }
.son-a-venir .artiste { aspect-ratio: auto; height: 100%; min-height: 220px; }
@media (max-width: 600px) {
  .son { flex-direction: row; }
  .son-cover { width: 128px; flex: none; }
  .son-infos { padding: 12px 14px; }
  .son-infos h3 { font-size: 1.25rem; }
  .son-ecouter { margin-top: auto; padding-inline: 12px; font-size: .72rem; }
  .son-a-venir .artiste { min-height: 128px; grid-auto-flow: column; gap: 14px; }
  .son-a-venir .disque { width: 150px; margin-bottom: 0; }
}

/* Case « à venir » avec sablier qui s'écoule puis se retourne */
.artiste.a-venir { border: 1px solid var(--ligne); background: radial-gradient(80% 70% at 50% 35%, #15151b, #0b0b0e); display: grid; place-items: center; }
.artiste.a-venir figcaption { position: static; gap: 2px; }
.artiste.a-venir b { font-size: 1.1rem; color: var(--texte-doux); }
/* ---- Vinyle qui sort de sa pochette ----
   Le disque tourne ; le reflet de lumière, lui, reste fixe (comme sous une vraie lampe). */
.disque { position: relative; width: 72%; aspect-ratio: 1.6; container-type: inline-size; margin-bottom: 6px; }
.pochette { position: absolute; left: 0; top: 0; width: 62.5%; height: 100%; z-index: 2; border-radius: 2px;
  background: linear-gradient(135deg, #1c1c21, #0a0a0c 60%, #121216), #0d0d10;
  box-shadow: 6px 10px 22px rgba(0, 0, 0, .7), inset -1px 0 0 rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .07);
  display: grid; place-items: end start; padding: 7cqw; }
.pochette::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .35; mix-blend-mode: overlay; /* grain du carton */
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }
.pochette span { font: 900 7cqw/1 var(--titre); letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.vinyle { position: absolute; top: 3%; right: 0; width: 60%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background:
    radial-gradient(circle closest-side, transparent 0 96%, #26262c 97%, #0b0b0d 100%),                         /* bord du disque */
    radial-gradient(circle closest-side, transparent 0 50%, rgba(0, 0, 0, .9) 50.4% 51.2%, transparent 51.6% 63%,
      rgba(0, 0, 0, .9) 63.4% 64.2%, transparent 64.6% 77%, rgba(0, 0, 0, .9) 77.4% 78.2%, transparent 78.6%),   /* blancs entre les morceaux */
    radial-gradient(circle closest-side, transparent 0 33%, #0f0f12 33% 39%, transparent 39.5%),                   /* zone lisse près du macaron */
    repeating-radial-gradient(circle closest-side, #121215 0 .45%, #1a1a1e .45% .9%),                            /* sillons */
    #111;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .7); animation: vinyle-tour 7s linear infinite; }
.vinyle-reflet { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; filter: blur(1.5px);
  background: conic-gradient(from 300deg, transparent 0 6%, rgba(255, 255, 255, .16) 10%, transparent 15% 50%, rgba(255, 255, 255, .11) 56%, transparent 61%);
  animation: vinyle-tour 7s linear infinite reverse; }
.vinyle-macaron { position: absolute; inset: 32%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14% 0;
  background:
    radial-gradient(circle, #050507 0 6%, #3a3a40 6.5% 8%, transparent 8.5%),                                     /* trou central */
    radial-gradient(circle closest-side, transparent 0 88%, rgba(255, 255, 255, .25) 89% 90.5%, transparent 91%), /* liseré imprimé */
    radial-gradient(circle at 35% 30%, #5a88ff, #1f63ff 55%, #11368f);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .45); }
.vinyle-macaron b, .vinyle-macaron i { font: 900 3cqw/1 var(--titre); font-style: normal; letter-spacing: .12em; color: rgba(255, 255, 255, .92); text-transform: uppercase; }
.vinyle-macaron i { font: 700 1.9cqw/1 var(--corps); letter-spacing: .14em; color: rgba(255, 255, 255, .7); }
.artiste.a-venir:hover .vinyle, .artistes-grille li:hover .vinyle { right: -6%; transition: right .5s var(--sortie); }
.vinyle { transition: right .5s var(--sortie); }
@keyframes vinyle-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vinyle, .vinyle-reflet { animation: none; } }

/* ============ PACKS MIDI ============ */
.grille-packs { list-style: none; display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(auto-fill, minmax(max(290px, calc((100% - 52px) / 3)), 1fr)); }
.carte-pack {
  display: flex; flex-direction: column; border: 1px solid var(--ligne); border-radius: 18px; overflow: hidden; background: var(--surface);
  transition: border-color .3s, box-shadow .3s, transform .5s var(--sortie);
}
.carte-pack:hover { border-color: var(--bleu-ligne); box-shadow: var(--lueur); transform: translateY(-4px); }
.carte-pack:hover .media-anime img { animation-duration: calc(var(--kb-d, 18s) / 3); }
.carte-pack.en-lecture { border-color: var(--bleu); }
.pack-visuel { position: relative; aspect-ratio: 1; }
.pack-styles .badge { margin-right: 4px; }
/* Un seul pack : grande carte en largeur, pochette à gauche, détails à droite */
.grille-packs:has(> .carte-pack:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .carte-pack:only-child { flex-direction: row; max-width: 1100px; }
  .carte-pack:only-child .pack-visuel { flex: 0 0 46%; aspect-ratio: 1; }
  .carte-pack:only-child .pack-corps { padding: clamp(24px, 3vw, 40px); }
  .carte-pack:only-child .pack-nom { font-size: clamp(2.4rem, 4vw, 3.4rem); }
  .carte-pack:only-child .pack-prix { font-size: 2.4rem; }
}
.pack-corps { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 22px; }
.pack-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pack-nom { font: 900 2rem/1 var(--titre); text-transform: uppercase; }
.pack-prix { font: 900 1.8rem/1 var(--titre); color: var(--bleu-texte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pack-prix s { display: block; font: 600 .8rem var(--corps); color: var(--texte-doux); text-align: right; }
.pack-prix small { display: block; margin-top: 6px; font: 600 .78rem var(--corps); color: var(--texte-doux); text-align: right; }
.pack-styles { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.tag { font: 600 .7rem var(--corps); text-transform: uppercase; letter-spacing: .1em; padding: 5px 10px; border: 1px solid var(--ligne-forte); border-radius: 999px; color: var(--texte-doux); }
.pack-contenu { list-style: none; display: grid; gap: 8px; margin-bottom: 18px; }
.pack-contenu li { display: flex; gap: 10px; align-items: baseline; font-size: .92rem; color: #d4d4dc; }
.pack-contenu li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 8px var(--bleu); transform: translateY(-2px); }
/* Instrus faites avec le pack : une mini tracklist écoutable */
.pack-instrus { margin-bottom: 18px; padding: 12px; border: 1px solid var(--ligne); border-radius: 12px; background: #08080c; }
.pack-instrus[hidden] { display: none; }
.pack-instrus-titre { font: 700 .7rem var(--corps); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); margin: 0 0 6px 4px; }
.pack-instrus ol { list-style: none; display: grid; }
.instru { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 4px; border-radius: 8px; }
.instru:hover { background: var(--surface-2); }
.instru-play { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne-forte); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.instru-play:hover { border-color: var(--texte); }
.instru-play svg { width: 13px; height: 13px; fill: currentColor; }
.instru.en-lecture .instru-play { background: var(--bleu); border-color: var(--bleu); box-shadow: 0 0 14px rgba(31, 99, 255, .7); }
.instru-titre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.instru.en-lecture .instru-titre { color: var(--bleu-texte); }
.instru-meta { font-size: .75rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; white-space: nowrap; }
.instru-credit { grid-column: 2 / -1; font-size: .72rem; color: var(--texte-doux); line-height: 1.2; }
.pack-actions { margin-top: auto; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.pack-ecouter { width: 50px; height: 50px; border-radius: 10px; border: 1px solid var(--ligne-forte); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.pack-ecouter:hover { border-color: var(--texte); }
.pack-ecouter svg { width: 16px; height: 16px; fill: currentColor; }
/* Allumé seulement quand c'est l'extrait du pack qui joue (pas une de ses instrus) */
.pack-ecouter[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); }

/* ============ COMMANDE SUR MESURE ============ */
.commande { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.commande-intro { position: sticky; top: calc(var(--entete) + 32px); }
.commande-intro p:not(.surtitre) { margin-top: 18px; max-width: 40ch; color: var(--texte-doux); }
.carte-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--ligne); border-radius: 18px; background: var(--surface); }
.champ-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { display: grid; gap: 6px; border: none; min-width: 0; }
.champ > span, .champ legend { font: 700 .7rem var(--corps); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); margin-bottom: 4px; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 10px;
  padding: 10px 14px; font: 500 1rem var(--corps); color: var(--texte); transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.champ select { appearance: none; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23a6a6b0' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; padding-right: 40px; }
.champ select option { color: var(--texte); background: var(--surface-2); }
.champ input::placeholder, .champ textarea::placeholder { color: #6e6e78; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(31, 99, 255, .25); }
.champ [aria-invalid="true"] { border-color: var(--rouge); }
.champ-erreur { font-size: .85rem; font-weight: 600; font-style: normal; color: var(--rouge); }
.champ-erreur[hidden] { display: none; }
/* Champ piège pour robots : hors de l'écran, jamais vu ni atteint au clavier */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces label { position: relative; }
.puces input { position: absolute; opacity: 0; pointer-events: none; }
.puces span { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 16px; border-radius: 999px; border: 1px solid var(--ligne-forte); font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.puces span:hover { border-color: var(--texte-doux); }
.puces input:checked + span { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.puces input:focus-visible + span { outline: 3px solid var(--bleu-texte); outline-offset: 2px; }
.erreur { color: var(--rouge); font-weight: 600; }
.erreur[hidden] { display: none; }

/* ============ COMMENT ÇA MARCHE ============ */
.etapes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.etapes li { position: relative; padding: 26px 22px; border: 1px solid var(--ligne); border-radius: 16px; background: var(--surface); }
.etapes .ico { width: 30px; height: 30px; color: var(--bleu-texte); }
.etape-num { position: absolute; top: 20px; right: 22px; font: 900 1.1rem var(--titre); color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.etapes h3 { font: 900 1.6rem/1 var(--titre); text-transform: uppercase; margin: 22px 0 8px; }
.etapes p { color: var(--texte-doux); font-size: .93rem; }

/* ============ À PROPOS ============ */
.apropos { text-align: center; max-width: 900px; margin: 0 auto; }
.bio { margin: 26px auto 30px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 60ch; color: #c9c9d1; text-wrap: pretty; }
.apropos-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; }
.apropos-pseudo { display: inline-flex; align-items: center; gap: 10px; font: 900 1.8rem var(--titre); text-transform: uppercase; overflow-wrap: anywhere; }
.apropos-pseudo .ico { width: 24px; height: 24px; color: var(--bleu-texte); }

/* ============ PIED ============ */
.pied { background: #000; padding: 48px var(--marge) 40px; border-top: 1px solid var(--ligne); }
.pied-logo { font: 900 clamp(2.4rem, 7vw, 5rem)/1 var(--titre); text-transform: uppercase; }
.pied-liens { display: flex; flex-wrap: wrap; column-gap: 24px; margin: 14px 0 8px; font: 600 .8rem var(--corps); text-transform: uppercase; letter-spacing: .08em; }
.pied-liens a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--texte-doux); }
.pied-liens a:hover, .pied-liens a[aria-current="page"] { color: var(--texte); }
.pied-reseaux { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pied-reseaux .btn { background: transparent; color: var(--texte); border-color: var(--ligne-forte); }
.pied-reseaux .btn:hover { border-color: var(--texte); }
.pied-legal { font-size: .82rem; color: var(--texte-doux); }

/* ============ PAGES LÉGALES ============ */
body.page-legale { padding-top: 0; }
.legale-tete {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--marge); background: rgba(5, 5, 7, .85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ligne);
}
.legale-logo { font: 900 2rem/1 var(--titre); text-transform: uppercase; display: inline-flex; align-items: center; min-height: var(--cible); }
.legale { max-width: 72ch; margin: 0 auto; padding: clamp(40px, 7vw, 88px) clamp(20px, 4vw, 40px) 80px; }
.legale h1 { font-size: clamp(2.8rem, 8vw, 5rem); }
.legale-maj { margin: 14px 0 40px; color: var(--texte-doux); font-size: .9rem; }
.legale section { padding: 26px 0; border-top: 1px solid var(--ligne); }
.legale h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 12px; }
.legale h3 { font: 800 1.25rem var(--titre); text-transform: uppercase; letter-spacing: .02em; margin: 18px 0 6px; color: var(--bleu-texte); }
.legale p, .legale li { color: #d6d6dd; margin-bottom: 10px; }
.legale ul { padding-left: 20px; }
.legale a { color: var(--bleu-texte); text-decoration: underline; text-underline-offset: 3px; }
.legale code { font-size: .9em; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.merci-badge { margin-bottom: 18px; }
.merci-chapo { font-size: 1.15rem; margin: 18px 0 8px; }
.merci-etapes { padding-left: 22px; margin-bottom: 22px; }
.merci-etapes li { margin-bottom: 12px; }
.merci .merci-btn { color: #fff; text-decoration: none; margin-top: 10px; }

/* ============ LECTEUR ============ */
.lecteur {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 14px; padding: 10px var(--marge);
  background: rgba(10, 10, 14, .9); backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid var(--ligne);
  animation: monte .4s var(--sortie) both;
}
@keyframes monte { from { transform: translateY(100%); } }
.lecteur[hidden] { display: none; }
.lecteur-cover { position: relative; flex: none; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; }
.lecteur-infos { display: flex; flex-direction: column; min-width: 0; flex: 0 1 220px; }
.lecteur-infos strong { font: 900 1.25rem/1.1 var(--titre); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lecteur-infos span { color: var(--texte-doux); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rond { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--bleu); color: #fff; display: grid; place-items: center; box-shadow: 0 0 18px rgba(31, 99, 255, .6); transition: transform .2s; }
.rond:hover { transform: scale(1.06); }
.rond svg { width: 18px; height: 18px; fill: currentColor; }
#visu { flex: 1; min-width: 0; height: 40px; }
#volume { width: 96px; accent-color: var(--bleu); }

/* ============ TA COMPIL (tiroir) ============ */
.tiroir-fond { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); animation: fondu .25s; }
.tiroir-fond[hidden] { display: none; }
@keyframes fondu { from { opacity: 0; } }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 46; width: min(440px, 100%);
  display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--ligne);
  box-shadow: -30px 0 60px -30px #000; transform: translateX(100%); transition: transform .5s var(--sortie); visibility: hidden;
}
.tiroir.ouvert { transform: none; visibility: visible; }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 16px 24px; border-bottom: 1px solid var(--ligne); }
.tiroir-tete h2 { font-size: 2.4rem; }
.tiroir-liste { list-style: none; counter-reset: piste; flex: 1; overflow-y: auto; padding: 8px 16px; }
.tiroir-liste li { counter-increment: piste; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--ligne); }
.tiroir-liste li::before { content: counter(piste, decimal-leading-zero); font: 800 1rem var(--titre); width: 22px; color: var(--texte-doux); }
.tiroir-liste .mini-jaquette { flex: none; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; position: relative; }
.tiroir-liste div:not(.mini-jaquette) { flex: 1; min-width: 0; }
.tiroir-liste strong { display: block; font: 900 1.25rem/1.1 var(--titre); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiroir-liste span { font-size: .8rem; color: var(--texte-doux); }
.retirer { min-height: var(--cible); padding: 0 10px; border-radius: 8px; font: 700 .72rem var(--corps); text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); }
.retirer:hover { color: var(--rouge); background: rgba(255, 90, 95, .08); }
.tiroir-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; color: var(--texte-doux); }
.tiroir-vide[hidden], .tiroir-pied[hidden] { display: none; }
.tiroir-pied { padding: 16px 24px 22px; border-top: 1px solid var(--ligne); }
.tiroir-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font: 800 1.15rem var(--titre); text-transform: uppercase; }
.tiroir-total button { min-height: var(--cible); padding: 0 8px; font: 700 .72rem var(--corps); text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); }
.tiroir-total button:hover { color: var(--texte); }
.tiroir-note { margin-top: 12px; font-size: .82rem; color: var(--texte-doux); text-align: center; }
.fermer { width: var(--cible); height: var(--cible); border-radius: 50%; display: grid; place-items: center; transition: background .2s; }
.fermer:hover { background: rgba(255, 255, 255, .1); }
.fermer .ico { width: 22px; height: 22px; }

/* ============ FENÊTRE D'ENVOI ============ */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); animation: fondu .2s; }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: 100%; max-width: 480px; padding: 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); box-shadow: 0 40px 80px -30px #000; }
.modal-box .fermer { position: absolute; top: 14px; right: 14px; }
.modal-titre { font-size: 2.2rem; margin: 0 50px 20px 0; }
.modal-texte { font: 700 .7rem var(--corps); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); margin-bottom: 8px; }
.message { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px 12px 12px 16px; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 12px; }
.message pre { flex: 1; font: 500 .88rem/1.5 var(--corps); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }
.modal-reseaux { display: grid; gap: 10px; }

.toast {
  position: fixed; left: 50%; top: calc(var(--entete) + 10px); transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px;
  background: rgba(20, 20, 27, .95); border: 1px solid var(--bleu-ligne); backdrop-filter: blur(10px); font-weight: 600; font-size: .9rem;
  box-shadow: 0 16px 34px -14px #000, var(--lueur); animation: descend .35s var(--sortie) both;
}
.toast .ico { color: var(--bleu-texte); }
.toast[hidden] { display: none; }
@keyframes descend { from { opacity: 0; transform: translate(-50%, -12px); } }

/* Notif « nouvelles loops depuis ta dernière visite » : en bas à gauche, au-dessus du lecteur */
.notif-nouveau {
  position: fixed; left: var(--marge); bottom: 24px; z-index: 55; width: min(380px, calc(100% - 32px));
  padding: 16px 18px; border-radius: var(--rayon); background: rgba(16, 16, 22, .97); border: 1px solid var(--bleu-ligne);
  backdrop-filter: blur(12px); box-shadow: 0 22px 44px -16px #000, var(--lueur);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .45s var(--sortie);
}
.notif-nouveau.visible { opacity: 1; transform: none; pointer-events: auto; }
body.lecteur-ouvert .notif-nouveau { bottom: 100px; }
.notif-titre { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 700; font-size: .92rem; }
.notif-titre .point { animation: pulse 1.6s ease-in-out infinite; }
.notif-noms { margin: 6px 0 14px; font: 800 1.15rem/1.2 var(--titre); font-stretch: 78%; text-transform: uppercase; color: var(--bleu-texte); }
.notif-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notif-actions .btn svg:not(.ico) { width: 13px; height: 13px; fill: currentColor; }
.notif-fermer { position: absolute; top: 6px; right: 6px; width: var(--cible); height: var(--cible); display: grid; place-items: center; color: var(--texte-doux); border-radius: 50%; }
.notif-fermer:hover { color: var(--texte); background: var(--surface-2); }
@keyframes pulse { 50% { opacity: .35; } }
/* La loop retrouvée depuis la notif brille un instant */
.carte-loop.brille { outline: 2px solid var(--bleu-texte); outline-offset: 4px; border-radius: var(--rayon); transition: outline-color .4s; }
@media (prefers-reduced-motion: reduce) { .notif-nouveau { transition: none; } .notif-titre .point { animation: none; } }
.maj-reguliere { display: block; margin-top: 8px; color: var(--texte); }
.notif-suivre { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ligne); font-size: .8rem; color: var(--texte-doux); }
.notif-suivre a { color: var(--bleu-texte); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; padding: 10px 2px; }

/* ---- Catalogue privé ---- */
.prive .surtitre .ico { width: 14px; height: 14px; }
.prive-verrou { position: relative; overflow: hidden; border-radius: var(--rayon); border: 1px solid var(--bleu-ligne); min-height: 340px; display: grid; place-items: center; background: #050508; }
.prive-verrou[hidden], .prive #prive-produits[hidden] { display: none; }
.verrou-pochettes { position: absolute; inset: -20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; filter: blur(12px) brightness(.62) saturate(.9); transform: scale(1.05); }
.nav-liens a[hidden] { display: none; }
.verrou-pochettes img { width: 100%; height: 100%; object-fit: cover; }
.verrou-contenu { position: relative; z-index: 1; max-width: 440px; padding: 34px 24px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.verrou-ico { width: 34px; height: 34px; color: var(--bleu-texte); }
.verrou-nb { font: 800 clamp(1.5rem, 3vw, 2rem)/1.1 var(--titre); font-stretch: 78%; text-transform: uppercase; }
.verrou-texte { color: #d4d4dc; }
.quitter-acces { display: block; margin-top: 10px; min-height: var(--cible); color: var(--bleu-texte); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.quitter-acces[hidden] { display: none; }
.badge-prive { border-color: var(--ligne-forte); background: rgba(0, 0, 0, .55); }
.carte-media .badge-prive { top: auto; bottom: 16px; left: auto; right: 16px; }

/* ---- Bandeau « Nouveautés » ---- */
.annonce-nouv { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; padding: 16px 18px; border-radius: var(--rayon);
  border: 1px solid var(--bleu-ligne); background: linear-gradient(100deg, rgba(31, 99, 255, .16), rgba(31, 99, 255, .03) 60%), var(--surface); box-shadow: var(--lueur); }
.annonce-nouv[hidden] { display: none; }
.annonce-pochettes { display: flex; flex: none; }
.annonce-pochettes img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 2px solid var(--sol); margin-left: -14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.annonce-pochettes img:first-child { margin-left: 0; }
.annonce-texte { flex: 1; min-width: 180px; }
.annonce-titre { display: flex; align-items: center; gap: 8px; font-weight: 800; white-space: nowrap; }
.annonce-titre .point { animation: pulse 1.6s ease-in-out infinite; }
.annonce-noms { margin-top: 2px; font: 800 1.05rem/1.25 var(--titre); font-stretch: 78%; text-transform: uppercase; color: var(--bleu-texte); }
.annonce-nouv .btn { gap: 8px; }
/* Le filtre Nouveautés ressort parmi les genres */
.filtres button.filtre-nouv { border-color: var(--bleu-ligne); color: var(--bleu-texte); }
.filtres button.filtre-nouv[aria-pressed="true"] { background: var(--bleu); color: #fff; border-color: var(--bleu); }
@media (max-width: 640px) { .annonce-nouv .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .annonce-titre .point { animation: none; } }

/* ---- Recherche rapide BPM / tonalité + tri ---- */
.outils-loops { display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); gap: 12px; margin-bottom: 18px; }
.outil > span { margin-bottom: 0; }
.outil input, .outil select { min-height: var(--cible); }
.recherche-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 22px; font-weight: 700; }
.recherche-resultat[hidden], .filtres[hidden] { display: none; }
.recherche-resultat button { color: var(--bleu-texte); text-decoration: underline; text-underline-offset: 2px; min-height: var(--cible); }
.grille-loops .vide a { color: var(--bleu-texte); text-decoration: underline; }
@media (max-width: 640px) {
  .outils-loops { grid-template-columns: 1fr 1fr; gap: 10px; }
  .outil-tri { grid-column: 1 / -1; }
}

/* ---- Rappel « suis-moi » sous les loops ---- */
.suivre-bloc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 34px; padding: 20px 22px;
  border: 1px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--surface); }
.suivre-bloc p { max-width: 52ch; color: var(--texte-doux); }
.suivre-bloc strong { color: var(--texte); }
.suivre-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.suivre-liens .btn { gap: 8px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1440px) {
  .entete { gap: 14px; }
  .nav-liens a { padding: 0 9px; font-size: .74rem; letter-spacing: .06em; }
}
@media (max-width: 1180px) {
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  :root { --entete: 112px; }
  /* L'en-tête passe sur deux lignes : logo + actions, puis les sections qui défilent */
  .entete { flex-wrap: wrap; align-content: flex-start; gap: 0; padding: 0 12px; background: rgba(5, 5, 7, .88); backdrop-filter: blur(14px); border-bottom-color: var(--ligne); }
  .logo { height: 60px; padding: 0 4px; }
  .entete-actions { margin-left: auto; height: 60px; }
  .nav-liens { order: 3; width: calc(100% + 24px); margin: 0 -12px; padding: 4px 8px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--ligne); height: 52px; }
  .nav-liens::-webkit-scrollbar { display: none; }
  .nav-liens a { flex: none; font-size: .75rem; }
}
@media (max-width: 960px) {
  .vedette-grille, .commande { grid-template-columns: 1fr; }
  .vedette-visuel { max-width: 560px; }
  .commande-intro { position: static; }
}
@media (max-width: 640px) {
  .hero { min-height: 88svh; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
  /* Sur téléphone le mur passe derrière tout le texte : plus sombre, et un peu plus petit */
  .hero-mur { width: 150%; right: -25%; opacity: .55; gap: 10px; }
  .hero-fond::after { background: linear-gradient(0deg, var(--sol) 0%, rgba(5, 5, 7, .82) 45%, rgba(5, 5, 7, .45) 75%, rgba(5, 5, 7, .7) 100%); }
  .hero-colonne { gap: 10px; }
  .hero-chiffres { gap: 8px 18px; margin-top: 24px; }
  .hero-actions .btn { flex: 1; padding: 12px 14px; }
  .champ-ligne { grid-template-columns: minmax(0, 1fr); }
  .vedette-actions { grid-template-columns: minmax(0, 1fr) auto; }
  .vedette-actions #vedette-play { grid-column: 1 / -1; }
  .grille-loops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .carte-nom { font-size: 1.2rem; }
  .carte-media .badge { top: 34px; left: 10px; font-size: .6rem; padding: 4px 7px; }
  .jaquette-titre { padding: 10px 11px 12px; }
  .jt-haut { font-size: .72rem; }
  .jt-bas strong { font-size: 1.5rem; }
  .jt-bas em { font-size: .62rem; }
  /* au doigt, pas de survol : le bouton est toujours visible, dans le coin pour ne pas cacher le titre */
  .carte-media .rond-play { opacity: .95; transform: none; width: 40px; height: 40px; margin: 0; left: auto; top: auto; right: 8px; bottom: 8px; }
  .carte-media .jt-bas { padding-right: 40px; }
  .rond-play svg { width: 16px; height: 16px; }
  .carte-actions { gap: 6px; }
  .produit-btn { flex: 1; min-width: 0; justify-content: center; padding: 0 8px; gap: 5px; font-size: .68rem; }
  .like-btn { width: 40px; }
  .produit-btn .long { display: none; }
  .produit-btn .court { display: inline; }
  .grille-packs { grid-template-columns: minmax(0, 1fr); }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  #visu, #volume { display: none; }
  .lecteur-infos { flex: 1; }
  .compil-btn-txt { display: none; }
  .bandeau span { font-size: 1.1rem; }
}

@media (max-width: 400px) {
  .produit-btn .ico { display: none; }   /* petites cartes : le texte seul tient dans le bouton */
  .carte-media .jt-bas em { display: none; }
}

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

/* ---------- Titres en Bricolage condensé ----------
   Placé à la fin : la propriété « font: … » des règles plus haut remet la largeur à 100 %,
   on la resserre ici pour tous les textes en police de titre (garde l'allure compacte et percutante). */
h1, h2, .logo, .legale-logo, .pied-logo, .hero-chiffres b, .hero-pour a, .jt-bas strong, .stats dd, .bandeau span,
.carte-nom, .artiste b, .son-infos h3, .pack-nom, .pack-prix, .etapes h3, .apropos-pseudo,
.lecteur-infos strong, .tiroir-liste strong, .tiroir-total, .legale h3 { font-stretch: 78%; letter-spacing: -.01em; }
h1, h2 { font-weight: 800; letter-spacing: -.02em; }
/* Noms longs sur la pochette : la taille suit la largeur de la carte (cqw), pour tenir même sur petit téléphone */
.carte-media { container-type: inline-size; }
.titre-long .jt-bas strong { font-size: clamp(.9rem, 2.2vw, 1.9rem); }
@container (max-width: 240px) { .titre-long .jt-bas strong { font-size: 9cqw; } }

/* ---------- Packs MIDI mis en avant (accueil, compil, après l'envoi, cartes de loops) ---------- */
.mini-pack { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 10px 14px 10px 10px; border-radius: var(--rayon);
  background: linear-gradient(120deg, rgba(31, 99, 255, .16), rgba(31, 99, 255, .04)); border: 1px solid var(--bleu-ligne);
  color: var(--texte); text-decoration: none; transition: border-color .25s, transform .25s var(--sortie); }
.mini-pack:hover { border-color: var(--bleu-texte); transform: translateY(-2px); }
.mini-pack img { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 10px; }
.mini-pack-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; text-align: left; }
.mini-pack-txt small { font: 700 .68rem var(--corps); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-texte); }
.mini-pack-txt b { font: 800 1.05rem var(--titre); font-stretch: 78%; }
.mini-pack-txt > span { font-size: .82rem; color: var(--texte-doux); }
.mini-pack-cta { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 700 .75rem var(--corps); text-transform: uppercase; letter-spacing: .08em; color: var(--bleu-texte); }
.mini-pack-cta .ico { width: 16px; height: 16px; transition: transform .3s var(--sortie); }
.mini-pack:hover .mini-pack-cta .ico { transform: translateX(4px); }
.pack-avant { padding: 0 var(--marge) clamp(40px, 6vw, 72px); }
.pack-avant .mini-pack-grand { max-width: 860px; margin: 0 auto; padding: 14px 22px 14px 14px; gap: 20px; }
.mini-pack-grand img { width: 104px; height: 104px; }
.mini-pack-grand .mini-pack-txt b { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.mini-pack-detail { font-size: .85rem; color: var(--texte-doux); }
.mini-pack-grand .mini-pack-cta { padding: 12px 18px; border-radius: 999px; background: var(--bleu); color: #fff; }
@media (max-width: 560px) {
  .mini-pack-grand { flex-wrap: wrap; }
  .mini-pack-grand img { width: 80px; height: 80px; }
  .mini-pack-grand .mini-pack-cta { width: 100%; justify-content: center; }
}
.lien-pack { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cible); margin-top: 2px; text-align: left;
  font: 600 .74rem var(--corps); color: var(--texte-doux); }
.lien-pack:hover { color: var(--bleu-texte); }
.lien-pack .ico { width: 14px; height: 14px; }
.insecable { white-space: nowrap; }

/* ---------- Loop vedette : encadrée parmi les loops (la grande section du haut est retirée) ---------- */
.vedette[hidden] { display: none; }
.hero .pack-avant { padding: 0; max-width: 440px; }
.hero .pack-avant .mini-pack { margin-top: 22px; background: rgba(5, 5, 7, .72); backdrop-filter: blur(10px); }
.carte-loop.carte-vedette { position: relative; padding: 10px; border: 2px solid var(--bleu); border-radius: calc(var(--rayon) + 6px);
  background: linear-gradient(180deg, rgba(31, 99, 255, .12), rgba(31, 99, 255, .02)); }
.carte-vedette-badge { position: absolute; top: -12px; left: 14px; z-index: 3; padding: 5px 10px; border-radius: 6px; background: var(--bleu); color: #fff;
  font: 700 .66rem/1 var(--corps); text-transform: uppercase; letter-spacing: .12em; }

.packs-conditions { margin-top: 22px; text-align: center; font-size: .9rem; color: var(--texte-doux); }
.packs-conditions strong { color: var(--texte); }
.packs-conditions a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px; }
.packs-conditions a:hover { color: var(--texte); }

/* ---------- Bandeau fixe (remplace l'ancien bandeau défilant) ---------- */
.bandeau { padding: 16px var(--marge); }
.bandeau-piste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; width: auto; margin: 0; padding: 0; list-style: none; animation: none; }
.bandeau li { display: inline-flex; align-items: center; gap: 10px; font: 800 1.15rem var(--titre); font-stretch: 78%; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.bandeau li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); }
@media (max-width: 640px) { .bandeau li { font-size: .95rem; } .bandeau-piste { gap: 8px 18px; } }

/* ---------- Lueurs adoucies : ombres neutres de profondeur au lieu des halos bleus ---------- */
:root { --lueur: 0 18px 40px -20px rgba(0, 0, 0, .9); }
.btn-bleu, .btn-bleu:hover { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9); }
.pastille-lueur, .panier-compte, .rond, .instru.en-lecture .instru-play { box-shadow: none; }
.vedette-cover { box-shadow: 0 40px 80px -40px #000; }
.vedette-cover .rond-play { box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .8); }
.vedette-barre div, .progression div, .pack-contenu li::before { box-shadow: none; }
.carte-loop.en-lecture .carte-media { box-shadow: var(--lueur); }

/* ---------- Demande de loops par e-mail (fenêtre d'envoi de la compil) ---------- */
.modal-box { max-height: calc(100svh - 32px); overflow-y: auto; }
.envoi-mail { display: grid; gap: 8px; margin-bottom: 18px; padding: 16px; border-radius: var(--rayon);
  border: 1px solid var(--bleu-ligne); background: linear-gradient(160deg, rgba(31, 99, 255, .14), rgba(31, 99, 255, .03)); }
.envoi-mail[hidden], .envoi-ok[hidden], .modal-ou[hidden] { display: none; }
.envoi-mail-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 800 1.1rem var(--titre); font-stretch: 78%; text-transform: uppercase; }
.envoi-mail-titre .ico { width: 18px; height: 18px; color: var(--bleu-texte); }
.envoi-mail label { font: 600 .78rem var(--corps); color: var(--texte-doux); }
.envoi-mail label span { font-weight: 400; }
.envoi-mail input[type="email"], .envoi-mail input[type="text"]:not(.pot-de-miel) {
  min-height: var(--cible); padding: 0 14px; border-radius: 10px; border: 1px solid var(--ligne-forte); background: var(--sol); color: var(--texte); font: 1rem var(--corps); }
.envoi-mail input:focus-visible { outline: 2px solid var(--bleu-texte); outline-offset: 1px; }
.envoi-accord { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; line-height: 1.4; }
.envoi-accord input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--bleu); }
.envoi-accord a { color: var(--bleu-texte); text-decoration: underline; }
.envoi-mail .btn-plein { margin-top: 6px; }
.envoi-mail .btn-plein:disabled { opacity: .6; cursor: wait; }
.envoi-mail-note { font-size: .78rem; color: var(--texte-doux); text-align: center; }
.envoi-ok { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding: 16px; border-radius: var(--rayon); border: 1px solid var(--bleu-ligne); background: rgba(31, 99, 255, .1); }
.envoi-ok .ico { width: 22px; height: 22px; flex: none; color: var(--bleu-texte); }
.envoi-ok span { color: var(--texte); font-weight: 700; word-break: break-all; }
.modal.envoye .modal-texte, .modal.envoye .message, .modal.envoye .modal-reseaux { display: none; }
.modal-ou { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; font: 600 .72rem var(--corps); text-transform: uppercase; letter-spacing: .12em; color: var(--texte-doux); }
.modal-ou::before, .modal-ou::after { content: ""; flex: 1; height: 1px; background: var(--ligne-forte); }
.carte-pack.brille { outline: 2px solid var(--bleu-texte); outline-offset: 6px; transition: outline-color .4s; }

/* ============ OFFRES : Gratuit / Abonné / Sur mesure + preuves ============ */
.offres { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.offre { display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; border: 1px solid var(--ligne); border-radius: 16px; background: var(--surface); }
.offre-phare { border-color: var(--bleu-ligne); background: linear-gradient(180deg, rgba(31, 99, 255, .1), var(--surface) 55%); }
.offre-bientot { opacity: .82; }
.offre-nom { display: flex; align-items: center; gap: 10px; font: 900 1.6rem/1 var(--titre); text-transform: uppercase; }
.offre-prix { font: 800 1.25rem/1.2 var(--titre); color: var(--bleu-texte); }
.offre-prix span { font: 500 .9rem var(--corps); color: var(--texte-doux); }
.offre-points { list-style: none; display: grid; gap: 10px; flex: 1; align-content: start; }
.offre-points li { position: relative; padding-left: 22px; color: var(--texte-doux); font-size: .95rem; }
.offre-points li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--bleu-texte); border-bottom: 2px solid var(--bleu-texte); transform: rotate(-45deg); }
.offre .btn { margin-top: 4px; justify-content: center; }
.offres-plus { margin-top: 18px; color: var(--texte-doux); text-align: center; }
.offres-plus a { color: var(--texte); text-underline-offset: 3px; }
.preuves { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--ligne); }
.preuves li, .preuves a { display: inline-flex; align-items: baseline; gap: 6px; }
.preuves li { padding: 10px 16px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--surface); font-size: .9rem; min-height: var(--cible); align-items: center; }
.preuves li[hidden] { display: none; }
.preuves a { color: inherit; text-decoration: none; }
.preuves a:hover b { color: var(--bleu-texte); }
.preuves b { font-weight: 800; }
.preuves span { color: var(--texte-doux); }
@media (max-width: 900px) { .offres { grid-template-columns: 1fr; } }

/* ============ INSCRIPTION AUX NOUVEAUTÉS (dans le bloc « suivre » sous les loops) ============ */
.suivre-bloc .inscription { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 12px; position: relative; }
.suivre-bloc .inscription .champ span { font-size: .8rem; color: var(--texte-doux); }
.suivre-bloc .inscription .btn { min-height: var(--cible); }
.suivre-bloc .inscription-note, .suivre-bloc .inscription .erreur { grid-column: 1 / -1; max-width: none; font-size: .82rem; }
.suivre-bloc .inscription-note a { color: var(--texte-doux); text-underline-offset: 3px; }
.suivre-bloc .inscription-ok { flex: 1 1 100%; max-width: none; color: var(--texte); font-weight: 600; }
@media (max-width: 520px) { .suivre-bloc .inscription { grid-template-columns: 1fr; } .suivre-bloc .inscription .btn { justify-content: center; } }

/* ============ PAGES « LOOPS GRATUITES <GENRE> » (genre.js) ============ */
.genre h1 { margin-top: 4px; }
.genre-intro p { color: var(--texte-doux); max-width: 62ch; }
.genre-nb { margin: 26px 0 14px; font-weight: 700; color: var(--texte); }
.genre-grille { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 0; }
.genre-carte a { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.genre-cover { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--ligne); }
.genre-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sortie); }
.genre-carte a:hover img { transform: scale(1.04); }
.genre-nom { font: 900 1.05rem/1.1 var(--titre); text-transform: uppercase; }
.genre-meta { font-size: .85rem; color: var(--texte-doux); }
.genre-btn { margin: 26px 0 10px; }
.genre-etapes { color: var(--texte-doux); padding-left: 1.2em; display: grid; gap: 8px; }
.genre-autres { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.genre-autres a { display: inline-flex; align-items: center; min-height: var(--cible); padding: 8px 16px; border: 1px solid var(--ligne); border-radius: 999px; color: var(--texte); text-decoration: none; }
.genre-autres a:hover { border-color: var(--bleu-texte); }

/* ============ PAGE ARTISTES (artistes.html) ============ */
.page-artistes main { padding-top: var(--entete); }
.artistes-intro { padding-bottom: 0; }
.artistes-titre { font: 900 clamp(2.6rem, 7vw, 5rem)/.95 var(--titre); text-transform: uppercase; }
.artistes-chapo { margin-top: 14px; max-width: 56ch; color: var(--texte-doux); }
.compositeurs { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; }
.compositeurs .compositeur { display: grid; gap: 2px; min-width: 200px; padding: 18px 22px; border: 1px solid var(--ligne); border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .3s; }
.compositeurs a.compositeur:hover { border-color: var(--bleu-texte); }
.compositeurs b { font: 900 1.5rem/1 var(--titre); text-transform: uppercase; }
.compositeurs span { color: var(--texte-doux); font-size: .85rem; font-weight: 700; }
.artistes-fin { text-align: center; }
.artistes-fin p { color: var(--texte-doux); margin-bottom: 18px; }
.artistes-fin-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
a.compil-btn { text-decoration: none; }

.compositeurs a.compositeur span { color: var(--bleu-texte); }

/* ============ ABONNEMENT (offre Abonné + bouton dans le catalogue privé verrouillé) ============ */
.verrou-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.verrou-boutons [hidden], #abonne-badge[hidden] { display: none; }
.offre-prix .abonne-prix { font: inherit; color: inherit; }
.offre-fondateur { margin-top: -6px; font-size: .85rem; color: var(--texte-doux); } .offre-fondateur b { color: var(--texte); } .offre-fondateur[hidden] { display: none; }