/* Héros du Jour : les bases du design « Le classeur de casting ».
   Une table de bureau bleu nuit (en mode clair comme en mode sombre) sur laquelle on pose des fiches de papier.
   Les couleurs sont toutes définies ici : les autres fichiers CSS ne font que s'en servir. */

:root {
  --bureau: #2d4a78;          /* la table */
  --sur-bureau: #f3f6fb;      /* le texte posé directement sur la table */
  --papier: #fdfdfb;
  --papier-2: #eef0ec;
  --encre: #1b2a2b;
  --encre-douce: #51625f;
  --trait: #cfd6d2;
  --tampon: #c4352c;
  --postit: #ffd95a;
  --postit-texte: #2a2410;
  --onglet: #1b2a2b;
  --onglet-texte: #f6f6f1;
  --ok: #2f8f5b;
  --partiel: #e9a23b;
  --non: #c4423a;
  --accent: #ffd95a;          /* contour de focus sur la table */

  /* Une couleur par thème (Marvel, DC, Films…). Pour ajouter un thème : une ligne ici,
     et une ligne « .univers-nom » plus bas (« jeux-video » pour « Jeux vidéo »). */
  --u-marvel: #c4352c;
  --u-dc: #2f5dba;
  --u-manga: #e08a1e;
  --u-inde: #7b4db5;
  --u-films: #1e8e8a;
  --u-series: #b5487a;
  --u-jeux-video: #2a9bd6;
  --u-livres: #8a6a3a;

  /* Les feuilles de rareté des cartes */
  --or-1: #f7e08a; --or-2: #d9a52a; --or-3: #fff1b8;
  --argent-1: #eef1f4; --argent-2: #a3acb6; --argent-3: #ffffff;
  --bronze-1: #cfae85; --bronze-2: #8c6c46; --bronze-3: #e6cfae;

  --ombre-papier: 0 1px 0 rgba(0, 0, 0, 0.18), 0 8px 14px -8px rgba(0, 0, 0, 0.45);
  color-scheme: light;
}

/* Le mode sombre : choisi avec le bouton de l'en-tête (js/theme.js ajoute data-theme="sombre") */
:root[data-theme="sombre"] {
  --bureau: #0f1d35;
  --sur-bureau: #e6edf3;
  --papier: #1f2b29;
  --papier-2: #2a3836;
  --encre: #e9efea;
  --encre-douce: #a7b8b2;
  --trait: #3a4a47;
  --tampon: #ef6a5e;
  --onglet: #e9efea;
  --onglet-texte: #14201e;
  --ok: #3aa86d;
  --partiel: #eeae4c;
  --non: #d9544a;
  --ombre-papier: 0 1px 0 rgba(0, 0, 0, 0.5), 0 8px 14px -8px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* La couleur de chaque thème, utilisée par les badges, les onglets et les cartes (variable --c) */
.univers-marvel { --c: var(--u-marvel); }
.univers-dc     { --c: var(--u-dc); }
.univers-manga  { --c: var(--u-manga); }
.univers-inde   { --c: var(--u-inde); }
.univers-films  { --c: var(--u-films); }
.univers-series { --c: var(--u-series); }
.univers-jeux-video { --c: var(--u-jeux-video); }
.univers-livres { --c: var(--u-livres); }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--sur-bureau);
  background: var(--bureau);
}

button, select, input {
  font: inherit;
  color: inherit;
}

h1, h2, h3, p {
  margin: 0;
}

/* Texte caché à l'écran mais lu par les lecteurs d'écran */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Message affiché seulement si JavaScript est désactivé */
.sans-javascript {
  margin: 0;
  padding: 12px 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background: var(--non);
}

/* Le contour de focus (navigation au clavier) : bien visible sur la table comme sur le papier */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.fenetre :focus-visible {
  outline-color: var(--encre);
}

/* La silhouette : l'emplacement des futures illustrations (un dessin sera glissé à la place) */
.silhouette {
  fill: currentColor;
}

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

/* Bouton principal : posé sur du papier (dans une fenêtre), il est en encre */
.bouton {
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--papier);
  background: var(--encre);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.bouton:active {
  transform: translateY(1px);
}

.bouton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Bouton secondaire dans une fenêtre : juste un contour */
.bouton-discret {
  color: var(--encre);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--encre);
}

/* Bouton posé directement sur la table : c'est une fiche de papier */
.bouton-table {
  color: var(--encre);
  background: var(--papier);
  box-shadow: var(--ombre-papier), inset 0 0 0 1px var(--trait);
}

.bouton svg,
.outils svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pour les personnes qui préfèrent peu d'animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}