/* ============ TOKENS & RESET ============ */
:root{
  --bg:#10131f; --bg-2:#0b0e19; --card:#1a1f35; --card-2:#151a2e;
  --lime:#a3e635; --lime-2:#bef264;
  --orange:#fb923c; --gold:#fbbf24;
  --t1:#eceef6; --t2:#adb4cc; --t3:#818aa8;
  --line:rgba(129,138,168,.16); --line-2:rgba(129,138,168,.32);
  --ft:'Outfit',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  --fs:'Archivo Black','Outfit',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  background:
    radial-gradient(1000px 560px at 88% -6%, rgba(163,230,53,.055), transparent 60%),
    radial-gradient(820px 620px at -12% 32%, rgba(99,102,241,.07), transparent 60%),
    var(--bg);
  color:var(--t1);font:400 16px/1.6 var(--fb);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
fieldset{border:0}
h1,h2,h3{font-family:var(--ft);line-height:1.15}
::selection{background:var(--lime);color:#131a06}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:4px}
.container{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ BOUTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:700 .95rem/1 var(--ft);letter-spacing:.01em;border-radius:12px;padding:.85rem 1.5rem;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn-lime{background:linear-gradient(180deg,var(--lime-2),var(--lime));color:#131a06;
  box-shadow:0 10px 28px -12px rgba(163,230,53,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(163,230,53,.65)}
.btn-ghost{border:1px solid var(--line-2);background:rgba(236,238,246,.04);color:var(--t1)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.btn-orange{border:1px solid rgba(251,146,60,.5);background:rgba(251,146,60,.1);color:#ffc894}
.btn-orange:hover{background:rgba(251,146,60,.2);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1rem;font-size:.85rem;border-radius:10px}

/* ============ HEADER (densifié au scroll, greffe B) ============ */
.site-header{position:sticky;top:0;z-index:60;background:rgba(13,16,28,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(11,14,25,.92);border-bottom-color:var(--line);
  box-shadow:0 12px 40px -18px rgba(0,0,0,.7)}
.header-inner{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:34px;width:auto}
.brand-name{font:800 1.15rem var(--ft);letter-spacing:.01em}
.brand-name em{font-style:normal;color:var(--lime)}
.main-nav{display:flex;gap:4px}
.main-nav a{font:600 .92rem var(--ft);color:var(--t2);padding:.55rem .85rem;border-radius:10px;
  position:relative;transition:color .2s,background .2s}
.main-nav a:hover{color:var(--t1);background:rgba(236,238,246,.05)}
.main-nav a[aria-current]{color:var(--lime)}
.main-nav a[aria-current]::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:2px;
  height:2px;border-radius:2px;background:var(--lime)}
.header-cta{margin-left:auto}
.burger{display:none;place-content:center;justify-items:center;gap:5px;width:42px;height:42px;border:1px solid var(--line-2);border-radius:10px}
/* Ecart des barres fixe par `gap` et non par des marges : avec place-items,
   les 3 barres etaient centrees chacune dans une ligne de 13,3 px, donc la
   croix de fermeture ne se refermait pas (elle ressemblait a un chevron). */
.burger span{display:block;width:18px;height:2px;background:var(--t1);margin:0;border-radius:2px;transition:transform .25s,opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  animation:heroZoom 24s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,19,31,.7) 0%,rgba(16,19,31,.5) 35%,rgba(16,19,31,.9) 78%,var(--bg) 100%),
  radial-gradient(85% 65% at 50% 18%,transparent 40%,rgba(11,14,25,.5) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.3;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 4px)}
.hero-inner{position:relative;z-index:3;text-align:center;padding:56px 0 58px;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-logo{height:112px;width:auto;filter:drop-shadow(0 12px 40px rgba(163,230,53,.35));animation:fadeUp .7s .05s both}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;animation:fadeUp .7s .15s both}
.chip{display:inline-flex;align-items:center;gap:8px;font:600 .82rem var(--ft);letter-spacing:.03em;
  color:var(--t1);background:rgba(26,31,53,.75);border:1px solid var(--line-2);border-radius:999px;
  padding:.48rem .95rem;backdrop-filter:blur(6px)}
.chip svg{color:var(--gold)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(163,230,53,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(163,230,53,0)}100%{box-shadow:0 0 0 0 rgba(163,230,53,0)}}
.hero h1{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:900;letter-spacing:-.015em;max-width:920px;
  animation:fadeUp .7s .25s both;text-wrap:balance}
.hero h1 .hl{color:var(--lime)}
@supports ((-webkit-background-clip:text)){
  .hero h1 .hl{background:linear-gradient(92deg,var(--lime-2),var(--lime) 55%,#86efac);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero-lead{max-width:940px;color:var(--t2);font-size:.94rem;line-height:1.5;animation:fadeUp .7s .35s both}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px;animation:fadeUp .7s .45s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ============ TICKER (bandeau direct, sous le classement) ============ */
.ticker{border-top:1px solid rgba(163,230,53,.28);border-bottom:1px solid var(--line);
  background:rgba(10,13,23,.9);overflow:hidden}
.ticker--foot{margin-top:48px}
.ticker-track{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;padding:.62rem 0}
.ticker-group span{display:inline-flex;align-items:center;gap:9px;font:600 .78rem var(--ft);
  letter-spacing:.14em;text-transform:uppercase;color:var(--t3);padding:0 28px;border-right:1px solid var(--line)}
.ticker-group .tri{color:var(--lime);font-size:.68rem;letter-spacing:0}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============ LAYOUT ============ */
/* L'annuaire n'est plus bridé par la largeur de lecture du reste du site :
   il occupe la marge de page (le conteneur passe de 1180 à 1460 px), au lieu
   de grignoter des pixels avec des marges négatives. */
/* Annuaire resserré en largeur (1500) mais des lignes PLUS HAUTES : vignette
   de 124 px et marges internes généreuses. Des blocs moins étirés et plus
   présents, c'est le réglage voulu par Alexis. */
.layout{max-width:1500px;
  display:grid;grid-template-columns:286px minmax(0,1fr);gap:26px;padding-top:14px;scroll-margin-top:84px}
.content{min-width:0}

/* ============ FILTRES (checkboxes réelles, greffe A + D) ============ */
/* Panneau décalé vers la marge gauche (largeur inchangée) : laisse la place
   aux rectangles du classement qui mordent de 40px sur leur gauche. */
.filters{position:sticky;top:86px;align-self:start;background:var(--card-2);
  border:1px solid var(--line);border-radius:20px;padding:20px 18px;
  max-height:calc(100vh - 110px);overflow:hidden auto;scrollbar-width:thin}
.filters::-webkit-scrollbar{width:6px}
.filters::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
/* Encart sponsorise discret sous les filtres */
.spons-box{margin-top:18px;padding:14px 14px 16px;border:1px dashed var(--line-2);border-radius:14px;
  background:rgba(251,146,60,.045);text-align:center}
.spons-box .spons-label{display:block;font:700 .58rem var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.spons-box p{font-size:.82rem;color:var(--t2);margin:6px 0 10px;line-height:1.4}
.spons-box .btn{width:100%}
.f-reset{font:600 .78rem var(--fb);color:var(--t3);transition:color .2s}
.f-reset:hover{color:var(--lime)}
/* Barre de recherche au-dessus du podium (compacte : au pli, la 5e ligne doit
   apparaître partiellement pour montrer que la liste continue) */
/* 18px : EXACTEMENT la marge du filet `.libre-sep` qui suit l'emplacement
   libre, pour que le bloc respire pareil au-dessus et en dessous (demande
   d'Alexis du 16/08, l'écart du bas fait référence). Ne pas désolidariser les
   deux valeurs sans raison. */
.fsearch{position:relative;margin-bottom:18px}
.fsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  color:var(--t3);pointer-events:none}
.fsearch input{width:100%;background:var(--card-2);border:1px solid var(--line-2);border-radius:12px;
  padding:.64rem .9rem .64rem 38px;font:500 .92rem var(--fb);color:var(--t1);
  appearance:none;-webkit-appearance:none;transition:border-color .2s,box-shadow .2s}
.fsearch input::placeholder{color:var(--t3)}
.fsearch input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(163,230,53,.14)}
.fsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
/* Panneau de suggestions sous la barre (façon serveur-prive.net) */
.sr-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;display:none;
  background:var(--card-2);border:1px solid var(--line-2);border-radius:14px;padding:8px;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.65);max-height:min(440px,62vh);overflow:auto;
  scrollbar-width:thin}
.sr-drop.open{display:block}
.sr-item{display:flex;align-items:center;gap:16px;padding:10px 12px;border-radius:12px;
  border:1px solid transparent;transition:background .15s,border-color .15s}
.sr-item + .sr-item{margin-top:8px}
.sr-item:hover,.sr-item.active{background:rgba(163,230,53,.07);border-color:rgba(163,230,53,.28)}
.sr-thumb{width:132px;height:62px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg-2)}
.sr-thumb--fallback{display:grid;place-items:center;font:800 1.3rem var(--ft);color:var(--lime);
  background:rgba(163,230,53,.07);border:1px solid rgba(163,230,53,.22)}
.sr-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.sr-name{font:800 1.08rem var(--ft);color:var(--t1);text-transform:uppercase;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-name .pill-sp{font-size:.62rem;padding:.18rem .45rem;vertical-align:2px}
.sr-item .pills{gap:5px}
.sr-item .pill{font-size:.7rem;padding:.22rem .55rem}
/* Résultat sponsorisé : bordure + titre dorés, toujours en tête de liste */
.sr-item--sp{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.06)}
.sr-item--sp:hover,.sr-item--sp.active{border-color:rgba(251,191,36,.8);background:rgba(251,191,36,.1)}
.sr-item--sp .sr-name{color:var(--gold)}
.fgroup{padding-top:4px;margin-top:16px;border-top:1px solid var(--line)}
.filters .fgroup:first-of-type{margin-top:0;padding-top:2px;border-top:0}
.fgroup legend{font:700 .7rem var(--ft);letter-spacing:.18em;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
/* Paires d'opposés (PvM/PvP, Semi-like/Cheat, Mono/Multi) : une ligne par paire,
   séparées entre elles par un filet horizontal ; libellés jamais coupés */
/* `flex-wrap` en filet de sécurité : la paire Mono-compte / Multi-comptes est
   la plus large, elle débordait du panneau et se faisait couper à droite.
   Le panneau a été élargi et les pastilles resserrées, mais si un libellé
   s'allonge un jour, la paire passera sur deux lignes au lieu d'être rognée. */
.fpair{display:flex;align-items:center;gap:6px;flex-basis:100%;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
/* Pastilles du panneau latéral : un cran plus compactes que celles du corps
   de page, pour que les deux libellés d'une paire tiennent sur une ligne. */
.filters .fchip span{font-size:.78rem;padding:.38rem .72rem}
.fchip span{white-space:nowrap}
.fchip{position:relative}
.fchip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fchip span{display:inline-block;font:600 .82rem var(--fb);color:var(--t2);background:rgba(236,238,246,.04);
  border:1px solid var(--line-2);border-radius:999px;padding:.4rem .8rem;transition:all .18s;user-select:none;cursor:pointer}
.fchip:hover span{border-color:var(--lime);color:var(--t1)}
.fchip input:checked + span{background:var(--lime);border-color:var(--lime);color:#131a06;font-weight:700;
  box-shadow:0 6px 18px -8px rgba(163,230,53,.6)}
.fchip input:focus-visible + span{outline:2px solid var(--lime);outline-offset:2px}
/* Encart « Ajouter un serveur » : bloc À PART, pas une section des filtres.
   La grille place les deux explicitement, sinon l'encart, simple frère de
   l'aside, tomberait dans la colonne du classement. */
/* `grid-template-rows` est indispensable : sans lui, le classement (qui couvre
   les deux rangées) dicte la hauteur de la RANGÉE 1, et l'encart, placé en
   rangée 2, se retrouvait tout en bas de page. Rangée 1 = hauteur des filtres,
   rangée 2 = le reste. */
/* La colonne de gauche est UN bloc collant : filtres + bouton descendent
   ensemble au défilement. Avec deux éléments collants séparés, le bouton
   passait au-dessus des filtres. */
.side-col{position:sticky;top:86px;align-self:start}
.side-col .filters{position:static;max-height:calc(100vh - 190px)}
/* Le bloc « Promouvoir votre serveur » vient s'ajouter sous le bouton
   « Ajouter un serveur » DÈS QU'UN emplacement est vendu (règle du 20/08, cf.
   dp_h_filters) : la colonne s'allonge d'environ 210 px, donc les filtres
   rendent la place, sinon le bas de la colonne collante sort de l'écran et
   devient inatteignable. */
.side-col:has(.side-promo) .filters{max-height:calc(100vh - 400px)}
.side-promo{margin-top:14px}
/* Colonne étroite : le bloc s'empile au lieu de s'étaler, exactement comme il
   le fait déjà sous 700 px en pleine largeur. */
.side-promo .row-card--libre{flex-direction:column;align-items:flex-start;gap:12px;
  padding:16px 18px 16px 22px}
.side-promo .rcl-txt{gap:10px}
.side-promo .rcl-titre{font:800 1rem/1.25 var(--ft)}
/* Le compteur EST l'argument de vente de l'encart : dans la colonne etroite,
   le nombre passe SEUL sur sa ligne (flex-basis:100%), en gros et en orange,
   et sa legende se lit dessous en petit. Avant, « 69 » se noyait au milieu
   d'une phrase qui bouclait sur deux lignes. */
/* Chiffre + legende, l'un SOUS l'autre. C'est la seule disposition qui tient
   dans une colonne de 250 px : cote a cote, la legende se repliait sur deux
   lignes en laissant le chiffre flotter entre les deux, et rien n'etait aligne.
   Sur sa propre ligne, la legende tient d'un seul tenant. */
.side-promo .rcl-stats{display:block;padding-left:14px;
  font:600 .76rem/1.45 var(--fb);color:var(--t3)}
/* 1,35 rem : le chiffre porte le bloc sans l'ecraser. Essaye a 2,1 rem
   (« beaucoup trop »), puis a 1,05 rem en ligne (noye dans la phrase). */
.side-promo .rcl-stats b{display:block;margin:0 0 1px;
  font:800 1.35rem/1.15 var(--ft);color:#fb923c;letter-spacing:-.01em}
/* Pastille calee sur le milieu du chiffre, pas du bloc. */
.side-promo .rcl-pulse{top:9px;margin-top:0;left:0}
.side-promo .rcl-live{padding-left:14px;font-size:.72rem}
.side-promo .rcl-cta{margin-left:0;font-size:.82rem}
/* ============ EMPLACEMENT LIBRE (tête d'annuaire) ============ */
/* Même largeur et même arrondi qu'une ligne du classement, mais en pointillés
   orangés : une place à prendre se distingue au premier coup d'œil d'une place
   occupée. Hauteur volontairement réduite, elle ne doit pas voler la vedette
   au premier serveur. */
/* Calqué sur l'emplacement libre de la HOME (.sponsor-slot) : même hauteur,
   mêmes retraits, même dégradé, même pointillé orangé. Le filet du bas est
   celui qui sépare déjà les mis en avant du classement, pour que l'oeil lise
   « ici c'est l'espace payant, en dessous c'est le classement ».
   Double sélecteur : `.row-card` pose un `display:grid` plus bas dans la
   feuille, qui gagnait à spécificité égale et empilait badge et titre. */
/* Même HAUTEUR qu'une ligne du classement (225 px, liens du bas compris) et
   même arrondi : l'emplacement libre occupe exactement la place qu'un serveur
   occuperait, c'est tout l'argument. Le reste vient de l'emplacement libre de
   la HOME : dégradé et pointillés orangés.
   Double sélecteur : `.row-card` pose un `display:grid` plus bas dans la
   feuille, qui gagnait à spécificité égale et empilait badge et titre. */
/* Une colonne de texte à gauche, l'appel à l'action à droite, centré en
   hauteur : la disposition ordinaire d'un encart. Le `min-height` de 150px a
   sauté avec la refonte du 16/08, le contenu (4 niveaux empilés) donne
   désormais la hauteur lui-même au lieu de flotter dans du vide. */
/* Padding gauche plus large que le droit (30 contre 26) : les marqueurs
   débordent de 18px dans cette marge, sans cette réserve ils frôlaient le bord
   pointillé. */
.row-card.row-card--libre{display:flex;align-items:center;gap:24px;
  padding:24px 26px 24px 30px;border-radius:18px;text-decoration:none;
  border:1px dashed rgba(251,146,60,.42);
  background:linear-gradient(160deg,rgba(251,146,60,.1),rgba(251,146,60,.02));
  transition:border-color .18s,background .18s,transform .18s}
.row-card.row-card--libre:hover{border-color:rgba(251,146,60,.8);
  background:linear-gradient(160deg,rgba(251,146,60,.16),rgba(251,146,60,.05));
  transform:translateY(-2px)}
/* Filet de séparation posé comme sous le bandeau des mis en avant : à
   l'intérieur du bloc, avec de l'air au-dessus, et non collé au bord. */
/* Le filet vit ENTRE l'emplacement payant et le classement, comme celui qui
   suit le bandeau des mis en avant. Il n'appartient à aucun des deux blocs. */
.row-card.row-card--libre{margin-bottom:0}
.libre-sep{height:1px;margin:18px 0;background:var(--line)}
/* `white-space:nowrap` : sur deux lignes, l'étiquette débordait de sa pastille
   et passait sous le titre. `flex:none` l'empêche d'être compressée. */
/* `margin-left:-11px` = la valeur exacte du padding gauche : sans elle, le
   texte du badge démarre 11px plus à droite que le titre et que le compteur,
   et c'est le dernier décalage visible de la colonne. Le FOND de la pastille
   déborde donc dans le padding du bloc, comme les autres marqueurs. */
.rcl-badge{flex:none;white-space:nowrap;font:700 .66rem/1 var(--ft);letter-spacing:.14em;
  text-transform:uppercase;color:#fb923c;padding:6px 11px;margin-left:-11px;
  border-radius:999px;background:rgba(251,146,60,.14)}
.rcl-titre{font:800 1.14rem var(--ft);color:var(--t1)}
.rcl-cta{margin-left:auto;flex:none;font:700 .88rem var(--fb);color:#fb923c}
/* Preuve d'audience des dernières 24 h (servie en direct par
   /api/promo-slot.php). `flex-basis:100%` la fait passer SEULE sur la 2e ligne,
   sous le trio badge + titre + CTA. La pastille qui bat dit « chiffre vivant »
   sans avoir à écrire « en temps réel ». */
/* Colonne de texte : badge, titre, compteur, note. Un seul rythme vertical
   pour les quatre, c'est ce qui rend l'empilement naturel.
   Les MARQUEURS (pastille du compteur, astérisque de la note) sont sortis dans
   la marge gauche en `position:absolute` : dans le flux, ils décalaient leur
   ligne de 17px et de 10px, et les trois textes démarraient à trois abscisses
   différentes. Ils débordent de 17px au maximum, le bloc en a 24 de padding. */
.rcl-txt{display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-width:0}
/* `padding-left:18px` sur les deux dernières lignes : leurs marqueurs, qui
   débordaient jusque-là dans la marge, retombent pile sur la verticale du
   badge et du titre, et les deux textes s'en trouvent légèrement rentrés. */
.rcl-stats{position:relative;padding-left:18px;display:flex;align-items:center;
  font:600 .86rem/1.3 var(--fb);color:var(--t2)}
/* Le nombre ne crie plus : couleur du texte courant, plus de gras Outfit ni
   d'orange. C'est une information de contexte, pas le titre du bloc. */
.rcl-stats b{color:var(--t1);font-weight:700;margin-right:5px}
/* Note de bas de bloc : SA PROPRE LIGNE sous le compteur (`flex-basis:100%`),
   plus petite et en retrait, introduite par un astérisque. Elle commente le
   classement, pas le chiffre : elle ne doit pas se lire dans la même foulée. */
.rcl-live{position:relative;padding-left:18px;color:var(--t3);font-weight:600;font-size:.76rem}
/* Même verticale que la pastille du compteur : deux marqueurs à deux abscisses
   différentes faisaient un escalier. */
.rcl-live::before{content:'*';position:absolute;left:0;color:#fb923c}
/* Pastille discrète : 6px au lieu de 8, lime atténué, et un halo qui respire
   à peine. Elle signale que le chiffre est vivant, elle ne doit pas capter le
   regard avant le titre. */
.rcl-pulse{position:absolute;left:1px;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;background:rgba(163,230,53,.55);
  box-shadow:0 0 0 0 rgba(163,230,53,.3);animation:rclPulse 3.2s ease-out infinite}
@keyframes rclPulse{
  70%{box-shadow:0 0 0 5px rgba(163,230,53,0)}
  100%{box-shadow:0 0 0 0 rgba(163,230,53,0)}
}
@media (prefers-reduced-motion:reduce){.rcl-pulse{animation:none}}
@media (max-width:700px){
  /* Pas la place pour deux colonnes : le CTA passe sous le texte, aligné à
     gauche comme le reste. */
  .row-card--libre{flex-direction:column;align-items:flex-start;gap:14px;padding:14px 18px}
  .rcl-cta{margin-left:0}
}

/* ====== BANDEAU DE PREUVE (haut de promouvoir-mon-serveur) ====== */
/* Servi en direct par /api/promo-chiffres.php, pleine largeur au-dessus des
   deux colonnes. Orange comme l'emplacement libre de l'annuaire : c'est la
   couleur de tout ce qui touche à la vente d'emplacements sur ce site. Les
   quatre chiffres couvrent la MÊME fenêtre de 24 h, donc une seule mention de
   période, dans le titre. */
.vc-bar{margin:0 0 26px;padding:20px 24px 18px;border-radius:18px;
  border:1px solid rgba(251,146,60,.34);
  background:linear-gradient(160deg,rgba(251,146,60,.11),rgba(251,146,60,.03))}
.vc-bar__head{position:relative;margin:0 0 16px;padding-left:17px;
  font:600 .94rem/1.3 var(--fb);color:var(--t2)}
.vc-bar__head b{color:var(--t1);font-weight:800;font-family:var(--ft)}
.vc-pulse{position:absolute;left:0;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;background:#fb923c;
  box-shadow:0 0 0 0 rgba(251,146,60,.4);animation:vcPulse 3.2s ease-out infinite}
@keyframes vcPulse{
  70%{box-shadow:0 0 0 6px rgba(251,146,60,0)}
  100%{box-shadow:0 0 0 0 rgba(251,146,60,0)}
}
.vc-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.vc-grid li{display:flex;flex-direction:column;gap:3px}
.vc-n{font:800 1.62rem/1 var(--ft);color:#fb923c}
.vc-q{font:600 .86rem/1.3 var(--fb);color:var(--t2)}
.vc-d{font-size:.75rem;font-weight:600;color:var(--t3)}
.vc-note{margin:16px 0 0;font-size:.78rem;line-height:1.5;color:var(--t3)}
@media (max-width:700px){
  .vc-bar{padding:16px 18px 14px}
  .vc-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ============ VIDÉO DE PRÉSENTATION ============ */
/* Façade : une image et un bouton. L'iframe YouTube n'arrive qu'au clic, donc
   ni poids ni cookie tant que le visiteur n'a rien demandé. */
/* Posée dans le bloc « À propos », au même rang que les grands visuels de
   présentation : si les deux existent, la vidéo passe au-dessus de l'image. */
.sv-video{margin:0 0 18px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#0b0e19}
.panel2 > .sv-video{margin-bottom:20px}
.sv-play{display:block;position:relative;width:100%;padding:0;border:0;cursor:pointer;
  background:none;line-height:0}
.sv-play img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .5s,opacity .3s}
.sv-play:hover img{transform:scale(1.03);opacity:.85}
.sv-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;display:grid;place-items:center;border-radius:50%;
  background:rgba(11,14,25,.72);border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);transition:background .2s,transform .2s}
.sv-btn svg{width:30px;height:30px;color:#fff;margin-left:4px}
.sv-play:hover .sv-btn{background:var(--lime);transform:translate(-50%,-50%) scale(1.06)}
.sv-play:hover .sv-btn svg{color:#131a06}
.sv-lbl{position:absolute;left:18px;bottom:14px;font:700 .88rem/1.2 var(--ft);color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.85);text-align:left}
.sv-video iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
@media (max-width:760px){
  .sv-btn{width:58px;height:58px}
  .sv-btn svg{width:24px;height:24px}
  .sv-lbl{font-size:.78rem;left:12px;bottom:10px}
}

/* ============ CODE PROMO ============ */
/* Posé SOUS les boutons de la fiche : le visiteur d'un annuaire vient choisir
   un serveur, pas acheter. Au-dessus, le bloc se lirait comme de la pub. */
/* Retrait intérieur plus généreux que les tuiles au-dessus : le bloc porte
   plusieurs niveaux de texte, collé au bord il paraissait bâclé. */
/* Marge haute de 10 px, comme .join-bar et .panel2 : avec le row-gap de 4 px
   de .fiche-layout, les blocs de la fiche sont alors espacés de 14 px, tous
   pareil. Une marge basse ici doublerait l'écart avec le bloc suivant. */
/* Fiche AVEC offre : deux colonnes. L'offre à gauche, les accès au serveur
   (site, Discord) empilés à droite. Sans offre, rien ne change, la bande
   d'actions garde toute la largeur. */
/* Même écart partout : 14 px entre les colonnes comme entre les blocs de la
   page. Les tuiles s'étirent pour que les deux colonnes se terminent sur la
   même ligne, au lieu de laisser un vide sous la plus courte.
   Ordre inversé en CSS : dans le HTML l'offre vient en premier (elle reste
   lue en premier par un lecteur d'écran), à l'écran elle passe à droite. */
.fiche-offre{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1fr);
  gap:14px;align-items:stretch;margin-top:10px}
.fiche-offre .join-bar{order:1}
.fiche-offre .promo-code{order:2}
/* Le vert de la tuile « Site officiel » tombe à côté du turquoise de l'offre :
   exceptionnellement neutralisé quand les deux se côtoient. */
.fiche-offre .join-tile--site{border-color:var(--line);
  background:linear-gradient(180deg,#1c2240,#171c33)}
.fiche-offre .join-tile--site .jt-go{color:var(--t3)}
.fiche-offre .join-tile--site:hover{border-color:var(--line-2);
  box-shadow:0 16px 36px -22px rgba(0,0,0,.6)}
/* L'offre étant passée à DROITE, le code peut de nouveau déborder du bord
   droit : il n'y a plus de tuile derrière, seulement la gouttière de la page.
   Le bloc lui réserve sa place par un retrait à droite. */
.fiche-offre .promo-code{margin:0;max-width:none;padding:18px 158px 18px 24px}
.fiche-offre .pc-code{position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  box-shadow:0 14px 34px -14px rgba(47,211,222,.55),0 0 0 6px rgba(11,14,25,.55)}
.fiche-offre .pc-code:hover{transform:translateY(-50%) translateX(3px)}
@media (max-width:1240px){
  .fiche-offre .promo-code{padding:18px 24px}
  .fiche-offre .pc-code{position:static;transform:none;box-shadow:none}
  .fiche-offre .pc-code:hover{transform:none}
}
.fiche-offre .join-bar{margin:0;max-width:none;grid-template-columns:1fr;gap:14px;
  grid-auto-rows:1fr;align-content:stretch}
@media (max-width:980px){
  .fiche-offre{grid-template-columns:1fr}
}

/* Largeur bornée : étalé sur toute la colonne, le bloc formait un long bandeau
   qui écrasait le reste de la fiche. En rectangle compact, il se lit d'un coup
   d'œil et laisse la place au texte du serveur. */
.promo-code{position:relative;margin:10px 0 0;padding:18px 200px 18px 24px;border-radius:18px;max-width:600px;
  border:1px solid rgba(47,211,222,.35);background:rgba(47,211,222,.05)}
/* Rythme vertical tenu par un seul gap plutôt que par quatre marges qui se
   contredisaient : l'écart était plus grand sous le code que sous l'avantage. */
.promo-code{display:flex;flex-direction:column;gap:13px}
.pc-eyebrow{margin:0;font:700 .68rem var(--ft);letter-spacing:.18em;
  text-transform:uppercase;color:#2fd3de}
/* Le libellé et son surtitre forment une paire : ils se serrent l'un contre
   l'autre, l'écart normal reprend après. */
.pc-avantage{margin:-6px 0 0;font:800 1.12rem/1.3 var(--ft);color:var(--t1)}
/* Le O d'Ogrines remplacé par le symbole de la monnaie : calé sur la hauteur
   de la capitale, sinon il flotte au-dessus de la ligne de base. */
.og-gem{display:inline-block;width:1.02em;height:1.02em;vertical-align:-.16em;margin:0 .04em 0 .01em;
  filter:drop-shadow(0 0 7px rgba(34,211,238,.45))}
/* Le chiffre, dans le turquoise des Ogrines : c'est ce que l'œil vient
   chercher. En 900, le signe % mange l'espace qui le suit : on le lui rend. */
.pc-pct{color:#2fd3de;font-weight:900;margin-right:.16em}
.pc-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Le code est un BOUTON : recopié à la main, un code sur trois se perd. */
/* Le code DÉBORDE sur la droite, à cheval entre le bloc et la marge : c'est
   l'élément à saisir, il sort du cadre pour qu'on ne puisse pas le manquer.
   Le bloc lui réserve sa place par un padding droit, sinon le texte passerait
   dessous. */
.pc-code{position:absolute;right:-26px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  padding:.7rem .85rem .7rem 1.05rem;border-radius:14px;
  border:1px dashed rgba(47,211,222,.6);background:#0d1524;
  box-shadow:0 14px 34px -14px rgba(47,211,222,.55),0 0 0 6px rgba(11,14,25,.55);
  transition:background .18s,border-color .18s,transform .18s}
.pc-code:hover{background:rgba(47,211,222,.14);border-style:solid;border-color:rgba(47,211,222,.9);
  transform:translateY(-50%) translateX(3px)}
/* Le code reprend le turquoise du symbole d'Ogrine (#02AFBB, relevé sur
   l'icône elle-même) : le bloc parle d'Ogrines, le code aussi. */
.pc-code__txt{font:800 1.05rem/1 var(--ft);letter-spacing:.12em;color:#2fd3de}
.pc-code__act{font:700 .72rem var(--fb);letter-spacing:.06em;text-transform:uppercase;
  color:var(--t3);padding-left:12px;border-left:1px solid var(--line-2)}
.pc-code.is-copie .pc-code__act{color:#2fd3de}
.pc-go{display:inline-flex;align-items:center;gap:7px;font:700 .88rem var(--fb);
  color:var(--t1);text-decoration:none;border-bottom:1px solid transparent;transition:all .18s}
.pc-go:hover{color:#2fd3de;border-bottom-color:#2fd3de}
.pc-note{margin:0;font-size:.85rem;color:var(--t3)}
.pc-note a{color:#2fd3de}
.pc-fin{margin:-6px 0 0;font-size:.78rem;color:var(--t3)}
/* Le symbole d'Ogrine en filigrane dans le coin bas-droit : il habille le bloc
   sans gêner la lecture (opacité basse, hors flux, non cliquable). Il reste
   DANS le cadre, sans overflow:hidden, sinon le code qui déborde à droite sur
   la page dédiée se ferait couper. */
.promo-code::after{content:'';position:absolute;left:27%;top:50%;
  width:132px;height:132px;pointer-events:none;z-index:0;opacity:.18;
  background:url('/images/promo/ogrine.webp') no-repeat center/contain;
  transform:translateY(-50%) rotate(-8deg)}
/* Seuls les PARAGRAPHES repassent au-dessus du filigrane. Pas `> *` : ça
   positionnait aussi .pc-row, qui devenait alors le repère du code en absolu,
   et le débordement à droite ne se faisait plus. */
.promo-code > p{position:relative;z-index:1}
/* Calque de clic : couvre tout le bloc et mène à la boutique. Il passe SOUS
   les éléments qui ont déjà leur propre action, listés juste après. */
.pc-cover{position:absolute;inset:0;z-index:2;border-radius:inherit}
.promo-code{cursor:pointer}
/* `.promo-code > p` (0,1,1) l'emportait sur `.pc-note` seul : le lien
   « Comment l'utiliser » restait sous le calque et n'était plus cliquable. */
.promo-code > p.pc-note,.pc-go{position:relative;z-index:3}
/* Pas de `position` sur .pc-code ici : elle est déjà posée ailleurs (absolue
   sur la fiche, relative sur la page dédiée) et l'écraser casserait le
   débordement à droite. */
.pc-code{z-index:3;cursor:pointer}
.promo-code--large::after{width:160px;height:160px;opacity:.12}
/* Page dédiée : le code revient DANS le flux, à côté du lien boutique. En
   absolu, il flottait au milieu du bloc, sans rapport avec le reste. */
.promo-code--large{margin-bottom:30px;padding:24px 30px}
.promo-code--large .pc-code{position:relative;transform:none;box-shadow:none}
.promo-code--large .pc-code:hover{transform:translateY(-2px)}
/* Sous 820 px, plus de place pour un débordement : le code revient dans le
   flux, sous l'avantage. */
@media (max-width:820px){
  .promo-code,.promo-code--large{padding:18px 22px}
  .pc-code{position:static;transform:none;box-shadow:none}
  .pc-code:hover{transform:none}
}
/* Signal d'offre sur une ligne de classement : doré, pour ne pas se confondre
   avec les liens Site officiel / Discord. */
/* Pastille du code promo, à cheval sur le bord DROIT d'une ligne de classement,
   en pendant de la couronne du coin haut-gauche. Le décalage est volontairement
   petit (12 px) : au-delà, elle mordrait sur la marge de la page. */
/* En HAUT à droite, et le débordement se fait uniquement sur le CÔTÉ : rien ne
   dépasse en haut ni en bas, l'espacement régulier entre les lignes est
   préservé. */
.rc-code{position:absolute;right:-24px;top:14px;z-index:4;
  display:grid;justify-items:center;gap:3px;padding:10px 18px;border-radius:13px;
  background:#0d1524;border:1px dashed rgba(47,211,222,.65);
  box-shadow:0 12px 30px -14px rgba(47,211,222,.6),0 0 0 5px rgba(11,14,25,.6);
  text-decoration:none;transition:transform .18s,border-color .18s,background .18s}
.rc-code:hover{background:rgba(47,211,222,.12);border-style:solid;
  border-color:rgba(47,211,222,.95);transform:translateY(-2px)}
/* Le texte de la ligne s'arrête avant la pastille, sinon il passe dessous. */
.row-card:has(.rc-code) .rc-info{padding-right:132px}
.rc-code__lab{font:700 .62rem var(--ft);letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.rc-code__val{font:800 1.08rem/1 var(--ft);letter-spacing:.1em;color:#2fd3de}
/* Sous 1100 px, la marge disparaît : la pastille rentre dans la ligne. */
/* L'astérisque de la pastille renvoie à l'avantage, affiché dans la barre de
   liens juste à gauche : le code seul ne dit pas ce qu'il donne. */
.rc-code__ast{font-size:.72em;vertical-align:super;color:var(--t3);margin-left:.12em}
.rl-av .rl-ast{color:inherit;font-weight:inherit;margin-right:.15em}
@media (max-width:700px){.rc-code{position:static;transform:none;justify-self:start;
    margin-top:10px;box-shadow:none}
  .rc-code:hover{transform:none}
  .row-card:has(.rc-code) .rc-links{padding-right:0}}

/* Badge « Ouverture » (2026-08-20), posé dans la ligne de titre : ligne du
   bandeau promo, ligne du classement et hero de fiche. Version VOYANTE
   (demande d'Alexis le 20/08, la version translucide d'origine passait
   inaperçue) : lime plein, texte sombre, et un halo qui bat lentement pour
   accrocher l'œil sans clignoter. Le halo tombe tout seul sous
   prefers-reduced-motion (règle globale plus bas dans la feuille). */
.rc-open{display:inline-flex;align-items:center;gap:.45em;flex:none;
  padding:.34em .74em;border-radius:999px;
  font:800 .68rem/1 var(--ft);letter-spacing:.13em;text-transform:uppercase;
  color:#0b1020;background:linear-gradient(180deg,#bdf25a,#8fd424);
  border:1px solid rgba(163,230,53,.9);
  animation:rcOpenGlow 2.6s ease-in-out infinite}
.rc-open::before{content:"";width:6px;height:6px;border-radius:50%;background:#0b1020;
  box-shadow:0 0 0 2px rgba(11,16,32,.22)}
@keyframes rcOpenGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(163,230,53,.6),0 4px 14px -6px rgba(163,230,53,.8)}
  55%{box-shadow:0 0 0 7px rgba(163,230,53,0),0 4px 14px -6px rgba(163,230,53,.5)}
}
.fiche-top .rc-open{font-size:.76rem;padding:.38em .82em}
/* .name-row aligne ses enfants sur la LIGNE DE BASE : la pastille, plus
   haute que le texte, retombait 4 px sous le milieu du titre. On la recentre
   sans toucher a l'alignement du reste de la ligne. */
.name-row .rc-open{align-self:center}

/* Le groupe promo ferme la ligne, plaqué à droite : les accès au serveur
   (site, Discord) gardent la priorité de lecture à gauche. */
.rl-promo{margin-left:auto;display:inline-flex;align-items:center;gap:0}
.rlink--promo{color:var(--gold);gap:7px}
/* Le code, dans le turquoise des Ogrines, comme sur la fiche. */
.rlink--promo b{font-weight:800;letter-spacing:.06em;color:#2fd3de}
/* L'avantage, en gris : c'est l'argument, il ne doit pas voler la vedette au
   code. Lien à part, qui mène droit à la boutique. Masqué sous 860 px, la
   ligne y est déjà chargée. */
/* `display:inline` et pas inline-flex hérité de .rlink : en flex, l'icône
   d'Ogrine devenait un élément à part entière et récupérait le gap de 7 px de
   chaque côté, ce qui décollait le symbole du reste du mot. */
/* `.rlink` pose un raccourci `font` déclaré plus bas dans la feuille : à
   spécificité égale il l'emportait et la taille ne bougeait pas. D'où le
   double sélecteur. */
.rlink.rl-av{display:inline;font-size:.68rem}
.rl-av{color:var(--t3);font-weight:500}
.rl-av:hover{color:var(--gold)}
/* Sur une ligne de classement, le symbole d'Ogrine reste discret : pas de
   halo, et le pourcentage garde la couleur du lien plutôt que le doré plein. */
.rl-av .og-gem{width:.95em;height:.95em;vertical-align:-.14em;filter:none}
/* Dans la ligne, pas de marge ajoutée après le pourcentage : l'espace normal
   suffit à cette taille, la marge du bloc de fiche y faisait un trou. */
.rl-av{font-size:.68rem}
.rl-av .pc-pct{color:inherit;font-weight:700;margin-right:0}
/* Plus de séparateur « · » : il servait à détacher l'avantage du lien « Code
   promo » qui le précédait. Ce lien est parti sur la pastille, le point est
   resté orphelin en tête de ligne. */
.rlink--promo:hover{color:#fcd34d}
@media (max-width:860px){.rl-av{display:none}
  .rl-promo{margin-left:0}}
.promo-code--large .pc-avantage{font-size:1.3rem}
/* Page dédiée. */
.page-promo h1{margin:0 0 10px}
.page-promo .lead{max-width:70ch}
.page-promo .promo-code{margin:0 0 20px;max-width:680px}
.page-promo .promo-steps{margin:6px 0 0}
.promo-retour{margin:18px 0 0}
.promo-retour .btn{display:inline-flex}
.promo-shot{margin:0 0 26px}
.promo-shot img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.promo-shot figcaption{margin-top:10px;font-size:.83rem;color:var(--t3)}
.promo-steps{margin:10px 0 0;padding-left:22px;display:grid;gap:9px;line-height:1.55}
.promo-disclosure{margin:26px 0 0;font-size:.8rem;line-height:1.6;color:var(--t3)}

/* Un bouton, rien d'autre : pas d'encadré ni de texte d'accompagnement.
   Contour en pointillés et fond translucide, mais en vert : discret dans la
   colonne, sans passer pour un bouton d'action principal. */
.side-cta{margin-top:16px}
.side-cta__btn{width:100%;border-radius:999px;border:1px dashed var(--lime);
  background:rgba(163,230,53,.08);color:var(--lime);font-size:.88rem}
.side-cta__btn:hover{background:rgba(163,230,53,.16);border-style:solid;
  transform:translateY(-2px)}
.filters-toggle{display:none}
.fbadge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--lime);color:#131a06;font:700 .75rem var(--fb)}
.fbadge[hidden]{display:none}

/* ============ TETES DE SECTION ============ */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:40px 0 18px;flex-wrap:wrap}
.shead.first{margin-top:0}
.eyebrow{display:flex;align-items:center;gap:10px;font:700 .7rem var(--ft);
  letter-spacing:.24em;text-transform:uppercase;color:var(--lime)}
.shead h2{font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:800;letter-spacing:-.01em;margin-top:6px}
.count-note{font:500 .85rem var(--fb);color:var(--t3);padding-bottom:4px}
.count-note strong{color:var(--lime);font-weight:700}
/* CTA « Ajouter mon serveur » en tete de la sidebar filtres */
.filters-cta{width:100%;margin-bottom:16px;padding:.82rem 1rem;font-size:.95rem}
.btn-flash{background:linear-gradient(120deg,#f97316,#fbbf24 45%,#fde047 55%,#f97316);
  background-size:220% 100%;color:#2a1503;
  box-shadow:0 10px 30px -10px rgba(251,146,60,.75),inset 0 1px 0 rgba(255,255,255,.5);
  animation:flashShift 2.8s ease-in-out infinite}
.btn-flash:hover{transform:translateY(-2px);box-shadow:0 16px 42px -12px rgba(251,191,36,.95),inset 0 1px 0 rgba(255,255,255,.5)}
@keyframes flashShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ============ COMPOSANTS CARTE ============ */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 .72rem var(--fb);letter-spacing:.02em;
  padding:.26rem .6rem;border-radius:7px;line-height:1.2}
.pill i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pill-jeu{background:rgba(236,238,246,.09);color:var(--t1);border:1px solid rgba(236,238,246,.14)}
.pill-jeu.g-retro i{background:var(--gold);box-shadow:0 0 6px rgba(251,191,36,.7)}
.pill-jeu.g-d2 i{background:var(--lime);box-shadow:0 0 6px rgba(163,230,53,.7)}
.pill-ver{color:var(--t3);border:1px dashed var(--line-2)}
.pill-tag{background:rgba(163,230,53,.08);color:#cdf28a;border:1px solid rgba(163,230,53,.22)}
/* étoiles SVG avec vraie demi-étoile (greffe D) */
.stars{display:inline-flex;gap:3px;line-height:1}
.star{width:15px;height:15px}
.star.full{fill:var(--gold);filter:drop-shadow(0 0 3px rgba(251,191,36,.5))}
.star.half{fill:url(#halfGrad)}
.badge{display:inline-flex;align-items:center;gap:6px;font:700 .72rem var(--fb);
  padding:.32rem .68rem;border-radius:999px;white-space:nowrap}
.badge-hot{color:#ffd9b0;background:rgba(251,146,60,.13);border:1px solid rgba(251,146,60,.38)}
.badge-pop{color:#e2fbb0;background:rgba(163,230,53,.11);border:1px solid rgba(163,230,53,.32)}
/* 3 lignes depuis le 15/08 : les blocs élargis à 1260 px laissaient un vide
   sous deux lignes de texte. Le clamp coupe proprement au ras de la ligne,
   c'est lui qui décide de ce qui « rentre », pas le nombre de caractères. */
.desc{color:var(--t2);font-size:.92rem;line-height:1.55;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.name-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.site{display:inline-flex;align-items:center;gap:6px;font:600 .82rem var(--fb);color:var(--t3);transition:color .18s}
.site .ext{font-size:.72rem;transition:transform .18s}
.site:hover{color:var(--lime)}
.site:hover .ext{transform:translate(2px,-2px)}
.vote{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font:800 .85rem var(--ft);letter-spacing:.02em;border-radius:10px;padding:.62rem 1.1rem;
  background:linear-gradient(180deg,var(--lime-2),var(--lime));color:#131a06;
  box-shadow:0 8px 22px -10px rgba(163,230,53,.55),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.vote .tri{font-size:.72rem;transform:translateY(-1px)}
.vote:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(163,230,53,.7)}
.vote:active{transform:scale(.97)}
.vote.voted{background:rgba(163,230,53,.12);color:var(--lime);box-shadow:inset 0 0 0 1.5px var(--lime);animation:pop .35s}
@keyframes pop{40%{transform:scale(1.09)}}
.meta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ============ LIGNE COMPACTE (anatomie unique liste + sponsor) ============ */
/* Les lignes du classement mordent sur la marge comme le bandeau promo,
   et sont plus hautes (miniature agrandie). */
.rank-rows{display:flex;flex-direction:column;gap:11px}
/* Carte entièrement cliquable : le lien du nom s'étire sur toute la carte ;
   le lien site officiel reste au-dessus (seule destination différente) */
.row-card .rc-info h3 a::after,.podium .pc-name a::after{
  content:"";position:absolute;inset:0;z-index:1}
.row-card .site,.podium-card .site,.row-card .vote,.podium-card .vote{position:relative;z-index:2}
/* Gabarit resserré une 2e fois (15/08, 2e passe) : colonne 186 px,
   miniature 100 px, paddings 13/20, gap 16 — la carte passe de ~197 px à
   ~180 px de haut sans changer d'anatomie. Comme la colonne info (h3 +
   pills + description 2 lignes) fait ~105 px, elle borne la hauteur :
   rétrécir la miniature seule ne suffit pas, il faut aussi le h3 et les
   gaps. Promotionnés compris (aucune règle de taille dédiée). */
/* Colonne « rank » RÉTABLIE le 15/08 : sans elle, le grid-area:rank de
   .rc-rank ne correspondait à aucune zone nommée et le numéro se plaçait
   tout seul, en cassant l'alignement des quatre colonnes. */
/* Les étoiles passent SOUS la vignette (15/08) : la colonne « meta » est
   supprimée et la zone se glisse en deuxième rangée, dans la colonne de la
   vignette. « info » et « actions » enjambent les deux rangées. Une place
   payée n'émet pas de .rc-meta : la rangée se replie d'elle-même. */
.row-card{position:relative;display:grid;align-items:center;column-gap:20px;row-gap:9px;
  grid-template-columns:44px 232px minmax(0,1fr) auto;
  grid-template-areas:"rank thumb info actions" "rank meta info actions" "links links links links";
  background:linear-gradient(180deg,#1b2038,#171b2f);border:1px solid var(--line);
  border-radius:18px;padding:16px 24px 16px 14px;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.row-card:hover{transform:translateY(-3px);border-color:rgba(163,230,53,.42);
  box-shadow:0 18px 44px -24px rgba(163,230,53,.32)}
/* Numéro de rang discret (14/08) : petit, gris, aligné à droite */
.rc-rank{grid-area:rank;font:700 .92rem var(--fb);line-height:1;text-align:right;
  color:var(--t3);letter-spacing:.02em;transition:color .2s}
.row-card:hover .rc-rank{color:var(--t2)}
/* Vignette agrandie (124 px) : les lignes de l'annuaire doivent en imposer,
   la colonne fait 1700 px de large. */
.rc-thumb{grid-area:thumb;position:relative;display:grid;place-items:center;border-radius:12px;
  overflow:hidden;height:124px;background:var(--bg-2)}
.row-card:hover .rc-thumb .pm-fg{transform:scale(1.05)}
.rc-info{grid-area:info;display:flex;flex-direction:column;gap:6px;min-width:0}
.rc-info h3{font:800 1.06rem var(--ft)}
.rc-meta{grid-area:meta;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center}
.rc-actions{grid-area:actions;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center}
/* Accès directs en bas de carte : site officiel + Discord, sobres et sur
   UNE seule ligne (pas de pastilles colorées, juste du texte discret). */
.rc-links{grid-area:links;display:flex;align-items:center;gap:18px;flex-wrap:nowrap;
  margin-top:8px;padding-top:9px;border-top:1px solid var(--line);overflow:hidden}
.rlink{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;
  font:600 .82rem var(--fb);color:var(--t3);white-space:nowrap;transition:color .18s}
.rlink svg{width:14px;height:14px}
/* Logo Discord aux couleurs de la marque */
.rlink--discord svg{color:#5865f2}
.rlink--discord:hover svg{color:#7079f0}
.rlink .rl-go{font-size:.72rem;transition:transform .18s}
.rlink:hover{color:var(--t1)}
.rlink:hover .rl-go{transform:translate(2px,-2px)}

/* Variante sponsorisée : même anatomie, skin orange */
.row-card.sponsor{border:1.5px solid transparent;
  background:linear-gradient(120deg,#1f1c33,#171b2f 55%) padding-box,
    linear-gradient(115deg,var(--orange),#fcd34d 30%,rgba(251,146,60,.25) 55%,var(--orange)) border-box;
  box-shadow:0 24px 60px -28px rgba(251,146,60,.45)}
.row-card.sponsor:hover{border-color:transparent;box-shadow:0 28px 70px -28px rgba(251,146,60,.55)}
.row-card.sponsor .rc-rank{font-size:26px;color:var(--orange)}
/* Couronne des emplacements promotionnels (15/08) : à cheval sur le coin
   haut-gauche du bloc, moitié dedans moitié dehors. Le métal suit
   l'emplacement payé, pas le rang au classement. */
.promo-crown{position:absolute;top:-14px;left:18px;z-index:4;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:var(--bg);border:1px solid var(--line-2);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.75)}
.promo-crown svg{width:21px;height:21px}
.promo-crown--or{border-color:rgba(251,191,36,.55)}
.promo-crown--or svg{fill:#fbbf24;filter:drop-shadow(0 0 6px rgba(251,191,36,.55))}
.promo-crown--argent{border-color:rgba(203,213,225,.5)}
.promo-crown--argent svg{fill:#cbd5e1;filter:drop-shadow(0 0 6px rgba(203,213,225,.45))}
.promo-crown--bronze{border-color:rgba(217,138,74,.5)}
.promo-crown--bronze svg{fill:#d98a4a;filter:drop-shadow(0 0 6px rgba(217,138,74,.45))}
@media (max-width:760px){.promo-crown{top:-12px;left:14px;width:32px;height:32px}
  .promo-crown svg{width:18px;height:18px}}
/* Le bandeau descend d'un cran : la couronne dépasse en haut du bloc et
   venait mordre la barre de recherche juste au-dessus. */
.spons-rail{margin-top:22px}

.sp-flag{position:absolute;top:-12px;left:20px;z-index:3;font:800 .66rem var(--ft);
  letter-spacing:.14em;text-transform:uppercase;color:#2a1503;transform:skewX(-6deg);
  background:linear-gradient(180deg,#fdba74,var(--orange));padding:.32rem .7rem;border-radius:8px;
  box-shadow:0 6px 18px -6px rgba(251,146,60,.7)}
.sp-hint{position:absolute;top:-10px;right:18px;z-index:3;font:500 .68rem var(--fb);letter-spacing:.05em;
  color:var(--t3);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 10px}

/* Rangs 1-2-3 : AUCUNE distinction visuelle (14/08, demande d'Alexis).
   Les classes .rk-1/.rk-2/.rk-3 restent posées sur les lignes mais ne
   portent plus aucun style : le classement se lit au numéro, point. */

/* Bandeau de mise en avant sponsorisée : rectangles dorés au-dessus du
   classement, disposition adaptée au nombre de sponsors (1, 2 ou 3) */
/* gap 28 px et non 10 : la couronne déborde de 14 px au-dessus de sa carte,
   avec 10 px d'écart elle mordait le bas du rectangle précédent (20/08).
   Pas de border-bottom : le trait tombait juste au-dessus du bloc
   « Promouvoir votre serveur » et faisait doublon avec .libre-sep, qui sépare
   déjà cet encart du classement (demande d'Alexis, 20/08). */
.spons-rail{display:flex;flex-direction:column;gap:20px;margin-bottom:18px}
/* Plus de padding-bottom : il servait a decoller les cartes du
   border-bottom, qui n'existe plus. Avec lui, le filet .libre-sep avait
   34 px au-dessus et 18 en dessous, donc il paraissait mal centre. */
/* Le bandeau déborde sur la marge de page à droite (jamais au-delà du
   viewport : le calcul retombe à 0 dès que l'écran est plus étroit que le
   conteneur, donc aucune barre de défilement horizontale). */
/* Numéro d'emplacement, discret, en surimpression de la miniature */
.rc-num,.pcard-num{position:absolute;top:10px;left:10px;z-index:3;display:grid;place-items:center;
  width:22px;height:22px;border-radius:7px;font:700 .74rem var(--fb);color:var(--t2);
  background:rgba(13,16,28,.72);border:1px solid var(--line-2);backdrop-filter:blur(3px)}
/* Bloc promo de la home : mêmes rectangles que le bandeau de l'annuaire.
   Marge haute franche : il ne doit jamais coller à la bande d'appel. */
.promo-rail{display:flex;flex-direction:column;gap:20px;margin:14px 0 0}
.home-section .promo-rail{margin-top:14px}
/* Sur la HOME, pas d'habillage doré : rectangles neutres (le doré reste
   réservé au bandeau et aux lignes de l'annuaire). */
.promo-rail .rc-sp{background:linear-gradient(180deg,#1b2038,#171b2f);border-color:var(--line)}
.promo-rail .rc-sp:hover{border-color:rgba(163,230,53,.42);
  box-shadow:0 18px 44px -24px rgba(163,230,53,.32)}
.promo-rail .rc-sp .rc-rank{color:var(--t3)}

/* Grille des emplacements promotionnels : 1 → rectangle pleine largeur,
   2 ou 3 → carrés côte à côte, 1er emplacement (mieux payé) à gauche */
/* (.promo-grid : ancienne grille de cartes du bloc home, remplacée par
   .promo-rail en rectangles ; conservée pour l'encart des fiches.) */
.promo-grid{display:grid;gap:14px}
/* Sur la home tracker : respiration avec la bande d'appel juste au-dessus */
.home-section .promo-grid,.home-section .sponsor-slots{margin-top:18px}
.promo-grid--1{grid-template-columns:1fr}
.promo-grid--2{grid-template-columns:repeat(2,1fr)}
.promo-grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.promo-grid--2,.promo-grid--3{grid-template-columns:1fr}}

/* Carte promotionnelle verticale (« carré ») : bannière + infos complètes */
.pcard{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#1b2038,#171b2f);border:1px solid var(--line);
  border-radius:16px;transition:transform .2s,border-color .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-3px);border-color:rgba(163,230,53,.42);
  box-shadow:0 18px 44px -24px rgba(163,230,53,.32)}
.pcard--sp{border-color:rgba(251,191,36,.45);
  background:linear-gradient(180deg,rgba(251,191,36,.11),rgba(251,191,36,.02) 42%),
    linear-gradient(180deg,#1b2038,#171b2f)}
.pcard--sp:hover{border-color:rgba(251,191,36,.75);box-shadow:0 18px 44px -22px rgba(251,191,36,.42)}
.pcard-media{position:relative;display:grid;place-items:center;height:124px;overflow:hidden;background:var(--bg-2)}
/* Encart des fiches : cartes compactes, les 3 doivent tenir dans le premier
   écran avec de la marge en dessous (demande du 14/08). */
/* Bannière ENTIÈRE, jamais rognée (contain) : les visuels des serveurs
   portent souvent leur logo au centre/bas, le recadrage les coupait. */
.fiche-aside .pcard-media{height:96px;background:var(--bg-2)}
/* Pas de liseré doré dans l'encart des fiches : cartes neutres */
.fiche-aside .pcard--sp{border-color:var(--line);
  background:linear-gradient(180deg,#1b2038,#171b2f)}
.fiche-aside .pcard--sp:hover{border-color:rgba(163,230,53,.42);
  box-shadow:0 18px 44px -24px rgba(163,230,53,.32)}
.fiche-aside .pcard-body{gap:6px;padding:10px 12px 11px}
.fiche-aside .pcard-name{font-size:1rem}
/* 5 lignes : l'encart affiche l'intro du serveur, la couper à 2 lignes la
   rendait incompréhensible. */
.fiche-aside .pcard-desc{-webkit-line-clamp:5;font-size:.82rem;line-height:1.45}
.fiche-aside .pcard .pill{font-size:.64rem;padding:.16rem .44rem}
.fiche-aside .pcard .star{width:13px;height:13px}
/* Deux couches : fond flouté qui remplit + bannière NETTE jamais étirée
   au-delà de sa résolution native (les visuels sources font ~300 px de large,
   les agrandir les rendait flous sur les gros blocs promotionnels). */
.pm-bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
  filter:blur(16px) saturate(.85);opacity:.5}
/* L'image occupe TOUTE la place disponible sans jamais être rognée
   (contain) : plein potentiel du visuel sur toutes les pages.
   position:absolute est OBLIGATOIRE : .pcard-media et .rc-thumb sont des
   grilles dont la RANGÉE est dimensionnée par son contenu. En flux, le
   height:100% de l'image se résolvait contre cette rangée auto — donc
   contre elle-même — et l'image reprenait son ratio naturel (338x169 dans
   un cadre de 338x96), débordait par le bas et se faisait décapiter par
   l'overflow:hidden. Ni place-self:stretch ni object-position n'y changent
   rien : la rangée reste haute de 169 px. Hors flux, le cadre redevient la
   référence et le recadrage `cover` est enfin centré. C'était la cause des
   visuels coupés des cartes « Autres serveurs » et des lignes de classement,
   alors que le hero (un bloc, pas une grille) était correct. */
/* `font-size:0` : les GIF animés pèsent ~1 Mo, et pendant leur téléchargement
   le navigateur peignait le TEXTE ALTERNATIF par-dessus le fond, ce qui donnait
   une ligne cassée pendant une seconde. L'attribut alt reste en place pour les
   lecteurs d'écran, il n'est simplement plus dessiné. */
.pm-fg{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;transition:transform .4s;
  font-size:0;color:transparent}
/* Visuel assez défini pour remplir son cadre (classe posée par le PHP, qui
   lit la vraie taille du fichier) : il occupe tout, sans bandes floutées. */
.hd .pm-fg,.pc-banner.hd .b-fg{object-fit:cover}
.hd .pm-bg,.pc-banner.hd .b-bg{display:none}
/* Vignette dédiée (<slug>-thumb.webp) : déjà cadrée aux proportions du bloc,
   elle le remplit sans fond flouté et sans dépendre de la mesure `hd`. */
.rc-thumb--cover .pm-fg,.pcard-media--cover .pm-fg{object-fit:cover}
.pcard:hover .pcard-media .pm-fg{transform:scale(1.04)}
.pcard-media--fallback{display:grid;place-items:center;height:100%;font:800 2rem var(--ft);color:var(--lime);
  background:rgba(163,230,53,.07)}
.pcard-body{display:flex;flex-direction:column;gap:8px;padding:14px 15px 15px}
.pcard-name{font:800 1.08rem var(--ft);color:var(--t1);line-height:1.2}
.pcard .pills{gap:5px}
.pcard .pill{font-size:.68rem;padding:.2rem .5rem}
.pcard-desc{color:var(--t2);font-size:.86rem;line-height:1.5;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pcard-langs{font:600 .72rem var(--fb);color:var(--t3);letter-spacing:.04em}
.pcard-cta{margin-top:2px;font:800 .84rem var(--ft);color:var(--lime)}
.pcard--sp .pcard-cta{color:var(--gold)}

/* Emplacements promotionnels : MÊME GABARIT que les lignes normales
   (demande d'Alexis du 14/08 — la taille dégressive p1 > p2 > p3 a été
   testée puis abandonnée). La hiérarchie ne se lit plus qu'à l'ORDRE
   (1-2-3 selon sponsor_prio) et au skin doré du bandeau.
   AUCUNE règle de taille ici (15/08) : les redéclarations « identiques »
   à .row-card (colonne 220px, miniature 124px, padding 18/26, h3 1.12rem)
   ont été retirées car elles étaient plus spécifiques que les règles
   responsive et faisaient ressortir les promotionnés sous 760 px
   (miniature 124 px au lieu de 118 px, carte 6 px plus haute).
   Les classes .rc-promo--p1/p2/p3 restent posées par le PHP (crochet CSS
   de rollback) mais ne portent plus aucun style. */

/* Offre sponsorisée : ligne au fond doré distinctif + mention « Sponsorisé »,
   rang naturel conservé (façon serveur-prive.net) */
.row-card.rc-sp{
  background:linear-gradient(90deg,rgba(251,191,36,.16),rgba(251,191,36,.05) 46%,rgba(251,191,36,.11)),
    linear-gradient(180deg,#1b2038,#171b2f);
  border-color:rgba(251,191,36,.42)}
.row-card.rc-sp:hover{border-color:rgba(251,191,36,.66);
  box-shadow:0 18px 44px -22px rgba(251,191,36,.38)}
.row-card.rc-sp .rc-rank{color:var(--gold)}
.row-card.rc-sp:hover .rc-rank{color:var(--gold);text-shadow:0 0 20px rgba(251,191,36,.55)}
.pill-sp{background:linear-gradient(180deg,#fde68a,var(--gold));color:#241a02;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 4px 14px -8px rgba(251,191,36,.8)}

/* ============ PODIUM ============ */
.podium-stage{position:relative;padding:8px 0 6px}
.podium-stage::before{content:"";position:absolute;inset:-40px -60px 0;pointer-events:none;
  background:radial-gradient(55% 70% at 50% 0%,rgba(163,230,53,.07),transparent 65%)}
.podium{position:relative;display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:22px;align-items:end}
.podium-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  border:1.5px solid transparent;
  background:linear-gradient(180deg,#1e2440,#161a2e) padding-box,var(--metal) border-box;
  box-shadow:0 22px 54px -34px var(--glow);
  transition:transform .25s,box-shadow .25s}
.podium-card:hover{transform:translateY(-6px);box-shadow:0 34px 74px -32px var(--glow)}
.p-gold{--metal:linear-gradient(165deg,#fde68a,#fbbf24 28%,#a16207 55%,#fde047 88%);--glow:rgba(251,191,36,.5);order:2;z-index:2}
.p-silver{--metal:linear-gradient(165deg,#f1f5f9,#94a3b8 30%,#475569 60%,#cbd5e1 90%);--glow:rgba(148,163,184,.38);order:1}
.p-bronze{--metal:linear-gradient(165deg,#fdba74,#c2410c 32%,#7c2d12 60%,#ea580c 90%);--glow:rgba(234,88,12,.4);order:3}
.podium-card::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.15) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .9s ease}
.podium-card:hover::before{transform:translateX(130%)}
/* Recomposition quand un filtre est actif : plus de trou, plus d'or décentré */
.podium.is-filtered{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:stretch}
.podium.is-filtered .p-gold{order:1}
.podium.is-filtered .p-silver{order:2}
.podium.is-filtered .p-bronze{order:3}
.podium.is-filtered .p-gold .pc-banner{height:116px}
.pc-head{position:relative}
/* Bannière 2 couches : fond flouté (cover) + bannière entière (contain) */
.pc-banner{display:block;height:116px;overflow:hidden;position:relative;background:var(--bg-2)}
.p-gold .pc-banner{height:150px}
.pc-banner .b-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(14px) saturate(1.25);transform:scale(1.3);opacity:.7}
.pc-banner .b-fg{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  transition:transform .5s ease;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.podium-card:hover .pc-banner .b-fg{transform:scale(1.05)}
.pc-banner::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,16,28,.22),transparent 30%,rgba(20,24,42,.9) 100%)}
.pc-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.pc-name{font:800 1.3rem/1.1 var(--ft)}
.p-gold .pc-name{font-size:1.44rem}
.podium-card .star{width:17px;height:17px}
.podium-card .vote{width:100%;margin-top:auto}

/* ============ ETAT VIDE (clin d'oeil « portail », greffe D) ============ */
.empty{display:none;text-align:center;padding:46px 20px;margin-top:16px;
  border:1.5px dashed var(--line-2);border-radius:16px;color:var(--t2)}
.empty.show{display:block}
.empty-ring{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;
  border:2px dashed rgba(163,230,53,.5);animation:spinring 8s linear infinite;position:relative}
.empty-ring::before{content:"";position:absolute;inset:13px;border-radius:50%;
  background:radial-gradient(circle,rgba(163,230,53,.35),transparent 70%)}
@keyframes spinring{to{transform:rotate(360deg)}}
.empty .f-reset{display:inline-block;margin-top:10px;font-size:.9rem;color:var(--lime)}
.empty .f-reset:hover{text-decoration:underline}

/* ============ CATEGORIES & CTA ============ */
.tail{margin-top:64px}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{position:relative;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.cat:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);
  box-shadow:0 18px 44px -24px rgba(163,230,53,.3)}
.cat-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(163,230,53,.1);border:1px solid rgba(163,230,53,.25);color:var(--lime)}
.cat h3{font:800 1.08rem var(--ft)}
.cat p{color:var(--t3);font-size:.88rem}
.cat .more{margin-top:6px;font:700 .82rem var(--ft);color:var(--lime);display:inline-flex;gap:6px;align-items:center}
.cat .more .arr{transition:transform .2s}
.cat:hover .more .arr{transform:translateX(4px)}
.cta-band{position:relative;margin-top:56px;border-radius:24px;overflow:hidden;text-align:center;}
.tail .cta-band:first-child{margin-top:0}
.cta-band{
  border:1px solid rgba(163,230,53,.28);padding:56px 28px;
  background:
    radial-gradient(120% 180% at 0% 0%,rgba(163,230,53,.14),transparent 55%),
    radial-gradient(120% 180% at 100% 100%,rgba(251,146,60,.13),transparent 55%),
    var(--card-2)}
.cta-band::before{content:"▲ ▲ ▲ ▲ ▲ ▲ ▲";position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  white-space:nowrap;font-family:var(--fs);font-size:86px;letter-spacing:26px;
  color:transparent;-webkit-text-stroke:1px rgba(163,230,53,.12);pointer-events:none}
.cta-band h2{position:relative;font-size:clamp(1.5rem,3vw,2.15rem);font-weight:900}
.cta-band p{position:relative;color:var(--t2);max-width:580px;margin:10px auto 26px}
.cta-actions{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ FOOTER ============ */
.footer{margin-top:76px;border-top:1px solid var(--line);background:var(--bg-2);padding:44px 0 26px}
.footer-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer nav a{color:var(--t3);font:600 .88rem var(--fb);transition:color .2s}
.footer nav a:hover{color:var(--lime)}
.footer-legal{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;color:var(--t3);font-size:.8rem}

/* ============ ANIMATIONS D'ENTREE (gating .js : visible sans JS) ============ */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr;gap:20px;padding-top:28px}
  .filters{display:none;position:static;max-height:none}
  .filters.open{display:block}
  .filters-toggle{display:inline-flex;width:100%;justify-content:space-between}
  /* Une seule colonne : plus rien ne colle, tout coule. */
  .side-col{position:static}
  .side-col .filters{max-height:none}
  /* L'encart passe SOUS le classement : sur mobile, il n'a pas à s'intercaler
     entre le bouton de filtres et la liste. */
  .side-cta{order:3;margin-top:24px}
}
@media (max-width:920px){
  .main-nav{position:absolute;top:68px;left:0;right:0;display:none;flex-direction:column;gap:2px;
    background:rgba(11,14,25,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:12px 20px 18px}
  .main-nav.open{display:flex}
  .main-nav a{padding:.8rem .6rem;font-size:1rem}
  .main-nav a[aria-current]::after{left:.6rem;right:auto;width:26px}
  .burger{display:grid}
}
@media (max-width:900px){
  .podium,.podium.is-filtered{grid-template-columns:1fr;align-items:stretch;gap:18px}
  .p-gold,.podium.is-filtered .p-gold{order:1}
  .p-silver,.podium.is-filtered .p-silver{order:2}
  .p-bronze,.podium.is-filtered .p-bronze{order:3}
  .pc-banner,.p-gold .pc-banner{height:146px}
}
@media (max-width:760px){
  /* Étoiles collées sous la vignette ici aussi : « meta » remonte juste
     après « thumb », avant le texte. */
  /* La zone « links » DOIT figurer ici : sans elle, .rc-links{grid-area:links}
     ne trouve plus sa zone, le grid crée une colonne implicite et la colonne
     « info » retombe à ~110 px (titre coupé mot par mot, pills empilées,
     accès Site/Discord hors carte). Bug corrigé le 2026-08-20. */
  .row-card{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"thumb" "meta" "info" "actions" "links";
    column-gap:12px;row-gap:12px;padding:12px 14px 16px}
  /* La réserve de place de la pastille « code promo » n'a plus lieu d'être
     une fois la pastille passée en statique (cf. @media 700px). */
  .row-card:has(.rc-code) .rc-info{padding-right:0}
  .rc-rank{grid-area:auto;position:absolute;top:16px;left:16px;z-index:2;font-size:.8rem;text-align:left;
    color:var(--t2);background:rgba(13,16,28,.82);border:1px solid var(--line-2);
    border-radius:9px;padding:3px 9px;backdrop-filter:blur(4px)}
  .sp-flag{top:auto;bottom:-12px}
  .sp-hint{display:none}
  .rc-thumb{height:98px}
  .rc-meta{flex-direction:row;align-items:center;justify-content:center;width:100%}
  .rc-actions{flex-direction:row;justify-content:flex-end;width:100%}
  .cats{grid-template-columns:1fr}
  .hero-inner{padding:44px 0 48px;gap:10px}
  .hero-logo{height:84px}
  .shead{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:640px){
  .header-cta{display:none}
  .burger{margin-left:auto}
}
@media (max-width:480px){
  .pc-name,.p-gold .pc-name{font-size:1.32rem}
  .hero-cta .btn{width:100%}
  .cta-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* ============ COMPLEMENTS SITE REEL (v32) ============ */
/* etoile vide (note 4/5 sur les rangs 11+) */
.star.empty{fill:rgba(129,138,168,.28)}

/* badges des paliers 11-22 et 23+ */
.badge-mid{color:#ddd6fe;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.35)}
.badge-new{color:#99f6e4;background:rgba(45,212,191,.11);border:1px solid rgba(45,212,191,.32)}

/* pastilles de jeu supplementaires */
.pill-jeu.g-d3 i{background:#a78bfa;box-shadow:0 0 6px rgba(167,139,250,.7)}
.pill-jeu.g-touch i{background:#2dd4bf;box-shadow:0 0 6px rgba(45,212,191,.7)}
.pill-jeu.g-autre i{background:#818aa8}

/* vignette de secours (serveur sans banniere) : grande initiale */
.rc-thumb--fallback{display:grid;place-items:center;font:800 1.7rem var(--ft);color:var(--lime);
  background:rgba(163,230,53,.07);border:1px solid rgba(163,230,53,.22);height:78px;border-radius:10px}
@media (max-width:760px){.rc-thumb--fallback{height:98px}}

/* prose SEO (bloc editorial + FAQ) sous l'annuaire */
.prose{max-width:780px;margin-top:64px}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:800;letter-spacing:-.01em;margin-bottom:14px}
.prose h3{font:700 1.05rem var(--ft);margin:20px 0 6px;color:var(--t1)}
.prose p{color:var(--t2);margin-bottom:12px}
.prose ul{color:var(--t2);padding-left:22px;margin-bottom:12px;line-height:1.8}
.prose li{margin:4px 0}
.prose strong{color:var(--t1);font-weight:600}


/* ============ FICHE SERVEUR v32 ============ */
/* padding-block (pas le raccourci padding) : le raccourci écrasait le
   padding-inline de .container et collait tout le contenu des fiches au bord
   de l'écran sur téléphone. Corrigé le 2026-08-20. */
.page-main{padding-block:26px 0}
.crumbs{font:500 .85rem var(--fb);color:var(--t3);margin-bottom:16px}
.crumbs a{color:var(--t3);transition:color .15s}
.crumbs a:hover{color:var(--lime)}

/* carte d'en-tete : meme anatomie que le podium, skin neutre par defaut */
.fiche-top{--metal:linear-gradient(165deg,#39406a,#232948 40%,#39406a);--glow:rgba(10,14,28,.6);
  max-width:860px;margin-inline:auto}
.fiche-top .pc-banner{height:210px}
.fiche-top .medal,.fiche-top .pc-rank{display:none}
/* Serveur payant : bloc de tête doré (même code couleur que ses lignes
   dorées sur l'annuaire) */
.fiche-top--sp{--metal:linear-gradient(165deg,#fde68a,#fbbf24 30%,#a16207 62%,#fde047 92%);
  --glow:rgba(251,191,36,.42)}
.fiche-top--sp .pc-body{background:linear-gradient(180deg,rgba(251,191,36,.13),rgba(251,191,36,.02) 62%)}
/* Liseré or / argent / bronze pour le top 3 (sinon neutre) */
.fiche-top.p-gold{--metal:linear-gradient(165deg,#fde68a,#fbbf24 28%,#a16207 55%,#fde047 88%)}
.fiche-top.p-silver{--metal:linear-gradient(165deg,#f1f5f9,#94a3b8 30%,#475569 60%,#cbd5e1 90%)}
.fiche-top.p-bronze{--metal:linear-gradient(165deg,#fdba74,#c2410c 32%,#7c2d12 60%,#ea580c 90%)}
/* Badge « Top N » à côté du nom : SUPPRIMÉ le 14/08 (demande d'Alexis).
   Il était généré en CSS (::after), donc invisible dans le HTML. */
.fiche-top .name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fiche-top h1{font:800 clamp(1.6rem,4vw,2.1rem)/1.1 var(--ft)}
.fiche-top .vote{width:auto;align-self:flex-start;padding:.72rem 1.5rem}

/* ---- Bande d'actions de la fiche : site officiel + Discord ----
   Deux tuiles visuellement distinctes, entre le hero et « À propos ». */
.join-bar{max-width:860px;margin:10px auto 0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.join-tile{position:relative;display:flex;align-items:center;gap:14px;padding:10px 18px;
  border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#1c2240,#171c33);
  transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.join-tile:hover{transform:translateY(-3px)}
.jt-ico{flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;border-radius:13px}
.jt-ico svg{width:23px;height:23px}
.jt-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.jt-txt b{font:800 1.02rem var(--ft);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt-sub{font:500 .82rem var(--fb);color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt-go{margin-left:auto;font-size:1.05rem;color:var(--t3);transition:transform .18s,color .18s}
.join-tile:hover .jt-go{transform:translate(3px,-3px)}
/* Site officiel : tuile sobre, simple accent lime (pas de fond saturé) */
.join-tile--site{border-color:rgba(163,230,53,.32);
  background:linear-gradient(180deg,rgba(163,230,53,.07),rgba(163,230,53,.02)),
    linear-gradient(180deg,#1c2240,#171c33)}
.join-tile--site .jt-go{color:var(--lime)}
.join-tile--site:hover{border-color:rgba(163,230,53,.6);box-shadow:0 16px 36px -22px rgba(163,230,53,.45)}
/* Discord : accent blurple, identité de la marque */
.join-tile--discord .jt-ico{color:#fff;background:linear-gradient(180deg,#7079f0,#5865f2);
  box-shadow:0 8px 22px -12px rgba(88,101,242,.9)}
.join-tile--discord:hover{border-color:rgba(88,101,242,.62);box-shadow:0 18px 40px -24px rgba(88,101,242,.55)}
.join-tile--discord:hover .jt-go{color:#8b93f7}

/* panneaux */
.panel2{max-width:860px;margin:10px auto 0;background:linear-gradient(180deg,#1c2240,#171c33);
  border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px}
.panel2 h2{font:800 1.25rem var(--ft);margin-bottom:14px}
.panel2 p{color:var(--t2)}
/* Visuel de présentation fourni par le serveur, en tête de son texte : pleine
   largeur du panneau, hauteur libre, jamais rogné (ces images sont souvent
   très hautes, un cadre fixe les décapiterait). */
.server-presentation{display:block;width:100%;height:auto;margin:0 0 18px;
  border-radius:12px;border:1px solid var(--line);background:var(--bg-2)}
/* Rythme d'une présentation, calé sur celui de RPG Paradize : les
   intertitres respirent largement au-dessus, les paragraphes se suivent
   sans se coller, et les listes restent serrées sous leur phrase d'amorce. */
.panel2 > p{margin:0 0 14px;color:var(--t2);line-height:1.62}
.panel2 > p.desc-h{margin:34px 0 14px;color:var(--t1);
  font:800 1.34rem/1.25 var(--ft);letter-spacing:.01em}
.panel2 > p.desc-h:first-of-type{margin-top:4px}
.panel2 > .desc-list{margin:0 0 18px}
.panel2 > p + .desc-list{margin-top:-4px}
.desc-list{list-style:none;padding:0;display:grid;gap:9px;
  color:var(--t2);line-height:1.55}
.desc-list li{position:relative;padding-left:22px}
.desc-list li::before{content:"";position:absolute;left:5px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--lime)}
.panel2--vote{border-color:rgba(163,230,53,.32);text-align:center;
  background:radial-gradient(460px 190px at 50% 0%,rgba(163,230,53,.1),transparent 70%),
    linear-gradient(180deg,#1c2240,#171c33)}
.panel2--vote .stars{transform:scale(1.45);transform-origin:center;margin:6px 0 10px;display:inline-flex}
.vote-form{display:flex;flex-direction:column;gap:12px;max-width:430px;margin:16px auto 0}
.vote-form input[type="text"]{background:rgba(11,14,25,.7);border:1px solid var(--line-2);border-radius:12px;
  padding:.8rem 1rem;color:var(--t1);font:500 .95rem var(--fb)}
.vote-form input[type="text"]:focus-visible{outline:2px solid var(--lime);outline-offset:1px;border-color:var(--lime)}
.vote-form .btn-lime{width:100%;padding:.95rem 1rem;font-size:1rem}
.vote-note{margin-top:12px;font-size:.8rem;color:var(--t3)}
.hp-field{position:absolute;left:-9999px;top:-9999px}

/* tableau d'infos */
.info-table{width:100%;border-collapse:collapse;margin-top:16px}
.info-table th,.info-table td{text-align:left;padding:.65rem .4rem;border-top:1px solid var(--line);font-size:.92rem}
.info-table th{color:var(--t3);font:600 .8rem var(--ft);letter-spacing:.06em;text-transform:uppercase;width:130px}
.info-table td{color:var(--t1)}
.ext-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* mini-cartes « autres serveurs » */
.mini-grid{max-width:860px;margin:14px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mini-card{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#1b2038,#171b2f);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.mini-card:hover{transform:translateY(-2px);border-color:rgba(163,230,53,.42);
  box-shadow:0 14px 34px -20px rgba(163,230,53,.3)}
.mini-thumb{width:74px;height:46px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--bg-2)}
.mini-thumb--fallback{display:grid;place-items:center;font:800 1.1rem var(--ft);color:var(--lime);
  background:rgba(163,230,53,.07);border:1px solid rgba(163,230,53,.22)}
.mini-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.mini-body b{font:700 .98rem var(--ft);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-body .star{width:12px;height:12px}
.fiche-back{max-width:860px;margin:26px auto 0}
.fiche-back a{font:700 .9rem var(--ft);color:var(--lime)}
.fiche-back a:hover{text-decoration:underline}
.fiche-h2{max-width:860px;margin:36px auto 0;font:800 1.25rem var(--ft)}

/* Encart « à découvrir » en tête de fiche : 3 emplacements, sponsorisés dorés */
.fiche-h2--top{margin-top:26px}
.mini-grid--top{grid-template-columns:repeat(3,1fr)}
.mini-card--sp{position:relative;border-color:rgba(251,191,36,.45);
  background:linear-gradient(90deg,rgba(251,191,36,.13),rgba(251,191,36,.04) 60%),
    linear-gradient(180deg,#1b2038,#171b2f)}
.mini-card--sp:hover{border-color:rgba(251,191,36,.7);box-shadow:0 14px 34px -18px rgba(251,191,36,.4)}
.mini-flag{position:absolute;top:-9px;right:10px;font-size:.6rem;padding:.18rem .45rem;letter-spacing:.06em}
/* Fiche : grille contenu à gauche + encart promotionnel en colonne droite */
/* row-gap réduit : c'est lui (et pas seulement les marges) qui espaçait les
   3 blocs de la fiche ; column-gap conservé pour l'encart de droite. */
.fiche-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  column-gap:26px;row-gap:4px;align-items:start}
.fiche-layout--solo{display:block}
.fiche-layout > .fiche-top,.fiche-layout > .panel2,.fiche-layout > .fiche-back,
.fiche-layout > .join-bar{grid-column:1}
/* Colonne de fiche utilisée en entier (15/08) : le plafond de 860 px laissait
   une marge perdue de chaque côté. Le hero garde son cadrage grâce à
   l'aspect-ratio, sinon l'élargir à hauteur fixe rognerait davantage le
   visuel en hauteur et redécapiterait les logos. */
.fiche-layout > .fiche-top,.fiche-layout > .panel2,
.fiche-layout > .join-bar{max-width:none}
/* margin-inline:auto sur un enfant de grille sans plafond de largeur le fait
   rétrécir à son contenu : les deux tuiles « Site officiel » et « Discord »
   se retrouvaient empilées sur 317 px. */
.fiche-layout > .join-bar{margin-inline:0}
/* Bloc de tête : 4,6:1. Le cadre ne montre que 43 % de la hauteur du master,
   ce qui n'est possible QUE parce que les bannières ont été refabriquées avec
   un sujet calé sur 40 % (constante dans fetch-banners.py). Aplatir encore
   imposerait de les refabriquer une nouvelle fois. */
.fiche-layout > .fiche-top .pc-banner{height:auto;aspect-ratio:4.6/1}
.fiche-layout > .panel2{padding:30px 28px 28px}
/* Le conteneur global plafonne à 1180 px, ce qui ne laissait que 814 px à la
   colonne de la fiche une fois l'encart de 340 px retiré. On l'élargit sur
   les seules pages de fiche. */
/* 1600 px, soit exactement la largeur des masters de bannières : c'est le
   plafond au-delà duquel les visuels commenceraient à être agrandis. */
.container.page-main:has(.fiche-layout){max-width:1600px}
/* Accroche de fiche : un titre commercial est plus long qu'un nom de serveur,
   il descend d'un cran en taille et respire sur deux lignes au besoin. */
.fiche-top h1.h1-accroche{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.18}
/* Pas de max-width ici : la mesure de 78ch cassait la ligne aux deux tiers du
   bloc et laissait un grand vide à droite. L'accroche occupe la largeur du
   bloc, comme le titre juste au-dessus. */
.fiche-top .desc--accroche{color:var(--t1);font-size:1.02rem;line-height:1.55;max-width:none}
/* Les skins podium (p-gold/silver/bronze) portent un `order` : le neutraliser
   ici, sinon le hero des fiches top 3 passe sous « À propos » dans la grille */
.fiche-layout > .fiche-top{order:0}
.fiche-aside{grid-column:2;grid-row:1 / span 9;position:sticky;top:86px}
.fiche-aside .fiche-h2{margin:0;max-width:none;font-size:1.02rem}
.fiche-aside .mini-grid{grid-template-columns:1fr;max-width:none;margin:10px 0 0;gap:12px}
/* Emplacement promotionnel libre : explicitement à vendre */
.mini-card--promo{border:1px dashed rgba(251,191,36,.4);background:rgba(251,191,36,.035)}
.mini-card--promo:hover{border-color:rgba(251,191,36,.75);transform:translateY(-2px);
  box-shadow:0 14px 34px -18px rgba(251,191,36,.3)}
.mini-thumb--promo{display:grid;place-items:center;font:800 1.3rem var(--ft);color:var(--gold);
  background:rgba(251,191,36,.07);border:1px dashed rgba(251,191,36,.4)}
.mini-card--promo .mini-sub{color:var(--gold)}
@media (max-width:1024px){
  .fiche-layout{display:block}
  .fiche-aside{position:static;margin:22px auto 0;max-width:860px}
  .fiche-aside .mini-grid{grid-template-columns:repeat(3,1fr)}
  .fiche-aside .fiche-h2{margin-top:0}
}

@media (max-width:760px){
  .fiche-aside .mini-grid{grid-template-columns:1fr}
  .fiche-top .pc-banner{height:150px}
  .fiche-top .pc-rank{font-size:64px;bottom:-10px}
  .mini-grid{grid-template-columns:1fr}
  .panel2{padding:20px 16px}
}

.mini-sub{font:500 .8rem var(--fb);color:var(--t3)}


/* Feature « Ajouter mon serveur » retiree : masquer les CTA residuels (regen-safe) */
a.header-cta[href="/ajouter-serveur/"],a.filters-cta{display:none!important}
/* Vote desactive (annuaire editorial) : masquer les boutons « Voter » residuels */
a.vote{display:none!important}

/* ==== PAGES DE CONTENU (.page-doc) ==== */
.page-doc{max-width:1180px;padding-top:24px;padding-bottom:24px}
/* Dans les pages de contenu, le bloc editorial .prose occupe toute la largeur
   (le cap 780px reste en place ailleurs, ex. sous l'annuaire des serveurs). */
.page-doc .prose{max-width:none}
.page-doc .breadcrumb{font:500 .84rem var(--fb);color:var(--t3);margin:2px 0 18px}
.page-doc .breadcrumb a{color:var(--t2)}
.page-doc .breadcrumb a:hover{color:var(--lime)}
.page-doc h1{font:800 clamp(1.7rem,3.4vw,2.5rem) var(--ft);letter-spacing:-.02em;color:var(--t1);margin-bottom:12px;line-height:1.12}
.page-doc .lead{font-size:1.08rem;line-height:1.6;color:var(--t2);margin-bottom:26px}
.page-doc .toc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:28px}
.page-doc .toc-title{font:800 .95rem var(--ft);color:var(--t1);margin-bottom:8px}
.page-doc .toc ol{margin:0;padding-left:20px;color:var(--t2);line-height:1.9}
.page-doc .toc a{color:var(--t2)}
.page-doc .toc a:hover{color:var(--lime)}
.page-doc .panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin-bottom:20px}
.page-doc .panel h2{font:800 1.32rem var(--ft);color:var(--t1);margin-bottom:12px;scroll-margin-top:90px}
.page-doc .panel h3{font:700 1.06rem var(--ft);color:var(--t1);margin:18px 0 6px}
.page-doc .panel p{color:var(--t2);line-height:1.66;margin-bottom:12px}
.page-doc .panel ul{color:var(--t2);padding-left:22px;line-height:1.8;margin-bottom:12px}
.page-doc .panel li{margin:4px 0}
.page-doc .panel a{color:var(--lime)}
.page-doc strong{color:var(--t1)}
.page-doc .callout{background:rgba(163,230,53,.08);border:1px solid rgba(163,230,53,.22);
  border-left:3px solid var(--lime);border-radius:12px;padding:14px 18px;margin:14px 0;color:var(--t2);line-height:1.62}
.page-doc .callout strong{color:var(--lime)}
.page-doc .callout--notice{background:rgba(251,146,60,.10);border-color:rgba(251,146,60,.4);border-left-color:#fb923c}
.page-doc .callout--notice strong{color:#fb923c}
.page-doc .link-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin:14px 0}
.page-doc .link-card{display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:center;min-height:58px;
  background:rgba(236,238,246,.03);border:1px solid var(--line);border-radius:12px;padding:14px 12px;
  color:var(--t2);font:600 .92rem var(--fb);transition:transform .15s,border-color .15s,color .15s}
.page-doc .link-card:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.page-doc .link-card strong{color:var(--t1)}
.page-doc .grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
/* Tableaux (stats, drops, comparatifs) : fluides, jamais de barre de defilement horizontale */
.page-doc .panel{overflow-x:auto}
.page-doc .panel table{width:100%;border-collapse:collapse;margin:12px 0 2px;font-size:.92rem}
.page-doc .panel thead th{text-align:left;font:700 .76rem var(--ft);letter-spacing:.04em;text-transform:uppercase;
  color:var(--t3);padding:0 16px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.page-doc .panel tbody td{padding:11px 16px;border-bottom:1px solid var(--line);color:var(--t2);
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;vertical-align:top}
.page-doc .panel tbody tr:last-child td{border-bottom:0}
.page-doc .panel tbody tr:hover td{background:rgba(163,230,53,.055)}
.page-doc .panel tbody td:first-child{color:var(--t1);font-weight:600}
.page-doc .panel table strong{color:var(--lime)}
/* Les cellules reviennent a la ligne (contenu court = 1 ligne, contenu long =
   il s'adapte), donc jamais de barre de defilement horizontale, PC comme mobile.
   Sous 640px on resserre encore pour les telephones. */
@media(max-width:640px){
  .page-doc .panel{padding-left:15px;padding-right:15px}
  .page-doc .panel table{font-size:.85rem}
  .page-doc .panel thead th{white-space:normal;padding-left:8px;padding-right:8px}
  .page-doc .panel tbody td{padding-left:8px;padding-right:8px}
}
/* Hero d'en-tete des pages de contenu (image + titre surligne) */
.hero--page .hero-inner{padding:56px 0 50px}
.hero--page h1{max-width:900px}
.hero--page .hero-lead{max-width:760px}
.hero-item{width:104px;height:104px;border-radius:18px;object-fit:cover;margin-bottom:4px;
  background:rgba(11,14,25,.5);border:1px solid var(--line-2);padding:6px;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.6);animation:fadeUp .7s .05s both}

/* ============ NAV : SOUS-MENU DEROULANT (Outils) ============ */
.main-nav .has-sub{position:relative}
.main-nav .has-sub>a{display:inline-flex;align-items:center;gap:.32em}
.main-nav .caret{width:11px;height:11px;flex:none;opacity:.65;transition:transform .22s,opacity .2s}
.main-nav .has-sub:hover .caret,
.main-nav .has-sub:focus-within .caret{transform:rotate(180deg);opacity:1}
.main-nav .subnav{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:rgba(11,14,25,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 46px -20px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70}
.main-nav .subnav::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.main-nav .has-sub:hover .subnav,
.main-nav .has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.main-nav .subnav a{display:flex;align-items:center;gap:10px;padding:.55rem .6rem;border-radius:9px;
  font:600 .9rem var(--ft);color:var(--t2);white-space:nowrap}
.main-nav .subnav a:hover{color:var(--t1);background:rgba(236,238,246,.06)}
.main-nav .subnav a[aria-current]::after{display:none}
.main-nav .subnav .sic{width:16px;height:16px;flex:none;color:var(--lime);opacity:.85}
.main-nav .subnav .sic--img{width:22px;height:22px;object-fit:contain;opacity:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.main-nav .subnav .sub-sep{height:1px;background:var(--line);margin:5px 4px}
.main-nav .subnav .sub-all{color:var(--lime)}
.main-nav .subnav .sub-soon{color:var(--t3)}
.main-nav .subnav .sub-soon .tag{margin-left:auto;font:700 .6rem var(--fb);color:var(--t3);
  border:1px solid var(--line-2);border-radius:999px;padding:1px 7px;text-transform:uppercase;letter-spacing:.04em}

/* « Serveurs privés » se comporte comme les autres liens : un seul trait (::after) a l'etat actif */

@media (max-width:920px){
  .main-nav .has-sub{position:static}
  .main-nav .caret{display:none}
  .main-nav .subnav{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    background:none;border:0;box-shadow:none;padding:0 0 4px 12px;margin:0;min-width:0;
    border-left:2px solid var(--line-2);border-radius:0}
  .main-nav .subnav::before{display:none}
  .main-nav .subnav a{font-size:.94rem;padding:.5rem .4rem}
  .main-nav .subnav .sub-sep{display:none}
}

/* ============ PAGE OUTILS (refonte UX) ============ */
.tools-intro{color:var(--t2);font-size:1.02rem;line-height:1.6;margin:-2px 0 30px}
.tools-intro strong{color:var(--t1)}
.tools-sec{margin-bottom:36px}
.tools-sec-head{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.tools-sec-head h2{font:800 1.14rem var(--ft);color:var(--t1);white-space:nowrap;margin:0}
.tools-sec-head .line{height:1px;background:var(--line);flex:1}
.tools-sec-head .n{font:700 .74rem var(--fb);color:var(--t3);border:1px solid var(--line-2);
  border-radius:999px;padding:2px 11px;white-space:nowrap}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.tool-card{position:relative;display:flex;flex-direction:column;gap:13px;
  background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--line);
  border-radius:18px;padding:22px 22px 20px;transition:transform .2s,border-color .2s,box-shadow .2s}
a.tool-card{text-decoration:none}
.tool-card.is-live:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.75)}
.tool-ic{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;
  background:rgba(163,230,53,.12);border:1px solid rgba(163,230,53,.28);color:var(--lime)}
.tool-ic svg{width:26px;height:26px}
.tool-ic img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.tool-ic.tool-ic--img{background:rgba(11,14,25,.5);border-color:var(--line-2)}
.tool-card h3{font:800 1.16rem var(--ft);color:var(--t1);line-height:1.15;margin:0}
.tool-card p{color:var(--t2);font-size:.94rem;line-height:1.55;margin:0;flex:1}
.tool-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.tool-open{display:inline-flex;align-items:center;gap:7px;font:800 .88rem var(--ft);color:#0b0e19;
  background:var(--lime);border-radius:10px;padding:.5rem .9rem;transition:background .2s,transform .2s}
.tool-card.is-live:hover .tool-open{background:var(--lime-2)}
.tool-open svg{width:15px;height:15px}
.tool-meta{font:600 .78rem var(--fb);color:var(--t3)}
.tool-card.is-soon{opacity:.74}
.tool-card.is-soon .tool-ic{background:rgba(129,138,168,.1);border-color:var(--line-2);color:var(--t3)}
.tool-soon-tag{display:inline-flex;align-items:center;gap:7px;font:700 .82rem var(--ft);color:var(--t3)}
.tool-soon-tag svg{width:15px;height:15px}
.tool-badge{position:absolute;top:16px;right:16px;font:700 .62rem var(--fb);text-transform:uppercase;
  letter-spacing:.05em;padding:3px 9px;border-radius:999px}
.tool-badge.live{color:#c9f66b;background:rgba(163,230,53,.12);border:1px solid rgba(163,230,53,.34)}
.tool-badge.soon{color:var(--t3);background:rgba(129,138,168,.1);border:1px solid var(--line-2)}

/* ============ ALMANAX ============ */
.page-doc.alm-page{max-width:1180px}
.alm-top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);gap:20px;align-items:start;margin-bottom:22px}
.alm-top .alm-day-wrap{margin:0}
.alm-top .alm-cal{margin:0;position:sticky;top:84px}
@media (max-width:940px){
  .alm-top{grid-template-columns:1fr}
  .alm-top .alm-cal{position:static}
}
.alm-day-wrap{margin:0 0 22px;transition:opacity .2s}
.alm-day-wrap.is-loading{opacity:.5}
.alm-card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--line);
  border-radius:18px;padding:24px 26px 22px}
.alm-card--error{color:var(--t2);text-align:center}
.alm-card-top{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.alm-eyebrow{font:700 .74rem var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.alm-date{font:800 clamp(1.5rem,3.4vw,2rem) var(--ft);color:var(--t1);letter-spacing:-.01em;line-height:1.1}

.alm-fest{display:flex;gap:12px;align-items:flex-start;background:rgba(251,191,36,.1);
  border:1px solid rgba(251,191,36,.34);border-radius:14px;padding:12px 16px;margin-bottom:16px}
.alm-fest-ic{font-size:1.3rem;line-height:1.2}
.alm-fest div{display:flex;flex-direction:column;gap:2px}
.alm-fest strong{color:var(--gold);font:800 1rem var(--ft)}
.alm-fest span{color:var(--t2);font-size:.9rem}

.alm-bonus{position:relative;background:radial-gradient(120% 120% at 0% 0%,rgba(163,230,53,.14),transparent 60%),rgba(163,230,53,.06);
  border:1px solid rgba(163,230,53,.4);border-radius:16px;padding:18px 20px;margin-bottom:16px}
.alm-bonus-tag{display:inline-block;font:700 .7rem var(--fb);letter-spacing:.1em;text-transform:uppercase;
  color:#0b0e19;background:var(--lime);border-radius:999px;padding:3px 11px;margin-bottom:8px}
.alm-bonus-title{font:800 1.28rem var(--ft);color:var(--t1);margin:0 0 6px;line-height:1.15}
.alm-bonus-desc{color:var(--t2);line-height:1.55;margin:0}

.alm-offering{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.alm-off-img{flex:none;width:88px;height:88px;display:grid;place-items:center;
  background:rgba(0,0,0,.28);border:1px solid var(--line-2);border-radius:12px}
.alm-off-img img{width:76px;height:76px;object-fit:contain}
.alm-off-body{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.alm-off-label{font:600 .78rem var(--fb);letter-spacing:.02em;color:var(--t3)}
.alm-off-item{font:800 1.24rem var(--ft);color:var(--t1);margin:0}
.alm-off-qty{color:var(--lime)}
.alm-off-reward{margin:0;color:var(--t2);font-size:.95rem}
.alm-off-reward strong{color:var(--gold);font-weight:800}

.alm-meryde{background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.28);
  border-radius:14px;padding:14px 18px;margin-bottom:14px}
.alm-meryde-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.alm-meryde-name{font:800 1.05rem var(--ft);color:#d7ccff}
.alm-meryde-badge{font:700 .62rem var(--fb);letter-spacing:.1em;text-transform:uppercase;color:#c4b5fd;
  border:1px solid rgba(167,139,250,.4);border-radius:999px;padding:2px 9px}
.alm-meryde-desc{color:var(--t2);font-style:italic;line-height:1.55;margin:0}
.alm-effect{border-left:3px solid var(--lime);background:rgba(163,230,53,.05);border-radius:0 12px 12px 0;padding:12px 16px}
.alm-effect h3{font:800 .95rem var(--ft);color:var(--lime);margin:0 0 4px}
.alm-effect p{color:var(--t2);line-height:1.6;margin:0}

/* Calendrier */
.alm-cal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.alm-cal-top h2{margin:0}
.alm-cal-nav{display:flex;align-items:center;gap:10px}
.alm-nav-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-2);
  border-radius:10px;color:var(--t1);font-size:1.2rem;line-height:1;transition:border-color .2s,background .2s}
.alm-nav-btn:hover{border-color:var(--lime);color:var(--lime)}
.alm-cal-label{font:800 1rem var(--ft);color:var(--t1);min-width:150px;text-align:center;text-transform:capitalize}
.alm-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.alm-cal-dow span{text-align:center;font:700 .72rem var(--fb);letter-spacing:.04em;color:var(--t3)}
.alm-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.alm-cal-cell{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--card-2);border:1px solid var(--line);border-radius:11px;color:var(--t2);
  font:700 .95rem var(--ft);transition:border-color .15s,background .15s,transform .15s}
.alm-cal-cell.is-empty{background:none;border:0;pointer-events:none}
button.alm-cal-cell{cursor:pointer}
button.alm-cal-cell:hover{border-color:var(--lime);color:var(--t1);transform:translateY(-2px)}
.alm-cal-cell.is-today{border-color:var(--lime);background:rgba(163,230,53,.12);color:var(--t1);box-shadow:0 0 0 1px rgba(163,230,53,.5) inset}
.alm-cal-cell.is-active{border-color:var(--lime-2);background:rgba(163,230,53,.22);color:#fff}
.alm-cell-dot{width:7px;height:7px;border-radius:50%}
.alm-cal-hint{margin-top:12px;color:var(--t3);font-size:.85rem}

/* Explorateur par categorie */
.alm-browser-sub{color:var(--t2);margin:-4px 0 16px}
.alm-cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.alm-cat-tile{--c:var(--lime);display:flex;flex-direction:column;gap:3px;text-align:left;
  background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:12px;
  padding:11px 14px;transition:border-color .15s,transform .15s,background .15s}
.alm-cat-tile:hover{transform:translateY(-2px);background:rgba(236,238,246,.04)}
.alm-cat-tile.is-on{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset}
.alm-cat-name{font:700 .92rem var(--ft);color:var(--t1);line-height:1.2}
.alm-cat-count{font:600 .76rem var(--fb);color:var(--t3)}
.alm-cat-results:not(:empty){margin-top:18px}
.alm-cat-head{font:600 .95rem var(--fb);color:var(--t2);margin-bottom:10px}
.alm-cat-head strong{color:var(--t1)}
.alm-cat-list{display:flex;flex-direction:column;gap:4px;max-height:360px;overflow:auto;scrollbar-width:thin}
.alm-cat-row{display:flex;gap:14px;align-items:baseline;text-align:left;padding:.5rem .7rem;border-radius:9px;
  border:1px solid transparent;transition:background .15s,border-color .15s}
.alm-cat-row:hover{background:rgba(236,238,246,.05);border-color:var(--line)}
.alm-cat-row.is-now{background:rgba(163,230,53,.1);border-color:rgba(163,230,53,.4)}
.alm-cat-date{flex:none;width:74px;font:700 .82rem var(--fb);color:var(--lime)}
.alm-cat-desc{color:var(--t2);font-size:.9rem;line-height:1.4}
.alm-muted{color:var(--t3);font-size:.9rem;padding:8px 0}
@media (max-width:560px){
  .alm-cal-grid,.alm-cal-dow{gap:5px}
  .alm-cal-cell{border-radius:9px;font-size:.85rem}
  .alm-off-item{font-size:1.1rem}
}

/* Meryde : illustration officielle (krosmoz) + texte cote a cote */
.alm-meryde{display:flex;gap:16px;align-items:flex-start}
.alm-meryde-illu{flex:none;width:92px}
.alm-meryde-illu img{width:92px;height:auto;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--line-2)}
.alm-meryde-body{flex:1;min-width:0}
@media (max-width:480px){.alm-meryde{flex-direction:column;align-items:center;text-align:center}}

/* ============ FAQ accordeon (repris de la home, global) ============ */
.faq{display:flex;flex-direction:column;gap:12px;margin:4px 0 8px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 20px;font:700 1.02rem var(--ft);color:var(--t1);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font:700 1.45rem var(--ft);color:var(--lime);line-height:1;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--lime)}
.faq-body{padding:0 20px 18px;color:var(--t2);line-height:1.62}
.faq-body p{margin:0 0 8px}
.faq-body ul{margin:0;padding-left:20px}
.faq-body li{margin:4px 0}
.faq-body a{color:var(--lime)}

/* Tuiles categories avec icone (facon Dolmanax, override vertical) */
.alm-cat-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.alm-cat-tile{--c:var(--lime);flex-direction:column;align-items:center;text-align:center;gap:9px;
  border-left:1px solid var(--line);padding:16px 12px 13px}
.alm-cat-tile:hover{border-color:var(--c);transform:translateY(-3px)}
.alm-cat-tile.is-on{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset}
.alm-cat-ic{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;
  background:rgba(236,238,246,.05);border:1px solid var(--line-2);color:var(--c)}
.alm-cat-ic svg{width:27px;height:27px}
.alm-cat-tile .alm-cat-name{font-size:.88rem}

/* Icones categories = vrais assets (affichage direct, sans cadre) */
.alm-cat-ic{width:auto;height:46px;background:none;border:0;border-radius:0}
.alm-cat-ic img{height:46px;width:auto;object-fit:contain}

/* Lignes detail : plusieurs icones de categorie par jour (multi-tag) */
.alm-cat-row{align-items:center}
.alm-row-ics{flex:none;display:flex;gap:4px;align-items:center;width:104px;flex-wrap:wrap}
.alm-row-ic{height:30px;width:auto}
@media (max-width:560px){.alm-row-ics{width:76px}.alm-row-ic{height:24px}}