/* ═══════════════════════════════════════════════════════════════════
   FEUILLE DE STYLE — l'apparence de toute la page.

   Toutes les couleurs sont des variables, regroupées tout en haut et
   rangées par rôle. Aucune couleur n'est écrite en dur dans le reste
   du fichier : c'est ce qui permet de changer de thème d'un bloc.

   Le thème « Ocre » vit dans :root, donc il s'applique par défaut.
   Les autres thèmes ne font que redéfinir ces mêmes variables, sous
   html[data-theme="…"] — l'attribut est posé par js/app.js.

   POUR AJOUTER UN THÈME :
     1. copier un bloc de thème entier, changer son nom ;
     2. remplacer les valeurs (elles sont dans le même ordre partout) ;
     3. ajouter l'option correspondante dans index.html.

   Le reste du fichier suit l'ordre de la page :
   en-tête, pierres d'âme, compteurs, barre de filtres, listes,
   lignes de monstres, bas de page, écrans étroits, thèmes.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- LE THÈME OCRE (celui d'origine, appliqué par défaut) ---------- */
:root {
  /* les fonds, du plus sombre au plus clair */
  --fond:          #191310;              /* fond de la page */
  --fond-entete:   #221912;              /* haut du dégradé de l'en-tête */
  --fond-barre:    rgba(25, 19, 16, .97);/* barre de filtres, translucide */
  --fond-bloc:     #241B15;              /* champs, boutons, cartes */
  --fond-survol:   #21180F;              /* une ligne survolée */
  --fond-coche:    #231A10;              /* une ligne dont l'âme est prise */
  --fond-creux:    #33261C;              /* jauge vide, rail de l'interrupteur */
  --fond-actif:    #332716;              /* onglet choisi, interrupteur allumé */
  --carte-haut:    #2B2014;              /* haut du dégradé de la carte finale */

  /* les traits */
  --trait:         #3C2E22;              /* toutes les bordures discrètes */
  --trait-discret: #2B2018;              /* séparateur entre deux lignes */
  --trait-case:    #5A4835;              /* contour d'une case à cocher */

  /* les textes */
  --texte:         #F3EADE;              /* texte principal */
  --texte-discret: #B8A48F;              /* texte secondaire */
  --texte-efface:  #94816E;              /* le plus pâle : indices, mentions */

  /* la couleur d'accent — c'est elle qui donne son identité au thème */
  --or:            #E0A63C;
  --or-clair:      #F6D590;
  --or-sombre:     #6E5220;
  --pastille:      #8E7A65;              /* l'interrupteur, éteint */

  /* les étiquettes Boss et Archimonstre */
  --violet-boss:   #CBA6EE;
  --trait-boss:    #54406B;
  --beige-archi:   #CDB69B;
  --trait-archi:   #4B3B2B;

  /* les avertissements */
  --rouge:         #E58D62;              /* bouton de remise à zéro */
  --alerte-fond:   #2E2015;
  --alerte-trait:  #7A4E2A;
  --alerte-texte:  #F2C696;
}

/* ---------- LES RÉGLAGES QUI NE DÉPENDENT PAS DU THÈME ---------- */
:root {
  --arrondi: 10px;
  --taille-texte: 19px;         /* taille de base de tout le texte */
  --taille-image-titre: 2.6rem; /* hauteur de l'image à côté du titre */

  /* La largeur de la page : tous les blocs, en-tête comprise, sont
     centrés sur cette largeur avec la même marge de chaque côté. */
  --largeur-max: 1400px;
  --marge-cote:  clamp(14px, 4vw, 52px);
}

* { box-sizing: border-box; }

html { font-size: var(--taille-texte); }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* la police à empattements, réservée aux titres */
.police-titre {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* la largeur commune à tous les blocs de la page */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--marge-cote);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* le contour doré quand on navigue au clavier */
:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- L'EN-TÊTE ---------- */
.entete {
  border-bottom: 1px solid var(--trait);
  background: linear-gradient(180deg, var(--fond-entete), var(--fond));
}

/* trois colonnes : une vide à gauche, le titre au milieu, le réglage à
   droite. Les deux colonnes extrêmes font la même largeur (1fr), donc le
   titre est vraiment au centre de la page, quelle que soit la largeur du
   bloc « Animations ».
   La largeur latérale vient de .conteneur : le bord droit du réglage
   tombe donc pile sur celui des pierres d'âme, juste en dessous. */
.entete-contenu {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding-top: 1.4rem;
  padding-bottom: 1.2rem;
}

.titre-ligne {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: .7rem;
}

/* l'image du titre : son adresse est dans index.html.
   Quelles que soient ses dimensions, elle garde ses proportions
   et ne dépasse jamais de la ligne du titre. */
.oeuf {
  height: var(--taille-image-titre);
  width: auto;
  max-width: calc(var(--taille-image-titre) * 1.6);
  object-fit: contain;
  flex: none;
}

.titre {
  font-size: 1.85rem;
  margin: 0;
  font-weight: 600;
}

/* les réglages (thème, animations), dans la troisième colonne, à droite */
.reglage {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .55rem .9rem;
  color: var(--texte-discret);
  font-size: .9rem;
}

/* chaque réglage reste d'un seul tenant : libellé et commande ne se
   séparent jamais, même quand la ligne se replie */
.reglage-theme,
.reglage-anim {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.reglage-theme select {
  padding: .34rem 1.6rem .34rem .7rem;
  border-radius: 99px;
  font-size: .86rem;
  color: var(--texte-discret);
  transition: border-color .25s ease, color .25s ease;
}

.reglage-theme select:hover {
  border-color: var(--or);
  color: var(--or-clair);
}

/* ---------- L'INTERRUPTEUR DES ANIMATIONS ---------- */
/* Trois tailles à changer si besoin, tout le reste en découle :
   la piste, la pastille, et le jeu entre les deux. */
.interrupteur {
  --piste:    3rem;
  --pastille: 1.2rem;
  --jeu:      .17rem;

  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--trait);
  background: var(--fond-bloc);
  border-radius: 99px;
  padding: .32rem .95rem .32rem .35rem;
  color: var(--texte-discret);
  font-size: .86rem;
  transition: border-color .25s ease, background .25s ease;
}

.interrupteur:hover { border-color: var(--or); }

/* la piste : le rail sur lequel la pastille glisse */
.interrupteur-piste {
  position: relative;
  flex: none;
  width: var(--piste);
  height: calc(var(--pastille) + 2 * var(--jeu));
  border-radius: 99px;
  background: var(--fond-creux);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
  transition: background .3s ease;
}

.interrupteur-pastille {
  position: absolute;
  top: var(--jeu);
  left: var(--jeu);
  width: var(--pastille);
  height: var(--pastille);
  border-radius: 50%;
  background: var(--pastille);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  /* le petit dépassement en fin de course donne le côté « ressort » */
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1),
              background .3s ease;
}

.interrupteur-etat {
  min-width: 4.4em;             /* la largeur ne saute pas d'un mot à l'autre */
  text-align: left;
  transition: color .3s ease;
}

/* ─── l'état allumé : c'est aria-pressed qui commande tout ─── */
.interrupteur[aria-pressed="true"] {
  border-color: var(--or-sombre);
  background: var(--fond-actif);
}

.interrupteur[aria-pressed="true"] .interrupteur-piste {
  background: linear-gradient(90deg, var(--or-sombre), var(--or));
}

.interrupteur[aria-pressed="true"] .interrupteur-pastille {
  transform: translateX(calc(var(--piste) - var(--pastille) - 2 * var(--jeu)));
  background: var(--or-clair);
}

.interrupteur[aria-pressed="true"] .interrupteur-etat { color: var(--or-clair); }

/* ---------- LE BANDEAU D'ALERTE (sauvegarde impossible) ---------- */
.alerte {
  display: none;                /* caché tant que tout va bien */
  margin: .9rem 0 0;
  border: 1px solid var(--alerte-trait);
  background: var(--alerte-fond);
  border-radius: 10px;
  padding: .8rem 1rem;
  color: var(--alerte-texte);
  font-size: .88rem;
}

.alerte.visible { display: block; }

.alerte b {
  display: block;
  color: var(--or-clair);
  margin-bottom: .2rem;
}

/* ---------- LES PIERRES D'ÂME ---------- */
/* sur la même ligne que les compteurs, mais poussées tout à droite */
.pierres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem 1.35rem;
  margin-left: auto;
}

.pierres-libelle {
  color: var(--texte-discret);
  font-size: .82rem;
  align-self: center;
}

.pierre {
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: opacity .25s ease;
}

.pierre-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
}

.pierre-icone svg,
.pierre-icone img {
  display: block;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.pierre b {
  font-size: 1.15rem;
  font-weight: 600;
}

/* palier terminé : on l'estompe au lieu de le retirer,
   pour que la ligne ne bouge pas */
.pierre.epuisee { opacity: .28; }

/* ---------- LES COMPTEURS ---------- */
.compteurs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 2.2rem;
  padding: 1.6rem 0 1.4rem;
  border-bottom: 1px solid var(--trait);
}

.compteur-total {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}

.compteur-total b {
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--or);
  line-height: 1;
}

.compteur-total span {
  color: var(--texte-discret);
  font-size: .95rem;
}

.compteurs-details {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.8rem;
  color: var(--texte-discret);
  font-size: .9rem;
}

.compteurs-details b {
  color: var(--texte);
  font-weight: 600;
}

/* ---------- LA BARRE DE FILTRES ---------- */
.barre-filtres {
  position: sticky;             /* elle reste en haut quand on défile */
  top: 0;
  z-index: 20;
  background: var(--fond-barre);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--trait);
  padding: .8rem 0;
}

.barre-filtres-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.recherche {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--fond-bloc);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  padding: .15rem .7rem;
}

.recherche input {
  flex: 1;
  background: none;
  border: none;
  color: var(--texte);
  font: inherit;
  padding: .6rem 0;
  min-width: 0;
}

.recherche input::placeholder { color: var(--texte-efface); }

/* le contour doré se dessine autour de toute la barre, pas du seul champ */
.recherche input:focus,
.recherche input:focus-visible {
  outline: none;
  box-shadow: none;
}

.recherche:focus-within {
  outline: 3px solid var(--or);
  outline-offset: 2px;
}

.recherche button {
  color: var(--texte-discret);
  font-size: 1.3rem;
  padding: 0 .2rem;
}

select {
  background: var(--fond-bloc);
  border: 1px solid var(--trait);
  color: var(--texte);
  border-radius: var(--arrondi);
  padding: .62rem .7rem;
  font: inherit;
}

/* les trois boutons collés : Étapes / Régions / Niveaux */
.choix-vue {
  display: flex;
  background: var(--fond-bloc);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  overflow: hidden;
}

.choix-vue button {
  padding: .62rem .9rem;
  color: var(--texte-discret);
  white-space: nowrap;
}

.choix-vue button[aria-pressed="true"] {
  background: var(--fond-actif);
  color: var(--or-clair);
}

.bouton {
  border: 1px solid var(--trait);
  background: var(--fond-bloc);
  border-radius: var(--arrondi);
  padding: .62rem .9rem;
  color: var(--texte-discret);
  white-space: nowrap;
}

.bouton:hover {
  border-color: var(--or);
  color: var(--or-clair);
}

/* ---------- LES GROUPES (une étape, une région, une tranche) ---------- */
main { padding-bottom: 3rem; }

.groupe { margin: 1.5rem 0 0; }

.groupe-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  border-bottom: 1px solid var(--trait);
}

/* le titre est un bouton : cliquer dessus plie ou déplie le groupe */
.groupe-titre {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .2rem .55rem 0;
  text-align: left;
}

.groupe-titre h2 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 600;
}

/* la petite flèche, qui pivote selon l'état */
.fleche {
  width: .85rem;
  height: .85rem;
  flex: none;
  border-right: 2.5px solid var(--texte-discret);
  border-bottom: 2.5px solid var(--texte-discret);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}

.groupe.replie .fleche {
  transform: rotate(-45deg) translate(-1px, 1px);
}

.groupe-detail {
  color: var(--texte-discret);
  font-size: .85rem;
}

.groupe-jauge {
  flex: 1 1 120px;
  height: 8px;
  min-width: 90px;
  background: var(--fond-creux);
  border-radius: 99px;
  overflow: hidden;
}

.groupe-jauge i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--or-sombre), var(--or));
  border-radius: 99px;
  transition: width .35s ease;
}

.groupe-compte {
  font-size: .95rem;
  color: var(--texte-discret);
  white-space: nowrap;
}

.groupe-compte b {
  color: var(--or-clair);
  font-weight: 600;
}

.groupe.termine .groupe-compte b { color: var(--or); }

.groupe.replie .groupe-lignes { display: none; }

/* ---------- UNE LIGNE DE MONSTRE ---------- */
.ligne {
  display: grid;
  grid-template-columns: auto 1fr auto;  /* case | infos | niveau */
  gap: .55rem .85rem;
  align-items: center;
  padding: .62rem .7rem;
  border-bottom: 1px solid var(--trait-discret);
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: background .18s ease, border-color .18s ease;
}

.ligne:hover { background: var(--fond-survol); }

.ligne.capturee {
  border-left-color: var(--or);
  background: var(--fond-coche);
}

.case-a-cocher {
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
  border: 2px solid var(--trait-case);
  border-radius: 8px;
  background: var(--fond);
  /* la coche est dessinée en currentColor : elle reprend le fond de la
     page, donc elle reste lisible sur l'accent, quel que soit le thème */
  color: var(--fond);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s, transform .18s;
}

.case-a-cocher svg {
  width: 1.35rem;
  height: 1.35rem;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s, transform .18s;
}

.ligne.capturee .case-a-cocher {
  background: var(--or);
  border-color: var(--or-clair);
}

.ligne.capturee .case-a-cocher svg {
  opacity: 1;
  transform: none;
}

.case-a-cocher:hover { border-color: var(--or); }

/* le petit rebond au moment où on coche */
.case-a-cocher.rebond { animation: rebond .4s ease; }

@keyframes rebond {
  0%   { transform: scale(.8); }
  50%  { transform: scale(1.18); }
  100% { transform: none; }
}

.monstre { min-width: 0; }

.monstre-nom {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}

.monstre-zone {
  color: var(--texte-discret);
  font-size: .83rem;
  margin-top: .12rem;
  overflow-wrap: anywhere;
}

.monstre-zone em {
  font-style: normal;
  color: var(--texte-efface);
}

.etiquette {
  display: inline-block;
  font-size: .72rem;
  padding: .08rem .45rem;
  border-radius: 5px;
  border: 1px solid;
  margin-left: .45rem;
  vertical-align: .12em;
  font-weight: 600;
}

.etiquette.boss {
  color: var(--violet-boss);
  border-color: var(--trait-boss);
}

.etiquette.archi {
  color: var(--beige-archi);
  border-color: var(--trait-archi);
}

.niveau {
  font-size: .95rem;
  color: var(--texte-discret);
  white-space: nowrap;
  border: 1px solid var(--trait);
  border-radius: 7px;
  padding: .18rem .5rem;
}

.aucun-resultat {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--texte-discret);
}

.aucun-resultat b {
  display: block;
  color: var(--texte);
  font-size: 1.1rem;
  margin-bottom: .4rem;
}

/* ---------- LE BAS DE PAGE ---------- */
.carte-finale {
  margin: 2rem 0 1.2rem;
  border: 1px solid var(--or-sombre);
  background: linear-gradient(180deg, var(--carte-haut), var(--fond-bloc));
  border-radius: 12px;
  padding: 1.1rem;
}

.carte-finale h2 {
  margin: 0 0 .3rem;
  font-size: 1.1rem;
}

.carte-finale p {
  margin: 0;
  color: var(--texte-discret);
  font-size: .88rem;
}

.carte-finale .ligne {
  border: none;
  padding: .7rem 0 0;
}

.outils {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  padding: 1rem 0 1.6rem;
  border-top: 1px solid var(--trait);
}

.outils .danger:hover {
  border-color: var(--rouge);
  color: var(--rouge);
}

.etat-sauvegarde {
  margin-left: auto;
  font-size: .82rem;
  color: var(--texte-efface);
}

.etat-sauvegarde.confirme { color: var(--or-clair); }

.note {
  color: var(--texte-discret);
  font-size: .8rem;
  padding-bottom: 2.5rem;
}

/* ---------- EN-TÊTE ÉTROIT ---------- */
/* Le centrage à trois colonnes n'est exact que si les colonnes de
   gauche et de droite peuvent faire la même largeur — autrement dit
   s'il reste, de chaque côté du titre, au moins la place du bloc
   « Animations ». En dessous, la colonne de droite s'élargit et pousse
   le titre vers la gauche : on empile alors le titre et le réglage,
   centrés l'un au-dessus de l'autre.
   Ce seuil dépend de la longueur du titre : rallonge-le nettement et
   il faudra monter ce chiffre d'autant. */
@media (max-width: 1200px) {
  .entete-contenu { grid-template-columns: 1fr; }

  .titre-ligne,
  .reglage { grid-column: 1; justify-self: center; }

  .titre { text-align: center; }
}

/* ---------- ÉCRANS ÉTROITS (téléphone) ---------- */
@media (max-width: 600px) {
  .barre-filtres { position: static; }

  .ligne { grid-template-columns: auto 1fr; gap: .45rem .6rem; }

  /* le niveau passe sous le nom faute de place */
  .niveau {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: .15rem;
  }

  .compteur-total b { font-size: 2.1rem; }
}

/* ---------- ANIMATIONS ---------- */
/* C'est l'interrupteur de la page qui décide, et lui seul.
   Le réglage du système (Windows : Paramètres → Accessibilité → Effets
   visuels → Effets d'animation) n'intervient qu'au tout premier
   chargement, pour choisir la position de départ de l'interrupteur —
   voir progression.animations dans js/app.js. Ensuite, c'est l'état de
   l'interrupteur qui est enregistré et qui commande cette règle. */
html[data-animations="non"] * {
  transition: none !important;
  animation: none !important;
}

/* Une seule exception : l'interrupteur lui-même. Sans elle, au moment
   précis où on coupe les animations, sa pastille sauterait d'un bord à
   l'autre — juste quand on a besoin de voir que le clic a été pris. */
html[data-animations="non"] .interrupteur,
html[data-animations="non"] .interrupteur-piste,
html[data-animations="non"] .interrupteur-pastille,
html[data-animations="non"] .interrupteur-etat {
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1),
              background .3s ease,
              border-color .25s ease,
              color .3s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LES THÈMES

   Chaque bloc redéfinit les mêmes variables que le thème Ocre, tout en
   haut du fichier, et dans le même ordre. Rien d'autre à toucher :
   toutes les règles de la page passent déjà par ces variables.

   L'attribut data-theme est posé sur <html> par js/app.js d'après le
   choix fait dans l'en-tête. Le thème Ocre n'a pas de bloc ici : il est
   dans :root, donc il s'applique quand aucun autre n'est demandé.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- BONTA — bleus et argent, clair ---------- */
html[data-theme="bonta"] {
  --fond:          #1B2C40;
  --fond-entete:   #25405C;
  --fond-barre:    rgba(27, 44, 64, .97);
  --fond-bloc:     #243952;
  --fond-survol:   #223650;
  --fond-coche:    #274460;
  --fond-creux:    #2F4F70;
  --fond-actif:    #2F5A83;
  --carte-haut:    #2A4A69;

  --trait:         #3E6187;
  --trait-discret: #2A4360;
  --trait-case:    #5E8DBC;

  --texte:         #EEF6FF;
  --texte-discret: #C0D6EE;
  --texte-efface:  #97B3D0;

  --or:            #6EC8FF;
  --or-clair:      #BCE6FF;
  --or-sombre:     #2F6E9E;
  --pastille:      #9BB4CE;

  --violet-boss:   #D6BFFF;
  --trait-boss:    #6A5C9C;
  --beige-archi:   #D5E2F0;
  --trait-archi:   #55708F;

  --rouge:         #FF9A6B;
  --alerte-fond:   #2E3A52;
  --alerte-trait:  #5B7BA4;
  --alerte-texte:  #D7E7FA;
}

/* ---------- BRAKMAR — noir et rouge sang ---------- */
html[data-theme="brakmar"] {
  --fond:          #120B0C;
  --fond-entete:   #1C1011;
  --fond-barre:    rgba(18, 11, 12, .97);
  --fond-bloc:     #201314;
  --fond-survol:   #190F10;
  --fond-coche:    #251213;
  --fond-creux:    #2E1A1B;
  --fond-actif:    #38191A;
  --carte-haut:    #2C1516;

  --trait:         #402425;
  --trait-discret: #2A1819;
  --trait-case:    #5E3536;

  --texte:         #F4E6E4;
  --texte-discret: #C0A09E;
  --texte-efface:  #9A7B79;

  --or:            #D8433F;
  --or-clair:      #F59089;
  --or-sombre:     #6E1F1D;
  --pastille:      #8E6A68;

  --violet-boss:   #D6A0E8;
  --trait-boss:    #5A3A6B;
  --beige-archi:   #D2B0A6;
  --trait-archi:   #543732;

  /* orange plutôt que rouge : sur ce thème, le rouge est déjà la
     couleur d'accent, le bouton de remise à zéro doit s'en distinguer */
  --rouge:         #E5A05F;
  --alerte-fond:   #2A1412;
  --alerte-trait:  #7A3A2A;
  --alerte-texte:  #F2B9A0;
}

/* ---------- ÉBÈNE — noir et argent ----------
   Celui-ci est volontairement sombre : c'est tout son propos. L'accent
   est argenté plutôt que coloré, pour rester neutre face à Brakmar, qui
   est noir lui aussi mais tire vers le rouge sang. */
html[data-theme="ebene"] {
  --fond:          #0E0E10;
  --fond-entete:   #17171A;
  --fond-barre:    rgba(14, 14, 16, .97);
  --fond-bloc:     #18181A;
  --fond-survol:   #141416;
  --fond-coche:    #1D1D20;
  --fond-creux:    #2A2A2E;
  --fond-actif:    #2E2E33;
  --carte-haut:    #212125;

  --trait:         #33333A;
  --trait-discret: #222226;
  --trait-case:    #4E4E57;

  --texte:         #F2F2F4;
  --texte-discret: #AFAFB8;
  --texte-efface:  #85858E;

  --or:            #C8C8D2;
  --or-clair:      #EFEFF4;
  --or-sombre:     #55555F;
  --pastille:      #7A7A84;

  --violet-boss:   #C9B5E8;
  --trait-boss:    #4E4560;
  --beige-archi:   #C8C4BC;
  --trait-archi:   #4A4842;

  --rouge:         #E58D62;
  --alerte-fond:   #26201C;
  --alerte-trait:  #5E4C3E;
  --alerte-texte:  #E3C7AE;
}

/* ---------- ÉMERAUDE — le vert vif du Dofus, clair ---------- */
html[data-theme="emeraude"] {
  --fond:          #1B3326;
  --fond-entete:   #26492F;
  --fond-barre:    rgba(27, 51, 38, .97);
  --fond-bloc:     #234230;
  --fond-survol:   #21402E;
  --fond-coche:    #275030;
  --fond-creux:    #315C3F;
  --fond-actif:    #35723F;
  --carte-haut:    #2C5539;

  --trait:         #43764E;
  --trait-discret: #2A4C36;
  --trait-case:    #62A272;

  --texte:         #EFFBEE;
  --texte-discret: #BCDFC2;
  --texte-efface:  #96BF9E;

  --or:            #86E24B;
  --or-clair:      #C3F58F;
  --or-sombre:     #34823A;
  --pastille:      #93C295;

  --violet-boss:   #D9BCFF;
  --trait-boss:    #6A5590;
  --beige-archi:   #E2EDBB;
  --trait-archi:   #6D7F4A;

  --rouge:         #FF9A6B;
  --alerte-fond:   #3C4626;
  --alerte-trait:  #849046;
  --alerte-texte:  #EFF5C6;
}

/* ---------- SUFOKIA — turquoise, clair ---------- */
html[data-theme="sufokia"] {
  --fond:          #10333A;
  --fond-entete:   #17454E;
  --fond-barre:    rgba(16, 51, 58, .97);
  --fond-bloc:     #17414A;
  --fond-survol:   #163E46;
  --fond-coche:    #194C55;
  --fond-creux:    #1F5A64;
  --fond-actif:    #1E6B78;
  --carte-haut:    #1B555F;

  --trait:         #2F6E79;
  --trait-discret: #1C4B54;
  --trait-case:    #4E9BA8;

  --texte:         #EAFAFC;
  --texte-discret: #B2DDE4;
  --texte-efface:  #8BBAC2;

  --or:            #43DDE8;
  --or-clair:      #A8F2F8;
  --or-sombre:     #1E7E8A;
  --pastille:      #8FC0C8;

  --violet-boss:   #D2BAFF;
  --trait-boss:    #5E5A96;
  --beige-archi:   #C9E4DF;
  --trait-archi:   #4A7F7C;

  --rouge:         #FF9A6B;
  --alerte-fond:   #2E4247;
  --alerte-trait:  #63918E;
  --alerte-texte:  #D2ECEA;
}