/* ==========================================================================
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.
========================================================================== */
/* LE FOND EST PORTE PAR LA SECTION DIVI, PAS PAR UN DIV DU MODULE.
Retour du 3 août 2026 au soir : « il y a un cadre plus sombre bizarre
derrière la page qui coupe les particules et le fond ». Mesuré : le porteur
faisait 1760 px de large dans une section de 2545, donc le dégradé, le grain
et le vignettage dessinaient un rectangle en retrait, et le canvas des
poussières était coupé au même endroit. Un fond de page doit être porté par
ce qui fait la largeur de la page.
`.gi-fiche-page` se pose donc en attribut `class` sur la SECTION, et
gi-fiche.js y remonte le canvas. Le `padding-block` ne sert plus que si le
porteur n'est pas une section Divi, la maquette autonome par exemple : sur
une section, le réglage de Divi le remplace et gagne, il est écrit depuis
un sélecteur à identifiant. */
.gi-fiche-page {
position: relative;
isolation: isolate;
padding-block: var(--gi-section-y);
}
/* LA PAGE RESPIRE EN HAUT ET EN BAS. Divi ne pose aucune marge sur cette
section : la fiche se collait à l'en-tête et au pied de page. On écrit donc
la nôtre AU RANG DE DIVI, sinon son réglage de section, émis depuis un
sélecteur à identifiant, gagne et la remet à zéro. */
.et-db #et-boc .et-l .et_pb_section.gi-fiche-page {
padding-top: var(--gi-section-y);
padding-bottom: 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 {
/* LA COLONNE SUIT L'ECRAN, ELLE N'A PLUS UNE LARGEUR FIXE.
33 rem tenaient très bien sur un grand écran et mangeaient un tiers d'un
1920 x 1080, où le portrait devenait le sujet de la page. La borne haute
reste 33 rem — rien ne change au-dessus de 2300 px — et la borne basse
21 rem garde la place des cinq étoiles et des deux étiquettes, dont
AUCUNE ne change de taille. */
--fiche-aside: clamp(21rem, 23vw, 33rem);
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; }
/* LE FILET CONTRE `wpautop`. Il enveloppe dans un `` tout ce qu'il ne
reconnaît pas comme bloc, et un `
` vide posé dans cette grille en devient
une COLONNE : la colonne du personnage tombe alors sous le contenu. Le
gabarit ne contient plus rien qui déclenche ce cas, mais la règle reste :
elle ne coûte rien et le jour où quelqu'un colle un retour à la ligne dans
le module, la page ne se plie pas en deux. */
.gi-fiche > p:empty { display: none; }
/* 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;
/* SOUS LA BARRE, JAMAIS DERRIERE. L'en-tête du site est fixe et gi-ui.js
publie sa hauteur dans `--gi-header-h` : la colonne se cale dessous, plus
une respiration. Avec un simple `top: 1rem` elle passait sous la barre au
défilement. Le repli de 5 rem sert la maquette autonome, qui n'a pas
d'en-tête. */
top: calc(var(--gi-header-h, 5rem) + 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 `` du gabarit qui choisit, pas
une regle d'ici. */
.gi-fiche-portrait {
/* `` 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;
}
/* LE SPLASH REMPLIT LA HAUTEUR DU CADRE, QUITTE A ETRE ROGNE SUR LES COTES.
Deux décisions successives, et la seconde a été prise EN REGARDANT l'écran,
ce que la première ne pouvait pas faire.
Le 3 août au matin, sur les chiffres seuls — 54 formats distincts, de 0,85 à
2,00 — l'image entière semblait la seule règle qui ne casse aucune fiche. Le
3 août au soir, sur la page servie : le splash est détouré, son fond est
transparent, et le montrer entier laissait le personnage minuscule au milieu
d'un grand aplat de rareté. `cover` recadre la colonne centrale, là où le
personnage se tient toujours.
`object-position` garde le HAUT plutôt que le centre : sur les six splashs
plus hauts que larges, c'est le buste qui compte, pas les pieds. */
.gi-fiche-portrait img {
position: relative;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 12%;
}
/* LE LOGO DE L'ELEMENT EN GRAND, PRESQUE NOIR, DEBORDANT DU CADRE.
La même recette que la tuile du catalogue, au pixel près : elle donne au
fond de rareté une profondeur qu'un dégradé seul n'a pas, sans ajouter une
couleur de plus. C'est une ombre, pas un dessin. `--elem-ico` est posée par
gi-fiche.js quand l'élément a une icône ; absente, la règle ne peint rien,
et les deux personnages sans élément n'ont donc pas de filigrane. */
.gi-fiche-portrait > .gi-fiche-portrait__fili {
position: absolute;
inset: -12% -12% auto -12%;
aspect-ratio: 1;
/* RANG NEGATIF, ET C'EST MESURE. Au rang 0 ces deux couches sont peintes
APRES l'image sur la page servie, alors que l'ordre du document les met
avant : le décor recouvrait le personnage. Le rang négatif les remet où
elles doivent être — au-dessus du dégradé de rareté, sous le personnage.
Le cadre porte `isolation: isolate`, elles ne peuvent pas en sortir. */
z-index: -1;
pointer-events: none;
opacity: 0.13;
background: #05090f;
-webkit-mask: var(--elem-ico) center / contain no-repeat;
mask: var(--elem-ico) center / contain no-repeat;
}
/* SUR UN ECRAN COURT, LE CADRE SE COUCHE UN PEU.
Retour du 3 août 2026 au soir : « la place dédiée au portrait est un peu
trop importante sur les petits écrans genre 1920 x 1080, même si elle est
très bien dans des dimensions supérieures ».
Mesuré : au rapport 2/3, sur un 1920 x 1080, le cadre faisait 582 px de haut
et la colonne 859 — presque tout l'écran pour une seule image. Sur un
2560 x 1400 la même règle donne 777 px sur 1400, et là elle est juste.
C'est donc la HAUTEUR DE L'ECRAN qui décide, pas sa largeur, et la règle ne
s'applique qu'au-dessus de la bascule mobile. Le rapport 2/3 revient de
lui-même dès que l'écran est assez haut. Rien d'autre ne bouge : ni le nom,
ni les étoiles, ni les étiquettes, qui gardent toutes leur taille. */
@media (min-width: 1081px) and (max-height: 1100px) {
.gi-fiche-portrait { aspect-ratio: auto; height: 46vh; }
}
/* LE DECOR DERRIERE LE PERSONNAGE, ET SEULEMENT DERRIERE.
Le grain et le voile du cadre étaient posés en `::before` et `::after`, tous
deux en `z-index: 1`, donc DEVANT le personnage : ils le salissaient au lieu
de l'asseoir. Cette couche-ci est en rang 0 et écrite AVANT l'image dans le
document : le personnage repasse dessus tout seul, sans qu'on empile un
z-index de plus.
Deux choses dedans, et rien d'autre : un vignettage qui referme les quatre
coins, et le grain du site. Le splash étant détouré, les deux se lisent
autour du personnage et lui donnent la profondeur qui manquait. */
/* LE GRAIN SE FOND, IL NE SE POSE PAS. `--gi-noise` est une texture OPAQUE :
partout sur le site elle sert à 0,2 d'opacité en `overlay`. Posée brute, elle
a recouvert le portrait d'un gris de télévision — vérifié sur la page servie
le 3 août au soir. Le vignettage et le grain sont donc sur DEUX couches :
l'un peint normalement, l'autre se fond. */
.gi-fiche-portrait > .gi-fiche-portrait__deco {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(118% 86% at 50% 32%, transparent 40%, rgba(4, 8, 13, 0.55) 100%);
}
.gi-fiche-portrait > .gi-fiche-portrait__deco::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.22;
mix-blend-mode: overlay;
background-image: var(--gi-noise), var(--gi-noise);
background-size: 158px 158px, 780px 780px;
}
/* Sur téléphone la vignette carrée est déjà petite : la fermeture des coins y
mangerait le personnage. Le grain reste, le vignettage part. */
@media (max-width: 1080px) {
.gi-fiche-portrait > .gi-fiche-portrait__deco { background: none; }
}
/* LE MONTAGE EST MASQUE, ET SEULEMENT SI LE SCRIPT TOURNE. gi-fiche.js pose
cette classe a la premiere ligne et la retire quand les onglets existent :
sans elle, les six panneaux apparaissent empiles une fraction de seconde,
le temps que `characters.json` reponde. La classe etant posee PAR le
script, une page sans JavaScript ne la voit jamais et garde ses panneaux
lisibles les uns sous les autres. */
.gi-fiche--montage .gi-fiche-pan,
.gi-fiche--montage .gi-fiche__aside { visibility: hidden; }
/* 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; }
/* UNE ETIQUETTE NOMMEE PREND SA LIGNE, SOUS LES AUTRES.
L'obtention n'a pas d'icone et n'en aura pas : le rond creux ne tiendrait
la place de rien, il se retire. Le mot « Obtention » vient du vocabulaire
du versement, il n'est ecrit ni ici ni dans le script. */
/* LA LIGNE EST PLEINE, L'ETIQUETTE NE L'EST PAS. Le prend la largeur
pour forcer le retour a la ligne, mais il devient transparent : c'est le
libelle qui porte le cadre, et il ne fait que sa propre taille. */
.gi-fiche-id--nomme {
flex: 0 0 100%;
justify-content: center;
padding: 0;
background: none;
border: 0;
border-radius: 0;
}
.gi-fiche-id--nomme .gi-fiche-id__pastille { display: none; }
.gi-fiche-id--nomme .gi-fiche-id__n {
overflow: visible;
white-space: normal;
padding: 0.3rem 0.85rem;
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;
}
/* ==========================================================================
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.
========================================================================== */
/* LE BLOC SE RESSERRE. Retour du 3 août au soir : le palier flottait entre le
trait du dessus et sa réglette, et cette hauteur perdue poussait les quatre
statistiques sous la ligne de flottaison. L'intitulé se colle donc au trait,
et la réglette se colle à son intitulé. */
.gi-fiche-stats {
padding-top: var(--sp-2);
border-top: 1px solid var(--gi-line-soft);
}
/* LES QUATRE STATISTIQUES SUR UNE SEULE LIGNE QUAND ELLES TIENNENT.
Demandé le 3 août au soir : quatre cases occupaient deux rangées pour peu de
contenu. Mais la largeur qui décide n'est pas celle de l'écran, c'est celle
de la COLONNE, qui varie maintenant avec l'écran : c'est donc une requête de
conteneur, pas une media query.
QUATRE OU DEUX, JAMAIS TROIS. Un `auto-fit` donnait trois colonnes sur un
grand écran, donc une case orpheline sur une deuxième rangée. Quatre se
divise par deux : les deux seules dispositions possibles sont pleines.
En quatre colonnes, l'icône passe AU-DESSUS de l'intitulé : à 120 px de
large, une icône posée à gauche ne laissait pas dix caractères par ligne à
« Bonus de DGT Géo ». */
/* LE CONTENEUR EST LE BLOC DES STATISTIQUES LUI-MEME, pas la colonne : sous
1080 px gi-fiche.js le DEPLACE dans l'onglet des talents, et une requete
posee sur la colonne ne le suivrait pas. Pose ici, elle le suit partout. */
.gi-fiche-stats { container-type: inline-size; container-name: gi-colonne; }
/* LE NOMBRE DE COLONNES SUIT LA DONNEE, IL N'EST PLUS ECRIT ICI.
La grille etait figee a QUATRE colonnes au dessus de 21 rem, ce qui est
juste pour un personnage et faux pour tout le reste : une arme n'a que deux
statistiques, elles occupaient les deux premieres pistes et laissaient la
moitie droite du bloc vide. Et dix armes n'en ont qu'une.
`--gi-mesures` est posee par gi-fiche.js depuis le nombre de colonnes de la
table servie. Le repli a quatre garde le comportement d'hier si la variable
manque. */
.gi-fiche-mesures {
display: grid;
/* Sous la bascule, on laisse la largeur decider : deux cases tiennent dans
une colonne de 22 rem, trois n'y tiennent pas, et une seule prend tout. */
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: var(--sp-2);
margin: var(--sp-3) 0 0;
}
@container gi-colonne (min-width: 21rem) {
.gi-fiche-mesures { grid-template-columns: repeat(var(--gi-mesures, 4), minmax(0, 1fr)); }
.gi-fiche-mesure {
flex-direction: column;
align-items: center;
gap: 0.15rem;
text-align: center;
padding: var(--sp-2);
}
.gi-fiche-mesure__txt { width: 100%; }
}
.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: 0; }
.gi-fiche-palier__l {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: 0;
}
.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;
}
/* LES DEUX REGLETTES SONT DESSINEES, PAS LAISSEES AU NAVIGATEUR.
`accent-color` ne peint que le remplissage : la PISTE restait celle du
système, un rail clair presque blanc sur un fond sombre. Firefox et les
moteurs WebKit ne nomment pas les mêmes pseudo-éléments, il faut donc écrire
les deux familles ; elles ne peuvent pas être groupées en une seule règle,
un sélecteur inconnu invaliderait la liste entière. */
.gi-fiche-palier input[type="range"],
.gi-fiche-tal__r {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 1rem;
margin: 0;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
}
.gi-fiche-palier input[type="range"]::-moz-range-track,
.gi-fiche-tal__r::-moz-range-track {
height: 3px;
background: var(--gi-line);
border: 0;
border-radius: 2px;
}
.gi-fiche-palier input[type="range"]::-moz-range-progress,
.gi-fiche-tal__r::-moz-range-progress {
height: 3px;
background: linear-gradient(90deg, var(--gi-gold-600), var(--gi-gold-400));
border-radius: 2px;
}
.gi-fiche-palier input[type="range"]::-moz-range-thumb,
.gi-fiche-tal__r::-moz-range-thumb {
width: 0.8rem; height: 0.8rem;
background: var(--gi-gold-400);
border: 1px solid rgba(10, 16, 24, 0.85);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.gi-fiche-palier input[type="range"]::-webkit-slider-runnable-track,
.gi-fiche-tal__r::-webkit-slider-runnable-track {
height: 3px;
background: var(--gi-line);
border-radius: 2px;
}
.gi-fiche-palier input[type="range"]::-webkit-slider-thumb,
.gi-fiche-tal__r::-webkit-slider-thumb {
-webkit-appearance: none;
width: 0.8rem; height: 0.8rem;
margin-top: -0.25rem;
background: var(--gi-gold-400);
border: 1px solid rgba(10, 16, 24, 0.85);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* 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); }
/* L'ONGLET ACTIF EST UNE PLAQUE D'OR, PAS UN APLAT BEIGE.
Un dégradé du haut vers le bas, un liseré clair en haut et une ombre en bas
pour le relief, et LE MEME GRAIN que le reste du site par dessus. C'est la
recette de la tuile de catalogue, à la taille d'un bouton : deux couches de
bruit en `overlay`, jamais une texture de plus. */
.gi-fiche-tab[aria-selected="true"] {
position: relative;
isolation: isolate;
color: var(--gi-ink-900);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--gi-gold-300) 88%, #fff8e6) 0%,
var(--gi-gold-400) 46%,
color-mix(in srgb, var(--gi-gold-500) 92%, #7a5417) 100%);
border-color: color-mix(in srgb, var(--gi-gold-600) 86%, #2a1c06);
box-shadow:
inset 0 1px 0 rgba(255, 250, 235, 0.55),
inset 0 -1px 0 rgba(58, 38, 8, 0.28),
0 1px 2px rgba(0, 0, 0, 0.35);
text-shadow: 0 1px 0 rgba(255, 246, 224, 0.35);
}
.gi-fiche-tab[aria-selected="true"]::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
opacity: 0.3;
mix-blend-mode: overlay;
background-image: var(--gi-noise), var(--gi-noise);
background-size: 158px 158px, 780px 780px;
}
.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); }
/* ==========================================================================
LA LIGNE A BARRE : UNE CASE, UN NOM, UNE BARRE A DEUX POIGNEES
--------------------------------------------------------------------------
Deux menus deroulants par ligne, c'etaient huit menus a ouvrir pour dire
« je monte tout de un a quatre-vingt-dix ». Une barre montre l'intervalle au
lieu de le faire lire, et la case dit en un geste si la ligne compte.
Les selecteurs `select` restent ecrits plus bas : sans JavaScript, le
gabarit rend encore ses menus et le panneau reste utilisable.
========================================================================== */
/* LE NOM ET SA BARRE SONT UNE SEULE CHOSE, ILS SE TOUCHENT PRESQUE.
L'ecart d'origine venait de trois sources qui s'additionnaient sans qu'aucune
soit fautive : l'ecart de la ligne, la marge de la barre, et surtout la
hauteur de la barre elle-meme, ou le rail est centre et laisse du vide au
dessus. Vingt et un pixels mesures entre le bas du nom et le rail, pour un
couple qui se lit d'un seul regard. */
.gi-fiche-champ--barre { gap: 0; }
.gi-fiche-champ--barre .gi-fiche-champ__d { display: block; }
label.gi-fiche-champ__n {
display: flex;
align-items: center;
gap: var(--sp-2);
cursor: pointer;
user-select: none;
}
.gi-fiche-champ__case {
width: 0.95rem; height: 0.95rem;
flex: none;
margin: 0;
accent-color: var(--gi-gold-400);
cursor: pointer;
}
.gi-fiche-champ__case:focus-visible { outline: 2px solid var(--gi-gold-400); outline-offset: 2px; }
/* UNE LIGNE DECOCHEE S'EFFACE SANS DISPARAITRE. Elle garde sa place et ses
reglages : on la recoche et le total revient. */
.gi-fiche-champ.is-off .gi-fiche-champ__d { opacity: 0.4; }
.gi-fiche-champ.is-off label.gi-fiche-champ__n { color: var(--gi-sand-600); }
.gi-bi {
--gi-bi-t: 15px;
position: relative;
/* Juste la place de la poignee et de son halo de focus, pas un pixel de
plus : tout ce qui depasse devient un ecart entre le nom et le rail. */
height: 1.15rem;
margin: 0;
touch-action: none;
}
.gi-bi__rail {
position: absolute;
top: 50%; left: 0; right: 0;
height: 5px;
margin-top: -2.5px;
background: var(--gi-ink-900, #080c12);
border: 1px solid var(--gi-line);
border-radius: 999px;
}
.gi-bi__fill {
position: absolute;
top: -1px; bottom: -1px;
border-radius: 999px;
background: linear-gradient(90deg, var(--gi-gold-600, #9a7b3a), var(--gi-gold-300, #e2c88a));
}
/* Intervalle vide : plus rien a depenser sur cette ligne, et ca se voit. */
.gi-fiche-champ.is-nul .gi-bi__fill { background: var(--gi-sand-700, #6b5f4a); }
/* LES DEUX CURSEURS SONT TRANSPARENTS ET SUPERPOSES. Ils ne laissent passer le
pointeur que sur leur poignee, sinon celui du dessus avalerait tous les
clics destines a l'autre. */
.gi-bi__r {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
margin: 0;
padding: 0;
background: transparent;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
}
.gi-bi__r:focus { outline: none; }
.gi-bi__r::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.gi-bi__r::-moz-range-track { height: 100%; background: transparent; border: 0; }
.gi-bi__r::-moz-range-progress { background: transparent; }
.gi-bi__r::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--gi-bi-t); height: var(--gi-bi-t);
border-radius: 50%;
background: var(--gi-sand-50, #f7ebc9);
border: 2px solid var(--gi-gold-500, #c9a45c);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
cursor: grab;
pointer-events: auto;
}
.gi-bi__r::-moz-range-thumb {
width: var(--gi-bi-t); height: var(--gi-bi-t);
box-sizing: border-box;
border-radius: 50%;
background: var(--gi-sand-50, #f7ebc9);
border: 2px solid var(--gi-gold-500, #c9a45c);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
cursor: grab;
pointer-events: auto;
}
.gi-bi__r:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gi-gold-400); }
.gi-bi__r:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--gi-gold-400); }
.gi-bi__r:active::-webkit-slider-thumb { cursor: grabbing; }
.gi-bi__lec {
display: flex;
align-items: baseline;
gap: var(--sp-2);
margin: 0.15rem 0 0;
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
color: var(--gi-sand-200);
}
.gi-bi__f { color: var(--gi-sand-600); }
.gi-bi__lec .gi-bi__b:last-child { margin-left: auto; }
.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-3);
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;
}
/* --------------------------------------------------------------------------
LE TOTAL, RANGE PAR LIEU ET PAR JOUR
--------------------------------------------------------------------------
C'EST LA SEULE LISTE DE L'ONGLET. La liste plate qui la precedait disait la
meme chose sans les sections ; seul son resume est reste, juste au dessus.
Le rangement se pose donc directement sous ce resume, sans titre de bloc et
sans trait de plus : le resume porte deja le sien.
UN TITRE COLLE A CE QU'IL ANNONCE. La respiration qui separe deux sections
doit etre plus grande que celle qui separe un titre de sa liste, sinon le
titre flotte entre les deux et on ne sait plus ce qu'il coiffe. Les marges
sous les titres sont donc les plus petites de la feuille, et l'air est mis
AU DESSUS.
LA PREMIERE SECTION N'A PAS DE TITRE, et c'est le seul cas : mora, Couronne
et specialites locales n'ont aucun lieu commun a nommer.
-------------------------------------------------------------------------- */
.gi-fiche-farm[hidden] { display: none; }
.gi-fiche-farm__sec { margin: 0; }
/* Le separateur vit ENTRE deux sections : pose sur chacune, il doublerait le
trait du resume au dessus. */
.gi-fiche-farm__sec + .gi-fiche-farm__sec {
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: 1px dashed var(--gi-line-soft);
}
.gi-fiche-farm__sec-t {
margin: 0 0 var(--sp-1);
font-family: var(--gi-font-display);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: var(--ls-caps-md);
text-transform: uppercase;
color: var(--gi-gold-300);
}
.gi-fiche-farm__lieu + .gi-fiche-farm__lieu { margin-top: var(--sp-3); }
.gi-fiche-farm__lieu-t {
margin: 0 0 0.125rem;
font-size: var(--fs-xs);
letter-spacing: 0.02em;
color: var(--gi-text-faint);
}
/* ==========================================================================
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;
}
/* LE ROND PREND LA COULEUR DE L'ELEMENT DU PERSONNAGE.
`--chip` est déjà posée par `[data-v]` dans gi-database.css, et `.gi-fiche`
porte l'élément : la teinte descend donc toute seule, il n'y a aucune
couleur écrite ici. Elle était trop discrète pour se voir — 34 % au centre
et rien au bord — et l'or par défaut la rendait invisible sur un personnage
Géo. Elle est montée, et le rond a maintenant un halo et un bord de son
élément. */
.gi-fiche-item__ico {
width: 52px; height: 52px;
flex: none;
display: grid;
place-items: center;
overflow: hidden;
background:
radial-gradient(circle at 50% 28%,
color-mix(in srgb, var(--chip, var(--gi-gold-500)) 70%, transparent) 0%,
color-mix(in srgb, var(--chip, var(--gi-gold-500)) 26%, transparent) 68%,
color-mix(in srgb, var(--chip, var(--gi-gold-500)) 10%, transparent) 100%),
var(--gi-ink-800);
border: 1px solid color-mix(in srgb, var(--chip, var(--gi-gold-600)) 52%, var(--gi-line));
box-shadow: inset 0 0 12px color-mix(in srgb, var(--chip, var(--gi-gold-500)) 22%, transparent);
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);
}
/* LA MISE EN FORME DU JEU, QUAND ELLE ARRIVE.
La source écrit ses descriptions avec des sauts de ligne, des passages en
gras et des couleurs. Le versement du 3 août ne les transmet pas — mesuré
sur six fiches servies, zéro saut de ligne, zéro balise, zéro `**`. Le
rendu est câblé quand même : le jour où le Backend les laisse passer, rien
d'autre ne bouge ici. */
/* SUR UNE CONSTELLATION, PAS DE MESURE DE LECTURE. Elle a un sens sur un
talent, dont la description partage sa rangee avec le tableau des effets et
ne doit pas s'etaler sous lui ; une constellation occupe une rangee a elle
seule, et la mesure y laissait un tiers du bloc vide a droite. */
.gi-fiche-item--const .gi-fiche-item__d { max-width: none; }
.gi-fiche-item__d strong { font-weight: 700; color: var(--gi-sand-50); }
.gi-fiche-item__d .gi-teinte { color: var(--gi-c, inherit); font-weight: 600; }
/* L'IMAGE DU SORT DANS LE ROND, quand elle existe. VINGT TALENTS SUR 760 ET
CINQUANTE ET UNE CONSTELLATIONS SUR 732 N'EN ONT PAS : c'est mesure sur les
124 fiches, et `c3` est la pire, absente vingt-neuf fois. Le rond garde
alors son degrade et sa bordure, comme `.gi-sym--creux` ailleurs sur le
site. L'absence d'image est une information, pas 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.
Servi depuis le jalon 11 : 367 animations sont en base, toutes en
`image/gif`, sur la cle `animation` d'un talent de combat. Le cadre reste au
format 16:9 et un talent sans animation N'AFFICHE RIEN — c'est le JavaScript
qui n'installe le cadre que s'il a un fichier a y mettre. */
/* 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; }
/* AU PALIER INTERMEDIAIRE, LA DESCRIPTION REPREND TOUTE LA LARGEUR.
Trois colonnes serrees dans 800 px donnaient une description a quatre mots
par ligne, coincee entre un tableau et une animation : illisible. En dessous
de 76 rem le texte passe donc SEUL sur sa rangee, et le tableau et
l'animation se partagent celle du dessous. Trois colonnes ne reviennent
qu'une fois qu'elles tiennent vraiment. */
/* DEUX COLONNES, ET L'ANIMATION EMPILEE SUR LE TABLEAU DANS LA SECONDE.
La troisieme colonne a vecu une journee. Elle prenait 15 rem a la
description pour montrer une vignette 16:9 que personne ne regarde a cette
taille ; depuis qu'un clic ouvre l'animation en grand, la vignette n'a plus
besoin de place, seulement d'etre visible. Le paragraphe a repris sa
largeur, et le meme palier sert maintenant a toutes les tailles. */
@media (min-width: 52rem) {
.gi-fiche-item__cote { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.gi-fiche-item__d { grid-column: auto; max-width: var(--gi-measure); }
}
/* LA PILE : l'animation, puis le tableau. `align-content: start` l'empeche de
s'etirer pour remplir la hauteur de la description d'en face. */
.gi-fiche-item__pile { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
/* LA COLONNE DE TEXTE : le titre du talent, puis sa description. Le titre est
descendu ici pour que les deux colonnes partent du meme bord — sans quoi
l'animation commencait sous lui, trente-neuf pixels plus bas que le trait
de la reglette. */
.gi-fiche-item__texte { min-width: 0; }
/* 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);
/* SANS CE ZERO, UN LIBELLE NE PEUT PAS RETRECIR SOUS SON MOT LE PLUS LONG,
et c'est la valeur d'en face qui debordait de la colonne. */
min-width: 0;
}
.gi-fiche-tal__tab dd {
margin: 0;
min-width: 0;
/* UNE VALEUR NE SE LAISSE PAS COMPRIMER SOUS SON PROPRE TEXTE.
Mesure du 6 aout 2026 sur la fiche de Prune : « DGT de Ding ding ding !
Carillon de chasse aux sorcieres » prenait 222 px des 292 disponibles, et
« 301,4 % » se retrouvait dans 36 px alors qu'il en demande 58. Declaree
insecable, la valeur sortait du cadre, et le cadre la coupait.
C'est au LIBELLE de reculer, jamais au chiffre : lui peut passer a la
ligne, le chiffre non. Trois lignes sur quinze etaient touchees. */
flex-shrink: 0;
text-align: right;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--gi-sand-50);
font-variant-numeric: tabular-nums;
/* UN NOMBRE NE SE COUPE PAS. « 20,0 pts » brise apres la virgule d'espace
donne deux lignes pour huit signes, et ca se lit plus mal que ca ne tient.
Les valeurs qui ne tiennent pas ne se coupent pas non plus : elles
descendent d'une ligne, regle juste dessous. */
white-space: nowrap;
}
/* UNE VALEUR COURTE RESTE EN FACE DE SON LIBELLE, UNE VALEUR LONGUE PASSE
DESSOUS.
-------------------------------------------------------------------------
Les valeurs du jeu ne sont pas toutes des nombres. « 87,7 % » tient dans un
coin de ligne ; « 250,0 % DGT d'attaque normale » fait vingt-neuf signes et
ne tient nulle part dans une colonne de 17 rem. Tant qu'elle etait declaree
insecable, elle sortait du cadre et le cadre la coupait — releve le 3 aout
sur la fleche de tourbillon de Ganyu.
Le choix se fait UNE FOIS, a la construction, sur la PLUS LONGUE des treize
valeurs du cran : la reglette repeint le texte, elle ne doit jamais faire
sauter la mise en page d'un cran a l'autre. */
.gi-fiche-tal__tab > .gi-fiche-tal__r--long { display: block; }
/* SAUF UNE VALEUR LONGUE, qui passe sous son libelle et reprend le droit de
se reduire : elle occupe alors toute la largeur, il n'y a plus de partage. */
.gi-fiche-tal__tab > .gi-fiche-tal__r--long dd {
flex-shrink: 1;
margin-top: 0.1rem;
/* A DROITE MEME QUAND ELLE PASSE A LA LIGNE. Une valeur reste une valeur :
la colonne de chiffres doit s'aligner, qu'ils tiennent en face de leur
libelle ou qu'ils descendent d'un cran. A gauche, la ligne du dessous
ressemblait a une seconde etiquette. */
text-align: right;
line-height: 1.3;
white-space: normal;
}
.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);
/* LE TIRETE ETAIT LA MARQUE D'UN EMPLACEMENT VIDE. Maintenant qu'un fichier
y arrive, un trait plein : un cadre en pointilles autour d'une vraie image
se lit comme un gabarit inacheve. */
border: 1px solid var(--gi-line);
border-radius: 4px;
}
.gi-fiche-demo:empty { display: none; }
/* LE MEDIA ET SON BOUTON PARTAGENT LA MEME CELLULE. Sans cette ligne la grille
leur donne une rangee chacun, le cadre double de hauteur et le bouton se
retrouve sous l'image au lieu d'etre dessus. C'est donc l'ordre du document
qui decide lequel est devant, et le JavaScript glisse le media AVANT le
bouton pour que celui-ci reste lisible pendant le chargement. */
.gi-fiche-demo > * { grid-area: 1 / 1; }
/* LE BOUTON QUI DECLENCHE LE CHARGEMENT.
Mesure du 6 aout 2026 : les trois gifs d'Albedo pesent 63 Mo a eux seuls. Un
chargement automatique etait indefendable, donc le cadre attend un clic. Le
bouton occupe TOUT le cadre : sur un telephone, une cible de la taille d'une
vignette 16:9 se touche sans viser. */
.gi-fiche-demo__b {
width: 100%;
height: 100%;
margin: 0;
padding: var(--sp-3);
font: inherit;
font-size: var(--fs-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gi-sand-300);
background: transparent;
border: 0;
border-radius: 4px;
cursor: pointer;
transition: color 0.18s ease, background-color 0.18s ease;
}
.gi-fiche-demo__b:hover,
.gi-fiche-demo__b:focus-visible { color: var(--gi-sand-50); background: rgba(255, 255, 255, 0.06); }
/* PENDANT LE CHARGEMENT LE BOUTON EST DESACTIVE MAIS TOUJOURS LA : c'est le
seul endroit qui dit qu'il se passe quelque chose. Un cadre qui redevient
vide pendant dix secondes se lit comme une panne. */
.gi-fiche-demo__b[disabled] { cursor: default; color: var(--gi-text-faint); background: rgba(0, 0, 0, 0.45); }
/* `contain` ET NON `cover`. Les 367 fichiers d'aujourd'hui font 850 x 480, soit
16:9 a un demi pour cent pres, et les deux valeurs y donnent le meme rendu.
Mais une animation qui arriverait dans un autre format serait ROGNEE par
`cover`, et ce qu'on rogne d'une demonstration de sort est justement le
personnage. Une bande de fond de chaque cote coute moins cher. */
.gi-fiche-demo img, .gi-fiche-demo video {
width: 100%; height: 100%;
object-fit: contain;
}
/* UNE FOIS CHARGEE, LA VIGNETTE ANNONCE QU'ELLE S'AGRANDIT. Le curseur le dit
avant le clic, et le liseré le dit au survol. */
.gi-fiche-demo--joue { cursor: zoom-in; transition: border-color 0.18s ease; }
.gi-fiche-demo--joue:hover,
.gi-fiche-demo--joue:focus-visible { border-color: var(--gi-line-strong); }
/* ======================================================================
L'ONGLET GUIDE
======================================================================
Le panneau ne porte aucune mise en page a lui : il accueille le parchemin
d'article tel quel, avec les memes crochets que sur la page du guide. Seuls
les deux mots d'etat et le lien de pied sont a nous. */
.gi-fiche-guide__mot {
margin: 0;
padding: var(--sp-6) 0;
text-align: center;
font-size: var(--fs-sm);
color: var(--gi-text-faint);
}
.gi-fiche-guide__pied { margin: var(--sp-4) 0 0; text-align: right; }
.gi-fiche-guide__lien {
font-size: var(--fs-sm);
color: var(--gi-gold-300);
text-decoration: none;
border-bottom: 1px solid var(--gi-line-strong);
}
.gi-fiche-guide__lien:hover,
.gi-fiche-guide__lien:focus-visible { color: var(--gi-gold-200); border-bottom-color: var(--gi-gold-400); }
/* LE PARCHEMIN GARDE SA LARGEUR DE LECTURE. Dans un panneau de fiche il n'a
plus la colonne de droite qui le bornait sur sa page : sans cette limite, un
ecran large lui donnerait des lignes de cent cinquante signes. */
.gi-fiche-guide .gi-art-paper { max-width: 62rem; margin-inline: auto; }
/* ======================================================================
LA LOUPE : UNE ANIMATION OUVERTE EN GRAND
======================================================================
Le fond assombrit ET floute le site. Le flou seul ne suffit pas sur une
page sombre, l'assombrissement seul laisse le texte lisible derriere et
l'oeil continue de le lire. */
.gi-fiche-loupe {
position: fixed;
inset: 0;
z-index: 9000;
display: grid;
place-items: center;
padding: var(--sp-4);
background: rgba(8, 14, 20, 0.74);
backdrop-filter: blur(7px) saturate(0.8);
-webkit-backdrop-filter: blur(7px) saturate(0.8);
animation: gi-loupe-entre 0.16s ease-out;
}
@keyframes gi-loupe-entre { from { opacity: 0; } to { opacity: 1; } }
/* LE CADRE EST DORE, comme les bordures du reste du site, et il respire d'un
liseré interieur : sans lui, un gif clair colle au trait et le mange. */
.gi-fiche-loupe__cadre {
position: relative;
padding: 7px;
border-radius: 6px;
background: var(--gi-ink-850);
border: 1px solid var(--gi-line-strong);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(8, 14, 20, 0.9);
}
/* LA TAILLE NATURELLE EST UN PLAFOND, PAS UNE CONSIGNE. Les deux variables
sont posees par le JavaScript depuis `w` et `h` du versement. Une video ne
les annonce pas : le repli laisse alors les 90 % seuls. */
.gi-fiche-loupe__cadre img,
.gi-fiche-loupe__cadre video {
display: block;
width: auto;
height: auto;
max-width: min(90vw, var(--gi-loupe-l, 90vw));
max-height: min(85vh, var(--gi-loupe-h, 85vh));
border-radius: 3px;
}
/* LA CROIX DEBORDE SUR LE COIN, pour ne jamais couvrir l'image. */
.gi-fiche-loupe__x {
position: absolute;
top: -0.85rem;
right: -0.85rem;
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
padding: 0;
font-size: 1.15rem;
line-height: 1;
color: var(--gi-gold-300);
background: var(--gi-ink-900);
border: 1px solid var(--gi-line-strong);
border-radius: 50%;
cursor: pointer;
transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.gi-fiche-loupe__x:hover,
.gi-fiche-loupe__x:focus-visible {
color: var(--gi-ink-950);
background: var(--gi-gold-400);
transform: scale(1.08);
}
/* LA PAGE NE DEFILE PLUS DERRIERE LA LOUPE. Sans ca, la molette continue de
faire glisser la fiche sous le fond floute. */
/* ET LA PAGE GARDE SA LARGEUR. Retirer la barre de defilement rend quinze
pixels a la fenetre et decale tout ce qui est centre : l'en-tete sautait
vers la droite a l'ouverture. Le JavaScript mesure la barre et la rend en
marge. Le repli a zero sert les navigateurs a barre flottante, qui ne
prennent aucune place et n'ont rien a compenser. */
.gi-loupe-ouverte, .gi-loupe-ouverte body { overflow: hidden; }
.gi-loupe-ouverte { padding-right: var(--gi-barre, 0px); }
@media (prefers-reduced-motion: reduce) {
.gi-fiche-loupe { animation: none; }
.gi-fiche-loupe__x { transition: none; }
}
/* 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;
/* Le dessin de la piste et du pouce est en partie F3, avec celui du palier :
les deux réglettes de la fiche sont la même réglette. */
}
/* ==========================================================================
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);
/* LES QUATRE EMPLACEMENTS FONT LA MEME HAUTEUR. Un emplacement libre n'a ni
pied ni nom : sans rangees egales, il flottait a mi-hauteur de son voisin
et le carre n'en etait plus un. */
grid-auto-rows: 1fr;
gap: var(--sp-2);
}
.gi-fiche-equipe > * { height: 100%; }
.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; }
/* ==========================================================================
LES ARMES RECOMMANDEES D'UN PERSONNAGE -- 5 aout 2026
--------------------------------------------------------------------------
LES TUILES SONT CELLES DU CATALOGUE, SANS EXCEPTION : c'est le catalogue
lui-meme qui les dessine, avec son filigrane, sa colonne de symboles et son
infobulle. Il ne reste ici que l'habillage de lot, qui suit celui des autres
panneaux d'une fiche : un titre a filet, puis un bloc pose.
========================================================================== */
.gi-cat-lot + .gi-cat-lot { margin-top: var(--sp-8); }
.gi-cat-lot__head {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
}
.gi-cat-lot__head::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--gi-line-strong), transparent 85%);
}
.gi-cat-lot__t {
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 BLOC POSE, comme `.gi-fiche-champs` et `.gi-fiche-monte__sortie` : c'est
ce qui donne son fond a un panneau de fiche de personnage. */
.gi-cat-lot__boite {
padding: var(--sp-5);
background: var(--gi-ink-850);
border: 1px solid var(--gi-line);
border-radius: 4px;
}
/* LA GRILLE SE REMPLIT D'ELLE-MEME ICI. Celle de la page de tri est figee a
cinq colonnes puis a trois et a deux ; le panneau d'une fiche n'a pas la
meme largeur, et un lot peut ne porter qu'une seule arme. La classe est
doublee pour passer devant `#et-boc`, le selecteur a identifiant que Divi
emet sur toute liste posee dans son contenu. */
.gi-cat-lot__boite ul.gi-cat__grid.gi-cat__grid {
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
@media (max-width: 560px) {
.gi-cat-lot__boite ul.gi-cat__grid.gi-cat__grid {
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
}
/* L'emplacement laisse libre : le meme cadre, en pointille et vide. */
.gi-fiche-slot--libre {
display: grid;
place-items: center;
color: var(--gi-sand-600);
background: var(--gi-ink-800);
border: 1px dashed var(--gi-line);
border-radius: 4px;
}
/* UN EMPLACEMENT QUE LE VERSEMENT NE RESOUT PAS. Les armes et les sets
d'artefacts n'ont pas encore de fichier : l'emplacement montre alors sa
reference plutot que de disparaitre en silence. Le jour ou le fichier
arrive, cette regle ne sert plus a rien et personne n'a a la retirer. */
.gi-fiche-slot--brut {
display: grid;
align-content: center;
gap: 0.25rem;
padding: var(--sp-3);
text-align: center;
font-size: var(--fs-xs);
color: var(--gi-sand-300);
background: var(--gi-ink-800);
border: 1px solid var(--gi-line);
border-radius: 4px;
overflow-wrap: anywhere;
}
.gi-fiche-slot__role { display: block; font-size: var(--fs-xs); color: var(--gi-text-faint); }
.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, donc il passe sur parchemin
clair. MAIS LE PARCHEMIN EST DANS LE CONTENU IMPORTE, PAS AUTOUR DE LUI.
Le panneau portait son propre fond de papier du temps ou il rendait le
guide en propre ; depuis que la page du guide est rapatriee avec son
`.gi-art-paper`, ce fond faisait une zone claire dans une zone claire. Le
panneau redevient donc transparent et laisse voir le fond sombre de la
fiche, comme tous les autres onglets.
LES REGLES DE COULEUR QUI ALLAIENT AVEC SONT PARTIES POUR LA MEME RAISON.
`.gi-card--paper` porte deja sa couleur de texte, `gi-prose` porte deja la
typographie du guide, et `.gi-fiche-guide a` battait
`.gi-fiche-guide__lien` en specificite : le lien de pied ressortait en brun
sur le sombre au lieu du dore prevu.
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: 0; }
/* ==========================================================================
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;
}
/* LA MEME TUILE QUE LA PAGE DE TRI, et c'est demandé le 3 août au soir.
Sous 1080 px le portrait devient une vignette carrée : elle prend l'ICONE
du personnage, posée en bas et entière, sur le fond de rareté et le
filigrane d'élément. C'est exactement `.gi-cat-card__portrait`, et c'est
gi-fiche.js qui change la source de l'image. L'`iconcard` du versement
n'est plus employée : elle est cadrée autrement et deux fiches ne l'ont
pas du tout. */
.gi-fiche-portrait { aspect-ratio: 1; }
.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. */
/* LE BLOC GARDE SA SURFACE. Deplace dans l'onglet des talents, il se
retrouvait sur le fond de la page : la reglette de palier flottait dans le
vide, sans rien pour la porter. Il prend donc le meme panneau que les
cartes de talent. */
.gi-fiche-stats {
grid-column: 1 / -1;
padding: var(--sp-4);
border: 1px solid var(--gi-line-soft);
border-radius: 4px;
background: var(--gi-ink-850);
}
/* Le resume ne sert plus a rien : le bloc reste ouvert. Il demeure dans le
balisage pour la version sans script, et sort de l'ecran. */
.gi-fiche-stats > summary {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.gi-fiche-stats > summary.jamais {
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; }
}
/* ==========================================================================
LA FICHE D'ARME -- v7, 4 aout 2026
--------------------------------------------------------------------------
TOUT CE QUI SUIT S'AJOUTE, RIEN NE SE REECRIT. Une fiche d'arme reprend la
grille, la colonne de 22 rem, la bascule a 1080 px, les onglets, le
calculateur et le rangement par lieu de la fiche de personnage, sans une
regle de plus. Ce bloc ne porte que ce qu'une arme a et qu'un personnage
n'a pas : un cadre carre, un passif et sa reglette de raffinement.
========================================================================== */
/* --------------------------------------------------------------------------
LES BOUTONS D'EMPLACEMENT, COLLES SOUS LE CADRE
--------------------------------------------------------------------------
Ils appartiennent a l'image, pas au nom : la rangee mord d'un pixel sur le
cadre et le bandeau d'identite ne commence qu'apres elle. Posee a distance,
elle aurait eu l'air de commander la page entiere.
CINQ PISTES EGALES, ET PAS UNE RANGEE QUI S'AJUSTE. C'est la meme decision
que la rangee de ressources de l'infobulle : a nombre de colonnes fixe, un
bouton garde son calibre quel que soit le nombre de pieces.
LES ICONES SONT DES SILHOUETTES BLANCHES SUR FOND TRANSPARENT, comme les
douze icones de statistique : elles se posent en masque et prennent la
couleur de `--chip`. Aucune couleur n'est ecrite ici.
-------------------------------------------------------------------------- */
/* LA CLASSE EST DOUBLEE, ET SANS CA LA RANGEE NE TOUCHE PAS SES BORDS. Divi
peint tout `ul` du contenu par `.et-l--body ul` et `.et_pb_text ul`, qui
pesent une classe ET un type : `.gi-fiche-pieces` seule ne pesait qu'une
classe, et perdait. La rangee heritait alors de 14 px de retrait a gauche
et de 14 px sous elle, les cinq boutons flottaient dans leur cadre au lieu
d'en occuper toute la largeur et toute la hauteur, et le trait dore du
bouton enfonce s'arretait au-dessus du bord. Meme procede qu'au catalogue
en lots, plus haut dans cette feuille. */
ul.gi-fiche-pieces.gi-fiche-pieces {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
margin: -1px 0 0;
padding: 0;
list-style: none;
border: 1px solid var(--gi-line-soft);
border-radius: 0 0 4px 4px;
overflow: hidden;
background: var(--gi-ink-850);
}
ul.gi-fiche-pieces.gi-fiche-pieces li { display: flex; min-width: 0; margin: 0; padding: 0; }
.gi-fiche-piece {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-3) 0;
border: 0;
border-left: 1px solid var(--gi-line-soft);
background: transparent;
cursor: pointer;
transition: background var(--t-fast), box-shadow var(--t-fast);
}
.gi-fiche-pieces li:first-child .gi-fiche-piece { border-left: 0; }
.gi-fiche-piece .gi-sym {
width: 1.6rem;
height: 1.6rem;
opacity: 0.55;
transition: opacity var(--t-fast);
}
.gi-fiche-piece:hover { background: rgba(255, 255, 255, 0.05); }
.gi-fiche-piece:hover .gi-sym { opacity: 0.85; }
/* L'ETAT ENFONCE SE LIT SUR `aria-pressed`, PAS SUR UNE CLASSE. L'information
est alors la meme pour l'oeil et pour le lecteur d'ecran, et il n'y a aucun
endroit ou les deux puissent se desynchroniser. */
.gi-fiche-piece[aria-pressed="true"] {
background: rgba(255, 255, 255, 0.07);
box-shadow: inset 0 -2px 0 0 var(--gi-gold-300);
}
.gi-fiche-piece[aria-pressed="true"] .gi-sym { opacity: 1; }
.gi-fiche-piece:focus-visible { outline: 2px solid var(--gi-gold-300); outline-offset: -2px; }
/* --------------------------------------------------------------------------
UNE LISTE DE LIGNES SOUS UN TITRE DE GROUPE
--------------------------------------------------------------------------
Les donjons d'un set, ranges par region. Ce sont des lignes de texte et
rien d'autre : leur donner la carte d'un talent ferait cinq blocs epais
pour cinq mots.
-------------------------------------------------------------------------- */
/* UN SEUL CADRE POUR TOUTE LA REPONSE, aux mesures d'un cadre de bonus : ce
sont deux reponses de meme nature, elles n'ont pas a se dessiner
differemment. */
.gi-fiche-groupes {
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-5);
background: var(--gi-ink-850);
border: 1px solid var(--gi-line);
border-radius: 4px;
}
.gi-fiche-groupe { display: flex; flex-direction: column; gap: var(--sp-2); }
/* LE NOM DU GROUPE EST UNE ETIQUETTE, PAS UN TITRE. Il situe les lignes qui
suivent ; lui donner le filet et la capitale d'un titre de section revenait
a annoncer six chapitres pour six mots. */
.gi-fiche-groupe__t {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--ls-caps-md);
text-transform: uppercase;
color: var(--gi-gold-300);
}
/* LES PUCES SONT ECRITES EN ENTIER, MARGES COMPRISES, ET LA CLASSE EST
DOUBLEE. Divi pose ses propres `padding` et `padding-bottom` sur tout `ul`
et tout `li` du contenu, par des selecteurs qui pesent une classe et un
type : la remise a zero ecrite avec une seule classe ne passait pas devant.
Mesure le 06/08/2026 sur une fiche de set : la liste rendait encore
16,2 px de retrait a gauche et 16,2 px sous elle. */
ul.gi-fiche-groupe__l.gi-fiche-groupe__l {
margin: 0;
padding: 0 0 0 1.15rem;
list-style: disc;
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--gi-sand-300);
}
ul.gi-fiche-groupe__l.gi-fiche-groupe__l li { margin: 0; padding: 0; }
ul.gi-fiche-groupe__l.gi-fiche-groupe__l li + li { margin-top: 0.15rem; }
.gi-fiche-groupe__l li::marker { color: var(--gi-gold-400); }
/* UN BONUS DE SET PREND TOUTE LA LARGEUR DE SON CADRE. Meme decision que pour
une constellation : il occupe une rangee a lui seul, et la mesure de lecture
y laissait un tiers du cadre vide a droite. Le passif d'une arme garde la
sienne — meme composant, autre page, autre voisinage. */
.gi-fiche-textes .gi-fiche-item__d { max-width: none; }
/* --------------------------------------------------------------------------
LE CADRE CARRE
L'IMAGE EST L'`awaken`, ET ELLE N'EST PAS UN PORTRAIT. Mesure sur les 237
armes : ses formats vont de 147x159 a 256x256, l'objet flotte au milieu
d'une reserve transparente et ne touche aucun bord. Trois consequences, et
chacune contredit une regle du portrait de personnage :
- le cadre est CARRE et non en 2/3. Une lame verticale dans un cadre de
carte laissait deux bandes de rarete larges comme l'arme elle-meme ;
- l'image tient en `contain` et non en `cover`. Rogner une icone deja
centree dans sa reserve couperait la pointe de l'arme ;
- elle est centree et non calee en bas. C'est la meme decision que
`data-gi-cadre="objet"` sur la page de tri : une icone d'arme calee en
bas pend sous son cadre.
-------------------------------------------------------------------------- */
.gi-fiche-portrait--objet {
aspect-ratio: 1;
/* LA REGLE DE L'ECRAN COURT NE VAUT PAS POUR UN CARRE, ET LA MESURE L'A
PROUVE. `@media (max-height: 1100px)` couche le portrait d'un personnage
en lui donnant `height: 46vh` et `aspect-ratio: auto`. Combinee a un
rapport carre, cette hauteur devenait aussi une LARGEUR : le cadre
mesurait 460 px dans une colonne de 336, debordait de la fenetre, et la
page gagnait une barre de defilement horizontale a 1280 et a 1440 px.
Un carre n'a de toute facon pas le probleme que cette regle repare : sa
hauteur ne peut pas depasser la largeur de la colonne. On rend donc la
hauteur au contenu, et la largeur reste celle de la colonne. */
height: auto;
width: 100%;
}
.gi-fiche-portrait--objet img {
object-fit: contain;
object-position: 50% 50%;
/* AUCUN RETRAIT. Il y en avait douze pour cent de chaque cote, soit un
quart de la largeur mange : dans un cadre de 516 px l'icone n'en faisait
plus que 392. Or l'`awaken` porte DEJA sa propre reserve transparente,
mesuree sur les 237 armes, et la doubler d'un retrait CSS reduisait
l'arme a la moitie de la surface qu'on lui donne. Le cadre est carre et
l'image tient en `contain` : elle ne peut pas deborder. */
padding: 0;
box-sizing: border-box;
}
/* Sous 1080 px la vignette est deja carree pour tout le monde : il n'y a rien
a faire de plus, et surtout pas a repasser en `cover`. */
@media (max-width: 1080px) {
.gi-fiche-portrait--objet img { object-fit: contain; object-position: 50% 50%; }
}
/* --------------------------------------------------------------------------
LE PASSIF, EN UN SEUL BLOC
IL Y EN AVAIT DEUX, ET C'ETAIT UNE ERREUR DE TRANSPOSITION. Le patron du
Craft — le reglage dans un panneau, le resultat dans un autre — vaut la ou
les deux moities sont grosses : quatre lignes de curseurs d'un cote, une
liste de courses de l'autre. Ici la reglette tenait seule dans un panneau
large comme la page pour quarante pixels de haut, et la coupure laissait
croire que le curseur commandait autre chose que le texte d'en dessous.
CE QUI RESTE EST LA CARTE D'UN TALENT, a la lettre : la reglette en haut
sous un filet, le nom et son etiquette, puis le texte. `.gi-fiche-item__t`,
`__r` et `__d` sont EMPRUNTEES et non recopiees — c'est le meme composant,
il n'a pas a se dessiner deux fois.
-------------------------------------------------------------------------- */
.gi-fiche-passif {
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.gi-fiche-passif__cadre {
padding: var(--sp-5);
background: var(--gi-ink-850);
border: 1px solid var(--gi-line);
border-radius: 4px;
}
/* Le meme filet que sous la reglette d'un talent, aux memes mesures : c'est
lui qui rattache le curseur au texte au lieu de les separer. */
.gi-fiche-passif__reg {
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--gi-line-soft);
}
.gi-fiche-passif__reg .gi-fiche-tal__r { display: block; width: 100%; }
/* La reglette d'un talent partage sa ligne avec la valeur du cran ; celle du
raffinement ne l'a pas, le cran se lit sur l'etiquette du nom. Le mot seul
tient donc toute la ligne. */
.gi-fiche-passif__reg .gi-fiche-tal__lab { grid-column: 1 / -1; }
.gi-fiche-passif__t {
line-height: 1.68;
}
/* L'etiquette du cran ne se laisse pas couper du nom : « Raffinement 3 » sur
deux lignes se lirait comme deux choses. */
.gi-fiche-raff__e { white-space: nowrap; }
/* LA VALEUR QUI DEPEND DU RAFFINEMENT SE VOIT. C'est le seul mot de la phrase
que la reglette change : sans marque, on deplace la poignee et on ne trouve
pas ce qui a bouge. */
.gi-raff-v {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--gi-gold-200);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
LE NOM ET LES ETIQUETTES SOUS L'IMAGE, ET NON DESSUS
Sur un personnage, le bandeau pose en bas du portrait economise deux cents
pixels dans une colonne qui en manque, et le splash est assez haut pour le
porter sans qu'on perde le personnage.
Une icone d'arme n'a pas cette hauteur. Dans un cadre CARRE, le meme
bandeau couvrait le tiers bas de l'objet, et son degrade mangeait la pointe
de la lame. Le nom, les etoiles et les deux etiquettes descendent donc sous
le cadre.
C'est le gabarit qui tranche, `data-gi-ident="dessous"` : la regle vaut par
sa CLASSE et non par la forme du cadre, pour qu'une future fiche carree
puisse choisir autrement.
-------------------------------------------------------------------------- */
.gi-fiche__perso--dessous .gi-fiche__ident {
position: static;
padding: var(--sp-4) 0 0;
background: none;
}
/* Sous 620 px, la regle generale remet le bandeau SUR l'image : elle est plus
specifique que celle-ci, il faut donc la reprendre a son propre rang. */
@media (max-width: 620px) {
.gi-fiche__aside .gi-fiche__perso--dessous .gi-fiche__ident {
position: static;
padding: var(--sp-4) 0 0;
background: none;
}
}
/* --------------------------------------------------------------------------
UNE SEULE LIGNE DANS LE CALCULATEUR PREND TOUTE LA LARGEUR
`.gi-fiche-champs` passe a deux colonnes au dessus de 46 rem, et c'est juste
pour un personnage : quatre lignes s'y rangent deux et deux. Une arme n'en a
qu'une, son niveau, et elle se retrouvait tassee sur la moitie gauche du
panneau, le reste vide.
La regle porte sur le NOMBRE DE LIGNES et non sur l'espece : le jour ou une
fiche n'aurait qu'un champ pour une autre raison, elle marchera aussi.
-------------------------------------------------------------------------- */
.gi-fiche-champ:only-child { grid-column: 1 / -1; }