@charset "UTF-8";
/* =========================================================================
   LE PROFIL COMME ESPACE DE GESTION

   Feuille SEPAREE, chargee par `profil-shiny.html` seulement. `profil.html`
   et `profil.css` ne bougent pas : les deux pages cohabitent, on compare, on
   tranche. Au portage, cette feuille se fondra dans `profil.css`.

   Le probleme qu'elle traite n'est pas esthetique. En live, les vieweuses
   n'ont pas compris qu'il fallait se connecter pour equiper leur materiel,
   alors qu'un grand bandeau le disait en tete de page. Un message qu'on ne
   relie pas au geste qu'on est en train de faire n'est pas un message, c'est
   de la decoration. D'ou deux principes tenus ici :

     ON ANNONCE CE QU'ON GAGNE, pas ce qu'il faut faire ;
     ON LE DIT LA OU CA BLOQUE, pas en haut de la page.
   ========================================================================= */

/* ── L'INVITATION DE TETE ───────────────────────────────────────────────── */
.gst-invite{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  justify-content:space-between;
  padding:16px 20px; border-radius:3px;
  border:1px solid rgba(145,70,255,.34);
  background:
    radial-gradient(ellipse 60% 140% at 88% 50%, rgba(145,70,255,.16), transparent 70%),
    rgba(0,0,0,.2);
}
/* Le texte prend la place disponible, le bouton garde la sienne : sans cela
   le bloc passe a la ligne des que la liste s'allonge, et le bouton se
   retrouve seul en bas, loin de l'argument qu'il conclut. */
.gst-invite-mots{ flex:1 1 460px; min-width:0 }
.gst-invite-titre{
  margin:0; font-family:var(--font-title, 'MedievalSharp', serif);
  font-size:1.02rem; color:#ebe1cf; letter-spacing:.02em;
}
.gst-invite-sous{ margin:2px 0 8px; font-size:.84rem; color:#a8a48c }
/* Les gains, pas les consignes. Une liste courte se lit d'un coup d'oeil, et
   le premier element est celui qui compte le plus : l'equipement agit en
   combat depuis le 2026-09-13. */
/* DEUX COLONNES, pas une ligne qui se replie. Quatre elements dans une ligne
   souple finissent toujours en trois plus un a une largeur ou une autre : le
   desequilibre n'est pas un defaut de reglage, il est inevitable. Une grille
   le rend impossible par construction, et tombe a une colonne au telephone. */
.gst-gains{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px 20px; font-size:.82rem; color:#c9bbaa;
}
@media (max-width: 700px){ .gst-gains{ grid-template-columns:1fr } }
.gst-gains li{ position:relative; padding-left:14px }
.gst-gains li::before{
  content:'✦'; position:absolute; left:0; top:0; color:#a8895a; font-size:.7rem;
}
.gst-gains b{ color:#ebe1cf; font-weight:600 }

/* ── LE BOUTON TWITCH ───────────────────────────────────────────────────── */
/* Aux couleurs de Twitch, et non a celles du site : ici la reconnaissance
   prime sur l'harmonie. On doit voir « Twitch » avant de lire le texte, sinon
   on ne fait pas le lien avec le compte qu'on possede deja. */
.gst-twitch{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  padding:11px 18px; border-radius:3px; text-decoration:none;
  background:#9146ff; color:#fff; font-weight:600; font-size:.88rem;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 10px rgba(145,70,255,.34);
  transition:background .14s, transform .14s, box-shadow .14s;
  /* 44 px de haut : une cible tactile confortable. */
  min-height:44px;
}
.gst-twitch:hover{ background:#a970ff; transform:translateY(-1px);
                   box-shadow:0 4px 14px rgba(145,70,255,.46) }
.gst-twitch:focus-visible{ outline:2px solid #fff; outline-offset:3px }
.gst-twitch-icone{ width:18px; height:18px; flex:none }
.gst-twitch--petit{ padding:9px 15px; font-size:.83rem }

/* ── LE MODE GESTION ────────────────────────────────────────────────────── */
/* Connectee, il faut VOIR qu'on gere. Sans cela rien ne distingue regarder
   d'agir, et on n'essaie pas. */
.gst-mode{
  display:block; font-size:.78rem; color:#a8895a; margin-top:2px;
}
.gst-mode::before{ content:'● '; color:#7bd88f; font-size:.7em; vertical-align:middle }

/* ── L'INVITATION AU POINT DE BLOCAGE ───────────────────────────────────── */
/* Posee DANS l'onglet Equipement, juste sous les emplacements qu'on vient
   d'essayer de cliquer. C'est tout l'objet : la reponse arrive a l'endroit ou
   la question se pose. */
.gst-bloque{
  margin:16px 0 0; padding:14px 16px; border-radius:3px;
  /* Filet plein et discret, pas de pointilles (choix DA) : c'est la teinte
     violette de Twitch qui signale l'invitation, pas le trait. */
  border:1px solid rgba(145,70,255,.3); background:rgba(145,70,255,.08);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  justify-content:space-between;
}
.gst-bloque-titre{ margin:0; font-size:.92rem; color:#ebe1cf; font-weight:600 }
.gst-bloque-sous{ margin:3px 0 0; font-size:.8rem; color:#a8a48c }
.gst-ailleurs{ margin:14px 0 0; font-size:.82rem }
.gst-ailleurs a{ color:#a8895a; text-decoration:underline; text-underline-offset:3px }

@media (max-width: 560px){
  .gst-invite, .gst-bloque{ flex-direction:column; align-items:flex-start; gap:14px }
  /* En colonne, la base flexible de 460 px devenait une HAUTEUR : le bloc
     faisait 570 px au telephone, avec un grand vide sous la liste. */
  .gst-invite-mots{ flex:0 0 auto; width:100% }
  .gst-twitch{ width:100%; justify-content:center }
}
/* En tablette, le bouton tenait encore a droite du texte, mais au prix de la
   liste : chaque avantage passait sur deux lignes (mesure a 1024 px). Le texte
   prend toute la largeur, le bouton passe dessous, les avantages retrouvent
   une ligne chacun. */
@media (min-width: 561px) and (max-width: 1100px){
  .gst-invite-mots{ flex-basis:100% }
}

/* ── LE BLOC SCRIPTORIUM ────────────────────────────────────────────────── */
/* Les cartes et la collection sous un seul titre : la collection est ce avec
   quoi on compose, les cartes sont ce qu'on a compose. Un onglet de plus
   aurait separe deux moities de la meme chose. */
.gst-atelier{ padding-bottom:4px }
/* Le trait qui separe les cartes de la collection SANS les separer en deux
   encadres : la nuance tient tout le propos du bloc. */
.gst-sep{
  border:0; height:1px; margin:20px 0 4px;
  background:linear-gradient(90deg, transparent, rgba(168, 137, 90,.28), transparent);
}
.gst-atelier-titre{
  margin:0 0 14px; font-family:var(--font-title, 'MedievalSharp', serif);
  font-size:.95rem; letter-spacing:.14em; text-transform:uppercase;
  color:#a8895a; text-align:center;
}
.gst-cartes-tete{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:4px;
}
.gst-cartes-titre{ margin:0; font-size:.95rem; color:#ebe1cf; font-weight:600 }
.gst-cartes-sous{ margin:2px 0 10px; font-size:.8rem; color:#a8a48c; line-height:1.55 }
.gst-cartes-sous b{ color:#a8895a }
/* Le rappel que c'est une maquette reste VISIBLE : une donnee fictive qui ne
   se signale pas finit par etre prise pour vraie, et on batit dessus. */
.gst-maquette{
  margin:0 0 12px; font-size:.72rem; font-style:italic; color:#8a8672;
}
/* L'invitation a composer une carte. Elle etait un petit lien dans l'angle droit,
   coince entre les deux fleches du carrousel : l'action principale de la section
   avait l'air de se cacher. Elle devient un bloc en pleine largeur, sous les
   cartes, entierement cliquable. Filet PLEIN, jamais de pointilles. */
.gst-composer{
  display:flex; align-items:center; gap:16px; margin-top:16px;
  padding:14px 18px; text-decoration:none; border-radius:3px;
  background:linear-gradient(120deg, rgba(168, 137, 90,.10), rgba(168, 137, 90,.04) 60%);
  border:1px solid rgba(168, 137, 90,.32);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.gst-composer:hover{
  border-color:rgba(168, 137, 90,.65);
  background:linear-gradient(120deg, rgba(168, 137, 90,.17), rgba(168, 137, 90,.07) 60%);
  transform:translateY(-1px);
}
.gst-composer:focus-visible{ outline:2px solid #a8895a; outline-offset:3px }
.gst-composer-vignette{
  flex:0 0 auto; width:54px; height:76px; object-fit:cover; border-radius:3px;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.8), inset 0 0 0 1px rgba(168, 137, 90,.35);
}
.gst-composer-texte{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 }
.gst-composer-titre{ color:#ebe1cf; font-size:1rem; font-weight:600; line-height:1.3 }
.gst-composer-sous{ color:#a8a48c; font-size:.79rem; line-height:1.5 }
.gst-composer-action{
  flex:0 0 auto; align-self:center; white-space:nowrap;
  padding:10px 18px; border-radius:3px; font-size:.86rem; font-weight:600;
  color:#1a0e08; background:linear-gradient(180deg,#d8bb63,#a8895a 55%,#a7873a);
  border:1px solid rgba(168, 137, 90,.55);
}
.gst-composer:hover .gst-composer-action{ filter:brightness(1.07) }
@media (max-width:640px){
  .gst-composer{ flex-wrap:wrap; gap:12px }
  .gst-composer-texte{ flex:1 1 60% }
  .gst-composer-action{ flex:1 1 100%; text-align:center }
}

.gst-cartes-grille{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:16px;
}
/* Seule, la carte de reference se montre en plus grand : c'est la face
   publique, elle merite qu'on s'y arrete. */
.gst-cartes-grille--seule{ grid-template-columns:minmax(0, 232px) }
/* Un message n'est pas une vignette : il reprend toute la largeur, sinon la
   colonne de 232 px le coupe en deux lignes. */
.gst-cartes-grille--message{ display:block }
.gst-cartes-grille > *{ min-width:0 }

.gst-carte{
  margin:0; min-width:0; padding:10px; border-radius:3px;
  background:rgba(0,0,0,.2); border:1px solid rgba(168, 137, 90,.2);
  transition:border-color .15s, background .15s;
}
.gst-carte:hover{ border-color:rgba(168, 137, 90,.4); background:rgba(168, 137, 90,.06) }
/* La carte de reference se distingue par sa bordure, pas par sa taille : dans
   une grille, changer la taille d'une tuile casse l'alignement de toutes. */
.gst-carte--ref{ border-color:rgba(168, 137, 90,.6); background:rgba(168, 137, 90,.09) }
.gst-carte-image{ position:relative; aspect-ratio:420/588; border-radius:3px; overflow:hidden }
.gst-carte-image img{ width:100%; height:100%; object-fit:cover; display:block }
.gst-carte-etoile{
  position:absolute; top:6px; left:6px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:.85rem; color:#220f16;
  background:linear-gradient(135deg, #ffd85c, #e0a93c);
  box-shadow:0 1px 5px rgba(0,0,0,.5);
}
/* Sur son propre profil, l'etoile RETIRE la designation. Elle doit donc se
   voir comme un bouton, pas comme un galon : sans cela personne ne l'essaie.
   Le bouton porte son propre nom, pas un `--actif` nu. */
.gst-carte-etoile--bouton{
  border:0; padding:0; cursor:pointer; font-family:inherit; line-height:1;
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.gst-carte-etoile--bouton:hover{
  transform:scale(1.12);
  filter:saturate(.55);
  box-shadow:0 2px 9px rgba(0,0,0,.6);
}
.gst-carte-etoile--bouton:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
.gst-carte-etoile--bouton:disabled{ opacity:.45; cursor:default; transform:none }
.gst-carte figcaption{ display:block; margin-top:8px }
.gst-carte-nom{ display:block; font-size:.84rem; color:#ebe1cf; font-weight:600 }
.gst-carte-maj{ display:block; font-size:.72rem; color:#8a8672; margin-top:1px }

/* Les commandes ne se cachent PAS au survol : une action qu'il faut deviner
   n'est pas une action. Le cout est trois lignes de plus par carte, le gain
   est qu'on sait tout de suite ce qu'on peut faire. */
.gst-carte-actions{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px }
.gst-act{
  font:inherit; font-size:.73rem; padding:5px 9px; border-radius:3px; cursor:pointer;
  border:1px solid rgba(168, 137, 90,.3); background:rgba(0,0,0,.26); color:#c9bbaa;
  text-decoration:none; transition:background .13s, color .13s, border-color .13s;
}
.gst-act:hover{ background:rgba(168, 137, 90,.18); color:#ebe1cf; border-color:rgba(168, 137, 90,.5) }
.gst-act--premier{ background:rgba(168, 137, 90,.2); color:#f0e2c8; border-color:rgba(168, 137, 90,.5) }
.gst-act--danger:hover{ background:rgba(98, 36, 60,.36); color:#e8a88c; border-color:rgba(201,110,76,.5) }
/* L'etat n'est pas un bouton : il ne doit pas inviter au clic. */
/* L'etat n'a PAS de cadre, plutot qu'un cadre en pointilles : un bouton a un
   contour, une etiquette n'en a pas. */
.gst-act--etat{ cursor:default; color:#a8895a; background:transparent; border-color:transparent }
.gst-act--etat:hover{ background:transparent; color:#a8895a; border-color:transparent }
.gst-vide{ margin:0; font-size:.82rem; font-style:italic; color:#8a8672 }

/* L'invitation sous la carte de reference. C'etait un lien souligne perdu dans
   un paragraphe : rien n'appelait le clic. Meme traitement que partout
   ailleurs, un encadre et un vrai bouton, et on DIT ce qu'on va pouvoir faire
   plutot que de nommer l'action technique. */
.gst-bloque--carte{ margin-top:18px }
.gst-bloque--carte .gst-bloque-sous{ max-width:52ch; line-height:1.55 }

/* LES TROIS ETAPES. Numerotees, parce que c'est une SUITE : on gagne, puis on
   compose, puis on montre. Un paragraphe ne dit pas l'ordre, une liste
   numerotee le dit sans un mot de plus. */
.gst-etapes{
  margin:8px 0 0; padding:0; list-style:none;
  display:grid; gap:6px; counter-reset:etape;
  font-size:.83rem; color:#c9bbaa; max-width:58ch;
}
.gst-etapes li{
  position:relative; padding-left:26px; line-height:1.5; counter-increment:etape;
}
.gst-etapes li::before{
  content:counter(etape);
  position:absolute; left:0; top:1px;
  width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.66rem; font-weight:700; color:#220f16;
  background:linear-gradient(135deg, #ffd85c, #e0a93c);
}
.gst-etapes b{ color:#ebe1cf; font-weight:600 }

@media (max-width: 520px){
  .gst-cartes-grille{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:12px }
  .gst-cartes-grille--seule{ grid-template-columns:minmax(0, 190px); justify-content:center }
}

/* ── LES SUCCES EN DEPLIANTS ────────────────────────────────────────────── */
/* `details` natif : le clavier, les lecteurs d'ecran et la recherche du
   navigateur le connaissent deja. Un depliant maison aurait demande tout cela
   a la main, pour le meme resultat visible. */
.sc-pli{ display:block; padding:0 }
.sc-pli > summary{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; cursor:pointer; list-style:none;
  min-height:44px;
}
/* Le triangle par defaut de Chrome et de Safari ne se style pas : on le retire
   et on pose le notre, qui tourne. */
.sc-pli > summary::-webkit-details-marker{ display:none }
.sc-pli > summary::marker{ content:'' }
.sc-pli-fleche{
  margin-left:auto; flex:none; font-size:.7rem; color:#a8895a;
  transition:transform .16s;
}
.sc-pli[open] > .sc-pli-fleche, .sc-pli[open] summary .sc-pli-fleche{ transform:rotate(180deg) }
.sc-pli > summary:hover{ background:rgba(168, 137, 90,.08) }
.sc-pli > summary:focus-visible{ outline:2px solid #a8895a; outline-offset:-2px }
.sc-pli .profil-achievement-name{ font-weight:600 }
.sc-pli-corps{
  display:flex; flex-direction:column; gap:3px;
  padding:0 12px 11px 44px; font-size:.8rem; color:#a8a48c;
}
.sc-pli .profil-achievement-date{ color:#a8895a; font-size:.74rem }
/* Verrouille, le succes reste sobre : son nom suffit a dire ce qui manque. */
.profil-achievement.locked .profil-achievement-lock{ font-size:.9rem; flex:none; width:22px; text-align:center }

/* ── L'HISTORIQUE DE COMBAT EN GRILLE ───────────────────────────────────── */
/* Une ligne pleine largeur par boss ne tenait plus : le bestiaire est passe a
   neuf boss le 2026-09-13. Des cartes en grille absorbent les suivants sans
   que le bloc grandisse dans la meme proportion. */
/* Des pistes a largeur BORNEE et centrees : avec des pistes en `1fr`, quatre
   boss s'alignaient a gauche et laissaient un grand vide a droite du bloc.
   Centrees, les cartes se regroupent au milieu tant qu'elles sont peu
   nombreuses, et remplissent la largeur des qu'il y en a assez. */
.boss-combat-grid{
  /* `auto-fit` et non `auto-fill` : ce dernier garde des pistes VIDES qui
     occupent toute la largeur, et il ne restait rien a centrer. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 300px));
  justify-content:center;
  gap:12px;
  /* `start` et non l'etirement par defaut : sans cela, ouvrir un boss donnait
     sa hauteur a toute la rangee, et les cartes fermees voisines
     s'allongeaient d'un grand vide. */
  align-items:start;
}
.boss-combat-grid > *{ min-width:0 }
.boss-combat-card{
  padding:12px 13px; border-radius:3px; cursor:default;
  background:rgba(0,0,0,.2); border:1px solid rgba(168, 137, 90,.18);
}
.boss-combat-header{ display:flex; align-items:center; gap:9px; margin-bottom:9px }
.boss-combat-icon{ width:34px; height:34px; object-fit:contain; flex:none;
                   image-rendering:pixelated }
.boss-combat-name{
  font-size:.84rem; color:#ebe1cf; font-weight:600; line-height:1.3;
  min-width:0; overflow-wrap:anywhere;
}
/* 9 px et un creux marque. A 5 px sans contraste, la jauge se confondait avec
   une bordure : la streameuse a cru que je l'avais retiree, ce qui est le seul
   verdict qui compte pour un element dont le role est d'etre vu. */
/* La legende au-dessus, le chiffre au bout : on lit « taux de victoire » puis
   « 79 % », dans cet ordre, et la barre en dessous illustre les deux. */
.bcc-legende{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:.72rem; color:#a8a48c; margin-bottom:4px;
}
.boss-combat-bar-container{
  width:100%; min-width:0;
  height:9px; border-radius:3px; overflow:hidden;
  background:rgba(0,0,0,.5);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(168, 137, 90,.16);
}
.boss-combat-bar{
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, #7bd88f, #a8895a);
}
.bcc-taux{ flex:none; font-size:.82rem; font-weight:700; color:#a8895a }
/* Les quatre chiffres tiennent sur une ligne, avec le nombre EN AVANT du mot :
   c'est le nombre qu'on vient lire, pas l'etiquette. */
/* Deux colonnes, pas une ligne souple : quatre chiffres dans une ligne qui
   se replie donnaient trois plus un orphelin, « 15 combats » seul en bas.
   Meme defaut et meme remede que les gains du bandeau de tete. */
.bcc-chiffres{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:3px 12px; margin-top:9px;
  font-size:.73rem; color:#a8a48c;
}
.bcc-chiffre b{ color:#ebe1cf; font-size:.86rem; margin-right:3px }

/* Un succes secret n'a pas de depliant : il s'aligne quand meme sur les
   autres, sinon la grille se decale ligne apres ligne. */
.profil-achievement.locked.secret{
  display:flex; align-items:center; gap:10px; padding:9px 12px; min-height:44px;
}

/* ── LES CHRONIQUES EN CHAPITRES ────────────────────────────────────────── */
/* Onze tuiles identiques faisaient un tableur. Trois chapitres, chacun coiffe
   d'un picto deja valide sur le site, font une fiche de personnage. */
.chr-chapitres{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px; margin-top:4px;
}
.chr-chapitres > *{ min-width:0 }
.chr-chapitre{
  padding:12px 14px 14px; border-radius:3px;
  background:rgba(0,0,0,.2); border:1px solid rgba(168, 137, 90,.18);
}
/* La Compagnie tient toute la largeur quand la place le permet : c'est le
   chapitre de l'identite, il ouvre la fiche. */
/* Deux colonnes et non `auto-fit` : a cette largeur il en creait trois pour
   deux chapitres, et la derniere restait vide a droite du Combat. La grille se
   cale sur son CONTENU. L'Aventure prend plus de place, elle porte plus de
   chiffres. */
/* Sous 900 px, la grille fluide pose deux chapitres cote a cote et laisse Le
   Combat seul, une case vide a sa droite. Le dernier chapitre, s'il est
   orphelin, prend la ligne entiere ; en une seule colonne ca ne change rien. */
@media (max-width: 899px){
  .chr-chapitre:last-child:nth-child(odd){ grid-column:1 / -1 }
  .chr-chapitre:last-child:nth-child(odd) .chr-grille{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)) }
}
@media (min-width: 900px){
  .chr-chapitres{ grid-template-columns:minmax(0, 3fr) minmax(0, 2fr) }
  .chr-chapitre:first-child{ grid-column:1 / -1 }
  .chr-chapitre:first-child .chr-grille{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
}
.chr-tete{
  display:flex; align-items:center; gap:9px; margin-bottom:10px;
  font-family:var(--font-title, 'MedievalSharp', serif);
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:#a8895a;
}
.chr-picto{ width:30px; height:30px; object-fit:contain; flex:none }
.chr-grille{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px;
}
.chr-grille > *{ min-width:0 }
/* Le CHIFFRE en premier et en grand : c'est lui qu'on vient lire. */
.chr-stat{ display:flex; flex-direction:column; min-width:0 }
.chr-val{
  font-size:1.35rem; line-height:1.1; color:#f0e2c8; font-weight:600;
  overflow-wrap:anywhere;
}
/* Une date ou une duree n'est pas un nombre : composee a la meme taille, elle
   deborde de sa case ou ecrase ses voisines. */
.chr-stat--texte .chr-val{ font-size:1rem; line-height:1.3 }
.chr-lib{ font-size:.74rem; color:#a8a48c; margin-top:2px }
/* Un titre gagne est une RECOMPENSE : un insigne dore, pas une note grise. */
/* Un insigne se remarque sans voler la lecture. Le fond jaune plein etait
   l'element le plus lumineux de la section, plus visible que les chiffres
   qu'il accompagne : fond sombre teinte d'or, bordure et texte dores. */
.chr-titre{
  align-self:flex-start; margin-top:6px;
  font-size:.66rem; padding:2px 8px; border-radius:3px; line-height:1.45;
  color:#e3c77a; background:rgba(168, 137, 90,.12);
  border:1px solid rgba(168, 137, 90,.42);
}
.chr-titre::before{ content:'✦ '; font-size:.85em; color:#a8895a }

/* ── LES CARTES DE BOSS REPLIEES ────────────────────────────────────────── */
.bcc-pli{ padding:0 }
.bcc-pli > summary{
  display:block; padding:12px 13px; cursor:pointer; list-style:none;
}
.bcc-pli > summary::-webkit-details-marker{ display:none }
.bcc-pli > summary::marker{ content:'' }
.bcc-pli > summary:hover{ background:rgba(168, 137, 90,.07) }
.bcc-pli > summary:focus-visible{ outline:2px solid #a8895a; outline-offset:-2px }
/* Les enfants du summary sont des `span` : il faut leur rendre leur bloc. */
.bcc-pli .boss-combat-header,
.bcc-pli .bcc-legende,
.bcc-pli .boss-combat-bar-container{ display:flex }
.bcc-pli .boss-combat-bar-container{ display:block }
.bcc-pli .boss-combat-bar{ display:block }
.bcc-pli .boss-combat-header .sc-pli-fleche{ margin-left:auto }
.bcc-pli[open] .sc-pli-fleche{ transform:rotate(180deg) }
.bcc-pli .bcc-chiffres{ margin:0; padding:0 13px 12px }

/* ── UN SEUL ELEMENT DEFILE : LA FENETRE ────────────────────────────────── */
/* `profil.css` pose `.profil-page { overflow-x: hidden }` comme filet contre
   l'elargissement de la page. Mais masquer le debordement sur UN axe force
   l'autre a `auto` : la page devenait un conteneur de defilement imbrique dans
   la fenetre. Mesure : la fenetre defilait de 191 px et la page, en elle-meme,
   de 90.
   Sous la molette, le navigateur fait defiler le conteneur interieur d'abord,
   et arrive a sa fin il ne rend pas la main a la fenetre pendant le meme
   geste : le defilement s'arretait net, la molette tournant encore. Et un
   element collant collait a ce conteneur au lieu de l'ecran.
   `clip` coupe le debordement horizontal SANS creer de conteneur de
   defilement : le filet reste, le conteneur imbrique disparait.
   A PORTER dans `profil.css` : le meme defaut guette la page en ligne des
   qu'un element y deborde verticalement. */
.profil-page{ overflow-x:clip; overflow-y:visible }

/* ── LA POLICE DES NOMS DE BOSS ─────────────────────────────────────────── */
/* `profil.css` leur donne 'IM Fell English SC', abandonnee a l'unification des
   polices de juillet, et chargee nulle part : on voyait un serif generique par
   defaut. Libelles de carte, ils prennent la police de texte de la maison.
   A PORTER dans `profil.css` : le defaut est en ligne. */
.boss-combat-name{
  font-family:var(--font-body, 'Comfortaa', sans-serif);
  font-weight:600; letter-spacing:0; text-transform:none;
}

/* ── PAS DE POINTILLES (choix DA) ───────────────────────────────────────── */
/* Deux regles de `profil.css` en posent. Le vide et le verrou gardent leur
   signe : opacite et gris pour l'un et l'autre, plus un creux ombre. A PORTER
   dans `profil.css` en retirant les deux `border-style: dashed`. */
.gift-slot--empty{ border-style:solid; box-shadow:inset 0 1px 6px rgba(0,0,0,.45) }
.coll-piece.verrou{ border-style:solid }

/* ── LA COLLECTION EN ACCORDEON ─────────────────────────────────────────── */
/* Une barre qui se lit comme depliable : chevron a droite qui pivote, cadre
   dore plus present que le bouton d'inventaire ordinaire. */
.gst-atelier .gst-pli{
  margin:14px 0 0; padding:.8rem 1rem;
  background:rgba(0,0,0,.22); border-color:rgba(168, 137, 90,.24); color:#ebe1cf;
}
.gst-atelier .gst-pli:hover{ background:rgba(168, 137, 90,.1); border-color:rgba(168, 137, 90,.45) }
.gst-atelier .gst-pli:focus-visible{ outline:2px solid #a8895a; outline-offset:3px }
.gst-atelier.open .gst-pli{ border-color:rgba(168, 137, 90,.42) }
.gst-pli-lib{ flex:1; min-width:0 }
.gst-pli-chevron{
  flex-shrink:0; width:8px; height:8px; margin:0 6px 3px 0;
  border-right:2px solid #a8895a; border-bottom:2px solid #a8895a;
  transform:rotate(45deg); transition:transform .25s ease;
}
.gst-atelier.open .gst-pli-chevron{ transform:translateY(3px) rotate(-135deg) }

/* L'ouverture se fait en GRILLE de 0fr a 1fr et non en `max-height` : le
   plafond de 20000 px de `profil.css` rendait la fermeture muette pendant
   presque toute la transition, le temps de redescendre jusqu'a la vraie
   hauteur. En grille, la hauteur animee EST la hauteur du contenu. */
.gst-atelier .profil-inventory-content,
.gst-atelier.open .profil-inventory-content{
  display:grid; grid-template-rows:0fr; max-height:none; overflow:visible;
  transition:grid-template-rows .35s ease;
}
.gst-atelier.open .profil-inventory-content{ grid-template-rows:1fr }
/* Retrait compense par une marge negative : les reperes shiny qui depassent
   du haut des tuiles ne sont pas coupes par le masque de l'accordeon. */
.gst-pli-corps{ min-height:0; overflow:hidden; padding:12px 6px 4px; margin:-12px -6px 0 }
.gst-pli-corps > .coll-intro:first-child{ margin-top:10px }
/* Replie, le contenu sort aussi de l'ordre de tabulation, une fois la
   fermeture animee. */
.gst-atelier:not(.open) .gst-pli-corps{ visibility:hidden; transition:visibility 0s .35s }

@media (prefers-reduced-motion: reduce){
  .gst-atelier .profil-inventory-content, .gst-pli-chevron{ transition:none }
  .gst-atelier:not(.open) .gst-pli-corps{ transition:none }
}

/* ── LE RUBAN D'ONGLETS AU TELEPHONE ────────────────────────────────────── */
/* `style.css` donne a tout le site une barre de defilement epaisse et claire :
   sous un ruban d'onglets, elle se lisait comme un element d'interface a part
   entiere. Barre masquee ; c'est le FONDU au bord droit qui dit qu'il reste
   des onglets a faire glisser. `overflow-y: hidden` retire le pixel de
   debordement vertical qui ajoutait une seconde barre. Le retrait de fin
   laisse le dernier onglet sortir du fondu une fois le ruban au bout. */
@media (max-width: 768px){
  .profil-tabs{
    overflow-y:hidden; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    padding-inline-end:36px;
  }
  .profil-tabs::-webkit-scrollbar{ display:none }
}