@charset "UTF-8";
/* =========================================================================
   PROFIL PLEIN ECRAN - prototype dans l'esprit du bestiaire refondu

   Liste a gauche, scene au centre, fiche a droite, en pleine page sous la
   navigation. Toutes les regles sont prefixees par `body.pj` : cette feuille
   est chargee par `profil-jeu.html` seulement, et un nom de classe du profil
   ne doit jamais capturer une regle ecrite pour une autre page. Le projet a
   paye ce defaut cinq fois.

   Les valeurs d'ambiance (flou, luminosite, filigrane) sont RELEVEES dans
   `bestiaire-v2.css` et non retrouvees a l'oeil : les deux pages doivent se
   reconnaitre comme soeurs.
   ========================================================================= */

/* ── ce qui disparait ──────────────────────────────────────────────────── */
/* Le grand bandeau « Registre des Aventuriers » RESTE, contrairement au
   bestiaire : sans lui la page perdait son en-tete et ne se lisait plus comme
   une page du registre (retour de la streameuse, 2026-09-13). */
body.pj .footer{ display:none }

/* ── LE BANDEAU DU REGISTRE, FONDU DANS LA PAGE ─────────────────────────── */
/* Tel quel, c'etait un bloc opaque a bord franc pose sur la video de fond : la
   page se coupait en deux. Le bandeau garde tout ce qui le fait reconnaitre
   (titre, filet, sous-titre, carte du monde, recherche) mais son fond se fond
   vers le bas dans l'ambiance, sans ligne de separation.
   Le fondu reste A L'INTERIEUR du bandeau : un calque positionne qui
   deborderait dessous passerait par-dessus le bloc de connexion. */
body.pj .profil-hero{
  background:linear-gradient(180deg, rgba(22, 13, 16,.9) 0%, rgba(22, 13, 16,.62) 58%, rgba(22, 13, 16,0) 100%);
  padding-bottom:3.2rem;
}
body.pj .profil-hero-bg{
  opacity:.22;
  -webkit-mask-image:linear-gradient(180deg, #000 40%, transparent 96%);
  mask-image:linear-gradient(180deg, #000 40%, transparent 96%);
}
/* Sur la video, le brun du sous-titre et du filet d'origine se perdait. */
body.pj .profil-hero-subtitle{ color:#9a8177 }
body.pj .profil-hero h1::after{ background:linear-gradient(90deg, transparent, #a8895a, transparent); opacity:.6 }
/* Un seul retour au registre sur la page : celui qui est centre au-dessus du
   bloc de profil. Le bandeau garde la recherche. */
body.pj .profil-hero-btn{ display:none }
body.pj .profil-nav-search input{ background:rgba(10, 4, 6,.55); border-color:rgba(168, 137, 90,.28) }

/* Le bandeau du registre porte deja le retrait sous la navigation fixe : la
   page qui le suit commence donc sans retrait. `--pj-nav` reste mesuree par le
   script, elle sert encore a la hauteur minimale de la grille. */
body.pj{ --pj-nav:63px }
body.pj .profil-page{
  max-width:none; margin:0; padding:0;
}
/* L'invitation a la connexion reste, mais en bande fine sur toute la largeur :
   elle ne doit pas repousser les trois colonnes sous la ligne de flottaison. */
/* Il avait ete comprime pour ne pas repousser les colonnes, et il manquait
   d'air : on lui rend ses marges. Le gain de place etait faible, le cout se
   voyait tout de suite. */
body.pj #profil-auth-btn{ margin:0; padding:22px 30px 6px }
body.pj .gst-invite{ padding:18px 24px; gap:22px }
body.pj .gst-invite-sous{ margin:2px 0 9px }
body.pj .gst-gains{ row-gap:7px }

/* ── LA GRILLE A TROIS COLONNES ────────────────────────────────────────── */
body.pj .profil-layout{
  display:grid;
  /* La scene a une largeur BORNEE et non une fraction : en `fr` elle grandit
     avec la fenetre, et sur un grand ecran l'aventuriere flottait au milieu de
     841 px de vide. Le bestiaire la tient autour de 530. */
  /* L'IDENTITE A GAUCHE, LA LISTE CONTRE LA FICHE. L'ordre du bestiaire ne
     se transposait pas : sa scene montre l'element choisi dans la liste, alors
     que l'identite d'un profil ne change jamais. Placee entre la liste et la
     fiche, elle separait le clic de ce qu'il affiche. */
  /* DEUX colonnes : l'identite, et la fiche coiffee de son sommaire. Une
     colonne de sommaire a part laissait beaucoup de vide a cote de sections
     souvent courtes. Le sommaire reste colle a ce qu'il commande, en tete de
     la fiche, et la fiche recupere toute la largeur. */
  grid-template-columns:clamp(290px, 21vw, 380px) minmax(0, 1fr);
  /* Trois rangees a droite : le sommaire, la section choisie, et l'inventaire
     dessous. Deux elements poses dans la meme zone de grille se superposent :
     l'inventaire a donc sa propre rangee. */
  grid-template-rows:auto auto 1fr;
  /* La premiere rangee porte le retour au registre a gauche et le sommaire a
     droite : le lien partage ainsi la hauteur des onglets, et la largeur de la
     colonne d'identite. */
  grid-template-areas:"retour liste" "scene fiche" "scene inventaire";
  gap:0; margin:0; max-width:none;
  min-height:calc(100vh - var(--pj-nav));
}
/* `display: contents` fait des enfants de `.profil-main` des elements de la
   grille : la barre d'onglets et les contenus peuvent alors etre ranges dans
   des colonnes differentes sans deplacer un seul noeud du DOM. */
body.pj .profil-main{ display:contents }
body.pj .profil-layout > *, body.pj .profil-main > *{ min-width:0 }

/* ── LA LISTE ──────────────────────────────────────────────────────────── */
/* Le sommaire en une rangee de cartes, qui passe a la ligne si la place
   manque. Grille plutot que flex : sept entrees dans une ligne souple finiraient
   en six plus une orpheline a une largeur ou une autre. */
body.pj .profil-tabs{
  grid-area:liste;
  /* `auto-fit` et non `auto-fill` : ce dernier garde des pistes VIDES, et les
     sept cartes s'arretaient aux deux tiers de la rangee. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(205px, 1fr)); gap:8px;
  position:static; align-self:start; height:auto; overflow:visible;
  padding:22px 30px 6px; border:0; background:none; margin:0;
}
body.pj .pj-tete, body.pj .pj-aide{ display:none }
/* Le retour au registre ouvre la colonne d'identite, comme il ouvre la tete du
   bestiaire. La liste, elle, n'a plus besoin de redire le nom. */
/* CENTRE DANS LES DEUX SENS PAR LA GRILLE : horizontalement sur la colonne
   d'identite, donc sur le bloc de profil ; verticalement sur la rangee du
   sommaire, donc sur les onglets. Et lisible comme un bouton, parce que c'est
   la seule sortie de la page : un lien gris de 13 px au-dessus d'un portrait
   ne se voyait pas. */
body.pj .pj-retour-scene{
  grid-area:retour; justify-self:center; align-self:center;
  /* 16 px = retrait haut du sommaire (22) moins son retrait bas (6). Sans cette
     marge, le lien se centre sur la RANGEE et non sur les boutons, et tombe
     8 px trop haut. A reprendre si ces retraits changent. */
  margin-top:16px;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:3px; text-decoration:none;
  font-size:.84rem; color:#ebe1cf;
  background:rgba(10, 4, 6,.45); border:1px solid rgba(168, 137, 90,.38);
  transition:background .14s, border-color .14s, color .14s;
  min-height:40px;
}
body.pj .pj-retour-scene span{ color:#a8895a; transition:transform .14s }
body.pj .pj-retour-scene:hover{
  background:rgba(168, 137, 90,.14); border-color:rgba(168, 137, 90,.7); color:#fff3dc;
}
body.pj .pj-retour-scene:hover span{ transform:translateX(-3px) }
body.pj .pj-retour-scene:focus-visible{ outline:2px solid #a8895a; outline-offset:3px }
body.pj .pj-retour{ font-size:.74rem; color:#a8a48c; text-decoration:none }
body.pj .pj-retour:hover{ color:#a8895a }
body.pj .pj-titre{
  margin:0; font-family:var(--font-title, 'MedievalSharp', serif);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#a8895a;
}
body.pj .pj-sous{
  margin:3px 0 0; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:#8a8672;
}

/* Une entree : icone, numero, libelle, sous-titre. Les lignes du bestiaire
   portent la meme grammaire, un chiffre discret et une phrase en italique. */
body.pj .profil-tab-btn{
  display:grid; grid-template-columns:38px minmax(0, 1fr);
  grid-template-areas:"ico num" "ico lib" "ico meta";
  align-items:center; column-gap:11px;
  width:100%; text-align:left;
  padding:10px 12px; border-radius:3px; cursor:pointer;
  background:rgba(0,0,0,.24); border:1px solid rgba(168, 137, 90,.16);
  color:#ebe1cf; font:inherit; letter-spacing:0; text-transform:none;
  transition:background .15s, border-color .15s;
}
body.pj .profil-tab-btn:hover{ background:rgba(168, 137, 90,.08); border-color:rgba(168, 137, 90,.32) }
body.pj .profil-tab-btn.active{
  background:rgba(168, 137, 90,.12); border-color:rgba(235, 225, 207,.62);
  box-shadow:inset 3px 0 0 #a8895a;
}
body.pj .profil-tab-btn:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
body.pj .profil-tab-btn .profil-tab-icon{
  grid-area:ico; width:38px; height:38px; padding:8px;
  border-radius:6px; background:rgba(0,0,0,.3); color:#a8895a;
}
body.pj .pj-num{ grid-area:num; font-size:.62rem; color:#8a8672; letter-spacing:.08em }
body.pj .pj-lib{
  grid-area:lib; font-family:var(--font-title, 'MedievalSharp', serif);
  font-size:.95rem; line-height:1.2; color:#ebe1cf;
}
body.pj .pj-meta{ grid-area:meta; font-size:.72rem; font-style:italic; color:#a8a48c; margin-top:1px }
body.pj .pj-aide{
  margin:auto 4px 0; padding-top:12px; font-size:.68rem; color:#8a8672;
}
body.pj .pj-aide kbd{
  display:inline-block; min-width:18px; padding:0 4px; margin-right:3px;
  border:1px solid rgba(168, 137, 90,.35); border-radius:3px; text-align:center;
  font:inherit; color:#c9bbaa;
}

/* ── LA SCENE ──────────────────────────────────────────────────────────── */
/* TOUTE LA HAUTEUR DE LA PAGE, sans defilement propre. Collante et de la
   hauteur de l'ecran, la colonne avait une barre de defilement sur un ecran de
   1080 px et une video qui ne couvrait qu'une hauteur d'ecran. Le collage ne
   tenait meme pas : `overflow-x: hidden` sur la page et le corps en fait des
   conteneurs de defilement, et un element collant colle alors a eux, pas a
   l'ecran. Allegee, la colonne n'a plus besoin de coller : elle s'etire sur la
   hauteur de la grille. */
body.pj .pj-scene{
  grid-area:scene;
  /* `top: auto` : `profil.css` pose `top: 5rem` pour le collage de l'ancienne
     colonne. Sur un element RELATIF, ce meme `top` ne fixe plus un point de
     collage, il DECALE : 5rem a 18 px de base, soit les 90 px de trop mesures. */
  position:relative; top:auto; align-self:stretch;
  height:auto; overflow:visible;
  /* Retrait haut reduit a celui de la fiche : le retour au registre est parti
     dans sa propre rangee, et le bloc de profil s'aligne desormais sur le haut
     de la fiche d'en face. */
  padding:12px 22px 26px; margin:0;
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
  isolation:isolate;
  /* La barre de defilement, habillee d'or par la feuille du site, se lisait
     comme un epais filet de separation entre l'identite et la fiche. */
  scrollbar-width:thin; scrollbar-color:rgba(168, 137, 90,.32) transparent;
}
/* COLLANT et non absolu. Un calque en `inset: 0` couvre la partie VISIBLE
   d'un conteneur qui defile, pas tout son contenu : la colonne faisait 1343 px
   pour 1242 visibles, et le bas sortait de la video. Collant, le fond reste a
   l'ecran pendant que le contenu glisse par-dessus. La marge negative l'empeche
   d'occuper de la place dans la colonne. */
/* ── LE FOND DE PAGE ───────────────────────────────────────────────────── */
/* Fixe, derriere tout, sur toute la fenetre.
   RENDU EN QUART DE RESOLUTION PUIS AGRANDI. Un flou sur une video de pleine
   page se recalcule a chaque image, et ce cout se paie pendant le defilement.
   Floutee et assombrie comme elle l'est, une video quatre fois plus petite est
   indiscernable, et le flou coute environ seize fois moins. Le rayon de flou
   est divise d'autant, puisque l'agrandissement le multiplie. L'echelle de
   4.24 et non 4 reprend le leger debord du bestiaire (1.06), qui evite que le
   flou n'eclaircisse les bords. */
body.pj .pj-fond{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
body.pj .pj-fond-video{
  position:absolute; left:0; top:0; width:25%; height:25%; object-fit:cover;
  transform:scale(4.24); transform-origin:0 0;
  filter:blur(1.25px) brightness(.32) saturate(.75);
}
body.pj .pj-fond::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 35%, rgba(168, 137, 90,.12), transparent 70%),
    linear-gradient(90deg, rgba(27, 16, 19,.35), rgba(27, 16, 19,.6));
}
/* Pas de fond ni de filet sur la colonne : sur la video de page, elle se lit
   tres bien sans, et le cadre du bloc de profil suffit a la delimiter. */
body.pj .pj-filigrane{ display:none }
body.pj .pj-filigrane-inutilise{
  position:absolute; top:.3rem; right:1rem; z-index:-1;
  font-family:var(--font-title, 'MedievalSharp', serif);
  font-size:clamp(4.5rem, 8vw, 9rem); line-height:1;
  color:#a8895a; opacity:.09; user-select:none;
}
/* Les cartes de la colonne perdent leur habillage de boite : sur la scene,
   c'est le fond qui porte l'ambiance, et des encadres empiles la morcelleraient. */
/* `flex-shrink: 0` : la colonne a une hauteur fixe, et en flex ses enfants
   retrecissent par defaut pour y tenir. La boite d'identite masque ce qui la
   deborde : elle recevait 696 px pour 800 de contenu, et le lien du
   Scriptorium disparaissait. Les enfants gardent leur hauteur, la colonne
   defile. */
body.pj .pj-scene > *{ flex-shrink:0 }
body.pj .pj-scene > .profil-header,
body.pj .pj-scene > .profil-level-section,
body.pj .pj-scene > .profil-section{
  background:rgba(10, 4, 6,.42); border:1px solid rgba(168, 137, 90,.14);
  box-shadow:none; margin:0; backdrop-filter:blur(2px);
}
/* L'aventuriere est le SUJET de la scene, comme le sprite du boss : son
   portrait grandit, avec la meme ombre portee. */
body.pj .pj-scene .profil-avatar{
  width:min(190px, 60%); height:auto; aspect-ratio:1;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));
}

/* ── LA FICHE ──────────────────────────────────────────────────────────── */
body.pj .profil-tab-content,
body.pj .profil-collection-section{ grid-area:fiche; margin:0 }
body.pj .profil-tab-content.active{ padding:12px 30px 18px }
/* Le Scriptorium prend une MARGE et non un retrait. Les onglets sont des
   enveloppes sans cadre, dont le retrait entoure l'encadre ; la section du
   Scriptorium EST l'encadre, et le meme retrait passait a l'interieur, si bien
   que le cadre prenait toute la largeur, plus large que le sommaire. */
body.pj .profil-layout[data-vue="scriptorium"] [data-pj-vue="scriptorium"]{
  margin:12px 30px 18px;
}
/* Le Scriptorium ne se montre que choisi ; les onglets gerent deja leur
   propre visibilite par leur classe active. */
body.pj .profil-layout[data-vue="onglet"] [data-pj-vue="scriptorium"]{ display:none }

/* L'INVENTAIRE, SOUS CHAQUE SECTION, ouvert d'office. Il occupe la hauteur que
   les sections courtes laissaient vide. Son bouton de depliant disparait : on
   ne replie pas ce qu'on a choisi d'exposer. */
/* ALIGNE sur les blocs de section : une MARGE egale au retrait de la fiche,
   et non un retrait interieur. En remplacant son retrait par le mien, le bloc
   debordait a gauche des sections et son premier encadre touchait le cadre.
   Il garde son retrait d'origine. Replie par defaut, avec son bouton. */
body.pj [data-pj-inventaire]{
  grid-area:inventaire; align-self:start; margin:6px 30px 40px;
}

body.pj .pj-fiche-haut{ grid-area:fiche; align-self:start; height:0; scroll-margin-top:60px }

/* ── LA PROGRESSION, DANS LES CHRONIQUES ───────────────────────────────── */
/* Le niveau et la derniere expedition quittent la colonne d'identite. Ils
   s'ouvrent les Chroniques, cote a cote, dans la meme matiere que les
   chapitres, pour se lire comme leur prologue et non comme deux encadres
   rapportes. */
body.pj .pj-progression{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px;
  margin:4px 0 14px;
}
body.pj .pj-progression > *{
  min-width:0; margin:0; padding:14px 16px;
  background:rgba(0,0,0,.2); border:1px solid rgba(168, 137, 90,.18);
  border-radius:3px; box-shadow:none;
}
/* Le niveau se lit en LIGNE : picto, libelle et chiffre d'un cote, jauge sous
   eux. Centre et empile comme dans la colonne, il prenait trois fois la
   hauteur utile. */
/* `flex-direction: row` EXPLICITE : la feuille d'origine empile cet en-tete
   en colonne, et un `display:flex` seul heritait de ce sens. */
body.pj .pj-progression .profil-level-section{ text-align:left }
body.pj .pj-progression .profil-level-header{
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
  gap:10px; margin-bottom:12px; text-align:left;
}
body.pj .pj-progression .profil-level-icon{ width:34px; height:34px; margin:0 }
body.pj .pj-progression .profil-level-label{ font-size:.8rem; letter-spacing:.1em }
body.pj .pj-progression .profil-level-number{ margin-left:auto; font-size:1.5rem }
body.pj .pj-progression .profil-section-title{ text-align:left; margin-bottom:8px }
body.pj .pj-progression .profil-section-title::after{ display:none }

/* ── TELEPHONE ET TABLETTE ─────────────────────────────────────────────── */
/* Sous 1100 px, trois colonnes ne tiennent plus : la liste devient un ruban
   horizontal, la scene passe en tete, la fiche dessous. Chaque etage recoit
   `min-width: 0`, sans quoi le ruban pousse la page au lieu de defiler. */
@media (max-width: 1100px){
  body.pj .profil-layout{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto;
    grid-template-areas:"retour" "scene" "liste" "fiche" "inventaire";
    min-height:0;
  }
  /* Au telephone, sept cartes sur plusieurs lignes repousseraient la fiche tres
     bas : le sommaire devient un ruban qui defile, en interne seulement. */
  /* `scroll-padding` : sans lui l'accrochage calait la premiere carte contre
     le bord de l'ecran, retrait ignore. Barre masquee et fondu au bord droit,
     comme sur l'autre prototype. */
  body.pj .profil-tabs{
    display:flex; overflow-x:auto; overflow-y:hidden;
    padding:10px 44px 10px 16px; scroll-snap-type:x mandatory; scroll-padding-inline:16px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  body.pj .profil-tabs::-webkit-scrollbar{ display:none }
  body.pj .pj-tete, body.pj .pj-aide{ display:none }
  body.pj .profil-tab-btn{ flex:0 0 auto; width:auto; min-width:190px; scroll-snap-align:start }
  body.pj .pj-scene{ padding-inline:16px }
  body.pj .pj-scene{ position:relative; height:auto; overflow:visible }
  body.pj .profil-tab-content.active{ padding:18px 16px 10px }
  body.pj .profil-layout[data-vue="scriptorium"] [data-pj-vue="scriptorium"]{ margin:18px 16px 10px }
  body.pj [data-pj-inventaire]{ margin:6px 16px 30px }
  body.pj .pj-progression{ grid-template-columns:minmax(0, 1fr) }
}

/* Sur un tres grand ecran, la bande de connexion fait toute la largeur, et ses
   deux colonnes de gains s'ecartaient de pres de 900 px : on ne lisait plus une
   liste, on lisait deux phrases perdues aux deux bouts. La liste garde une
   largeur de lecture, le bouton reste a droite. */
body.pj .gst-gains{ max-width:880px }

/* ── L'IDENTITE EN TABLETTE ─────────────────────────────────────────────── */
/* Entre 640 et 1100 px, la colonne d'identite occupe toute la largeur : tout
   empile au centre, elle faisait 830 px de haut avant le premier onglet. Elle
   passe en deux colonnes, le portrait a gauche, le reste a droite, et retombe
   a la hauteur du portrait. Au telephone, l'empilement centre reste le bon. */
@media (min-width: 640px) and (max-width: 1100px){
  body.pj .pj-scene .profil-header{
    display:grid; grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:
      "avatar nom"
      "avatar role"
      "avatar stats"
      "avatar devise"
      "avatar badges"
      "avatar scr";
    column-gap:28px; row-gap:8px; align-items:center; text-align:left;
  }
  body.pj .pj-scene .profil-avatar{ grid-area:avatar; width:170px; align-self:center; margin:0 }
  body.pj .pj-scene .profil-name{ grid-area:nom; margin:0; text-align:left }
  body.pj .pj-scene .profil-role-line{ grid-area:role; flex-direction:row; justify-content:flex-start; gap:12px; margin:0 }
  body.pj .pj-scene .profil-role-icon{ width:64px; height:64px }
  body.pj .pj-scene .profil-role-stats{ grid-area:stats; justify-content:flex-start; justify-self:start; margin:0; padding-inline:18px }
  body.pj .pj-scene .profil-motto{ grid-area:devise; margin:0; text-align:left }
  body.pj .pj-scene .profil-badges{ grid-area:badges; justify-content:flex-start; margin:0 }
  body.pj .pj-scene .profil-scriptorium-wrapper{ grid-area:scr; margin:4px 0 0; flex-direction:row; justify-content:flex-start; gap:12px }
}

/* ── LES ONGLETS EN TABLETTE ────────────────────────────────────────────── */
/* Entre 700 et 1100 px, le ruban passait a la ligne (le `flex-wrap` de
   profil.css) et laissait un trou a droite de la seconde ligne. Six entrees
   en trois colonnes : deux lignes pleines, tout visible, rien a faire glisser.
   Le ruban qui defile reste reserve au telephone. */
@media (min-width: 700px) and (max-width: 1100px){
  body.pj .profil-tabs{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
    overflow:visible; padding:10px 16px; scroll-snap-type:none;
    -webkit-mask-image:none; mask-image:none;
  }
  body.pj .profil-tab-btn{ min-width:0 }
}

/* ── ENTRE 1101 ET 1700 PX : LA COLONNE ETROITE ─────────────────────────── */
/* Six onglets en `auto-fit` donnaient quatre puis deux selon la largeur, avec
   un trou a droite. Six colonnes ne tiennent qu'au-dela de 1700 px (205 px
   chacune a cote de la colonne d'identite) ; en dessous, trois colonnes font
   deux lignes pleines. */
@media (min-width: 1101px) and (max-width: 1700px){
  body.pj .profil-tabs{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
}
/* La colonne d'identite descend a 290 px vers 1280 : le libelle du retour, en
   taille normale, en faisait 310 et sortait par la gauche sur deux lignes. */
@media (min-width: 1101px) and (max-width: 1500px){
  body.pj .pj-retour-scene{ font-size:.76rem; padding:8px 13px; gap:6px; white-space:nowrap; max-width:calc(100% - 20px) }
}


/* ═════════════════════════════════════════════════════════════════════════
   FUSION (2026-09-14)
   Tout ce qui suit est propre a profil.html. Les regles au-dessus sont
   celles de profil-jeu, dont cette page descend.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── LE CONTENEUR BORNE ─────────────────────────────────────────────────── */
/* Ni le plein ecran de profil-jeu, ni les 1300 px de profil-shiny : 1640 px.
   Le bandeau et la video restent sur toute la largeur, seul le contenu se
   resserre. La colonne d'identite se regle en POURCENTAGE du conteneur et non
   plus de la fenetre, puisque le conteneur ne suit plus la fenetre. */
@media (min-width: 1101px){
  body.pj .profil-page{ max-width:1640px; margin-inline:auto; padding-inline:24px }
  body.pj .profil-layout{ grid-template-columns:clamp(290px, 24%, 360px) minmax(0, 1fr) }
  body.pj .profil-tabs{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
}
/* Six onglets sur une rangee a partir de 1760 px, et chaque onglet s'empile :
   icone et numero en tete, libelle et sous-titre sur toute la largeur. A cote
   de l'icone, a moins de 200 px, le sous-titre passait sur trois lignes. */
@media (min-width: 1760px){
  body.pj .profil-tabs{ grid-template-columns:repeat(6, minmax(0, 1fr)) }
  body.pj .profil-tab-btn{
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:"ico num" "lib lib" "meta meta";
    row-gap:6px; column-gap:9px; align-content:start; padding:10px 12px 11px;
  }
  body.pj .profil-tab-btn .profil-tab-icon{ width:30px; height:30px; padding:6px }
  body.pj .pj-num{ justify-self:end; align-self:start }
  body.pj .pj-meta{ margin-top:-3px }
}

/* ── COULEURS PARTAGEES ─────────────────────────────────────────────────── */
/* Palier de lien : les couleurs de profil.css, reprises en variable pour
   l'anneau, la barre et les libelles. */
body.pj [data-affinity-tier]{ --tier:#a8895a }
body.pj [data-affinity-tier="uncommon"]{ --tier:#4a8c5c }
body.pj [data-affinity-tier="rare"]{ --tier:#4a7cb5 }
body.pj [data-affinity-tier="epic"]{ --tier:#9b59b6 }
body.pj [data-affinity-tier="legendary"]{ --tier:#ff9f1a }
body.pj [data-affinity-tier="cursed"]{ --tier:#d4384b }
/* Sources d'un lien : cinq teintes du registre, distinctes des couleurs de
   palier pour ne pas faire croire qu'une source vaut un palier. */
body.pj [data-source="checkin"]{ --src:#a8895a }
body.pj [data-source="coop"]{ --src:#7fa37a }
body.pj [data-source="boss"]{ --src:#b8674a }
body.pj [data-source="gift"]{ --src:#c77d9a }
body.pj [data-source="chat"]{ --src:#8f86c9 }

/* ── LIENS : LA LISTE DE CONTACTS ───────────────────────────────────────── */
body.pj .lien-reseau{
  display:grid; grid-template-columns:clamp(210px, 30%, 260px) minmax(0, 1fr);
  gap:18px; align-items:start; margin-top:16px;
}
body.pj .lien-liste{
  list-style:none; margin:0; padding:6px;
  display:flex; flex-direction:column; gap:3px;
  background:rgba(0,0,0,.18); border:1px solid rgba(168, 137, 90,.14); border-radius:3px;
}
body.pj .lien-liste > li{ min-width:0 }
body.pj .lien-ami{
  appearance:none; width:100%; display:flex; align-items:center; gap:12px;
  padding:8px 10px; border:1px solid transparent; border-radius:3px;
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:background .14s, border-color .14s;
}
body.pj .lien-ami:hover{ background:rgba(168, 137, 90,.07) }
body.pj .lien-ami[aria-selected="true"]{ background:rgba(168, 137, 90,.12); border-color:rgba(168, 137, 90,.34) }
body.pj .lien-ami:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
body.pj .lien-ami-texte{ display:flex; flex-direction:column; min-width:0 }
body.pj .lien-ami-nom{
  font-size:.9rem; font-weight:600; color:#ebe1cf;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.pj .lien-ami-palier{ font-size:.72rem; color:var(--tier) }

/* Le portrait cerne : l'arc colore EST la progression vers le palier
   suivant, lue d'un coup d'oeil sans chiffre. */
body.pj .lien-anneau{
  --taille:44px;
  position:relative; flex:none; display:block;
  width:var(--taille); height:var(--taille); padding:3px; border-radius:50%;
  /* Fond d'anneau SOMBRE : en brun clair, l'arc gris d'un « Lien naissant »
     ne se distinguait pas de sa piste. */
  /* SENS DE REMPLISSAGE : l'arc part du HAUT, passe par la gauche, le bas,
     puis remonte par la droite (sens anti-horaire a l'ecran). Un
     `conic-gradient` part du haut mais tourne dans le sens HORAIRE : on fait
     donc COMMENCER le degrade la ou l'arc se termine, `360deg - progression`,
     pour que sa fin tombe pile en haut. Aucune rotation d'element, le portrait
     reste droit. */
  background:conic-gradient(from calc(360deg - var(--lien-prog, 0) * 360deg),
    var(--tier) 0 calc(var(--lien-prog, 0) * 1turn), rgba(0,0,0,.45) 0);
  box-shadow:inset 0 0 0 1px rgba(168, 137, 90,.18);
}
body.pj .lien-anneau img{
  display:block; width:100%; height:100%; box-sizing:border-box;
  border-radius:50%; object-fit:cover; border:2px solid #1c0d13; background:#190b10;
}
body.pj .lien-anneau--grand{ --taille:92px; padding:4px }
body.pj .lien-anneau--grand img{ border-width:3px }

/* ── LIENS : LA CARTE DE PROFIL ─────────────────────────────────────────── */
body.pj .lien-carte{
  position:relative; overflow:hidden;
  padding:20px 22px; border-radius:3px;
  background:linear-gradient(165deg, rgba(0,0,0,.3), rgba(0,0,0,.12));
  border:1px solid rgba(168, 137, 90,.16);
}
/* Une lueur de la couleur du palier en haut de la carte, facon banniere de
   profil : la carte change d'ambiance d'un contact a l'autre. */
body.pj .lien-carte::before{
  content:''; position:absolute; inset:0 0 auto; height:120px; pointer-events:none;
  background:radial-gradient(ellipse 55% 100% at 12% 0%, color-mix(in srgb, var(--tier) 24%, transparent), transparent 75%);
}
body.pj .lien-carte-tete{
  position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
  gap:18px; align-items:center;
}
body.pj .lien-carte-portrait{ position:relative }
body.pj .lien-carte-duo{ position:absolute; right:-6px; bottom:-4px; width:36px; height:auto }
body.pj .lien-carte-identite{ min-width:0 }
body.pj .lien-carte-nom{
  font-family:var(--font-title); font-size:1.3rem; color:#f0e2c8; text-decoration:none;
  overflow-wrap:anywhere;
}
body.pj .lien-carte-nom:hover{ text-decoration:underline; text-underline-offset:4px }
body.pj .lien-carte-palier{ display:block; margin-top:1px; font-size:.82rem; font-style:italic; color:var(--tier) }
body.pj .lien-coeurs{ margin-top:8px; justify-content:flex-start }
body.pj .lien-carte-suite{ margin:6px 0 0; font-size:.76rem; color:#a8a48c }
body.pj .lien-carte-suite b{ color:#ebe1cf; font-weight:600 }
body.pj .lien-carte-suite span{ color:var(--tier) }
body.pj .lien-carte-voir{
  align-self:start; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:7px 14px; border-radius:3px; text-decoration:none; font-size:.78rem;
  color:#ebe1cf; background:rgba(10, 4, 6,.4); border:1px solid rgba(168, 137, 90,.34);
  transition:background .14s, border-color .14s;
}
body.pj .lien-carte-voir:hover{ background:rgba(168, 137, 90,.14); border-color:rgba(168, 137, 90,.65) }
body.pj .lien-carte-voir:focus-visible{ outline:2px solid #a8895a; outline-offset:3px }

body.pj .lien-bloc{ position:relative; margin-top:18px; padding-top:14px; border-top:1px solid rgba(168, 137, 90,.12) }
body.pj .lien-bloc-titre{
  margin:0 0 10px; font-family:var(--font-title); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:#a8895a;
}
body.pj .lien-vide{ margin:0; font-size:.8rem; font-style:italic; color:#8a8672 }

/* La repartition : UNE barre segmentee, bornee en largeur, et sa legende en
   pastilles. Les sources a zero ne prennent pas de place dans la barre ; elles
   sont citees en une ligne discrete, comme des choses a faire ensemble. */
body.pj .lien-barre{
  display:flex; gap:2px; max-width:560px; height:10px;
  border-radius:3px; overflow:hidden; background:rgba(255,255,255,.06);
}
body.pj .lien-seg{ background:var(--src); transition:width .8s cubic-bezier(.2,.8,.3,1) }
body.pj .lien-legende{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 8px }
body.pj .lien-legende li{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px 4px 9px; border-radius:3px; font-size:.76rem; color:#c9bbaa;
  background:rgba(0,0,0,.22); border:1px solid rgba(168, 137, 90,.14);
}
body.pj .lien-legende i{ width:8px; height:8px; border-radius:50%; background:var(--src) }
body.pj .lien-legende b{ color:#ebe1cf; font-weight:600 }
body.pj .lien-absentes{ margin:9px 0 0; font-size:.72rem; color:#8a8672 }
body.pj .lien-absentes span{ color:#a8a48c }

/* Ses cadeaux favoris : des etiquettes avec l'objet, lisibles en entier. */
body.pj .lien-cadeaux{ display:flex; align-items:flex-start; gap:12px; margin-top:8px }
body.pj .lien-cadeaux-legende{ flex:none; width:72px; padding-top:6px; font-size:.74rem; font-style:italic; color:#a8a48c }
body.pj .lien-cadeaux ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; min-width:0 }
body.pj .lien-cadeau{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:3px 11px 3px 5px; border-radius:3px; font-size:.76rem; color:#e0d2bf;
  background:rgba(0,0,0,.22); border:1px solid rgba(168, 137, 90,.16);
}
body.pj .lien-cadeau--adore{ border-color:rgba(168, 137, 90,.34) }
body.pj .lien-cadeau img{ flex:none; width:24px; height:24px; object-fit:contain }

@media (prefers-reduced-motion: reduce){
  body.pj .lien-seg{ transition:none }
}

/* Au telephone, la liste devient une rangee de portraits qui defile, comme
   des stories, et la carte passe dessous. */
@media (max-width: 760px){
  body.pj .lien-reseau{ grid-template-columns:minmax(0, 1fr); gap:12px }
  body.pj .lien-liste{
    flex-direction:row; gap:4px; overflow-x:auto; padding:8px;
    scrollbar-width:none;
  }
  body.pj .lien-liste::-webkit-scrollbar{ display:none }
  body.pj .lien-liste > li{ flex:none }
  body.pj .lien-ami{ flex-direction:column; width:86px; gap:6px; padding:8px 4px; text-align:center }
  body.pj .lien-ami-texte{ align-items:center; width:100% }
  body.pj .lien-ami-nom{ max-width:100%; font-size:.8rem }
  body.pj .lien-ami-palier{ font-size:.66rem }
  body.pj .lien-anneau{ --taille:56px }
  body.pj .lien-anneau--grand{ --taille:72px }
  body.pj .lien-carte{ padding:16px }
  body.pj .lien-carte-tete{ grid-template-columns:auto minmax(0, 1fr); gap:14px }
  body.pj .lien-carte-voir{ grid-column:1 / -1; justify-self:start }
  body.pj .lien-cadeaux{ flex-direction:column; gap:4px }
  body.pj .lien-cadeaux-legende{ width:auto; padding-top:0 }
}

/* ── CADEAUX FAVORIS (LES SIENS) ────────────────────────────────────────── */
/* Les noms coupes a sept lettres (« Poire déli… ») devenaient illisibles :
   des cases plus larges, le nom sur deux lignes. Une case vide ne montre plus
   « ??? » : sa place en creux suffit. */
body.pj .gift-slots{ gap:8px }
body.pj .gift-slot{ width:82px; padding:.55rem .3rem .45rem; border-radius:3px }
body.pj .gift-slot-icon{ width:42px; height:42px }
body.pj .gift-slot-name{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  white-space:normal; text-overflow:clip; min-height:2.4em;
  font-size:.64rem; line-height:1.2;
}
body.pj .gift-slot--empty .gift-slot-name{ visibility:hidden }
body.pj .gift-slot--empty .gift-slot-placeholder{ opacity:.5 }
@media (max-width: 560px){
  body.pj .gift-slot{ width:72px }
}

/* ── SCRIPTORIUM : L'INVITATION EN TETE ─────────────────────────────────── */
body.pj .gst-bloque--tete{ margin:0 0 20px }

/* ── SCRIPTORIUM : LE CARROUSEL DES CARTES ──────────────────────────────── */
body.pj .gst-car .gst-cartes-tete{ align-items:center; margin-bottom:6px }
body.pj .gst-car-compte{
  display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 6px;
  margin-left:6px; border-radius:3px; vertical-align:1px;
  background:rgba(168, 137, 90,.16); color:#a8895a; font-size:.72rem; font-weight:600;
}
body.pj .gst-car-outils{ display:flex; align-items:center; gap:6px }
body.pj .gst-car-fleche{
  display:none; place-items:center; width:32px; height:32px; padding:0; border-radius:50%;
  border:1px solid rgba(168, 137, 90,.34); background:rgba(0,0,0,.25); color:#ebe1cf; cursor:pointer;
  transition:background .14s, opacity .14s;
}
body.pj .gst-car--defile .gst-car-fleche{ display:grid }
body.pj .gst-car-fleche svg{ width:16px; height:16px }
body.pj .gst-car-fleche:disabled{ opacity:.3; cursor:default }
body.pj .gst-car-fleche:not(:disabled):hover{ background:rgba(168, 137, 90,.16) }
body.pj .gst-car-fleche:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }

body.pj .gst-car-piste{
  list-style:none; margin:12px 0 0; padding:4px 2px 10px;
  display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:2px;
  scrollbar-width:none;
}
body.pj .gst-car-piste::-webkit-scrollbar{ display:none }
/* Le fondu a droite dit qu'il reste des cartes ; le retrait de fin laisse la
   derniere en sortir une fois la piste au bout. */
body.pj .gst-car--defile .gst-car-piste{
  padding-inline-end:48px;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
body.pj .gst-car--defile[data-bord="milieu"] .gst-car-piste{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
body.pj .gst-car--defile[data-bord="fin"] .gst-car-piste{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 48px);
  mask-image:linear-gradient(90deg, transparent, #000 48px);
}
body.pj .gst-car-piste:focus-visible{ outline:2px solid #a8895a; outline-offset:4px; border-radius:3px }
/* 184 px au moins : en dessous, « Modifier » et ses trois icones debordaient
   du cadre de la vignette (mesure a 168 px). */
body.pj .gst-car-case{ flex:0 0 clamp(184px, 17%, 200px); scroll-snap-align:start; min-width:0 }
/* La case qui porte le message « aucune carte » n'est pas une vignette : lui
   imposer la largeur d'une carte comprimerait la phrase sur quatre lignes dans
   une colonne de 184 px, a cote d'un carrousel vide. */
body.pj .gst-car-case--vide{ flex:1 1 auto }
body.pj .gst-car .gst-carte{ height:100%; box-sizing:border-box }
body.pj .gst-carte-actions{ flex-wrap:nowrap; align-items:center; gap:4px; min-width:0 }
body.pj .gst-carte-actions .gst-act--premier{ flex:1 1 auto; min-width:0; text-align:center; padding-inline:6px }
body.pj .gst-act--icone{ display:inline-grid; place-items:center; width:28px; height:28px; padding:0; flex:none }
body.pj .gst-act--icone svg{ width:15px; height:15px }

/* ── LA COLLECTION : L'ENCART FACON BESTIAIRE ───────────────────────────── */
/* Meme construction que l'encart des Trois Soeurs du bestiaire : ornement de
   ronces centre, petit titre, texte en italique dans un cadre fin. */
/* Pleine largeur : centre a 560 px, l'encart laissait deux bandes vides de
   part et d'autre alors que le bloc qui le suit, lui, occupe tout. */
body.pj .coll-intro--encart{
  position:relative; max-width:100%; margin:10px auto 22px;
  padding:.8rem 1.1rem .95rem; text-align:center; font-style:normal;
  background:rgba(10, 4, 6,.5); border:1px solid rgba(168, 137, 90,.24); border-radius:3px;
}
/* Sur le bordeaux sombre, les ronces vertes du bestiaire se lisaient ternes :
   un peu de lumiere, sans toucher a leur teinte. */
body.pj .coll-intro-ronces{ display:block; width:104px; height:auto; margin:0 auto .35rem; filter:brightness(1.45) saturate(1.1) }
body.pj .coll-intro-titre{
  margin:0 0 .3rem; font-family:var(--font-title); font-size:.82rem;
  letter-spacing:.04em; color:#a8895a;
}
body.pj .coll-intro-texte{ margin:0; font-size:.8rem; line-height:1.55; font-style:italic; color:#d8c8b4 }

/* ── INVITATIONS EN TETE D'ONGLET ───────────────────────────────────────── */
/* Equipement, Liens et Scriptorium ouvrent tous par la meme invitation. */
body.pj .equip-section > .gst-bloque{ margin:0 0 16px }
body.pj .equip-section > .gst-ailleurs{ margin:0 0 12px }
body.pj .gst-ailleurs--tete{ margin:0 0 14px }

/* ═══ OFFRIR UN CADEAU (2026-09-18) ══════════════════════════════════════
   Reprend le vocabulaire des Liens : panneaux sombres, filet discret, or
   #c9a84c pour ce qui appelle au geste. Rien de neuf a apprendre a l'oeil. */

/* Le bloc du bouton, sur la carte d'un lien */
body.pj .lien-bloc--cadeau{ display:flex; flex-direction:column; gap:8px }
body.pj .cdo-bouton{
  appearance:none; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:3px; cursor:pointer;
  font-family:inherit; font-size:.86rem; font-weight:600; letter-spacing:.01em;
  color:#1a0e08; background:linear-gradient(180deg,#d8bb63,#a8895a 55%,#a7873a);
  border:1px solid rgba(168, 137, 90,.55);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body.pj .cdo-bouton:hover{ filter:brightness(1.07); box-shadow:0 4px 14px -6px rgba(168, 137, 90,.7) }
body.pj .cdo-bouton:active{ transform:translateY(1px) }
body.pj .cdo-bouton:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }

/* L'etat d'un cadeau : en route, ou refuse avec son motif */
body.pj .cdo-etat{ margin:0; font-size:.78rem; line-height:1.5 }
body.pj .cdo-etat--route{ color:#a8a48c; font-style:italic }
body.pj .cdo-etat--refus{ color:#d98b8b }

/* L'entree « offrir a quelqu'un d'autre », sous la liste de contacts */
body.pj .lien-colonne{ display:flex; flex-direction:column; gap:10px; min-width:0 }
body.pj .cdo-entree{
  appearance:none; width:100%; display:flex; align-items:center; gap:11px; text-align:left;
  padding:10px 12px; cursor:pointer; font-family:inherit;
  /* Filet PLEIN : la charte du projet exclut les bordures en tirets. Le bloc se
     distingue par sa teinte doree, pas par un pointille. */
  background:rgba(168, 137, 90,.05); border:1px solid rgba(168, 137, 90,.28); border-radius:3px;
  transition:border-color .15s ease, background .15s ease;
}
body.pj .cdo-entree:hover{ border-color:rgba(168, 137, 90,.6); background:rgba(168, 137, 90,.07) }
body.pj .cdo-entree:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
/* Picto des packs medievaux (colombe du pack 2), rendu en MASQUE : la forme vient
   de l'artiste, la couleur suit `currentColor`, donc sombre sur le bouton dore et
   doree sur fond sombre. Aucun emoji dans l'interface. */
body.pj .cdo-picto{
  flex:0 0 auto; width:17px; height:17px; background:currentColor;
  -webkit-mask:url(../img/ui/picto-offrir.png) center/contain no-repeat;
          mask:url(../img/ui/picto-offrir.png) center/contain no-repeat;
}
body.pj .cdo-picto--grand{ width:24px; height:24px; color:#a8895a }
body.pj .cdo-picto--fini{ width:46px; height:46px; color:#a8895a }
body.pj .cdo-entree-texte{ display:flex; flex-direction:column; gap:2px; min-width:0 }
body.pj .cdo-entree-titre{ color:#ebe1cf; font-size:.85rem; font-weight:600 }
body.pj .cdo-entree-sous{ color:#8a8672; font-size:.74rem; line-height:1.4 }

/* ── La fenetre ── */
body.pj .cdo-boite{
  /* Une modale se centre par `margin:auto` sur des `inset:0`, et le reset du site
     (`*,*::before,*::after{margin:0}` dans style.css) ecrase cette marge : sans ces
     trois valeurs, la fenetre se colle en haut a gauche. Vu en revue le 2026-09-18. */
  position:fixed; inset:0; margin:auto;
  width:min(560px, calc(100vw - 32px)); max-height:min(80vh, 720px);
  padding:0; border:1px solid rgba(168, 137, 90,.35); border-radius:3px;
  background:linear-gradient(180deg,#241218,#170a0e);
  color:#ebe1cf; box-shadow:0 30px 70px -24px rgba(0,0,0,.9);
  overflow:hidden;
}
body.pj .cdo-boite::backdrop{ background:rgba(9, 4, 6,.72) }
body.pj .cdo-fermer-form{ margin:0 }
body.pj .cdo-fermer{
  position:absolute; top:10px; right:12px; z-index:2;
  appearance:none; width:32px; height:32px; line-height:1; cursor:pointer;
  font-size:1.3rem; color:#a8a48c; background:none; border:none; border-radius:8px;
}
body.pj .cdo-fermer:hover{ color:#ebe1cf; background:rgba(255,255,255,.06) }
body.pj .cdo-fermer:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
body.pj .cdo-contenu{
  display:flex; flex-direction:column; gap:12px;
  padding:22px 22px 18px; max-height:min(80vh, 720px); overflow:auto;
}
/* Barres de defilement : meme habillage que le reste du site (profil-refonte.css
   pour la colonne d'identite, comptoir.css pour le flux). Sans ca, on recupere
   la barre epaisse du navigateur au milieu d'une fenetre sombre. */
body.pj .cdo-contenu,
body.pj .cdo-objets{
  scrollbar-width:thin; scrollbar-color:rgba(168, 137, 90,.32) transparent;
}
body.pj .cdo-contenu::-webkit-scrollbar,
body.pj .cdo-objets::-webkit-scrollbar{ width:4px }
body.pj .cdo-contenu::-webkit-scrollbar-track,
body.pj .cdo-objets::-webkit-scrollbar-track{ background:transparent }
body.pj .cdo-contenu::-webkit-scrollbar-thumb,
body.pj .cdo-objets::-webkit-scrollbar-thumb{ background:rgba(168, 137, 90,.3); border-radius:4px }
body.pj .cdo-contenu::-webkit-scrollbar-thumb:hover,
body.pj .cdo-objets::-webkit-scrollbar-thumb:hover{ background:rgba(168, 137, 90,.5) }
body.pj .cdo-titre{
  margin:0; font-family:var(--font-title, inherit); font-size:1.15rem; color:#ebe1cf; line-height:1.3;
}
body.pj .cdo-sous{ margin:0; color:#a8a48c; font-size:.82rem; line-height:1.5 }
body.pj .cdo-vide{ margin:0; color:#8a8672; font-size:.82rem; font-style:italic }

body.pj .cdo-champ{
  width:100%; padding:9px 12px; font-family:inherit; font-size:.86rem;
  color:#ebe1cf; background:rgba(0,0,0,.28);
  border:1px solid rgba(168, 137, 90,.22); border-radius:3px;
}
body.pj .cdo-champ:focus{ outline:none; border-color:rgba(168, 137, 90,.55) }
body.pj .cdo-champ::placeholder{ color:#7a6b5e }

/* L'avertissement du cadeau deja offert aujourd'hui */
body.pj .cdo-avertissement{
  margin:0; padding:10px 12px; border-radius:3px; font-size:.79rem; line-height:1.55;
  color:#e0cdb4; background:rgba(168, 137, 90,.09); border:1px solid rgba(168, 137, 90,.3);
}
body.pj .cdo-avertissement b{ display:block; margin-bottom:3px; color:#ebe1cf }

/* Resultats de recherche d'aventurier */
body.pj .cdo-resultats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px }
body.pj .cdo-resultat{
  appearance:none; width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:8px 10px; cursor:pointer; font-family:inherit; font-size:.86rem; color:#ebe1cf;
  background:rgba(0,0,0,.2); border:1px solid transparent; border-radius:3px;
}
body.pj .cdo-resultat:hover{ border-color:rgba(168, 137, 90,.4); background:rgba(168, 137, 90,.07) }
body.pj .cdo-resultat:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
body.pj .cdo-resultat img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex:0 0 auto }

/* La liste de mes objets */
body.pj .cdo-objets{
  list-style:none; margin:0; padding:4px; display:grid; gap:4px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  background:rgba(0,0,0,.18); border:1px solid rgba(168, 137, 90,.14); border-radius:3px;
  max-height:min(42vh, 340px); overflow:auto;
}
body.pj .cdo-objet{
  appearance:none; width:100%; display:flex; align-items:center; gap:9px; text-align:left;
  padding:7px 9px; cursor:pointer; font-family:inherit; font-size:.82rem; color:#ebe1cf;
  background:none; border:1px solid transparent; border-radius:3px; min-width:0;
}
body.pj .cdo-objet:hover{ border-color:rgba(168, 137, 90,.35); background:rgba(168, 137, 90,.06) }
body.pj .cdo-objet:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
body.pj .cdo-objet[aria-pressed="true"]{
  border-color:rgba(168, 137, 90,.75); background:rgba(168, 137, 90,.12);
}
body.pj .cdo-objet img{ width:30px; height:30px; flex:0 0 auto; image-rendering:pixelated }
body.pj .cdo-objet-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* La rarete se lit sur le nom, comme partout ailleurs sur le profil */
body.pj .cdo-objet[data-rarity="uncommon"] .cdo-objet-nom{ color:#6fb482 }
body.pj .cdo-objet[data-rarity="rare"] .cdo-objet-nom{ color:#6f9fd6 }
body.pj .cdo-objet[data-rarity="epic"] .cdo-objet-nom{ color:#b886d0 }
body.pj .cdo-objet[data-rarity="legendary"] .cdo-objet-nom{ color:#ffb347 }
body.pj .cdo-objet[data-rarity="cursed"] .cdo-objet-nom{ color:#e3606f }
/* Ce que le destinataire aime : l'information qui rend le geste juste */
body.pj .cdo-objet-fav{
  flex:0 0 auto; padding:2px 7px; border-radius:3px; font-size:.66rem; letter-spacing:.02em;
}
body.pj .cdo-objet-fav--adore{ color:#ffd9e2; background:rgba(214,92,130,.24); box-shadow:inset 0 0 0 1px rgba(214,92,130,.45) }
body.pj .cdo-objet-fav--apprecie{ color:#d8e8c8; background:rgba(122,160,94,.2); box-shadow:inset 0 0 0 1px rgba(122,160,94,.4) }

/* Le pied : recapitulatif et validation */
body.pj .cdo-pied{ display:flex; flex-direction:column; gap:9px }
body.pj .cdo-recap{ margin:0; color:#c9bbaa; font-size:.84rem; line-height:1.5 }
body.pj .cdo-recap b{ color:#ebe1cf }
body.pj .cdo-valider{
  appearance:none; align-self:flex-start; padding:10px 22px; cursor:pointer;
  font-family:inherit; font-size:.9rem; font-weight:600;
  color:#1a0e08; background:linear-gradient(180deg,#d8bb63,#a8895a 55%,#a7873a);
  border:1px solid rgba(168, 137, 90,.55); border-radius:3px;
}
body.pj .cdo-valider:hover:not(:disabled){ filter:brightness(1.07) }
body.pj .cdo-valider:disabled{ opacity:.6; cursor:default }
body.pj .cdo-valider:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
body.pj .cdo-erreur{ margin:0; color:#d98b8b; font-size:.8rem; line-height:1.5 }

/* L'ecran de confirmation */
body.pj .cdo-fini{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:14px 0 }
body.pj .cdo-fini-icone{ margin:0; font-size:2.4rem; line-height:1 }
body.pj .cdo-fini .cdo-valider{ align-self:center }

@media (max-width:640px){
  body.pj .cdo-contenu{ padding:20px 16px 16px }
  body.pj .cdo-objets{ max-height:38vh }
}

/* ═══ LIENS : lecture de la liste et gestes du jour (2026-09-18) ══════════
   Trois corrections validees a l'ecran, apres comparaison de deux versions.
   Chaque choix est adosse a une mesure sur les donnees reelles, notee sur place. */
/* ── 1. La liste : palier ET progression ──────────────────────────
   Le palier seul se repetait : 65 % des liens sont au plus bas. La progression,
   elle, differe dans 79 % des listes. Une jauge de 2 px suffit a ranger les
   contacts d'un coup d'oeil et a montrer qui est sur le point de monter. */
body.pj .lien-ami-sous{
  display:flex; align-items:baseline; gap:6px; min-width:0;
}
body.pj .lien-ami-sous .lien-ami-palier{ flex:0 1 auto; overflow:hidden; text-overflow:ellipsis }
body.pj .lien-ami-pct{
  flex:0 0 auto; font-size:.68rem; color:#8a8672; font-variant-numeric:tabular-nums;
}
body.pj .lien-ami-jauge{
  display:block; height:2px; margin-top:5px; border-radius:2px;
  background:rgba(168, 137, 90,.16); overflow:hidden;
}
body.pj .lien-ami-jauge i{
  display:block; height:100%; border-radius:2px;
  background:linear-gradient(90deg, rgba(168, 137, 90,.55), #a8895a);
}
/* Le contact selectionne montre sa jauge en plein, les autres en retrait. */
body.pj .lien-ami[aria-selected="false"] .lien-ami-jauge i{ opacity:.55 }

/* ── 2. Les deux gestes quotidiens, en pastilles sous les coeurs ─────────
   C'etait une ligne grise en bas de carte. C'est pourtant la seule qui dit
   quoi faire maintenant, et les deux gestes qu'elle nomme sont exactement
   ceux qui font monter le lien. */
body.pj .lien-gestes{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px }
body.pj .lien-geste{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px 4px 9px; border-radius:3px;
  font-size:.74rem; line-height:1.4; white-space:nowrap;
}
body.pj .lien-geste i{
  width:13px; height:13px; border-radius:50%; flex:0 0 auto;
  display:inline-block; position:relative;
}
body.pj .lien-geste--a-faire{
  color:#ebe1cf; background:rgba(168, 137, 90,.14);
  box-shadow:inset 0 0 0 1px rgba(168, 137, 90,.45);
}
body.pj .lien-geste--a-faire i{ box-shadow:inset 0 0 0 1.5px rgba(168, 137, 90,.75) }
body.pj .lien-geste--fait{
  color:#7d6e61; background:rgba(168, 137, 90,.07);
  box-shadow:inset 0 0 0 1px rgba(168, 137, 90,.18);
}
/* Le geste fait porte une coche, dessinee, pas un caractere : elle reste nette
   a toutes les tailles et ne depend d'aucune police. */
body.pj .lien-geste--fait i{ background:rgba(125,110,97,.35) }
body.pj .lien-geste--fait i::after{
  content:''; position:absolute; left:4px; top:1px;
  width:3px; height:7px; border:solid #1e1015; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}

/* ── 3. Le bouton descend apres les favoris ──────────────────────────────
   On lit ce qui lui plait, et l'action tombe au moment ou on a envie de
   cliquer. Il gagne un filet au-dessus pour se detacher du bloc precedent. */
body.pj .lien-bloc--cadeau{
  border-top:1px solid var(--bst-bord, rgba(168, 137, 90,.16));
  padding-top:14px; margin-top:2px;
}

/* ═══ LE BUTIN EN CASES (2026-09-19) ══════════════════════════════════════
   Quarante objets faisaient quarante lignes de tableau : on passait son
   inventaire a la molette. En cases, les memes quarante tiennent en sept
   rangees, et le butin se lit comme partout ailleurs sur le site.
   La rarete n'a plus de colonne : elle est DANS le cadre de l'icone, par
   `.loot-icon-frame[data-rarity]`, qui existait deja et servait deja ici. */
body.pj .loot-cases{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
}
body.pj .loot-case{ min-width:0 }
body.pj .loot-case[hidden]{ display:none }
body.pj .loot-case-btn{
  appearance:none; width:100%; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:9px 6px 8px; cursor:pointer; font-family:inherit;
  background:rgba(0,0,0,.16); border:1px solid rgba(168, 137, 90,.14); border-radius:3px;
  transition:border-color .14s ease, background .14s ease, transform .14s ease;
}
body.pj .loot-case-btn:hover{
  border-color:rgba(168, 137, 90,.4); background:rgba(168, 137, 90,.06); transform:translateY(-1px);
}
body.pj .loot-case-btn:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
body.pj .loot-case .loot-icon-frame{ position:relative }
body.pj .loot-case .loot-icon{ width:34px; height:34px; object-fit:contain; image-rendering:pixelated }
/* Deux lignes RESERVEES, meme pour un nom court : sans cette hauteur plancher, une
   case a nom long etait plus haute que ses voisines et la grille ondulait. */
body.pj .loot-case-nom{
  width:100%; text-align:center; font-size:.71rem; line-height:1.3; color:#c9bbaa;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(2 * 1.3em);
}
/* Et la case elle-meme s'etire sur toute la hauteur de sa rangee. */
body.pj .loot-case{ display:flex }
body.pj .loot-case-btn{ height:100%; justify-content:flex-start }
/* La quantite, en pastille sur le coin du cadre. */
body.pj .loot-case .loot-qty{
  position:absolute; right:-5px; bottom:-5px;
  padding:0 5px; border-radius:3px; font-size:.62rem; font-weight:600;
  color:#1a0e08; background:#a8895a; box-shadow:0 0 0 2px #22101a;
}
/* Le marqueur : cet objet porte une note d'aventurier. Il repond a « lesquels
   ai-je commentes ? », qu'on ne pouvait pas voir sans tout deplier.
   C'etait un rond vert : il se lisait comme « nouvel objet » et non comme
   « note ecrite ici » (revue du 2026-09-19). C'est desormais LA PLUME, celle du
   bouton « Modifier ma note » : une seule icone pour une seule idee. Rendue en
   masque, donc teintee par le CSS et non par le fichier. */
body.pj .loot-case-note{
  position:absolute; left:-7px; top:-7px; width:18px; height:18px; border-radius:50%;
  background:#22101a; box-shadow:0 0 0 1px rgba(168, 137, 90,.45);
  display:grid; place-items:center;
}
body.pj .loot-case-note::after{
  content:''; width:11px; height:11px; background:#d8bb63;
  -webkit-mask:url(../img/modifier-note.png) center/contain no-repeat;
          mask:url(../img/modifier-note.png) center/contain no-repeat;
}

/* ── L'apercu au survol ───────────────────────────────────────────────── */
body.pj .loot-apercu{
  position:fixed; z-index:2000; pointer-events:none;
  width:min(300px, calc(100vw - 24px)); padding:11px 13px;
  background:linear-gradient(180deg,#25101a,#13090d);
  border:1px solid rgba(168, 137, 90,.4); border-radius:3px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.85);
  opacity:0; transform:translateY(4px); transition:opacity .13s ease, transform .13s ease;
}
body.pj .loot-apercu.est-visible{ opacity:1; transform:none }
body.pj .loot-apercu-nom{ margin:0; font-family:var(--font-title, inherit); font-size:.92rem; color:#ebe1cf; line-height:1.25 }
body.pj .loot-apercu-rarete{ margin:3px 0 0; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase }
body.pj .loot-apercu-desc{
  margin:8px 0 0; font-size:.74rem; line-height:1.5; font-style:italic; color:#bfae9b;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
body.pj .loot-apercu-note{
  margin:8px 0 0; padding-top:7px; border-top:1px solid rgba(168, 137, 90,.2);
  font-size:.74rem; line-height:1.5; color:#c8d6b4;
}
body.pj .loot-apercu-note b{ color:#8fae6f; font-weight:600 }

/* ── La fiche, au clic ────────────────────────────────────────────────── */
body.pj .loot-fiche{
  /* Le reset du site (`*{margin:0}`) tue la marge automatique qui centre une
     modale : on redit le centrage, sinon elle se colle en haut a gauche. */
  position:fixed; inset:0; margin:auto;
  width:min(460px, calc(100vw - 32px)); max-height:min(80vh, 640px);
  padding:0; border:1px solid rgba(168, 137, 90,.35); border-radius:3px;
  background:linear-gradient(180deg,#241218,#170a0e); color:#ebe1cf;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9); overflow:hidden;
}
body.pj .loot-fiche::backdrop{ background:rgba(9, 4, 6,.72) }
body.pj .loot-fiche-fermer-form{ margin:0 }
body.pj .loot-fiche-fermer{
  position:absolute; top:8px; right:10px; z-index:2;
  appearance:none; width:30px; height:30px; line-height:1; cursor:pointer;
  font-size:1.25rem; color:#a8a48c; background:none; border:none; border-radius:7px;
}
body.pj .loot-fiche-fermer:hover{ color:#ebe1cf; background:rgba(255,255,255,.06) }
body.pj .loot-fiche-fermer:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
body.pj .loot-fiche-corps{
  padding:20px 20px 18px; max-height:min(80vh, 640px); overflow:auto;
  scrollbar-width:thin; scrollbar-color:rgba(168, 137, 90,.32) transparent;
}
body.pj .loot-fiche-corps::-webkit-scrollbar{ width:4px }
body.pj .loot-fiche-corps::-webkit-scrollbar-track{ background:transparent }
body.pj .loot-fiche-corps::-webkit-scrollbar-thumb{ background:rgba(168, 137, 90,.3); border-radius:4px }
/* Le nom et la rarete se centrent SUR l'icone : cales en haut, le nom depassait
   au-dessus du cadre et l'ensemble paraissait de travers (revue du 2026-09-19). */
body.pj .loot-fiche-tete{ display:flex; gap:14px; align-items:center; padding-right:26px }
body.pj .loot-icon-frame--grand{ width:66px; height:66px; flex:0 0 auto }
body.pj .loot-icon-frame--grand .loot-icon{ width:48px; height:48px; image-rendering:pixelated }
body.pj .loot-fiche-nom{ margin:0; font-family:var(--font-title, inherit); font-size:1.05rem; color:#ebe1cf; line-height:1.25 }
body.pj .loot-fiche-rarete{ margin:4px 0 0; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase }
body.pj .loot-fiche-drop{ margin:4px 0 0; font-size:.73rem; color:#8a8672 }
body.pj .loot-fiche-desc{
  margin:14px 0 0; padding-top:12px; border-top:1px solid rgba(168, 137, 90,.16);
  font-size:.8rem; line-height:1.65; font-style:italic; color:#c9bbaa;
}
body.pj .loot-fiche-vide{ color:#7d6e61 }
body.pj .loot-fiche-note{ margin-top:14px }

/* La couleur de rarete, reprise des cadres, pour les deux libelles. */
body.pj [data-rarity="common"].loot-apercu-rarete,
body.pj [data-rarity="common"].loot-fiche-rarete{ color:#a99a8c }
body.pj [data-rarity="uncommon"].loot-apercu-rarete,
body.pj [data-rarity="uncommon"].loot-fiche-rarete{ color:#6fb482 }
body.pj [data-rarity="rare"].loot-apercu-rarete,
body.pj [data-rarity="rare"].loot-fiche-rarete{ color:#6f9fd6 }
body.pj [data-rarity="epic"].loot-apercu-rarete,
body.pj [data-rarity="epic"].loot-fiche-rarete{ color:#b886d0 }
body.pj [data-rarity="legendary"].loot-apercu-rarete,
body.pj [data-rarity="legendary"].loot-fiche-rarete{ color:#ffb347 }
body.pj [data-rarity="cursed"].loot-apercu-rarete,
body.pj [data-rarity="cursed"].loot-fiche-rarete{ color:#e3606f }
body.pj [data-rarity="lore"].loot-apercu-rarete,
body.pj [data-rarity="lore"].loot-fiche-rarete{ color:#9a8f86 }

@media (max-width:640px){
  body.pj .loot-cases{ grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px }
  body.pj .loot-case-nom{ font-size:.67rem }
}

/* Le titre « Cadeaux favoris » se centre comme « Vos Liens dans la Compagnie ».
   Il l'etait deja en soi, mais sa rangee souple le collait a gauche, le bouton
   occupant le reste. Une grille a trois colonnes, dont deux egales et vides de
   part et d'autre, le centre sur le BLOC et non sur la place qui reste.
   minmax(0, 1fr) et non 1fr : sans cela un bouton plus large que sa colonne
   l'elargirait et le titre repartirait de travers. */
body.pj .gift-header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:1rem;
}
body.pj .gift-header .profil-section-title{ grid-column:2 }
body.pj .gift-header .gift-edit-btn{ grid-column:3; justify-self:end }
@media (max-width:640px){
  /* Trop etroit pour trois colonnes : le titre garde sa place, le bouton passe
     dessous et se centre a son tour. */
  body.pj .gift-header{ grid-template-columns:minmax(0, 1fr); gap:.6rem }
  body.pj .gift-header .profil-section-title,
  body.pj .gift-header .gift-edit-btn{ grid-column:1; justify-self:center }
}


/* ════════════════════════════════════════════════════════════════════════
   LE RUBAN NE DISAIT PAS QU'IL DEFILE (2026-09-24)

   Releve a 390 px avant correction : les six entrees font **1307 px** de large
   dans un ruban de 390, donc **917 px hors de vue**, et un seul onglet
   entierement visible. La barre de defilement est masquee expres
   (`scrollbar-width:none`), et la seule marque restante etait un fondu de 44 px
   au bord droit, pose EN PERMANENCE, y compris une fois le ruban au bout :
   il decorait, il ne signalait rien.

   On pose donc deux fleches, qui n'apparaissent que du cote ou il reste
   quelque chose a voir, et le fondu devient directionnel pour dire la meme
   chose que la fleche.
   ════════════════════════════════════════════════════════════════════════ */

/* `display:contents` : l'enveloppe est invisible a la mise en page, donc
   `.profil-tabs` reste l'element de grille qui porte `grid-area:liste`, et le
   grand ecran ne bouge pas d'un pixel. Les fleches, elles, sont en
   `display:none` hors du format telephone : sans cela elles deviendraient a leur
   tour des elements de la grille de `.profil-layout`. */
.pj-ruban{ display:contents }
.pj-fleche{ display:none }

/* Le meme palier que le ruban lui-meme : au-dessus de 700 px, la liste redevient
   une grille de trois colonnes et il n'y a plus rien a faire defiler. */
@media (max-width: 699.98px){

  .pj-ruban{ display:block; grid-area:liste; position:relative }
  body.pj .pj-ruban .profil-tabs{ grid-area:auto }

  /* LE FONDU DEVIENT DIRECTIONNEL. Il ne se montre que du cote ou il reste
     quelque chose, donc il cesse de mentir une fois le ruban au bout. */
  body.pj .pj-ruban .profil-tabs{
    -webkit-mask-image:none; mask-image:none;
  }
  body.pj .pj-ruban.pj-a-droite .profil-tabs{
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 46px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 46px), transparent);
  }
  body.pj .pj-ruban.pj-a-gauche .profil-tabs{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 30px);
    mask-image:linear-gradient(90deg, transparent, #000 30px);
  }
  body.pj .pj-ruban.pj-a-gauche.pj-a-droite .profil-tabs{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 46px), transparent);
    mask-image:linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 46px), transparent);
  }

  /* LES FLECHES. Posees SUR le ruban et non dans son flux : dans le flux elles
     defileraient avec les cartes, ce qui est exactement ce qu'il ne faut pas. */
  .pj-fleche{
    display:grid; place-items:center;
    position:absolute; top:50%; z-index:3;
    width:34px; height:34px; padding:0; border-radius:50%;
    cursor:pointer; color:#f3e5c8;
    background:radial-gradient(circle at 50% 42%, rgba(52, 24, 35,.97), rgba(21, 10, 14,.97));
    border:1px solid rgba(168, 137, 90,.6);
    box-shadow:0 3px 13px rgba(0,0,0,.6);
    transform:translateY(-50%);
    opacity:0; pointer-events:none;
    transition:opacity .22s ease;
  }
  .pj-fleche svg{ width:17px; height:17px; display:block }
  .pj-fleche--g{ left:5px }
  .pj-fleche--d{ right:5px }
  .pj-ruban.pj-a-gauche .pj-fleche--g,
  .pj-ruban.pj-a-droite .pj-fleche--d{ opacity:1; pointer-events:auto }

  /* Un appel discret, TROIS FOIS puis plus rien : une fleche qui clignote
     pendant toute la visite devient du bruit. Pas de `animation-fill-mode` :
     une valeur d'animation l'emporte sur le CSS normal tant que la regle
     s'applique, et la fleche resterait alors decalee. Le dernier keyframe
     revient donc exactement a la position de repos. */
  .pj-ruban.pj-a-droite .pj-fleche--d{ animation:pj-appel 1.6s ease-in-out 3 }
  @keyframes pj-appel{
    0%, 100%{ transform:translateY(-50%) translateX(0) }
    50%{ transform:translateY(-50%) translateX(-5px) }
  }
  @media (prefers-reduced-motion: reduce){
    .pj-fleche{ transition:none }
    .pj-ruban.pj-a-droite .pj-fleche--d{ animation:none }
  }
}

/* ══ L'EQUIPEMENT EN CASES, MODE GESTION (2026-10-29) ══════════════════════
   La liste deroulante cachait le butin derriere son nom. L'objet equipe tient
   maintenant la vitrine en grand, et le sac s'etale dessous en cases cernees
   de leur rarete (`.loot-icon-frame[data-rarity]`, celle de l'inventaire).
   Tout est prefixe equip- : aucun nom generique. */
.equip-vitrine{
  min-height:68px; padding:8px 10px; border-radius:3px;
  background:rgba(0,0,0,.18); border:1px solid rgba(168, 137, 90,.12);
  display:flex; align-items:center;
}
.equip-vitrine .equip-item-row{ margin:0; width:100%; min-width:0 }
.equip-vitrine .equip-item-info{ flex:1 }
.equip-vitrine .equip-slot-item{ white-space:normal; font-size:.9rem }
.equip-vitrine-cadre{ width:52px; height:52px; flex:0 0 auto }
.equip-vitrine-cadre .loot-icon{ width:40px; height:40px; object-fit:contain; image-rendering:pixelated }
.equip-vitrine .equip-empty .equip-vitrine-cadre{ border-style:solid; opacity:.55 }

.equip-choix-titre{
  margin:4px 0 0; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#7a6a62;
}
.equip-choix{
  list-style:none; margin:0; padding:0;
  display:grid; gap:6px; grid-template-columns:repeat(auto-fill, minmax(50px, 1fr));
}
.equip-choix li{ min-width:0 }
.equip-choix-case{
  appearance:none; width:100%; aspect-ratio:1; display:grid; place-items:center; padding:0;
  font-family:inherit; cursor:pointer;
  background:rgba(0,0,0,.16); border:1px solid rgba(168, 137, 90,.14); border-radius:8px;
  transition:border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.equip-choix-case:hover{ border-color:rgba(168, 137, 90,.4); background:rgba(168, 137, 90,.06); transform:translateY(-1px) }
.equip-choix-case:focus-visible{ outline:2px solid #a8895a; outline-offset:2px }
.equip-choix-case[aria-pressed="true"]{
  border-color:#a8895a; background:rgba(168, 137, 90,.14);
  box-shadow:0 0 0 1px #a8895a inset, 0 0 10px rgba(168, 137, 90,.18);
}
.equip-choix-case .loot-icon-frame{ width:38px; height:38px }
.equip-choix-case .loot-icon{ width:28px; height:28px; object-fit:contain; image-rendering:pixelated }
.equip-choix-bonus{
  position:absolute; right:-7px; bottom:-7px;
  padding:0 4px; border-radius:3px; font-size:.58rem; font-weight:600; line-height:1.5;
  color:#1a0e08; background:#a8895a; box-shadow:0 0 0 2px #22101a;
}
.equip-choix-aucun{ color:#7a6a62; font-size:1.1rem; line-height:1 }
.equip-choix-case[aria-pressed="true"] .equip-choix-aucun{ color:#e8d5c4 }

/* Un choix pas encore enregistre : le bouton le dit. */
.equip-save-btn.equip-save-btn--attend{
  border-color:#a8895a; color:#f3e6d2; background:rgba(168, 137, 90,.16);
  box-shadow:0 0 12px rgba(168, 137, 90,.18);
}
@media (prefers-reduced-motion: reduce){
  .equip-choix-case{ transition:none }
  .equip-choix-case:hover{ transform:none }
}

/* Le sac replie au-dela de deux rangees : recherche et bouton de depli
   (2026-10-29). Le champ reprend la teinte des cases, sans pointilles. */
.equip-choix li[hidden], .equip-choix-vide[hidden], .equip-choix-plus[hidden]{ display:none !important }
.equip-choix-recherche{
  width:100%; min-width:0; box-sizing:border-box;
  padding:6px 10px; border-radius:3px; font:inherit; font-size:.8rem;
  color:#e8d5c4; background:rgba(0,0,0,.22); border:1px solid rgba(168, 137, 90,.22);
  transition:border-color .14s ease;
}
.equip-choix-recherche::placeholder{ color:#7a6a62; font-style:italic }
.equip-choix-recherche:focus{ outline:none; border-color:#a8895a }
.equip-choix-vide{ margin:0; font-size:.78rem; font-style:italic; color:#7a6a62 }
.equip-choix-plus{
  align-self:flex-start; padding:4px 10px; border-radius:3px; cursor:pointer;
  font:inherit; font-size:.75rem; color:#a8895a; background:transparent;
  border:1px solid rgba(168, 137, 90,.3); transition:color .14s ease, border-color .14s ease;
}
.equip-choix-plus:hover{ color:#e8d5c4; border-color:#a8895a }