/* ═══════════════════════════════════════════════════════════════════════
   GEEKLEARN GAMES — glg-aaa.css
   ───────────────────────────────────────────────────────────────────────
   COUCHE "REFONTE AAA 2026" — chargée en dernier.
   Toutes les améliorations de cette grande mise à jour vivent ICI, pour
   être faciles à retrouver / ajuster / annuler sans toucher main.css ni
   glg-premium.css.

   DIRECTION ARTISTIQUE :
     • Le site reste MONOCHROME (noir/blanc).
     • La couleur n'apparaît QUE :
         (a) au survol des cards du carrousel « OUR WORKS »  → var(--tint)
         (b) sur les pages détail d'une œuvre                → var(--tint)
       où --tint = couleur propre à chaque œuvre (def. dans data.js).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   §1 · OUR WORKS — survol des cards révèle la couleur de l'œuvre
   ─────────────────────────────────────────────────────────────────────── */

/* Voile de couleur posé sur la cover, invisible au repos */
.c-card-tintwash{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(var(--tint-rgb,255,255,255),.34) 0%, transparent 62%),
    linear-gradient(180deg, transparent 30%, rgba(var(--tint-rgb,255,255,255),.10) 100%);
  opacity:0; transition:opacity .5s var(--ease, cubic-bezier(.16,1,.3,1));
  mix-blend-mode:screen;
}
/* compute --tint-rgb from --tint not possible in pure CSS → JS sets --tint;
   we approximate the wash via --tint directly as fallback */
.c-card{ --tint-rgb:255,255,255; }

/* Cadre + lueur teintés au survol (seule couleur de la section) */
.c-card{
  transition:transform .42s var(--ease,cubic-bezier(.16,1,.3,1)),
             box-shadow .42s var(--ease,cubic-bezier(.16,1,.3,1)),
             border-color .42s ease !important;
}
.c-card:hover{
  border-color:var(--tint) !important;
  box-shadow:
    0 18px 50px -12px rgba(0,0,0,.7),
    0 0 0 1px var(--tint),
    0 0 34px -6px var(--tint) !important;
}
.c-card:hover .c-card-tintwash{ opacity:1; }

/* Le titre fantôme derrière prend une pointe de teinte */
.c-card:hover .c-card-title-bg{ color:var(--tint); opacity:.16; transition:color .5s, opacity .5s; }

/* Badge statut : liseré teinté au survol */
.c-card:hover .c-badge{ border-color:var(--tint); color:#fff; }

/* Petite flèche d'appel à l'action qui apparaît en bas de la card */
.c-card-cta{
  position:absolute; right:12px; bottom:12px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--tint);
  color:var(--tint); background:rgba(0,0,0,.35);
  opacity:0; transform:translateY(8px) scale(.85);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  backdrop-filter:blur(4px);
}
.c-card-cta-arrow{ font-size:.8rem; line-height:1; transform:translateY(-1px); }
.c-card:hover .c-card-cta{ opacity:1; transform:translateY(0) scale(1); }

/* La cover passe légèrement plus lumineuse/saturée au survol */
.c-card:hover .c-card-pw img{ filter:brightness(.92) saturate(1.05); transition:filter .5s; }


/* ───────────────────────────────────────────────────────────────────────
   §2 · OUR WORKS — barre de filtres (Tous / Films / Jeux)
   ─────────────────────────────────────────────────────────────────────── */
.works-filters{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin:clamp(24px,4vw,40px) auto 0; padding:0 20px;
}
.works-filter{
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  padding:10px 20px; border:1px solid var(--bmd,rgba(255,255,255,.12));
  background:transparent; cursor:pointer; border-radius:2px;
  transition:color .25s, border-color .25s, background .25s, letter-spacing .3s;
}
.works-filter:hover{ color:#fff; border-color:var(--bhi,rgba(255,255,255,.22)); letter-spacing:.26em; }
.works-filter.active{ color:#000; background:#fff; border-color:#fff; }
.works-filter-count{ opacity:.55; margin-left:6px; font-size:.85em; }

/* Masquage fluide des sections de catégorie selon le filtre */
.works-cat-section{ transition:opacity .45s var(--ease), transform .45s var(--ease); }
.works-cat-section.wcat-hidden{
  display:none;
}
.works-cat-section.wcat-fade{ opacity:0; transform:translateY(14px); }


/* ───────────────────────────────────────────────────────────────────────
   §3 · PAGE DÉTAIL — identité couleur par œuvre (via --tint)
   ─────────────────────────────────────────────────────────────────────── */

/* Numéros des "key features" en couleur de l'œuvre */
#page-detail .dp-feat-num{
  color:var(--tint) !important;
  -webkit-text-fill-color:var(--tint);
  opacity:.92;
}
#page-detail .dp-feat-item{ transition:border-color .35s, background .35s; }
#page-detail .dp-feat-item:hover{
  border-color:rgba(var(--tint-rgb,255,255,255),.5) !important;
  background:rgba(var(--tint-rgb,255,255,255),.05);
}

/* Liseré bas de la pull-quote en teinte */
#page-detail .dp-story-pull{
  border-image:linear-gradient(90deg,var(--tint),transparent) 1;
}

/* Boutons primaires de la page détail : remplis en teinte */
#page-detail .dp-hero-cta .btn-primary,
#page-detail .dp-sticky-buy{
  background:var(--tint) !important;
  border-color:var(--tint) !important;
  color:#0a0a0a !important;
  font-weight:700;
  box-shadow:0 8px 30px -10px var(--tint);
}
#page-detail .dp-hero-cta .btn-primary:hover,
#page-detail .dp-sticky-buy:hover{
  filter:brightness(1.08) saturate(1.1);
  transform:translateY(-2px);
}
#page-detail .dp-hero-cta .btn-outline:hover{
  border-color:var(--tint) !important; color:var(--tint) !important;
}

/* Section labels soulignés en teinte */
#page-detail .dp-sec-label::before{ background:var(--tint) !important; }

/* Pastille de statut + dot animé en teinte */
#page-detail .dp-hero-badge{ border-color:rgba(var(--tint-rgb,255,255,255),.5); }
#page-detail .dp-hero-badge-dot{ background:var(--tint); box-shadow:0 0 10px var(--tint); }

/* Halo ambiant supplémentaire derrière le hero, en teinte */
#page-detail .dp-hero::after{
  content:''; position:absolute; left:50%; bottom:-10%;
  width:80%; height:60%; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(var(--tint-rgb,255,255,255),.16) 0%, transparent 70%);
  pointer-events:none; z-index:1;
}

/* Barre sticky : fin liseré bas teinté */
#page-detail .dp-sticky{ border-bottom-color:rgba(var(--tint-rgb,255,255,255),.35) !important; }


/* ───────────────────────────────────────────────────────────────────────
   §4 · LIGHTBOX — galerie plein écran des screenshots
   ─────────────────────────────────────────────────────────────────────── */
.gll-bg{
  position:fixed; inset:0; z-index:1400; background:rgba(0,0,0,.94);
  backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.gll-bg.open{ opacity:1; pointer-events:all; }
.gll-stage{
  position:relative; max-width:min(1200px,92vw); max-height:84vh;
  display:flex; align-items:center; justify-content:center;
}
.gll-img{
  max-width:100%; max-height:84vh; object-fit:contain;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px -20px #000;
  transform:scale(.97); transition:transform .35s var(--ease);
}
.gll-bg.open .gll-img{ transform:scale(1); }
.gll-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.4);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; transition:background .25s, border-color .25s, transform .25s;
}
.gll-nav:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.gll-prev{ left:-66px; } .gll-next{ right:-66px; }
.gll-close{
  position:absolute; top:-52px; right:0;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.4);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.gll-close:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.gll-counter{
  position:absolute; bottom:-44px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono,monospace); font-size:.62rem; letter-spacing:.2em;
  color:rgba(255,255,255,.6);
}
/* screenshots cliquables → curseur loupe */
#page-detail .dp-ss-slide img{ cursor:zoom-in; }
@media(max-width:760px){
  .gll-prev{ left:6px; } .gll-next{ right:6px; }
  .gll-nav{ width:42px; height:42px; background:rgba(0,0,0,.55); }
}


/* ───────────────────────────────────────────────────────────────────────
   §5 · À DÉCOUVRIR AUSSI — recommandations style store (vendeur, premium)
   ─────────────────────────────────────────────────────────────────────── */
.dp-related{ padding:clamp(54px,8vw,104px) clamp(16px,5vw,72px); border-top:1px solid var(--border,rgba(255,255,255,.07)); position:relative; }
.dp-related-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(26px,3.4vw,42px); }
.dp-related-sub{ margin-top:12px; font-family:var(--f-body,sans-serif); font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.5); max-width:46ch; }
.dp-related-all{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--border,rgba(255,255,255,.14)); color:rgba(255,255,255,.82);
  padding:10px 18px; border-radius:3px; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .25s, color .25s, gap .25s, background .25s;
}
.dp-related-all:hover{ border-color:var(--tint,#fff); color:#fff; gap:13px; background:rgba(var(--tint-rgb,255,255,255),.07); }

/* auto-fit + cap + center → 3-4 cartes restent équilibrées et centrées (plus de moitié droite vide) */
.dp-related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,310px)); justify-content:center; gap:clamp(20px,2.4vw,36px); max-width:1140px; margin:0 auto; }

.dp-rel-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  --tint-rgb:255,255,255;
  background:linear-gradient(180deg,#101012,#0b0b0c);
  border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:9px;
  transition:transform .46s var(--ease), border-color .46s, box-shadow .46s;
}
.dp-rel-card:hover{
  transform:translateY(-10px);
  border-color:rgba(var(--tint-rgb),.6);
  box-shadow:0 34px 80px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(var(--tint-rgb),.32), 0 26px 70px -30px rgba(var(--tint-rgb),.62);
}

.dp-rel-cover{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#0d0d0d; }
.dp-rel-cover img{ width:100%; height:100%; object-fit:cover; filter:brightness(.88) saturate(.95); transition:filter .55s var(--ease), transform .7s var(--ease); }
.dp-rel-card:hover .dp-rel-cover img{ filter:brightness(1.06) saturate(1.08); transform:scale(1.07); }
.dp-rel-cover::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 26%,transparent 58%,rgba(11,11,12,.6) 100%); }
.dp-rel-cover.no-img{ background:repeating-linear-gradient(135deg,#0f0f10,#0f0f10 13px,#131316 13px,#131316 26px); }

.dp-rel-type{
  position:absolute; top:10px; left:10px; z-index:3;
  font-family:var(--f-mono,monospace); font-size:.46rem; letter-spacing:.18em; text-transform:uppercase; color:#fff;
  background:rgba(8,8,8,.62); border:1px solid rgba(255,255,255,.18); padding:4px 8px; border-radius:2px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.dp-rel-go{
  position:absolute; left:50%; bottom:14px; transform:translate(-50%,10px); z-index:3;
  display:inline-flex; align-items:center; gap:7px; padding:9px 17px; white-space:nowrap;
  background:var(--tint,#fff); color:#0a0a0a; border-radius:3px;
  font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  opacity:0; transition:opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow:0 12px 28px -10px rgba(var(--tint-rgb),.75);
}
.dp-rel-card:hover .dp-rel-go{ opacity:1; transform:translate(-50%,0); }
.dp-rel-go-arr{ transition:transform .25s; }
.dp-rel-card:hover .dp-rel-go-arr{ transform:translateX(3px); }

.dp-rel-foot{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:12px; }
.dp-rel-name{ font-family:var(--f-disp,sans-serif); font-size:1.34rem; line-height:1.02; letter-spacing:.02em; text-transform:uppercase; color:#fff; transition:color .3s; }
.dp-rel-card:hover .dp-rel-name{ color:#fff; text-shadow:0 0 26px rgba(var(--tint-rgb),.5); }
.dp-rel-sub2{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dp-rel-status{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.dp-rel-dot{ width:6px; height:6px; border-radius:50%; background:var(--tint,#fff); box-shadow:0 0 8px var(--tint,#fff); flex-shrink:0; }
.dp-rel-price{ font-family:var(--f-mono,monospace); font-size:.64rem; letter-spacing:.03em; color:#fff; font-weight:500; }

@media(max-width:560px){
  .dp-related-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .dp-related-all{ display:none; }
  .dp-rel-name{ font-size:.95rem; }
}


/* ───────────────────────────────────────────────────────────────────────
   §6 · HOME — HERO « À LA UNE » ROTATIF (launcher-style, key-art cinématique)
   ─────────────────────────────────────────────────────────────────────── */
/* Section « à la une » COMPACTE, placée sous le hero de marque (pas un 2e hero) */
.fhero{
  position:relative; width:100%; height:clamp(420px,60vh,600px);
  overflow:hidden; background:#060606;
  border-top:1px solid var(--border,rgba(255,255,255,.07));
  border-bottom:1px solid var(--border,rgba(255,255,255,.07));
}
.fhero-stage{ position:absolute; inset:0; }
.fhero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease,cubic-bezier(.16,1,.3,1));
}
.fhero-slide.active{ opacity:1; visibility:visible; }
.fhero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(.45) brightness(.5) contrast(1.05); transform:scale(1.06);
}
.fhero-slide.active .fhero-bg{ animation:fheroZoom 7s ease-out forwards; }
@keyframes fheroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1.04); } }
.fhero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 18% 92%, rgba(var(--tint-rgb,255,255,255),.12), transparent 60%),
    linear-gradient(0deg, #060606 4%, rgba(6,6,6,.55) 32%, transparent 64%),
    linear-gradient(90deg, rgba(6,6,6,.88) 0%, rgba(6,6,6,.28) 46%, transparent 72%);
}
.fhero-content{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:clamp(28px,5vw,72px) clamp(24px,6vw,90px); max-width:min(760px,92%);
}
.fhero-eyebrow{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
  font-family:var(--f-mono,monospace); font-size:.58rem; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.fhero-eyebrow-dash{ width:28px; height:1px; background:rgba(255,255,255,.5); }
.fhero-title{
  font-family:var(--f-disp,sans-serif); font-size:clamp(2.8rem,7vw,6rem);
  line-height:.9; letter-spacing:.01em; color:#fff; margin-bottom:14px;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.fhero-tagline{
  font-family:var(--f-serif,Georgia,serif); font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.55rem); color:rgba(255,255,255,.82);
  line-height:1.4; max-width:46ch; margin-bottom:26px; text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.fhero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.fhero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2); color:#fff;
  cursor:pointer; transition:background .25s, border-color .25s;
}
.fhero-arrow:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.fhero-prev{ left:18px; } .fhero-next{ right:18px; }
.fhero-dots{ position:absolute; bottom:18px; right:clamp(24px,6vw,90px); z-index:3; display:flex; gap:8px; }
.fhero-dot{
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  background:rgba(255,255,255,.28); border:none; transition:background .25s, width .25s;
}
.fhero-dot:hover{ background:rgba(255,255,255,.55); }
.fhero-dot.active{ background:#fff; width:24px; border-radius:5px; }
@media(max-width:760px){
  .fhero{ height:clamp(420px,72vh,560px); }
  .fhero-scrim{ background:linear-gradient(0deg, #060606 6%, rgba(6,6,6,.4) 40%, transparent 72%); }
  .fhero-arrow{ width:38px; height:38px; }
  .fhero-prev{ left:8px; } .fhero-next{ right:8px; }
  .fhero-dots{ left:50%; right:auto; transform:translateX(-50%); bottom:14px; }
  .fhero-content{ padding-bottom:54px; }
}
@media (prefers-reduced-motion:reduce){
  .fhero-slide.active .fhero-bg{ animation:none; transform:scale(1.04); }
  .fhero-slide{ transition:none; }
}


/* ───────────────────────────────────────────────────────────────────────
   §7 · SHOP — teasers de catégories (coming-soon premium, monochrome)
   ─────────────────────────────────────────────────────────────────────── */
.shop-teasers{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px; width:100%; max-width:680px; margin:clamp(24px,4vw,40px) auto 0;
}
.shop-teaser{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 12px; border:1px solid var(--border,rgba(255,255,255,.08));
  background:rgba(255,255,255,.015);
  transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)), border-color .4s, background .4s;
}
.shop-teaser:hover{ transform:translateY(-5px); border-color:var(--bhi,rgba(255,255,255,.22)); background:rgba(255,255,255,.04); }
.shop-teaser-ico{ width:30px; height:30px; color:rgba(255,255,255,.85); }
.shop-teaser-ico svg{ width:100%; height:100%; }
.shop-teaser-name{
  font-family:var(--f-body,sans-serif); font-weight:600; font-size:.82rem; color:#fff; letter-spacing:.02em;
}
.shop-teaser-soon{
  font-family:var(--f-mono,monospace); font-size:.46rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.38);
}
@media(max-width:620px){
  .shop-teasers{ grid-template-columns:repeat(2,1fr); max-width:340px; }
}


/* ───────────────────────────────────────────────────────────────────────
   §8 · ABOUT — section « valeurs » (Teach · Move · Haunt)
   ─────────────────────────────────────────────────────────────────────── */
#studio-values{
  padding:clamp(56px,8vw,110px) clamp(20px,5vw,72px);
  border-top:1px solid var(--border,rgba(255,255,255,.07));
  max-width:1200px; margin:0 auto;
}
.sv-eyebrow{
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.sv-heading{
  font-family:var(--f-disp,sans-serif); font-size:clamp(2.4rem,6vw,4.5rem);
  line-height:.95; color:#fff; margin:10px 0 clamp(34px,5vw,56px);
}
.sv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.sv-card{
  position:relative; padding:clamp(24px,2.6vw,38px) clamp(20px,2.2vw,32px);
  border:1px solid var(--border,rgba(255,255,255,.08));
  background:rgba(255,255,255,.012);
  transition:transform .45s var(--ease,cubic-bezier(.16,1,.3,1)), border-color .45s, background .45s;
  overflow:hidden;
}
.sv-card::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,#fff,transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.sv-card:hover{ transform:translateY(-6px); border-color:var(--bhi,rgba(255,255,255,.22)); background:rgba(255,255,255,.035); }
.sv-card:hover::before{ transform:scaleX(1); }
.sv-num{
  font-family:var(--f-mono,monospace); font-size:.7rem; letter-spacing:.2em;
  color:rgba(255,255,255,.35); margin-bottom:18px;
}
.sv-name{
  font-family:var(--f-disp,sans-serif); font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1; color:#fff; margin-bottom:14px; letter-spacing:.02em;
}
.sv-desc{
  font-family:var(--f-body,sans-serif); font-size:.86rem; line-height:1.7;
  color:rgba(255,255,255,.6);
}
@media(max-width:760px){ .sv-grid{ grid-template-columns:1fr; } }


/* ───────────────────────────────────────────────────────────────────────
   §9 · CONTACT — cartes topics cliquables + flash de champ
   ─────────────────────────────────────────────────────────────────────── */
.c-info-block--clickable{ cursor:pointer; }
.c-info-block--clickable:hover{
  border-color:var(--bhi,rgba(255,255,255,.22)) !important;
  background:rgba(255,255,255,.04) !important;
  transform:translateY(-2px);
}
.c-info-block--clickable::after{
  content:'→'; position:absolute; top:12px; right:14px;
  color:rgba(255,255,255,.3); font-size:.8rem;
  opacity:0; transform:translateX(-4px); transition:opacity .25s, transform .25s, color .25s;
}
.c-info-block{ position:relative; }
.c-info-block--clickable:hover::after{ opacity:1; transform:translateX(0); color:#fff; }
.c-info-block--clickable:focus-visible{ outline:2px solid rgba(255,255,255,.4); outline-offset:3px; }

/* Flash quand un sujet est auto-rempli depuis une carte topic */
@keyframes glgFieldFlash{
  0%   { box-shadow:0 0 0 0 rgba(255,255,255,.0); border-color:rgba(255,255,255,.5); }
  40%  { box-shadow:0 0 0 3px rgba(255,255,255,.18); border-color:#fff; }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.field-flash{ animation:glgFieldFlash .7s var(--ease,ease); }


/* ───────────────────────────────────────────────────────────────────────
   §10 · COMPTES — bouton nav + modale auth/profil
   ─────────────────────────────────────────────────────────────────────── */
#nav-account-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--bmd,rgba(255,255,255,.12));
  color:rgba(255,255,255,.85); cursor:pointer;
  height:38px; padding:0 13px; border-radius:2px; margin-left:6px;
  transition:border-color .25s, color .25s, background .25s;
}
#nav-account-btn:hover{ border-color:var(--bhi,rgba(255,255,255,.28)); color:#fff; background:rgba(255,255,255,.04); }
#nav-account-btn .nav-account-name{
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#nav-account-btn .nav-account-name:empty{ display:none; }
#nav-account-btn.is-auth{ border-color:rgba(255,255,255,.4); }
@media(max-width:640px){ #nav-account-btn .nav-account-name{ display:none; } #nav-account-btn{ padding:0 10px; } }

/* Backdrop + box */
.auth-bg{
  position:fixed; inset:0; z-index:1500; background:rgba(0,0,0,.86);
  backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  overflow-y:auto;
}
.auth-bg.open{ opacity:1; pointer-events:all; }
.auth-box{
  position:relative; width:100%; max-width:440px; margin:auto;
  background:#0c0c0d; border:1px solid var(--bmd,rgba(255,255,255,.12));
  padding:clamp(28px,4vw,42px); border-radius:4px;
  box-shadow:0 40px 120px -30px #000;
  transform:translateY(14px) scale(.985); transition:transform .35s var(--ease);
}
.auth-bg.open .auth-box{ transform:none; }
.auth-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:rgba(255,255,255,.5);
  cursor:pointer; border-radius:50%; transition:color .2s, border-color .2s;
}
.auth-close:hover{ color:#fff; border-color:rgba(255,255,255,.2); }
.auth-brand{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-bottom:18px; }
.auth-brand img{ height:40px; opacity:.95; }
.auth-brand-name{
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.36em;
  text-transform:uppercase; color:#fff; opacity:.85;
}

.auth-tabs{ display:flex; gap:0; margin-bottom:22px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.auth-tab{
  flex:1; background:transparent; border:none; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45); padding:12px 0 14px; position:relative; transition:color .25s;
}
.auth-tab.active{ color:#fff; }
.auth-tab.active::after{ content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:#fff; }

.auth-notice{
  font-family:var(--f-mono,monospace); font-size:.58rem; letter-spacing:.05em; line-height:1.6;
  color:rgba(255,255,255,.6); background:rgba(255,255,255,.04);
  border:1px solid var(--border,rgba(255,255,255,.08)); padding:10px 12px; margin-bottom:16px; border-radius:3px;
}

.auth-field{ display:block; margin-bottom:14px; }
.auth-field > span{
  display:block; font-family:var(--f-mono,monospace); font-size:.55rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px;
}
.auth-field input, .auth-field select{
  width:100%; background:rgba(255,255,255,.03); color:#fff;
  border:1px solid var(--bmd,rgba(255,255,255,.12)); border-radius:2px;
  padding:11px 13px; font-family:var(--f-body,sans-serif); font-size:.9rem;
  transition:border-color .2s, background .2s;
}
.auth-field input:focus, .auth-field select:focus{ outline:none; border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.05); }
.auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.auth-radios{ display:flex; gap:8px; }
.auth-radios label{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--bmd,rgba(255,255,255,.12)); border-radius:2px; padding:9px 6px; cursor:pointer;
  font-size:.78rem; color:rgba(255,255,255,.7); transition:border-color .2s, color .2s, background .2s;
}
.auth-radios label:has(input:checked){ border-color:#fff; color:#fff; background:rgba(255,255,255,.06); }
.auth-radios input{ accent-color:#fff; width:auto; }
.auth-gender-other{ margin-top:8px; }

.auth-meter{ display:block; height:3px; background:rgba(255,255,255,.1); border-radius:2px; margin:8px 0 4px; overflow:hidden; }
.auth-meter i{ display:block; height:100%; width:0; background:#888; transition:width .3s, background .3s; }
.auth-meter i[data-score="0"],.auth-meter i[data-score="1"]{ background:#e5564e; }
.auth-meter i[data-score="2"]{ background:#e0a93b; }
.auth-meter i[data-score="3"]{ background:#cfcfcf; }
.auth-meter i[data-score="4"]{ background:#fff; }

.auth-hint{ display:block; font-size:.64rem; color:rgba(255,255,255,.45); margin-top:5px; min-height:1em; }
.auth-hint.ok{ color:#7ed09a; } .auth-hint.bad{ color:#e5746e; }

.auth-consent{ display:flex; gap:9px; align-items:flex-start; margin:4px 0 16px; cursor:pointer; }
.auth-consent input{ accent-color:#fff; margin-top:2px; }
.auth-consent span{ font-size:.7rem; line-height:1.5; color:rgba(255,255,255,.62); }

.auth-submit{ width:100%; justify-content:center; margin-top:4px; }
.auth-err{
  font-size:.7rem; line-height:1.5; color:#e5746e; margin:2px 0 12px;
  background:rgba(229,86,78,.08); border:1px solid rgba(229,86,78,.25); padding:8px 11px; border-radius:3px;
}
.auth-err.ok{ color:#7ed09a; background:rgba(126,208,154,.08); border-color:rgba(126,208,154,.28); }
.auth-switch{ text-align:center; font-size:.72rem; color:rgba(255,255,255,.5); margin-top:16px; }
.auth-link{ background:none; border:none; color:#fff; cursor:pointer; text-decoration:underline; font-size:.72rem; font-family:inherit; }
.auth-link--danger{ color:#e5746e; text-decoration:none; }
.auth-link--danger:hover{ text-decoration:underline; }

/* Profil */
.auth-box--profile{ text-align:center; }
.auth-avatar{
  width:72px; height:72px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#000; font-family:var(--f-disp,sans-serif); font-size:2rem;
}
.auth-profile-name{ font-family:var(--f-disp,sans-serif); font-size:1.8rem; color:#fff; letter-spacing:.02em; }
.auth-profile-meta{ font-family:var(--f-mono,monospace); font-size:.58rem; letter-spacing:.08em; color:rgba(255,255,255,.45); margin:6px 0 22px; }
.auth-box--profile form{ text-align:left; }
.auth-profile-actions{ display:flex; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--border,rgba(255,255,255,.08)); }


/* ───────────────────────────────────────────────────────────────────────
   §11 · CURSEUR — natif visible partout + pointer sur éléments cliquables
   ─────────────────────────────────────────────────────────────────────── */
html, body{ cursor:auto; }
a, button, select, summary, label[for],
[onclick], [role="button"], .c-card, .dp-rel-card, .gate-lang,
.nav-logo, .shop-teaser, .c-info-block--clickable, .dp-ss-thumb,
.works-filter, .auth-tab, .auth-link, .soc-btn{ cursor:pointer; }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea{ cursor:text; }
[disabled], .btn[disabled]{ cursor:not-allowed; }
.gll-img{ cursor:default; }


/* ───────────────────────────────────────────────────────────────────────
   §12 · ABOUT — vrai nom sous le pseudonyme (carte fondateur)
   ─────────────────────────────────────────────────────────────────────── */
.cm-photo-realname{
  font-family:var(--f-serif,Georgia,serif);
  font-style:italic;
  font-size:clamp(1rem,1.5vw,1.35rem);
  color:rgba(255,255,255,.82);
  margin-top:2px; letter-spacing:.01em; line-height:1.1;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}


/* ───────────────────────────────────────────────────────────────────────
   §13 · AVATAR — disque nav, menu déroulant, sélecteur d'avatar
   ─────────────────────────────────────────────────────────────────────── */
/* Disque avatar dans le bouton nav */
.nav-account-ava{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; position:relative; }
#nav-account-btn.is-auth .nav-account-ava{
  width:28px; height:28px; border-radius:50%; overflow:hidden; background:#fff;
}
.nav-account-ava .ava-img{ width:100%; height:100%; object-fit:cover; border-radius:50%; position:relative; z-index:2; }
.nav-account-ava .ava-init{ font-family:var(--f-disp,sans-serif); font-size:.9rem; line-height:1; color:#000; }
.ava-init--fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
#nav-account-btn.is-auth{ padding:4px; gap:9px; }

/* Menu déroulant (PROFIL / OPTIONS / SE DÉCONNECTER) */
.acct-menu{
  position:fixed; z-index:1600; min-width:184px;
  background:#0c0c0d; border:1px solid var(--bmd,rgba(255,255,255,.12)); border-radius:5px;
  box-shadow:0 24px 64px -22px #000; padding:6px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.acct-menu.open{ opacity:1; transform:none; pointer-events:all; }
.acct-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.82); padding:11px 13px; border-radius:3px; transition:background .18s, color .18s;
}
.acct-menu-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.acct-menu-item--danger{ color:#e5564e; }
.acct-menu-item--danger:hover{ background:rgba(229,86,78,.12); color:#ff8b84; }

/* Avatar (gros) dans le profil — cliquable */
.auth-avatar{ overflow:hidden; position:relative; }
.auth-avatar img, .auth-avatar .ava-img{ width:100%; height:100%; object-fit:cover; border-radius:50%; position:relative; z-index:2; }
.auth-avatar .ava-init{ position:relative; z-index:1; }
.auth-avatar .ava-init--fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.auth-avatar--btn{ border:none; cursor:pointer; padding:0; }
.auth-avatar-edit{
  position:absolute; right:-3px; bottom:-3px; width:26px; height:26px; border-radius:50%;
  background:#fff; color:#000; display:flex; align-items:center; justify-content:center;
  border:2px solid #0c0c0d; z-index:3;
}

/* Sélecteur d'avatar */
.auth-back{
  position:absolute; top:16px; left:16px; background:none; border:none; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.6); transition:color .2s;
}
.auth-back:hover{ color:#fff; }
.auth-picker-title{ text-align:center; font-family:var(--f-disp,sans-serif); font-size:1.6rem; color:#fff; margin:10px 0 4px; }
.auth-picker-label{ font-family:var(--f-mono,monospace); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:16px 0 10px; }
.avatar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.avatar-cell{
  aspect-ratio:1; border-radius:50%; overflow:hidden; padding:0; cursor:pointer;
  border:2px solid var(--bmd,rgba(255,255,255,.12)); background:#111;
  transition:border-color .2s, transform .2s;
}
.avatar-cell:hover{ border-color:#fff; transform:scale(1.06); }
.avatar-cell img{ width:100%; height:100%; object-fit:cover; }
.avatar-upload{
  display:flex; align-items:center; justify-content:center; gap:6px; margin-top:4px;
  padding:14px; border:1px dashed var(--bmd,rgba(255,255,255,.18)); border-radius:4px; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.7); transition:border-color .2s, color .2s, background .2s;
}
.avatar-upload:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.03); }


/* ───────────────────────────────────────────────────────────────────────
   §14 · PAGE DÉTAIL — hero key-art cinématique (tint = accent, pas aplat)
   Corrige l'ancien ".dp-hero-tint{opacity:.4 !important}" qui noyait le hero.
   ─────────────────────────────────────────────────────────────────────── */
#page-detail .dp-hero-bg{
  filter:brightness(.36) saturate(.62) contrast(1.06) !important;  /* key-art visible mais cinématique */
}
#page-detail .dp-hero-tint{
  opacity:.12 !important;          /* accent subtil au lieu de l'aplat de couleur */
  mix-blend-mode:screen;
}
/* Scrim haut : lisibilité de la nav par-dessus le hero */
#page-detail .dp-hero::before{
  content:''; position:absolute; left:0; right:0; top:0; height:150px; z-index:1;
  background:linear-gradient(180deg, rgba(6,6,6,.72), transparent);
  pointer-events:none;
}
/* Renfort de scrim bas pour la légèreté du titre sur tout visuel */
#page-detail .dp-hero-vignette{
  background:linear-gradient(to top, var(--bg,#080808) 0%, rgba(8,8,8,.82) 26%, rgba(8,8,8,.22) 62%, transparent 100%) !important;
}
/* Le contenu du hero passe au-dessus des scrims */
#page-detail .dp-hero-body{ position:relative; z-index:3; }


/* ───────────────────────────────────────────────────────────────────────
   §15 · ACCESSIBILITÉ — skip link + focus visibles forts
   ─────────────────────────────────────────────────────────────────────── */
.skip-link{
  position:fixed; top:-80px; left:12px; z-index:3000;
  background:#fff; color:#000; padding:11px 18px; text-decoration:none;
  font-family:var(--f-mono,monospace); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  border-radius:3px; transition:top .25s var(--ease,ease);
}
.skip-link:focus{ top:12px; outline:2px solid #000; outline-offset:2px; }
:focus-visible{ outline:2px solid #fff !important; outline-offset:3px !important; border-radius:2px; }
:focus:not(:focus-visible){ outline:none; }
.c-card:focus-visible, .dp-rel-card:focus-visible{ outline:2px solid var(--tint,#fff) !important; outline-offset:3px; }


/* ───────────────────────────────────────────────────────────────────────
   §16 · COMPTES — œil mot de passe + date de naissance (J/M/A)
   ─────────────────────────────────────────────────────────────────────── */
.auth-pw{ position:relative; }
.auth-pw input{ width:100%; padding-right:46px; }
.auth-pw-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; border-radius:4px;
  transition:color .2s, background .2s;
}
.auth-pw-eye:hover, .auth-pw-eye.on{ color:#fff; background:rgba(255,255,255,.06); }
.auth-dob{ display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:8px; }
.auth-dob select{ width:100%; }


/* ───────────────────────────────────────────────────────────────────────
   §17 · 18+ — porte d'âge (visiteur) / blocage (mineur) / badge
   ─────────────────────────────────────────────────────────────────────── */
.age-gate, .age-block{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:130px 24px 70px; text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 38%, rgba(var(--tint-rgb,255,255,255),.07), transparent 70%), #060606;
}
.age-gate-inner, .age-block-inner{ max-width:540px; }
.age-badge-18{
  width:88px; height:88px; margin:0 auto 28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-disp,sans-serif); font-size:2rem; letter-spacing:.03em; color:#fff;
  border:2px solid rgba(255,255,255,.55); box-shadow:0 0 48px -12px rgba(255,255,255,.35);
}
.age-gate-title{ font-family:var(--f-disp,sans-serif); font-size:clamp(2rem,4vw,3.1rem); color:#fff; margin-bottom:14px; letter-spacing:.01em; }
.age-gate-q{ font-family:var(--f-body,sans-serif); font-size:.95rem; line-height:1.7; color:rgba(255,255,255,.72); margin-bottom:32px; }
.age-gate-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.age-block-msg{ font-family:var(--f-body,sans-serif); font-size:1.02rem; color:rgba(255,255,255,.72); margin-bottom:26px; }


/* ───────────────────────────────────────────────────────────────────────
   §18 · PAGE DÉTAIL — layout "fiche de store" (média gauche · achat collant droite)
   ─────────────────────────────────────────────────────────────────────── */
.dp-store{
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(24px,3vw,52px);
  max-width:1320px; margin:0 auto; padding:clamp(40px,6vw,84px) clamp(16px,5vw,72px);
  align-items:start;
}
.dp-store-main{ min-width:0; display:flex; flex-direction:column; gap:clamp(44px,5vw,76px); }
/* Neutraliser les paddings/max-width des sections (elles étaient pleine largeur) */
.dp-store-main .dp-ss,
.dp-store-main .dp-story,
.dp-store-main .dp-features{ padding:0 !important; margin:0 !important; max-width:none !important; width:100%; }

/* Panneau d'achat collant */
.dp-store-side{ position:sticky; top:calc(var(--nav-h,80px) + 18px); }
.dp-buybox{
  background:#0c0c0d; border:1px solid var(--bmd,rgba(255,255,255,.12)); border-radius:7px;
  padding:18px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 30px 70px -30px #000;
}
.dp-buybox-cover{ aspect-ratio:16/10; overflow:hidden; border-radius:5px; background:#111; }
.dp-buybox-cover img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
.dp-buybox-logo{ max-height:52px; max-width:78%; object-fit:contain; margin:4px 0 0; }
.dp-buybox-title{ font-family:var(--f-disp,sans-serif); font-size:1.5rem; line-height:1; color:#fff; margin-top:2px; }
.dp-buybox-meta{ font-family:var(--f-mono,monospace); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.dp-buybox-status{ display:flex; align-items:center; gap:8px; font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.dp-buybox-dot{ width:7px; height:7px; border-radius:50%; background:var(--tint,#fff); box-shadow:0 0 9px var(--tint,#fff); }
.dp-buybox-price{ font-family:var(--f-disp,sans-serif); font-size:2.1rem; color:#fff; line-height:1; }
.dp-buybox-buy{ width:100%; justify-content:center; background:var(--tint,#fff) !important; border-color:var(--tint,#fff) !important; color:#0a0a0a !important; font-weight:700; box-shadow:0 8px 28px -10px var(--tint,#fff); }
.dp-buybox-buy:hover{ filter:brightness(1.08) saturate(1.08); transform:translateY(-2px); }
.dp-buybox-trailer{
  width:100%; padding:11px; background:none; border:1px solid var(--bmd,rgba(255,255,255,.12)); color:#fff; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; border-radius:2px;
  transition:border-color .2s, background .2s;
}
.dp-buybox-trailer:hover{ border-color:var(--tint,#fff); background:rgba(var(--tint-rgb,255,255,255),.06); }
.dp-buybox-sec{ border-top:1px solid var(--border,rgba(255,255,255,.08)); padding-top:14px; }
.dp-buybox-plats{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.dp-buybox-plat{
  display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.03); border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:3px;
  transition:border-color .2s, background .2s, transform .2s;
}
.dp-buybox-plat:hover{ border-color:var(--tint,#fff); background:rgba(255,255,255,.06); transform:translateX(2px); }
.dp-buybox-plat-ico{ width:24px; height:24px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; }
.dp-buybox-plat-name{ font-family:var(--f-body,sans-serif); font-size:.8rem; flex:1; }
.dp-buybox-plat-arr{ color:rgba(255,255,255,.4); }
.dp-buybox-plat:hover .dp-buybox-plat-arr{ color:var(--tint,#fff); }
.dp-buybox-facts{ border-top:1px solid var(--border,rgba(255,255,255,.08)); padding-top:14px; display:flex; flex-direction:column; gap:9px; }
.dp-fact{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.dp-fact span{ font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.dp-fact b{ font-family:var(--f-body,sans-serif); font-size:.78rem; color:#fff; font-weight:600; text-align:right; }

@media(max-width:980px){
  .dp-store{ grid-template-columns:1fr; }
  .dp-store-side{ position:static; order:-1; }   /* buy box on top on mobile/tablet */
  .dp-buybox{ max-width:520px; margin:0 auto; }
}


/* ───────────────────────────────────────────────────────────────────────
   §19 · WISHLIST — cœur sur les cards + bouton sur la fiche
─────────────────────────────────────────────────────────────────────── */
.c-wish{
  position:absolute; top:8px; right:8px; z-index:6;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.2); border-radius:50%;
  background:rgba(8,8,8,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  color:rgba(255,255,255,.9); cursor:pointer; padding:0;
  opacity:.42;                       /* always visible (subtle) — can never be stranded hidden */
  transition:opacity .25s, background .2s, border-color .2s, color .2s;
}
.c-card:hover .c-wish, .c-wish:focus-visible, .c-wish:hover, .c-wish.on{ opacity:1; }
.c-wish:hover{ background:rgba(0,0,0,.82); border-color:rgba(255,255,255,.55); color:#fff; }
.c-wish.on{ color:#fff; border-color:#fff; }
.c-wish.on .wish-heart path{ fill:#fff; }
.wish-heart{ display:block; }
.wish-anim .wish-heart{ animation:wishPop .42s cubic-bezier(.2,.7,.2,1); }
@keyframes wishPop{ 0%{transform:scale(1)} 35%{transform:scale(1.38)} 60%{transform:scale(.88)} 100%{transform:scale(1)} }

.dp-buybox-wish{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:10px; padding:11px 14px;
  border:1px solid var(--border,rgba(255,255,255,.18)); border-radius:3px;
  background:transparent; color:rgba(255,255,255,.82); cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s;
}
.dp-buybox-wish:hover{ border-color:rgba(255,255,255,.5); color:#fff; }
.dp-buybox-wish .dp-wish-ico{ display:flex; }
.dp-buybox-wish.on{ border-color:var(--tint,#fff); color:#fff; background:rgba(var(--tint-rgb,255,255,255),.08); }
.dp-buybox-wish.on .wish-heart path{ fill:var(--tint,#fff); stroke:var(--tint,#fff); }
.dp-buybox-wish.wish-anim .wish-heart{ animation:wishPop .42s cubic-bezier(.2,.7,.2,1); }

@media(hover:none){ .c-wish{ opacity:1; transform:none; } }   /* touch: heart always visible */
@media(max-width:900px){ .c-wish{ opacity:1; transform:none; } } /* small screens: heart always visible (no reliable hover) */


/* ───────────────────────────────────────────────────────────────────────
   §20 · MEMBER SPACE / PUBLIC PROFILE  (#page-profile)
─────────────────────────────────────────────────────────────────────── */
.pp{ max-width:1160px; margin:0 auto; padding:0 clamp(16px,5vw,72px) clamp(60px,8vw,110px); }

.pp-banner{
  position:relative; height:clamp(180px,28vw,320px);
  margin:var(--nav-h,80px) calc(-1*clamp(16px,5vw,72px)) 0;
  background:linear-gradient(120deg,#0d0d0f,#17171a 50%,#0a0a0b);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border-bottom:1px solid var(--border,rgba(255,255,255,.08)); overflow:hidden;
}
.pp-banner.has-img{ background-color:#0a0a0b; }
.pp-banner-scrim{ position:absolute; inset:0; background:linear-gradient(0deg,#080808 1%,rgba(8,8,8,.15) 55%,rgba(8,8,8,.45) 100%); }
.pp-banner-edit{
  position:absolute; top:14px; right:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px;
  border:1px solid rgba(255,255,255,.28); border-radius:3px;
  background:rgba(8,8,8,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; cursor:pointer; font-family:var(--f-mono,monospace);
  font-size:.54rem; letter-spacing:.16em; text-transform:uppercase;
  transition:background .2s,border-color .2s;
}
.pp-banner-edit:hover{ background:rgba(0,0,0,.85); border-color:#fff; }

.pp-head{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; gap:clamp(16px,3vw,30px);
  margin-top:clamp(-58px,-7vw,-46px); padding-bottom:26px;
}
.pp-avatar{
  position:relative; flex-shrink:0;
  width:clamp(96px,14vw,148px); height:clamp(96px,14vw,148px);
  border-radius:50%; border:3px solid #080808; background:#161618; overflow:hidden;
  cursor:pointer; padding:0; box-shadow:0 14px 44px -14px #000;
}
.pp-avatar .ava-img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
.pp-avatar .ava-init{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family:var(--f-disp,sans-serif); font-size:2.4rem; color:#fff; background:linear-gradient(135deg,#2a2a2e,#161618); }
.pp-avatar .ava-init--fallback{ position:absolute; inset:0; z-index:1; }
.pp-avatar-edit{
  position:absolute; right:6px; bottom:6px; width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.78); border:1px solid rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center; color:#fff;
  opacity:0; transition:opacity .2s;
}
.pp-avatar:hover .pp-avatar-edit{ opacity:1; }
.pp-id{ flex:1; min-width:0; padding-bottom:6px; }
.pp-name{ font-family:var(--f-disp,sans-serif); font-size:clamp(1.8rem,4vw,3rem); line-height:1; letter-spacing:.02em; color:#fff; word-break:break-word; }
.pp-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pp-badge{ font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8); border:1px solid var(--border,rgba(255,255,255,.12)); padding:5px 10px; border-radius:2px; }
.pp-badge--muted{ color:rgba(255,255,255,.45); }
.pp-actions{ padding-bottom:8px; }
.pp-actions .pp-edit-btn{ white-space:nowrap; }

.pp-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border,rgba(255,255,255,.08)); border:1px solid var(--border,rgba(255,255,255,.08));
  margin-bottom:clamp(40px,6vw,64px);
}
.pp-stat{ background:#0a0a0b; padding:clamp(18px,3vw,28px) 16px; text-align:center; }
.pp-stat b{ display:block; font-family:var(--f-disp,sans-serif); font-size:clamp(1.5rem,3.5vw,2.6rem); color:#fff; line-height:1; }
.pp-stat span{ display:block; margin-top:8px; font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.pp-stat--soon b{ color:rgba(255,255,255,.3); }

.pp-section{ margin-top:clamp(20px,3vw,30px); }
.pp-sec-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.pp-sec-title{ font-family:var(--f-disp,sans-serif); font-size:clamp(1.2rem,2.4vw,1.7rem); letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.pp-sec-count{ font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.14em; color:rgba(255,255,255,.5); border:1px solid var(--border,rgba(255,255,255,.12)); padding:3px 9px; border-radius:2px; }

.pp-wish-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(12px,2vw,20px); }
.pp-wish-card{ position:relative; --tint-rgb:255,255,255; }
.pp-wish-cover{ position:relative; aspect-ratio:2/3; overflow:hidden; background:#161618; border:1px solid var(--border,rgba(255,255,255,.1)); cursor:pointer; transition:border-color .3s,box-shadow .3s; }
.pp-wish-cover img{ width:100%; height:100%; object-fit:cover; filter:brightness(.82); transition:transform .55s var(--ease,cubic-bezier(.2,.7,.2,1)),filter .4s; }
.pp-wish-card:hover .pp-wish-cover img{ transform:scale(1.06); filter:brightness(1); }
.pp-wish-card:hover .pp-wish-cover{ border-color:rgba(var(--tint-rgb),.6); box-shadow:0 0 0 1px rgba(var(--tint-rgb),.35),0 16px 40px -16px rgba(0,0,0,.9); }
.pp-wish-status{ position:absolute; top:8px; left:8px; font-family:var(--f-mono,monospace); font-size:.42rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; background:rgba(8,8,8,.78); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.85); border-radius:2px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.pp-wish-remove{
  position:absolute; top:8px; right:8px; z-index:4; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(8,8,8,.72); color:#fff; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.9);
  transition:opacity .2s,transform .2s,background .2s,border-color .2s,color .2s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.pp-wish-card:hover .pp-wish-remove, .pp-wish-remove:focus-visible{ opacity:1; transform:none; }
.pp-wish-remove:hover{ background:#fff; color:#080808; border-color:#fff; }
.pp-wish-info{ padding:10px 2px 0; }
.pp-wish-name{ font-family:var(--f-disp,sans-serif); font-size:.92rem; letter-spacing:.03em; text-transform:uppercase; color:#fff; line-height:1.1; }
.pp-wish-meta{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.1em; color:rgba(255,255,255,.5); margin-top:5px; }

.pp-wish-empty{ grid-column:1/-1; text-align:center; padding:clamp(40px,7vw,80px) 20px; border:1px dashed var(--border,rgba(255,255,255,.12)); }
.pp-wish-empty-heart{ color:rgba(255,255,255,.22); margin-bottom:14px; }
.pp-wish-empty-heart .wish-heart{ width:34px; height:34px; }
.pp-wish-empty p{ font-family:var(--f-mono,monospace); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:20px; }

/* Signed-out member space */
.pp-signed-out{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:calc(var(--nav-h,80px) + clamp(40px,8vh,90px)) clamp(16px,5vw,72px) clamp(60px,9vw,110px); }
.pp-so-inner{ text-align:center; max-width:560px; width:100%; }
.pp-so-badge{ width:74px; height:74px; margin:0 auto 24px; border-radius:50%; border:1px solid var(--border,rgba(255,255,255,.12)); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); background:#0d0d0f; }
.pp-so-badge svg{ width:30px; height:30px; }
.pp-so-title{ font-family:var(--f-disp,sans-serif); font-size:clamp(2rem,5vw,3.4rem); letter-spacing:.03em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.pp-so-desc{ font-family:var(--f-body,sans-serif); font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.6); margin-bottom:28px; }
.pp-so-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.pp-so-wish{ margin-top:clamp(40px,7vw,72px); text-align:left; }

/* Banner picker (réutilise la modale auth) */
.auth-box--wide{ max-width:620px; }
.banner-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; max-height:50vh; overflow-y:auto; }
.banner-cell{ position:relative; aspect-ratio:16/7; overflow:hidden; border:1px solid var(--border,rgba(255,255,255,.12)); background:#161618; cursor:pointer; padding:0; transition:border-color .2s; }
.banner-cell:hover{ border-color:#fff; }
.banner-cell img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.banner-cell:hover img{ transform:scale(1.05); }
.banner-cell--none{ display:flex; align-items:center; justify-content:center; background:linear-gradient(120deg,#0d0d0f,#1b1b1f); }
.banner-cell--none span{ font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.banner-cell-name{ position:absolute; left:0; right:0; bottom:0; padding:8px; font-family:var(--f-mono,monospace); font-size:.48rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,.92),transparent); text-align:left; opacity:0; transition:opacity .2s; }
.banner-cell:hover .banner-cell-name{ opacity:1; }

@media(hover:none){ .pp-wish-remove{ opacity:1; transform:none; } }
@media(max-width:640px){
  .pp-head{ flex-wrap:wrap; }
  .pp-id{ flex-basis:100%; }
  .pp-actions{ width:100%; }
  .pp-actions .pp-edit-btn{ width:100%; }
  .pp-stats{ grid-template-columns:1fr; }
  .banner-grid{ grid-template-columns:1fr; }
}


/* ───────────────────────────────────────────────────────────────────────
   §21 · ÉTAT VIDE ÉLÉGANT — captures d'écran manquantes/cassées
   (au lieu d'un aplat noir : motif on-brand + halo teinté = intentionnel)
─────────────────────────────────────────────────────────────────────── */
.dp-ss-slide.dp-ss-ph,
.dp-ss-thumb.dp-ss-ph{
  position:relative;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--tint-rgb,255,255,255),.10), transparent 60%),
    repeating-linear-gradient(135deg,#0e0e10,#0e0e10 14px,#121214 14px,#121214 28px);
}
.dp-ss-slide.dp-ss-ph img,
.dp-ss-thumb.dp-ss-ph img{ visibility:hidden; }
.dp-ss-slide.dp-ss-ph::after{
  content:''; position:absolute; inset:0; margin:auto; width:58px; height:58px;
  border:1px solid rgba(var(--tint-rgb,255,255,255),.45); border-radius:50%;
  background:radial-gradient(circle, rgba(var(--tint-rgb,255,255,255),.22), transparent 72%);
  box-shadow:0 0 30px -6px rgba(var(--tint-rgb,255,255,255),.4);
}
.dp-ss-slide.dp-ss-ph::before{
  content:''; position:absolute; inset:0; margin:auto; width:14px; height:14px; z-index:1;
  border-radius:50%; background:rgba(var(--tint-rgb,255,255,255),.7);
  box-shadow:0 0 16px 2px rgba(var(--tint-rgb,255,255,255),.6);
}


/* ───────────────────────────────────────────────────────────────────────
   §22 · FINITIONS — CTA hero en colonne sur petits écrans (anti-troncature)
   À ≤480px les 2 boutons côte-à-côte en flex:1 débordaient et tronquaient
   le texte ("EXPLORER NOS ŒUVRES" coupé). On les empile pleine largeur.
─────────────────────────────────────────────────────────────────────── */
@media(max-width:520px){
  .hero-btns{
    flex-direction:column; align-items:stretch;
    width:100%; max-width:340px; gap:10px;
  }
  .hero-btns .btn{ flex:none; width:100%; justify-content:center; letter-spacing:.16em; }
  /* Les CTA secondaires (CTA band) profitent du même confort */
  .glg-cta-band .reveal .btn{ flex:none; }
}


/* ───────────────────────────────────────────────────────────────────────
   §23 · ACCUEIL — FEUILLE DE ROUTE (timeline cinématique des sorties)
   Section signature : les 8 titres ordonnés par date, épine lumineuse
   centrale, nœuds alternés gauche/droite, teinte propre à chaque œuvre.
─────────────────────────────────────────────────────────────────────── */
.glg-roadmap{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vw,120px) clamp(16px,5vw,72px);
  border-top:1px solid var(--border,rgba(255,255,255,.07));
  background:linear-gradient(180deg,#060606 0%,var(--bg,#080808) 100%);
}
.rm-head{ position:relative; z-index:1; text-align:center; max-width:680px; margin:0 auto clamp(40px,6vw,72px); }
.rm-title{
  font-family:var(--f-disp,sans-serif); font-size:clamp(2.4rem,7vw,5.5rem);
  line-height:.9; letter-spacing:.02em; text-transform:uppercase; color:#fff; margin:12px 0 16px;
}
.rm-sub{
  font-family:var(--f-serif,Georgia,serif); font-style:italic;
  font-size:clamp(1rem,1.8vw,1.3rem); line-height:1.6; color:rgba(255,255,255,.55);
}
.rm-track{ position:relative; max-width:1000px; margin:0 auto; }
/* épine centrale lumineuse */
.rm-spine{
  position:absolute; left:50%; transform:translateX(-50%); top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.04) 4%,rgba(255,255,255,.20) 18%,rgba(255,255,255,.20) 82%,rgba(255,255,255,.04) 96%,transparent);
  box-shadow:0 0 14px rgba(255,255,255,.06);
}
.rm-node{
  position:relative; z-index:1; display:grid; align-items:center;
  grid-template-columns:1fr 52px 1fr; width:100%;
  background:none; border:none; padding:clamp(10px,1.4vw,18px) 0; cursor:pointer; text-align:left;
}
.rm-dot{
  grid-column:2; justify-self:center; width:13px; height:13px; border-radius:50%;
  background:var(--tint,#fff); border:2px solid #070708; z-index:2;
  box-shadow:0 0 0 3px rgba(var(--tint-rgb,255,255,255),.12), 0 0 16px rgba(var(--tint-rgb,255,255,255),.55);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rm-node:hover .rm-dot{ transform:scale(1.35); box-shadow:0 0 0 4px rgba(var(--tint-rgb,255,255,255),.18), 0 0 26px rgba(var(--tint-rgb,255,255,255),.8); }
.rm-card{
  position:relative; display:flex; flex-direction:column; gap:6px; max-width:400px;
  padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);
  background:linear-gradient(180deg,rgba(20,20,22,.9),rgba(11,11,12,.92));
  border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:8px;
  box-shadow:0 18px 50px -28px rgba(0,0,0,.9);
  transition:transform .42s var(--ease), border-color .42s, box-shadow .42s;
}
.rm-node--l .rm-card{ grid-column:1; justify-self:end; text-align:right; align-items:flex-end; }
.rm-node--r .rm-card{ grid-column:3; justify-self:start; text-align:left;  align-items:flex-start; }
/* liseré teinté côté épine */
.rm-card::before{
  content:''; position:absolute; top:18%; bottom:18%; width:2px; background:var(--tint,#fff);
  opacity:0; transition:opacity .42s; border-radius:2px;
}
.rm-node--l .rm-card::before{ right:-1px; }
.rm-node--r .rm-card::before{ left:-1px; }
.rm-node:hover .rm-card{
  transform:translateY(-4px);
  border-color:rgba(var(--tint-rgb,255,255,255),.5);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(var(--tint-rgb,255,255,255),.22), 0 0 40px -16px rgba(var(--tint-rgb,255,255,255),.6);
}
.rm-node:hover .rm-card::before{ opacity:1; }
.rm-date{ font-family:var(--f-mono,monospace); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tint,#fff); }
.rm-type{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.rm-name{ font-family:var(--f-disp,sans-serif); font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1; letter-spacing:.02em; text-transform:uppercase; color:#fff; }
.rm-tag{ font-family:var(--f-serif,Georgia,serif); font-style:italic; font-size:.92rem; line-height:1.45; color:rgba(255,255,255,.58); }
.rm-go{ display:inline-flex; align-items:center; gap:7px; margin-top:4px; font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45); transition:color .3s; }
.rm-node--l .rm-go{ flex-direction:row-reverse; }
.rm-node:hover .rm-go{ color:var(--tint,#fff); }
.rm-go-arr{ transition:transform .3s; }
.rm-node:hover .rm-go-arr{ transform:translateX(4px); }
.rm-node--l:hover .rm-go-arr{ transform:translateX(-4px); }

/* Mobile / tablette : colonne unique, épine à gauche */
@media(max-width:820px){
  .rm-track{ max-width:560px; }
  .rm-spine{ left:7px; transform:none; }
  .rm-node{ grid-template-columns:30px 1fr; }
  .rm-dot{ grid-column:1; justify-self:center; }
  .rm-node--l .rm-card, .rm-node--r .rm-card{
    grid-column:2; justify-self:stretch; text-align:left; align-items:flex-start; max-width:none;
  }
  .rm-node--l .rm-card::before, .rm-node--r .rm-card::before{ left:-1px; right:auto; }
  .rm-node--l .rm-go{ flex-direction:row; }
  .rm-node--l:hover .rm-go-arr{ transform:translateX(4px); }
}


/* ───────────────────────────────────────────────────────────────────────
   §24 · AMIS / CONTACTS — réseau social du profil (style Steam/Epic)
─────────────────────────────────────────────────────────────────────── */
/* En-tête de section : bouton "Ajouter" poussé à droite */
.pp-friends-section .pp-sec-head{ flex-wrap:wrap; }
.pp-add-friend{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--bmd,rgba(255,255,255,.14)); color:rgba(255,255,255,.85);
  padding:9px 15px; border-radius:3px; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .25s, color .25s, background .25s, transform .25s;
}
.pp-add-friend:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.05); transform:translateY(-1px); }
.pp-add-friend svg{ flex-shrink:0; }

.pp-friends-body{ display:flex; flex-direction:column; gap:clamp(20px,3vw,30px); }
.pp-fr-block{ display:flex; flex-direction:column; gap:14px; }
.pp-fr-label{
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.5); display:flex; align-items:center; gap:9px;
}
.pp-fr-badge{
  font-family:var(--f-mono,monospace); font-size:.5rem; color:#fff; background:rgba(255,255,255,.1);
  border-radius:20px; padding:2px 8px; min-width:20px; text-align:center;
}
.pp-friends-note{ font-family:var(--f-body,sans-serif); font-size:.88rem; color:rgba(255,255,255,.45); line-height:1.6; padding:6px 0; }

/* Avatar disc générique (réutilise .ava-img/.ava-init du §13) */
.pp-fr-ava, .pp-friend-ava, .fr-res-ava{
  position:relative; flex-shrink:0; border-radius:50%; overflow:visible;
  background:linear-gradient(135deg,#2a2a2e,#161618); display:inline-flex; align-items:center; justify-content:center;
}
.pp-fr-ava{ width:42px; height:42px; }
.fr-res-ava{ width:40px; height:40px; }
.pp-friend-ava{ width:64px; height:64px; margin:0 auto; }
.pp-fr-ava .ava-img, .pp-friend-ava .ava-img, .fr-res-ava .ava-img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pp-fr-ava .ava-init, .pp-friend-ava .ava-init, .fr-res-ava .ava-init{
  font-family:var(--f-disp,sans-serif); color:#fff; display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
.pp-friend-ava .ava-init{ font-size:1.6rem; }
.pp-fr-ava .ava-init, .fr-res-ava .ava-init{ font-size:1.1rem; }
/* Stacking faisant autorité (TOUS les avatars) : une photo chargée passe TOUJOURS
   au-dessus de l'initiale de repli. Évite que le disque-lettre masque l'image. */
.ava-img{ position:relative; z-index:2; }
.ava-init--fallback{ position:absolute; inset:0; z-index:1; }

/* Demandes (entrantes / sortantes) — lignes */
.pp-fr-reqs{ display:flex; flex-direction:column; gap:8px; }
.pp-fr-req{
  display:flex; align-items:center; gap:14px; padding:10px 14px;
  background:rgba(255,255,255,.025); border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:8px;
  transition:border-color .25s, background .25s;
}
.pp-fr-req:hover{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); }
.pp-fr-name{ flex:1; min-width:0; font-family:var(--f-body,sans-serif); font-weight:600; font-size:.92rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-fr-pending{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.pp-fr-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pp-fr-accept{
  background:#fff; color:#000; border:none; cursor:pointer; padding:8px 16px; border-radius:3px;
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:background .2s, transform .2s;
}
.pp-fr-accept:hover{ background:rgba(255,255,255,.82); transform:translateY(-1px); }
.pp-fr-decline{
  width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--bmd,rgba(255,255,255,.14)); color:rgba(255,255,255,.6);
  border-radius:3px; cursor:pointer; transition:color .2s, border-color .2s, background .2s;
}
.pp-fr-decline:hover{ color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.05); }

/* Grille d'amis */
.pp-friends-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:clamp(12px,1.6vw,18px);
}
.pp-friend-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:20px 12px 16px; text-align:center;
  background:linear-gradient(180deg,rgba(20,20,22,.85),rgba(11,11,12,.9));
  border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:10px;
  transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)), border-color .4s, box-shadow .4s;
}
.pp-friend-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.22); box-shadow:0 18px 44px -22px rgba(0,0,0,.9); }
.pp-friend-dot{
  position:absolute; right:-1px; bottom:-1px; width:14px; height:14px; border-radius:50%;
  background:#3a3a3e; border:2px solid #0a0a0b;   /* gris = hors-ligne (présence temps réel = étape launcher) */
}
.pp-friend-name{ font-family:var(--f-body,sans-serif); font-weight:600; font-size:.86rem; color:#fff; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-friend-remove{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0;
  background:rgba(8,8,8,.7); border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer;
  opacity:0; transform:scale(.9); transition:opacity .2s, transform .2s, background .2s, border-color .2s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.pp-friend-card:hover .pp-friend-remove, .pp-friend-remove:focus-visible{ opacity:1; transform:none; }
.pp-friend-remove:hover{ background:#e5564e; border-color:#e5564e; }
@media(hover:none){ .pp-friend-remove{ opacity:1; transform:none; } }

/* Modale recherche d'amis */
.fr-modal .auth-picker-title{ margin-bottom:16px; }
.fr-search-row{
  display:flex; align-items:center; gap:11px; padding:0 0 10px;
  border-bottom:2px solid rgba(255,255,255,.85); margin-bottom:18px;
}
.fr-search-row svg{ color:rgba(255,255,255,.5); flex-shrink:0; }
#fr-search-input{
  flex:1; background:transparent; border:none; outline:none; color:#fff;
  font-family:var(--f-body,sans-serif); font-size:1.05rem; caret-color:#fff;
}
#fr-search-input::placeholder{ color:rgba(255,255,255,.28); }
.fr-search-results{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; scrollbar-width:thin; }
.fr-res{
  display:flex; align-items:center; gap:13px; padding:9px 12px;
  border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:8px; background:rgba(255,255,255,.02);
  transition:border-color .2s, background .2s;
}
.fr-res:hover{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); }
.fr-res-name{ flex:1; min-width:0; font-family:var(--f-body,sans-serif); font-weight:600; font-size:.92rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-res-add{
  flex-shrink:0; background:#fff; color:#000; border:none; cursor:pointer; padding:8px 16px; border-radius:3px;
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:background .2s, transform .2s;
}
.fr-res-add:hover{ background:rgba(255,255,255,.82); transform:translateY(-1px); }
.fr-res-add:disabled{ opacity:.5; cursor:default; transform:none; }
.fr-res-tag{
  flex-shrink:0; font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.18); padding:6px 11px; border-radius:3px;
}
.fr-res-tag--muted{ color:rgba(255,255,255,.4); border-color:rgba(255,255,255,.1); }

@media(max-width:560px){
  .pp-friends-grid{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .pp-fr-accept{ padding:8px 12px; }
}


/* ───────────────────────────────────────────────────────────────────────
   §25 · TROPHÉES / SUCCÈS (style PlayStation)
   Couleurs de palier = seule entorse au monochrome, comme les trophées PS.
─────────────────────────────────────────────────────────────────────── */
.pp-stats{ grid-template-columns:repeat(4,1fr); }   /* 4 stats désormais (Souhaits/Trophées/Amis/Biblio) */

.pp-tier--platinum{ --tc:#9bdcff; }
.pp-tier--gold{     --tc:#ffcc4d; }
.pp-tier--silver{   --tc:#c6cdd8; }
.pp-tier--bronze{   --tc:#cd8048; }
.trophy-ico{ width:1em; height:1em; display:inline-block; vertical-align:-.12em; }

/* Showcase : niveau + paliers */
.pp-trophy-showcase{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:clamp(16px,2.4vw,30px); align-items:stretch; }
.pp-trophy-level{
  display:flex; align-items:center; gap:18px; padding:clamp(18px,2vw,26px);
  background:linear-gradient(135deg,rgba(155,220,255,.07),rgba(11,11,12,.6)); border:1px solid rgba(255,255,255,.1); border-radius:12px;
}
.pp-tl-badge{ position:relative; width:74px; height:74px; flex-shrink:0; border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(155,220,255,.4),rgba(20,22,28,.9)); border:1px solid rgba(155,220,255,.45);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px -8px rgba(155,220,255,.5); }
.pp-tl-num{ font-family:var(--f-disp,sans-serif); font-size:2rem; color:#fff; line-height:1; }
.pp-tl-cup{ position:absolute; right:-4px; bottom:-4px; width:26px; height:26px; color:#9bdcff; background:#0a0a0c; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(155,220,255,.4); font-size:15px; }
.pp-tl-meta{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.pp-tl-title{ font-family:var(--f-disp,sans-serif); font-size:1.25rem; letter-spacing:.03em; text-transform:uppercase; color:#fff; }
.pp-tl-sub{ font-family:var(--f-mono,monospace); font-size:.58rem; letter-spacing:.12em; color:rgba(255,255,255,.55); }
.pp-tl-bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.pp-tl-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#9bdcff,#fff); box-shadow:0 0 12px rgba(155,220,255,.6); }

.pp-tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pp-tier{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:clamp(14px,1.6vw,20px) 8px;
  background:linear-gradient(180deg,rgba(20,20,24,.7),rgba(11,11,12,.7)); border:1px solid rgba(255,255,255,.08); border-radius:10px;
  position:relative; overflow:hidden; transition:border-color .3s, transform .3s;
}
.pp-tier::before{ content:''; position:absolute; inset:0 0 auto 0; height:2px; background:var(--tc); opacity:.6; }
.pp-tier:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--tc) 50%,transparent); }
.pp-tier-ico{ font-size:1.9rem; color:var(--tc); filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tc) 45%,transparent)); line-height:1; }
.pp-tier-count{ font-family:var(--f-disp,sans-serif); font-size:1.7rem; color:#fff; line-height:1; }
.pp-tier-total{ font-size:.7em; color:rgba(255,255,255,.4); }
.pp-tier-label{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* Trophées par jeu */
.pp-tg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(12px,1.6vw,18px); }
.pp-tg-card{
  display:flex; align-items:center; gap:14px; padding:12px; text-align:left; cursor:pointer;
  background:linear-gradient(180deg,rgba(20,20,22,.85),rgba(11,11,12,.9)); border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:10px;
  transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)), border-color .4s, box-shadow .4s;
}
.pp-tg-card:hover{ transform:translateY(-4px); border-color:rgba(var(--tint-rgb,255,255,255),.5); box-shadow:0 18px 44px -22px rgba(0,0,0,.9), 0 0 26px -12px rgba(var(--tint-rgb,255,255,255),.5); }
.pp-tg-cover{ width:52px; height:70px; flex-shrink:0; border-radius:5px; overflow:hidden; background:#161618; }
.pp-tg-cover img{ width:100%; height:100%; object-fit:cover; }
.pp-tg-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.pp-tg-name{ font-family:var(--f-disp,sans-serif); font-size:1rem; letter-spacing:.02em; text-transform:uppercase; color:#fff; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-tg-stats{ font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.1em; color:rgba(255,255,255,.5); }
.pp-tg-mini-row{ display:flex; gap:9px; flex-wrap:wrap; }
.pp-tg-mini{ display:inline-flex; align-items:center; gap:3px; font-family:var(--f-mono,monospace); font-size:.56rem; color:var(--tc); }
.pp-tg-mini .trophy-ico{ font-size:.85rem; }
.pp-tg-none{ font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.1em; color:rgba(255,255,255,.3); }
.pp-tg-ring{ --pct:0; width:54px; height:54px; flex-shrink:0; border-radius:50%;
  background:conic-gradient(var(--tint,#fff) calc(var(--pct)*1%), rgba(255,255,255,.08) 0); display:flex; align-items:center; justify-content:center; }
.pp-tg-ring-in{ width:42px; height:42px; border-radius:50%; background:#0b0b0d; display:flex; align-items:center; justify-content:center; font-family:var(--f-disp,sans-serif); font-size:.95rem; color:#fff; }
.pp-tg-ring-in small{ font-size:.6em; color:rgba(255,255,255,.5); margin-left:1px; }

/* Modale liste de trophées (PS-style) */
.tl-modal{ max-width:640px; }
.tl-head{ display:flex; align-items:center; gap:14px; padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.tl-head-cover{ width:48px; height:64px; border-radius:5px; overflow:hidden; background:#161618; flex-shrink:0; }
.tl-head-cover img{ width:100%; height:100%; object-fit:cover; }
.tl-head-eyebrow{ display:block; font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tint,rgba(255,255,255,.5)); }
.tl-head-name{ display:block; font-family:var(--f-disp,sans-serif); font-size:1.4rem; letter-spacing:.02em; text-transform:uppercase; color:#fff; }
.tl-list{ display:flex; flex-direction:column; gap:8px; max-height:54vh; overflow-y:auto; scrollbar-width:thin; padding-right:2px; }
.tl-row{ display:flex; align-items:center; gap:14px; padding:11px 14px; border:1px solid var(--border,rgba(255,255,255,.07)); border-radius:8px; background:rgba(255,255,255,.02); }
.tl-row.is-locked{ opacity:.62; }
.tl-row.is-earned{ background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 10%,transparent),rgba(255,255,255,.02)); border-color:color-mix(in srgb,var(--tc) 35%,transparent); }
.tl-ico{ font-size:1.7rem; color:var(--tc); flex-shrink:0; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tc) 40%,transparent)); }
.tl-row.is-locked .tl-ico{ color:rgba(255,255,255,.22); filter:none; }
.tl-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tl-name{ font-family:var(--f-body,sans-serif); font-weight:600; font-size:.92rem; color:#fff; }
.tl-desc{ font-family:var(--f-body,sans-serif); font-size:.78rem; color:rgba(255,255,255,.5); line-height:1.4; }
.tl-tier{ flex-shrink:0; font-family:var(--f-mono,monospace); font-size:.48rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tc); border:1px solid color-mix(in srgb,var(--tc) 35%,transparent); padding:5px 9px; border-radius:3px; }
.tl-row.is-locked .tl-tier{ color:rgba(255,255,255,.3); border-color:rgba(255,255,255,.1); }


/* ───────────────────────────────────────────────────────────────────────
   §26 · COMPTES LIÉS (Steam / Epic / PlayStation)
─────────────────────────────────────────────────────────────────────── */
.pp-link-rows{ display:flex; flex-direction:column; gap:10px; }
.pp-link-row{
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:rgba(255,255,255,.025); border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:10px;
  transition:border-color .25s, background .25s;
}
.pp-link-row:hover{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); }
.pp-link-row.is-linked{ border-color:rgba(120,220,140,.3); }
.pp-link-ico{ width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.pp-link-ico img{ width:100%; height:100%; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; }
.pp-link-ico--lg{ width:44px; height:44px; }
.pp-link-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pp-link-name{ font-family:var(--f-body,sans-serif); font-weight:600; font-size:.9rem; color:#fff; }
.pp-link-handle{ font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.06em; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-link-muted{ font-family:var(--f-mono,monospace); font-size:.56rem; color:rgba(255,255,255,.3); }
.pp-link-state{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:#7ed09a; }
.pp-link-btn{
  flex-shrink:0; background:#fff; color:#000; border:none; cursor:pointer; padding:8px 16px; border-radius:3px;
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:background .2s, transform .2s;
}
.pp-link-btn:hover{ background:rgba(255,255,255,.82); transform:translateY(-1px); }
.pp-link-btn--ghost{ background:transparent; color:rgba(255,255,255,.6); border:1px solid var(--bmd,rgba(255,255,255,.14)); }
.pp-link-btn--ghost:hover{ background:rgba(255,255,255,.05); color:#fff; border-color:rgba(255,255,255,.4); }
.pp-link-modal-head{ display:flex; align-items:center; gap:14px; }

@media(max-width:760px){
  .pp-trophy-showcase{ grid-template-columns:1fr; }
}
@media(max-width:600px){
  .pp-stats{ grid-template-columns:repeat(2,1fr); }
  .pp-tiers{ grid-template-columns:repeat(2,1fr); }
  .pp-tg-grid{ grid-template-columns:1fr; }
}


/* ───────────────────────────────────────────────────────────────────────
   §27 · FICHES DÉTAIL "MAGAZINE" — tags, fact cliquable, teaser trophées
─────────────────────────────────────────────────────────────────────── */
/* Tags de genre dans le hero */
.dp-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:-6px 0 26px; }
.dp-tag{
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.18); padding:6px 12px; border-radius:20px;
  background:rgba(8,8,8,.35); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:border-color .25s, color .25s, background .25s;
}
.dp-tag:hover{ border-color:var(--tint,#fff); color:#fff; background:rgba(var(--tint-rgb,255,255,255),.1); }

/* Fact cliquable (trophées) dans la buybox */
.dp-fact--btn{ cursor:pointer; margin:2px -8px; padding:6px 8px; border-radius:5px; transition:background .2s; }
.dp-fact--btn:hover{ background:rgba(var(--tint-rgb,255,255,255),.08); }
.dp-fact--btn b{ color:var(--tint,#fff); }
.dp-fact--btn:focus-visible{ outline:2px solid var(--tint,#fff); outline-offset:2px; }

/* Section trophées (teaser store-style) */
.dp-trophies{ }
.dp-tr-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.dp-tr-counts{ display:flex; align-items:center; gap:16px; }
.dp-tr-count{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-disp,sans-serif); font-size:1.3rem; color:var(--tc,#fff); }
.dp-tr-count .trophy-ico{ font-size:1.15rem; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tc,#fff) 40%,transparent)); }
.dp-tr-all{
  display:inline-flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--border,rgba(255,255,255,.14));
  color:rgba(255,255,255,.82); padding:9px 16px; border-radius:3px; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .25s, color .25s, background .25s, gap .25s;
}
.dp-tr-all:hover{ border-color:var(--tint,#fff); color:#fff; background:rgba(var(--tint-rgb,255,255,255),.07); gap:11px; }
.dp-tr-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.dp-tr-row{
  display:flex; align-items:center; gap:13px; padding:12px 15px;
  background:rgba(255,255,255,.025); border:1px solid var(--border,rgba(255,255,255,.07)); border-radius:8px;
  transition:border-color .25s, transform .25s;
}
.dp-tr-row:hover{ border-color:rgba(255,255,255,.16); transform:translateY(-2px); }
.dp-tr-ico{ font-size:1.6rem; color:var(--tc,#fff); flex-shrink:0; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tc,#fff) 40%,transparent)); }
.dp-tr-body{ flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dp-tr-name{ font-family:var(--f-body,sans-serif); font-weight:600; font-size:.86rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-tr-tier{ flex-shrink:0; font-family:var(--f-mono,monospace); font-size:.46rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tc,#fff); border:1px solid color-mix(in srgb,var(--tc,#fff) 35%,transparent); padding:4px 8px; border-radius:3px; }
@media(max-width:560px){ .dp-tr-list{ grid-template-columns:1fr; } }


/* ───────────────────────────────────────────────────────────────────────
   §28 · LANGUAGE GATE — élévation cinématique (additive, sûre)
   Ambiance feutrée multicouche + halo logo + séparateur + HUD raffinés.
─────────────────────────────────────────────────────────────────────── */
#lang-gate{
  background:
    radial-gradient(ellipse 55% 45% at 50% 30%, rgba(255,255,255,.055), transparent 62%),
    radial-gradient(ellipse 95% 70% at 84% 90%, rgba(150,178,255,.06), transparent 56%),
    radial-gradient(ellipse 85% 70% at 12% 94%, rgba(150,178,255,.04), transparent 56%),
    #050507 !important;
}
/* Halo logo plus présent + lueur froide */
.gate-logo-wrap{ filter:drop-shadow(0 0 16px rgba(0,0,0,.98)) drop-shadow(0 0 64px rgba(120,150,230,.14)); }
.gate-logo-img{ filter:brightness(0) invert(1) drop-shadow(0 0 18px rgba(255,255,255,.20)); }
.gate-logo-wrap::before{ background:radial-gradient(circle, rgba(140,170,255,.10), rgba(255,255,255,.02) 40%, transparent 66%); }
/* Tagline + séparateur : typo plus tenue */
.gate-tagline{ letter-spacing:.04em; }
.gate-sep-label{ color:rgba(255,255,255,.5) !important; letter-spacing:.48em !important; }
.gate-sep-line{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent) !important; }
/* Cadre de la mosaïque : liseré plus fin et lueur */
.gate-grid{ box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 0 60px 24px rgba(0,0,0,.7), 0 0 120px 50px rgba(40,60,120,.08) !important; }
/* HUD bas : lecture renforcée */
.gate-bottom-item{ color:rgba(255,255,255,.42) !important; }
.gate-bottom-clock{ color:rgba(155,200,255,.7) !important; }
/* Drapeau survolé : élévation + lueur plus marquée */
.gate-lang:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 16px 50px -16px rgba(0,0,0,.9) !important; z-index:3; }
.gate-lang-go{ color:#fff; text-shadow:0 0 12px rgba(120,160,255,.6), 0 1px 6px rgba(0,0,0,.9); }


/* ───────────────────────────────────────────────────────────────────────
   §29 · HOME "CE QUE NOUS CRÉONS" — vie & lumière sur les strips
   En-tête élevé + balayage lumineux + respiration des ambiances + watermark.
─────────────────────────────────────────────────────────────────────── */
/* En-tête plus affirmé */
.showcase-eyebrow{ color:rgba(255,255,255,.5) !important; letter-spacing:.46em !important; }
.showcase-title{ position:relative; }
.showcase-title::after{
  content:''; display:block; width:clamp(40px,6vw,84px); height:2px; margin:22px auto 0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
/* Balayage lumineux diagonal (sur le panneau, .puz-strip-img est un <div>) */
.puz-strip-img{ position:absolute; overflow:hidden; }
.puz-strip-img::after{
  content:''; position:absolute; top:-60%; bottom:-60%; left:-30%; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-120%) skewX(-14deg); pointer-events:none; z-index:1;
  animation:puzSweep 7.5s ease-in-out infinite;
}
.puz-strip-row:nth-child(2) .puz-strip-img::after{ animation-delay:2.5s; }
.puz-strip-row:nth-child(3) .puz-strip-img::after{ animation-delay:5s; }
@keyframes puzSweep{
  0%, 62% { transform:translateX(-120%) skewX(-14deg); opacity:0; }
  70%     { opacity:1; }
  100%    { transform:translateX(560%) skewX(-14deg); opacity:0; }
}
/* Respiration douce de l'ambiance colorée (sur le ::before mood) */
.puz-strip-row .puz-strip::before{ animation:puzBreathe 9s ease-in-out infinite alternate; }
.puz-strip-row:nth-child(2) .puz-strip::before{ animation-delay:1.5s; }
.puz-strip-row:nth-child(3) .puz-strip::before{ animation-delay:3s; }
@keyframes puzBreathe{ from{ opacity:.72; } to{ opacity:1; } }
/* Watermark de catégorie : dérive lente + meilleur contraste au survol */
.puz-cat{ transition:-webkit-text-stroke .5s, letter-spacing .8s var(--ease,ease); will-change:transform; }
.puz-strip-row:hover .puz-cat{ letter-spacing:.02em; }
/* Tag de citation : pointe de blanc */
.puz-quote-tag{ color:rgba(255,255,255,.5) !important; }

@media(prefers-reduced-motion:reduce){
  .puz-strip-img::after{ animation:none !important; opacity:0 !important; }
  .puz-strip-row .puz-strip::before{ animation:none !important; }
}


/* ───────────────────────────────────────────────────────────────────────
   §30 · OUR WORKS — grille de store (remplace l'auto-scroll infini)
   Catalogue curaté que l'utilisateur parcourt, façon Steam/Epic/PS.
─────────────────────────────────────────────────────────────────────── */
.carousel-viewport.works-grid-vp{
  overflow:visible !important;
  -webkit-mask:none !important; mask:none !important;
  padding:6px 0 0 !important; touch-action:auto;
}
.carousel-viewport.works-grid-vp::before,
.carousel-viewport.works-grid-vp::after{ display:none !important; }
.carousel-track.works-grid{
  display:grid !important;
  /* auto-FIT + cap de largeur + centrage → 4 cartes restent centrées (plus de vide à droite) */
  grid-template-columns:repeat(auto-fit, minmax(190px,228px));
  justify-content:center;
  gap:clamp(16px,2vw,28px);
  width:100% !important;
  max-width:1200px;
  margin:0 auto !important;
  transform:none !important;
  padding:0 clamp(16px,5vw,40px);
  will-change:auto;
}
.works-grid .c-card{ width:100% !important; margin-right:0 !important; }
/* La section n'a plus besoin de masquer un track qui défile → on laisse respirer
   l'ombre/lift au survol des cartes. */
.works-cat-section:has(.works-grid){ overflow:visible; }
/* Entrée en fondu douce des cartes (l'opacité est gérée par GSAP animWorks ;
   ici on garantit une transition propre au survol/au repos) */
.works-grid .c-card{ transition:transform .42s var(--ease,cubic-bezier(.16,1,.3,1)), box-shadow .42s, border-color .42s !important; }
@media(max-width:680px){
  .carousel-track.works-grid{ grid-template-columns:repeat(2,1fr); gap:12px; padding:0 clamp(14px,4vw,24px); }
}
@media(max-width:380px){
  .carousel-track.works-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
}


/* ───────────────────────────────────────────────────────────────────────
   §31 · LANGUAGE GATE — entrée d'ensemble (la ligne morte ".gate-scan" a été
   définitivement supprimée de main.css ; refonte cinématique complète en §36)
─────────────────────────────────────────────────────────────────────── */
/* Entrée d'ensemble : léger fondu + montée du bloc, transitions plus douces */
#lang-gate:not(.out){ animation:gateRise .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes gateRise{ from{ opacity:0; } to{ opacity:1; } }
/* Drapeaux : entrée un poil plus ample et fluide */
.gate-lang{ animation-duration:.62s !important; animation-timing-function:cubic-bezier(.16,1,.3,1) !important; }
@media(prefers-reduced-motion:reduce){ #lang-gate:not(.out){ animation:none !important; } }


/* ───────────────────────────────────────────────────────────────────────
   §32 · CONTACT — disposition plus dense, "panneau" premium, ambiance
─────────────────────────────────────────────────────────────────────── */
/* Le formulaire vit dans un panneau défini (fini le texte flottant dans le vide) */
.contact-form-col{
  background:linear-gradient(180deg,rgba(20,20,22,.45),rgba(11,11,12,.35));
  border:1px solid var(--border,rgba(255,255,255,.08)) !important;
  border-radius:14px;
  margin:clamp(20px,3vw,40px);
  padding:clamp(28px,3.5vw,46px) !important;
}
.contact-info-col{ padding:clamp(28px,3.5vw,46px) clamp(20px,4vw,52px) !important; }
/* En-tête de colonne plus affirmé */
.contact-form-eyebrow{ font-size:.56rem !important; letter-spacing:.34em !important; color:rgba(255,255,255,.5) !important; margin-bottom:28px !important; position:relative; padding-bottom:14px; }
.contact-form-eyebrow::after{ content:''; position:absolute; left:0; bottom:0; width:34px; height:2px; background:rgba(255,255,255,.4); }
/* Halo ambiant doux derrière la zone contact (cohérent avec le reste) */
.contact-layout{ position:relative; }
.contact-layout::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 50% at 78% 18%, rgba(120,150,230,.05), transparent 60%);
}
.contact-layout > *{ position:relative; z-index:1; }
/* Carte contact direct : un cran plus présente */
.contact-direct-card{ border-radius:12px !important; padding:30px 28px !important; }
.c-main-email{ font-size:clamp(.95rem,2vw,1.2rem) !important; }
/* Hero contact : un peu plus compact pour réduire le vide */
.contact-hero{ padding-bottom:clamp(36px,5vh,64px) !important; }
@media(min-width:901px){
  /* Aligne visuellement les deux colonnes (panneau form + infos) */
  .contact-layout{ align-items:start; gap:clamp(8px,1vw,20px); }
}
@media(max-width:900px){
  .contact-form-col{ margin:clamp(14px,4vw,24px); }
}


/* ───────────────────────────────────────────────────────────────────────
   §33 · BADGE VÉRIFIÉ (créateur) + upload bannière
─────────────────────────────────────────────────────────────────────── */
.glg-verified{
  display:inline-flex; align-items:center; justify-content:center;
  width:.72em; height:.72em; margin-left:.32em; vertical-align:baseline;
  color:#fff; flex-shrink:0; position:relative; top:.02em;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.5));
  animation:vBadgeIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.glg-verified svg{ width:100%; height:100%; display:block; }
.glg-verified--lg{ width:.62em; height:.62em; margin-left:.28em; filter:drop-shadow(0 0 8px rgba(255,255,255,.55)); }
@keyframes vBadgeIn{ from{ opacity:0; transform:scale(.4) rotate(-25deg); } to{ opacity:1; transform:none; } }
/* Dans la nav (petit) + listes d'amis : taille fixe lisible */
.nav-account-name .glg-verified, .pp-fr-name .glg-verified, .pp-friend-name .glg-verified, .fr-res-name .glg-verified{
  width:13px; height:13px; top:0; vertical-align:-2px;
}
.pp-name{ display:inline-flex; align-items:center; flex-wrap:wrap; }
@media(prefers-reduced-motion:reduce){ .glg-verified{ animation:none; } }

/* Upload bannière : réutilise .avatar-upload, pleine largeur agréable */
.avatar-upload--banner{ margin-bottom:6px; }


/* ───────────────────────────────────────────────────────────────────────
   §34 · TRANSITION DE PAGE — voile "fondu" (feel launcher)
   Couvre instantanément, puis se dissout : le swap est invisible, la
   nouvelle page apparaît en fondu. Sous la nav (700), au-dessus du contenu.
─────────────────────────────────────────────────────────────────────── */
#glg-veil{
  position:fixed; inset:0; z-index:600; pointer-events:none; opacity:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(20,22,30,.6), transparent 70%),
    var(--bg, #080808);
  transition:opacity .52s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
@media(prefers-reduced-motion:reduce){ #glg-veil{ display:none !important; } }


/* ───────────────────────────────────────────────────────────────────────
   §35 · PROFIL — bio
─────────────────────────────────────────────────────────────────────── */
.pp-bio{
  margin-top:14px; max-width:60ch;
  font-family:var(--f-body,sans-serif); font-size:.92rem; line-height:1.6;
  color:rgba(255,255,255,.7); white-space:pre-line; word-break:break-word;
}
.pp-bio-add{
  margin-top:14px; background:none; border:1px dashed var(--bmd,rgba(255,255,255,.16));
  color:rgba(255,255,255,.55); cursor:pointer; padding:8px 14px; border-radius:3px;
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .25s, color .25s, background .25s;
}
.pp-bio-add:hover{ border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.03); }


/* ───────────────────────────────────────────────────────────────────────
   §36 · LANGUAGE GATE — refonte cinématique AAA (présentation + motion)
   Étend §28/§31. Aucune "ligne qui descend" : ambiance qui RESPIRE, moment
   de marque plus affirmé, tuiles de langue premium, chorégraphie d'entrée
   raffinée. Transform/opacity uniquement (GPU). reduced-motion en fin.
─────────────────────────────────────────────────────────────────────── */

/* — Vignette de cadrage : profondeur cinéma, concentre le regard — */
#lang-gate{ box-shadow:inset 0 0 240px 70px rgba(0,0,0,.72), inset 0 0 70px rgba(0,0,0,.45); }

/* — Aura ambiante vivante (élément .gate-aura injecté par buildGate) —
   Un seul halo central qui respire. Pas de balayage/ligne (volonté studio). */
.gate-aura{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.gate-aura::before{
  content:''; position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width:120vmax; height:120vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(150,178,255,.07), rgba(120,150,230,.025) 28%, transparent 58%);
  animation:gateAuraBreath 9s ease-in-out infinite;
}
@keyframes gateAuraBreath{
  0%,100%{ opacity:.6;  transform:translate(-50%,-50%) scale(.95) }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.07) }
}

/* — LOGO : moment de marque plus grand + allumage doux — */
.gate-logo-img{ height:58px !important; animation:gateLogoIgnite 1s .1s cubic-bezier(.16,1,.3,1) both; }
@keyframes gateLogoIgnite{ from{ opacity:0; transform:scale(.86) } to{ opacity:1; transform:scale(1) } }
.gate-studio-name{ font-size:.56rem !important; letter-spacing:.62em !important; color:rgba(255,255,255,.92) !important; }
/* Hairline signature qui se trace sous le nom de studio */
.gate-logo-wrap::after{
  content:''; display:block; height:1px; width:0; margin-top:5px; align-self:center;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:gateRule .9s .72s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes gateRule{ to{ width:150px } }

/* — Séparateur "CHOOSE YOUR LANGUAGE" : plus lisible + lignes qui s'ouvrent — */
.gate-separator{ width:min(100%,clamp(320px,44vw,560px)) !important; margin-bottom:clamp(16px,2.4vh,26px) !important; }
.gate-sep-label{ color:rgba(255,255,255,.64) !important; font-size:.44rem !important; letter-spacing:.5em !important; }
.gate-separator .gate-sep-line{ transform-origin:center; animation:gateSepGrow .85s .52s cubic-bezier(.16,1,.3,1) both; }
@keyframes gateSepGrow{ from{ transform:scaleX(0); opacity:0 } to{ transform:scaleX(1); opacity:1 } }

/* — MOSAÏQUE DE DRAPEAUX : plus présente et premium — */
@media(min-width:901px){
  .gate-grid{
    grid-template-columns:repeat(5, clamp(110px,12.6vw,160px)) !important;
    grid-auto-rows:clamp(80px,8.8vw,118px) !important;
  }
}
/* Défaut : monochrome MAIS vivant (les flags paraissaient éteints) */
.gate-lang{ filter:grayscale(100%) brightness(.92) contrast(1.05); }
/* Survol du grid → assombrit les non-choisis pour focaliser le choix */
.gate-grid:hover .gate-lang{ filter:grayscale(100%) brightness(.55) contrast(1.05); }
.gate-grid:hover .gate-lang:hover{ filter:grayscale(0%) brightness(1.06) contrast(1.05) !important; }
/* Sheen lumineux subtil en haut de chaque tuile */
.gate-lang::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.09), transparent 36%);
  opacity:.45; transition:opacity .35s var(--ease,ease);
}
.gate-lang:hover::before{ opacity:1; }
/* Élévation "carte qui se lève" au survol (translate hover ≠ translate d'entrée) */
.gate-lang:hover{ transform:translateY(-4px) scale(1.05) !important; }
/* Identité lisible */
.gate-lang-name{ font-size:clamp(.4rem,.5vw,.5rem) !important; letter-spacing:.15em !important; color:rgba(255,255,255,.9) !important; }
.gate-lang:hover .gate-lang-name{ color:#fff !important; }
.gate-lang-go{ top:8px !important; right:10px !important; font-size:.82rem !important; }

/* — HUD système : lecture renforcée — */
.gate-bottom{ margin-top:clamp(14px,2.4vh,24px) !important; }
.gate-bottom-item{ font-size:.38rem !important; letter-spacing:.28em !important; }
.gate-bottom-pulse{ color:rgba(255,255,255,.72) !important; }
.gate-sep-bottom .gate-sep-line{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent) !important; }

/* — Coins viseur : un cran plus nets — */
.gate-corner{ border-color:rgba(255,255,255,.28) !important; }

/* — reduced-motion : tout se fige proprement à l'état final — */
@media(prefers-reduced-motion:reduce){
  .gate-aura::before{ animation:none !important; opacity:.8; }
  .gate-logo-img{ animation:none !important; opacity:1 !important; transform:none !important; }
  .gate-logo-wrap::after{ animation:none !important; width:150px; }
  .gate-separator .gate-sep-line{ animation:none !important; transform:none !important; opacity:1; }
}


/* ───────────────────────────────────────────────────────────────────────
   §37 · PROFIL — élévation visuelle (espace membre launcher)
   Bannière par défaut cinématique (jamais "vide/triste"), avatar premium,
   stats + titres de section plus affirmés. Étend §35 et la base profil.
─────────────────────────────────────────────────────────────────────── */

/* — Bannière par défaut (aucune image) : ambiance de marque vivante — */
.pp-banner:not(.has-img){
  background:
    radial-gradient(ellipse 72% 130% at 16% -14%, rgba(150,178,255,.16), transparent 60%),
    radial-gradient(ellipse 64% 130% at 88% -8%, rgba(150,178,255,.09), transparent 58%),
    linear-gradient(120deg,#0c0c0f,#161619 55%,#0a0a0c);
}
/* Voile motif GLG très discret sur la bannière par défaut */
.pp-banner:not(.has-img)::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:url('../assets/img/brand/glg-tile.png') repeat; background-size:320px;
  opacity:.05; mix-blend-mode:screen;
}
/* Liseré lumineux en bas de bannière (séparation nette, sous l'avatar) */
.pp-banner::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}

/* — Avatar : anneau premium + lueur froide (box-shadow → pas clippé) — */
.pp-avatar{
  border:none !important;
  box-shadow:
    0 0 0 3px #080808,
    0 0 0 4px rgba(255,255,255,.20),
    0 0 34px -2px rgba(150,178,255,.26),
    0 18px 50px -16px #000 !important;
  transition:box-shadow .35s var(--ease,ease), transform .35s var(--ease,ease);
}
.pp-avatar:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 3px #080808,
    0 0 0 4px rgba(255,255,255,.38),
    0 0 44px 0 rgba(150,178,255,.36),
    0 22px 60px -16px #000 !important;
}

/* — Stats : un cran plus vivantes — */
.pp-stat{ transition:background .25s ease; }
.pp-stat:hover{ background:#101014; }
.pp-stat b{ text-shadow:0 0 24px rgba(150,178,255,.12); }

/* — Titres de section : accent vertical "magazine" — */
.pp-sec-title{ position:relative; padding-left:16px; }
.pp-sec-title::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:.82em; border-radius:1px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.35));
}


/* ───────────────────────────────────────────────────────────────────────
   §38 · NOTIFICATIONS — cloche nav (badge) + panneau déroulant (feel launcher)
   La cloche n'apparaît que connecté (.is-auth, posé par refreshAccountUI).
─────────────────────────────────────────────────────────────────────── */
.nav-notif-btn{
  display:none;                 /* masquée tant que non connecté */
  position:relative;
  align-items:center; justify-content:center;
  width:34px; height:34px; margin-left:8px; flex-shrink:0;
  border:1px solid var(--border,rgba(255,255,255,.08));
  background:none; color:var(--greyt,#999); cursor:pointer;
  transition:color .2s, border-color .2s, background .2s, transform .2s var(--ease,ease);
}
.nav-notif-btn.is-auth{ display:flex; }
.nav-notif-btn:hover{ color:#fff; border-color:var(--bmd,rgba(255,255,255,.18)); background:var(--w06,rgba(255,255,255,.06)); }
.nav-notif-btn svg{ display:block; }
/* Badge : pastille en haut-droite, chiffre si non-lus */
.nav-notif-dot{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  display:none; align-items:center; justify-content:center;
  border-radius:9px; background:#e5564e; color:#fff; border:2px solid #0a0a0b;
  font-family:var(--f-mono,monospace); font-size:.5rem; font-weight:700; line-height:1;
  box-shadow:0 0 0 1px rgba(229,86,78,.5), 0 2px 8px rgba(229,86,78,.5);
}
.nav-notif-dot.on{ display:flex; animation:notifPop .35s var(--ease,ease) both; }
@keyframes notifPop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* Panneau déroulant */
.notif-panel{
  position:fixed; z-index:1200; width:min(360px,calc(100vw - 24px));
  background:rgba(12,12,14,.98); border:1px solid var(--bmd,rgba(255,255,255,.14));
  border-radius:12px; overflow:hidden;
  box-shadow:0 24px 70px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top right;
  pointer-events:none; transition:opacity .26s var(--ease,ease), transform .26s var(--ease,ease);
}
.notif-panel.open{ opacity:1; transform:none; pointer-events:all; }
.notif-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border,rgba(255,255,255,.08));
}
.notif-h-title{ font-family:var(--f-disp,sans-serif); font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.notif-markall{
  background:none; border:none; cursor:pointer; color:rgba(150,178,255,.85);
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase;
  transition:color .2s;
}
.notif-markall:hover{ color:#fff; }
.notif-list{ max-height:min(60vh,440px); overflow-y:auto; overscroll-behavior:contain; }
.notif-item{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left;
  padding:13px 16px; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.05);
  cursor:pointer; position:relative; transition:background .2s;
}
.notif-item:hover{ background:rgba(255,255,255,.04); }
.notif-item.is-unread{ background:rgba(120,150,230,.06); }
.notif-item.is-unread:hover{ background:rgba(120,150,230,.1); }
.notif-ico{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--border,rgba(255,255,255,.1)); color:#fff;
}
.notif-ico svg{ width:18px; height:18px; }
.notif-ico--friend{ color:#7fd3ff; }
.notif-ico--release{ color:#ffd36b; }
.notif-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.notif-title{ font-family:var(--f-body,sans-serif); font-size:.82rem; font-weight:600; color:#fff; }
.notif-text{ font-family:var(--f-body,sans-serif); font-size:.74rem; line-height:1.4; color:rgba(255,255,255,.6); }
.notif-time{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:2px; }
.notif-unread-dot{ flex-shrink:0; width:8px; height:8px; border-radius:50%; background:#7fb0ff; margin-top:6px; box-shadow:0 0 8px rgba(127,176,255,.7); }
.notif-empty{ padding:40px 20px; text-align:center; color:rgba(255,255,255,.4); font-family:var(--f-body,sans-serif); font-size:.84rem; }
@media(prefers-reduced-motion:reduce){
  .notif-panel{ transition:opacity .2s; transform:none; }
  .nav-notif-dot.on{ animation:none; }
}


/* ───────────────────────────────────────────────────────────────────────
   §39 · FICHE DÉTAIL — ornements vectoriels latéraux (identité par jeu)
   Cadre HUD/key-art tinté (couleur de l'œuvre) de chaque côté du hero.
   Décoratif (pointer-events:none), sous le texte (z-index 2 < body 3).
─────────────────────────────────────────────────────────────────────── */
.dp-hero-art{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1.2s ease .25s; }
.dp-hero.dp-entered .dp-hero-art{ opacity:.62; }
.dp-art{ position:absolute; top:0; height:100%; width:clamp(110px,17vw,250px); }
.dp-art--l{ left:0; }
.dp-art--r{ right:0; }
@media(max-width:760px){
  .dp-art{ width:74px; }
  .dp-hero.dp-entered .dp-hero-art{ opacity:.4; }
}
@media(prefers-reduced-motion:reduce){
  .dp-hero-art{ transition:none; opacity:.62; }
}


/* ───────────────────────────────────────────────────────────────────────
   §40 · CONTACT — hero centré (titre + sous-textes + bande de promesses)
─────────────────────────────────────────────────────────────────────── */
#page-contact .contact-hero-inner{ max-width:900px; margin-left:auto; margin-right:auto; text-align:center; }
#page-contact .contact-eye-lbl{ justify-content:center; }
#page-contact .contact-hero-desc{ margin-left:auto; margin-right:auto; }
#page-contact .contact-promises{ margin-left:auto; margin-right:auto; }


/* ───────────────────────────────────────────────────────────────────────
   §41 · FOOTER — bloc marque encadré (viseur) + centré (réf. image 3)
─────────────────────────────────────────────────────────────────────── */
.footer-brand{ text-align:center; }
.footer-brand-frame{
  position:relative; display:block; width:100%; max-width:340px; margin:0 auto;
  padding:clamp(26px,3vw,40px) clamp(24px,3vw,40px);
}
.fb-corner{ position:absolute; width:18px; height:18px; pointer-events:none; border:0 solid rgba(255,255,255,.34); }
.fb-tl{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.fb-tr{ top:0; right:0; border-top-width:1px; border-right-width:1px; }
.fb-bl{ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.fb-br{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.footer-brand .footer-logo{ display:flex; justify-content:center; margin-bottom:18px; }
.footer-brand .footer-logo img{ height:38px; width:auto; margin:0 auto; }
.footer-brand .footer-brand-desc{ margin:0 auto; max-width:34ch; line-height:1.7; }


/* ───────────────────────────────────────────────────────────────────────
   §42 · PROFIL PUBLIC (autre joueur) — modale style Steam + cartes cliquables
─────────────────────────────────────────────────────────────────────── */
.up-modal{ padding:0 !important; overflow:hidden; max-width:420px; text-align:center; }
.up-loading{ padding:60px 0; color:rgba(255,255,255,.5); font-family:var(--f-mono,monospace); letter-spacing:.2em; }
.up-banner{
  position:relative; height:120px; background:
    radial-gradient(ellipse 70% 130% at 20% -10%, rgba(150,178,255,.18), transparent 60%),
    radial-gradient(ellipse 60% 130% at 85% 0%, rgba(150,178,255,.10), transparent 58%),
    linear-gradient(120deg,#0c0c0f,#161619 55%,#0a0a0c);
  background-size:cover; background-position:center;
}
.up-banner-scrim{ position:absolute; inset:0; background:linear-gradient(0deg,#101012 2%,transparent 70%); }
.up-head{ position:relative; margin-top:-46px; padding:0 28px; display:flex; flex-direction:column; align-items:center; }
.up-avatar{
  width:88px; height:88px; border-radius:50%; overflow:hidden; position:relative; background:#161618;
  box-shadow:0 0 0 4px #101012, 0 0 0 5px rgba(255,255,255,.18), 0 0 28px -4px rgba(150,178,255,.4);
}
.up-avatar .ava-img{ width:100%; height:100%; object-fit:cover; }
.up-avatar .ava-init{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family:var(--f-disp,sans-serif); font-size:2rem; color:#fff; background:linear-gradient(135deg,#2a2a2e,#161618); }
.up-name{ font-family:var(--f-disp,sans-serif); font-size:1.5rem; letter-spacing:.02em; color:#fff; margin-top:12px; display:inline-flex; align-items:center; gap:.3em; }
.up-since{ font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-top:6px; }
.up-stats{ display:flex; justify-content:center; gap:0; margin:20px 28px 0; border:1px solid var(--border,rgba(255,255,255,.08)); }
.up-stat{ flex:1; padding:14px 10px; }
.up-stat + .up-stat{ border-left:1px solid var(--border,rgba(255,255,255,.08)); }
.up-stat b{ display:block; font-family:var(--f-disp,sans-serif); font-size:1.5rem; color:#fff; line-height:1; }
.up-stat span{ display:block; margin-top:6px; font-family:var(--f-mono,monospace); font-size:.46rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.up-bio{ padding:18px 28px 0; font-family:var(--f-body,sans-serif); font-size:.86rem; line-height:1.6; color:rgba(255,255,255,.72); }
.up-bio--empty{ color:rgba(255,255,255,.34); font-style:italic; }
.up-actions{ padding:22px 28px 28px; }
.up-action{ width:100%; }
.up-action--remove{ border-color:rgba(229,86,78,.5) !important; color:#ff8b84 !important; }
.up-action--remove:hover{ background:rgba(229,86,78,.14) !important; border-color:#e5564e !important; color:#fff !important; }
.up-pending{ display:inline-block; width:100%; padding:12px; border:1px dashed var(--bmd,rgba(255,255,255,.18)); color:rgba(255,255,255,.5); font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; }

/* Cartes / lignes désormais cliquables (reset bouton + curseur) */
.pp-friend-card{ cursor:pointer; background:none; border:1px solid var(--border,rgba(255,255,255,.07)); width:100%; font:inherit; color:inherit; text-align:left; transition:border-color .25s, background .25s, transform .25s var(--ease,ease); }
.pp-friend-card:hover{ border-color:rgba(150,178,255,.45); background:rgba(255,255,255,.03); transform:translateY(-2px); }
.pp-fr-open, .fr-res-open{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; background:none; border:none; cursor:pointer; font:inherit; color:inherit; text-align:left; padding:0; transition:opacity .2s; }
.pp-fr-open:hover, .fr-res-open:hover{ opacity:.75; }
.pp-fr-open .pp-fr-name, .fr-res-open .fr-res-name{ text-decoration:none; }


/* ───────────────────────────────────────────────────────────────────────
   §43 · PROFIL PUBLIC = PAGE complète (lecture seule, même look que le sien)
─────────────────────────────────────────────────────────────────────── */
.pp-loading{ padding:140px 0; text-align:center; color:rgba(255,255,255,.4); font-family:var(--f-mono,monospace); letter-spacing:.3em; }
/* Avatar non éditable (span au lieu de button) */
.pp-avatar--ro{ display:block; cursor:default; }
.pp-bio--empty{ color:rgba(255,255,255,.4); font-style:italic; }
/* Bloc d'actions du profil public : retour + action ami, empilés */
.pp-actions--public{ display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width:190px; }
.pp-actions--public .pp-back-btn{ white-space:nowrap; }
.pp-actions--public .up-action--remove{ border-color:rgba(229,86,78,.5) !important; color:#ff8b84 !important; }
.pp-actions--public .up-action--remove:hover{ background:rgba(229,86,78,.14) !important; border-color:#e5564e !important; color:#fff !important; }
.pp-actions--public .up-pending{ text-align:center; padding:11px; border:1px dashed var(--bmd,rgba(255,255,255,.18)); color:rgba(255,255,255,.5); font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; }
@media(max-width:760px){ .pp-actions--public{ width:100%; min-width:0; } }


/* ───────────────────────────────────────────────────────────────────────
   §44 · PARAMÈTRES — panneau d'options élargi (onglets + interrupteurs)
   + couleur d'accent perso (--user-accent) + classe réduction d'animations.
─────────────────────────────────────────────────────────────────────── */
.auth-box--settings{ max-width:480px; text-align:left; }
.set-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.set-head-ava{ flex-shrink:0; }
.set-head-id{ min-width:0; }
.set-head-id .auth-profile-name{ margin:0; font-size:1.2rem; display:inline-flex; align-items:center; gap:.3em; }
.set-head-id .auth-profile-meta{ margin:2px 0 0; }

/* Onglets */
.set-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); margin-bottom:20px; overflow-x:auto; scrollbar-width:none; }
.set-tabs::-webkit-scrollbar{ display:none; }
.set-tab{ flex:0 0 auto; background:none; border:none; cursor:pointer; padding:11px 13px; position:relative;
  font-family:var(--f-mono,monospace); font-size:.55rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.45); transition:color .2s; white-space:nowrap; }
.set-tab:hover{ color:rgba(255,255,255,.8); }
.set-tab.active{ color:#fff; }
.set-tab.active::after{ content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--user-accent,#fff); }

.set-panel{ animation:setPanelIn .28s var(--ease,ease) both; }
@keyframes setPanelIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.set-group-label{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:18px 0 12px; }
.set-group-label:first-child{ margin-top:0; }
.set-link-btn{ display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--bmd,rgba(255,255,255,.16)); color:rgba(255,255,255,.8); cursor:pointer; padding:9px 14px; border-radius:4px; margin:4px 0 8px; font-family:var(--f-mono,monospace); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; transition:border-color .2s, color .2s, background .2s; }
.set-link-btn:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.04); }
.set-w{ width:100%; }

/* Interrupteurs (toggles) */
.set-toggle-list{ display:flex; flex-direction:column; }
.set-toggle{ display:flex; align-items:center; gap:14px; padding:14px 2px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.05); }
.set-toggle:last-child{ border-bottom:none; }
.set-toggle-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.set-toggle-label{ font-family:var(--f-body,sans-serif); font-size:.86rem; color:#fff; }
.set-toggle-desc{ font-family:var(--f-body,sans-serif); font-size:.72rem; line-height:1.4; color:rgba(255,255,255,.5); }
.set-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.set-switch{ position:relative; flex-shrink:0; width:42px; height:24px; border-radius:13px; background:rgba(255,255,255,.12); border:1px solid var(--border,rgba(255,255,255,.12)); transition:background .25s; }
.set-switch::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .25s var(--ease,cubic-bezier(.2,.7,.2,1)); box-shadow:0 2px 6px rgba(0,0,0,.5); }
.set-toggle input:checked + .set-switch{ background:var(--user-accent,#3a7bd5); border-color:transparent; }
.set-toggle input:checked + .set-switch::after{ transform:translateX(18px); }
.set-toggle input:focus-visible + .set-switch{ outline:2px solid var(--user-accent,#fff); outline-offset:2px; }

/* Swatches couleur d'accent */
.set-accents{ display:flex; flex-wrap:wrap; gap:10px; }
.set-accent{ width:34px; height:34px; border-radius:50%; cursor:pointer; border:2px solid transparent; background:var(--sw,#888); transition:transform .2s, box-shadow .2s; position:relative; padding:0; }
.set-accent:hover{ transform:scale(1.1); }
.set-accent.on{ box-shadow:0 0 0 2px #0a0a0b, 0 0 0 4px var(--sw,#fff); }
.set-accent--none{ background:transparent; border:1px dashed rgba(255,255,255,.3); color:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.set-accent--none.on{ box-shadow:0 0 0 2px #0a0a0b, 0 0 0 4px rgba(255,255,255,.55); }

/* — Application de la couleur d'accent perso sur le profil — */
.pp-sec-title::before{ background:var(--user-accent, linear-gradient(180deg,#fff,rgba(255,255,255,.35))); }
.pp-avatar{ box-shadow:0 0 0 3px #080808, 0 0 0 4px rgba(255,255,255,.22), 0 0 36px -4px var(--user-accent, rgba(150,178,255,.28)), 0 18px 50px -16px #000 !important; }

/* — Classe "réduire les animations" (équiv. prefers-reduced-motion, déclenchée par l'option) — */
html.glg-reduce-motion *, html.glg-reduce-motion *::before, html.glg-reduce-motion *::after{
  animation-duration:.01ms !important; animation-iteration-count:1 !important;
  transition-duration:.01ms !important; scroll-behavior:auto !important;
}
html.glg-reduce-motion #glg-veil, html.glg-reduce-motion .gate-aura::before{ display:none !important; }

@media(max-width:480px){ .auth-box--settings{ max-width:none; } }


/* ───────────────────────────────────────────────────────────────────────
   §45 · PAGE PARAMÈTRES dédiée (#page-settings) — onglets en colonne, confort,
   + section "Mises à jour" (point d'entrée du launcher standalone).
─────────────────────────────────────────────────────────────────────── */
.settings-page{ max-width:1080px; margin:0 auto; padding:calc(var(--nav-h,80px) + clamp(24px,5vw,56px)) clamp(16px,5vw,72px) clamp(60px,8vw,110px); }
.settings-page-head{ display:flex; align-items:center; gap:18px; margin-bottom:clamp(26px,4vw,42px); padding-bottom:clamp(20px,3vw,30px); border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.settings-head-ava{ flex-shrink:0; width:84px; height:84px; }
.settings-head-id{ min-width:0; }
.settings-eyebrow{ font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.settings-page-title{ font-family:var(--f-disp,sans-serif); font-size:clamp(1.8rem,4vw,3rem); line-height:1; margin:6px 0; display:inline-flex; align-items:center; gap:.3em; color:#fff; }
.settings-page-sub{ font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.settings-layout{ display:grid; grid-template-columns:220px 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
/* Onglets en COLONNE dans la page (sidebar launcher) */
.settings-nav.set-tabs{ flex-direction:column; border-bottom:none; gap:3px; overflow:visible; position:sticky; top:calc(var(--nav-h,80px) + 20px); }
.settings-nav .set-tab{ text-align:left; padding:12px 14px; border-radius:5px; }
.settings-nav .set-tab:hover{ background:rgba(255,255,255,.03); }
.settings-nav .set-tab.active{ background:rgba(255,255,255,.05); }
.settings-nav .set-tab.active::after{ content:''; left:0; right:auto; top:9px; bottom:9px; width:2px; height:auto; background:var(--user-accent,#fff); }
.settings-content{ min-width:0; max-width:580px; }
/* Section Mises à jour */
.set-update-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.set-version{ font-family:var(--f-mono,monospace); font-size:.82rem; color:#fff; letter-spacing:.05em; }
.set-update-status{ margin-top:16px; font-family:var(--f-body,sans-serif); font-size:.92rem; color:#7fd39a; }
.set-update-note{ margin-top:16px; font-family:var(--f-body,sans-serif); font-size:.82rem; line-height:1.6; color:rgba(255,255,255,.5); border-left:2px solid var(--border,rgba(255,255,255,.12)); padding-left:14px; }
@media(max-width:760px){
  .settings-layout{ grid-template-columns:1fr; gap:18px; }
  .settings-nav.set-tabs{ flex-direction:row; position:static; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); overflow-x:auto; }
  .settings-nav .set-tab.active::after{ left:10px; right:10px; top:auto; bottom:-1px; width:auto; height:2px; }
  .settings-content{ max-width:none; }
  .settings-head-ava{ width:64px; height:64px; }
}


/* ───────────────────────────────────────────────────────────────────────
   §46 · LANGUAGE GATE — champ de drapeaux cinématique (canvas js/gate-field.js)
   Le canvas dérive derrière tout le contenu du gate (sous le wash, l'aura et
   les éléments). Dégrade proprement : si le JS ne tourne pas, rien ne s'affiche
   et le gate reste identique.
─────────────────────────────────────────────────────────────────────── */
#gate-field{
  position:absolute; inset:0;
  z-index:0;                 /* même niveau que le wash/aura ; le contenu (z-index:1) reste au-dessus */
  pointer-events:none;
  opacity:0; animation:gateFieldIn 1.4s ease .2s forwards;
}
@keyframes gateFieldIn{ to{ opacity:1; } }
/* quand le champ tourne, on allège la grille diagonale pour éviter la surcharge visuelle */
#lang-gate.gate--field::after{ opacity:.03 !important; }
@media(prefers-reduced-motion:reduce){
  #gate-field{ display:none; }
}
html.glg-reduce-motion #gate-field{ display:none; }


/* ───────────────────────────────────────────────────────────────────────
   §47 · TRANSITIONS v2 + GRAMMAIRE DE MICRO-INTERACTIONS + DA RESSERRÉE
   Tokens de timing (toute nouvelle interaction pioche ICI, rien d'autre) :
     press 100ms · hover 240-280ms · reveal 400-450ms
     ease unique : cubic-bezier(.16,1,.3,1)
   Température froide unique du site : --glow-cold (fini le duo bleu/violet).
─────────────────────────────────────────────────────────────────────── */
:root{ --glow-cold:150,178,255; }

/* — Veil : hairline lumineuse qui balaye pendant la dissolution — */
#glg-veil::before{
  content:''; position:absolute; left:0; right:0; top:38%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:scaleX(0); opacity:0; will-change:transform,opacity;
}
#glg-veil.revealing::before{ animation:veilSweep .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes veilSweep{
  0%{ transform:scaleX(0); opacity:0 }
  35%{ opacity:1 }
  100%{ transform:scaleX(1); opacity:0 }
}
html.glg-reduce-motion #glg-veil::before{ display:none; }

/* — Press physique : tout bouton répond sous le doigt — */
.btn:active{ transform:translateY(1px) scale(.985); transition-duration:.1s; }

/* — Coins viseur (le motif signature gate/footer, appliqué à l'interaction) :
     focus clavier sur tout .btn + survol des boutons ghost — */
.btn{ position:relative; }
.btn::before,.btn::after{
  content:''; position:absolute; width:7px; height:7px;
  opacity:0; transition:opacity .16s; pointer-events:none;
}
.btn::before{ top:-5px; left:-5px; border-top:1px solid rgba(255,255,255,.65); border-left:1px solid rgba(255,255,255,.65); }
.btn::after{ bottom:-5px; right:-5px; border-bottom:1px solid rgba(255,255,255,.65); border-right:1px solid rgba(255,255,255,.65); }
.btn:focus-visible::before,.btn:focus-visible::after,
.btn-ghost:hover::before,.btn-ghost:hover::after{ opacity:1; }
@media(hover:none){ .btn-ghost:hover::before,.btn-ghost:hover::after{ opacity:0; } }

/* — Cœur wishlist : pop tactile — */
.c-wish:active,.dp-buybox-wish:active{ transform:scale(.86); transition:transform .1s; }

/* — Index typographiques de section (asymétrie éditoriale voulue :
     numéro à gauche même quand le titre est centré) — */
[data-idx]{ position:relative; }
[data-idx]::before{
  content:attr(data-idx); display:block;
  font-family:var(--f-mono,monospace); font-size:.55rem; font-weight:400;
  letter-spacing:.34em; color:rgba(255,255,255,.32);
  margin-bottom:14px; text-align:left; text-indent:2px; white-space:nowrap;
}

/* — Grain pellicule GLOBAL (même data-URI que le gate) : le liant qui tue
     le rendu "plastique". Texture statique = coût GPU nul. — */
body::after{
  content:''; position:fixed; inset:0; z-index:10000; pointer-events:none;
  opacity:.017;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}


/* ───────────────────────────────────────────────────────────────────────
   §48 · CONTACT — refonte "poste de commandement"
   Le formulaire MÈNE (colonne large), le rail d'infos accompagne.
   Hero resserré, carte e-mail technique, grammaire §47 appliquée.
   Tous les IDs i18n (cp-*, ci-*, lbl-*, cd-promise…) sont inchangés.
─────────────────────────────────────────────────────────────────────── */
/* — Hero compact : on garde la présence, on rend l'écran au contenu — */
#page-contact .contact-hero{
  padding:clamp(52px,8vh,84px) clamp(16px,5vw,72px) clamp(32px,5vh,52px) !important;
}
#page-contact .contact-hero-h{
  font-size:clamp(3.2rem,9vw,7.4rem) !important;
  margin-bottom:clamp(12px,2vh,20px) !important;
}
#page-contact .contact-hero-desc{ margin-bottom:clamp(22px,3.5vh,38px) !important; }

/* — Hiérarchie : le formulaire est l'action — */
@media(min-width:961px){
  .contact-layout{ grid-template-columns:1.22fr .78fr !important; }
}

/* — Panneau formulaire : coins viseur signature — */
.contact-form-col{ position:relative; }
.contact-form-col::before,.contact-form-col::after{
  content:''; position:absolute; width:14px; height:14px; pointer-events:none;
  opacity:.55;
}
.contact-form-col::before{ top:10px; left:10px; border-top:1px solid rgba(255,255,255,.6); border-left:1px solid rgba(255,255,255,.6); }
.contact-form-col::after{ bottom:10px; right:10px; border-bottom:1px solid rgba(255,255,255,.6); border-right:1px solid rgba(255,255,255,.6); }

/* — Inputs : hairline qui s'allume au focus (grammaire §47) — */
.form-input,.form-textarea,.form-select{ transition:border-color .24s, box-shadow .24s; }
.form-input:focus,.form-textarea:focus,.form-select:focus{
  box-shadow:0 1px 0 0 rgba(255,255,255,.5);
}

/* — Carte contact direct : plaque technique, e-mail en mono — */
.contact-direct-card{
  border-radius:0 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
  padding:26px 26px 24px !important;
}
.c-main-email{
  font-family:var(--f-mono,monospace) !important; font-weight:400 !important;
  font-size:clamp(.78rem,1.6vw,.94rem) !important; letter-spacing:.05em !important;
  display:inline-block !important; padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .24s, color .24s;
}
.c-main-email:hover{ border-bottom-color:rgba(255,255,255,.9); color:#fff !important; }

/* — Topics : réaction douce au survol — */
.c-info-block{ transition:background .24s; }
.c-info-block:hover{ background:rgba(255,255,255,.025); }

/* — Réseaux : cibles généreuses, hairline, lift — */
#page-contact .socials-row{ gap:10px; }
#page-contact .soc-btn{
  width:44px; height:44px;
  border:1px solid var(--border,rgba(255,255,255,.1));
  transition:transform .24s, border-color .24s, background .24s;
}
#page-contact .soc-btn:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.03);
}


/* ───────────────────────────────────────────────────────────────────────
   §49 · ÉVALUATIONS DES JOUEURS (fiches) — agrégat + histogramme hairlines
   + formulaire étoiles. Monochrome strict (étoiles blanches, jamais jaunes),
   dates réelles, densité d'information — pas de carte grise générique.
─────────────────────────────────────────────────────────────────────── */
.dp-reviews{ margin-top:clamp(34px,5vw,54px); }
.dp-rev-loading{ font-family:var(--f-mono,monospace); color:rgba(255,255,255,.3); letter-spacing:.4em; padding:18px 0; }
.dp-rev-note{ color:rgba(255,255,255,.5); font-size:.85rem; line-height:1.6; margin:14px 0 0; }

/* — Étoiles — */
.rv-stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.rv-star{ display:inline-flex; width:13px; height:13px; color:rgba(255,255,255,.18); }
.rv-star.on{ color:#fff; }
.rv-star svg{ width:100%; height:100%; display:block; }

/* — Agrégat + histogramme — */
.rv-agg{
  display:flex; align-items:center; gap:clamp(20px,4vw,44px); flex-wrap:wrap;
  padding:18px 0 16px; border-bottom:1px solid rgba(255,255,255,.07);
}
.rv-agg-main{ display:flex; align-items:center; gap:12px; }
.rv-agg-avg{
  font-family:var(--f-disp); font-size:clamp(2rem,4vw,2.8rem); line-height:1;
  font-variant-numeric:tabular-nums;
}
.rv-agg-count{
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.rv-histo{ flex:1; min-width:180px; max-width:340px; display:flex; flex-direction:column; gap:4px; }
.rv-h-row{ display:flex; align-items:center; gap:8px; }
.rv-h-n,.rv-h-v{
  font-family:var(--f-mono,monospace); font-size:.5rem; color:rgba(255,255,255,.4);
  width:14px; text-align:center; font-variant-numeric:tabular-nums;
}
.rv-h-v{ width:22px; text-align:left; }
.rv-h-bar{ flex:1; height:3px; background:rgba(255,255,255,.06); position:relative; overflow:hidden; }
.rv-h-bar > span{ position:absolute; inset:0 auto 0 0; background:rgba(255,255,255,.55); }

/* — Preuve sociale avant sortie — */
.rv-waiting{
  margin:16px 0 0; font-family:var(--f-mono,monospace); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.rv-waiting::before{ content:'▸ '; color:var(--dp-tint,#fff); }

/* — Formulaire — */
.rv-form{ margin-top:18px; padding:18px 0 4px; border-bottom:1px solid rgba(255,255,255,.07); }
.rv-form-title{
  font-family:var(--f-mono,monospace); font-size:.55rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:12px;
}
.rv-form-stars{ display:flex; gap:4px; margin-bottom:12px; }
.rv-star-btn{
  width:26px; height:26px; padding:3px; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.2); transition:color .16s, transform .1s;
}
.rv-star-btn svg{ width:100%; height:100%; display:block; }
.rv-star-btn:hover{ color:rgba(255,255,255,.65); }
.rv-star-btn.on{ color:#fff; }
.rv-star-btn:active{ transform:scale(.86); }
.rv-form-body{
  width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
  color:var(--white,#fff); font-family:var(--f-body,sans-serif); font-size:.88rem; line-height:1.6;
  padding:12px 14px; resize:vertical; min-height:88px;
  transition:border-color .24s, box-shadow .24s;
}
.rv-form-body:focus{ outline:none; border-color:rgba(255,255,255,.45); box-shadow:0 1px 0 0 rgba(255,255,255,.5); }
.rv-form-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-bottom:14px; }
.rv-submit{ font-size:.55rem !important; padding:11px 22px !important; }
.rv-del{
  background:none; border:none; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,110,110,.75); transition:color .2s;
}
.rv-del:hover{ color:rgba(255,110,110,1); }
.rv-err{ margin:0 0 12px; font-size:.72rem; color:rgba(255,120,120,.9); }
.rv-signin-btn{
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,.75);
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.3); padding:0 0 3px; transition:color .2s, border-color .2s;
}
.rv-signin-btn:hover{ color:#fff; border-color:#fff; }

/* — Liste — */
.rv-list{ display:flex; flex-direction:column; }
.rv-item{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.rv-item--own{ background:linear-gradient(90deg, rgba(255,255,255,.02), transparent 70%); }
.rv-ava{
  position:relative; width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:#17171a; border:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rv-ava .ava-img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; }
.rv-ava .ava-init{ font-family:var(--f-mono,monospace); font-size:.7rem; color:rgba(255,255,255,.6); }
.rv-main{ flex:1; min-width:0; }
.rv-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rv-name{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.85); transition:color .2s;
}
.rv-name:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.rv-date{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.12em; color:rgba(255,255,255,.35); }
.rv-report{
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.46rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.28); transition:color .2s;
}
.rv-report:hover{ color:rgba(255,150,150,.8); }
.rv-report:disabled{ cursor:default; color:rgba(255,255,255,.35); }
.rv-body{
  margin:8px 0 0; font-size:.86rem; line-height:1.65; color:rgba(255,255,255,.72);
  white-space:pre-line; word-break:break-word;
}
@media(max-width:640px){
  .rv-agg{ gap:14px; }
  .rv-histo{ max-width:none; }
}


/* ───────────────────────────────────────────────────────────────────────
   §50 · PROFIL v2 — disposition launcher : colonne principale + rail,
   niveau dans l'en-tête (geste PSN), évaluations, activité récente, rareté.
─────────────────────────────────────────────────────────────────────── */
/* — Grille : contenu vivant à gauche, infos froides à droite (plus sombres) — */
.pp-cols{
  display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(22px,3.5vw,40px); align-items:start;
}
.pp-rail .pp-section{ margin-top:clamp(18px,2.6vw,26px); }
.pp-rail .pp-sec-title{ font-size:clamp(.98rem,1.8vw,1.15rem); }
.pp-rail .pp-wish-grid{ grid-template-columns:repeat(2,1fr); }
@media(max-width:1023px){
  .pp-cols{ grid-template-columns:1fr; }
  .pp-rail .pp-wish-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}

/* — Index typographique dans les en-têtes de section (inline, pas en bloc) — */
.pp-sec-head [data-idx]::before{
  display:inline-block; margin:0 10px 0 0; text-align:inherit; text-indent:0;
  vertical-align:middle; transform:translateY(-1px);
}

/* — Chip de niveau dans l'identité — */
.pp-level-chip{
  display:inline-flex; align-items:center; gap:8px;
  margin:8px 0 2px; padding:5px 12px 5px 9px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
  font-family:var(--f-mono,monospace); font-size:.58rem; letter-spacing:.18em;
  color:rgba(255,255,255,.85); text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.pp-level-chip:empty{ display:none; }
.pp-lc-cup{ display:inline-flex; width:13px; height:13px; color:#9bdcff; }
.pp-lc-cup svg{ width:100%; height:100%; }
.pp-lc-bar{
  width:64px; height:3px; background:rgba(255,255,255,.1); overflow:hidden; position:relative;
}
.pp-lc-bar i{ position:absolute; inset:0 auto 0 0; background:rgba(255,255,255,.7); }

/* — Évaluations du profil : lignes éditoriale cover + étoiles + extrait — */
.pp-reviews-body{ display:flex; flex-direction:column; }
.pp-rev-row{
  display:flex; gap:14px; align-items:flex-start; width:100%; text-align:inherit;
  padding:14px 2px; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.055);
  cursor:pointer; transition:background .24s;
}
.pp-rev-row:hover{ background:rgba(255,255,255,.02); }
.pp-rev-cover{
  width:56px; aspect-ratio:3/4; flex-shrink:0; overflow:hidden; position:relative;
  border:1px solid rgba(255,255,255,.08); border-top:2px solid var(--tint,#fff);
}
.pp-rev-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-rev-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.pp-rev-title{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--f-mono,monospace); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
}
.pp-rev-excerpt{
  font-size:.82rem; line-height:1.55; color:rgba(255,255,255,.62);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word; white-space:pre-line;
}
.pp-rev-date{ font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.14em; color:rgba(255,255,255,.35); }

/* — Activité récente — */
.pp-activity-body{ display:flex; flex-direction:column; }
.pp-act-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 2px; border-bottom:1px solid rgba(255,255,255,.05);
}
.pp-act-ico{
  display:inline-flex; width:18px; height:18px; flex-shrink:0;
  color:var(--tc, rgba(255,255,255,.55));
}
.pp-act-ico svg{ width:100%; height:100%; }
.pp-act-text{ flex:1; min-width:0; font-size:.82rem; color:rgba(255,255,255,.8); line-height:1.45; }
.pp-act-text b{ font-weight:600; color:#fff; }
.pp-act-dim{ color:rgba(255,255,255,.45); }
.pp-act-time{
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.12em;
  color:rgba(255,255,255,.35); white-space:nowrap;
}

/* — Rareté dans la liste de trophées (petites capitales, alignée droite) — */
.tl-rar{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  min-width:64px; text-align:right; flex-shrink:0;
  font-family:var(--f-mono,monospace); text-transform:uppercase;
}
.tl-rar b{ font-size:.62rem; letter-spacing:.08em; color:rgba(255,255,255,.85); font-weight:500; font-variant-numeric:tabular-nums; }
.tl-rar span{ font-size:.42rem; letter-spacing:.22em; color:rgba(255,255,255,.4); }
.tl-rar:empty{ display:none; }
@media(max-width:560px){ .tl-rar{ display:none; } }


/* ───────────────────────────────────────────────────────────────────────
   §51 · PRÉSENCE EN LIGNE + INVITATION
   La pastille verte désaturée est la SEULE micro-couleur (comme Steam).
─────────────────────────────────────────────────────────────────────── */
.pp-friend-dot{
  position:absolute; right:2px; bottom:2px; width:8px; height:8px; border-radius:50%;
  background:#3a3a3e; border:2px solid #101012;
  transition:background .3s, box-shadow .3s;
}
.pp-friend-dot.is-on{
  background:#7fd39a;
  box-shadow:0 0 7px rgba(127,211,154,.55);
}
.pp-fr-online{
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.18em;
  text-transform:uppercase; color:#7fd39a;
}
.pp-fr-online:empty{ display:none; }
.pp-badge--online{ color:#7fd39a !important; border-color:rgba(127,211,154,.35) !important; }
.pp-badge--online::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#7fd39a; margin-right:6px; vertical-align:middle;
  box-shadow:0 0 6px rgba(127,211,154,.5);
}
.pp-invite-btn{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  background:none; border:1px dashed rgba(255,255,255,.18); padding:8px 14px;
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.55); cursor:pointer;
  transition:color .24s, border-color .24s;
}
.pp-invite-btn:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.pp-invite-btn:disabled{ color:#7fd39a; border-color:rgba(127,211,154,.4); cursor:default; }


/* ───────────────────────────────────────────────────────────────────────
   §52 · FICHES v2 — sticky bar enrichie (mini-cover + wishlist),
   dock d'achat mobile en bas d'écran, badges de fonctionnalités buybox.
─────────────────────────────────────────────────────────────────────── */
/* — Sticky v2 : mini-cover + cœur — */
.dp-sticky--v2 .dp-sticky-inner{ display:flex; align-items:center; gap:14px; }
.dp-sticky-cover{
  width:40px; height:26px; flex-shrink:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.dp-sticky-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.dp-sticky-wish{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-left:auto; flex-shrink:0;
  background:none; border:1px solid rgba(255,255,255,.14); cursor:pointer;
  color:rgba(255,255,255,.45); transition:color .2s, border-color .2s, transform .1s;
}
.dp-sticky-wish svg{ width:14px; height:14px; }
.dp-sticky-wish:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.dp-sticky-wish.on{ color:var(--dp-tint,#fff); border-color:rgba(255,255,255,.3); }
.dp-sticky-wish.on svg path{ fill:currentColor; }
.dp-sticky-wish:active{ transform:scale(.86); }
.dp-sticky--v2 .dp-sticky-price{ margin-left:0; }

/* — Mobile ≤760px : la sticky devient un DOCK bas plein écran (pattern
     Steam/Epic mobile), safe-area respectée, masqué en fin de page. — */
@media(max-width:760px){
  .dp-sticky--v2{
    display:block;   /* main.css masque la sticky mobile - le dock la reactive */
    top:auto !important; bottom:0; transform:translateY(100%);
    padding-bottom:env(safe-area-inset-bottom, 0);
    border-top:1px solid rgba(255,255,255,.12); border-bottom:none;
  }
  .dp-sticky--v2.active{ transform:translateY(0); }
  .dp-sticky--v2 .dp-sticky-cat, .dp-sticky--v2 .dp-sticky-sep{ display:none; }
  .dp-sticky--v2 .dp-sticky-title{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1;
  }
  .dp-sticky--v2.dp-sticky--end{ transform:translateY(100%); }
}

/* — Badges de fonctionnalités (buybox) — */
.dp-caps{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.07);
}
.dp-cap{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px 6px 8px; border:1px solid rgba(255,255,255,.1);
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.65);
}
.dp-cap-ico{ display:inline-flex; width:15px; height:15px; color:rgba(255,255,255,.5); }
.dp-cap-ico svg{ width:100%; height:100%; }

/* ════════════════════════════════════════════════════════════════════════
   §53 · PRIX & PROMOTIONS — badge −XX%, ancien prix barré, prix courant.
   Fragment généré par priceHTML() (app.js). Le chip blanc plein est le
   seul aplat clair du système monochrome = signal "offre" maximal.
════════════════════════════════════════════════════════════════════════ */
.glg-price{
  display:inline-flex; align-items:baseline; gap:.5em;
  white-space:nowrap; vertical-align:baseline;
}
.glg-price-pct{
  align-self:center;
  font-family:var(--f-mono,monospace); font-weight:500;
  font-size:.68em; letter-spacing:.06em; line-height:1;
  color:#000; background:#fff;
  padding:.28em .45em .24em; border-radius:2px;
  transform:translateY(-.08em);
}
.glg-price-old{
  font-size:.78em; text-decoration:line-through;
  color:rgba(255,255,255,.38); text-decoration-color:rgba(255,255,255,.3);
}
.glg-price-now{ color:inherit; }
.glg-price--promo .glg-price-now{ color:#fff; }
/* Compact (cartes, sticky bar, wishlist, similaires) */
.glg-price--sm{ gap:.4em; }
.glg-price--sm .glg-price-pct{ font-size:.62em; padding:.24em .38em .2em; }
.glg-price--sm .glg-price-old{ font-size:.74em; }
/* Note « Offre de précommande jusqu'au … » sous le prix de la buybox */
.dp-promo-note{
  margin:-6px 0 14px;
  font-family:var(--f-mono,monospace); font-size:.55rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.dp-promo-note::before{ content:'◆ '; color:rgba(255,255,255,.35); }

/* ════════════════════════════════════════════════════════════════════════
   §54 · JOURNAL DES MISES À JOUR (fiches) — liste magazine : rail date+tag
   à gauche, titre/corps à droite, hairlines, accent = teinte de l'œuvre.
════════════════════════════════════════════════════════════════════════ */
.dp-news{ margin:64px 0 8px; }
.dp-news-list{ display:flex; flex-direction:column; }
.dp-news-item{
  display:grid; grid-template-columns:168px 1fr; gap:8px 28px;
  padding:22px 0 24px; border-top:1px solid rgba(255,255,255,.08);
  position:relative;
}
.dp-news-item:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }
/* Trait d'accent teinté qui s'étire au survol (signature magazine) */
.dp-news-item::before{
  content:''; position:absolute; top:-1px; left:0; height:1px; width:0;
  background:var(--dp-tint,#fff); opacity:.85;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.dp-news-item:hover::before{ width:56px; }
.dp-news-side{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding-top:3px; }
.dp-news-date{
  font-family:var(--f-mono,monospace); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.dp-news-tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono,monospace); font-size:.5rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.14); border-radius:2px;
  padding:.4em .65em .34em;
}
.dp-news-tag::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--dp-tint,#fff); opacity:.9;
}
.dp-news-title{
  margin:0 0 8px; font-family:var(--f-head,inherit);
  font-size:1.06rem; font-weight:700; letter-spacing:.01em;
  line-height:1.3; color:#fff;
}
.dp-news-body{
  margin:0; font-size:.86rem; line-height:1.7; color:rgba(255,255,255,.62);
  max-width:60ch;
}
@media (max-width:760px){
  .dp-news{ margin-top:48px; }
  .dp-news-item{ grid-template-columns:1fr; gap:10px; }
  .dp-news-side{ flex-direction:row; align-items:center; gap:12px; }
}
/* RTL : le trait d'accent part de la droite */
[dir="rtl"] .dp-news-item::before{ left:auto; right:0; }

/* ════════════════════════════════════════════════════════════════════════
   §55 · BOUTIQUE v1 — offres du moment (cartes horizontales teintées),
   sections, catalogue (réutilise .works-grid/.c-card), teasers existants.
════════════════════════════════════════════════════════════════════════ */
.shop-sec{ max-width:1200px; margin:0 auto; padding:56px 5vw 8px; }
.shop-sec--soon{ padding-bottom:72px; }
.shop-sec-head{ margin-bottom:26px; }
.shop-sec-sub{
  margin:8px 0 0; font-size:.82rem; line-height:1.7;
  color:rgba(255,255,255,.45); max-width:52ch;
}
/* ── Cartes d'offres ── */
.shop-deals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; max-width:1100px; }
.shop-deal{
  position:relative; display:grid; grid-template-columns:150px 1fr; gap:20px;
  padding:18px; cursor:pointer; overflow:hidden;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09); border-radius:6px;
  transition:transform .45s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s, box-shadow .45s;
}
.shop-deal:hover, .shop-deal:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(var(--tint-rgb,255,255,255),.45);
  background:rgba(255,255,255,.04);
  box-shadow:0 18px 44px -18px rgba(var(--tint-rgb,255,255,255),.28);
}
.shop-deal-cover{ border-radius:4px; overflow:hidden; aspect-ratio:3/4; background:#101010; }
.shop-deal-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.shop-deal:hover .shop-deal-cover img{ transform:scale(1.05); }
.shop-deal-info{ display:flex; flex-direction:column; justify-content:center; min-width:0; padding-right:34px; }
.shop-deal-type{
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:8px;
}
.shop-deal-title{
  margin:0 0 6px; font-family:var(--f-head,inherit); font-weight:800;
  font-size:1.18rem; letter-spacing:.01em; line-height:1.15; color:#fff;
}
.shop-deal-tagline{
  margin:0 0 14px; font-size:.78rem; line-height:1.6;
  color:rgba(255,255,255,.5);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.shop-deal-price{ font-size:1.18rem; font-weight:700; margin-bottom:6px; }
.shop-deal .dp-promo-note{ margin:0 0 12px; }
.shop-deal-cta{
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
  transition:color .3s, letter-spacing .3s;
}
.shop-deal:hover .shop-deal-cta{ color:#fff; letter-spacing:.26em; }
.shop-deal .c-wish{ position:absolute; top:14px; right:14px; }
@media (max-width:560px){
  .shop-deal{ grid-template-columns:110px 1fr; gap:14px; padding:14px; }
  .shop-deal-title{ font-size:1rem; }
  .shop-deal-info{ padding-right:26px; }
}
/* RTL */
[dir="rtl"] .shop-deal-info{ padding-right:0; padding-left:34px; }
[dir="rtl"] .shop-deal .c-wish{ right:auto; left:14px; }

/* ════════════════════════════════════════════════════════════════════════
   §56 · PERF — animations en pause hors écran. La classe est posée/retirée
   par initAnimIdleObserver() (app.js) : seul ce qui est visible anime.
════════════════════════════════════════════════════════════════════════ */
.glg-anim-idle,
.glg-anim-idle *,
.glg-anim-idle::before,
.glg-anim-idle::after,
.glg-anim-idle *::before,
.glg-anim-idle *::after{
  animation-play-state:paused !important;
}

/* ════════════════════════════════════════════════════════════════════════
   §57 · ROADMAP v2 (accueil) — mini-cover dans les cartes + millésime
   fantôme teinté dans la colonne libre en face de chaque carte (comble le
   vide de la timeline alternée). + fix citation studio aux largeurs moyennes.
════════════════════════════════════════════════════════════════════════ */
.rm-card-top{ display:flex; align-items:center; gap:12px; }
.rm-node--l .rm-card-top{ flex-direction:row-reverse; }
.rm-cover{
  width:52px; height:69px; object-fit:cover; border-radius:4px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.85);
  transition:transform .42s var(--ease,cubic-bezier(.16,1,.3,1)), border-color .42s;
}
.rm-node:hover .rm-cover{ transform:scale(1.06); border-color:rgba(var(--tint-rgb,255,255,255),.5); }
.rm-card-meta{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.rm-node--l .rm-card-meta{ align-items:flex-end; }
/* Millésime fantôme — texte creux teinté, HUD discret */
.rm-ghost{
  grid-row:1; pointer-events:none; user-select:none; align-self:center;
  font-family:var(--f-disp,sans-serif); font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1; letter-spacing:.05em;
  color:rgba(var(--tint-rgb,255,255,255),.09);
  transition:color .45s;
}
@supports (-webkit-text-stroke:1px #fff){
  .rm-ghost{ color:transparent; -webkit-text-stroke:1px rgba(var(--tint-rgb,255,255,255),.15); }
}
.rm-node--l .rm-ghost{ grid-column:3; justify-self:start; margin-left:clamp(12px,3vw,36px); }
.rm-node--r .rm-ghost{ grid-column:1; justify-self:end;  margin-right:clamp(12px,3vw,36px); }
.rm-node:hover .rm-ghost{ color:rgba(var(--tint-rgb,255,255,255),.16); }
@supports (-webkit-text-stroke:1px #fff){
  .rm-node:hover .rm-ghost{ color:rgba(var(--tint-rgb,255,255,255),.06); -webkit-text-stroke-color:rgba(var(--tint-rgb,255,255,255),.32); }
}
@media(max-width:820px){ .rm-ghost{ display:none; } }
/* Citation studio : les <br> éditoriaux ne valent qu'en pleine largeur —
   aux largeurs moyennes ils se combinaient au retour naturel (lignes hachées). */
@media(max-width:1080px){ .studio-quote br{ display:none; } }

/* ════════════════════════════════════════════════════════════════════════
   §58 · BOUTIQUE MERCH + rail d'offres sur NOS ŒUVRES.
   La Boutique est dédiée au merchandising (décision studio) ; les jeux et
   films s'achètent dans Nos Œuvres, où vit désormais "Offres du moment".
════════════════════════════════════════════════════════════════════════ */
/* Grille des catégories merch */
.merch-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px; max-width:1000px;
}
.merch-cat{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; min-height:190px; padding:26px 18px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.09); border-radius:6px;
  transition:transform .45s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s;
}
.merch-cat:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.035);
}
.merch-cat-ico{ width:38px; height:38px; color:rgba(255,255,255,.82); }
.merch-cat-ico svg{ width:100%; height:100%; }
.merch-cat:hover .merch-cat-ico{ color:#fff; }
.merch-cat-name{
  font-family:var(--f-head,inherit); font-weight:700; font-size:.98rem;
  letter-spacing:.03em; color:rgba(255,255,255,.9);
}
.merch-cat-soon{
  position:absolute; top:12px; right:12px;
  font-family:var(--f-mono,monospace); font-size:.46rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.13); border-radius:2px; padding:.4em .6em .32em;
}
[dir="rtl"] .merch-cat-soon{ right:auto; left:12px; }
/* Bandeau de renvoi vers Nos Œuvres */
.shop-sec--redirect{ padding-bottom:80px; }
.shop-redirect{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:wrap; max-width:1000px;
  padding:clamp(24px,3.5vw,40px) clamp(22px,3.5vw,44px);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.1); border-radius:8px;
}
.shop-redirect-title{
  margin:0 0 8px; font-family:var(--f-head,inherit); font-weight:800;
  font-size:clamp(1.15rem,2.4vw,1.6rem); line-height:1.2; color:#fff;
}
/* Rail d'offres sur la page Nos Œuvres */
.works-deals{ padding-top:28px; padding-bottom:20px; }
.works-deals .shop-deals{ margin:0 auto; }

/* ════════════════════════════════════════════════════════════════════════
   §59 · 2FA TOTP (Steam Guard maison) — bloc Options→Compte + étape login.
════════════════════════════════════════════════════════════════════════ */
.set-mfa{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.set-mfa-desc{ margin:0; font-size:.78rem; line-height:1.65; color:rgba(255,255,255,.55); max-width:52ch; }
.set-mfa-step{ margin:0; font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.set-mfa-step--sub{ margin-top:-4px; }
.set-mfa-qr{
  width:172px; height:172px; padding:10px; background:#fff; border-radius:6px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
}
.set-mfa-qr svg{ width:100%; height:100%; display:block; }
.set-mfa-secret{
  align-self:flex-start; font-family:var(--f-mono,monospace); font-size:.68rem;
  letter-spacing:.14em; color:rgba(255,255,255,.85); user-select:all;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:3px; padding:7px 11px; word-break:break-all;
}
.set-mfa-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.set-mfa-input, .auth-totp-input{
  width:132px; text-align:center; font-family:var(--f-mono,monospace);
  font-size:1.06rem; letter-spacing:.34em;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16);
  border-radius:4px; color:#fff; padding:10px 4px 9px; outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.set-mfa-input:focus, .auth-totp-input:focus{ border-color:rgba(255,255,255,.45); box-shadow:0 0 0 3px rgba(255,255,255,.06); }
.set-mfa-active{
  display:flex; align-items:center; gap:9px; margin:0;
  font-size:.8rem; color:rgba(255,255,255,.85);
}
.set-mfa-dot{ width:8px; height:8px; border-radius:50%; background:#4cc38a; box-shadow:0 0 10px rgba(76,195,138,.7); }
/* Étape TOTP de la modale de connexion */
.auth-totp{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:6px 0 2px; }
.auth-totp-ico{ color:rgba(255,255,255,.8); }
.auth-totp-title{ margin:0; font-family:var(--f-head,inherit); font-weight:800; font-size:1.06rem; color:#fff; }
.auth-totp-sub{ margin:0 0 4px; font-size:.78rem; line-height:1.6; color:rgba(255,255,255,.55); max-width:34ch; }
.auth-totp .auth-totp-input{ width:150px; font-size:1.2rem; }

/* ════════════════════════════════════════════════════════════════════════
   §60 · GALERIE DE CAPTURES (profil) — grille 16:9, suppression au survol,
   visionneuse plein écran #glg-shot-view.
════════════════════════════════════════════════════════════════════════ */
.pp-shots-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px;
}
.pp-shot{
  position:relative; margin:0; aspect-ratio:16/9; overflow:hidden;
  border-radius:5px; border:1px solid rgba(255,255,255,.09); background:#0c0c0d;
  transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.pp-shot:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.3); }
.pp-shot img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.pp-shot:hover img{ transform:scale(1.05); }
.pp-shot-del{
  position:absolute; top:7px; right:7px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:4px; cursor:pointer;
  color:rgba(255,255,255,.85); background:rgba(8,8,8,.72);
  border:1px solid rgba(255,255,255,.16);
  opacity:0; transition:opacity .25s, background .25s, border-color .25s;
}
.pp-shot:hover .pp-shot-del, .pp-shot-del:focus-visible{ opacity:1; }
.pp-shot-del:hover{ background:rgba(229,86,78,.85); border-color:rgba(229,86,78,.9); color:#fff; }
[dir="rtl"] .pp-shot-del{ right:auto; left:7px; }
@media (hover:none){ .pp-shot-del{ opacity:1; } } /* tactile : toujours visible */
/* Visionneuse plein écran */
#glg-shot-view{
  position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,4vw,48px); background:rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .3s var(--ease,ease);
}
#glg-shot-view.open{ opacity:1; }
#glg-shot-view img{
  max-width:100%; max-height:100%; border-radius:6px;
  box-shadow:0 30px 90px -30px rgba(0,0,0,1);
  transform:scale(.97); transition:transform .35s cubic-bezier(.22,1,.36,1);
}
#glg-shot-view.open img{ transform:scale(1); }
.shot-view-close{
  position:absolute; top:18px; right:18px; width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
  transition:background .25s, transform .25s;
}
.shot-view-close:hover{ background:rgba(255,255,255,.16); transform:rotate(90deg); }
[dir="rtl"] .shot-view-close{ right:auto; left:18px; }

/* ════════════════════════════════════════════════════════════════════════
   §61 · JEUX RÉCENTS (profil, style Steam/PSN) — lignes cliquables :
   mini-cover, titre, temps de jeu cumulé, dernière session, chevron.
════════════════════════════════════════════════════════════════════════ */
.pp-recent-list{ display:flex; flex-direction:column; gap:10px; }
.pp-recent{
  display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:16px;
  width:100%; padding:12px 16px 12px 12px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09); border-radius:6px; color:inherit;
  transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s, box-shadow .4s;
}
.pp-recent:hover, .pp-recent:focus-visible{
  transform:translateX(4px);
  border-color:rgba(var(--tint-rgb,255,255,255),.4);
  background:rgba(255,255,255,.04);
  box-shadow:0 14px 34px -18px rgba(var(--tint-rgb,255,255,255),.3);
}
[dir="rtl"] .pp-recent{ text-align:right; }
[dir="rtl"] .pp-recent:hover{ transform:translateX(-4px); }
.pp-recent-cover{ width:52px; height:68px; border-radius:4px; overflow:hidden; background:#101012; }
.pp-recent-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-recent-info{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.pp-recent-name{
  font-family:var(--f-head,inherit); font-weight:700; font-size:.98rem;
  letter-spacing:.02em; color:#fff; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pp-recent-meta{
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.pp-recent-arr{ color:rgba(255,255,255,.35); transition:color .3s, transform .3s; }
.pp-recent:hover .pp-recent-arr{ color:#fff; transform:translateX(3px); }
[dir="rtl"] .pp-recent-arr{ transform:rotate(180deg); }
[dir="rtl"] .pp-recent:hover .pp-recent-arr{ transform:rotate(180deg) translateX(3px); }
@media (max-width:560px){
  .pp-recent{ grid-template-columns:44px 1fr auto; gap:12px; }
  .pp-recent-cover{ width:44px; height:58px; }
  .pp-recent-meta{ white-space:normal; letter-spacing:.1em; }
}

/* ════════════════════════════════════════════════════════════════════════
   §62 · OPTIONS v2 — héro adossé à la bannière du joueur, onglets iconés,
   panneaux carte, textarea sombre (le BIO blanc était un trou de thème).
════════════════════════════════════════════════════════════════════════ */
/* Héro */
.settings-page-head--v2{
  position:relative; overflow:hidden; border-radius:10px;
  padding:clamp(22px,3.4vw,34px) clamp(18px,3vw,30px);
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,0));
  margin-bottom:clamp(22px,3vw,34px);
}
.settings-head-bg{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  opacity:.22; filter:saturate(.9) brightness(.9);
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.25) 70%,transparent);
          mask-image:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.25) 70%,transparent);
}
[dir="rtl"] .settings-head-bg{
  -webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,.9),rgba(0,0,0,.25) 70%,transparent);
          mask-image:linear-gradient(270deg,rgba(0,0,0,.9),rgba(0,0,0,.25) 70%,transparent);
}
.settings-page-head--v2::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.25),transparent 65%);
}
.settings-page-head--v2 .settings-head-ava,
.settings-page-head--v2 .settings-head-id{ position:relative; z-index:2; }
/* Onglets iconés */
.set-tab{ display:flex; align-items:center; gap:10px; }
.set-tab-ico{ display:inline-flex; width:15px; height:15px; flex:none; opacity:.65; transition:opacity .25s; }
.set-tab-ico svg{ width:100%; height:100%; }
.set-tab.active .set-tab-ico, .set-tab:hover .set-tab-ico{ opacity:1; }
/* Textarea sombre partout (bio & co) — corrige le champ blanc des Options */
.auth-field textarea{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important; border-radius:4px;
  padding:10px 12px; line-height:1.55;
  transition:border-color .25s, box-shadow .25s;
}
.auth-field textarea:focus{
  outline:none; border-color:rgba(255,255,255,.4) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}
.auth-field textarea::placeholder{ color:rgba(255,255,255,.3); }

/* ════════════════════════════════════════════════════════════════════════
   §63 · BIBLIOTHÈQUE (façon Rockstar/Steam) — rail des jeux possédés à
   gauche, vitrine key-art du jeu sélectionné à droite, hand-off launcher.
════════════════════════════════════════════════════════════════════════ */
.lib-shell{
  display:grid; grid-template-columns:288px 1fr;
  min-height:calc(100vh - var(--nav-h,64px));
  margin-top:var(--nav-h,64px); /* le nav est fixe : ne pas passer dessous */
}
/* ── Rail ── */
.lib-rail{
  border-right:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,#0a0a0b,#070708);
  padding:26px 0 34px;
}
.lib-rail-head{
  display:flex; align-items:center; gap:10px;
  padding:0 22px 16px;
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:10px;
}
.lib-count{
  font-size:.52rem; padding:.3em .55em .24em;
  border:1px solid rgba(255,255,255,.16); border-radius:2px; color:rgba(255,255,255,.75);
}
.lib-rail-list{ display:flex; flex-direction:column; }
.lib-item{
  display:grid; grid-template-columns:30px 1fr; align-items:center; gap:12px;
  width:100%; padding:9px 22px; cursor:pointer; text-align:left;
  background:none; border:none; border-left:2px solid transparent; color:inherit;
  transition:background .25s, border-color .25s;
}
.lib-item:hover{ background:rgba(255,255,255,.03); }
.lib-item.active{ background:rgba(255,255,255,.05); border-left-color:#fff; }
.lib-item-cover{ width:30px; height:40px; border-radius:3px; overflow:hidden; background:#101012; }
.lib-item-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.lib-item-name{
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .25s;
}
.lib-item:hover .lib-item-name, .lib-item.active .lib-item-name{ color:#fff; }
[dir="rtl"] .lib-rail{ border-right:none; border-left:1px solid rgba(255,255,255,.07); }
[dir="rtl"] .lib-item{ border-left:none; border-right:2px solid transparent; text-align:right; }
[dir="rtl"] .lib-item.active{ border-right-color:#fff; }
/* ── Vitrine ── */
.lib-stage{ position:relative; opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease,ease), transform .5s var(--ease,ease); }
.lib-stage--in{ opacity:1; transform:none; }
.lib-hero{ position:relative; min-height:calc(100vh - var(--nav-h,64px)); display:flex; align-items:flex-end; overflow:hidden; }
.lib-hero-bg{
  position:absolute; inset:-2%; background-size:cover; background-position:center 30%;
  filter:brightness(.55) saturate(1.05);
  transform:scale(1.02);
}
.lib-hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.55) 34%, rgba(5,5,6,.15) 62%, rgba(5,5,6,.35) 100%),
    radial-gradient(90% 70% at 18% 88%, rgba(var(--tint-rgb,255,255,255),.13), transparent 60%);
}
.lib-hero-body{
  position:relative; z-index:2; padding:clamp(26px,4vw,56px);
  max-width:640px; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.lib-eyebrow{
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.lib-title{
  margin:0; font-family:var(--f-disp,sans-serif); font-size:clamp(2.2rem,4.6vw,4rem);
  line-height:.95; letter-spacing:.02em; text-transform:uppercase; color:#fff;
  text-shadow:0 12px 44px rgba(0,0,0,.8);
}
.lib-logo{ max-width:min(380px,70%); height:auto; filter:drop-shadow(0 12px 34px rgba(0,0,0,.8)); }
.lib-tagline{
  margin:0; font-family:var(--f-serif,Georgia,serif); font-style:italic;
  font-size:clamp(.92rem,1.5vw,1.08rem); line-height:1.55; color:rgba(255,255,255,.72);
}
.lib-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.lib-meta{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.lib-meta-dot{ opacity:.5; }
.lib-links{ display:flex; gap:20px; flex-wrap:wrap; margin-top:2px; }
.lib-link{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:3px;
  transition:color .25s, border-color .25s;
}
.lib-link:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
/* Responsive : rail horizontal au-dessus de la vitrine */
@media (max-width:900px){
  .lib-shell{ grid-template-columns:1fr; }
  .lib-rail{ border-right:none; border-bottom:1px solid rgba(255,255,255,.07); padding:18px 0 8px; }
  .lib-rail-list{ flex-direction:row; overflow-x:auto; padding:0 14px 12px; gap:8px; scrollbar-width:thin; }
  .lib-item{ flex:none; width:auto; grid-template-columns:26px 1fr; padding:8px 12px; border-left:none; border-bottom:2px solid transparent; border-radius:4px; }
  .lib-item.active{ border-bottom-color:#fff; }
  [dir="rtl"] .lib-item{ border-right:none; }
  .lib-item-name{ max-width:120px; }
  .lib-hero{ min-height:72vh; }
}
/* ── Modale hand-off launcher ── */
#glg-handoff{
  position:fixed; inset:0; z-index:1250; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .3s var(--ease,ease);
}
#glg-handoff.open{ opacity:1; }
.handoff-card{
  width:min(430px,94vw); text-align:center;
  background:linear-gradient(180deg,#111113,#0b0b0c);
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
  padding:30px 28px 24px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,1);
  transform:translateY(8px) scale(.98); transition:transform .35s cubic-bezier(.22,1,.36,1);
}
#glg-handoff.open .handoff-card{ transform:none; }
.handoff-ico{ display:inline-flex; color:rgba(255,255,255,.85); margin-bottom:12px; }
.handoff-title{ margin:0 0 10px; font-family:var(--f-head,inherit); font-weight:800; font-size:1.12rem; color:#fff; }
.handoff-body{ margin:0 0 20px; font-size:.82rem; line-height:1.65; color:rgba(255,255,255,.6); }
.handoff-body b{ color:rgba(255,255,255,.9); }
.handoff-actions{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.handoff-proto{
  margin:18px 0 0; font-family:var(--f-mono,monospace); font-size:.5rem;
  letter-spacing:.18em; color:rgba(255,255,255,.28); text-transform:lowercase;
}

/* §63b · Bibliothèque dans le header : EXCLUSIVE AU LAUNCHER (IS_TAURI) et
   réservée aux joueurs connectés. Sur le web, l'entrée n'existe pas — la
   route #library y affiche la page « exclusif au launcher » (§68). */
#nl-library:not(.is-auth), #nml-library:not(.is-auth){ display:none !important; }

/* ════════════════════════════════════════════════════════════════════════
   §64 · « LE LAUNCHER ARRIVE » (accueil) + « QUOI DE NEUF » (Options→MAJ).
   La fenêtre stylisée esquisse l'app de bureau (chrome + rail bibliothèque)
   sans singer un vrai screenshot — sobre, monochrome, crédible.
════════════════════════════════════════════════════════════════════════ */
.glg-launcher-teaser{
  position:relative; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,var(--bg,#080808),#050506);
  padding:clamp(64px,9vw,120px) clamp(16px,5vw,72px);
}
.lt-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px);
  align-items:center; max-width:1180px; margin:0 auto;
}
.lt-sub{ font-size:.9rem; line-height:1.8; color:rgba(255,255,255,.58); max-width:52ch; margin:0 0 30px; }
.lt-feats{ display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; margin-bottom:32px; }
.lt-feat{ display:flex; gap:13px; align-items:flex-start; }
.lt-feat-ico{ width:20px; height:20px; flex:none; color:rgba(255,255,255,.8); margin-top:2px; }
.lt-feat-ico svg{ width:100%; height:100%; }
.lt-feat-txt{ display:flex; flex-direction:column; gap:4px; }
.lt-feat-txt b{ font-size:.85rem; font-weight:700; color:#fff; letter-spacing:.02em; }
.lt-feat-txt span{ font-size:.76rem; line-height:1.6; color:rgba(255,255,255,.5); }
.lt-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.lt-version{
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
/* Fenêtre stylisée */
.lt-visual{ display:flex; justify-content:center; }
.lt-window{
  width:min(440px,100%); border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#101012,#0a0a0b);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02);
  transform:rotate(-1.2deg);
}
.lt-window-bar{
  display:flex; gap:6px; padding:11px 13px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.lt-window-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14); }
.lt-window-body{ display:grid; grid-template-columns:118px 1fr; min-height:230px; }
.lt-w-rail{
  display:flex; flex-direction:column; gap:12px; padding:16px 14px;
  border-right:1px solid rgba(255,255,255,.06);
}
.lt-w-logo{ width:26px; height:26px; margin-bottom:6px; opacity:.9; }
.lt-w-logo img{ width:100%; height:100%; object-fit:contain; }
.lt-w-line{ height:7px; border-radius:3px; background:rgba(255,255,255,.08); }
.lt-w-line--on{ background:rgba(255,255,255,.3); }
.lt-w-stage{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  gap:9px; padding:18px;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(139,68,255,.12), transparent 55%),
    radial-gradient(120% 90% at 15% 95%, rgba(245,230,66,.08), transparent 55%);
}
.lt-w-title{ width:62%; height:14px; border-radius:3px; background:rgba(255,255,255,.35); }
.lt-w-sub{ width:44%; height:8px; border-radius:3px; background:rgba(255,255,255,.14); }
.lt-w-btn{
  align-self:flex-start; margin-top:8px; padding:7px 22px; border-radius:3px;
  background:#fff; color:#000; font-size:.6rem; letter-spacing:.1em;
}
@media (max-width:940px){
  .lt-inner{ grid-template-columns:1fr; }
  .lt-visual{ order:-1; }
  .lt-window{ transform:none; width:min(380px,100%); }
  .lt-feats{ grid-template-columns:1fr; }
}
[dir="rtl"] .lt-w-rail{ border-right:none; border-left:1px solid rgba(255,255,255,.06); }
/* « Quoi de neuf » — journal des versions */
.set-changelog{ display:flex; flex-direction:column; gap:20px; max-width:60ch; }
.chg-release{ border-left:2px solid rgba(255,255,255,.1); padding-left:16px; }
.chg-release--current{ border-left-color:#fff; }
[dir="rtl"] .chg-release{ border-left:none; border-right:2px solid rgba(255,255,255,.1); padding-left:0; padding-right:16px; }
[dir="rtl"] .chg-release--current{ border-right-color:#fff; }
.chg-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px; }
.chg-v{
  font-family:var(--f-mono,monospace); font-weight:500; font-size:.72rem;
  letter-spacing:.08em; color:#000; background:#fff; border-radius:2px; padding:.24em .5em .18em;
}
.chg-release:not(.chg-release--current) .chg-v{ color:rgba(255,255,255,.8); background:rgba(255,255,255,.08); }
.chg-tag{
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.14); border-radius:2px; padding:.36em .6em .3em;
}
.chg-date{ font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.12em; color:rgba(255,255,255,.4); }
.chg-notes{ margin:0; padding:0 0 0 16px; display:flex; flex-direction:column; gap:7px; }
[dir="rtl"] .chg-notes{ padding:0 16px 0 0; }
.chg-notes li{ font-size:.78rem; line-height:1.65; color:rgba(255,255,255,.6); }
.chg-notes li::marker{ color:rgba(255,255,255,.3); }

/* §65 · Correctifs AUDIT V1.0.0 — RTL + a11y (constats confirmés #11-14, #3) */
/* Halo teinté de la vitrine bibliothèque : miroir en RTL (18% → 82%) */
[dir="rtl"] .lib-hero-veil{
  background:
    linear-gradient(0deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.55) 34%, rgba(5,5,6,.15) 62%, rgba(5,5,6,.35) 100%),
    radial-gradient(90% 70% at 82% 88%, rgba(var(--tint-rgb,255,255,255),.13), transparent 60%);
}
/* Hairline du héro Options : extrémité lumineuse côté début de lecture */
[dir="rtl"] .settings-page-head--v2::after{
  background:linear-gradient(270deg,rgba(255,255,255,.25),transparent 65%);
}
/* Jeux récents : padding logique miroir (16px côté chevron) */
[dir="rtl"] .pp-recent{ padding:12px 12px 12px 16px; }
/* Cartes d'offres mobile RTL : réserve wishlist alignée sur la valeur mobile */
@media (max-width:560px){
  [dir="rtl"] .shop-deal-info{ padding-left:26px; }
}
/* Bouton d'agrandissement des captures (a11y clavier) — transparent, plein cadre */
.pp-shot-open{
  display:block; width:100%; height:100%; padding:0; margin:0;
  border:none; background:none; cursor:zoom-in;
}
.pp-shot-open:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:-2px; }
.pp-shot-open img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Modale d'achat honnête : rangées plateformes NON cliquables + note + wishlist */
.plat-btn--static{ cursor:default !important; }
.plat-btn--static:hover{ transform:none !important; background:inherit; }
.buy-note{
  margin:14px 2px 12px; font-size:.74rem; line-height:1.65;
  color:rgba(255,255,255,.5);
}
.buy-wish{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.buy-wish.on{ border-color:rgba(255,255,255,.5); }
/* Fiche : badge « Dans ta bibliothèque » (jeu possédé) */
.dp-buybox-owned{
  display:flex; align-items:center; gap:8px; margin:2px 0 14px;
  font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:#4cc38a;
}
.dp-sticky-owned{
  font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.14em;
  text-transform:uppercase; color:#4cc38a;
}
/* Footer : l'entrée Bibliothèque suit la même règle que le header (connecté) */
body:not(.glg-authed) .footer-lib{ display:none !important; }

/* ════════════════════════════════════════════════════════════════════════
   §66 · ÉDITIONS Standard/Deluxe (buybox) — cartes radio + contenus.
════════════════════════════════════════════════════════════════════════ */
.dp-editions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
.dp-ed{
  display:flex; flex-direction:column; gap:5px; padding:11px 12px 10px;
  cursor:pointer; text-align:left; color:inherit;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12); border-radius:5px;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.dp-ed:hover{ border-color:rgba(255,255,255,.3); }
.dp-ed.on{
  border-color:#fff; background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px #fff inset;
}
[dir="rtl"] .dp-ed{ text-align:right; }
.dp-ed-name{
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.65);
}
.dp-ed.on .dp-ed-name{ color:#fff; }
.dp-ed-price{ font-size:.86rem; font-weight:700; color:rgba(255,255,255,.9); }
#dp-ed-perks{ margin:-2px 0 12px; }
.dp-ed-perks-in{ display:flex; flex-direction:column; gap:5px; }
.dp-ed-inc{
  font-family:var(--f-mono,monospace); font-size:.48rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:2px;
}
.dp-ed-perk{ font-size:.74rem; color:rgba(255,255,255,.62); }
.dp-ed-perk span{ color:#4cc38a; margin-inline-end:4px; }

/* ════════════════════════════════════════════════════════════════════════
   §67 · TÉLÉCHARGEMENT DU LAUNCHER (accueil) — bouton OS, plateformes, SHA.
════════════════════════════════════════════════════════════════════════ */
.lt-actions .btn{ display:inline-flex; align-items:center; gap:9px; }
.lt-dl-soon{ cursor:default; opacity:.6; }
.lt-dl-meta{
  margin:12px 0 0; font-family:var(--f-mono,monospace); font-size:.56rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.lt-platforms{ display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.lt-plat{
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.12); border-radius:2px; padding:.45em .7em .38em;
}
.lt-plat--on{ color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.3); }
.lt-plat--on::before{ content:'● '; color:#4cc38a; font-size:.8em; }
.lt-sha{
  margin:16px 0 0; font-family:var(--f-mono,monospace); font-size:.5rem;
  letter-spacing:.08em; color:rgba(255,255,255,.3); max-width:64ch; word-break:break-all;
}
.lt-sha code{ color:rgba(255,255,255,.45); }
/* Cartes de téléchargement multi-OS (remplacent les chips) */
.lt-dl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; max-width:560px; }
.lt-dl-card{
  display:flex; flex-direction:column; gap:6px; padding:13px 14px 12px;
  border:1px solid rgba(255,255,255,.1); border-radius:6px;
  background:rgba(255,255,255,.02); color:inherit; text-decoration:none;
  opacity:.55; transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .25s, opacity .25s, background .25s;
}
.lt-dl-card--on{ opacity:1; cursor:pointer; }
.lt-dl-card--on:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.045); }
.lt-dl-ico{ width:18px; height:18px; color:rgba(255,255,255,.8); }
.lt-dl-ico svg{ width:100%; height:100%; }
.lt-dl-name{ font-family:var(--f-head,inherit); font-weight:700; font-size:.82rem; color:#fff; }
.lt-dl-fmt{
  font-family:var(--f-mono,monospace); font-size:.48rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.42);
}
.lt-dl-get{
  display:inline-flex; align-items:center; gap:6px; margin-top:5px;
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.8);
}
.lt-dl-get svg{ width:12px; height:12px; }
.lt-dl-get--soon{ color:rgba(255,255,255,.35); }
@media (max-width:640px){ .lt-dl-grid{ grid-template-columns:1fr; max-width:none; } }
/* Case « Se souvenir de cet appareil » — aligne le pattern auth-consent */
.auth-remember span{ color:rgba(255,255,255,.7); }
/* Lien « Toutes les versions » sous la grille de téléchargement */
.lt-allver{
  display:inline-block; margin-top:12px;
  font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.5); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:3px;
  transition:color .25s, border-color .25s;
}
.lt-allver:hover{ color:#fff; border-color:rgba(255,255,255,.55); }
/* Variantes par plateforme (Apple Silicon/Intel, x64/ARM64, AppImage/deb/rpm) :
   lignes téléchargeables DANS la carte — la carte n'est plus un lien global. */
.lt-dl-card--on{ cursor:default; }
.lt-dl-vars{ display:flex; flex-direction:column; margin-top:7px; border-top:1px solid rgba(255,255,255,.08); }
.lt-dl-var{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 2px 5px; text-decoration:none; color:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.05);
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.12em;
  text-transform:uppercase; transition:color .2s, padding .25s;
}
.lt-dl-var:last-child{ border-bottom:none; padding-bottom:1px; }
.lt-dl-var:hover{ color:#fff; padding-left:4px; }
[dir="rtl"] .lt-dl-var:hover{ padding-left:2px; padding-right:4px; }
.lt-dl-var-get{ display:inline-flex; opacity:.55; transition:opacity .2s; }
.lt-dl-var-get svg{ width:11px; height:11px; }
.lt-dl-var:hover .lt-dl-var-get{ opacity:1; }

/* ════════════════════════════════════════════════════════════════════════
   §68 · « EXCLUSIF AU LAUNCHER » — la route #library sur le SITE WEB.
   Invitation cinématique à installer l'app de bureau (fenêtre §64 réutilisée) ;
   la vraie bibliothèque ne se rend que dans le launcher (IS_TAURI).
════════════════════════════════════════════════════════════════════════ */
.libx{
  position:relative; overflow:hidden;
  min-height:calc(100vh - var(--nav-h,64px)); margin-top:var(--nav-h,64px);
  display:flex; align-items:center;
}
.libx-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(30px,5vw,70px);
  width:min(1180px,92vw); margin:0 auto; padding:70px 0;
}
.libx-title{
  margin:14px 0 18px; font-family:var(--f-disp,sans-serif);
  font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.02; letter-spacing:.02em;
  text-transform:uppercase; color:#fff;
}
.libx-sub{
  margin:0; max-width:56ch; font-size:.92rem; line-height:1.75;
  color:rgba(255,255,255,.62);
}
.libx-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.libx-chip{
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.14); border-radius:2px; padding:.5em .8em .42em;
}
.libx-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.libx-actions .btn{ display:inline-flex; align-items:center; gap:9px; }
.libx-hint{
  margin:16px 0 0; font-family:var(--f-mono,monospace); font-size:.54rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4);
}
.libx-visual{ display:flex; justify-content:center; }
@media (max-width:900px){
  .libx-inner{ grid-template-columns:1fr; padding:50px 0 60px; }
  .libx-visual{ display:none; } /* mobile : le message + CTA suffisent */
}

/* ════════════════════════════════════════════════════════════════════════
   §69 · BIBLIOTHÈQUE v2 (launcher) — héro CENTRÉ ancré vers le bas,
   rail rétractable fluide à la sélection (mode « zen »), et sections
   façon Steam sous le héro : Succès / Contacts / DLC / Actualités.
════════════════════════════════════════════════════════════════════════ */
/* ── Héro : logo, tagline et boutons au CENTRE, légèrement en bas ── */
.lib-hero{ justify-content:center; }
.lib-hero-body{
  margin:0 auto; max-width:860px;
  align-items:center; text-align:center;
  padding-bottom:clamp(48px,9vh,110px);
}
.lib-hero-veil{
  background:
    linear-gradient(0deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.55) 34%, rgba(5,5,6,.15) 62%, rgba(5,5,6,.35) 100%),
    radial-gradient(85% 65% at 50% 88%, rgba(var(--tint-rgb,255,255,255),.14), transparent 62%);
}
[dir="rtl"] .lib-hero-veil{
  background:
    linear-gradient(0deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.55) 34%, rgba(5,5,6,.15) 62%, rgba(5,5,6,.35) 100%),
    radial-gradient(85% 65% at 50% 88%, rgba(var(--tint-rgb,255,255,255),.14), transparent 62%);
}
.lib-logo{ max-width:min(440px,78%); }
.lib-ctas, .lib-meta, .lib-links{ justify-content:center; }
/* Indice de scroll : les sections vivent sous le héro */
.lib-scroll-cue{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:2; color:rgba(255,255,255,.4);
  animation:libCue 2.2s ease-in-out infinite;
}
@keyframes libCue{ 0%,100%{ transform:translate(-50%,0); opacity:.4; } 50%{ transform:translate(-50%,5px); opacity:.85; } }
@media (prefers-reduced-motion:reduce){ .lib-scroll-cue{ animation:none; } }

/* ── Rail rétractable (mode « zen ») : sélectionner un jeu via la liste
   réduit le rail aux jaquettes — la vitrine devient quasi plein écran.
   Survoler le rail le ré-étend fluidement (:has ; sans :has il reste
   compact, toujours utilisable — dégradation propre). ── */
.lib-shell{ transition:grid-template-columns .65s cubic-bezier(.22,1,.36,1); }
.lib-shell--zen{ grid-template-columns:78px 1fr; }
.lib-rail-head, .lib-item-name{ transition:opacity .3s ease; }
.lib-shell--zen .lib-rail-head{ opacity:0; }
.lib-shell--zen .lib-item{ grid-template-columns:30px; justify-content:center; padding:9px 0; }
.lib-shell--zen .lib-item-name{ opacity:0; }
.lib-shell--zen:has(.lib-rail:hover){ grid-template-columns:288px 1fr; }
.lib-shell--zen:has(.lib-rail:hover) .lib-rail-head{ opacity:1; }
.lib-shell--zen:has(.lib-rail:hover) .lib-item{ grid-template-columns:30px 1fr; justify-content:stretch; padding:9px 22px; }
.lib-shell--zen:has(.lib-rail:hover) .lib-item-name{ opacity:1; }
@media (max-width:900px){ /* rail horizontal mobile : pas de mode zen */
  .lib-shell--zen{ grid-template-columns:1fr; }
  .lib-shell--zen .lib-rail-head, .lib-shell--zen .lib-item-name{ opacity:1; }
  .lib-shell--zen .lib-item{ grid-template-columns:26px 1fr; justify-content:stretch; padding:8px 12px; }
}

/* ── Sections sous le héro (disposition Steam : actus à gauche, rail
   Succès/Contacts/DLC à droite) ── */
.lib-below{
  display:grid; grid-template-columns:1.55fr 1fr; align-items:start;
  gap:clamp(16px,2.6vw,34px);
  padding:clamp(22px,3.4vw,48px);
  background:linear-gradient(180deg,#070708,#09090b);
  border-top:1px solid rgba(255,255,255,.06);
}
.lib-sec{
  border:1px solid rgba(255,255,255,.08); border-radius:8px;
  background:linear-gradient(180deg,#0d0d0f,#0a0a0b);
  padding:18px 20px 20px; margin-bottom:16px;
}
.lib-below-main .lib-sec:last-child, .lib-below-side .lib-sec:last-child{ margin-bottom:0; }
.lib-sec-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.lib-sec-title{
  margin:0; font-family:var(--f-mono,monospace); font-size:.58rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.65);
}
.lib-sec-count{
  font-family:var(--f-mono,monospace); font-size:.52rem; padding:.3em .55em .24em;
  border:1px solid rgba(255,255,255,.16); border-radius:2px; color:rgba(255,255,255,.75);
}
.lib-sec-note{ margin:0; font-size:.74rem; line-height:1.6; color:rgba(255,255,255,.42); }
.lib-sec-btn{
  margin-top:14px; background:none; border:none; padding:0 0 3px; cursor:pointer;
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:color .25s, border-color .25s;
}
.lib-sec-btn:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
/* Succès : barre de progression teintée + tuiles trophées / verrous */
.lib-ach-progress{ display:flex; flex-direction:column; gap:7px; margin-bottom:13px; }
.lib-ach-of{
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.lib-ach-bar{ display:block; height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.lib-ach-bar i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, rgba(var(--tint-rgb,255,255,255),.95), rgba(var(--tint-rgb,255,255,255),.55));
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.lib-ach-row{ display:flex; flex-wrap:wrap; gap:7px; }
.lib-ach-tile{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.12); border-radius:5px; cursor:pointer;
  background:rgba(255,255,255,.03); color:var(--tc,#fff);
  transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, background .25s;
}
.lib-ach-tile:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06); }
.lib-ach-tile svg{ width:17px; height:17px; }
.lib-ach-tile .trophy-ico{ width:17px; height:17px; }
.lib-ach-tile--lock{ color:rgba(255,255,255,.28); }
.lib-ach-lockl{
  margin:13px 0 8px; font-family:var(--f-mono,monospace); font-size:.5rem;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.35);
}
/* Contacts qui y ont joué — rangée d'avatars, volontairement minime */
.lib-fp-row{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:9px; }
.lib-fp-ava{
  position:relative; width:34px; height:34px; border-radius:50%; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); padding:0; cursor:pointer; background:#141416;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s;
}
.lib-fp-ava:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.5); }
.lib-fp-ava .ava-img{ width:100%; height:100%; object-fit:cover; }
.lib-fp-ava .ava-init{ font-size:.72rem; font-weight:700; color:rgba(255,255,255,.75); }
.lib-fp-more{
  font-family:var(--f-mono,monospace); font-size:.56rem; color:rgba(255,255,255,.5);
  letter-spacing:.08em; padding:0 3px;
}
/* DLC & extensions — carte horizontale : jaquette, parenté, prix/possédé */
.lib-dlc-list{ display:flex; flex-direction:column; gap:10px; }
.lib-dlc-card{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:13px;
  padding:11px 12px; border:1px solid rgba(255,255,255,.09); border-radius:6px;
  background:rgba(255,255,255,.02);
  transition:border-color .25s, background .25s;
}
.lib-dlc-card:hover{ border-color:rgba(var(--tint-rgb,255,255,255),.4); background:rgba(255,255,255,.035); }
.lib-dlc-cover{ width:44px; height:58px; border-radius:4px; overflow:hidden; background:#101012; }
.lib-dlc-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.lib-dlc-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lib-dlc-kind{
  font-family:var(--f-mono,monospace); font-size:.48rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(var(--tint-rgb,255,255,255),.85);
}
.lib-dlc-name{
  font-family:var(--f-head,inherit); font-weight:700; font-size:.86rem; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lib-dlc-meta{ font-size:.7rem; color:rgba(255,255,255,.55); }
.lib-dlc-owned{
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.14em;
  text-transform:uppercase; color:#4cc38a;
}
.lib-dlc-btn{ padding:.55em 1.05em; font-size:.62rem; white-space:nowrap; }
/* Actualités : réutilise les cartes .dp-news-item (§54) telles quelles */
.lib-news-list{ margin:0; }
@media (max-width:1080px){
  .lib-below{ grid-template-columns:1fr; }
  .lib-below-side{ order:-1; } /* Succès/Contacts/DLC d'abord, actus ensuite */
}

/* ════════════════════════════════════════════════════════════════════════
   §70 · PROFIL v3 — plaque d'identité façon Steam-mais-mieux : statut en
   ligne, anneau de niveau conique (geste Steam), 5 compteurs CLIQUABLES
   (chacun mène à sa section — Jeux ouvre la bibliothèque), bannière + haute.
════════════════════════════════════════════════════════════════════════ */
.pp--v3 .pp-banner{ height:clamp(210px,32vw,370px); }
/* Statut « en ligne » sous le pseudo (pastille animée, sobre) */
.pp-online{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:10px; margin-inline-end:14px;
  font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.18em;
  text-transform:uppercase; color:#4cc38a;
}
.pp-online i{
  width:7px; height:7px; border-radius:50%; background:#4cc38a;
  box-shadow:0 0 8px rgba(76,195,138,.8);
  animation:ppPulse 2.4s ease-in-out infinite;
}
@keyframes ppPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@media (prefers-reduced-motion:reduce){ .pp-online i{ animation:none; } }
/* Anneau de niveau (progression conique vers le niveau suivant) */
.pp--v3 .pp-actions{ display:flex; align-items:center; gap:18px; }
.pp-ring-track{
  --pct:0;
  display:flex; width:66px; height:66px; border-radius:50%; padding:3px;
  background:conic-gradient(#fff calc(var(--pct)*1%), rgba(255,255,255,.13) 0);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.9);
}
.pp-ring-in{
  flex:1; border-radius:50%; background:#0b0b0d;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.pp-ring-in b{ font-family:var(--f-disp,sans-serif); font-size:1.2rem; line-height:1; color:#fff; }
.pp-ring-in small{
  font-family:var(--f-mono,monospace); font-size:.4rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
/* Compteurs : 5 tuiles, désormais des BOUTONS (reset + survol) */
.pp--v3 .pp-stats{ grid-template-columns:repeat(5,1fr); }
.pp--v3 .pp-stat{
  border:none; cursor:pointer; color:inherit; font:inherit;
  transition:background .25s;
}
.pp--v3 .pp-stat:hover{ background:#101013; }
.pp--v3 .pp-stat:hover span{ color:rgba(255,255,255,.75); }
@media (max-width:900px){ .pp--v3 .pp-stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pp--v3 .pp-stats{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   §71 · BARRE DE TITRE CUSTOM (launcher frameless ≥ 1.0.2) — façon Discord :
   titre centré, drag pleine largeur, contrôles fenêtre Windows à droite.
   Rendue par _initTauriTitlebar (app.js) uniquement quand l'IPC fenêtre
   est exposé. html.glg-frameless décale nav + contenu de 32px.
════════════════════════════════════════════════════════════════════════ */
#glg-titlebar{
  position:fixed; top:0; left:0; right:0; height:32px; z-index:100000;
  display:flex; align-items:stretch;
  background:#050506; border-bottom:1px solid rgba(255,255,255,.06);
  user-select:none; -webkit-user-select:none;
  direction:ltr; /* contrôles à droite même en RTL (convention OS) */
}
.tb-drag{ flex:1; }
/* Titre centré sur la LARGEUR TOTALE de la fenêtre (comme Discord) — pas
   sur la seule zone de drag, que les boutons de droite décaleraient. */
.tb-title{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-mono,monospace); font-size:.56rem; letter-spacing:.3em;
  text-indent:.3em; /* compense l'espace du letter-spacing après la dernière lettre */
  text-transform:uppercase; color:rgba(255,255,255,.55);
  pointer-events:none; /* drag et clics passent à travers */
}
/* glg-mark.png est un wordmark ~3:1 — hauteur fixe, largeur AUTO (zéro étirement) */
.tb-title img{ height:11px; width:auto; opacity:.9; }
.tb-controls{ display:flex; }
.tb-btn{
  width:46px; border:none; background:transparent; color:rgba(255,255,255,.6);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s, color .15s;
}
.tb-btn:hover{ background:rgba(255,255,255,.09); color:#fff; }
.tb-btn--close:hover{ background:#e81123; color:#fff; }
/* Décalage du site : le nav fixe et le flux descendent de 32px */
html.glg-frameless{ --glg-tb:32px; }
html.glg-frameless body{ padding-top:var(--glg-tb); }
html.glg-frameless #nav{ top:var(--glg-tb); }

/* ════════════════════════════════════════════════════════════════════════
   §72 · BIBLIOTHÈQUE v2.1 — barre d'outils sous la bannière (façon Steam :
   Page du magasin / DLC / Succès / Actualités) + « Ton évaluation »
   (étoiles + texte, RPC reviews des fiches réutilisées).
════════════════════════════════════════════════════════════════════════ */
.lib-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px clamp(22px,3.4vw,48px);
  background:#060607; border-top:1px solid rgba(255,255,255,.06);
}
.lib-tool{
  display:inline-flex; align-items:center; gap:7px;
  padding:.62em 1em .55em; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14);
  border-radius:3px; color:rgba(255,255,255,.72);
  font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .2s, border-color .2s, color .2s;
}
.lib-tool:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.4); color:#fff; }
.lib-tool--store{ border-color:rgba(255,255,255,.3); color:#fff; }
/* Ton évaluation */
.lib-rev-stars{ display:flex; gap:4px; margin-bottom:10px; }
.lib-rev-text{
  width:100%; resize:vertical; min-height:64px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12);
  border-radius:5px; padding:10px 12px; color:#fff;
  font-family:inherit; font-size:.8rem; line-height:1.6;
  transition:border-color .2s;
}
.lib-rev-text:focus{ outline:none; border-color:rgba(255,255,255,.35); }
.lib-rev-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:11px; }
.lib-rev-save{ padding:.6em 1.3em; font-size:.62rem; }
.lib-rev-del{ margin-top:0; }
.lib-rev-note{
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.12em;
  text-transform:uppercase; color:#4cc38a;
}

/* ════════════════════════════════════════════════════════════════════════
   §73 · GLG CHAT — messagerie façon Steam/Discord : rail des conversations,
   fil de messages (bulles, pièces jointes, notes vocales), composer,
   groupes (exclusifs launcher — verrou côté web), badge non-lus header.
════════════════════════════════════════════════════════════════════════ */
#nml-chat:not(.is-auth){ display:none !important; }
.chat-shell{
  display:grid; grid-template-columns:300px 1fr;
  height:calc(100vh - var(--nav-h,64px) - var(--glg-tb,0px));
  margin-top:var(--nav-h,64px); overflow:hidden;
}
/* ── Rail des conversations ── */
.chat-rail{
  border-right:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,#0a0a0b,#070708);
  overflow-y:auto; padding:16px 0 24px;
}
[dir="rtl"] .chat-rail{ border-right:none; border-left:1px solid rgba(255,255,255,.07); }
.chat-rail-block{ padding:0 0 14px; }
.chat-rail-label{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 18px 9px;
  font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.05); margin-bottom:6px;
}
.chat-rail-add{
  width:20px; height:20px; border-radius:4px; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); background:none; color:rgba(255,255,255,.7);
  font-size:.8rem; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.chat-rail-add:hover{ background:rgba(255,255,255,.1); color:#fff; }
.chat-rail-note{ padding:8px 18px; }
.chat-conv{
  display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:11px;
  width:100%; padding:8px 18px; cursor:pointer; text-align:left;
  background:none; border:none; border-left:2px solid transparent; color:inherit;
  transition:background .2s, border-color .2s;
}
.chat-conv:hover{ background:rgba(255,255,255,.03); }
.chat-conv.active{ background:rgba(255,255,255,.05); border-left-color:#fff; }
[dir="rtl"] .chat-conv{ border-left:none; border-right:2px solid transparent; text-align:right; }
[dir="rtl"] .chat-conv.active{ border-right-color:#fff; }
.chat-conv-ava{
  position:relative; width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
}
.chat-conv-ava .ava-img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.chat-conv-ava .ava-init{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2a2a2e,#161618); color:#fff; font-weight:700; font-size:.8rem;
}
.chat-conv-ava .pp-friend-dot{ position:absolute; right:-1px; bottom:-1px; }
.chat-gava{
  width:36px; height:36px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:800; font-size:.86rem; font-family:var(--f-disp,sans-serif);
}
.chat-conv-body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-conv-name{
  font-size:.8rem; font-weight:600; color:rgba(255,255,255,.88);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-conv-last{
  font-size:.66rem; color:rgba(255,255,255,.42);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-conv-unread{
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:#fff; color:#0a0a0b; font-size:.6rem; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.chat-groups-lock{
  margin:10px 16px; padding:14px 15px; border:1px dashed rgba(255,255,255,.16);
  border-radius:8px; color:rgba(255,255,255,.5);
}
.chat-groups-lock p{ margin:8px 0 10px; font-size:.7rem; line-height:1.6; }
/* ── Fil de messages ── */
.chat-main{ display:flex; flex-direction:column; min-width:0; background:#050506; }
.chat-empty{
  flex:1; display:flex; align-items:center; justify-content:center; padding:30px;
  color:rgba(255,255,255,.4); font-size:.8rem; text-align:center;
}
.chat-head{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.07);
  background:#0a0a0b;
}
.chat-head-ava .ava-img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.chat-head-ava .ava-init{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2a2a2e,#161618); color:#fff; font-weight:700; font-size:.8rem;
}
.chat-head-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.chat-head-id b{ font-size:.88rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-head-id small{
  font-family:var(--f-mono,monospace); font-size:.52rem; letter-spacing:.14em;
  text-transform:uppercase; color:#4cc38a;
}
.chat-head-actions{ display:flex; gap:7px; }
.chat-ic-btn{
  width:32px; height:32px; border-radius:6px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.65); display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s, border-color .2s;
}
.chat-ic-btn:hover{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.3); }
.chat-ic-danger:hover{ background:rgba(232,17,35,.18); border-color:rgba(232,17,35,.5); color:#ff8a93; }
.chat-msgs{ flex:1; overflow-y:auto; padding:16px 18px 8px; scrollbar-width:thin; }
.chat-day{ display:flex; align-items:center; gap:12px; margin:16px 0 10px; }
.chat-day::before, .chat-day::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.07); }
.chat-day span{
  font-family:var(--f-mono,monospace); font-size:.5rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.35); white-space:nowrap;
}
.chat-more{ display:block; margin:0 auto 12px; }
.chat-msg{ max-width:min(78%,640px); margin:10px 0 0; }
.chat-msg--compact{ margin-top:2px; }
.chat-msg--own{ margin-left:auto; }
[dir="rtl"] .chat-msg--own{ margin-left:0; margin-right:auto; }
.chat-msg-meta{ display:flex; align-items:baseline; gap:8px; margin:0 2px 4px; }
.chat-msg--own .chat-msg-meta{ justify-content:flex-end; }
.chat-msg-meta b{ font-size:.72rem; color:rgba(255,255,255,.8); }
.chat-msg-meta time{ font-family:var(--f-mono,monospace); font-size:.5rem; color:rgba(255,255,255,.35); }
.chat-bubble{
  position:relative; padding:9px 13px 10px; border-radius:12px;
  background:#131316; border:1px solid rgba(255,255,255,.07);
  font-size:.8rem; line-height:1.6; color:rgba(255,255,255,.85);
  word-wrap:break-word; overflow-wrap:break-word;
}
.chat-msg--own .chat-bubble{ background:#1d1d22; border-color:rgba(255,255,255,.12); }
.chat-edited{
  margin-left:8px; font-family:var(--f-mono,monospace); font-size:.48rem;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3);
}
.chat-msg-tools{ position:absolute; top:-11px; right:8px; display:none; gap:4px; }
.chat-bubble:hover .chat-msg-tools{ display:inline-flex; }
.chat-tool{
  width:22px; height:22px; border-radius:5px; cursor:pointer; font-size:.62rem;
  border:1px solid rgba(255,255,255,.18); background:#0c0c0e; color:rgba(255,255,255,.7);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.chat-tool:hover{ background:rgba(255,255,255,.12); color:#fff; }
.chat-att{ display:block; margin-top:8px; max-width:100%; }
.chat-att--img img{ max-width:min(100%,340px); max-height:280px; border-radius:9px; display:block; }
.chat-att--vid{ max-width:min(100%,380px); border-radius:9px; }
.chat-att--aud{ width:min(100%,300px); }
.chat-att--file{
  color:rgba(255,255,255,.75); text-decoration:none; font-size:.74rem;
  border:1px solid rgba(255,255,255,.14); border-radius:7px; padding:8px 11px;
}
.chat-att--file:hover{ border-color:rgba(255,255,255,.4); color:#fff; }
.chat-edit-zone{ display:block; }
.chat-edit-zone textarea{
  width:100%; min-width:240px; resize:vertical; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:8px 10px;
  color:#fff; font-family:inherit; font-size:.78rem; line-height:1.55;
}
.chat-edit-actions{ display:flex; gap:14px; margin-top:7px; }
.chat-typing{
  min-height:20px; padding:0 20px 2px;
  font-size:.66rem; font-style:italic; color:rgba(255,255,255,.45);
  opacity:0; transition:opacity .25s;
}
.chat-typing.on{ opacity:1; }
/* ── Composer ── */
.chat-compose{
  display:flex; align-items:flex-end; gap:8px;
  padding:10px 14px 14px; border-top:1px solid rgba(255,255,255,.07);
  background:#0a0a0b;
}
.chat-compose textarea{
  flex:1; resize:none; max-height:120px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:9px; padding:9px 13px; color:#fff;
  font-family:inherit; font-size:.8rem; line-height:1.55;
  transition:border-color .2s;
}
.chat-compose textarea:focus{ outline:none; border-color:rgba(255,255,255,.35); }
.chat-send{
  width:38px; height:38px; border-radius:9px; cursor:pointer;
  border:none; background:#fff; color:#0a0a0b;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s, opacity .2s;
}
.chat-send:hover{ transform:translateY(-1px); }
.chat-recbar{
  display:flex; align-items:center; gap:14px;
  padding:10px 18px; border-top:1px solid rgba(255,255,255,.07); background:#0d0d0f;
  font-family:var(--f-mono,monospace); font-size:.62rem; color:rgba(255,255,255,.8);
}
.chat-recbar .lib-sec-btn{ margin-top:0; }
.chat-rec-dot{
  width:9px; height:9px; border-radius:50%; background:#e81123;
  animation:ppPulse 1.2s ease-in-out infinite;
}
/* ── Modale groupe : liste des amis (cases à cocher) ── */
.chat-gm-list{ max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.chat-gm-row{
  display:flex; align-items:center; gap:10px; padding:7px 9px;
  border:1px solid rgba(255,255,255,.09); border-radius:7px; cursor:pointer;
  background:rgba(255,255,255,.02); color:rgba(255,255,255,.85); font-size:.78rem;
  transition:border-color .2s, background .2s;
}
.chat-gm-row:hover{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.04); }
.chat-gm-row input{ accent-color:#fff; }
.chat-gm-row .pp-fr-ava .ava-img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.chat-gm-row .pp-fr-ava .ava-init{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2a2a2e,#161618); color:#fff; font-size:.66rem; font-weight:700;
}
/* ── Responsive : rail au-dessus, fil en dessous ── */
@media (max-width:860px){
  .chat-shell{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:calc(100dvh - var(--nav-h,64px)); }
  .chat-rail{ max-height:32vh; border-right:none; border-bottom:1px solid rgba(255,255,255,.07); }
  .chat-msg{ max-width:92%; }
}

/* ════════════════════════════════════════════════════════════════════════
   §74 · CHAT v1.1 — bulles AJUSTÉES AU CONTENU (plus d'espace vide),
   média nu sans cadre, visionneuse plein écran (clic image / ⤢ vidéo),
   carte d'appel vocal flottante (sonnerie, en ligne, mute, raccrocher).
════════════════════════════════════════════════════════════════════════ */
/* Bulles : largeur = contenu (fini les bulles pleine largeur) */
.chat-bubble{ width:fit-content; max-width:100%; letter-spacing:normal; }
.chat-msg--own .chat-bubble{ margin-left:auto; }
[dir="rtl"] .chat-msg--own .chat-bubble{ margin-left:0; margin-right:auto; }
/* Pièce jointe SEULE : média nu, sans cadre ni fond (façon Discord) */
.chat-bubble--media{ padding:0; background:transparent; border-color:transparent; }
.chat-bubble--media .chat-att{ margin-top:0; }
.chat-msg-body + .chat-att{ margin-top:8px; }
.chat-bubble--media .chat-msg-tools{ top:6px; right:6px; }
/* Image : bouton nu, zoom au clic */
.chat-att--img{ border:none; background:none; padding:0; cursor:zoom-in; display:block; }
.chat-att--img img{ display:block; }
.chat-att--img:hover img{ filter:brightness(1.06); }
/* Vidéo : lecteur inline + bouton agrandir */
.chat-att--vid{ position:relative; display:block; }
.chat-att--vid video{ display:block; max-width:min(100%,380px); border-radius:9px; }
.chat-att-expand{
  position:absolute; top:8px; right:8px; width:26px; height:26px;
  border-radius:6px; border:1px solid rgba(255,255,255,.25); cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.chat-att--vid:hover .chat-att-expand{ opacity:1; }
/* ── Visionneuse plein écran ── */
#glg-mediaview{
  position:fixed; inset:0; z-index:200000; padding:28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.93);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .25s ease;
}
#glg-mediaview.open{ opacity:1; }
#glg-mediaview img, #glg-mediaview video{
  max-width:min(1400px,94vw); max-height:88vh;
  border-radius:10px; box-shadow:0 50px 140px -30px #000;
}
.mv-close{
  position:absolute; top:18px; right:18px; width:38px; height:38px;
  border-radius:50%; border:1px solid rgba(255,255,255,.3); cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.mv-close:hover{ background:#e81123; border-color:#e81123; }
html.glg-frameless .mv-close{ top:calc(18px + var(--glg-tb,32px)); }
.mv-name{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono,monospace); font-size:.54rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); max-width:80vw;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ── Carte d'appel vocal flottante ── */
#glg-callbar{
  position:fixed; z-index:150000;
  top:calc(var(--nav-h,64px) + var(--glg-tb,0px) + 14px); right:16px;
}
.cb-card{
  display:flex; align-items:center; gap:13px;
  min-width:264px; padding:13px 15px;
  background:linear-gradient(180deg,#16161a,#0d0d0f);
  border:1px solid rgba(255,255,255,.16); border-radius:13px;
  box-shadow:0 30px 80px -18px #000;
}
.cb-pulse, .cb-live-dot{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
}
.cb-pulse{ background:rgba(76,195,138,.16); border:1px solid rgba(76,195,138,.5); color:#4cc38a; animation:cbRing 1.3s ease-in-out infinite; }
.cb-live-dot{ background:rgba(76,195,138,.2); border:1px solid #4cc38a; color:#4cc38a; }
@keyframes cbRing{
  0%,100%{ transform:rotate(0); box-shadow:0 0 0 0 rgba(76,195,138,.35); }
  20%{ transform:rotate(-12deg); }
  40%{ transform:rotate(10deg); }
  60%{ box-shadow:0 0 0 9px rgba(76,195,138,0); }
}
@media (prefers-reduced-motion:reduce){ .cb-pulse{ animation:none; } }
.cb-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cb-id b{ font-size:.84rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-id small{ font-size:.62rem; color:rgba(255,255,255,.5); }
.cb-id #cb-timer{
  font-family:var(--f-mono,monospace); font-size:.62rem; letter-spacing:.12em; color:#4cc38a;
}
.cb-actions{ display:flex; gap:8px; }
.cb-btn{
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  transition:transform .18s, background .2s, opacity .2s;
}
.cb-btn:hover{ transform:translateY(-1px); }
.cb-btn--ok{ background:#2ea043; }
.cb-btn--ok:hover{ background:#3cbb53; }
.cb-btn--no{ background:#e81123; }
.cb-btn--no:hover{ background:#ff2d3f; }
.cb-btn--mute{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); }
.cb-btn--mute.off{ background:#e81123; border-color:#e81123; }
@media (max-width:640px){ #glg-callbar{ left:12px; right:12px; } .cb-card{ min-width:0; } }