/* ==========================================================================
   GI-FICHE.CSS  --  v5, la fiche de personnage en deux colonnes et six onglets

   LA GEOMETRIE EST CELLE DE LA PAGE LISTE, ET C'EST VOULU. `.gi-fiche` reprend
   la grille de `.gi-cat` au pixel pres : contenu a gauche, colonne de 22 rem a
   droite, bascule a 1080 px. Sur la liste, la colonne de droite porte les
   filtres et la gauche la grille ; ici la colonne de droite porte le
   personnage et la gauche les onglets. Passer d'une page a l'autre ne deplace
   donc aucun bloc a l'ecran.

   SIX ONGLETS, PAS DE DEFILEMENT. Monter le personnage, Talents,
   Constellations, Builds, Teams, Guide. Chacun n'affiche que sa categorie.

   PAS DE CONTENU, PAS D'ONGLET. Un panneau qui porte `data-gi-preuve` et dont
   le selecteur ne trouve rien est RETIRE, et son onglet avec lui. C'est ainsi
   que Talents et Constellations disparaissent tant que le Backend ne les
   expose pas : mesure du 2 aout 2026, aucun raccourci ne les atteint depuis
   une fiche de personnage.

   RIEN N'EST ECRIT ICI QUI VIENNE DES DONNEES. Ni un nom de statistique, ni
   un nombre de crans, ni un libelle de talent : tout se lit dans la table
   servie ou dans le balisage du gabarit.
   ========================================================================== */

/* ==========================================================================
   F0. LE FOND DE PAGE
   --------------------------------------------------------------------------
   Le meme fond que la page liste et que les pages de guide : encre bleutee,
   grain, vignettage, et un semis d'etoiles fige. Il vit sur `.gi-cat-fond`,
   deja porte par gi-database.css : on ne le redessine pas, on le REUTILISE.

   LES PARTICULES PRENNENT LA COULEUR DE L'ELEMENT. `gi-hover.js` lit la
   variable `--fx` sur la carte survolee ; ici c'est le portrait qui la porte,
   et `[data-v]` la pose deja pour les sept elements. Rien a ecrire de plus.
   ========================================================================== */

.gi-fiche-page {
  position: relative;
  isolation: isolate;
  padding-block: var(--gi-section-y);
}
/* LES POUSSIERES DE L'ELEMENT. Le canvas est pose par le gabarit avec
   `data-hue="auto"` ; gi-particles.js lit alors `--fx`, que `[data-v]` pose
   pour les sept elements. Hors flux, sans clic, sous le contenu : le meme
   rang que les deux autres couches de decor. */
.gi-fiche-particules {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}
.et-fb .gi-fiche-particules { display: none !important; }

/* ==========================================================================
   F1. LA GRILLE DE PAGE
   ========================================================================== */

.gi-fiche {
  --fiche-aside: 33rem;          /* le meme que --cat-aside de la page liste,
                                    elargi de moitie le 03/08/2026 : les deux
                                    pages doivent garder la meme structure
                                    d'espacement, sinon passer de l'une a
                                    l'autre deplace tout a l'ecran. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fiche-aside);
  gap: var(--sp-6) var(--sp-7);
  align-items: start;
}
.gi-fiche__main { min-width: 0; }

/* Les cinq teintes de rarete de la page liste, reprises telles quelles pour
   que le fond d'un portrait soit le meme des deux cotes. */
.gi-fiche {
  --cat-r0: #3A4657;
  --cat-r1: #556070;
  --cat-r2: #4C7A62;
  --cat-r3: #3F6B93;
  --cat-r4: #6E55A6;
  --cat-r5: #B4762B;
}

/* ==========================================================================
   F2. LA COLONNE DU PERSONNAGE
   --------------------------------------------------------------------------
   Portrait, nom, etoiles, les trois symboles d'identite, puis les quatre
   statistiques en 2x2 et la reglette de palier.

   MEME MATIERE QUE LA COLONNE DE FILTRES : grain leger, filet dore en tete.
   Sans eux, la colonne se lisait comme un aplat pose sur la page plutot que
   comme un objet du meme monde.
   ========================================================================== */

.gi-fiche__aside {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: linear-gradient(180deg, var(--gi-ink-850), var(--gi-ink-900));
  border: 1px solid var(--gi-line);
  border-radius: 4px;
}
.gi-fiche__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: var(--gi-noise), var(--gi-noise);
  background-size: 168px 168px, 820px 820px;
}
.gi-fiche__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 12%, var(--gi-line-strong) 50%, transparent 88%) top / 100% 1px no-repeat;
}
.gi-fiche__aside > * { position: relative; z-index: 1; }

/* Le portrait. LE FOND SUIT LA RARETE, violet a quatre etoiles, orange a
   cinq, exactement comme la tuile de la grille.

   DEUX IMAGES POUR DEUX FORMATS : la tranche verticale sur ordinateur, la
   vignette carree sur telephone. Les deux existent dans la mediatheque et
   `[gi_images]` les rend ; c'est le `<picture>` du gabarit qui choisit, pas
   une regle d'ici. */
.gi-fiche-portrait {
  /* `<picture>` est un element EN LIGNE par defaut, et `aspect-ratio` ne
     s'applique pas a une boite en ligne : sans ce `display: block`, le cadre
     prenait la hauteur de son image et non le rapport demande. */
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 4px;
  /* DEUX TIERS SUR TROIS, ET C'EST MESURE. La tranche du jeu est bien plus
     haute que large : a son rapport natif, dans une colonne de 22 rem, le
     portrait faisait 900 px de haut et poussait les statistiques sous la
     ligne de flottaison. Le cadre garde un rapport de carte, l'image tient
     dedans en `contain`. */
  aspect-ratio: 2 / 3;
  /* LE MEME FOND QUE LA TUILE DU CATALOGUE, a la couleur de la rarete : un
     degrade vertical, le haut plus sombre, et du grain. Pas de vignettage :
     il mange la couleur par les quatre cotes. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rar, var(--cat-r0)) 78%, #060b12) 0%,
      var(--rar, var(--cat-r0)) 62%,
      color-mix(in srgb, var(--rar, var(--cat-r0)) 88%, #f1e9da) 100%);
}
.gi-fiche[data-r="1"] { --rar: var(--cat-r1); }
.gi-fiche[data-r="2"] { --rar: var(--cat-r2); }
.gi-fiche[data-r="3"] { --rar: var(--cat-r3); }
.gi-fiche[data-r="4"] { --rar: var(--cat-r4); }
.gi-fiche[data-r="5"] { --rar: var(--cat-r5); }

.gi-fiche-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(6, 11, 18, 0.34) 100%);
}
.gi-fiche-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: var(--gi-noise), var(--gi-noise);
  background-size: 158px 158px, 780px 780px;
}
/* SUR ORDINATEUR C'EST LE SPLASH DE BANNIERE, RECADRE A GAUCHE ET A DROITE.
   `cover` est ici le bon cadrage, et c'est la seule fois : le splash est un
   paysage large dont on ne garde que la colonne centrale. Sur la vignette
   carree du telephone, `contain` reprend la main plus bas, parce que deux
   portraits ne sont pas au format, Lohen 310x309 et Sandrone 231x256. */
.gi-fiche-portrait img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

/* LE BANDEAU DU BAS, SUR L'IMAGE. Nom, etoiles, element et arme y tiennent en
   trois rangees serrees : poses sous l'image, ils coutaient deux cents pixels
   de hauteur a une colonne qui en a deja beaucoup. */
.gi-fiche__perso { position: relative; isolation: isolate; }
.gi-fiche__ident {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 2.2rem var(--sp-4) var(--sp-3);
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 13, 0.62) 38%, rgba(4, 8, 13, 0.86) 100%);
}

.gi-fiche-nom {
  font-family: var(--gi-font-display);
  font-size: var(--fs-t-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps-md);
  color: var(--gi-sand-50);
  text-wrap: balance;
}
/* LE SOUS-TITRE N'EST PLUS RENDU. Retire a la demande le 03/08/2026 : sur une
   fiche, « Kreideprinz » repete ce que le portrait et le nom disent deja.
   Il reste dans le versement, sous la cle `title`, pour le resume au survol de
   la page liste, ou il apporte quelque chose.

/* LES ETOILES SONT GRANDES ET ONT LA FORME DU JEU. Elles reprennent le jeton
   `--gi-star`, comme la puce de filtre et le pied de tuile : une seule etoile
   sur tout le site. Ici c'est la plus grande des trois, parce que c'est ce
   qu'on lit en premier sur une fiche. */
.gi-fiche-etoiles { display: flex; justify-content: center; gap: 2px; margin-top: var(--sp-2); }
.gi-fiche-etoiles .gi-etoile { width: 1.5rem; height: 1.5rem; }

/* Les trois symboles d'identite : element, type d'arme, statistique
   d'elevation. LE LOGO PLUTOT QUE LA PASTILLE, et l'element en couleur.

   L'icone d'element et celle de statistique sont BLANCHES SUR FOND
   TRANSPARENT : elles se colorent en masque, avec la couleur de l'element.
   Celle du type d'arme, elle, fait une centaine de pixels et porte deja son
   cartouche decoratif : elle se pose en image, jamais en masque, sinon on
   perd son dessin. Les deux familles ne se melangent pas. */
.gi-fiche-ids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}
/* DEUX ETIQUETTES SUR UNE LIGNE. La statistique d'elevation a ete retiree
   d'ici le 03/08/2026 : elle est deja nommee dans le tableau des quatre
   statistiques, juste en dessous, et la donner deux fois n'apprend rien. */
.gi-fiche-id {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  font-size: var(--fs-sm);
  color: var(--gi-sand-100);
  background: rgba(8, 14, 20, 0.5);
  border: 1px solid color-mix(in srgb, var(--chip, var(--gi-gold-600)) 45%, transparent);
  border-radius: 999px;
}
.gi-fiche-id__pastille {
  display: grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  flex: none;
  background: rgba(8, 14, 20, 0.6);
  border: 1px solid color-mix(in srgb, var(--chip, var(--gi-gold-600)) 42%, transparent);
  border-radius: 50%;
}
/* Le symbole peint : l'image sert de masque, la couleur vient du jeton
   d'element. `--ico` est posee par le gabarit, jamais ecrite ici. */
.gi-sym--peint {
  width: 1.15rem; height: 1.15rem;
  flex: none;
  background: var(--et, var(--chip, var(--gi-gold-400)));
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
/* Le symbole pose en image : contain, parce que les icones du jeu ne sont pas
   toutes carrees (Pyro 30x32, PV 28x32, DEF 30x32). */
.gi-sym--image {
  width: 1.6rem; height: 1.6rem;
  flex: none;
  object-fit: contain;
}
.gi-fiche-id__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   F3. LES QUATRE STATISTIQUES ET LA REGLETTE
   --------------------------------------------------------------------------
   DEUX PAR DEUX, ET PETITES. PV et statistique d'elevation en haut, ATQ et
   DEF en bas. L'ordre est impose par le script, qui range les colonnes par
   leur cle : une colonne inconnue se met a la suite au lieu de casser la
   grille.

   ET UNE REGLETTE, PAS QUATORZE BOUTONS. Les quatorze paliers tenaient sur
   une pleine largeur ; dans une colonne de 22 rem ils tombaient a moins de
   vingt pixels chacun. Un curseur donne le meme parcours en une ligne.
   ========================================================================== */

.gi-fiche-stats {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--gi-line-soft);
}
.gi-fiche-mesures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
}
.gi-fiche-mesure {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--gi-ink-800);
  border: 1px solid var(--gi-line-soft);
  border-radius: 3px;
}
.gi-fiche-mesure__ico {
  width: 20px; height: 20px;
  flex: none;
  object-fit: contain;
  opacity: .8;
}
.gi-fiche-mesure__txt { min-width: 0; }
.gi-fiche-mesure dt {
  font-size: 0.625rem;
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gi-text-faint);
  /* L'INTITULE SE PLIE SUR DEUX LIGNES. « Bonus de DGT Géo » perdait sa fin
     dans une case de 22 rem divisee en deux, et un intitule tronque ne dit
     plus quelle statistique on lit. */
  overflow-wrap: anywhere;
}
.gi-fiche-mesure dd {
  margin: 0.1rem 0 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--gi-sand-50);
  font-variant-numeric: tabular-nums;
}

.gi-fiche-palier { margin-top: var(--sp-4); }
.gi-fiche-palier__l {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.gi-fiche-palier__lab {
  font-family: var(--gi-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gi-gold-400);
}
.gi-fiche-palier__v {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gi-sand-50);
  font-variant-numeric: tabular-nums;
}
.gi-fiche-palier input[type="range"] { width: 100%; accent-color: var(--gi-gold-400); }
/* PLUS DE CHIFFRES SOUS LE CURSEUR. Retires le 03/08/2026 : le palier est
   deja ecrit en toutes lettres au dessus, « Niveau 80 élevé », et huit petits
   nombres sous la barre repetaient la meme information en moins lisible. */

/* ==========================================================================
   F4. LES ONGLETS
   --------------------------------------------------------------------------
   CENTRES AU DESSUS DE LA COLONNE DE GAUCHE. Ils sont BATIS PAR gi-fiche.js
   depuis les panneaux presents : un panneau retire n'y laisse pas de trou, un
   panneau ajoute par le gabarit y entre sans qu'une ligne change ici.
   ========================================================================== */

/* UNE GRILLE A NOMBRE DE COLONNES FIXE, PAS UN `auto-fit`.
   En `flex-wrap`, six onglets trop larges laissaient « Guide » seul sur une
   deuxieme ligne. En `auto-fit`, la meme chose en pire : cinq et un.
   Un diviseur de six a chaque palier donne toujours des lignes pleines :
   six d'un coup au dessus de 1400 px, trois et trois entre 700 et 1400, deux
   et deux et deux en dessous. Jamais d'orpheline. */
.gi-fiche-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--gi-line);
}
/* La barre s'efface entierement quand un seul panneau survit : un onglet
   unique est un titre deguise, pas une navigation. */
.gi-fiche-tabs:empty { display: none; }

.gi-fiche-tab {
  padding: 0.5rem 0.95rem;
  font-family: var(--gi-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps-md);
  text-transform: uppercase;
  color: var(--gi-sand-400);
  background: var(--gi-ink-850);
  border: 1px solid var(--gi-line);
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.gi-fiche-tab:hover { color: var(--gi-sand-100); border-color: var(--gi-line-strong); }
.gi-fiche-tab[aria-selected="true"] {
  color: var(--gi-ink-900);
  background: var(--gi-gold-400);
  border-color: var(--gi-gold-400);
}
.gi-fiche-tab:focus-visible { outline: 2px solid var(--gi-gold-400); outline-offset: 2px; }

/* SANS JAVASCRIPT, TOUT S'AFFICHE. Les panneaux ne sont caches que par
   `[hidden]`, que seul le script pose. Un robot, un lecteur sans script ou une
   impression voient donc la fiche entiere, empilee, et elle reste indexable. */
.gi-fiche-pan[hidden] { display: none; }
.gi-fiche-pan + .gi-fiche-pan { margin-top: var(--sp-9); }
.gi-js .gi-fiche-pan + .gi-fiche-pan { margin-top: 0; }

.gi-fiche-sec + .gi-fiche-sec { margin-top: var(--sp-8); }
.gi-fiche-sec__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.gi-fiche-sec__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gi-line-strong), transparent 85%);
}
.gi-fiche-sec__title {
  font-family: var(--gi-font-display);
  font-size: var(--fs-t-md);
  font-weight: 700;
  letter-spacing: var(--ls-caps-lg);
  color: var(--gi-sand-50);
  white-space: nowrap;
}
/* Le titre du panneau actif fait doublon avec son onglet. Il reste dans le
   balisage pour la version sans script et pour les lecteurs d'ecran, et il
   sort de l'ecran des que le script prend la main. */
.gi-js .gi-fiche-pan > .gi-fiche-pan__titre {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   F5. MONTER LE PERSONNAGE
   --------------------------------------------------------------------------
   QUATRE LIGNES A DEUX CHAMPS : le personnage, puis les trois sorts. Actuel a
   gauche, voulu a droite. Le total agrege toutes les elevations traversees et
   le cout des trois sorts.

   L'ELEVATION ET LES TALENTS NE SONT JAMAIS ADDITIONNES A LA SOURCE, et
   c'etait le defaut de `[gi_costs]` : ici ils sont comptes separement puis
   totalises a l'ecran, ou l'addition est un choix d'affichage et non une
   confusion de donnee.

   PAS DE LIEN SUR UN MATERIAU. Mesure du 2 aout 2026 : les 855 entrees de
   `materials.json` portent `published: false`. Une icone et un nom, jamais
   une ancre morte. Le jour ou la categorie s'ouvrira, le script posera le
   lien tout seul, la regle vivant dans le script et pas ici.
   ========================================================================== */

/* LES REGLAGES AU DESSUS, LES RESSOURCES EN DESSOUS, et les quatre lignes en
   deux rangees de deux : personnage et attaque normale, puis competence et
   dechainement. Cote a cote a droite, les reglages se lisaient apres le total
   qu'ils commandent. */
.gi-fiche-monte { display: grid; gap: var(--sp-5); }

/* DEUX ET DEUX, JAMAIS TROIS ET UN. En `auto-fit`, la troisieme ligne montait
   se glisser sur la premiere des que la place le permettait : personnage,
   attaque normale et competence en haut, dechainement seul en bas. Deux
   colonnes fixes gardent les paires voulues. */
.gi-fiche-champs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-5);
  background: var(--gi-ink-850);
  border: 1px solid var(--gi-line);
  border-radius: 4px;
}
@media (min-width: 46rem) {
  .gi-fiche-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gi-fiche-champ { display: grid; gap: var(--sp-2); }
.gi-fiche-champ__n {
  font-family: var(--gi-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gi-gold-400);
}
.gi-fiche-champ__d {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
}
.gi-fiche-champ__f { color: var(--gi-sand-600); font-size: var(--fs-sm); }
.gi-fiche-monte select {
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--gi-sand-100);
  background: var(--gi-ink-800);
  border: 1px solid var(--gi-line);
  border-radius: 3px;
}
.gi-fiche-monte select:focus-visible { outline: 2px solid var(--gi-gold-400); outline-offset: 1px; }

.gi-fiche-monte__sortie {
  min-width: 0;
  padding: var(--sp-5);
  background: var(--gi-ink-850);
  border: 1px solid var(--gi-line);
  border-radius: 4px;
}
.gi-fiche-monte__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--gi-line-soft);
}
.gi-fiche-monte__total b {
  font-family: var(--gi-font-display);
  font-size: var(--fs-t-sm);
  letter-spacing: var(--ls-caps-md);
  color: var(--gi-sand-50);
}
.gi-fiche-monte__total span { font-size: var(--fs-sm); color: var(--gi-text-faint); }

.gi-fiche-somme {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: var(--sp-2);
}
.gi-fiche-vide {
  padding: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--gi-text-faint);
  background: var(--gi-ink-850);
  border: 1px dashed var(--gi-line);
  border-radius: 4px;
}

.gi-fiche-mat {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 0.35rem;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
}
a.gi-fiche-mat:hover { background: var(--gi-ink-800); }
a.gi-fiche-mat:hover .gi-fiche-mat__n { color: var(--gi-gold-300); }
.gi-fiche-mat__ico {
  width: 34px; height: 34px;
  flex: none;
  object-fit: contain;
  background: var(--gi-ink-800);
  border: 1px solid var(--gi-line-soft);
  border-radius: 3px;
}
/* La rarete d'un materiau vaut de ZERO a cinq : zero pour une specialite
   locale comme la Cecilia. Les memes teintes que la grille. */
.gi-fiche-mat__ico[data-r="1"] { border-color: color-mix(in srgb, var(--cat-r1) 85%, transparent); }
.gi-fiche-mat__ico[data-r="2"] { border-color: color-mix(in srgb, var(--cat-r2) 85%, transparent); }
.gi-fiche-mat__ico[data-r="3"] { border-color: color-mix(in srgb, var(--cat-r3) 85%, transparent); }
.gi-fiche-mat__ico[data-r="4"] { border-color: color-mix(in srgb, var(--cat-r4) 85%, transparent); }
.gi-fiche-mat__ico[data-r="5"] { border-color: color-mix(in srgb, var(--cat-r5) 95%, transparent); }
.gi-fiche-mat__n {
  flex: 1;
  min-width: 0;
  padding-top: 0.15rem;
  font-size: var(--fs-sm);
  line-height: 1.25;
  color: var(--gi-sand-200);
}
.gi-fiche-mat__q {
  padding-top: 0.15rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gi-sand-400);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   F6. TALENTS, PASSIFS ET CONSTELLATIONS
   --------------------------------------------------------------------------
   Chez la source, un talent est une entite separee avec sa propre fiche : les
   descriptions ne sont PAS dans les donnees du personnage.

   MESURE LE 2 AOUT 2026 : aucun raccourci ne les atteint depuis une fiche de
   personnage. `[gi_relations type="character_talent"]` sort vide dans les deux
   sens, `character_constellation` aussi, et `[gi_relations]` nu ne rend qu'un
   seul groupe, les materiaux d'elevation. Ces deux panneaux portent donc
   `data-gi-preuve` et s'effacent tant que la livraison n'est pas la.
   ========================================================================== */

.gi-fiche-liste { display: flex; flex-direction: column; gap: var(--sp-4); }
.gi-fiche-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--gi-ink-850);
  border: 1px solid var(--gi-line-soft);
  border-radius: 4px;
}
.gi-fiche-item__ico {
  width: 52px; height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--chip, var(--gi-gold-500)) 34%, transparent), transparent 70%), var(--gi-ink-800);
  border: 1px solid var(--gi-line);
  border-radius: 50%;
  font-family: var(--gi-font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gi-gold-300);
}
.gi-fiche-item__body { flex: 1; min-width: 0; }
.gi-fiche-item__t {
  font-size: var(--fs-t-sm);
  font-weight: 600;
  color: var(--gi-sand-50);
}
.gi-fiche-item__r {
  display: inline-block;
  margin-left: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--gi-gold-400);
}
/* SUR UNE CONSTELLATION, L'ETIQUETTE PORTE LE CRAN. Ecrire « Constellation »
   a cote d'un nom, dans un panneau qui s'appelle Constellations, n'apprend
   rien. C1 a C6, si. */
.gi-fiche-item--const .gi-fiche-item__r {
  padding: 0.1rem 0.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gi-ink-900);
  background: var(--gi-gold-400);
  border-radius: 2px;
}
.gi-fiche-item__d {
  margin-top: 0.35rem;
  font-size: var(--fs-base);
  color: var(--gi-sand-300);
  max-width: var(--gi-measure);
}
/* L'IMAGE DU SORT DANS LE ROND, quand elle existe. Sinon la lettre de
   commande reste : A, E, Q. C'est la meme regle que partout, l'absence d'image
   est une information et non un trou. */
.gi-fiche-item__ico img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 15%;
}
/* Un passif n'a ni touche ni niveau : sa pastille porte une marque et non une
   lettre de commande, et il n'a pas de reglette. */
.gi-fiche-item--passif .gi-fiche-item__ico { font-size: 0.625rem; letter-spacing: 0; }

/* L'EMPLACEMENT DU GIF DE DEMONSTRATION.
   La redaction associe une animation a chaque talent offensif. Rien ne la sert
   aujourd'hui : ni raccourci, ni champ, ni versement. L'emplacement est donc
   pose au format 16:9, avec son cadre, et il se remplira le jour ou le Backend
   exposera l'image. Un talent sans animation N'AFFICHE RIEN : le cadre ne
   s'installe que si le gabarit a mis quelque chose dedans. */
/* TROIS COLONNES : la description, le tableau des effets, l'animation. Une
   animation de sort se regarde en meme temps qu'on lit ce qu'elle fait, et le
   tableau se compare d'un cran a l'autre sans quitter le texte des yeux.
   Sous 76 rem elles tombent a deux, sous 52 rem a une : la description
   d'abord, toujours. */
.gi-fiche-item__cote { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 52rem) {
  .gi-fiche-item__cote { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
  .gi-fiche-demo { grid-column: 1 / -1; }
}
@media (min-width: 76rem) {
  .gi-fiche-item__cote { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) minmax(0, 15rem); }
  .gi-fiche-demo { grid-column: auto; }
}

/* Le tableau des effets. Les valeurs vivent dans des `[data-gi-v]` : c'est la
   reglette du talent qui les repeint, et elle ne touche a rien d'autre. */
.gi-fiche-tal__tab {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  background: var(--gi-line-soft);
  border: 1px solid var(--gi-line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.gi-fiche-tal__tab > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.42rem 0.6rem;
  background: var(--gi-ink-800);
}
.gi-fiche-tal__tab dt { font-size: var(--fs-xs); color: var(--gi-text-faint); }
.gi-fiche-tal__tab dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gi-sand-50);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gi-fiche-demo {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--gi-sand-600);
  background: var(--gi-ink-800);
  border: 1px dashed var(--gi-line);
  border-radius: 4px;
}
.gi-fiche-demo:empty { display: none; }
.gi-fiche-demo img, .gi-fiche-demo video {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* LA REGLETTE FINE, AU DESSUS DE CHAQUE TALENT.
   Treize crans, et c'est le maximum du jeu : dix par les livres, plus trois
   par les constellations. Elle ne change QUE LES VALEURS du texte, jamais le
   texte lui-meme, sinon chaque cran repeindrait un paragraphe entier. */
.gi-fiche-tal__l {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--gi-line-soft);
}
.gi-fiche-tal__lab {
  font-family: var(--gi-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gi-gold-400);
}
.gi-fiche-tal__v {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gi-sand-50);
  font-variant-numeric: tabular-nums;
}
.gi-fiche-tal__r {
  grid-column: 1 / -1;
  width: 100%;
  height: 3px;
  accent-color: var(--gi-gold-400);
}

/* ==========================================================================
   F7. BUILDS ET TEAMS
   --------------------------------------------------------------------------
   CONTENU DE LA REDACTION, PAS DONNEE DE LA SOURCE. Les builds viennent de
   l'outil de build, les equipes du team builder. Une rangee de boutons en
   tete, UNE SEULE fiche affichee a la fois : c'est le meme motif que les
   onglets, un cran plus bas.

   LE BOUTON D'EDITION N'EXISTE QUE POUR QUI EST CONNECTE. Le gabarit ne le
   rend pas du tout aux visiteurs : cacher en CSS un lien d'administration
   laisserait son adresse dans la page.
   ========================================================================== */

.gi-fiche-choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
/* LE MEME BOUTON QUE LES ONGLETS, un cran plus petit. La pilule arrondie et
   la casse basse sortaient de la gamme : le site n'a qu'un bouton de
   navigation, en capitales espacees et a coin droit. */
.gi-fiche-choix button {
  padding: 0.42rem 0.85rem;
  font-family: var(--gi-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps-md);
  text-transform: uppercase;
  color: var(--gi-sand-400);
  background: var(--gi-ink-850);
  border: 1px solid var(--gi-line);
  border-radius: 3px;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.gi-fiche-choix button:hover { color: var(--gi-sand-100); border-color: var(--gi-line-strong); }
.gi-fiche-choix button[aria-pressed="true"] {
  color: var(--gi-ink-900);
  background: var(--gi-gold-400);
  border-color: var(--gi-gold-400);
}
.gi-fiche-fiche[hidden] { display: none; }

/* MEME CARTE QUE LES TALENTS. Le liseré colore en tete et la typographie
   propre faisaient de Builds et Teams deux ilots graphiques : ils reprennent
   maintenant le fond, le filet et le rythme de `.gi-fiche-item`. */
.gi-fiche-carte {
  padding: var(--sp-4);
  background: var(--gi-ink-850);
  border: 1px solid var(--gi-line-soft);
  border-radius: 4px;
}
.gi-fiche-carte__t {
  font-size: var(--fs-t-sm);
  font-weight: 600;
  color: var(--gi-sand-50);
}
.gi-fiche-carte__d { margin-top: var(--sp-3); font-size: var(--fs-base); color: var(--gi-sand-300); }
.gi-fiche-carte img { display: block; max-width: 100%; height: auto; margin-top: var(--sp-4); border-radius: 3px; }

/* QUATRE EN CARRE, PAS QUATRE EN LIGNE. Une equipe se lit comme un bloc, et
   deux rangees de deux tiennent dans la moitie de la largeur : le reste va au
   commentaire de la redaction, sur un fond plus sombre pour qu'il se detache. */
.gi-fiche-team { display: grid; gap: var(--sp-4); margin-top: var(--sp-3); }
@media (min-width: 46rem) {
  .gi-fiche-team { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}
.gi-fiche-equipe {
  display: grid;
  grid-template-columns: repeat(2, 6.4rem);
  gap: var(--sp-2);
}
.gi-fiche-team__mot {
  padding: var(--sp-4);
  font-size: var(--fs-base);
  color: var(--gi-sand-200);
  /* PLUS SOMBRE QUE LA CARTE, MAIS PAS NOIR. `--gi-ink-950` sortait de la
     gamme des panneaux du site et faisait un trou dans la carte. */
  background: var(--gi-ink-800);
  border: 1px solid var(--gi-line-soft);
  border-radius: 4px;
}

/* UN EMPLACEMENT D'EQUIPE EST LA TUILE DU CATALOGUE, sans exception.
   Le dessin vit dans gi-database.css, sur `.gi-cat-card` : fond de rarete,
   colonne de symboles, etoiles posees sur l'image, pied a deux lignes. Le
   gabarit emet donc CE balisage-la, et il n'y a rien a redessiner ici : une
   seule tuile de personnage sur tout le site, et le jour ou son dessin change
   il change aux deux endroits. La seule chose qui reste est la taille. */
.gi-fiche-equipe .gi-cat-card { --cat-tuile: 5.6rem; }
.gi-fiche-equipe .gi-cat-card__name { padding: var(--sp-2) 0.35rem; font-size: 0.6875rem; }
.gi-fiche-equipe .gi-cat-card__ico li { width: 1.2rem; height: 1.2rem; }
.gi-fiche-equipe .gi-cat-card__rank { padding: 0.9rem 0 0.25rem; }
.gi-fiche-equipe .gi-cat-card__rank .gi-etoile { width: 0.72rem; height: 0.72rem; }

/* L'emplacement laisse libre : le meme cadre, en pointille et vide. */
.gi-fiche-slot--libre {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: var(--gi-sand-600);
  background: var(--gi-ink-800);
  border: 1px dashed var(--gi-line);
  border-radius: 4px;
}

.gi-fiche-editer {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-4);
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  text-decoration: none;
  color: var(--gi-gold-300);
  border: 1px dashed var(--gi-gold-600);
  border-radius: 3px;
}
.gi-fiche-editer:hover { color: var(--gi-ink-900); background: var(--gi-gold-400); border-style: solid; }

/* ==========================================================================
   F8. LE GUIDE
   --------------------------------------------------------------------------
   Le guide redactionnel est du contenu editorial : il passe sur parchemin
   clair, conformement a la regle de surface du site, alors que tout le reste
   de la fiche est de la donnee et reste sur fond sombre.

   L'ONGLET NE S'AFFICHE QUE S'IL Y A UN GUIDE. C'est le seul panneau dont
   l'absence merite un mot plutot qu'un silence : la redaction doit voir que
   la place existe. Le gabarit rend donc soit le guide, soit la note.
   ========================================================================== */

.gi-fiche-guide {
  padding: var(--sp-6);
  background: linear-gradient(180deg, var(--gi-paper-50), var(--gi-paper-200));
  border-radius: 4px;
  color: var(--gi-on-paper-body);
}
.gi-fiche-guide h3 {
  font-family: var(--gi-font-display);
  font-size: var(--fs-t-md);
  letter-spacing: var(--ls-caps-md);
  color: var(--gi-on-paper);
}
.gi-fiche-guide p { margin: var(--sp-3) 0 0; max-width: var(--gi-measure); }
.gi-fiche-guide a { color: var(--gi-on-paper-accent); }

/* ==========================================================================
   F9. PALIERS
   --------------------------------------------------------------------------
   Sous 1080 px, la colonne du personnage repasse AU DESSUS des onglets. Le
   meme seuil et le meme geste que la colonne de filtres de la page liste :
   les deux pages basculent ensemble.
   ========================================================================== */

@media (max-width: 1080px) {
  .gi-fiche { grid-template-columns: minmax(0, 1fr); }
  .gi-fiche__aside { position: static; order: -1; }

  /* SUR TABLETTE, LE NOM SORT DE L'IMAGE ET PREND LA PLACE VIDE.
     La vignette carree ne fait plus que 11 rem de large : le bandeau du bas y
     serrait un nom sur deux lignes pendant que la moitie droite de la colonne
     restait blanche. Nom, etoiles et etiquettes passent donc a cote, en
     grand. */
  .gi-fiche__aside {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-5);
    align-items: center;
  }
  .gi-fiche-portrait { aspect-ratio: 1; }
  /* CONTAIN REPREND LA MAIN : la vignette carree est deja cadree, et deux
     portraits ne sont pas au format. */
  .gi-fiche-portrait img { object-fit: contain; object-position: 50% 100%; }

  .gi-fiche__ident {
    position: static;
    padding: 0;
    background: none;
    text-align: left;
  }
  .gi-fiche__aside .gi-fiche-nom { font-size: var(--fs-t-lg); }
  .gi-fiche__aside .gi-fiche-etoiles { justify-content: flex-start; }
  .gi-fiche__aside .gi-fiche-etoiles .gi-etoile { width: 1.6rem; height: 1.6rem; }
  .gi-fiche__aside .gi-fiche-ids { justify-content: flex-start; }

  /* Le nom et les etiquettes sont hors du porteur du portrait : c'est la
     grille de la colonne qui les place, pas une superposition. */
  .gi-fiche__perso { display: contents; }

  /* LES QUATRE STATISTIQUES PASSENT DANS UN BOUTON, et sur telephone elles
     s'en vont carrement dans l'onglet des talents : voir gi-fiche.js. */
  .gi-fiche-stats { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
  .gi-fiche-stats > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.5rem 0.8rem;
    font-family: var(--gi-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--ls-caps-md);
    text-transform: uppercase;
    color: var(--gi-sand-300);
    background: var(--gi-ink-800);
    border: 1px solid var(--gi-line);
    border-radius: 3px;
    cursor: pointer;
    list-style: none;
  }
  .gi-fiche-stats > summary::-webkit-details-marker { display: none; }
  .gi-fiche-stats > summary::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate var(--t-fast);
  }
  .gi-fiche-stats[open] > summary::after { rotate: -135deg; translate: 0 2px; }
  .gi-fiche-mesures { margin-top: var(--sp-3); }
  .gi-fiche-palier { margin: var(--sp-3) 0 0; }
}

/* Sur ordinateur le bloc de statistiques n'est pas repliable : son resume
   disparait et le contenu reste ouvert quoi qu'il arrive. */
@media (min-width: 1081px) {
  .gi-fiche-stats > summary { display: none; }
}

@media (min-width: 1400px) {
  .gi-fiche-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .gi-fiche-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* SUR TELEPHONE, TOUT REVIENT SUR L'ICONE : il n'y a plus de place a cote.
     C'est le dessin de la tuile du catalogue, et c'est voulu. */
  .gi-fiche__aside { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); }
  .gi-fiche__perso { display: block; position: relative; isolation: isolate; }
  .gi-fiche__aside .gi-fiche__ident {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    padding: 1.6rem var(--sp-3) var(--sp-3);
    text-align: center;
    background: linear-gradient(180deg, transparent, rgba(4, 8, 13, 0.86) 55%);
  }
  .gi-fiche__aside .gi-fiche-nom { font-size: var(--fs-md); }
  .gi-fiche__aside .gi-fiche-etoiles { justify-content: center; }
  .gi-fiche__aside .gi-fiche-etoiles .gi-etoile { width: 1.05rem; height: 1.05rem; }
  .gi-fiche__aside .gi-fiche-ids { justify-content: center; margin-top: var(--sp-2); }
  .gi-fiche-item { flex-direction: column; gap: var(--sp-3); }
  .gi-fiche-champ__d { grid-template-columns: 1fr; }
  .gi-fiche-champ__f { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gi-fiche-tab, .gi-fiche-choix button { transition: none; }
}