/* ==========================================================================
   Fiche publique — la page qu'un moteur indexe et qu'un apercu de lien montre.
   Elle est volontairement AUTONOME : ni style.css (qui porte l'holographie et
   pese lourd), ni site.css, ni script. Une fiche doit s'afficher entiere sur
   une connexion pauvre, sinon le visiteur qui vient d'un partage repart.
   La palette est recopiee de style.css a l'identique : deux fichiers separes,
   une seule identite visuelle.
   ========================================================================== */
:root{
  --fond:#07080E; --panneau:#12141D; --txt:#F1F3F9; --gris:#9BA2B8;
  --bord:rgba(255,255,255,.10); --verre:rgba(255,255,255,.045);
  --r-commun:#8E96AC; --r-peucommun:#3FD6A4; --r-rare:#4FA8FF;
  --r-super:#A97BFF;  --r-ultra:#FF77C4;     --r-legendaire:#FFC46B;
  --iris:linear-gradient(102deg,#4FE3D0,#5AA8FF 34%,#A97BFF 62%,#FF77C4);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fond); color:var(--txt);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:#8FC2FF}
a:focus-visible,.bouton:focus-visible{outline:2px solid #5AA8FF; outline-offset:3px}

.barre{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--bord);
}
.marque{
  font-weight:800; letter-spacing:.18em; text-decoration:none; font-size:15px;
  background:var(--iris); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.serie{color:var(--gris); font-size:13px; letter-spacing:.08em; text-transform:uppercase}

.fiche{
  max-width:1000px; margin:0 auto; padding:28px 20px 64px;
  display:grid; gap:32px; grid-template-columns:minmax(0,420px) minmax(0,1fr);
  align-items:start;
}
.fiche.vide{grid-template-columns:1fr; text-align:center; padding-top:80px}

.visuel{margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--bord);
  background:var(--panneau)}
.visuel img{display:block; width:100%; height:auto}

.code{margin:0 0 6px; color:var(--gris); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase}
h1{margin:0; font-size:clamp(28px,4.5vw,42px); line-height:1.1; letter-spacing:-.02em}
.sous{margin:6px 0 14px; color:var(--gris); font-size:17px}
.rarete{
  display:inline-block; margin:0 0 16px; padding:4px 12px; border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid currentColor;
}
.r-commun{color:var(--r-commun)} .r-peucommun{color:var(--r-peucommun)}
.r-rare{color:var(--r-rare)} .r-super{color:var(--r-super)}
.r-ultra{color:var(--r-ultra)} .r-legendaire{color:var(--r-legendaire)}

.capsule{
  display:flex; gap:10px; align-items:baseline; margin:0 0 16px; padding:10px 14px;
  background:var(--verre); border:1px solid var(--bord); border-radius:12px;
}
.capsule span{color:var(--gris); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase}
.descr{margin:0 0 20px}

.faits{margin:0 0 24px; display:grid; gap:1px; background:var(--bord);
  border:1px solid var(--bord); border-radius:12px; overflow:hidden}
.faits div{display:flex; justify-content:space-between; gap:16px;
  padding:10px 14px; background:var(--fond)}
.faits dt{color:var(--gris); font-size:14px}
.faits dd{margin:0; font-weight:600; text-align:right}

.appel{margin:0 0 14px}
.bouton{
  display:inline-block; padding:12px 22px; border-radius:12px; font-weight:700;
  text-decoration:none; color:#07080E; background:var(--iris);
}
.pitch{margin:0 0 22px; color:var(--gris); font-size:15px; max-width:46ch}
.credit{margin:0; color:var(--gris); font-size:12.5px; line-height:1.5}

@media (max-width:760px){
  .fiche{grid-template-columns:1fr; gap:22px; padding-top:20px}
}
/* Mode sobre (DECISIONS §52) : ex-@media prefers-reduced-motion. */ html.sobre *{animation:none !important; transition:none !important}

/* ==========================================================================
   LA PAGE D'UNE COLLECTION (2026-08-04)
   Cinq portes thematiques rendues cote serveur : « jeu de cartes SCP » n'avait
   aucune adresse ou atterrir, la serie se choisissant en JavaScript. Meme
   matiere que la fiche — elles vivent dans la meme feuille et le meme monde.
   ========================================================================== */
.serie-page{max-width:980px;margin:0 auto;padding:clamp(20px,4vw,48px) clamp(16px,4vw,32px) 72px}
.serie-page h1{font-size:clamp(28px,5vw,46px);font-weight:900;letter-spacing:-.03em;margin:0}
.serie-chiffre{font-size:clamp(15px,2vw,18px);color:#C5BEDE;margin:10px 0 0}
.serie-chiffre strong{color:#fff;font-weight:800}
.serie-page .descr{max-width:68ch;margin:18px 0 0}
.serie-page h2{font-size:clamp(17px,2.2vw,22px);font-weight:800;letter-spacing:-.02em;
  margin:clamp(34px,5vw,52px) 0 16px}
.serie-page .appel{margin-top:26px}

/* Les cartes de la collection : des liens vers les fiches, pas une galerie.
   C'est le maillage interne qui manquait — la collection pointe ses pieces,
   chaque piece pointe sa collection. */
.pieces{display:grid;gap:clamp(10px,1.6vw,18px);
  /* 150 px et non 168 : a 375 px de large, deux colonnes doivent tenir.
     Vingt-quatre vignettes en pile unique font une page interminable. */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.piece{display:flex;flex-direction:column;gap:7px;padding:9px;border-radius:14px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);
  text-decoration:none;color:inherit;transition:transform .16s,border-color .16s}
.piece:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
.piece img{width:100%;height:112px;object-fit:cover;border-radius:9px;display:block;
  background:rgba(255,255,255,.05)}
.piece-nom{font-size:13px;font-weight:650;line-height:1.35}
.piece-rang{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c,#8E96AC)}
.piece-rang.r-legendaire{--c:#FFC46B}
.piece-rang.r-ultra{--c:#FF77C4}
.piece-rang.r-super{--c:#A97BFF}
.piece-rang.r-rare{--c:#4FA8FF}
.piece-rang.r-peucommun{--c:#3FD6A4}
a.serie{text-decoration:none}
a.serie:hover{text-decoration:underline}

/* ==========================================================================
   LE PROFIL PUBLIC D'UN JOUEUR (v29)
   La page qu'on colle dans un salon. Elle emprunte les vignettes `.piece` a la
   page de collection ci-dessus — meme objet, meme dessin — et n'ajoute que ce
   qui lui est propre : la banniere, l'identite, les chiffres et les barres.

   CE FICHIER NE PORTE QUE LA MISE EN PAGE DE LA PAGE PUBLIQUE. Le portrait,
   les cadres, les fonds, les teintes, la ligne d'identite, les chiffres et les
   barres de collection vivent dans profil.css, chargee par cette page ET par
   le jeu — ce sont les memes objets, et deux copies auraient fini par montrer
   deux profils differents du meme joueur.
   ========================================================================== */
.profil-page{max-width:980px;margin:0 auto;
  padding:clamp(16px,3vw,32px) clamp(16px,4vw,32px) 72px}

.profil-tete{min-height:clamp(150px,26vw,210px);display:flex;align-items:flex-end}
/* Le voile : il garde le texte lisible quel que soit le fond, achete ou non. */
.profil-tete::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,14,.05) 0%,rgba(7,8,14,.72) 78%,#07080E 100%)}
.profil-page h1{font-size:clamp(24px,4.6vw,38px);font-weight:900;letter-spacing:-.02em;
  margin:0;overflow-wrap:anywhere}
.profil-page h2{font-size:clamp(17px,2.2vw,22px);font-weight:800;letter-spacing:-.02em;
  margin:clamp(30px,4.5vw,44px) 0 14px}