/* =========================================================
   Musidex
   Plastique de boîtier CD, encre bleu nuit,
   reflets irisés réservés aux disques.
   ========================================================= */

:root {
  --plastique: #e3e5ea;
  --boitier: #f5f6f8;
  --encre: #17193d;
  --encre-douce: #4b4f70;
  --gris: #8c92a1;
  --accent: #4330f2;
  --accent-clair: #dcd8ff;

  --r-commun: #8c92a1;
  --r-peu-commun: #1fa866;
  --r-rare: #2a6df4;
  --r-epique: #9b35f2;
  --r-legendaire: #f0a400;

  --irise: conic-gradient(from 20deg, #dfe6ff, #f3e1ff, #dcfbef, #fff3d1, #ffdfe8, #dfe6ff);

  --police: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --pas: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--plastique);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.5;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { margin: 0; line-height: 1.15; }

/* ---------- En-tête ---------- */

.entete {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 2) clamp(16px, 4vw, 48px);
}

.marque {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.entete__joueur {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--pas);
  text-decoration: none;
  font-weight: 600;
}
.avatar { width: var(--taille, 36px); height: var(--taille, 36px); border-radius: 50%; object-fit: cover; flex: none; }
.avatar--initiale {
  display: inline-grid;
  place-items: center;
  background: var(--encre);
  color: #fff;
  font-weight: 800;
  font-size: calc(var(--taille, 36px) * .45);
}

/* ---------- Menu CD ---------- */

.nav-cd { flex: none; width: clamp(128px, 16vw, 168px); }

.nav-cd__disque {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(23, 25, 61, .18));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.nav-cd__disque.is-tourne { transform: rotate(360deg); }

.nav-cd__part { cursor: pointer; }

.nav-cd__fraction {
  fill: url(#nav-irise);
  stroke: rgba(23, 25, 61, .12);
  stroke-width: .6;
  transition: fill .15s;
}
.nav-cd__texte {
  fill: var(--encre);
  font: 700 11.5px var(--police);
  font-stretch: 112%;
  letter-spacing: .02em;
  pointer-events: none;
}

.nav-cd__part:hover .nav-cd__fraction { fill: var(--accent-clair); }
.nav-cd__part.is-actif .nav-cd__fraction { fill: var(--encre); }
.nav-cd__part.is-actif .nav-cd__texte { fill: #fff; }
.nav-cd__part:focus { outline: none; }
.nav-cd__part:focus-visible .nav-cd__fraction { stroke: var(--accent); stroke-width: 3; }

.nav-cd__part.is-bientot { cursor: default; }
.nav-cd__part.is-bientot .nav-cd__fraction { fill: var(--boitier); }
.nav-cd__part.is-bientot .nav-cd__texte { fill: var(--gris); }

.nav-cd__moyeu { fill: rgba(245, 246, 248, .55); stroke: rgba(23, 25, 61, .15); stroke-width: .6; }
.nav-cd__bague { fill: none; stroke: rgba(23, 25, 61, .12); stroke-width: 1; }
.nav-cd__trou { fill: var(--plastique); stroke: rgba(23, 25, 61, .2); stroke-width: .6; }

/* ---------- Page ---------- */

.page {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(var(--pas) * 3) clamp(16px, 4vw, 48px) calc(var(--pas) * 8);
}

.pied {
  padding: calc(var(--pas) * 3) clamp(16px, 4vw, 48px);
  color: var(--encre-douce);
  font-size: .875rem;
}
.pied p { margin: 0; max-width: 70ch; }

.titre-page {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  margin-bottom: calc(var(--pas) * 3);
}
.titre-page__nb { font-size: 1rem; font-weight: 500; font-stretch: 100%; color: var(--encre-douce); letter-spacing: 0; margin-left: var(--pas); }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 calc(var(--pas) * 3);
  border: 0;
  border-radius: 999px;
  background: var(--encre);
  color: #fff;
  font: 700 1rem var(--police);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.bouton:hover { background: var(--accent); }
.bouton:active { transform: scale(.98); }
.bouton[disabled] { background: var(--gris); cursor: not-allowed; transform: none; }

.bouton--grand { min-height: 64px; padding: 0 calc(var(--pas) * 5); font-size: 1.2rem; font-stretch: 110%; }

.bouton--discret { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.bouton--discret:hover { background: var(--encre); color: #fff; }

/* ---------- Accueil (déconnecté) ---------- */

.accueil {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: calc(var(--pas) * 6);
  padding-top: calc(var(--pas) * 4);
}
.accueil h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 800;
  font-stretch: 105%;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.accueil p { font-size: 1.15rem; color: var(--encre-douce); max-width: 46ch; margin: calc(var(--pas) * 3) 0 calc(var(--pas) * 4); }
.accueil__cd { max-width: 420px; justify-self: center; width: 100%; }

@media (max-width: 760px) {
  .accueil { grid-template-columns: 1fr; }
  .accueil__cd { max-width: 260px; order: -1; }
}

/* ---------- Le CD ---------- */

.cd {
  --glow: transparent;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--glow), 0 0 26px 2px var(--glow), 0 10px 24px rgba(23, 25, 61, .22);
}

.cd__disque {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cover, none) center / cover, var(--irise);
  -webkit-mask: radial-gradient(circle, transparent 0 9%, #000 9.4%);
          mask: radial-gradient(circle, transparent 0 9%, #000 9.4%);
}
/* Reflet de la surface du disque */
.cd__disque::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, transparent 0 10%, rgba(255, 255, 255, .45) 16%, transparent 24% 60%, rgba(255, 255, 255, .3) 66%, transparent 72%);
  mix-blend-mode: soft-light;
}

/* Moyeu transparent autour du trou */
.cd__moyeu {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 27%, rgba(255, 255, 255, .6) 28% 58%, rgba(255, 255, 255, .25) 59% 100%);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 61, .12);
  pointer-events: none;
}

.cd--vierge .cd__disque { background: var(--irise); }

/* Le bouton lecture occupe le trou du CD */
.cd__play {
  position: absolute;
  inset: 39%;
  border: 0;
  border-radius: 50%;
  background: var(--encre);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, transform .15s;
}
.cd__play:hover { background: var(--accent); transform: scale(1.06); }
.cd__icone {
  width: 0; height: 0;
  margin-left: 12%;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}
.cd__play.is-lecture .cd__icone { width: 11px; height: 12px; margin: 0; border: 0; border-left: 4px solid; border-right: 4px solid; }
.cd__play.is-chargement { background: var(--gris); }
.cd__play.is-indispo { background: var(--gris); cursor: not-allowed; }

/* Le disque tourne pendant la lecture */
.cd.is-lecture .cd__disque { animation: rotation 3.2s linear infinite; }

@keyframes rotation { to { transform: rotate(360deg); } }

/* ---------- Carte CD ---------- */

.cd-carte { --couleur: var(--r-commun); min-width: 0; }
.cd-carte[data-rarete="peu-commun"] { --couleur: var(--r-peu-commun); }
.cd-carte[data-rarete="rare"]       { --couleur: var(--r-rare); }
.cd-carte[data-rarete="epique"]     { --couleur: var(--r-epique); }
.cd-carte[data-rarete="legendaire"] { --couleur: var(--r-legendaire); }

.cd-carte .cd { --glow: color-mix(in srgb, var(--couleur) 70%, transparent); }
.cd-carte[data-rarete="commun"] .cd { --glow: transparent; }
.cd-carte[data-rarete="legendaire"] .cd { animation: halo 2.4s ease-in-out infinite; }

@keyframes halo {
  50% { box-shadow: 0 0 0 3px var(--couleur), 0 0 44px 8px var(--couleur), 0 10px 24px rgba(23, 25, 61, .22); }
}

.cd-carte__rarete {
  margin: calc(var(--pas) * 2) 0 2px;
  color: var(--couleur);
  font-size: .875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--pas);
}
.cd-carte[data-rarete="commun"] .cd-carte__rarete { color: var(--encre-douce); }
.cd-carte__doublon {
  color: var(--encre-douce);
  font-weight: 600;
  background: var(--boitier);
  border-radius: 999px;
  padding: 0 7px;
}
.cd-carte__nouveau { color: var(--accent); font-weight: 700; }

.cd-carte__titre {
  font-size: 1.05rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-carte__artiste {
  margin: 0;
  color: var(--encre-douce);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-carte__liens { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: var(--pas) 0 0; font-size: .85rem; }
.cd-carte__liens a { color: var(--encre-douce); text-underline-offset: 3px; }
.cd-carte__liens a:hover { color: var(--accent); }

/* ---------- Ouverture de pochette ---------- */

.ouverture { display: flex; flex-direction: column; align-items: center; text-align: center; }

.stock { margin-bottom: calc(var(--pas) * 4); }
.stock__compte { margin: 0; font-size: 1.1rem; font-weight: 700; }
.stock__pochettes { list-style: none; display: flex; gap: 6px; padding: 0; margin: calc(var(--pas) * 1.5) 0; justify-content: center; }
.stock__pochettes li {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--boitier);
  box-shadow: inset 0 0 0 1.5px rgba(23, 25, 61, .18);
}
.stock__pochettes li.is-pleine { background: var(--encre); box-shadow: none; }
.stock__prochaine { margin: 0; color: var(--encre-douce); font-variant-numeric: tabular-nums; min-height: 1.5em; }

.ouverture__aide { color: var(--encre-douce); margin: calc(var(--pas) * 2) 0 0; }

.message-erreur {
  margin: calc(var(--pas) * 2) 0 0;
  padding: var(--pas) calc(var(--pas) * 2);
  border-radius: 6px;
  background: #fde8e8;
  color: #8a1c1c;
}

.tirage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center;
  gap: clamp(16px, 4vw, 48px);
  width: 100%;
  margin-top: calc(var(--pas) * 5);
  text-align: left;
}
@media (max-width: 640px) {
  .tirage { grid-template-columns: minmax(0, 240px); }
}

/* CD encore face cachée */
.cd-carte.is-cache .cd { cursor: pointer; --glow: transparent; }
.cd-carte.is-cache .cd__disque { background: var(--irise); }
.cd-carte.is-cache .cd__play,
.cd-carte.is-cache .cd-carte__infos { visibility: hidden; }
.cd-carte.is-cache .cd:hover { transform: translateY(-4px); }
.cd-carte .cd { transition: transform .2s; }

.cd-carte.is-revele .cd__disque { animation: revele .75s cubic-bezier(.2, .7, .2, 1); }
@keyframes revele { from { transform: rotate(-540deg) scale(.9); } }

.cd-carte__entree { animation: entree .35s ease-out both; }
@keyframes entree { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Collection ---------- */

.filtres { display: flex; flex-wrap: wrap; gap: var(--pas); margin-bottom: calc(var(--pas) * 4); }
.filtres a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  background: var(--boitier);
}
.filtres a span { color: var(--encre-douce); font-weight: 500; }
.filtres a[data-rarete="peu-commun"] { color: var(--r-peu-commun); }
.filtres a[data-rarete="rare"] { color: var(--r-rare); }
.filtres a[data-rarete="epique"] { color: var(--r-epique); }
.filtres a[data-rarete="legendaire"] { color: #b77d00; }
.filtres a[aria-current] { background: var(--encre); color: #fff; }
.filtres a[aria-current] span { color: #c9cbe0; }

.grille-cd {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: calc(var(--pas) * 5) calc(var(--pas) * 4);
}

.pagination { display: flex; justify-content: center; align-items: center; gap: calc(var(--pas) * 3); margin-top: calc(var(--pas) * 6); }

.vide { padding: calc(var(--pas) * 6) 0; }
.vide p { font-size: 1.15rem; color: var(--encre-douce); margin: 0 0 calc(var(--pas) * 3); }

/* ---------- Profil ---------- */

.profil { max-width: 640px; }
.profil__identite { display: flex; align-items: center; gap: calc(var(--pas) * 3); }
.profil__identite h1 { font-size: 2rem; font-weight: 800; font-stretch: 110%; }
.profil__identite p { margin: 4px 0 0; color: var(--encre-douce); }

.profil__chiffres { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 5); margin: calc(var(--pas) * 5) 0; }
.profil__chiffres dt { color: var(--encre-douce); font-size: .9rem; }
.profil__chiffres dd { margin: 0; font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.profil h2 { font-size: 1.2rem; margin-bottom: calc(var(--pas) * 2); }
.profil__raretes { list-style: none; padding: 0; margin: 0 0 calc(var(--pas) * 5); }
.profil__raretes li {
  display: flex;
  align-items: center;
  gap: var(--pas);
  padding: var(--pas) 0;
  border-bottom: 1px solid rgba(23, 25, 61, .1);
}
.profil__raretes strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.profil__pastille { width: 12px; height: 12px; border-radius: 50%; background: var(--r-commun); }
.profil__raretes [data-rarete="peu-commun"] .profil__pastille { background: var(--r-peu-commun); }
.profil__raretes [data-rarete="rare"] .profil__pastille { background: var(--r-rare); }
.profil__raretes [data-rarete="epique"] .profil__pastille { background: var(--r-epique); }
.profil__raretes [data-rarete="legendaire"] .profil__pastille { background: var(--r-legendaire); }

/* ---------- Messages ---------- */

.flash {
  margin: 0 0 calc(var(--pas) * 3);
  padding: calc(var(--pas) * 1.5) calc(var(--pas) * 2);
  border-radius: 8px;
  border-left: 4px solid;
}
.flash p { margin: 0; }
.flash p + p, .flash form { margin-top: var(--pas); }
.flash--ok { background: #e3f6ec; border-color: var(--r-peu-commun); color: #0f5134; }
.flash--erreur { background: #fde8e8; border-color: #c62828; color: #7d1717; }
.flash--info { background: var(--boitier); border-color: var(--accent); }

.lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 700 1rem var(--police);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lien-fort { font-weight: 700; text-underline-offset: 4px; }
.lien-fort:hover { color: var(--accent); }

/* ---------- Connexion et inscription ---------- */

.auth { max-width: 420px; margin: 0 auto; }
.auth__intro { color: var(--encre-douce); margin: 0 0 calc(var(--pas) * 3); }

.auth__fournisseurs { display: grid; gap: calc(var(--pas) * 1.5); }
.bouton--fournisseur { background: var(--boitier); color: var(--encre); box-shadow: inset 0 0 0 1.5px rgba(23, 25, 61, .2); }
.bouton--fournisseur:hover { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.bouton--discord { background: #5865f2; color: #fff; box-shadow: none; }
.bouton--discord:hover { background: #4752c4; color: #fff; box-shadow: none; }

.auth__ou {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  margin: calc(var(--pas) * 4) 0 calc(var(--pas) * 3);
  color: var(--encre-douce);
  font-size: .9rem;
}
.auth__ou::before, .auth__ou::after { content: ""; flex: 1; height: 1px; background: rgba(23, 25, 61, .15); }

.auth__form { display: grid; gap: calc(var(--pas) * 2.5); }
.auth__form .bouton { margin-top: var(--pas); }

.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: .95rem; }
.champ input {
  min-height: 48px;
  padding: 0 calc(var(--pas) * 2);
  border: 1.5px solid rgba(23, 25, 61, .2);
  border-radius: 8px;
  background: #fff;
  color: var(--encre);
  font: 1rem var(--police);
}
.champ input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }

.auth__lien-discret { margin: calc(var(--pas) * -1) 0 0; font-size: .9rem; text-align: right; }
.auth__lien-discret a { color: var(--encre-douce); }
.auth__bas { margin: calc(var(--pas) * 4) 0 var(--pas); }
.auth__bas a { font-weight: 700; }
.auth__aide { margin: 0; color: var(--encre-douce); font-size: .9rem; }

.accueil__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pas) * 3); }

.profil__methodes { list-style: none; padding: 0; margin: 0 0 calc(var(--pas) * 5); }
.profil__methodes li {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 1.5) 0;
  border-bottom: 1px solid rgba(23, 25, 61, .1);
}
.profil__methodes strong, .profil__methodes em { color: var(--encre-douce); font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.profil__methodes a { font-weight: 700; }

/* ---------- Mobile ---------- */

@media (max-width: 560px) {
  .entete { gap: calc(var(--pas) * 1.5); }
  .grille-cd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--pas) * 4) calc(var(--pas) * 2.5); }
  .cd-carte__titre { font-size: .95rem; }
  .entete__joueur span { display: none; }
}

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