/* =====================================================================
   AlyniaRP — feuille unique.
   Charte de la boutique et du menu d animations du serveur : noir neutre,
   un seul accent violet, filets blancs discrets, police Nexa.

   Tout est servi depuis le site : aucune police, aucun script, aucune
   image venue d ailleurs.
   ===================================================================== */

@font-face{
  font-family:'Nexa';
  src:url('../fonts/NexaBook.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('../fonts/NexaBold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('../fonts/NexaBlack.otf') format('opentype');
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('../fonts/NexaBlackItalic.otf') format('opentype');
  font-weight:900; font-style:italic; font-display:swap;
}

:root{
  --accent:#ff2929;
  --accent-soft:rgba(255,41,41,.42);
  --accent-faint:rgba(255,41,41,.14);

  --bg:#0C0C0C;
  --panel:#111111;
  --card:#151515;
  --elem:#1B1B1B;
  --elem-hi:#202020;

  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.06);
  --line-hi:rgba(255,255,255,.11);

  --text:rgba(255,255,255,.94);
  --dim:rgba(255,255,255,.52);
  --faint:rgba(255,255,255,.36);

  --gold:#F2C879;
  --gold-hi:#FFD98F;
  --red:#FF7C98;
  --green:#7CE0A8;

  --radius:14px;
  --radius-sm:10px;
  --ease:cubic-bezier(.32,.72,.32,1);
  --shadow:0 18px 50px rgba(0,0,0,.55);

  --wrap:1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Nexa','Segoe UI',Arial,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{ color:inherit; text-decoration:none; }

.wrap{ width:min(var(--wrap), calc(100% - 3rem)); margin-inline:auto; }

/* --- En-tete ---------------------------------------------------------- */

.top{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(12,12,12,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}

.top .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.1rem 0;
}

.brand{
  font-weight:900;
  font-style:italic;
  font-size:1.25rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.brand span{ color:var(--accent); }

.nav{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }

.nav a{
  padding:.55rem .85rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  color:var(--dim);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease);
}

.nav a:hover{ background:var(--elem); color:var(--text); border-color:var(--line-soft); }

.nav a.on{
  background:var(--accent-faint);
  border-color:var(--accent-soft);
  color:var(--accent);
}

.nav a.cta{
  background:var(--accent-faint);
  border-color:var(--accent-soft);
  color:var(--accent);
}

.nav a.cta:hover{ background:rgba(255,41,41,.2); border-color:rgba(255,41,41,.55); }

/* --- Sections --------------------------------------------------------- */

main{ flex:1 0 auto; }

section{ padding:5rem 0; }

.eyebrow{
  font-weight:900;
  font-style:italic;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
}

h1{
  font-weight:900;
  font-style:italic;
  font-size:clamp(2.4rem, 5.6vw, 4.2rem);
  line-height:1.02;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin-top:.8rem;
}

h2{
  font-weight:900;
  font-style:italic;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;
}

h3{
  font-weight:900;
  font-size:1.02rem;
  letter-spacing:.02em;
}

p{ color:var(--dim); }

.lead{ margin-top:1.2rem; font-size:1.05rem; max-width:56ch; }

.sectionHead{ margin-bottom:2.4rem; }
.sectionHead p{ margin-top:.8rem; max-width:62ch; }

/* --- Accueil ---------------------------------------------------------- */

.hero{
  position:relative;
  padding:7rem 0 6rem;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}

/* Le halo violet ne vit plus ici : le bandeau rogne ce qui depasse (il le
   faut pour le personnage), et le halo se coupait donc net sur son bord
   superieur — une barre horizontale en travers de la page, pile au bas de
   l ancien en-tete. Il est desormais porte par le fond, qui n est jamais
   rogne et couvre toutes les pages. */

.hero .wrap{ position:relative; }

.heroActions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.95rem 1.4rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--elem);
  color:var(--dim);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease);
}

.btn:hover{ background:var(--elem-hi); border-color:var(--line-hi); color:var(--text); }

.btn.primary{
  background:var(--accent-faint);
  border-color:var(--accent-soft);
  color:var(--accent);
}

.btn.primary:hover{ background:rgba(255,41,41,.2); border-color:rgba(255,41,41,.55); }

/* Bloc de connexion : l adresse du serveur, copiable d un clic. */
.connect{
  margin-top:3rem;
  display:inline-flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  padding:1rem 1.2rem;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line-soft);
}

.connect .label{
  font-size:.7rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}

.connect code{
  font-family:'Nexa','Segoe UI',monospace;
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:.04em;
  color:var(--text);
}

/* --- Grilles ---------------------------------------------------------- */

.grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.card{
  padding:1.6rem;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line-soft);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}

.card:hover{ background:#181818; border-color:var(--line-hi); }

.card h3{ margin-bottom:.6rem; }
.card p{ font-size:.94rem; }

.card .tag{
  display:inline-block;
  margin-bottom:.9rem;
  padding:.35rem .6rem;
  border-radius:8px;
  background:var(--accent-faint);
  border:1px solid var(--accent-soft);
  color:var(--accent);
  font-size:.68rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* --- Lore ------------------------------------------------------------- */

.timeline{ display:grid; gap:1rem; }

.step{
  display:grid;
  grid-template-columns:9rem 1fr;
  gap:1.4rem;
  padding:1.6rem;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line-soft);
}

.step .year{
  font-weight:900;
  font-style:italic;
  font-size:1.4rem;
  color:var(--accent);
  letter-spacing:.02em;
}

.step p{ margin-top:.5rem; font-size:.95rem; }

@media (max-width:720px){
  .step{ grid-template-columns:1fr; gap:.4rem; }
}

/* --- Reglement -------------------------------------------------------- */

.rules{ display:grid; gap:1.4rem; }

.rule{
  padding:1.6rem;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line-soft);
}

.rule h3{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin-bottom:.9rem;
}

.rule h3 .num{
  font-weight:900;
  font-style:italic;
  color:var(--accent);
  font-size:1.15rem;
}

.rule ul{ list-style:none; display:grid; gap:.6rem; }

.rule li{
  position:relative;
  padding-left:1.2rem;
  color:var(--dim);
  font-size:.95rem;
}

.rule li::before{
  content:"";
  position:absolute;
  left:0; top:.65em;
  width:.4rem; height:.4rem;
  border-radius:50%;
  background:var(--accent-soft);
}

.notice{
  margin-top:2rem;
  padding:1.2rem 1.4rem;
  border-radius:var(--radius);
  background:rgba(255,124,152,.08);
  border:1px solid rgba(255,124,152,.28);
  color:var(--text);
  font-size:.95rem;
}

/* --- Boutique --------------------------------------------------------- */

.packs{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }

.pack{
  display:flex;
  flex-direction:column;
  padding:1.8rem;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line-soft);
}

.pack.feature{ border-color:var(--accent-soft); background:#221515; }

.pack .price{
  margin:.8rem 0 1.2rem;
  font-weight:900;
  font-style:italic;
  font-size:2.2rem;
  line-height:1;
  /* Les montants restent blancs : l accent est deja partout sur la page,
     un prix doit se lire comme une information, pas comme un bouton. */
  color:#fff;
}

.pack .price small{
  display:block;
  margin-top:.5rem;
  font-size:.68rem;
  font-style:normal;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}

.pack ul{ list-style:none; display:grid; gap:.6rem; margin-bottom:1.6rem; }

.pack li{
  position:relative;
  padding-left:1.3rem;
  color:var(--dim);
  font-size:.92rem;
}

.pack li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:.5rem; height:.5rem;
  border-radius:2px;
  background:var(--accent);
}

.pack .btn{ margin-top:auto; justify-content:center; }

/* --- Pied de page ----------------------------------------------------- */

.foot{
  border-top:1px solid var(--line-soft);
  padding:2.6rem 0;
  background:var(--panel);
}

.foot .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}

.foot p{ font-size:.82rem; }

.foot .links{ display:flex; gap:1.2rem; flex-wrap:wrap; }

.foot .links a{
  color:var(--faint);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:color .18s var(--ease);
}

.foot .links a:hover{ color:var(--accent); }

/* --- 404 -------------------------------------------------------------- */

.center{ text-align:center; padding:8rem 0; }
.center .heroActions{ justify-content:center; }


/* =====================================================================
   FOND, LOGO ET ANIMATIONS
   ===================================================================== */

/* Le fond est un element a part, en position:fixed. Mis en
   background-attachment:fixed sur body, il disparait une fois sur deux sur
   mobile et Safari — ici il ne bouge jamais.

   Le voile par-dessus n est pas decoratif : sans lui, le texte blanc passe
   sur les zones claires de l image. */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(12,12,12,.82) 0%, rgba(12,12,12,.90) 45%, rgba(12,12,12,.97) 100%),
    url('/assets/img/bg.webp') center / cover no-repeat fixed;
  animation:bgIn 1.4s var(--ease) both;
}

@keyframes bgIn{
  from{ opacity:0; transform:scale(1.04); }
  to{ opacity:1; transform:scale(1); }
}

/* Les surfaces reposent sur le fond : elles gardent un noir translucide
   plutot qu un aplat, sinon l image ne se devine plus nulle part. */
.top{ background:rgba(12,12,12,.78); }
.card, .step, .rule, .pack, .connect{ background:rgba(21,21,21,.82); }
.card:hover{ background:rgba(26,26,26,.9); }
.pack.feature{ background:rgba(34,21,21,.86); }
.foot{ background:rgba(17,17,17,.86); }

/* --- Logo ------------------------------------------------------------- */

.brand{ display:inline-flex; align-items:center; line-height:0; }

.brand img{
  width:auto;
  height:2.6rem;
  display:block;
  transition:transform .25s var(--ease), filter .25s var(--ease);
}

.brand:hover img{
  transform:scale(1.04);
  filter:drop-shadow(0 0 .8rem rgba(255,41,41,.35));
}

/* --- Entree de page ----------------------------------------------------
   Chaque element monte et s eclaircit, decale par --d. Rien ne clignote :
   l etat de depart est pose par le both, pas par un script. */

.rise{ animation:rise .8s var(--ease) both; animation-delay:var(--d, 0s); }

@keyframes rise{
  from{ opacity:0; transform:translateY(1.4rem); }
  to{ opacity:1; transform:translateY(0); }
}

/* Le halo respire une fois, a l arrivee. */
.bg::before{ animation:halo 1.8s var(--ease) both; }

@keyframes halo{
  from{ opacity:0; transform:scale(.94); }
  to{ opacity:1; transform:scale(1); }
}

/* --- Apparition au defilement ------------------------------------------
   Pilotee par la position dans la fenetre, sans une ligne de JavaScript :
   le site garde sa politique de securite stricte (script-src 'none').
   Les navigateurs qui ne connaissent pas animation-timeline affichent le
   contenu normalement — c est un bonus, jamais une condition. */

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .card, .step, .rule, .pack, .sectionHead, .notice{
      animation:reveal .7s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
  }
}

@keyframes reveal{
  from{ opacity:0; transform:translateY(1.6rem); }
  to{ opacity:1; transform:translateY(0); }
}

/* --- Respect du reglage systeme ---------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .rise, .bg, .bg::before{ animation:none; }
  .brand img{ transition:none; }
}


/* =====================================================================
   CATALOGUE TEBEX
   Les cartes fabriquees par shop.js quand le token public est renseigne.
   Sans token, ce sont les formules ecrites a la main (.pack) qui restent :
   les deux mises en page cohabitent dans le meme conteneur.
   ===================================================================== */

/* Le conteneur est une grille tant qu il porte les formules ecrites a la
   main. Une fois rempli par Tebex il contient des sections entieres, qui ne
   doivent surtout pas devenir des cases de grille. */
.packs.is-live{ display:block; }

.shopCat + .shopCat{ margin-top:3.2rem; }

.catHead{
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin-bottom:1.4rem;
}

.catHead h3{
  font-weight:900;
  font-style:italic;
  font-size:1.15rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Le filet mange la largeur restante : le titre garde sa place quelle que
   soit sa longueur. */
.catRule{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--line-hi), transparent);
}

.prods{
  display:grid;
  gap:1rem;
  /* auto-fit, pas auto-fill : trois produits remplissent la ligne au lieu de
     laisser une colonne vide sur la droite. */
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}

.prod{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
  transition:border-color .18s var(--ease), background .18s var(--ease),
             transform .18s var(--ease);
}

.prod:hover{
  background:rgba(26,26,26,.9);
  border-color:var(--line-hi);
  transform:translateY(-2px);
}

/* --- Visuel -------------------------------------------------------------
   Rapport fixe : les visuels Tebex arrivent dans toutes les tailles, et sans
   cadrage impose la grille partirait en escalier. */
.prodMedia{
  position:relative;
  /* Hauteur fixe : une categorie a un seul produit etale sa carte sur toute
     la largeur, et un rapport fixe en ferait une affiche de 700px de haut.
     Passer par aspect-ratio + max-height ne marche pas : le navigateur
     retrecit alors la largeur pour tenir le rapport. */
  height:172px;
  background:#0F0F0F;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}

.prodMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Produit sans visuel, ou visuel introuvable : le logo en filigrane plutot
   qu un trou noir. */
.prodMedia.is-vide::after{
  content:"";
  position:absolute;
  inset:0;
  background:url('../img/logo.png') center / 2.6rem no-repeat;
  opacity:.16;
}

.prodBody{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.2rem 1.2rem 1.1rem;
}

.prodBody h4{
  font-weight:900;
  font-style:italic;
  font-size:1rem;
  line-height:1.25;
  margin-bottom:.5rem;
}

/* Trois lignes au plus : les descriptions Tebex vont parfois jusqu au roman,
   et une carte plus haute que les autres casse la grille. */
.prodDesc{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--dim);
  font-size:.88rem;
  line-height:1.5;
  margin-bottom:1.1rem;
}

.prodFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:auto;
}

.prodPrices{ display:flex; align-items:baseline; gap:.5rem; }

.prodPrice{
  font-weight:900;
  font-style:italic;
  font-size:1.4rem;
  line-height:1;
  color:#fff;
}

/* Prix barre : affiche seulement quand une promotion est reellement en
   cours, sinon il ferait croire a une reduction inexistante. */
.prodOld{
  font-size:.82rem;
  color:var(--faint);
  text-decoration:line-through;
}


@media (max-width:520px){
  .prods{ grid-template-columns:1fr; }
  .catHead h3{ white-space:normal; }
}

/* Les cartes du catalogue apparaissent au defilement comme le reste du
   site. Meme mecanique, sans JavaScript. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .prod{
      animation:reveal .7s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
  }
}

/* --- Pied de carte ------------------------------------------------------
   Le bouton prend toute la largeur, comme sur les formules ecrites a la main.
   Cote a cote, il passait a la ligne des qu un prix barre s ajoutait : une
   carte sur deux se retrouvait plus haute que ses voisines. */
.prodFoot{ display:block; margin-top:auto; }
.prodPrices{ margin-bottom:.9rem; }
.prodFoot .btn{ width:100%; justify-content:center; }

/* --- Centrage vertical dans les boutons ---------------------------------
   Nexa a une hampe haute (0.80em) et une jambe basse (0.40em). Le navigateur
   centre cette boite-la, pas les lettres : des capitales, qui n ont ni jambage
   ni descendante, se posent environ 0.16em trop haut. On rend cette avance en
   padding. La valeur est mesuree, pas estimee — et elle vaut pour des libelles
   en capitales, ce que .btn impose par text-transform. */
.btn{
  padding-top:calc(.95rem + .16em);
  padding-bottom:calc(.95rem - .16em);
}

.prodFoot .btn{
  padding-top:calc(.7rem + .16em);
  padding-bottom:calc(.7rem - .16em);
  padding-left:1.1rem;
  padding-right:1.1rem;
  font-size:.76rem;
}


/* =====================================================================
   BOUTIQUE : FOND, ONGLETS, ETAPES, ACHAT, FICHE PRODUIT
   ===================================================================== */

/* --- Fond propre a la boutique ------------------------------------------ */
.bg--boutique{
  background-image:
    linear-gradient(180deg, rgba(12,12,12,.80) 0%, rgba(12,12,12,.90) 45%, rgba(12,12,12,.97) 100%),
    url('../img/bg-boutique.webp');
}

/* --- Centrage vertical dans la barre du haut -----------------------------
   Meme correction que sur les boutons : Nexa pose ses capitales environ
   0.16em trop haut, et les liens de la barre en sont des. */
.nav a{
  padding-top:calc(.55rem + .16em);
  padding-bottom:calc(.55rem - .16em);
}

/* --- Onglets de categories ---------------------------------------------- */

.cats{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:2.4rem;
}

.cat{
  padding:calc(.75rem + .16em) 1.2rem calc(.75rem - .16em);
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--elem);
  color:var(--dim);
  font-family:inherit;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease);
}

.cat:hover{ background:var(--elem-hi); border-color:var(--line-hi); color:var(--text); }

.cat.is-on{
  background:var(--accent-faint);
  border-color:var(--accent-soft);
  color:var(--accent);
}

/* --- Les deux etapes ----------------------------------------------------- */

.etapes{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom:3.2rem;
}

.etape{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.2rem;
  padding:1.6rem;
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
  transition:border-color .2s var(--ease);
}

/* Etape franchie : le vert de la charte, le meme que le bouton d achat. */
.etape.is-ok{ border-color:rgba(124,224,168,.34); }

.etapeNum{
  width:2.6rem; height:2.6rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--accent-faint);
  border:1px solid var(--accent-soft);
  color:var(--accent);
  font-weight:900; font-style:italic;
  font-size:1.1rem;
  /* Le chiffre est seul dans son rond : meme avance a rendre qu ailleurs. */
  padding-top:.16em;
}

.etape.is-ok .etapeNum{
  background:rgba(124,224,168,.13);
  border-color:rgba(124,224,168,.42);
  color:var(--green);
}

.etapeBody h3{
  font-weight:900; font-style:italic;
  font-size:1.05rem;
  margin-bottom:.5rem;
}

.etapeBody p{ color:var(--dim); font-size:.92rem; line-height:1.55; }
.etapeBody b{ color:var(--text); font-weight:700; }

.etapeForm{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }

.etapeForm input{
  flex:1;
  min-width:9rem;
  padding:calc(.85rem + .16em) 1rem calc(.85rem - .16em);
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:#0F0F0F;
  color:var(--text);
  font-family:inherit;
  font-size:.9rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:border-color .18s var(--ease);
}

.etapeForm input::placeholder{ color:var(--faint); letter-spacing:.1em; }
.etapeForm input:focus{ outline:none; border-color:var(--accent-soft); }

.etapeEtat{
  margin-top:.9rem;
  font-size:.85rem;
  color:var(--faint);
}

.etapeEtat.is-ok{ color:var(--green); }

@media (max-width:520px){
  .etape{ grid-template-columns:1fr; gap:.9rem; }
}

/* --- Bouton d achat ------------------------------------------------------
   Vert, panier a gauche. Le texte recoit l avance Nexa habituelle, ce qui
   descend TOUT le contenu du bouton : l icone, elle, n a pas de metrique de
   police et se retrouverait 0.16em trop bas. On la remonte d autant. */

.btn.buy{
  background:rgba(124,224,168,.13);
  border-color:rgba(124,224,168,.42);
  color:var(--green);
}

.btn.buy:hover{
  background:rgba(124,224,168,.22);
  border-color:rgba(124,224,168,.62);
  color:#A6F0C6;
}

.btnIco{
  display:block;
  transform:translateY(-.16em);
}

.btnIco svg{
  width:1.15em;
  height:1.15em;
  display:block;
}

/* --- Fiche produit ------------------------------------------------------- */

body.no-scroll{ overflow:hidden; }

.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:1.4rem;
}

.modal[hidden]{ display:none; }

.modalBack{
  position:absolute;
  inset:0;
  background:rgba(6,6,6,.78);
  animation:fondu .2s var(--ease) both;
}

.modalCard{
  position:relative;
  width:min(680px, 100%);
  max-height:88vh;
  overflow:auto;
  border-radius:var(--radius);
  background:#131313;
  border:1px solid var(--line-hi);
  box-shadow:var(--shadow);
  animation:monte .28s var(--ease) both;
}

@keyframes fondu{ from{ opacity:0; } to{ opacity:1; } }
@keyframes monte{
  from{ opacity:0; transform:translateY(1.2rem) scale(.985); }
  to{ opacity:1; transform:none; }
}

.modalX{
  position:absolute;
  top:.9rem; right:.9rem;
  z-index:2;
  width:2.2rem; height:2.2rem;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(12,12,12,.72);
  color:var(--dim);
  /* La croix vient d une autre police : Nexa n en a pas de bien dessinee. */
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
}

.modalX:hover{ background:var(--elem-hi); color:var(--text); }

.modalMedia{
  /* Hauteur fixe, pas aspect-ratio + max-height : sous cette combinaison le
     navigateur retrecit aussi la LARGEUR pour tenir le rapport, et le visuel
     ne couvrait plus que les deux tiers de la fiche. */
  height:240px;
  background:#0F0F0F;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}

/* cover par defaut, contain sur les visuels carres (voir .is-entier). */
.modalMedia img{ width:100%; height:100%; object-fit:cover; display:block; }

.modalMedia.is-vide{ position:relative; }
.modalMedia.is-vide::after{
  content:"";
  position:absolute; inset:0;
  background:url('../img/logo.png') center / 3rem no-repeat;
  opacity:.16;
}

.modalBody{ padding:1.6rem 1.6rem 1.4rem; }

.modalCat{
  font-weight:900; font-style:italic;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.6rem;
}

.modalBody h3{
  font-weight:900; font-style:italic;
  font-size:1.5rem;
  line-height:1.15;
  margin-bottom:1rem;
}

/* pre-line : les retours a la ligne de la description sont conserves. */
.modalDesc{
  color:var(--dim);
  font-size:.94rem;
  line-height:1.6;
  white-space:pre-line;
}

.modalDesc p + p{ margin-top:.9rem; }

/* Une bonne partie des fiches n a pas un mot de texte : toute la
   description est une image. */
.modalImg{
  display:block;
  width:auto;
  max-width:100%;
  max-height:220px;
  margin:0 auto 1rem;
  border-radius:var(--radius-sm);
}

.modalFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line-soft);
}

.modalFoot .prodPrices{ margin:0; }
.modalFoot .btn{ width:auto; }

@media (max-width:520px){
  .modalFoot{ display:block; }
  .modalFoot .prodPrices{ margin-bottom:1rem; }
  .modalFoot .btn{ width:100%; justify-content:center; }
}

/* La carte entiere est cliquable : on le montre. */
.prod{ cursor:pointer; }
.prod:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }

/* Bandeau sans trait de separation : sur la boutique il tombait entre les
   onglets et les etapes, en plein milieu du parcours d achat. */
.hero.no-line{ border-bottom:none; }

/* Les onglets suivent maintenant les etapes. */
.cats{ margin-top:0; margin-bottom:2.2rem; }

/* Un <button> ne centre pas son texte comme une boite ordinaire, et les
   emoji des categories tirent la hauteur de ligne vers le haut : on fige la
   ligne a 1em et on rend l avance de Nexa en padding, comme ailleurs. */
.cat{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  line-height:1;
  padding-top:calc(.85rem + .16em);
  padding-bottom:calc(.85rem - .16em);
}


/* =====================================================================
   BARRE DE DEFILEMENT
   La native est masquee, ui.js pose la sienne : un trait fin a droite,
   centre en hauteur, sur lequel voyage le « A » du logo.
   ===================================================================== */

/* Masquage de la barre native. Deux syntaxes, aucune n est de trop :
   scrollbar-width pour Firefox, ::-webkit-scrollbar pour tout le reste. */
html{ scrollbar-width:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; display:none; }

.modalCard{ scrollbar-width:none; }
.modalCard::-webkit-scrollbar{ width:0; display:none; }

.sbar{
  position:fixed;
  right:1.1rem;
  top:50%;
  transform:translateY(-50%);
  z-index:150;
  width:2.2rem;
  height:34vh;
  min-height:170px;
  max-height:420px;
  display:none;
  user-select:none;
  -webkit-user-select:none;
}

/* Posee seulement quand la page defile vraiment. */
.sbar.is-ready{ display:block; }

.sbarTrack{
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:2px;
  margin-left:-1px;
  border-radius:2px;
  background:rgba(255,255,255,.09);
  cursor:pointer;
  /* La zone saisissable deborde largement du trait : viser deux pixels a la
     souris serait une punition. */
  box-shadow:0 0 0 .9rem transparent;
  transition:background .35s var(--ease);
}

.sbar.is-active .sbarTrack{ background:rgba(255,255,255,.16); }

/* La part deja parcourue, dans l accent de la charte. */
.sbarFill{
  position:absolute;
  left:0; right:0; top:0;
  height:0;
  border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--accent-soft));
  opacity:.55;
  transition:opacity .35s var(--ease);
}

.sbar.is-active .sbarFill{ opacity:1; }

/* Le repere : le « A » du logo. Absent au repos, il surgit au defilement
   puis se retire. */
.sbarThumb{
  position:absolute;
  left:50%;
  top:0;
  width:1.9rem;
  height:1.9rem;
  margin-left:-.95rem;
  margin-top:-.95rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  opacity:0;
  transform:scale(.5);
  cursor:grab;
  transition:opacity .38s var(--ease), transform .45s var(--ease),
             filter .38s var(--ease);
}

.sbar.is-active .sbarThumb{
  opacity:1;
  transform:scale(1);
  filter:drop-shadow(0 0 .5rem rgba(255,41,41,.45));
}

/* Saisi : legerement enfonce, et la main se ferme. */
.sbar.is-drag .sbarThumb{
  transform:scale(1.12);
  cursor:grabbing;
}

.sbarThumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

/* Le repere n a volontairement pas de transition de position : il doit
   coller au doigt pendant un glissement, et suivre la molette sans retard. */

@media (prefers-reduced-motion: reduce){
  .sbarThumb{ transition:opacity .01s; }
}

/* Ecrans etroits : le trait mangerait le peu de largeur disponible, et le
   defilement au doigt se passe tres bien de repere. La barre native reprend
   sa place, sinon on ne saurait plus ou l on en est. */
@media (max-width:720px){
  .sbar{ display:none !important; }
  html{ scrollbar-width:auto; }
  html::-webkit-scrollbar, body::-webkit-scrollbar{ width:auto; display:block; }
}

/* --- Respiration du bandeau de la boutique ------------------------------
   Le bandeau et les etapes se touchent presque : 6rem de vide entre les deux
   coupaient la page en deux. */
.hero.no-line{ padding-bottom:1.4rem !important; }
.hero.no-line + section{ padding-top:0 !important; }

/* Fond propre a la page lore. */
.bg--lore{
  background-image:
    linear-gradient(180deg, rgba(12,12,12,.80) 0%, rgba(12,12,12,.90) 45%, rgba(12,12,12,.97) 100%),
    url('../img/bg-lore.webp');
}

/* --- Trainee de la barre de defilement -----------------------------------
   Des « A » plus petits courent derriere le principal. Leur position et leur
   opacite sont pilotees image par image par ui.js : rien n est fixe ici, la
   feuille ne fait que decrire leur allure.

   Pas de transition sur ces elements : ils sont deja lisses par le retard
   qu ils prennent dans la boucle, en ajouter une les ferait flotter. */
.sbarGhost{
  position:absolute;
  left:50%;
  top:0;
  width:1.45rem;
  height:1.45rem;
  margin-left:-.725rem;
  display:grid;
  place-items:center;
  opacity:0;
  /* Position, inclinaison et taille sont ecrites par ui.js a chaque image :
     cette valeur n est que l etat de depart, avant la premiere boucle. */
  transform:translate(0, -50%) scale(.3);
  pointer-events:none;
  will-change:top, opacity, transform;
}

.sbarGhost img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  opacity:.8;
}

.sbar.is-active .sbarGhost img{
  filter:drop-shadow(0 0 .35rem rgba(255,41,41,.5));
}

/* Reglage systeme respecte : plus de trainee du tout. */
@media (prefers-reduced-motion: reduce){
  .sbarGhost{ display:none; }
}

/* Onglet retenu : le Nexa le plus epais de la charte. */
.cat.is-on{ font-weight:900; }

/* Pendant un glissement de la barre, plus rien ne se selectionne dans la
   page : sans cela le geste surligne les paragraphes qu il traverse. */
body.sbar-drag{ user-select:none; -webkit-user-select:none; cursor:grabbing; }

/* Le « A » du repere ne recoit pas le pointeur : les evenements visent le
   repere lui-meme, et l image ne peut plus lancer de glisser-deposer. */
.sbarThumb img{ pointer-events:none; -webkit-user-drag:none; }
.sbarGhost img{ -webkit-user-drag:none; }

/* =====================================================================
   SELECTION DE TEXTE
   Le site ne se surligne plus : un clic un peu long ne bleuit plus un
   titre, un double-clic ne selectionne plus un mot.

   Deux exceptions, volontaires : ce qu on doit pouvoir recopier reste
   selectionnable. Tout couper rendrait l adresse du serveur impossible a
   attraper a la souris, et un champ de saisie ou l on ne peut ni corriger
   ni tout remplacer est une punition.
   ===================================================================== */

body{
  user-select:none;
  -webkit-user-select:none;
}

input,
textarea,
.connect code,
.connect .label{
  user-select:text;
  -webkit-user-select:text;
}


/* --- Cadrage des visuels -------------------------------------------------
   Par defaut le visuel remplit le cadre : c est ce qui rend une banniere
   large franche, bord a bord.

   is-entier est pose par shop.js sur les visuels CARRES, que le cadre — plus
   large que haut — amputerait du haut et du bas : les gemmes des lots de
   coins y perdaient leur pointe. Ceux-la sont montres en entier, avec un peu
   d air pour ne pas toucher le bord. */
.prodMedia{ height:196px; }

.prodMedia.is-entier{ padding:.7rem; }
.prodMedia.is-entier img{ object-fit:contain; }

.modalMedia.is-entier{ padding:1rem; }
.modalMedia.is-entier img{ object-fit:contain; }

/* Banniere : le cadre epouse le rapport de l image, donc rien n est coupe et
   rien ne flotte. Surtout pas de max-height ici — combine a aspect-ratio, le
   navigateur retrecit aussi la largeur pour tenir le rapport. */
.prodMedia.is-banniere,
.modalMedia.is-banniere{
  height:auto;
  padding:0;
}

.prodMedia.is-banniere img,
.modalMedia.is-banniere img{ object-fit:cover; }


/* =====================================================================
   LE PANIER
   Un bouton flottant, un volet lateral, et le vol du visuel a l ajout.
   ===================================================================== */

/* Le bouton se place SOUS la barre de defilement, qui occupe le milieu du
   bord droit : les deux se disputeraient le meme coin sinon. */
.cartBtn{
  position:fixed;
  right:1.4rem;
  bottom:1.6rem;
  z-index:160;
  width:3.4rem;
  height:3.4rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line-hi);
  background:rgba(19,19,19,.92);
  color:var(--dim);
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}

.cartBtn:hover{ color:var(--text); border-color:var(--accent-soft); transform:translateY(-2px); }

/* Panier non vide : il passe au vert, comme les boutons d ajout. */
.cartBtn.is-plein{
  background:rgba(124,224,168,.14);
  border-color:rgba(124,224,168,.45);
  color:var(--green);
}

.cartIco{ display:block; width:1.5rem; height:1.5rem; }
.cartIco svg{ width:100%; height:100%; display:block; }

.cartCount{
  position:absolute;
  top:-.25rem; right:-.25rem;
  min-width:1.4rem;
  height:1.4rem;
  padding:0 .35rem;
  display:grid;
  place-items:center;
  border-radius:.7rem;
  background:var(--green);
  color:#0B1A12;
  font-size:.72rem;
  font-weight:900;
  font-style:italic;
  /* Meme avance a rendre qu ailleurs : Nexa pose ses chiffres trop haut. */
  padding-top:.16em;
}

/* Secousse a la reception du vol : c est ce qui fait comprendre que le
   produit est bien arrive. */
.cartBtn.is-recu{ animation:recu .5s var(--ease); }

@keyframes recu{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.22) rotate(-7deg); }
  60%{ transform:scale(.95) rotate(3deg); }
  100%{ transform:scale(1); }
}

/* --- Le fantome en vol ---------------------------------------------------
   Pose sur <body>, hors de tout conteneur : une carte en overflow:hidden
   l aurait tranche en plein trajet. */
.vol{
  position:fixed;
  z-index:210;
  pointer-events:none;
  border-radius:var(--radius-sm);
  overflow:hidden;
  will-change:transform, opacity;
}

.vol img{ width:100%; height:100%; object-fit:contain; display:block; }
.vol svg{ width:100%; height:100%; color:var(--green); }

/* --- Le volet ------------------------------------------------------------- */

.cartPanel{
  position:fixed;
  top:0; right:0; bottom:0;
  z-index:170;
  width:min(23rem, 100%);
  display:flex;
  flex-direction:column;
  background:#101010;
  border-left:1px solid var(--line-hi);
  box-shadow:-24px 0 60px rgba(0,0,0,.55);
  /* Ferme, il est pousse hors de l ecran ET rendu inerte : sans
     visibility, ses boutons resteraient attrapables au clavier. */
  transform:translateX(102%);
  visibility:hidden;
  transition:transform .34s var(--ease), visibility .34s;
}

.cartPanel.is-on{ transform:none; visibility:visible; }

.cartHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.4rem 1.4rem 1.1rem;
  border-bottom:1px solid var(--line-soft);
}

.cartHead h3{
  font-weight:900; font-style:italic;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.cartClose{
  width:2.2rem; height:2.2rem;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--elem);
  color:var(--dim);
  /* La croix vient d une autre police : Nexa n en a pas de bien dessinee. */
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
}

.cartClose:hover{ background:var(--elem-hi); color:var(--text); }

.cartList{
  flex:1;
  overflow:auto;
  padding:.9rem 1rem;
  scrollbar-width:none;
}

.cartList::-webkit-scrollbar{ width:0; display:none; }

.cartLine{
  display:grid;
  grid-template-columns:3.2rem 1fr auto;
  align-items:center;
  gap:.9rem;
  padding:.7rem;
  border-radius:var(--radius-sm);
  transition:background .18s var(--ease);
}

.cartLine:hover{ background:var(--elem); }

.cartVign{
  width:3.2rem; height:3.2rem;
  border-radius:var(--radius-sm);
  background:#0C0C0C;
  border:1px solid var(--line-soft);
  overflow:hidden;
}

.cartVign img{ width:100%; height:100%; object-fit:contain; display:block; }

.cartNom{
  font-size:.86rem;
  font-weight:700;
  line-height:1.3;
  /* Deux lignes au plus : certains noms de packs sont a rallonge. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.cartQte{ margin-top:.2rem; font-size:.8rem; color:var(--accent); font-weight:700; }

.cartX{
  width:1.8rem; height:1.8rem;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid transparent;
  background:transparent;
  color:var(--faint);
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  transition:color .18s var(--ease), background .18s var(--ease);
}

.cartX:hover{ background:rgba(255,124,152,.12); color:var(--red); }

.cartEmpty{
  padding:2.4rem 1.4rem;
  text-align:center;
  color:var(--faint);
  font-size:.9rem;
}

.cartFoot{
  padding:1.2rem 1.4rem 1.4rem;
  border-top:1px solid var(--line-soft);
  background:#0D0D0D;
}

.cartNote{
  margin-bottom:.9rem;
  padding:.7rem .8rem;
  border-radius:var(--radius-sm);
  background:rgba(255,124,152,.1);
  border:1px solid rgba(255,124,152,.3);
  font-size:.82rem;
  line-height:1.45;
}

.cartNote.is-ok{
  background:rgba(124,224,168,.1);
  border-color:rgba(124,224,168,.32);
  color:var(--green);
}

.cartTotalRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:1rem;
}

.cartTotalRow span{
  font-size:.7rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}

.cartTotalRow strong{
  font-weight:900;
  font-style:italic;
  font-size:1.5rem;
  color:#fff;
}

#cartGo{ width:100%; justify-content:center; }

#cartGo:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.cartSafe{
  margin-top:.9rem;
  font-size:.75rem;
  line-height:1.5;
  color:var(--faint);
  text-align:center;
}

/* Le bouton d ajout occupe pendant l appel a Tebex. */
.btn.is-busy{ opacity:.6; cursor:progress; }

@media (max-width:520px){
  .cartBtn{ right:1rem; bottom:1rem; }
}

/* --- Le cas des <button> --------------------------------------------------
   Mesure, deux fois : un <a class="btn"> et un <button class="btn"> ne se
   centrent PAS pareil. Le navigateur cale lui-meme le contenu d un bouton
   sur ses lettres, la ou un lien suit la boite de la police — et Nexa y pose
   ses capitales trop haut.

   Le lien a donc besoin de l avance de 0.16em, le bouton non : la lui donner
   le fait descendre de 2px. Figer la hauteur de ligne ne change rien a cette
   difference, elle a ete essayee.

   Regle a retenir pour tout nouveau bouton : la classe .btn suffit, la
   correction se fait toute seule selon la balise employee. */
button.btn{
  padding-top:calc(.95rem);
  padding-bottom:calc(.95rem);
}

.prodFoot button.btn{
  padding-top:.7rem;
  padding-bottom:.7rem;
}

/* --- Ajouter ou se connecter ---------------------------------------------
   Tebex refuse l ajout au panier tant que le compte de jeu n est pas relie.
   Le bouton porte donc ses deux libelles, et c est l etat de la page qui
   decide lequel se voit : aucune carte n est refabriquee a la connexion. */
.btn.buy .l-login{ display:none; }
body:not(.is-auth) .btn.buy .l-add{ display:none; }
body:not(.is-auth) .btn.buy .l-login{ display:inline; }

/* --- L attribut hidden l emporte toujours --------------------------------
   Une regle `display:` de la charte le neutralise en silence : le compteur du
   panier, en display:grid, restait affiche a « 0 » malgre son hidden. Pose
   une bonne fois pour toutes plutot qu au cas par cas. */
[hidden]{ display:none !important; }

/* Lien de deconnexion, glisse dans la ligne verte « Connecté en tant que ».
   Gris : c est une porte de sortie, pas une action mise en avant. */
.lienGris{
  border:0;
  background:none;
  padding:0;
  font:inherit;
  font-size:.85em;
  color:var(--faint);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:.18em;
  transition:color .18s var(--ease);
}

.lienGris:hover{ color:var(--dim); }

/* =====================================================================
   REMPLACEMENT DES STYLES EN LIGNE
   La politique de securite du site interdit `style="..."` dans le
   balisage. Ces classes portent ce qui y etait ecrit — sans elles, les
   retards d animation et les marges de section etaient bloques par le
   navigateur, en silence.
   ===================================================================== */

.hero--court{ padding:5rem 0 3.4rem; }
.hero.no-line{ padding:5rem 0 1.4rem; }
.sansHaut{ padding-top:0; }
.hautCourt{ padding-top:3.4rem; }

.d1{ --d:.05s; }
.d2{ --d:.15s; }
.d3{ --d:.28s; }
.d4{ --d:.4s; }
.d5{ --d:.52s; }

.carteLarge{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
  padding:2.4rem;
}

.titreSuite{ margin-top:.6rem; }
.leadCentre{ margin-inline:auto; }

/* --- L icone dans un <button> --------------------------------------------
   Le texte d un <a class="btn"> recoit l avance Nexa de 0.16em, ce qui
   descend TOUT le contenu du bouton : l icone, qui n a pas de metrique de
   police, doit etre remontee d autant. Dans un <button>, il n y a pas
   d avance a rendre — la remontee ferait donc pencher l icone vers le haut.
   Une regle par balise, comme pour le texte. */
button .btnIco{ transform:none; }

/* Le nouveau panier est un dessin plein, plus lourd que l ancien contour :
   mesure, il tombe 0.5px sous la ligne du texte. */
button .btnIco{ transform:translateY(-.04em); }

/* =====================================================================
   MOYENS DE PAIEMENT ET MENTIONS
   ===================================================================== */

.pay{ padding:3.4rem 0 4rem; }

.payHead{
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin-bottom:1.4rem;
}

.payTitre{
  font-weight:900;
  font-style:italic;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
}

.payList{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}

/* Chaque marque dans son cadre : aligne les silhouettes, qui n ont ni la
   meme largeur ni la meme hauteur d une marque a l autre. */
.payList li{
  height:2.4rem;
  min-width:3.4rem;
  padding:0 .8rem;
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  background:rgba(21,21,21,.7);
  border:1px solid var(--line-soft);
  color:var(--faint);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}

.payList li:hover{ color:var(--dim); border-color:var(--line); }

.payList svg{
  width:auto;
  height:1.15rem;
  max-width:3rem;
  display:block;
  fill:currentColor;
}

/* Deux marques n ont pas de silhouette libre de droits : elles sont ecrites
   en toutes lettres. Redessiner un logo de memoire donne un faux logo, ce
   qui est pire que pas de logo du tout. */
.payMot{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.payNote{
  margin-top:1.1rem;
  font-size:.82rem;
  color:var(--faint);
}

.payArnaque{
  margin-top:1.4rem;
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:1rem 1.2rem;
  border-radius:var(--radius);
  background:rgba(255,124,152,.07);
  border:1px solid rgba(255,124,152,.24);
  font-size:.86rem;
  line-height:1.55;
  color:var(--dim);
}

.payArnaque svg{
  flex:none;
  width:1.15rem;
  height:1.15rem;
  margin-top:.15rem;
  color:var(--red);
}

/* --- Mentions Tebex ------------------------------------------------------- */

.tebexLegal{
  margin-top:1.2rem;
  font-size:.78rem;
  line-height:1.55;
  color:var(--faint);
  max-width:70ch;
}

.tebexLiens{
  margin-top:.7rem;
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
}

.tebexLiens a{
  font-size:.76rem;
  color:var(--faint);
  text-decoration:underline;
  text-underline-offset:.2em;
  transition:color .18s var(--ease);
}

.tebexLiens a:hover{ color:var(--dim); }

/* --- Respiration du catalogue ---------------------------------------------
   Les categories etaient trop ecartees les unes des autres : on descendait
   dans du vide entre deux rangees de produits. */
.shopCat + .shopCat{ margin-top:2rem; }
.catHead{ margin-bottom:1rem; }
.prods{ gap:.8rem; }
.pay{ padding-top:2.4rem; }

/* Les categories du catalogue sont des <section> : la regle globale
   `section{ padding:5rem 0 }` leur ajoutait 80px en haut ET en bas, soit
   pres de 200px de vide entre deux rangees de produits. */
.shopCat{ padding:0; }

/* --- Carte d appel Discord, sur l accueil ---------------------------------
   Le visuel est pose PAR-DESSUS le fond de la carte, pas a la place : le
   degrade garde le noir de la charte la ou se trouve le texte, et laisse
   l image se decouvrir vers la droite, du cote du bouton. Sans lui, le
   titre passait sur les zones claires du visuel. */
/* Le fond est repete a l identique sur :hover — sans cela, la regle
   generique `.card:hover` (plus specifique que .carteDiscord) remplacait
   tout le fond par un aplat, et le visuel disparaissait au survol.
   Aucun effet de survol sur la carte : il est reserve au bouton. */
.card.carteDiscord,
.card.carteDiscord:hover{
  position:relative;
  overflow:hidden;
  border-color:var(--line);
  background:
    linear-gradient(90deg,
      rgba(21,21,21,.97) 0%,
      rgba(21,21,21,.92) 42%,
      rgba(21,21,21,.55) 68%,
      rgba(21,21,21,.10) 100%),
    /* `contain` et non `cover` : la carte est tres large et courte, un cover
       recadrait l illustration au point de n en montrer qu une tranche. Calee
       a droite, elle occupe la zone ou le degrade s eclaircit. */
    url('../img/cta-discord.webp') right center / contain no-repeat;
}

.carteDiscord > *{ position:relative; }

/* L ancien visuel se degageait vers sa droite, ce qui laissait de la place au
   bouton par-dessus. Le nouveau est dense jusqu a son bord : le bouton
   retombait sur l ecran de l illustration. Le titre prend donc la ligne
   entiere et le bouton passe dessous, a gauche, la ou le degrade est opaque. */
.carteDiscord > div:first-child{ flex:1 1 100%; }


/* L icone Discord suit la meme regle que le panier : dans un <a>, tout le
   contenu descend de l avance Nexa, donc elle se remonte d autant. */
.icoDiscord{
  width:1.25em;
  height:1.25em;
  display:block;
  transform:translateY(-.16em);
}

button .icoDiscord{ transform:none; }

@media (max-width:640px){
  /* En colonne, le texte passerait sur la partie claire du visuel.

     Le selecteur doit porter les DEUX classes : `.carteDiscord` seul pese
     moins que le `.card.carteDiscord` du bloc de bureau, et se faisait
     ecraser malgre la media query. */
  .card.carteDiscord,
  .card.carteDiscord:hover{
    background:
      linear-gradient(180deg, rgba(21,21,21,.96) 0%, rgba(21,21,21,.74) 62%, rgba(21,21,21,.34) 100%),
      /* En colonne, l illustration passe sous le texte plutot que derriere. */
      url('../img/cta-discord.webp') center bottom / contain no-repeat;
  }
}

/* --- Lueur du curseur, accueil seulement ---------------------------------
   Pose par lueur.js. Elle passe PAR-DESSUS la page en mode « screen » :
   elle eclaircit ce qu elle survole au lieu de le recouvrir, ce qui la fait
   lire comme une lumiere et non comme un disque colle a l ecran.

   pointer-events:none est indispensable : sans lui, ce disque de 520px
   avalerait tous les clics de la page. */
.lueur{
  position:fixed;
  left:0; top:0;
  z-index:120;
  width:900px;
  height:900px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  /* Plus large, plus fondue et bien plus discrete : a .22 sur 520px elle
     faisait tache, on voyait le disque. Le flou acheve de gommer le bord. */
  background:radial-gradient(closest-side,
    rgba(255,41,41,.10),
    rgba(255,41,41,.045) 40%,
    transparent 70%);
  filter:blur(50px);
  transition:opacity .5s var(--ease);
  will-change:transform;
}

.lueur.is-on{ opacity:1; }

/* --- Bouton Discord de la carte d accueil --------------------------------
   Le fond translucide des boutons du site marche sur une page sombre, pas
   par-dessus un visuel : on voyait le Discord du fond a travers. Fond opaque
   ici, de la teinte exacte que donne le translucide sur une carte. */
.carteDiscord .btn.primary{
  background:#342020;
  border-color:var(--accent-soft);
}

.carteDiscord .btn.primary:hover{
  background:#422828;
  border-color:rgba(255,41,41,.55);
}

/* =====================================================================
   EN-TETE : tout centre, logo puis filet puis liens
   ===================================================================== */

.top .wrap{ justify-content:center; }

.topIn{
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

/* Le filet qui separe le logo des liens. */
.topBar{
  width:1px;
  height:1.5rem;
  background:var(--line-hi);
  flex:none;
}

/* Plus de cadre ni de fond sur les liens : la page courante se signale par
   la couleur et la graisse, rien d autre. */
.nav a,
.nav a:hover,
.nav a.on{
  background:none;
  border-color:transparent;
  padding-left:.55rem;
  padding-right:.55rem;
}

.nav a:hover{ color:var(--text); }

.nav a.on{
  color:var(--accent);
  font-weight:900;
}

/* La boutique est en or, toujours — c est le seul lien qui vend quelque
   chose. Page courante, elle reste or et prend la graisse. */
.nav a.navShop,
.nav a.navShop:hover,
.nav a.navShop.on{ color:var(--gold); }

.nav a.navShop:hover{ color:var(--gold-hi); }
.nav a.navShop.on{ font-weight:900; }

.navShop{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}

/* Le panier n a pas de metrique de police : il suit la meme correction que
   dans les boutons, sinon il flotte au-dessus de la ligne du texte. */
.navIco{
  width:.95em;
  height:.95em;
  display:block;
  transform:translateY(-.1em);
}

/* La carte Discord respire un peu plus. */
.carteDiscord{ padding-block:2.8rem; }

@media (max-width:640px){
  .topIn{ gap:.8rem; }
  .topBar{ display:none; }
}

/* =====================================================================
   FONDU AU CHANGEMENT DE PAGE
   Aucune ligne de JavaScript. Intercepter les clics pour faire disparaitre
   la page avant de naviguer aurait signifie qu un script en panne casse la
   navigation du site — hors de question pour un simple effet.
   ===================================================================== */


/* Un fondu a l ARRIVEE, pas un enchainement entre les deux pages.

   La transition entre documents a ete essayee et retiree : le navigateur
   photographie la page suivante avant que ses polices et son logo soient
   prets, et l on voyait le logo disparaitre et la police changer en plein
   fondu. Un fondu a l arrivee n a pas ce defaut — il ne montre jamais
   d etat intermediaire — et il marche dans tous les navigateurs. */
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }

body{ animation:pageIn .34s var(--ease) both; }

@media (prefers-reduced-motion: reduce){
  body{ animation:none; }
}

/* --- En-tete : du flou plutot que du noir --------------------------------
   Le fond etait un aplat sombre a 78% qui masquait la page derriere. On
   allege l aplat et on double le flou : le contenu se devine en passant
   dessous au lieu de disparaitre.

   Le -webkit- n est pas decoratif : sans lui, Safari ne floute rien et
   l en-tete devient une vitre transparente ou le texte se perd. */
.top{
  background:rgba(12,12,12,.42);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);
}

/* Repli pour les navigateurs sans flou d arriere-plan : l aplat sombre
   reprend sa place, sinon les liens passeraient sur l image du bandeau. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .top{ background:rgba(12,12,12,.86); }
}

/* =====================================================================
   EN-TETE FLOTTANT
   Une pastille centree qui ne touche ni le haut ni les bords.

   Elle reste en `sticky` et non en `fixed` : ainsi elle occupe sa place
   dans le flux et rien ne passe dessous au chargement. En fixed, il aurait
   fallu compenser sa hauteur a la main sur chaque page — et l oublier une
   fois suffit pour qu un titre se retrouve cache derriere.
   ===================================================================== */

.top{
  position:sticky;
  top:.9rem;
  z-index:50;
  width:fit-content;
  max-width:calc(100% - 2rem);
  margin:1.1rem auto 0;
  border:1px solid var(--line-hi);
  border-radius:999px;
  background:rgba(12,12,12,.42);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);
  box-shadow:0 12px 34px rgba(0,0,0,.42);
}

/* La largeur de page ne s applique pas ici : la pastille se regle sur son
   contenu, pas sur la colonne du site. */
.top .wrap{
  width:auto;
  margin:0;
  padding:.5rem 1.3rem;
}

.topIn{ gap:1.2rem; }

/* Le bandeau remontait de 7rem sous un en-tete qui, lui, ne prenait plus
   toute la hauteur : sans cet ajustement, un vide s ouvrait entre les deux. */
.hero{ padding-top:4.4rem; }
.hero--court{ padding-top:3.2rem; }
.hero.no-line{ padding-top:3.2rem; }

@media (max-width:640px){
  .top{ margin-top:.7rem; top:.6rem; }
  .top .wrap{ padding:.5rem .9rem; }
}

/* --- Personnage du bandeau d accueil -------------------------------------
   Purement decoratif, et pose hors du flux : il ne deplace rien, ne recoit
   aucun clic, et le bandeau le rogne deja par son overflow.

   Le masque le fond des deux cotes ou il toucherait un bord franc : a
   gauche pour qu il n arrive pas comme une vignette collee au texte, en bas
   pour qu il se dissolve dans la section suivante. Deux degrades combines
   en intersection — le pixel n est garde que s il passe les deux. */
.perso{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:min(58vw, 900px);
  /* Descendu : la boite deborde sous le bandeau et l image se cale en bas.

     Le fondu du bas doit etre ACHEVE avant le bord du bandeau. La boite
     depassant de 14%, ce bord tombe vers 88% de sa hauteur : un fondu qui
     courait jusqu a 100% laissait donc l image a moitie opaque au moment ou
     le bandeau la tranchait net. Il se termine maintenant a 86%. */
  bottom:-14%;
  background:url('../img/perso.webp') right bottom / contain no-repeat;
  pointer-events:none;
  z-index:0;

  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 42%),
    linear-gradient(180deg, #000 42%, rgba(0,0,0,.5) 68%, transparent 86%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 42%),
    linear-gradient(180deg, #000 42%, rgba(0,0,0,.5) 68%, transparent 86%);
  mask-composite:intersect;
}

/* Sous cette largeur il passerait derriere le texte au lieu de l accompagner. */
@media (max-width:900px){
  .perso{ display:none; }
}

/* --- Points du bandeau d accueil ------------------------------------------
   Trois reperes courts sous le texte. Ils rallongent le bandeau, ce qui
   laisse le personnage descendre, et disent l essentiel en une ligne. */
.heroPoints{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.8rem;
  margin-top:1.8rem;
  max-width:34rem;
}

.heroPoints li{
  position:relative;
  padding-left:1.15rem;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--dim);
}

.heroPoints li::before{
  content:"";
  position:absolute;
  left:0; top:.58em;
  width:.42rem; height:.42rem;
  border-radius:2px;
  background:var(--accent);
}

/* Le second paragraphe reste sous le premier, pas plus large. */
.hero .lead + .lead{ margin-top:1rem; }

@media (max-width:900px){
  .heroPoints{ max-width:none; }
}

/* --- La lueur passe SOUS l en-tete ---------------------------------------
   En mode « screen » par-dessus une pastille qui floute son arriere-plan,
   le halo se coupait net sur le contour de l en-tete : deux facons de
   composer qui ne s accordent pas. Sous l en-tete, il se devine a travers
   le flou, sans aucun bord. */
.lueur{ z-index:40; }

/* --- Halo du haut de page ------------------------------------------------
   Porte par le fond, en position fixe : il part du tout premier pixel de
   l ecran, sur toutes les pages, et rien ne peut le couper.

   Il est pose en ::before plutot qu ajoute aux couches de fond : chaque page
   redefinit son image de fond, ce qui l aurait efface a chaque fois. */
.bg::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:62vh;
  background:radial-gradient(72% 100% at 50% 0%,
    rgba(255,41,41,.13),
    rgba(255,41,41,.05) 46%,
    transparent 74%);
  pointer-events:none;
}

/* Les icones des boutons du bandeau suivent la meme regle que le panier :
   dans un <a>, tout le contenu descend de l avance Nexa, elles se remontent
   donc d autant. */
.icoJeu{
  width:1.2em;
  height:1.2em;
  display:block;
  transform:translateY(-.16em);
}

button .icoJeu{ transform:none; }

/* =====================================================================
   LES CHIFFRES DU SERVEUR
   ===================================================================== */

.statGrid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}

.stat{
  position:relative;
  overflow:hidden;
  padding:1.8rem 1.6rem;
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
}

/* Un halo discret dans l angle, pour que la carte ne soit pas un simple
   rectangle gris. */
.stat::after{
  content:"";
  position:absolute;
  right:-30%; top:-60%;
  width:80%; height:160%;
  background:radial-gradient(closest-side, var(--accent-faint), transparent 70%);
  pointer-events:none;
}

.statNum{
  display:block;
  font-weight:900;
  font-style:italic;
  font-size:2.6rem;
  line-height:1;
  color:var(--accent);
  /* Les chiffres defilent : sans chasse fixe, la carte tressaute a chaque
     changement de largeur. */
  font-variant-numeric:tabular-nums;
}

.statLabel{
  display:block;
  margin-top:.9rem;
  font-size:.9rem;
  font-weight:700;
  color:var(--text);
}

.statNote{
  display:block;
  margin-top:.25rem;
  font-size:.76rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
}

/* --- Le graphique --------------------------------------------------------- */

.chart{
  padding:1.8rem 1.6rem 1.4rem;
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
}

.chartTitre{
  font-weight:900;
  font-style:italic;
  font-size:1.05rem;
}

.chartLegende{
  margin-top:.3rem;
  font-size:.82rem;
  color:var(--faint);
}

.bars{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  align-items:end;
  gap:.6rem;
  height:190px;
  margin-top:1.8rem;
}

.bars li{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:.5rem;
  height:100%;
}

/* --h est ecrit par stats.js pendant l animation. */
.bar{
  width:100%;
  max-width:3.2rem;
  height:var(--h, 0%);
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg, var(--accent-soft), rgba(255,41,41,.16));
  border:1px solid rgba(255,41,41,.3);
  border-bottom:none;
}

/* Le jour le plus charge ressort, sinon on cherche le pic a l oeil. */
.bars li.is-haut .bar{
  background:linear-gradient(180deg, var(--accent), rgba(255,41,41,.3));
  border-color:var(--accent);
  box-shadow:0 0 1.6rem rgba(255,41,41,.32);
}

.barVal{
  font-size:.78rem;
  font-weight:900;
  font-style:italic;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}

.bars li.is-haut .barVal{ color:var(--accent); }

.bars em{
  font-style:normal;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
}

@media (max-width:560px){
  .bars{ height:150px; gap:.35rem; }
  .barVal{ font-size:.68rem; }
  .statNum{ font-size:2.1rem; }
}

/* =====================================================================
   LES DISCORD D ENTREPRISES
   Un defile continu de pastilles. Le nom apparait au survol, le clic ouvre
   l invitation.
   ===================================================================== */

.orbesHead{
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin:1.8rem 0 .2rem;
}

.orbesTitre{
  font-weight:900;
  font-style:italic;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
}

.orbes{
  overflow:hidden;
  /* Les pastilles se fondent aux deux bords : sans ce masque, elles
     apparaissent et disparaissent d un coup, ce qui trahit le procede. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  /* De la place au-dessus pour l etiquette du survol : la rangee est
     rognee pour le defile, sans ce rembourrage l etiquette serait coupee.
     Reduit au strict necessaire. */
  padding:2.1rem 0 .3rem;
}

.orbesPiste{
  display:flex;
  align-items:center;
  gap:1.4rem;
  width:max-content;
  animation:defile 42s linear infinite;
}

@keyframes defile{
  from{ transform:translateX(0); }
  /* La moitie exactement : c est la longueur d un exemplaire, donc la
     boucle est invisible. */
  to{ transform:translateX(-50%); }
}

/* On arrete tout au survol : viser une cible qui bouge est une punition. */
.orbes:hover .orbesPiste,
.orbes:focus-within .orbesPiste{ animation-play-state:paused; }

/* --- Une pastille --------------------------------------------------------- */

.orb{
  position:relative;
  flex:none;
  width:4.6rem;
  height:4.6rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--card);
  transition:transform .22s var(--ease), border-color .22s var(--ease),
             box-shadow .22s var(--ease);
}

.orb:hover,
.orb:focus-visible{
  transform:translateY(-4px) scale(1.06);
  border-color:var(--accent-soft);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  outline:none;
}

.orbInit{
  font-weight:900;
  font-style:italic;
  font-size:1.15rem;
  letter-spacing:.02em;
  /* Meme avance a rendre qu ailleurs : Nexa pose ses capitales trop haut. */
  padding-top:.16em;
}

/* Chaque entreprise sa teinte, pour qu on les distingue d un coup d oeil. */
.orb1{ color:#ff2929; } .orb1:hover{ background:rgba(255,41,41,.14); }
.orb2{ color:#7CE0A8; } .orb2:hover{ background:rgba(124,224,168,.14); }
.orb3{ color:#F2C879; } .orb3:hover{ background:rgba(242,200,121,.14); }
.orb4{ color:#FF7C98; } .orb4:hover{ background:rgba(255,124,152,.14); }
.orb5{ color:#7CC7E0; } .orb5:hover{ background:rgba(124,199,224,.14); }
.orb6{ color:#E0A87C; } .orb6:hover{ background:rgba(224,168,124,.14); }

/* --- L etiquette du survol ------------------------------------------------ */

.orbNom{
  position:absolute;
  bottom:calc(100% + .45rem);
  left:50%;
  transform:translate(-50%, .4rem);
  padding:.45rem .8rem calc(.45rem - .16em);
  padding-top:calc(.45rem + .16em);
  border-radius:var(--radius-sm);
  background:#181818;
  border:1px solid var(--line-hi);
  color:var(--text);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}

.orb:hover .orbNom,
.orb:focus-visible .orbNom{
  opacity:1;
  transform:translate(-50%, 0);
}

/* Reglage systeme respecte : plus de defile, mais la rangee reste
   parcourable a la main. */
@media (prefers-reduced-motion: reduce){
  .orbesPiste{ animation:none; }
  .orbes{ overflow-x:auto; }
}

/* --- Deux rangees : le legal et l illegal --------------------------------- */

/* Le style de pastille existait, mais seulement dans les cartes : ici il
   faut le poser en entier. */
.orbesHead .tag{
  flex:none;
  display:inline-block;
  padding:.35rem .6rem calc(.35rem - .16em);
  padding-top:calc(.35rem + .16em);
  border-radius:8px;
  border:1px solid var(--accent-soft);
  font-size:.68rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
}

.tagLegal{
  background:rgba(124,224,168,.12);
  border-color:rgba(124,224,168,.36);
  color:var(--green);
}

.tagIllegal{
  background:rgba(255,124,152,.12);
  border-color:rgba(255,124,152,.36);
  color:var(--red);
}

/* La rangee illegale defile en sens inverse : les deux lignes ne glissent
   pas du meme cote, ce qui evite l effet tapis roulant unique. */
.orbesPiste.aRebours{ animation-name:defileRebours; }

@keyframes defileRebours{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}

/* Teintes de la rangee illegale : la meme famille chaude, pour qu on
   distingue les deux lignes au premier coup d oeil. */
.orbR1{ color:#FF7C98; } .orbR1:hover{ background:rgba(255,124,152,.14); }
.orbR2{ color:#E0A87C; } .orbR2:hover{ background:rgba(224,168,124,.14); }
.orbR3{ color:#F2C879; } .orbR3:hover{ background:rgba(242,200,121,.14); }
.orbR4{ color:#FF9E7C; } .orbR4:hover{ background:rgba(255,158,124,.14); }
.orbR5{ color:#E07C9E; } .orbR5:hover{ background:rgba(224,124,158,.14); }
.orbR6{ color:#D98F8F; } .orbR6:hover{ background:rgba(217,143,143,.14); }

/* Le Discord illegal lui-meme : c est la porte d entree, il ne se confond
   pas avec un groupe. */
.orbPhare{
  color:var(--red);
  background:rgba(255,124,152,.1);
  border-color:rgba(255,124,152,.45);
  box-shadow:0 0 1.4rem rgba(255,124,152,.16);
}

.orbPhare:hover{
  background:rgba(255,124,152,.2);
  border-color:var(--red);
}

/* Un peu moins d air entre les deux rangees qu avant la premiere. */
.orbes + .orbesHead{ margin-top:.5rem; }

/* --- Les champs et boutons heritent de la police -----------------------------
   Un <button>, un <input> ou un <textarea> n heritent PAS de la police de la
   page : le navigateur leur impose la sienne. Les liens stylés en .btn
   passaient donc en Nexa, et les vrais boutons non — d ou des libelles
   d administration dans une police etrangere au site.

   Pose une bonne fois pour toutes, sur tous les champs. */
button,
input,
textarea,
select{
  font-family:inherit;
}