/* SpotFaction : accueil, sur le modèle des annuaires de serveurs de jeu. La charte du site (noir,
   vert #7fe062, ambre), titres en Bricolage Grotesque, texte en Figtree. Chargée par index.php seulement. */
/* Polices de l'accueil, hébergées ici comme celles de fonts.css : aucune requête vers Google. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body{
  --sun:linear-gradient(100deg,#7fe062 0%,#b6f07a 55%,#e4f79a 100%);
  --teal:#7fe062;--ease:cubic-bezier(.22,.75,.24,1);--r:18px;
  font-family:Figtree,system-ui,sans-serif}
body :is(h1,h2,h3,.display){font-family:'Bricolage Grotesque',Figtree,sans-serif;font-weight:800}
body .num{font-family:Figtree,system-ui,sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
body .btn{border-radius:999px;font-weight:700}
body .btn-green:hover{filter:brightness(1.06)}
body .btn-line{border-color:var(--line2);background:rgba(255,255,255,.04)}
body .nav .nav-cta{border-radius:999px}

.home .sec{padding:clamp(56px,6vw,96px) 0}
.home .sec + .sec{padding-top:0}
.home #jeux,.home #direct{scroll-margin-top:76px}
.js .rv{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}

/* ============================ LE COUCHER DE SOLEIL ============================ */
.sun{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:clamp(56px,6.4vw,96px) 0 clamp(64px,6vw,96px);
  background:linear-gradient(180deg,#0c150e,#0f1d11 70%,#10200f);border-radius:0 0 50% 50% / 0 0 64px 64px;
  box-shadow:inset 0 -1px 0 rgba(127,224,98,.18)}
.sun-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.orb{position:absolute;left:50%;top:34%;width:min(1100px,125vw);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(150,235,110,.42) 0%,rgba(127,224,98,.26) 24%,rgba(40,110,50,.14) 46%,transparent 66%);
  filter:blur(24px);animation:sunrise 2.4s var(--ease) both}
.orb-2{left:12%;top:-30%;width:620px;background:radial-gradient(circle,rgba(127,224,98,.32),transparent 65%);filter:blur(50px);animation:none}
.horizon{display:none}
/* Un grain fin : la lumière a de la matière, pas l'aspect d'un dégradé de logiciel. */
.sun-sky::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes sunrise{from{opacity:0;transform:translateX(-50%) translateY(60px) scale(.9)}}
.sun-in{position:relative}
.sun-live{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--text2);font-size:.86rem;font-weight:500}
.sun-live b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ping-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(127,224,98,.6);animation:ping 2s ease-out infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 9px rgba(127,224,98,0)}}
.sun h1{font-size:clamp(3rem,7vw,6rem);line-height:.92;letter-spacing:-.035em;text-shadow:0 10px 60px rgba(40,0,40,.35);margin-top:26px;color:var(--text)}
.sun h1 em{font-style:normal;background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 .04em .06em 0}
.sun-lead{max-width:50ch;margin:24px auto 0;color:var(--text2);font-size:clamp(1rem,1.35vw,1.17rem);line-height:1.55}
.home-search{display:flex;align-items:center;gap:12px;max-width:640px;margin:38px auto 0;padding:7px 7px 7px 22px;
  border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--text2);
  box-shadow:0 30px 80px -34px rgba(127,224,98,.6);transition:border-color .2s,box-shadow .2s}
.home-search:focus-within{border-color:rgba(127,224,98,.7);box-shadow:0 0 0 5px rgba(127,224,98,.14),0 30px 80px -34px rgba(127,224,98,.7)}
.home-search svg{flex:none}
.home-search input{flex:1;min-width:0;border:0;outline:none;background:none;color:var(--text);font:inherit;font-size:1.02rem;padding:12px 0}
.home-search input::placeholder{color:var(--muted)}
.home-search button{flex:none;border:0;border-radius:999px;cursor:pointer;padding:14px 26px;background:var(--sun);color:var(--green-ink);
  font:800 .95rem Figtree,system-ui,sans-serif;transition:transform .18s,filter .18s}
.home-search button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips a{padding:7px 15px;border-radius:999px;border:1px solid var(--line2);color:var(--text2);font-size:.86rem;font-weight:600;
  transition:border-color .2s,color .2s,background .2s}
.chips a:hover{border-color:rgba(127,224,98,.55);color:var(--text);background:rgba(127,224,98,.1)}
.js .sun-in>*{animation:up .9s var(--ease) both}
.js .sun-in>*:nth-child(2){animation-delay:.08s}
.js .sun-in>*:nth-child(3){animation-delay:.16s}
.js .sun-in>*:nth-child(4){animation-delay:.24s}
.js .sun-in>*:nth-child(5){animation-delay:.32s}
@keyframes up{from{opacity:0;transform:translateY(22px)}}

/* Les jeux du moment, dans le bandeau : trois grandes cartes, l'image à droite, le texte à gauche. */
.moment{position:relative;margin-top:clamp(40px,4.4vw,60px);text-align:left}
.moment-t{font:800 1.2rem 'Bricolage Grotesque',sans-serif;color:var(--text);margin-bottom:14px}
.moment-t span{color:var(--green)}
.moment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mg{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:150px;padding:20px 22px;border-radius:16px;
  overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
  transition:transform .3s var(--ease),border-color .3s}
.mg img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .6s var(--ease)}
.mg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,12,9,.95) 20%,rgba(8,12,9,.55) 60%,rgba(8,12,9,.15))}
.mg:hover{transform:translateY(-4px);border-color:rgba(127,224,98,.55)}
.mg:hover img{transform:scale(1.06)}
.mg-flag{position:absolute;top:14px;right:14px;padding:5px 11px;border-radius:999px;background:var(--green);color:var(--green-ink);
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mg-b{display:flex;flex-direction:column;gap:4px}
.mg-name{font:800 1.55rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:#fff}
.mg-n{color:var(--text2);font-size:.86rem}
.mg-n b{color:var(--green);font-weight:800}
.mg-go{margin-top:8px;color:var(--green);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.mg-go i{font-style:normal;display:inline-block;transition:transform .2s}
.mg:hover .mg-go i{transform:translateX(4px)}

/* ============================ EN-TÊTES DE SECTION ============================ */
.sh{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;margin-bottom:26px}
.sh h2{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.03em}
.sh-note{color:var(--muted);font-size:.86rem;margin-top:10px}
.sh-c{flex-direction:column;align-items:center;text-align:center}
.sh-c .sh-note{margin-top:0}
.sec-top{padding-top:0 !important}

/* ============================ LE TOP 5 ============================ */
.top5{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.t5{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;
  padding:30px 18px 22px;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.t5:hover{transform:translateY(-6px);border-color:rgba(127,224,98,.45);box-shadow:0 34px 60px -32px rgba(127,224,98,.55)}
.t5-glow{position:absolute;inset:0;z-index:-1;overflow:hidden}
.t5-glow img{width:100%;height:100%;object-fit:cover;filter:blur(36px) saturate(1.8);transform:scale(1.5);opacity:.34}
.t5-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,23,17,.2),var(--surface) 72%)}
.t5-rk{position:absolute;top:12px;left:16px;font:800 2.2rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.05em;
  background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.t5 .ico{width:66px;height:66px;border-radius:20px;border:0;box-shadow:0 18px 36px -14px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}
.t5-nm{display:block;width:100%;margin-top:16px;font:800 1.1rem/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t5-meta{margin-top:4px;color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.t5-n{margin-top:16px;color:var(--muted);font-size:.8rem}
.t5-n b{display:block;font:800 2.1rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;color:var(--text);margin-bottom:3px;font-variant-numeric:tabular-nums}
.t5-bar{width:100%;height:5px;margin-top:14px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.t5-bar i{display:block;height:100%;border-radius:5px;background:var(--sun)}
.t5-go{margin-top:16px;color:var(--green);font-size:.8rem;font-weight:700;opacity:.7;transition:opacity .2s}
.t5-go span{display:inline-block;transition:transform .2s}
.t5:hover .t5-go{opacity:1}
.t5:hover .t5-go span{transform:translateX(4px)}
.t5.is-first{border-color:rgba(245,166,35,.35)}

/* ============================ LA SÉLECTION DE JEUX ============================
   Une grille d'illustrations : nom du jeu en blanc, nombre de serveurs dessous. Les jeux pas encore
   suivis sont légèrement éteints et portent « Bientôt » ; la dernière case mène à tous les serveurs. */
.gamegrid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.gamegrid li{min-width:0}
.gc{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;height:100%;
  aspect-ratio:16/10;padding:16px 18px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  background:#141a14;box-shadow:0 18px 36px -22px rgba(0,0,0,.95);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.gc img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .3s}
.gc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,9,7,.08) 25%,rgba(6,9,7,.5) 55%,rgba(6,9,7,.92))}
a.gc:hover{transform:translateY(-4px);border-color:rgba(127,224,98,.6);box-shadow:0 26px 46px -24px rgba(127,224,98,.35)}
a.gc:hover img{transform:scale(1.07)}
.gc-name{font:800 1.18rem/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.gc-sub{color:rgba(255,255,255,.78);font-size:.78rem;font-weight:600}
.gc-sub i{font-style:normal;color:var(--green);font-weight:800;margin-right:2px}
.gc.is-soon img{filter:saturate(.55) brightness(.72)}
.gc.is-soon:hover img{filter:saturate(.9) brightness(.85)}
.gc.is-soon .gc-sub{color:rgba(255,255,255,.6)}
.gc.no-img{background:linear-gradient(150deg,#3f8f3a,#3a2a1b 80%)}
.gc-soon{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gc-6 .gc-sub i{color:#ff7ab0}
.gc-all{justify-content:center;align-items:flex-start;gap:14px;
  background:radial-gradient(90% 90% at 100% 0%,rgba(190,245,140,.35),transparent 60%),linear-gradient(150deg,#2d6b2b,#143317);
  border-color:rgba(127,224,98,.5)}
.gc-all::before{display:none}
.gc-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--green);color:var(--green-ink);
  font-size:.78rem;font-weight:800}
.gc-btn i{font-style:normal;transition:transform .2s}
.gc-all:hover .gc-btn i{transform:translateX(3px)}

/* ============================ CE QUI BOUGE ============================
   Un seul panneau, trois colonnes de même structure : un titre, trois lignes, un lien. */
.pulse3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden}
.p3{display:flex;flex-direction:column;min-width:0;padding:22px 22px 18px}
.p3 + .p3{border-left:1px solid var(--line)}
.p3-up{--c:var(--green)}.p3-new{--c:var(--amber)}.p3-dead{--c:#9aa39a}
.p3-t{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:var(--text);font-size:.8rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase}
.p3-dot{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.p3-list{list-style:none}
.p3-list a{display:flex;align-items:center;gap:12px;padding:9px 10px;margin:0 -10px;border-radius:12px;transition:background .18s}
.p3-list a:hover{background:rgba(255,255,255,.04)}
.p3-list .ico{flex:none;width:38px;height:38px;border-radius:11px;border:0}
.p3-nm{flex:1;min-width:0}
.p3-nm b{display:block;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s}
.p3-list a:hover .p3-nm b{color:var(--c)}
.p3-nm small{display:block;margin-top:2px;color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3-v{flex:none;text-align:right;font:800 1.1rem/1 'Bricolage Grotesque',sans-serif;color:var(--c);font-variant-numeric:tabular-nums}
.p3-v small{display:block;margin-top:3px;font:500 .66rem Figtree,sans-serif;color:var(--muted)}
.p3-empty{color:var(--muted);font-size:.86rem;line-height:1.55;padding:6px 0 10px}
.p3-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;color:var(--c);font-size:.84rem;font-weight:700}
.p3-more span{transition:transform .2s}
.p3-more:hover span{transform:translateX(4px)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.card-t{font-size:.8rem;color:var(--muted)}
.movement-hours{margin-top:14px}
.hours{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;align-items:end;height:100px;margin-top:14px}
.hb{height:100%;display:flex;align-items:flex-end;min-width:0}
.hb i{display:block;width:100%;height:var(--v);border-radius:4px;background:linear-gradient(180deg,rgba(127,224,98,.6),rgba(127,224,98,.14));
  transform-origin:bottom;transition:background .2s}
.js .hours .hb i{animation:grow .7s var(--ease) both;animation-delay:calc(var(--i,0) * 22ms);animation-play-state:paused}
.js .rv.in .hours .hb i{animation-play-state:running}
@keyframes grow{from{transform:scaleY(0)}}
.hb.peak i{background:var(--sun)}
.hb.now i{background:linear-gradient(180deg,#fff,rgba(255,255,255,.25))}
.hb.nd i{background:var(--line2)}
.hb:hover i{background:var(--sun)}
.hours-x{display:flex;justify-content:space-between;margin-top:9px;font-size:.7rem;color:var(--muted)}
.beat-k{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.beat-k b{color:var(--text)}
.beat-k .hi{color:var(--green)}

/* ============================ LE CLASSEMENT ============================ */
.periods{display:flex;gap:2px;flex:none;max-width:100%;overflow-x:auto;padding:4px;border:1px solid var(--line2);border-radius:999px;
  background:rgba(255,255,255,.04);scrollbar-width:none}
.periods a{flex:none;padding:8px 16px;border-radius:999px;font-size:.84rem;font-weight:700;color:var(--muted);white-space:nowrap;transition:color .16s}
.periods a:hover{color:var(--text)}
.periods a[aria-current]{background:var(--sun);color:var(--green-ink)}
.tabs2{display:none}
.tabs2 a{flex:none;font-size:.86rem;font-weight:600;color:var(--text2);transition:color .16s}
.tabs2 a:hover{color:var(--green)}
/* Le sélecteur de jeu : une vignette et les chiffres de chaque jeu, le jeu affiché cerclé de vert. */
.gameswitch{display:flex;gap:10px;overflow-x:auto;margin:-6px 0 18px;padding-bottom:2px;scrollbar-width:none}
.gameswitch a{flex:none;display:flex;align-items:center;gap:11px;padding:7px 16px 7px 7px;border-radius:14px;
  border:1px solid var(--line2);background:var(--surface);transition:border-color .2s,background .2s}
.gameswitch a:hover{border-color:rgba(127,224,98,.45)}
.gameswitch a[aria-current]{border-color:var(--green);background:rgba(127,224,98,.08);box-shadow:inset 0 0 0 1px var(--green)}
.gameswitch img{width:56px;height:34px;border-radius:8px;object-fit:cover;filter:saturate(.85)}
.gameswitch a[aria-current] img{filter:none}
.gameswitch b{display:block;font-size:.9rem;font-weight:800;color:var(--text)}
.gameswitch small{display:block;font-size:.72rem;color:var(--muted);margin-top:1px}
.gameswitch a[aria-current] small{color:var(--green)}
/* La barre de part : sous le chiffre, la place du serveur par rapport au premier de la liste. */
.rank-empty{border:1px dashed var(--line2);border-radius:var(--r);padding:clamp(24px,4vw,40px);color:var(--text2);font-size:.95rem;line-height:1.65;text-align:center}
.rank-empty a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.rank{list-style:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.rank li + li{border-top:1px solid var(--line)}
.rank .row,.rank-head{display:grid;grid-template-columns:52px 44px minmax(170px,1.1fr) minmax(0,.9fr) 84px 150px 176px 92px;
  align-items:center;gap:16px;padding:12px 18px 12px 0;position:relative;min-width:0;transition:background .2s}
.rank .row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sun);transform:scaleY(0);transition:transform .25s var(--ease)}
.rank .row:hover{background:rgba(127,224,98,.035)}
.rank .row:hover::before{transform:scaleY(1)}
.rank .row.is-top .rk{background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.rank .rk{font:800 1.05rem 'Bricolage Grotesque',sans-serif;color:var(--muted);text-align:center}
.rank .ico{width:44px;height:44px;border-radius:13px;border:0}
.rank .nm{min-width:0}
/* Le nom porte le lien de la fiche, étiré sur toute la ligne. */
.row-link{display:block;font-weight:800;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.row-link::after{content:"";position:absolute;inset:0;z-index:1}
.rank .row:hover .row-link{color:var(--green)}
.rank .nm small{display:block;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rank .ds{color:var(--muted);font-size:.85rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .ac{justify-self:start;border:1px solid var(--line2);border-radius:999px;padding:3px 11px;font-size:.74rem;color:var(--text2);white-space:nowrap}
.rank .ac.wl{color:var(--amber);border-color:rgba(245,166,35,.35)}

/* La courbe des 24 h : aire en dégradé, trait lumineux, point du dernier relevé qui pulse. */
.rank .sp{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.sp-k{color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums}
.rank .spark{width:150px;height:40px;overflow:visible}
.rank .spark .sa{fill:url(#spk)}
.rank .spark .sl{stroke:#8fe874;stroke-width:2;filter:drop-shadow(0 0 4px rgba(127,224,98,.55))}
.rank .spark .sd{fill:#dffbc9;stroke:rgba(127,224,98,.45);stroke-width:5;paint-order:stroke;animation:dot 2.2s ease-in-out infinite}
@keyframes dot{50%{stroke-width:1}}
.spark-empty{color:var(--muted2);font-size:.72rem;text-align:center}
/* Le bloc joueurs : le chiffre, la barre des places occupées, et la phrase qui l'explique. */
.cap{display:flex;flex-direction:column;gap:5px;min-width:0}
.cap-n{color:var(--muted);font-size:.78rem;white-space:nowrap}
.cap-n b{font:800 1.2rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;margin-right:2px}
.cap-bar{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.cap-bar i{display:block;height:100%;border-radius:6px;background:var(--sun)}
.cap-s{color:var(--muted);font-size:.72rem;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Les en-têtes de colonnes. */
.rank-head{padding:12px 18px 10px 0;background:rgba(255,255,255,.02);color:var(--muted);font-size:.7rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rank-head .rk,.rank-head .ds,.rank-head .ac,.rank-head .cap{font:inherit;color:inherit;letter-spacing:inherit}
.rank-head .ac{border:0;padding:0;border-radius:0}
.rank-head .sp{text-align:center}

/* Le bouton « Jouer » : discret au repos (contour vert fin), il se remplit quand on survole la
   ligne. Il connecte au serveur. */
.play{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 15px 0 13px;border-radius:10px;border:1px solid rgba(127,224,98,.32);
  background:rgba(127,224,98,.06);color:var(--green);font:700 .84rem/1 Figtree,sans-serif;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s}
.play-ic{display:grid;place-items:center}
.rank .row:hover .play{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.play:hover{background:#93ea78 !important;border-color:#93ea78 !important}
.play:active{transform:translateY(1px)}
.play:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* La fin de liste : un bandeau sobre, dans la même matière que le bouton « Jouer ». */
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 20px;border-radius:14px;
  border:1px solid rgba(127,224,98,.28);background:rgba(127,224,98,.05);color:var(--green);font:700 .95rem/1 Figtree,sans-serif;
  transition:background .18s,border-color .18s}
.cta:hover{background:rgba(127,224,98,.11);border-color:rgba(127,224,98,.6)}
.cta:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cta-ic{display:grid;place-items:center;transition:transform .2s}
.cta:hover .cta-ic{transform:translateX(4px)}
.sec-go{display:flex;justify-content:center;margin-top:12px}
.sec-go .btn{padding:14px 26px}

/* ============================ LES JEUX ============================ */
.gamewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gw{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:270px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line2);isolation:isolate;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.gw:hover{transform:translateY(-5px);border-color:rgba(127,224,98,.5);box-shadow:0 30px 56px -30px rgba(127,224,98,.45)}
.gw-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .6s var(--ease),opacity .3s}
.gw:hover .gw-img{transform:scale(1.06);opacity:1}
.gw::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,12,10,.05) 0%,rgba(10,12,10,.42) 40%,rgba(10,12,10,.94) 78%,#0a0c0a 100%)}
.gw.g-gta5{background:linear-gradient(150deg,#1d5c4d,#0d2b3a 60%,#2a1d0b)}
.gw.g-enh{background:linear-gradient(150deg,#1b3a6b,#0b1a2e 60%,#112233)}
.gw.g-rdr{background:linear-gradient(150deg,#7a1f1f,#2a0d0d 60%,#2a1d0b)}
.gw.g-gta6{background:radial-gradient(80% 70% at 70% 20%,#ff5e8a,transparent 60%),linear-gradient(150deg,#6b2a8f,#1a0b2e 70%)}
.gw.g-rdr .gw-img{object-position:28% center}
.gw.g-gta6 .gw-img{object-position:65% center}
.gw.g-gta5 .gw-img,.gw.g-enh .gw-img{object-position:center 18%}
.gw-flag{position:absolute;top:14px;left:14px;z-index:2;background:var(--sun);color:var(--green-ink);font-size:.7rem;font-weight:800;
  padding:5px 11px;border-radius:999px}
.g-gta6{justify-content:space-between}
.g-gta6 .gw-img{opacity:.55}
.g-gta6:hover .gw-img{opacity:.7}
.g-gta6::before{background:linear-gradient(160deg,rgba(40,12,40,.25),rgba(10,12,10,.55) 45%,#0a0c0a 100%)}
.gw-release-shadow{position:absolute;top:-22px;right:-12px;pointer-events:none;font:800 11.5rem/1 'Bricolage Grotesque',sans-serif;
  letter-spacing:-.09em;color:rgba(255,224,241,.1)}
.gw-release{position:relative;display:flex;align-items:flex-end;gap:10px;padding:20px 18px 0;color:#fff}
.gw-release-day{font:800 4.5rem/.88 'Bricolage Grotesque',sans-serif;letter-spacing:-.06em}
.gw-release-month{font-size:.95rem;font-weight:700;color:#ffd1e6;padding-bottom:5px}
.g-gta6 .gw-go{justify-content:space-between;border-top:1px solid rgba(255,255,255,.15);padding-top:10px;margin-top:13px}
.gw-body{position:relative;display:flex;flex-direction:column;gap:3px;padding:20px}
.gw-name{font:800 1.6rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:#fff}
.gw-sub{color:rgba(255,255,255,.66);font-size:.8rem}
.gw-num{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:.82rem;color:var(--text2);flex-wrap:wrap}
.gw-num b{color:#fff;font-weight:800}
.gw-stack{display:flex;flex:none}
.gw-stack img{width:22px;height:22px;border-radius:50%;border:2px solid rgba(10,12,10,.8);margin-right:-7px;object-fit:cover;background:var(--surface2)}
.gw-go{margin-top:10px;color:var(--green);font-weight:700;font-size:.86rem;display:inline-flex;gap:6px}
.gw-go i{font-style:normal;transition:transform .25s var(--ease)}
.gw:hover .gw-go i{transform:translateX(4px)}

/* ============================ OWNERS ============================
   Le bloc qui rapporte : un bénéfice en titre, la preuve en chiffres, une action principale, et
   le badge montré là où il vivra, dans un salon Discord. */
.owners{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,4vw,52px);border-radius:26px;overflow:hidden;
  border:1px solid rgba(245,166,35,.3);
  background:radial-gradient(70% 90% at 100% 0%,rgba(245,166,35,.16),transparent 62%),
    radial-gradient(60% 80% at 0% 100%,rgba(127,224,98,.07),transparent 60%),var(--surface)}
.ow-k{color:var(--amber);font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.owners h2{margin-top:12px;font-size:clamp(2rem,3.8vw,3.1rem);line-height:1;letter-spacing:-.035em}
.owners h2 em{display:block;font-style:normal;background:linear-gradient(100deg,#f5a623,#ffd27a);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ow-lead{margin-top:16px;max-width:50ch;color:var(--text2);font-size:1rem;line-height:1.6}
.ow-proof{list-style:none;display:flex;flex-wrap:wrap;gap:12px 0;margin-top:24px}
.ow-proof li{padding:0 22px;border-left:1px solid var(--line2)}
.ow-proof li:first-child{padding-left:0;border-left:0}
.ow-proof b{display:block;font:800 1.55rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.ow-proof span{display:block;margin-top:5px;color:var(--muted);font-size:.78rem}
.ow-go{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:28px}
.ow-cta{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border-radius:14px;background:var(--amber);color:#1c1405;
  font:800 1.02rem/1 Figtree,sans-serif;box-shadow:0 14px 34px -14px rgba(245,166,35,.7);transition:background .18s,transform .18s}
.ow-cta:hover{background:#ffb83d;transform:translateY(-2px)}
.ow-cta svg{transition:transform .2s}
.ow-cta:hover svg{transform:translateX(3px)}
.ow-sub{color:var(--text2);font-size:.92rem;font-weight:700;transition:color .18s}
.ow-sub:hover{color:var(--amber)}
.ow-sub span{display:inline-block;transition:transform .2s}
.ow-sub:hover span{transform:translateX(3px)}
/* Le salon Discord : couleurs de Discord, un message du bot, le badge. */
.ow-visual{margin:0;min-width:0}
.dc{border-radius:16px;overflow:hidden;background:#313338;color:#dbdee1;box-shadow:0 40px 70px -34px rgba(0,0,0,.95);
  transform:rotate(1.2deg);transition:transform .4s var(--ease)}
.owners:hover .dc{transform:rotate(0)}
.dc-head{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#2b2d31;border-bottom:1px solid #1f2023;color:#f2f3f5;font-size:.92rem;font-weight:700}
.dc-head span{color:#80848e;font-size:1.3rem;font-weight:500;line-height:1}
.dc-msg{display:flex;gap:14px;padding:18px 16px 20px}
.dc-msg .ico{flex:none;width:40px;height:40px;border-radius:50%;border:0}
.dc-body{min-width:0}
.dc-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dc-who b{color:#f2f3f5;font-size:.95rem}
.dc-who i{font-style:normal;padding:1px 5px;border-radius:4px;background:#5865f2;color:#fff;font-size:.62rem;font-weight:800}
.dc-who small{color:#949ba4;font-size:.72rem}
.dc-txt{margin:4px 0 10px;font-size:.9rem;color:#dbdee1}
.dc-body img{display:block;width:100%;max-width:380px;height:auto;border-radius:8px}
.ow-visual figcaption{margin-top:14px;text-align:center;color:var(--muted);font-size:.8rem}

/* ============================ TEXTE DE BAS DE PAGE ============================ */
.about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:start}
.about h2{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.1;letter-spacing:-.035em}
.about .lab{font-size:.82rem;font-weight:800;color:var(--green);margin-bottom:10px;display:block}
.about p{color:var(--text2);font-size:.96rem;line-height:1.7}
.about p + p{margin-top:12px}
.about a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.about-links{display:grid;align-content:start;border-top:1px solid var(--line)}
.about-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);
  padding:14px 4px;color:var(--text2);font-size:.96rem;font-weight:700;text-decoration:none;transition:color .18s,padding .18s,border-color .18s}
.about-links a:hover{color:var(--green);padding-left:10px;border-color:rgba(127,224,98,.35)}
.about-links i{font-style:normal;color:var(--muted2);transition:transform .2s var(--ease),color .18s}
.about-links a:hover i{transform:translateX(4px);color:var(--green)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1380px){
  .rank .row,.rank-head{grid-template-columns:52px 44px minmax(0,1fr) 84px 150px 176px 92px}
  .rank .ds{display:none}
}
@media (max-width:1240px){
  .rank .row,.rank-head{grid-template-columns:48px 44px minmax(0,1fr) 140px 170px 92px}
  .rank .ac{display:none}
  .rank .spark{width:140px}
}
@media (max-width:1180px){
  .top5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -24px;padding:6px 24px 10px}
  .top5 li{flex:0 0 min(250px,64vw);scroll-snap-align:start}
}
@media (max-width:1040px){
  .rank .row,.rank-head{grid-template-columns:44px 42px minmax(0,1fr) 170px 92px}
  .rank .sp{display:none}
}
@media (max-width:1180px){
  .gamegrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:980px){
  .gamegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .moment-grid{grid-template-columns:1fr}
  .mg{min-height:120px}
  .gamewall{grid-template-columns:1fr 1fr}
  .owners,.about{grid-template-columns:1fr}
}
@media (max-width:720px){
  .rank .row{grid-template-columns:30px 38px minmax(0,1fr) 96px 38px;gap:10px;padding-right:10px}
  .rank-head{display:none}
  .cap-s{display:none}
  .cap-n{font-size:.7rem}.cap-n b{font-size:1.05rem}
  .rank .ico{width:38px;height:38px}
  .play{padding:0;width:38px;height:38px;font-size:0;gap:0}
  .cta{font-size:.88rem}
  .hours{height:80px}
}
@media (max-width:900px){
  .pulse3{grid-template-columns:1fr}
  .p3 + .p3{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .ow-proof li{padding:0 14px}
  .home-search{padding-left:16px;gap:8px}.home-search input{font-size:.9rem}.home-search button{padding:12px 16px}
  .chips{gap:6px}.chips a{padding:6px 12px;font-size:.8rem}
}
@media (max-width:560px){
  .gamegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gc{padding:12px}.gc-name{font-size:1rem}.gc-sub{font-size:.7rem}.gc-soon{top:8px;right:8px;font-size:.58rem}
  .gamewall{grid-template-columns:1fr}
  .gw{min-height:210px}
  .g-gta6{min-height:252px}
  .sun h1{font-size:clamp(2.9rem,14vw,4rem)}
  .sun-live-x{display:none}
}
@media (max-width:480px){
  .top .wrap{gap:12px;padding-left:16px;padding-right:16px}
  .top .nav .live{font-size:.75rem;gap:5px}
  .top5{margin:0 -16px;padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  .orb,.ping-dot{animation:none}
}