/* ============================================================================
   THÈME « ENCRE & REIATSU » : BleachSoulResonance.guide
   ----------------------------------------------------------------------------
   Objectif : donner au site sa propre identité visuelle, distincte du site
   source, SANS toucher à la structure ni à la lisibilité.

   Principe : le layout (sidebar, grilles, thème sombre) est la grammaire
   commune de tous les wikis de jeu ; ce qui rend un site reconnaissable,
   c'est sa couche d'identité. On ne change que ça :

   1. PALETTE  : l'indigo #6366f1 + doré #FBED6E du site source cèdent la
      place à l'identité déjà présente dans NOS assets (logo, favicon,
      bannière) : orange Ichigo #f7a832 sur noir d'encre, plus un cyan
      « reiatsu » réservé aux valeurs d'énergie et aux soulignés.
   2. TYPOGRAPHIE : titrage en Chakra Petch (anguleuse, auto-hébergée,
      licence OFL), corps de texte inchangé (Source Sans, lisibilité).
   3. FORMES : rayon global 5px -> 3px, plus tranchant (une variable,
      91 usages). Souligné de titres en lame biseautée, écho du logo.
   4. ÉCHELLE DE TIERS : l'arc-en-ciel rouge->vert du site source devient
      une échelle maison : T0 orange (la marque = le sommet), T1 cyan,
      T2 violet, puis gris décroissants.

   Ce fichier est chargé en DERNIER : il gagne la cascade à spécificité
   égale. Tout est réversible en retirant une balise <link>.
   ========================================================================== */

/* ---------- typographie de titrage (auto-hébergée, aucun appel externe) --- */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_bsr/fonts/chakra-petch-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_bsr/fonts/chakra-petch-700.woff2') format('woff2');
}

/* ---------- jetons ------------------------------------------------------- */
:root {
  /* accents : l'identité de NOS assets remplace celle du site source */
  --accent: #f7a832;            /* indigo -> orange Ichigo (logo, favicon, bannière) */
  --accent-hover: #ffbe5c;
  --gold: #f7a832;              /* le doré anigacha (39 usages) s'aligne sur la marque */
  --blue-100: #46cfe0;          /* bleu générique -> cyan reiatsu (soulignés, liens) */

  /* --blue était la variable la plus rentable du lot : 24 usages jamais
     repris (dates des mises à jour, index numérotés, curseurs, boutons
     d'action, barres de score, en-têtes de groupes...). Une ligne ici
     remplace une trentaine de règles. */
  --blue: #46cfe0;

  /* violet aligné sur celui de la tier list T2, au lieu du #b86aff d'origine */
  --purple: #a78bfa;

  /* le vert reste SÉMANTIQUE (points forts, statuts actifs) : on le garde,
     mais le #32ff7e fluo d'origine jurait avec les fonds d'encre */
  --green: #4ade80;

  /* gris secondaire débleuté (43 usages) : s'accorde à l'encre neutre */
  --text-secondary: #9a9aa6;

  /* formes : plus tranchant, écho de la diagonale du logo */
  --border-radius: 3px;

  /* fonds : glissement subtil vers un noir d'encre neutre */
  --bg-primary: #0b0b0e;
  --bg-secondary: #131318;
  --bg-card: #17171e;
  --bg-hover: #20202a;

  /* jetons du fichier d'animations : les lueurs suivent la nouvelle identité */
  --bsr-gold: #f7a832;
  --bsr-reiatsu: rgba(247, 168, 50, .5);

  --bsr-display: 'Chakra Petch', 'Source Sans 3 Variable', sans-serif;
}

/* ---------- titrage ------------------------------------------------------ */
h1, .page-title,
h2.section-title, .section-title,
.header-separator, .category-title,
.tier-label,
.section-title-sidebar,
.pros-cons-heading,
.stamp-group-title {
  font-family: var(--bsr-display);
  letter-spacing: .02em;
}

/* souligné de titre : fine ligne + lame biseautée orange (écho du logo) */
.section-title,
.header-separator {
  border-bottom: 1px solid rgba(247, 168, 50, .28) !important;
  padding-bottom: .45rem;
}
/* bottom:0 et non négatif : anim.css pose overflow:hidden sur ces titres,
   une lame placée hors de la boîte serait rognée et donc invisible */
.section-title::before,
.header-separator::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, #f7a832, #ff7a2f);
  transform: skewX(-24deg);
}

/* ---------- en-tête : liseré d'énergie ----------------------------------- */
.header-nav {
  position: relative;
  border-bottom: 1px solid #1c1b21 !important;
}
.header-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #f7a832 0%, rgba(70, 207, 224, .8) 38%, transparent 78%);
  pointer-events: none;
}

/* ---------- navigation latérale ------------------------------------------ */
.menu-item.active {
  background: linear-gradient(90deg, rgba(247, 168, 50, .13), transparent 70%);
}
.menu-item {
  transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}

/* ---------- lexique coloré des compétences -------------------------------
   Triade du site source : jaune #fde047 / rose #fb7185 / bleu #93c5fd.
   La nôtre : cyan reiatsu pour les VALEURS (l'énergie), orange pour les
   MOTS-CLÉS (la marque), violet doux pour les TAGS d'état. */
.skill-value {
  color: #5fd9ea;
  font-family: var(--bsr-display);
  font-weight: 600;
}
.skill-keyword { color: #ffab52; }
.skill-tag     { color: #b7a4f7; }

/* ---------- échelle de tiers maison --------------------------------------
   (double attribut = même spécificité que la règle d'origine ; chargé
   après, donc gagnant, sans !important) */
.tier-label[data-tier=T0][data-tier] {
  background: linear-gradient(135deg, #f7a832, #ff7a2f);
  color: #1a1206;
}
.tier-label[data-tier=T1][data-tier] { background: #46cfe0; color: #06272c; }
.tier-label[data-tier=T2][data-tier] { background: #a78bfa; color: #221a45; }
.tier-label[data-tier=T3][data-tier] { background: #64748b; color: #f1f5f9; }
.tier-label[data-tier=T4][data-tier] { background: #3f4451; color: #cbd5e1; }

/* ---------- boutons et filtres ------------------------------------------- */
.filter-btn {
  font-family: var(--bsr-display);
  font-weight: 600;
  letter-spacing: .03em;
}
.filter-btn.active {
  background: #f7a832;
  border-color: #f7a832;
  color: #181205;
}

/* ---------- lueurs de survol alignées sur la marque -----------------------
   (anim.css code en dur des rgba dorés : on réaligne les principales) */
.bsr-anim article.card:hover,
.bsr-anim a.char-card:hover,
.bsr-anim .character-card:hover,
.bsr-anim .hub-card:hover,
.bsr-anim .link-card:hover,
.bsr-anim .stamp-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(247, 168, 50, .30);
}
.bsr-anim article.card[data-rarity="SSR"]:hover,
.bsr-anim a.char-card[data-char-rarity="SSR"]:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, .6), 0 0 30px rgba(247, 168, 50, .55);
}

/* ==========================================================================
   PHASE 2 : les vestiges qui restaient
   --------------------------------------------------------------------------
   Le CSS d'origine code en dur 52 occurrences de bleu / violet que les
   variables ne couvraient pas. Les composants concernés sont visibles sur
   presque toutes les pages : fonds de portraits, conteneurs de groupes,
   bandeau des mises à jour, badges de rareté, onglets de compétences.

   NOTE DE SPÉCIFICITÉ : les règles d'origine s'écrivent
   `.classe[data-astro-cid-xxxx]`, soit (0,2,0). Une classe simple (0,1,0)
   perdrait. On double donc la classe (`.x.x` = (0,2,0)) pour égaliser :
   à spécificité égale, le fichier chargé en dernier gagne. Aucun !important.
   ========================================================================== */

/* ---------- fonds derrière les portraits ---------------------------------
   C'était le bleu-vert #25424a -> #233b4a, présent sur CHAQUE carte de
   personnage : le vestige le plus diffus du site. Il devient de l'encre,
   ce qui laisse les illustrations ressortir au lieu de les teinter.
   Les variantes par étoiles restent distinctes (c'est une information),
   mais recalées sur notre échelle : 5* chaud/marque, 4* violet. */
.character-image-wrap.character-image-wrap,
.featured-member-image-wrap.featured-member-image-wrap {
  background: linear-gradient(180deg, #1a1a22, #121218 62%);
}
.character-image-wrap.character-image-wrap[data-stars="5"] {
  background: linear-gradient(180deg, #4a3316, #8a5a1e 58%);
}
.character-image-wrap.character-image-wrap[data-stars="4"] {
  background: linear-gradient(180deg, #2a2440, #5b3f8f 58%);
}
.character-image-wrap.character-image-wrap[data-stars="3"] {
  background: linear-gradient(180deg, #1c2a2e, #2a4147 58%);
}

/* ---------- conteneurs de groupes ---------------------------------------
   Fond bleu ardoise (#0f172a) -> encre, avec un filet orange à gauche :
   il structure la lecture des longues pages de compétences sans ajouter
   de bruit visuel. */
.skill-group.skill-group,
.stamp-group.stamp-group {
  background: linear-gradient(180deg, rgba(28, 28, 36, .55), rgba(20, 20, 26, .25));
  border-left: 2px solid rgba(247, 168, 50, .35);
}

/* ---------- bandeau « Dernières mises à jour » ---------------------------
   Dégradé bleu marine #1a1a2e -> #16213e : l'aplat le plus voyant de la
   page d'accueil, et le dernier morceau franchement « autre site ». */
.notice-updates-header {
  background: linear-gradient(135deg, #191921, #14141a);
  border-bottom: 2px solid rgba(247, 168, 50, .55);
}
.notice-updates {
  border-color: rgba(247, 168, 50, .22);
}
/* la règle d'origine est contextuelle (`.notice-updates-list .update-date`,
   soit (0,2,0)) : il faut la même forme pour l'emporter */
.notice-updates-list .update-date,
.update-date.update-date {
  color: #f7a832;
  font-family: var(--bsr-display);
  font-weight: 600;
}

/* ---------- échelle de rareté unifiée ------------------------------------
   Elle était dispersée : SSR ambre, SR bleu, SR+ violet, sans logique
   commune. Une seule échelle, alignée sur l'identité :
   SSR orange (le plus précieux porte la couleur de marque),
   SR+ violet, SR cyan, R gris. */
.stamp-name-bar.stamp-name-bar[data-rarity=ssr] { --stamp-rarity-color: #f7a832; }
.stamp-name-bar.stamp-name-bar[data-rarity=sr]  { --stamp-rarity-color: #46cfe0; }
.stamp-name-bar.stamp-name-bar[data-rarity=r]   { --stamp-rarity-color: #7c8496; }

.rarity-ssr    { border-color: #f7a832; }
.rarity-srplus { border-color: #a78bfa; }
.rarity-sr     { border-color: #46cfe0; }

/* ---------- onglets de compétences --------------------------------------
   L'onglet actif était bleu (#1f4d7a / #4a9eff) : c'est l'état sélectionné
   le plus vu sur une fiche personnage. */
.max-toggle:checked + .skill-tab.skill-tab,
.skill-tab.skill-tab.is-active {
  background: rgba(247, 168, 50, .14);
  border-color: #f7a832;
  color: #ffce7a;
}

/* ---------- badges et étiquettes ----------------------------------------- */
.badge-general.badge-general {
  background: rgba(70, 207, 224, .13);
  color: #7fdcea;
  border: 1px solid rgba(70, 207, 224, .32);
}
.tag-tier {
  background: #f7a832;
  color: #1a1206;
  font-family: var(--bsr-display);
  font-weight: 700;
}
.game-logo {
  background: linear-gradient(135deg, #f7a832 0%, #7a3f12 100%);
}

/* dernier aplat bleu du site : le bouton « Visiter le site » des cartes de liens.
   Contraste vérifié : #1a1206 sur #f7a832 = 9.6:1 */
.link-button.link-button {
  background: #f7a832;
  color: #1a1206;
  font-family: var(--bsr-display);
  font-weight: 700;
}
.link-button.link-button:hover { background: #ffbe5c; }

/* filet de sécurité : un lien sans classe ne doit jamais retomber sur le
   bleu #0000EE par défaut du navigateur (invisible aujourd'hui, mais un
   futur ajout de contenu pourrait en hériter) */
a:not([class]) { color: #f7a832; }

/* ---------- micro-signatures --------------------------------------------- */
::selection { background: rgba(247, 168, 50, .85); color: #17120a; }

:focus-visible {
  outline: 2px solid #46cfe0;
  outline-offset: 2px;
}

/* barres de défilement : encre + poignée orange au survol */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0e0e12; }
::-webkit-scrollbar-thumb { background: #26262e; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #f7a832; }

/* ---------- garde-fous ---------------------------------------------------- */
/* le corps de texte ne change JAMAIS de fonte : lisibilité d'abord */
p, li, td, .skill-description, .ascension-text, .card-avis__texte {
  font-family: inherit;
}
/* accessibilité : aucun de ces changements ne crée de mouvement */
@media (prefers-reduced-motion: reduce) {
  .section-title::before, .header-separator::before, .header-nav::after { transition: none; }
}