/* Sorties metal, feuille unique.

   Un seul monde visuel, sombre, celui de la maquette validee : toutes les
   couleurs sont peintes explicitement plutot que deduites du theme du
   navigateur. Une liste d'albums metal lue le soir n'a rien a gagner d'un fond
   blanc.

   Trois familles de regles seulement : le bandeau et ses onglets, la ligne de
   sortie, et les blocs de reglage. Tout le reste en decoule. */

:root {
  --fond: #15161a;
  --surface: #1e2027;
  --surface-haute: #262932;
  --bord: #2f323c;
  --bord-clair: #3c404c;
  --texte: #e9eaee;
  --texte-doux: #9a9daa;
  --texte-faible: #6f7380;
  --accent: #c2452e;
  --accent-vif: #d8543c;
  --suivi: #4f9367;
  --alerte: #c9a227;

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --corps: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

main {
  max-width: 880px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 0 56px;
}

/* ------------------------------------------------------------------ en-tete */

header.bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(21, 22, 26, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}

.bandeau-interieur {
  max-width: 880px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 12px 0;
}

.titre-rangee { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

h1 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

h1 a { color: inherit; text-decoration: none; }

.releve {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

nav.onglets { display: flex; gap: 2px; margin-top: 10px; flex-wrap: wrap; }

nav.onglets a {
  border-bottom: 2px solid transparent;
  color: var(--texte-doux);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  text-decoration: none;
}

nav.onglets a:hover { color: var(--texte); }
nav.onglets a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--accent); }
nav.onglets .compteur { color: var(--texte-faible); font-size: 13px; margin-left: 5px; }
nav.onglets a[aria-current="page"] .compteur { color: var(--accent-vif); }

/* -------------------------------------------------------------------- texte */

h2 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 28px 0 10px;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 20px 0 8px;
}

p.chapo, p.aide { color: var(--texte-doux); margin: 0 0 16px; max-width: 62ch; }
p.note, .note, p.compte { color: var(--texte-faible); font-size: 13.5px; }
a { color: var(--accent-vif); }

pre {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 3px;
  padding: 12px;
  overflow-x: auto;
  font-size: 12.5px;
  color: var(--texte-doux);
}

code { font-size: 13px; color: var(--texte); }

/* ---------------------------------------------------------- bandeaux d'avis */

.messages { margin-block: 18px; display: flex; flex-direction: column; gap: 8px; }

.message, .avis {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--alerte);
  border-radius: 3px;
  padding: 13px 15px;
  margin: 0;
  font-size: 14px;
  color: var(--texte-doux);
}

.message strong, .avis strong { color: var(--texte); font-weight: 600; }
.message.ok { border-left-color: var(--suivi); }
.message.erreur { border-left-color: var(--accent); }
.message.info { border-left-color: var(--bord-clair); }

.erreur-bloc { border-left: 3px solid var(--accent); }

/* Rappel de la pile, en haut de l'accueil. */
a.rappel-pile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 13px 15px;
  margin-block: 18px;
  color: var(--texte-doux);
  text-decoration: none;
}

a.rappel-pile:hover { background: var(--surface-haute); }
a.rappel-pile strong {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-vif);
}

/* -------------------------------------------------------------------- liste */

ul.sorties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

li.sortie {
  display: grid;
  grid-template-columns: minmax(150px, max-content) minmax(0, 1fr) auto;
  gap: 6px 18px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 3px;
  padding: 12px 15px;
}

li.sortie.proche { border-left: 3px solid var(--accent); padding-left: 12px; }

.colonne-date { display: flex; flex-direction: column; gap: 2px; }

.jour {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.compte-a-rebours {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.compte-a-rebours.aujourdhui { color: var(--accent-vif); }
.compte-a-rebours.approx { font-style: italic; text-transform: none; letter-spacing: 0.02em; }

/* La vraie pochette quand elle a ete telechargee, sinon une vignette dont la
   teinte derive du nom du groupe, stable d'une visite a l'autre. Les deux
   occupent exactement la meme place : les lignes gardent leur alignement, que
   l'image soit arrivee ou non. */
/* Un carre de la hauteur du bloc de texte qu'elle accompagne : nom du groupe,
   titre de l'album et ligne d'etiquettes cumules font 74 pixels. La faire
   suivre la hauteur reelle de chaque ligne serait plus juste sur le papier,
   mais en disposition flexible la largeur ne se deduit pas d'une hauteur
   etiree : la pochette deviendrait haute et etroite, recadree sur ses bords,
   ce qui est pire pour une pochette de disque. */
.vignette, img.pochette {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 3px;
  border: 1px solid var(--bord-clair);
}

.vignette {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  user-select: none;
}

img.pochette { object-fit: cover; background: var(--surface-haute); }

.colonne-titre { min-width: 0; display: flex; gap: 13px; align-items: flex-start; }
.colonne-titre > .texte { min-width: 0; }

.groupes { font-weight: 600; font-size: 15.5px; }
.album { color: var(--texte-doux); }
.album a { color: inherit; text-decoration: none; }
.album a:hover { color: var(--accent-vif); text-decoration: underline; }

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.etiquette { color: var(--texte-faible); border: 1px solid var(--bord-clair); border-radius: 2px; padding: 1px 7px; }
.etiquette.genre { text-transform: none; letter-spacing: 0.01em; font-family: var(--corps); font-size: 12.5px; border: 0; padding: 1px 0; }
.etiquette.label { color: var(--texte-doux); border-color: var(--bord-clair); }

.colonne-action { display: flex; flex-direction: column; gap: 5px; align-items: stretch; max-width: 220px; }
.colonne-action form { margin: 0; display: flex; }
.colonne-action button { white-space: normal; line-height: 1.25; width: 100%; }

/* ------------------------------------------------------------------ boutons */

button {
  appearance: none;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid var(--bord-clair);
  background: var(--surface-haute);
  color: var(--texte-doux);
  text-align: left;
}

button:hover { background: var(--bord); color: var(--texte); }
button.suivi { background: var(--suivi); border-color: var(--suivi); color: #f2f7f3; }
button.suivi:hover { background: #447f59; }
button.a-ecouter { background: var(--accent); border-color: var(--accent); color: #fdf3f1; }
button.a-ecouter:hover { background: var(--accent-vif); }
button.principal { background: var(--accent); border-color: var(--accent); color: #fdf3f1; }
button.principal:hover { background: var(--accent-vif); }
button.discret, button.secondaire { color: var(--texte-faible); }
button.discret:hover, button.secondaire:hover { color: var(--texte); }

button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-vif);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ filtres */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 3px;
  padding: 13px 15px;
  margin-bottom: 16px;
}

.champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.champ label, .filtres label {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

select, input[type="text"], input[type="password"] {
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bord-clair);
  border-radius: 2px;
  padding: 7px 9px;
  font-family: var(--corps);
  font-size: 14px;
  min-width: 150px;
  max-width: 100%;
}

.ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block: 14px; }
.ligne .aide, .ligne .note { margin: 0; }

/* ----------------------------------------------------------- listes courtes */

ul.jetons { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }

ul.jetons li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 2px;
  padding: 5px 7px 5px 12px;
}

ul.jetons .nom { font-weight: 500; }
ul.jetons form { margin: 0; display: flex; }

button.retirer {
  background: transparent;
  border: 0;
  color: var(--texte-faible);
  font-size: 17px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 2px;
}

button.retirer:hover { color: var(--accent-vif); background: var(--surface-haute); }

ul.abonnements { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; }

ul.abonnements li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--suivi);
  border-radius: 3px;
  padding: 11px 13px;
}

ul.abonnements form { margin: 0; }
.abonnement-detail { color: var(--texte-faible); font-size: 13.5px; }

/* ------------------------------------------------------------------- apercu */

.apercu {
  background: var(--surface);
  border: 1px solid var(--bord-clair);
  border-radius: 3px;
  padding: 15px;
  margin-bottom: 16px;
}

.apercu-chiffre { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: 0.02em; }
.apercu-chiffre .unite { font-size: 16px; color: var(--texte-doux); letter-spacing: 0.05em; text-transform: uppercase; }
.apercu-avertissement { color: var(--alerte); font-size: 13.5px; margin-top: 6px; }
.apercu-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.apercu-actions form { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------- vide */

.vide {
  background: var(--surface);
  border: 1px dashed var(--bord-clair);
  border-radius: 3px;
  padding: 22px 18px;
  color: var(--texte-doux);
}

.vide p { margin: 0 0 8px; }
.vide p:last-child { margin-bottom: 0; }
.vide ul { margin: 8px 0 0; padding-left: 20px; }

/* ----------------------------------------------------------------- reglages */

table.stats {
  border-collapse: collapse;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 3px;
  margin-bottom: 16px;
}

table.stats td { padding: 9px 13px; border-bottom: 1px solid var(--bord); }
table.stats tr:last-child td { border-bottom: 0; }
table.stats td:first-child { color: var(--texte-doux); }
table.stats td:last-child {
  text-align: right;
  font-family: var(--display);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

section { margin-bottom: 8px; }

/* ------------------------------------------------------------------- connexion */

.connexion {
  max-width: 340px;
  margin: 12vh auto 0;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 3px;
  padding: 22px;
}

.connexion h1 { font-size: 22px; margin-bottom: 14px; }
.connexion form { display: flex; flex-direction: column; gap: 10px; }
.connexion input { min-width: 0; }

/* ---------------------------------------------------------------------- pied */

footer.pied {
  max-width: 880px;
  margin: 34px auto 0;
  padding: 16px 16px 40px;
  border-top: 1px solid var(--bord);
  color: var(--texte-faible);
  font-size: 13.5px;
}

footer.pied form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
footer.pied p { margin: 0 0 8px; max-width: 62ch; }

@media (max-width: 540px) {
  li.sortie { grid-template-columns: 1fr; gap: 4px; }
  .colonne-date { flex-direction: row; align-items: baseline; gap: 9px; }
  .vignette, img.pochette { width: 64px; height: 64px; font-size: 18px; }
  .colonne-action { margin-top: 7px; max-width: none; }
  .filtres > .champ, .filtres select, .filtres input[type="text"] { width: 100%; }
  h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}