/* One One One Records : feuille de style
   Charte : noir, blanc, violet (d'après les visuels SoundCloud du crew). */
:root {
  --fond: #0b0a0d;
  --fond-2: #131117;
  --fond-3: #1b1821;
  --trait: #2b2634;
  --texte: #f5f3f8;
  --texte-2: #b5adc4;
  --violet: #9140d9;
  --violet-clair: #c79bf0;
  --violet-fonce: #6a2fa8;
  --vert: #7fd38f;
  --rouge: #e0706a;
  --rayon: 6px;
  --max: 1100px;
  --police: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.6 var(--police);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--violet-clair); }
a:hover { color: var(--violet-clair); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--violet-clair); outline-offset: 3px; }

.evitement { position: absolute; left: -999px; top: 8px; background: var(--violet); color: #fff; padding: .5rem 1rem; z-index: 100; }
.evitement:focus { left: 8px; }

/* En-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 16px;
  background: rgba(13, 11, 9, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}
.marque { display: flex; align-items: center; gap: .6rem; color: var(--texte); text-decoration: none; font-weight: 700; letter-spacing: .02em; }
.marque em { font-style: normal; color: var(--violet-clair); }
.marque img { width: 44px; height: 30px; }
.menu { display: flex; gap: 1.25rem; }
.menu a { color: var(--texte-2); text-decoration: none; font-weight: 600; }
.menu a:hover { color: var(--texte); }
.menu-bouton { display: none; background: none; border: 1px solid var(--trait); color: var(--texte); padding: .4rem .8rem; border-radius: var(--rayon); font: inherit; }
@media (max-width: 720px) {
  .menu-bouton { display: inline-block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--fond-2); border-bottom: 1px solid var(--trait); }
  .menu.est-ouvert { display: flex; }
  .menu a { padding: .9rem 16px; border-top: 1px solid var(--trait); }
}

/* Héros */
.heros {
  max-width: none; margin: 0; padding: clamp(3rem, 8vw, 6rem) 16px 3rem;
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(143, 77, 224, .28), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(143, 77, 224, .12), transparent 70%);
}
.h1-sous { display: block; font-size: .45em; font-weight: 600; color: var(--violet-clair); letter-spacing: .04em; margin-top: .3em; }
.bio { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; }
.bio li { font-weight: 600; letter-spacing: .02em; }
.heros__fond { position: absolute; inset: 0; z-index: 0; background: url("https://i1.sndcdn.com/artworks-8wuWziN9Avi2UPyU-2nZQqg-t500x500.jpg") center/cover no-repeat; opacity: .35; filter: saturate(1.1); }
.heros__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,13,.2), var(--fond) 95%); }
.heros__contenu { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.heros__logo { width: clamp(180px, 26vw, 320px); height: auto; justify-self: end; }
@media (max-width: 800px) { .heros__contenu { grid-template-columns: 1fr; } .heros__logo { justify-self: start; order: -1; width: 180px; } }
.h1-sous { color: var(--violet-clair); }
.surtitre { color: var(--violet-clair); letter-spacing: .25em; text-transform: uppercase; font-size: .8rem; font-weight: 700; margin-bottom: 1rem; }
.accroche { font-size: 1.2rem; color: var(--texte-2); max-width: 40rem; }
.chiffres { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; max-width: 40rem; }
.chiffres li { border-left: 2px solid var(--violet); padding-left: .9rem; }
.chiffres strong { display: block; font-size: 1.6rem; color: var(--texte); }
.chiffres span { color: var(--texte-2); font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.bouton {
  display: inline-block; padding: .7rem 1.3rem; border-radius: var(--rayon);
  background: var(--violet); color: #fff; text-decoration: none;
  border: 1px solid var(--violet); font: inherit; font-weight: 700; cursor: pointer;
}
.bouton:hover { background: #a569ec; color: #fff; }
.bouton--secondaire { background: transparent; color: var(--texte); border-color: var(--texte-2); }
.bouton--secondaire:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: #fff; }
.bouton[disabled], .bouton.est-inactif { opacity: .45; cursor: not-allowed; }

/* Sections */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 16px; }
.section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.section--contraste { background: var(--fond-2); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.section-tete { margin-bottom: 1.5rem; }
.section-tete p { color: var(--texte-2); max-width: 44rem; }
.colonnes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 800px) { .colonnes { grid-template-columns: 1fr; gap: 1.5rem; } }
.a-completer { color: var(--texte-2); border: 1px dashed var(--violet-fonce); padding: .6rem .8rem; border-radius: var(--rayon); font-size: .9rem; }

/* Filtres et note */
.filtres { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.filtre { background: var(--fond-3); color: var(--texte-2); border: 1px solid var(--trait); padding: .4rem .9rem; border-radius: 999px; font: inherit; cursor: pointer; }
.filtre.est-actif { background: var(--violet); color: #fff; border-color: var(--violet); font-weight: 700; }
.note-stock { color: var(--texte-2); font-size: .9rem; margin-bottom: 1.5rem; }
.note-stock:empty { display: none; }

/* Grille des fiches */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.fiche {
  background: var(--fond-2); border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; display: flex; flex-direction: column;
}
.fiche.est-masquee { display: none; }
.fiche__visuel { position: relative; aspect-ratio: 1; background: var(--fond-3); }
.fiche__visuel img { width: 100%; height: 100%; object-fit: cover; }
.fiche__visuel .pochette-vide {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--violet-clair); font-size: 3rem; font-weight: 800; letter-spacing: -.05em;
  background: repeating-linear-gradient(45deg, var(--fond-3) 0 10px, #221d17 10px 20px);
}
.etiquette {
  position: absolute; top: .6rem; left: .6rem; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: rgba(13, 11, 9, .85); color: var(--texte);
}
.etiquette--disponible { color: var(--vert); }
.etiquette--epuise { color: var(--rouge); }
.etiquette--a-confirmer { color: var(--violet-clair); }
.fiche__corps { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.fiche__artiste { color: var(--violet-clair); font-weight: 700; margin: 0; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }
.fiche__titre { margin: 0; font-size: 1.25rem; }
.fiche__meta { margin: 0; color: var(--texte-2); font-size: .9rem; }
.prix { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .25rem; }
.prix li { display: flex; justify-content: space-between; border-top: 1px solid var(--trait); padding-top: .3rem; font-size: .95rem; }
.prix li strong { color: var(--texte); }
.prix__droite { display: flex; gap: .6rem; align-items: baseline; }
.payer { font-size: .85rem; font-weight: 700; text-decoration: none; border: 1px solid var(--violet); color: var(--violet-clair); border-radius: 999px; padding: 0 .55rem; }
.payer:hover { background: rgba(143, 77, 224, .16); }

/* Pages servies par le serveur (commande, paiement, espace) */
.page-serveur { max-width: 64rem; }
.page-serveur h2 { margin-top: 2rem; }
.bandeau { border-radius: var(--rayon); padding: .7rem 1rem; border: 1px solid var(--trait); background: var(--fond-3); }
.bandeau--erreur { border-color: var(--rouge); color: #f0b3a9; }
.bandeau--ok { border-color: var(--vert); color: #bfe3bc; }
.bandeau--info { border-color: var(--violet-fonce); color: var(--texte-2); }
.recap { display: flex; gap: 1.25rem; align-items: center; background: var(--fond-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem; margin: 1rem 0 1.5rem; }
.recap img { border-radius: var(--rayon); flex: 0 0 auto; }
.recap h2 { margin: .2rem 0; }
.livraison { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .75rem 1rem 1rem; display: grid; gap: .8rem; margin: 0; }
.livraison legend { padding: 0 .4rem; color: var(--texte-2); }
.livraison[hidden] { display: none; }
.tableau { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { color: var(--texte-2); font-weight: 600; background: var(--fond-2); white-space: nowrap; }
tfoot th { color: var(--texte); }
.enligne { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.enligne input, .enligne select { background: var(--fond-3); color: var(--texte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .35rem .5rem; font: inherit; font-size: .9rem; }
.enligne input[type="email"] { min-width: 14rem; }
.court { width: 4.5rem; }
.petit { padding: .3rem .7rem; font-size: .85rem; }
.manque { color: var(--rouge); }
code { background: var(--fond-3); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
.fiche__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }
.fiche__actions .bouton { padding: .5rem .9rem; font-size: .95rem; }
.lecteur { padding: 0 1rem 1rem; }
.lecteur[hidden] { display: none; }
.lecteur iframe { width: 100%; height: 166px; border: 0; border-radius: var(--rayon); }

/* Mixtape */
.mixtape { display: grid; grid-template-columns: 180px 1fr; gap: 1.5rem; align-items: start; background: var(--fond-3); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.25rem; }
.mixtape img { border-radius: var(--rayon); }
.mixtape iframe { width: 100%; height: 166px; border: 0; border-radius: var(--rayon); }
.mixtape h3 { margin-top: 0; }
@media (max-width: 640px) { .mixtape { grid-template-columns: 1fr; } .mixtape img { max-width: 180px; } }
.lien-externe { margin-top: 1rem; }

/* Artistes */
.artistes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.artistes li { background: var(--fond-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .6rem .8rem; }
.artistes a { color: var(--texte); text-decoration: none; font-weight: 600; }
.artistes small { display: block; color: var(--texte-2); }

/* Formulaire */
.formulaire { display: grid; gap: 1rem; }
.champ { display: grid; gap: .3rem; }
.champ label { font-weight: 600; font-size: .95rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; background: var(--fond-3); color: var(--texte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: .65rem .8rem; font: inherit;
}
.champ textarea { resize: vertical; }
.aide { color: var(--texte-2); font-size: .9rem; margin: 0; }
.contact h3:first-child { margin-top: 0; }
.contact ol { padding-left: 1.2rem; color: var(--texte-2); }
.contact li { margin-bottom: .4rem; }

/* Pied */
.pied { padding: 2rem 16px; text-align: center; color: var(--texte-2); font-size: .9rem; border-top: 1px solid var(--trait); }
.pied p { margin: .25rem 0; }

/* Page mentions */
.page-simple { max-width: 48rem; margin: 0 auto; padding: 2.5rem 16px 4rem; }
.page-simple h2 { font-size: 1.3rem; margin-top: 2rem; }
.page-simple .a-completer { display: inline-block; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.depot { margin-top: .4rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.depot input[type="file"] { font-size: .8rem; color: var(--texte-2); max-width: 15rem; }