/* ==========================================================================
   HAVOCKS — Feuille de style commune
   Toutes les couleurs du site sont définies ci-dessous dans :root.
   Pour changer l'identité visuelle, modifie uniquement ces valeurs.
   ========================================================================== */

:root{
  /* Fonds et textes */
  --void:#0A0C10;
  --void-2:#0E1116;
  --white:#F5F6FA;
  --muted:#9AA3B2;

  /* Univers LIFE — tons chauds */
  --life-1:#F4A261;
  --life-2:#E76F51;
  --life-3:#2A6F77;

  /* Univers GAMING — tons froids */
  --game-1:#7B2FF7;
  --game-2:#00C2D1;
  --game-3:#1C0F3A;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--void);
  color:var(--white);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.display{
  font-family:'Anton', Impact, sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
  line-height:0.9;
}

/* Accessibilité : lien d'évitement + focus visible ------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--white); color:var(--void);
  padding:12px 20px; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

a:focus-visible, button:focus-visible{
  outline:3px solid var(--game-2);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================ NAVIGATION ================================= */

nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 5%;
  background:linear-gradient(to bottom, rgba(6,7,10,0.9), transparent);
}

.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Anton', Impact, sans-serif;
  font-size:1.25rem; letter-spacing:0.03em;
}
.logo-mark{ width:28px; height:auto; }

.nav-links{
  display:flex; gap:34px;
  font-size:0.9rem; font-weight:500; color:var(--muted);
}
.nav-links a{ transition:color .25s ease; }
.nav-links a:hover,
.nav-links a[aria-current="page"]{ color:var(--white); }

.nav-icons{ display:flex; gap:18px; align-items:center; }
.nav-icons a{ display:grid; place-items:center; }
.nav-icons svg{ width:16px; height:16px; opacity:0.8; transition:opacity .25s ease; }
.nav-icons a:hover svg{ opacity:1; }

.nav-burger{
  display:none; background:none; border:none;
  color:var(--white); font-size:1.3rem; cursor:pointer; padding:4px 8px;
}

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-links.open{
    display:flex; position:fixed; top:68px; right:5%;
    flex-direction:column; background:var(--void-2);
    padding:18px 28px; border-radius:14px; gap:16px;
    border:1px solid rgba(255,255,255,0.08);
  }
  .nav-burger{ display:block; }
}

/* ============================== BOUTONS ================================== */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; border-radius:999px;
  font-size:0.9rem; font-weight:600;
  border:1.5px solid var(--white);
  transition:transform .25s ease, background .25s ease;
}
.btn:hover{ transform:translateX(4px); }
.btn-life{ border-color:var(--life-1); }
.btn-life:hover{ background:rgba(244,162,97,0.14); }
.btn-game{ border-color:var(--game-2); }
.btn-game:hover{ background:rgba(0,194,209,0.14); }

/* ========================= PORTAIL (accueil) ============================= */

.hero{ position:relative; height:100vh; overflow:hidden; background:var(--void); }

/* Les deux moitiés occupent toute la surface et se superposent :
   Gaming sert de fond, Life est découpée en diagonale par-dessus.
   Aucun espace ne subsiste entre les deux. */
.hero-half{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:flex-end;
  padding:0 6% 9%;
}

.half-game{
  z-index:1;
  background:
    radial-gradient(110% 100% at 80% 0%, rgba(123,47,247,0.4), transparent 62%),
    linear-gradient(200deg, var(--game-3) 0%, #150A2B 55%, var(--void) 100%);
  transition:filter .45s ease;
}
.half-life{
  z-index:2;
  background:
    radial-gradient(110% 100% at 18% 0%, rgba(244,162,97,0.38), transparent 62%),
    linear-gradient(200deg, var(--life-3) 0%, #123138 55%, var(--void) 100%);
  clip-path:polygon(0 0, 56% 0, 44% 100%, 0 100%);
  transition:clip-path .45s ease, filter .45s ease;
}

/* Survol : le côté visé s'éclaire et gagne du terrain,
   l'autre s'assombrit légèrement pour accentuer le contraste. */
.half-life:hover{
  clip-path:polygon(0 0, 62% 0, 50% 100%, 0 100%);
  filter:brightness(1.12) saturate(1.2);
}
.half-game:hover{
  filter:brightness(1.12) saturate(1.2);
}
.hero:has(.half-life:hover) .half-game{
  filter:brightness(0.55) saturate(0.7);
}
.hero:has(.half-game:hover) .half-life{
  clip-path:polygon(0 0, 50% 0, 38% 100%, 0 100%);
  filter:brightness(0.55) saturate(0.7);
}

/* Trait lumineux à la jonction des deux univers.
   Les coordonnées reprennent exactement celles du clip-path de .half-life,
   pour que le trait reste collé à la découpe sur tous les écrans. */
.seam-line{
  position:absolute; inset:0; z-index:3; pointer-events:none;
}
.seam-line::before,
.seam-line::after{
  content:""; position:absolute; inset:0;
  transition:clip-path .45s ease;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.95) 15%,
    rgba(0,194,209,0.92) 50%,
    rgba(123,47,247,0.6) 82%,
    rgba(255,255,255,0) 100%);
}
/* Le trait net */
.seam-line::before{
  clip-path:polygon(55.85% 0, 56.15% 0, 44.15% 100%, 43.85% 100%);
}
/* Le halo diffus autour */
.seam-line::after{
  clip-path:polygon(55% 0, 57% 0, 45% 100%, 43% 100%);
  filter:blur(16px);
  opacity:0.8;
}

/* La barre et le logo suivent le même déplacement que la découpe au survol */
.hero:has(.half-life:hover) .seam-line::before{
  clip-path:polygon(61.85% 0, 62.15% 0, 49.85% 100%, 50.15% 100%);
}
.hero:has(.half-life:hover) .seam-line::after{
  clip-path:polygon(61% 0, 63% 0, 49% 100%, 51% 100%);
}
.hero:has(.half-game:hover) .seam-line::before{
  clip-path:polygon(49.85% 0, 50.15% 0, 37.85% 100%, 38.15% 100%);
}
.hero:has(.half-game:hover) .seam-line::after{
  clip-path:polygon(49% 0, 51% 0, 37% 100%, 39% 100%);
}

/* Textures discrètes propres à chaque univers */
.half-life::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 60px);
}
.half-game::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(0,194,209,0.06) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
}

.half-content{ position:relative; z-index:2; max-width:480px; }
.half-content.right{ margin-left:auto; text-align:right; }

/* Étend la zone cliquable à tout le panneau (Life ou Gaming), pas
   seulement au bouton visible : plus confortable au clic comme au
   doigt. Le bouton visible devient purement décoratif (aria-hidden) ;
   c'est ce lien, invisible mais nommé pour les lecteurs d'écran, qui
   porte réellement la navigation. Il hérite automatiquement de la
   découpe diagonale du panneau. */
.panel-link{
  position:absolute; inset:0; z-index:3;
}

.eyebrow{ font-size:0.85rem; color:var(--muted); margin-bottom:6px; font-weight:500; }
.half-title{ font-size:clamp(3.2rem, 9vw, 6.5rem); margin-bottom:14px; }
.life-title{ color:var(--white); }
.game-title{
  background:linear-gradient(100deg, var(--game-2), var(--game-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.half-tagline{ color:var(--muted); font-size:1rem; margin-bottom:28px; }
.half-tagline span{ color:var(--white); font-weight:600; }

/* Charnière centrale avec le logo */
.seam{
  position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%); width:140px; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
  transition:left .45s ease;
}
.hero:has(.half-life:hover) .seam{ left:56%; }
.hero:has(.half-game:hover) .seam{ left:44%; }

/* Le bouton scroll est volontairement en dehors de .seam :
   il reste fixe au centre, sans suivre le glissement du H au survol. */
.scroll-cue, .scroll-cue-desktop{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:auto;
}
.scroll-cue-mobile{ display:none; }
.seam-logo{
  width:clamp(110px, 12vw, 170px); height:auto; opacity:1;
  filter:drop-shadow(0 0 40px rgba(0,194,209,0.5)) drop-shadow(0 0 14px rgba(255,255,255,0.35));
}
.scroll-cue span{ font-size:0.68rem; letter-spacing:0.12em; color:var(--muted); }
.scroll-circle{
  width:38px; height:38px; border:1.5px solid var(--muted); border-radius:50%;
  display:grid; place-items:center; animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}

@media (max-width:760px){
  .hero{ display:flex; flex-direction:column; }
  .hero-half{
    position:relative; inset:auto;
    width:100%; height:50%;
    clip-path:none !important; margin:0 !important; padding-bottom:14%;
  }
  .half-content{ max-width:100%; }
  .half-content.right{ margin-left:0; text-align:left; }
  .seam, .seam-line{ display:none; }

  /* Sur mobile, le rond+flèche desktop laisse place à un repère plus
     discret, casé dans le coin bas-droit : cet endroit ne chevauche
     jamais le contenu, quel que soit son alignement. */
  .scroll-cue{
    top:auto; bottom:22px; left:auto; right:20px; transform:none;
  }
  .scroll-cue-desktop{ display:none; }
  .scroll-cue-mobile{
    display:flex; flex-direction:column; align-items:flex-end; gap:5px;
    animation:bob 2.2s ease-in-out infinite;
  }
  .scroll-cue-mobile .bar{
    display:block; height:3px; border-radius:2px;
    background:var(--white); opacity:0.85;
  }
  .scroll-cue-mobile .bar-1{ width:26px; }
  .scroll-cue-mobile .bar-2{ width:18px; }
  .scroll-cue-mobile .bar-3{ width:10px; }
}

.intro{ padding:90px clamp(20px, 6vw, 48px) 40px; max-width:860px; margin:0 auto; text-align:center; }
.intro-label{ color:var(--muted); font-size:0.85rem; margin-bottom:10px; }
.intro h1{ font-size:clamp(1.6rem, 3vw, 2.1rem); font-weight:600; margin-bottom:14px; }
.intro p{ color:var(--muted); font-size:1.02rem; line-height:1.7; }
.intro p + p{ margin-top:14px; }

/* ============================ PAGE A PROPOS =============================== */

.apropos-duo{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  max-width:1100px; margin:10px auto 0; padding:0 clamp(20px, 6vw, 48px) 20px;
}
.apropos-panel{
  border-radius:22px; padding:38px 34px;
  border:1px solid rgba(255,255,255,0.1);
}
.apropos-panel.life{
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(244,162,97,0.16), transparent 65%),
    linear-gradient(180deg, rgba(42,111,119,0.14), rgba(255,255,255,0.02));
}
.apropos-panel.game{
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(123,47,247,0.18), transparent 65%),
    linear-gradient(180deg, rgba(123,47,247,0.12), rgba(255,255,255,0.02));
}
.apropos-panel .eyebrow{ margin-bottom:8px; }
.apropos-panel h2{ font-size:1.35rem; line-height:1.3; margin-bottom:18px; }
.apropos-panel h2.life-title{ color:var(--life-1); }
.apropos-panel h2.game-title{
  background:linear-gradient(100deg, var(--game-2), var(--game-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.apropos-panel p{ color:var(--muted); font-size:0.96rem; line-height:1.75; }
.apropos-panel p + p{ margin-top:14px; }

.apropos-summary{ max-width:760px; padding-top:60px; padding-bottom:90px; }
.apropos-summary h2{ font-size:clamp(1.5rem, 3vw, 1.9rem); font-weight:600; margin-bottom:18px; }
.apropos-signature{
  display:block; width:150px; height:auto;
  margin:26px auto 0; opacity:0.94;
}

@media (max-width:820px){
  .apropos-duo{ grid-template-columns:1fr; }
}

/* Rappel du dernier contenu de chaque univers, sur le portail */
.latest-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:1000px; margin:0 auto; padding:20px clamp(20px, 6vw, 48px) 100px;
}
.latest-card{
  position:relative; border-radius:18px; overflow:hidden; min-height:220px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
  border:1px solid rgba(255,255,255,0.1);
  transition:transform .3s ease;
}
.latest-card:hover{ transform:translateY(-4px); }
.latest-card .eyebrow{ margin-bottom:8px; }
.latest-card h3{
  font-size:1.15rem; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;   /* un long titre ne déborde pas */
}
.latest-meta{ color:#C9CEDA; font-size:0.85rem; margin-bottom:6px; }

/* Carte "dernier test" : la bannière du jeu en fond, assombrie vers le bas pour garder le texte lisible.
   Les éléments de la carte sont des enfants d'un conteneur flex : z-index leur suffit pour passer au-dessus. */
.latest-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.5; }   /* 50 % : laisse transparaître le violet de la carte et améliore la lisibilité du texte */
.latest-card.avec-image::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,12,16,0.96) 10%, rgba(10,12,16,0.55) 60%, rgba(10,12,16,0.25));
}
.latest-card.avec-image > *:not(.latest-bg){ z-index:2; }
.latest-card time{ color:var(--muted); font-size:0.82rem; }
.latest-card .btn{ margin-top:16px; padding:9px 18px; font-size:0.8rem; align-self:flex-start; }

@media (max-width:700px){
  .latest-grid{ grid-template-columns:1fr; }
}

/* ====================== PAGES D'UNIVERS (sous-pages) ===================== */

.subhero{
  position:relative; min-height:64vh;
  display:flex; align-items:flex-end;
  padding:140px 8% 70px; overflow:hidden;
}
.subhero-content{ position:relative; z-index:2; max-width:560px; }
.subhero h1{ font-size:clamp(3rem, 7vw, 5.2rem); margin-bottom:16px; }
.subhero p{ color:var(--muted); font-size:1.05rem; margin-bottom:30px; }

.subhero.gaming,
.fiche-hero{            /* + bandeau de la fiche d'un jeu (même signature violette sur toutes les pages Gaming) */
  background:
    radial-gradient(90% 90% at 75% 10%, rgba(123,47,247,0.4), transparent 60%),
    linear-gradient(200deg, var(--game-3), var(--void) 70%);
}
.subhero.gaming::before,
.fiche-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(0,194,209,0.06) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
}
.subhero.life{
  background:
    radial-gradient(90% 90% at 25% 10%, rgba(244,162,97,0.35), transparent 60%),
    linear-gradient(200deg, var(--life-3), var(--void) 70%);
}
.subhero.life::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 60px);
}

.section-label{ color:var(--muted); font-size:0.85rem; margin-bottom:10px; }
.section-heading{ font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:600; margin-bottom:34px; }

/* Cartes de rubriques */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:20px; padding:0 8% 90px;
}
.card{
  border-radius:16px; padding:26px 22px;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  transition:transform .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,0.22); }
.card-icon{
  width:38px; height:38px; margin-bottom:18px;
  display:grid; place-items:center; border-radius:10px; font-size:1.1rem;
}
.card h3{ font-size:1.05rem; margin-bottom:8px; }
.card p{ color:var(--muted); font-size:0.88rem; line-height:1.5; margin-bottom:16px; }
.card a{ font-size:0.85rem; font-weight:600; }

/* Articles / actualités */
.articles{ padding:0 8% 100px; }
.article-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px;
}
.article{
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  transition:transform .25s ease;
}
.article:hover{ transform:translateY(-4px); }
.article-thumb{ aspect-ratio:16/10; position:relative; background-size:cover; background-position:center; }
.article-body{ padding:20px; }
.article h4{ font-size:1rem; margin-bottom:6px; }
.article time{ color:var(--muted); font-size:0.8rem; }

/* =============================== TWITCH =================================== */

.twitch-hero{
  padding:150px 6% 10px;
  text-align:center;
  background:
    radial-gradient(110% 100% at 80% 0%, rgba(123,47,247,0.4), transparent 62%),
    linear-gradient(200deg, var(--game-3) 0%, #150A2B 55%, var(--void) 100%);
}
.twitch-hero .eyebrow{ text-align:center; }
.twitch-hero h1{ font-size:clamp(2.6rem, 7vw, 4.6rem); margin-bottom:14px; }
.twitch-hero-sub{
  color:var(--muted); font-size:1.02rem; max-width:560px; margin:0 auto 40px;
}

/* Le "stage" : le direct / la dernière vidéo en très grand, en haut de page */
.twitch-stage{
  position:relative;
  max-width:1180px; margin:0 auto 30px;
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(160deg, rgba(123,47,247,0.12), rgba(255,255,255,0.02));
  text-align:left;
}
.twitch-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.twitch-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.twitch-embed-gate{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(123,47,247,0.22), transparent 65%),
    #0A0C10;
}
.twitch-consent-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:1.5px solid rgba(255,255,255,0.2); border-radius:16px;
  padding:26px 34px; color:var(--white); cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.twitch-consent-btn:hover{ border-color:var(--game-2); background:rgba(0,194,209,0.08); }
.twitch-consent-icon{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--game-2); color:#04141A; font-size:0.9rem;
}
.twitch-consent-btn span:nth-child(2){ font-size:0.95rem; font-weight:600; }
.twitch-consent-hint{ font-size:0.76rem; color:var(--muted); font-weight:400 !important; }

.twitch-stage-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; padding:26px 32px;
}
.live-badge{ display:inline-flex; align-items:center; gap:6px; width:fit-content; color:#FF4D67; font-weight:700; font-size:0.8rem; letter-spacing:0.05em; }
.offline-badge{ display:inline-block; width:fit-content; color:var(--muted); font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.twitch-stage-meta h2{ font-size:1.3rem; line-height:1.3; margin-top:6px; }
.twitch-sub{ color:var(--muted); font-size:0.92rem; margin-top:4px; }

@media (max-width:700px){
  .twitch-hero{ padding-top:130px; }
  .twitch-stage-meta{ flex-direction:column; align-items:flex-start; }
}

/* Smartphone tourné en paysage : la vidéo occupe tout l'écran, comme un
   lecteur plein écran natif. On distingue "téléphone en paysage" d'une
   tablette ou d'un PC via la hauteur d'écran (courte sur un téléphone
   couché, ~375-430px, largement au-dessus de 500px partout ailleurs). */
@media (orientation:landscape) and (max-height:500px){
  body:has(#twitch-panel) nav,
  body:has(#twitch-panel) footer,
  body:has(#twitch-panel) .twitch-hero > h1,
  body:has(#twitch-panel) .twitch-stage-meta,
  body:has(#twitch-panel) #agenda,
  body:has(#twitch-panel) #clips{
    display:none;
  }
  body:has(#twitch-panel){ overflow:hidden; }

  .twitch-hero{ padding:0; background:var(--void); min-height:100vh; }
  .twitch-stage{
    position:fixed; inset:0; z-index:50;
    max-width:none; margin:0; border:0; border-radius:0;
    background:var(--void);
  }
  .twitch-embed{
    position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;
  }
  /* L'alerte de live reste visible, mais resserrée pour ne pas prendre
     toute la largeur d'un écran de téléphone couché. */
  .twitch-alert{ top:10px; left:10px; right:auto; }
}

/* Alerte de changement d'état (live qui démarre / se termine),
   affichée par-dessus la vidéo sans jamais recharger celle-ci. */
.twitch-alert{
  position:absolute; top:16px; left:16px; right:16px; z-index:5;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  background:rgba(10,12,16,0.9); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.15); border-radius:999px;
  padding:8px 8px 8px 18px; font-size:0.85rem;
  animation:twitch-alert-in .3s ease;
  width:fit-content;
}
.twitch-alert[hidden]{ display:none; }
.twitch-alert .twitch-alert-dot{ color:#FF4D67; }
.twitch-alert button{
  border:none; border-radius:999px; padding:7px 16px;
  font-size:0.8rem; font-weight:700; cursor:pointer;
  background:var(--game-2); color:#04141A;
  transition:transform .2s ease;
}
.twitch-alert button:hover{ transform:translateX(2px); }
@keyframes twitch-alert-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =============================== AGENDA ==================================== */

.agenda-section{ padding:50px 8%; }
.agenda-list{ display:flex; flex-direction:column; gap:10px; max-width:760px; }
.agenda-row{
  display:flex; align-items:center; gap:20px;
  padding:14px 18px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.agenda-date{ min-width:210px; color:var(--game-2); font-weight:600; font-size:0.85rem; text-transform:capitalize; }
.agenda-info strong{ display:block; font-size:0.95rem; }
.agenda-info span{ color:var(--muted); font-size:0.8rem; }
.agenda-empty{ color:var(--muted); font-size:0.9rem; }
@media (max-width:620px){
  .agenda-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .agenda-date{ min-width:auto; }
}

/* =============================== CLIPS ===================================== */

.clips-section{ padding:20px 8% 90px; }
.clips-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.clip-card{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); }
.clip-thumb{
  width:100%; aspect-ratio:16/9; background-size:cover; background-position:center;
  border:0; cursor:pointer; position:relative; display:block; padding:0;
}
.clip-thumb::after{ content:""; position:absolute; inset:0; background:rgba(10,12,16,0.25); }
.clip-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(10,12,16,0.72); color:#fff; display:grid; place-items:center; font-size:1rem; z-index:1;
}
.clip-body{ padding:14px 16px; }
.clip-body h4{ font-size:0.92rem; margin-bottom:4px; line-height:1.3; }
.clip-body span{ color:var(--muted); font-size:0.78rem; }
.clip-embed{ position:relative; width:100%; aspect-ratio:16/9; }
.clip-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* =============================== 404 (glitch) ============================= */
/* Effet "glitch" à la RTFKT/RTX : deux copies du texte, décalées et teintées
   (magenta / vert), qui clignotent par bandes horizontales façon mauvaise
   réception TV, plus un léger à-coup périodique (skew). L'idée d'origine
   venait d'un extrait SCSS (les positions de bande étaient tirées au sort
   par une boucle Sass) ; converti ici en CSS pur avec des étapes de
   keyframes écrites à la main, puisqu'un navigateur ne sait pas exécuter
   du Sass (@for, $variables, @extend) dans un fichier .css. */

.glitch{
  color:#e4f4f4;
  position:relative;
  display:inline-block;
  font-size:9vw;
  animation:glitch 5s 5s infinite;
}

.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0; left:0;
  overflow:hidden;
  background:var(--void);
}
.glitch::before{
  left:-2px; text-shadow:-5px 0 magenta;
  animation:noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
.glitch::after{
  left:2px; text-shadow:-5px 0 aqua;
  animation:noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}

@keyframes glitch{
  1%{ transform:rotateX(10deg) skewX(90deg); }
  2%{ transform:rotateX(0deg) skewX(0deg); }
}

/* Bandes visibles aléatoires (valeurs figées à la main, à défaut du
   random() de Sass) : chaque étape ne laisse voir qu'une fine tranche
   horizontale du texte fantôme. */
@keyframes noise-1{
  0%{ clip-path:inset(40px 0 41px 0); }
  10%{ clip-path:inset(72px 0 3px 0); }
  20%{ clip-path:inset(15px 0 78px 0); }
  30%{ clip-path:inset(89px 0 4px 0); }
  40%{ clip-path:inset(3px 0 92px 0); }
  50%{ clip-path:inset(55px 0 30px 0); }
  60%{ clip-path:inset(21px 0 65px 0); }
  70%{ clip-path:inset(94px 0 2px 0); }
  80%{ clip-path:inset(8px 0 85px 0); }
  90%{ clip-path:inset(62px 0 18px 0); }
  100%{ clip-path:inset(40px 0 41px 0); }
}
@keyframes noise-2{
  0%{ clip-path:inset(33px 0 50px 0); }
  10%{ clip-path:inset(78px 0 10px 0); }
  20%{ clip-path:inset(12px 0 70px 0); }
  30%{ clip-path:inset(45px 0 40px 0); }
  40%{ clip-path:inset(90px 0 5px 0); }
  50%{ clip-path:inset(25px 0 60px 0); }
  60%{ clip-path:inset(68px 0 15px 0); }
  70%{ clip-path:inset(5px 0 88px 0); }
  80%{ clip-path:inset(50px 0 35px 0); }
  90%{ clip-path:inset(30px 0 55px 0); }
  100%{ clip-path:inset(33px 0 50px 0); }
}

/* Non utilisée pour l'instant (aucun élément n'a la classe .scanlines),
   laissée disponible : un voile de lignes de balayage à poser sur un
   visuel pour lui donner un grain "vieil écran". Contrairement au bloc
   glitch ci-dessus, celle-ci était déjà du CSS valide. */
.scanlines{ overflow:hidden; mix-blend-mode:difference; position:relative; }
.scanlines::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.05) 0.5%, transparent 1%);
  animation:fudge 7s ease-in-out alternate infinite;
}
@keyframes fudge{
  from{ transform:translate(0px, 0px); }
  to{ transform:translate(0px, 2%); }
}

/* Variante lumineuse du glitch (halo flouté, sans les tranches de bruit) ;
   pas encore appliquée à un élément non plus. L'original utilisait
   "@extend .glitch" (Sass) pour copier les règles de .glitch : recopiées
   ici à la main puisque @extend n'existe pas en CSS. */
.glow{
  color:transparent;
  position:absolute;
  top:0;
  display:inline-block;
  text-shadow:0 0 60px #dfbfbf;
  animation:glitch 5s 5s infinite;
}

/* Variante utilisée sur jeux.html : le subhero empile le titre puis les
   cartes "jeux du moment" à la place d'un simple paragraphe, tout en
   gardant le fond violet hachuré de .subhero.gaming. */
.jeux-hero{
  flex-direction:column; align-items:stretch;
}
.jeux-hero .subhero-content{ max-width:none; margin-bottom:30px; }
.jeux-hero .games-hero-grid{ position:relative; z-index:2; }

/* =============================== JEUX (Steam) ============================ */

.jeux-recent-section{ padding:70px 8% 30px; }
.games-hero-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px;
}
.game-feature-card{
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(160deg, rgba(10,12,16,0.78), rgba(10,12,16,0.6)),
    linear-gradient(160deg, rgba(123,47,247,0.18), rgba(255,255,255,0.02));
}
.game-feature-cover{
  display:block; width:100%; aspect-ratio:460/215; object-fit:cover;
  background:rgba(255,255,255,0.04);
}
/* Repli sur l'icône (32x32 d'origine) si la bannière est absente : on
   évite qu'elle s'étire en pleine largeur, moche à ce ratio. */
.game-feature-cover-icon{
  object-fit:contain; padding:30px; background:rgba(255,255,255,0.04);
}
.game-feature-body{ padding:20px 22px 24px; }
.game-feature-icon-fallback{
  display:grid; place-items:center; width:100%; aspect-ratio:460/215;
  background:rgba(255,255,255,0.06); font-size:1.8rem;
}
.game-feature-card h3{ font-size:1.05rem; margin-bottom:6px; }
.game-meta-muted{ color:var(--muted); font-size:0.85rem; }
.game-progress{
  margin-top:12px; height:6px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden;
}
.game-progress-bar{ height:100%; background:linear-gradient(90deg, var(--game-2), var(--game-1)); }
.game-feature-card span{ display:block; margin-top:8px; font-size:0.82rem; color:var(--muted); }

.jeux-list-section{ padding:20px 8% 100px; }
.jeux-list-header{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:20px;
}
.jeux-count{ color:var(--muted); font-size:0.85rem; }

.game-row{
  display:grid; grid-template-columns:2fr 0.8fr 1fr 1.1fr 0.9fr;
  gap:14px; align-items:center;
  padding:12px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  margin-bottom:8px;
}
.game-row-head{
  background:none; border:none; padding:0 16px;
  color:var(--muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em;
}
.game-row .game-name{ display:flex; align-items:center; gap:10px; font-size:0.92rem; font-weight:600; }
.game-row .game-name img{ border-radius:6px; flex-shrink:0; }
.game-row-icon-fallback{
  display:grid; place-items:center; width:32px; height:32px; border-radius:6px;
  background:rgba(255,255,255,0.06); font-size:0.95rem; flex-shrink:0;
}
.game-row .game-meta{ color:var(--muted); font-size:0.85rem; }

@media (max-width:760px){
  .game-row{ grid-template-columns:1fr; gap:4px; }
  .game-row-head{ display:none; }
  .game-row .game-name{ font-size:0.95rem; margin-bottom:2px; }
  .game-row .game-meta::before{ content:attr(data-label) ": "; color:var(--muted); opacity:0.7; }
}

/* ======================= TESTS (pages publiques) ======================== */

/* ---- Liste ---- */
.subhero.tests-hero{ min-height:46vh; }
.tests-list{ max-width:1240px; margin:0 auto; padding:50px clamp(20px, 5vw, 40px) 100px; }
.test-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:24px; }
.test-card{
  display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(160deg, rgba(123,47,247,0.10), rgba(255,255,255,0.02));
  transition:transform .25s ease, border-color .25s ease;
}
.test-card:hover{ transform:translateY(-4px); border-color:var(--game-2); }
.test-card-img{ position:relative; aspect-ratio:460/215; background:rgba(255,255,255,0.05); }
.test-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sat-pill{
  position:absolute; top:12px; right:12px; padding:5px 12px; border-radius:999px;
  font-weight:700; font-size:0.85rem; color:#04141A;
  background:linear-gradient(100deg, var(--game-2), var(--game-1));
}
.test-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.test-card-game{ color:var(--muted); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em; }
.test-card h3{ font-size:1.1rem; line-height:1.3; }
.test-card-excerpt{ color:var(--muted); font-size:0.88rem; line-height:1.55; }
.test-card time{ color:var(--muted); font-size:0.78rem; margin-top:auto; padding-top:8px; }
.tests-more{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.pagination{ display:flex; justify-content:center; align-items:center; gap:18px; margin-top:44px; color:var(--muted); font-size:0.88rem; }
.pagination a{ color:var(--white); }
.pagination a:hover{ color:var(--game-2); }

/* ---- Page d'un test ---- */
.test-hero{
  position:relative; overflow:hidden; padding:150px 6% 56px;
  background:linear-gradient(200deg, var(--game-3), var(--void) 80%);
}
.test-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.22; filter:blur(2px); }
.test-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,12,16,0.15), var(--void));
}
.test-hero-inner{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 clamp(0px, 1vw, 8px); }
.test-crumb{ color:var(--muted); font-size:0.85rem; margin-bottom:14px; }
.test-crumb a{ color:var(--game-2); }
.test-crumb a:hover{ text-decoration:underline; }
.test-title{
  font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:0.01em;
  font-size:clamp(2.2rem, 5.5vw, 3.8rem); line-height:1.05; margin-bottom:14px; max-width:980px;
}
.test-meta{ color:var(--muted); font-size:0.9rem; }

.test-layout{
  max-width:1240px; margin:0 auto; padding:10px clamp(20px, 5vw, 40px) 80px;
  display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:48px; align-items:start;
}
@media (max-width:900px){ .test-layout{ grid-template-columns:1fr; gap:34px; } }

.sat-block{
  display:flex; align-items:center; gap:22px; padding:22px 24px; margin-bottom:30px;
  border-radius:18px; border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(160deg, rgba(123,47,247,0.14), rgba(255,255,255,0.02));
}
.sat-ring{
  --sat:0; position:relative; flex:0 0 96px; width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center;
  background:conic-gradient(var(--game-2) calc(var(--sat) * 1%), rgba(255,255,255,0.12) 0);
}
.sat-ring::before{ content:""; position:absolute; inset:9px; border-radius:50%; background:var(--void-2); }
.sat-ring span{ position:relative; font-family:'Anton', Impact, sans-serif; font-size:1.7rem; }
.sat-ring small{ font-family:'Inter', sans-serif; font-size:0.8rem; margin-left:1px; color:var(--muted); }
.sat-title{ font-weight:700; font-size:1.05rem; margin-bottom:4px; }
.sat-hint{ color:var(--muted); font-size:0.86rem; line-height:1.55; }
/* Sur ordinateur, le taux vit dans la colonne de droite ; sur mobile cette colonne passe
   sous le texte, donc le taux est repris EN HAUT de l'article pour rester visible. */
.sat-block.sat-mobile{ display:none; }
.aside-sat{ text-align:center; }
.aside-sat .sat-ring{ flex:none; width:116px; height:116px; margin:2px auto 14px; }
.aside-sat .sat-ring span{ font-size:2.1rem; }
@media (max-width:900px){
  .sat-block.sat-mobile{ display:flex; }
  .aside-sat{ display:none; }
}

/* Vidéo chargée au clic (voir assets/js/video-gate.js) */
.video-gate{
  position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin-bottom:32px;
  background:radial-gradient(90% 90% at 50% 0%, rgba(123,47,247,0.3), #000);
  border:1px solid rgba(255,255,255,0.1);
}
.video-gate iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-gate-btn{
  position:absolute; inset:0; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:none; border:none; color:var(--white); cursor:pointer; font-size:1rem; font-weight:600;
}
.video-gate-icon{
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-size:1.3rem;
  background:rgba(10,12,16,0.7); border:1.5px solid var(--game-2);
}
.video-gate-btn:hover .video-gate-icon{ background:rgba(0,194,209,0.2); }
.video-gate-hint{ font-size:0.76rem; font-weight:400; color:var(--muted); }
.video-fallback{ margin-bottom:28px; }
/* Vidéo placée DANS le texte (bouton « vidéo » de l'éditeur) : 80 % de la largeur du texte, centrée, avec de l'air au-dessus et en dessous.
   Le sélecteur « .test-body .video-gate » ne vise QUE ces vidéos : la « Vidéo associée » est placée AVANT .test-body, elle garde donc
   toute la largeur. Sur téléphone, la vidéo reprend toute la largeur (à 80 %, elle deviendrait trop petite pour être confortable). */
.test-body .video-gate{ width:90%; margin:28px auto 32px; }
@media (max-width:640px){ .test-body .video-gate{ width:100%; } }
.video-fallback a{ color:var(--game-2); font-weight:600; }

/* Texte du test (HTML nettoyé issu de l'éditeur) */
/* Espacement du texte : à ajuster ici si besoin (line-height = interligne, margin-bottom = espace entre paragraphes) */
.test-body{ font-size:1.02rem; line-height:1.65; color:#E6E9F0; }
.test-body > *:first-child{ margin-top:0; }
.test-body h2{ font-size:1.5rem; margin:30px 0 10px; line-height:1.3; }
.test-body h3{ font-size:1.2rem; margin:24px 0 8px; line-height:1.3; }
.test-body p{ margin-bottom:0.75em; }
/* Ligne vide de l'éditeur : un petit espace plutôt qu'un paragraphe entier */
.test-body p.espace{ margin:0; line-height:0.6; }
.test-body strong{ color:var(--white); }
.test-body a{ color:var(--game-2); text-decoration:underline; text-underline-offset:3px; }
.test-body img{ display:block; max-width:90%; height:auto; border-radius:12px; margin:18px auto; }
.test-body blockquote{ border-left:3px solid var(--game-2); padding:4px 0 4px 18px; margin:22px 0; color:var(--muted); font-style:italic; }
.test-body ul, .test-body ol{ margin:0 0 0.75em 24px; }
.test-body li{ margin-bottom:4px; }

/* ---- Introduction et conclusion (styles de paragraphe de l'éditeur) ----
   Introduction : en italique, un peu plus grande et plus claire que le texte courant.
   Conclusion   : un bloc discret, dans l'esprit des cartes de la colonne de droite (voile blanc
                  translucide + fine bordure), avec un filet cyan atténué en bas. Plusieurs
                  paragraphes de conclusion consécutifs forment UN seul bloc (regroupé par le serveur).
   Réglages : l'intensité du fond (0.05), celle de la bordure (0.10) et celle du filet (0.55). */
.test-body p.bloc-intro, .article-body p.bloc-intro{ font-style:italic; font-size:1.12rem; line-height:1.7; color:#C9CEDA; }
.test-body p.bloc-intro.espace, .article-body p.bloc-intro.espace{ line-height:0.6; }
.test-body .bloc-conclusion, .article-body .bloc-conclusion{
  margin:30px 0 22px; padding:22px 26px 12px; border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-bottom:3px solid rgba(0,194,209,0.55);
}
.test-body .bloc-conclusion p:last-child, .article-body .bloc-conclusion p:last-child{ margin-bottom:10px; }
/* MOBILE (téléphone, 600 px et moins) : plus d'effet "carte" (coins arrondis, bordure sur les quatre côtés).
   La conclusion devient un BANDEAU pleine largeur de l'écran, au même fond que la version PC (voile blanc 5 %),
   fermé en dessous par le liseret de la couleur de l'univers : cyan pour Gaming, ambre pour Life (cette
   couleur est déjà fixée par la règle .univers-life plus bas). Le texte reste aligné sur celui des paragraphes
   voisins : --marge est exactement la marge latérale de la page (voir .test-layout et .article-layout),
   compensée par une marge négative, donc le fond va jusqu'aux bords sans décaler le texte.
   Réglages : épaisseur du liseret (3px). Le PC et les tablettes ne sont pas concernés. */
@media (max-width:600px){
  .test-body .bloc-conclusion, .article-body .bloc-conclusion{
    --marge:clamp(20px, 5vw, 40px);
    margin:26px calc(-1 * var(--marge)) 22px;
    padding:20px var(--marge) 8px;
    border:0; border-radius:0;
    border-bottom:3px solid rgba(0,194,209,0.55);
    background:rgba(255,255,255,0.05);
  }
}

/* Colonne latérale */
.test-aside{ display:flex; flex-direction:column; gap:20px; }
@media (max-width:900px){ .test-aside{ position:static; } }
.aside-card{
  border-radius:16px; padding:20px 20px 22px;
  border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03);
}
.aside-card h2{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); margin-bottom:14px; font-weight:600; }
.aside-cover{ display:block; width:100%; border-radius:10px; margin-bottom:12px; }
.aside-game{ font-weight:700; font-size:1.05rem; margin-bottom:12px; }
.aside-dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:0.75rem; margin-bottom:16px; }
/* Espace supplémentaire entre la dernière info du jeu et le bouton boutique (carte moins compacte) */
.aside-dl + .btn{ margin-top:16px; }
.aside-dl dt{ color:var(--muted); }
.aside-dd-full{ grid-column:1 / -1; }
.aside-note{ color:var(--muted); font-size:0.76rem; margin-top:10px; line-height:1.5; }
.aside-stats{ list-style:none; font-size:0.92rem; display:flex; flex-direction:column; gap:8px; }
.aside-stats strong{ color:var(--game-2); }
.aside-card .btn{ width:100%; justify-content:center; }

/* Carte "Articles sur ce jeu" (colonne de droite d'un test)
   Volontairement DIFFÉRENTE des cartes du test, qui sont des boîtes à fond léger : celle-ci n'a ni boîte ni fond,
   seulement une barre verticale en dégradé et un titre en couleur d'accent. C'est un prolongement du test,
   pas une fiche technique de plus. */
.aside-extra{ position:relative; margin-top:6px; padding:2px 0 2px 22px; }
.aside-extra::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--game-2), var(--game-1));
}
.aside-extra h2{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em; font-weight:600;
  color:var(--game-2); margin-bottom:14px;
}
.extra-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.extra-item{ display:flex; align-items:center; gap:12px; color:var(--white); }
.extra-vignette{ flex:none; width:72px; height:50px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,0.06); }
.extra-vignette img{ display:block; width:100%; height:100%; object-fit:cover; }
.extra-vignette.sans-image.univers-gaming{ background:linear-gradient(160deg,#2B1750,#0A0C10); }
.extra-vignette.sans-image.univers-life{ background:linear-gradient(160deg,#123138,#0A0C10); }
.extra-texte{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.extra-texte strong{
  font-size:0.9rem; line-height:1.35; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.extra-texte small{ font-size:0.74rem; color:var(--muted); }
.extra-item:hover strong, .extra-item:focus-visible strong{ color:var(--game-2); }

/* Carte "Mon test" de la colonne de droite d'un article rattaché à un jeu */
.aside-test-link{ display:block; font-weight:600; font-size:0.95rem; line-height:1.45; color:var(--white); margin-bottom:18px; }
.aside-test-link:hover{ color:var(--game-2); }

/* Jauge de satisfaction : barre pleine largeur, remplie à --sat %, avec le taux écrit à l'intérieur (à droite).
   Le taux est blanc avec une ombre légère : il reste lisible aussi bien sur la partie remplie (cyan à violet)
   que sur la partie vide (sombre). Le dégradé est calé sur la barre ENTIÈRE (background-size) : un score
   élevé va jusqu'au violet, un score faible reste dans le cyan, comme si la couleur "mesurait" la valeur.
   Sans prise en charge de ce calcul, le dégradé s'étire simplement sur la partie remplie. */
.jauge{ --sat:0; position:relative; height:30px; border-radius:999px; background:rgba(255,255,255,0.1); }
.jauge-remplissage{
  height:100%; min-width:6px; width:calc(var(--sat) * 1%); border-radius:999px;
  background:linear-gradient(90deg, var(--game-2), var(--game-1));
  background-size:calc(10000% / var(--sat)) 100%;
  box-shadow:0 0 12px rgba(0,194,209,0.35);
  animation:jauge-remplir 1s cubic-bezier(.22,.8,.3,1) both;
}
.jauge-valeur{
  position:absolute; top:0; right:14px; line-height:30px;
  font-family:'Anton', Impact, sans-serif; font-size:1.06rem; letter-spacing:0.02em;
  color:var(--white); text-shadow:0 1px 3px rgba(0,0,0,0.55);
}
@keyframes jauge-remplir{ from{ width:0; } }
@media (prefers-reduced-motion: reduce){ .jauge-remplissage{ animation:none; } }

/* ---------------- Fiche d'un jeu (/jeu/12-nom-du-jeu) ---------------- */
/* Bandeau violet derrière la carte d'en-tête : même fond que .subhero.gaming (voir plus haut). On n'utilise PAS la classe
   .subhero elle-même : ses règles ".subhero h1" et ".subhero p" s'appliqueraient à tous les titres et paragraphes de la carte.
   Le haut du bandeau laisse la place du menu fixe, puis un espace libre avant la carte (comme sur les autres pages Gaming). */
.fiche-hero{ position:relative; overflow:hidden; padding:128px clamp(20px,4vw,48px) 44px; }
.fiche-hero-inner{ position:relative; z-index:2; max-width:1304px; margin:0 auto; }
@media (max-width:640px){ .fiche-hero{ padding-top:108px; padding-bottom:32px; } }

.fiche-page{ max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,48px) 70px; }

/* Grand bandeau pleine largeur : même aspect que les cartes de la colonne de droite (classe .aside-card).
   Jaquette | informations | Mon avis | Mon expérience. Les blocs absents (pas de test, pas de stats...) disparaissent
   et les autres se partagent la place. Les séparateurs verticaux ne s'affichent que si tout tient sur UNE ligne. */
.fiche-titre{ font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1.15; font-weight:700; margin-bottom:22px; }
/* Bouton « Partager » (articles et tests) : un seul mot discret qui déplie une petite liste de liens vers les pages de partage des
   réseaux (aucun script de réseau). Sans JavaScript, la liste est affichée directement sous le titre « Partager ». */
.partage{ display:flex; flex-direction:column; align-items:flex-end; margin:16px 0 0; }
.partage-titre{ margin:0 0 12px; font-size:0.78rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); }
.partage-declencheur{
  display:inline-flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer;
  background:none; border:0; color:var(--muted); font:inherit; font-size:0.9rem; line-height:1.2; transition:color .2s ease;
}
.partage-declencheur svg{ flex:none; display:block; width:16px; height:16px; }
.partage-declencheur:hover, .partage-declencheur[aria-expanded="true"]{ color:var(--game-2); }
.partage-declencheur:focus-visible{ outline:2px solid var(--game-2); outline-offset:4px; border-radius:4px; }
.partage-liste{
  display:flex; flex-direction:column; gap:2px; width:max-content; min-width:210px; max-width:100%;
  margin:0; padding:6px; list-style:none; background:var(--void-2); border:1px solid rgba(255,255,255,0.12); border-radius:12px;
}
.partage-liste[hidden]{ display:none; }
.partage-ancre{ position:relative; display:block; width:max-content; max-width:100%; }
/* Avec JavaScript, la liste se SUPERPOSE au contenu (position absolue, au-dessus du reste mais sous le menu fixe du site) au lieu
   de le repousser. max-width ne peut pas être « 100% » ici : il se calculerait sur la largeur du bouton seul. */
.partage-js .partage-liste{
  position:absolute; z-index:30; right:0; top:calc(100% + 8px); margin:0; max-width:min(300px, calc(100vw - 40px));
  box-shadow:0 14px 34px rgba(0,0,0,0.55);
}
.partage-haut .partage-liste{ top:auto; bottom:calc(100% + 8px); }          /* pas la place dessous : on ouvre vers le haut */
.partage-liste li{ margin:0; }
.partage-js .partage-liste li:last-child{ margin-top:4px; padding-top:4px; border-top:1px solid rgba(255,255,255,0.1); }
.partage-liste a, .partage-ligne{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:0; border-radius:8px; cursor:pointer;
  background:none; color:var(--white); font:inherit; font-size:0.9rem; line-height:1.2; text-align:left; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.partage-liste a:hover, .partage-ligne:hover{ background:rgba(0,194,209,0.1); color:var(--game-2); }
.partage-liste a:focus-visible, .partage-ligne:focus-visible{ outline:2px solid var(--game-2); outline-offset:-2px; }
/* Icône : un MASQUE, seule la forme du fichier SVG compte ; le site la colorie (gris, puis couleur de l'univers au survol) */
.partage-icone{
  flex:none; width:18px; height:18px; color:var(--muted); background:currentColor;
  -webkit-mask:var(--icone) center/contain no-repeat; mask:var(--icone) center/contain no-repeat;
}
.partage-liste a:hover .partage-icone, .partage-ligne:hover .partage-icone{ color:inherit; }
.univers-life .partage-declencheur:hover, .univers-life .partage-declencheur[aria-expanded="true"]{ color:var(--life-1); }
.univers-life .partage-declencheur:focus-visible, .univers-life .partage-liste a:focus-visible, .univers-life .partage-ligne:focus-visible{ outline-color:var(--life-1); }
.univers-life .partage-liste a:hover, .univers-life .partage-ligne:hover{ background:rgba(244,162,97,0.1); color:var(--life-1); }
@media print{ .partage{ display:none; } }

/* Commentaires Discord sous une page : texte seul (aucun avatar, image ni lien cliquable). Le trait vertical qui relie les messages, le badge
   « Auteur », l'icône et le bouton prennent la COULEUR DE L'UNIVERS, comme le liseret des conclusions : mêmes valeurs (3 px ; cyan à 55 % en
   Gaming, ambre à 60 % en Life). Pour changer la couleur d'un univers, modifier --accent, --accent-rgb et --trait ci-dessous. */
.discord-commentaires{
  --accent:#00C2D1; --accent-rgb:0,194,209; --trait:rgba(0,194,209,0.55);
  margin:44px 0 10px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12);
}
.partage + .discord-commentaires{ margin-top:14px; }
.univers-life .discord-commentaires{ --accent:#F4A261; --accent-rgb:244,162,97; --trait:rgba(244,162,97,0.6); }
.discord-titre{ display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:1.25rem; }
.discord-icone{ flex:none; color:var(--accent); }
.discord-intro, .discord-vide, .discord-note{ margin:0 0 14px; color:var(--muted); font-size:0.92rem; line-height:1.55; }
.discord-note{ margin:16px 0 0; font-size:0.82rem; }
.discord-note a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.discord-boite{ margin-top:14px; padding:20px 22px 16px; background:var(--void-2); border:1px solid rgba(255,255,255,0.08); border-radius:14px; }
.discord-liste{ margin:0; padding:0; list-style:none; }
.discord-message{ display:flex; gap:14px; }
.discord-col{ display:flex; flex-direction:column; align-items:center; flex:none; width:38px; }
/* Pastille : la première lettre du pseudo, dans l'une de 6 couleurs de ta palette (toujours la même pour un même pseudo). Rien n'est chargé de Discord.
   Chaque couleur de lettre respecte un contraste de 4,5:1 au moins (norme d'accessibilité pour un petit texte) : ne pas changer une couleur sans le recalculer. */
.discord-av{ display:flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; border-radius:50%; font-weight:600; font-size:1rem; line-height:1; }
.discord-av-0{ background:linear-gradient(135deg,#008C9E,#7B2FF7); color:#fff; }      /* cyan un peu plus profond que le site : une lettre blanche y garde un contraste de 4,5 minimum */
.discord-av-1{ background:#F4A261; color:#2b1503; }
.discord-av-2{ background:#E76F51; color:#04141A; }
.discord-av-3{ background:#2A6F77; color:#fff; }
.discord-av-4{ background:#7B2FF7; color:#fff; }
.discord-av-5{ background:#00C2D1; color:#04141A; }
/* Le fil : part de la pastille, descend jusqu'au message suivant ; absent après le dernier message. */
.discord-fil{ flex:1; width:3px; margin:6px 0 4px; border-radius:2px; background:var(--trait); }
.discord-message:last-child .discord-fil{ display:none; }
.discord-corps{ flex:1; min-width:0; padding-bottom:20px; }
.discord-message:last-child .discord-corps{ padding-bottom:18px; }
.discord-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font-size:0.88rem; }
.discord-auteur{ color:var(--white); font-weight:600; overflow-wrap:anywhere; }      /* un pseudo long sans espace passe à la ligne au lieu de déborder */
.discord-badge{ padding:1px 9px; border:1px solid rgba(var(--accent-rgb),0.55); border-radius:999px; color:var(--accent); font-size:0.72rem; font-weight:600; }
.discord-date{ margin-left:auto; color:var(--muted); font-size:0.8rem; white-space:nowrap; }
.discord-texte{ margin:5px 0 0; line-height:1.55; overflow-wrap:anywhere; }
/* Ligne de participation : ressemble à une zone de saisie, mais c'est un lien vers le fil Discord. */
.discord-saisie{ display:flex; align-items:center; gap:12px; margin-top:4px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08); color:inherit; text-decoration:none; }
.discord-moi{ display:flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.07); color:var(--muted); }
.discord-fake{ flex:1; min-width:0; padding:11px 18px; border-radius:999px; background:rgba(255,255,255,0.05); color:var(--muted); font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:background .2s ease; }
.discord-btn{ flex:none; padding:10px 20px; border:1px solid var(--accent); border-radius:999px; color:var(--white); font-weight:600; font-size:0.92rem; transition:background .2s ease, color .2s ease; }
.discord-fake-court{ display:none; }      /* texte plus court, réservé aux téléphones (voir plus bas) */
.discord-saisie:hover .discord-fake{ background:rgba(255,255,255,0.08); }
.discord-saisie:hover .discord-btn, .discord-saisie:focus-visible .discord-btn{ background:rgba(var(--accent-rgb),0.12); color:var(--accent); }
.discord-saisie:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:12px; }
.discord-invitation{ margin:12px 0 0; color:var(--muted); font-size:0.88rem; }
.discord-invitation a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:600px){
  .discord-boite{ padding:16px 14px 14px; }
  .discord-message{ gap:12px; }
  /* téléphone : l'icône de profil disparaît et le faux champ affiche un texte plus court, pour qu'il ne soit jamais coupé (même à 360 px) */
  .discord-moi{ display:none; }
  .discord-fake-long{ display:none; }
  .discord-fake-court{ display:inline; }
  .discord-saisie{ gap:10px; }
  .discord-fake{ padding:11px 12px; font-size:0.86rem; }
  .discord-btn{ padding:10px 16px; }
}
@media print{ .discord-commentaires{ display:none; } }

/* Fiche d'une démo / bêta / autre version : pastille juste après le nom du jeu, et un texte à la place de « Mon avis »
   qui renvoie vers la fiche du jeu complet. */
.fiche-pastille{
  display:inline-block; margin-left:14px; padding:3px 12px; border-radius:999px; vertical-align:middle; white-space:nowrap;
  font-size:0.78rem; font-weight:700; line-height:1.4; color:#04141A; background:var(--game-2);
}
.fiche-avis.fiche-version{ width:230px; max-width:230px; text-align:left; }
.fiche-version p{ font-size:1rem; line-height:1.55; }
.fiche-version a{ color:var(--game-2); text-decoration:underline; text-underline-offset:3px; }
.fiche-corps{ display:flex; flex-wrap:wrap; gap:28px 36px; align-items:flex-start; }
.fiche-cover{ flex:0 0 140px; }
.fiche-cover img{ display:block; width:100%; height:auto; border-radius:10px; }
/* Largeurs fixes : la mise en page ne bouge pas, que « Mon avis » soit là ou non. « infos » reste à gauche ; sa marge de droite
   automatique absorbe tout l'espace libre et repousse « Mon avis » et « Mon expérience » au bord droit (c'est l'équivalent
   d'un élément vide entre les deux, sans élément en plus ; elle marche même si « Mon avis » est absent). */
.fiche-infos{ width:410px; flex-shrink:0; margin-right:auto; }
.fiche-dl{ display:grid; grid-template-columns:auto 1fr; gap:10px 22px; font-size:1rem; margin-bottom:24px; }
.fiche-dl dt{ color:var(--muted); }
.fiche-dl dd{ margin:0; }
.fiche-avis{ width:180px; flex-shrink:0; margin-left:55px; text-align:center; }
/* Anneau de 140 px : dans les 180 px de la colonne (calcul border-box), il reste 143 px une fois retirés le trait et l'espace du séparateur */
.fiche-avis .sat-ring{ flex:none; width:140px; height:140px; margin:6px auto 16px; }
.fiche-avis .sat-ring span{ font-size:2.5rem; }
.fiche-avis .aside-lien{ margin:0; font-size:1rem; }
.fiche-xp{ flex:1 1 200px; min-width:0; max-width:310px; }
.fiche-xp .xp-nom{ font-size:1.25rem; font-weight:700; margin-bottom:10px; }
.fiche-xp .aside-stats{ font-size:1.05rem; }

@media (min-width:1290px){
  .fiche-avis, .fiche-xp{ padding-left:36px; border-left:1px solid rgba(255,255,255,0.14); align-self:stretch; }
}
@media (max-width:640px){
  .fiche-cover{ flex:0 0 100%; max-width:160px; }
  .fiche-infos{ width:auto; flex:1 1 100%; margin-right:0; }
  .fiche-avis{ width:auto; flex:1 1 100%; margin-left:0; }
  .fiche-avis.fiche-version{ width:auto; max-width:none; }
  .fiche-xp{ max-width:none; }
  /* Séparateurs : sous 640 px les blocs s'empilent dans UNE colonne, donc le trait de gauche des grands écrans devient
     un trait en HAUT de « Mon avis » (ou du texte d'une version) et de « Mon expérience ». Entre 641 et 1289 px, les blocs se
     répartissent sur plusieurs lignes à des endroits variables : pas de trait, un trait de côté y tomberait au mauvais endroit. */
  .fiche-avis, .fiche-xp{ border-top:1px solid rgba(255,255,255,0.14); padding-top:28px; }
}

/* Sections sous le bandeau */
.fiche-section{ margin-top:44px; }
.fiche-section h2{ font-size:1.5rem; line-height:1.3; margin-bottom:16px; }
.fiche-vide{ margin-top:36px; color:var(--muted); }

/* Listes verticales (images, articles) : filets fins, ligne qui s'éclaire au survol */
.fiche-liste{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,0.1); }
.fiche-liste > li{ border-bottom:1px solid rgba(255,255,255,0.1); }

.fiche-ligne{
  display:grid; grid-template-columns:72px minmax(0,1fr) 150px 170px; gap:16px; align-items:center;
  padding:12px 8px; color:inherit; text-decoration:none;
}
.fiche-ligne:hover, .fiche-ligne:focus-visible{ background:rgba(255,255,255,0.03); }
.fiche-ligne-img{ display:block; width:72px; height:48px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,0.06); }
.fiche-ligne-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.fiche-ligne-img.sans-image.univers-gaming{ background:linear-gradient(160deg,#2B1750,#0A0C10); }
.fiche-ligne-img.sans-image.univers-life{ background:linear-gradient(160deg,#123138,#0A0C10); }
.fiche-ligne-titre{ font-weight:600; line-height:1.35; }
.fiche-ligne:hover .fiche-ligne-titre, .fiche-ligne:focus-visible .fiche-ligne-titre{ color:var(--game-2); }
.fiche-ligne-meta, .fiche-ligne-date{ font-size:0.88rem; color:var(--muted); }

/* Images liées au jeu : une bande HORIZONTALE qui défile (la fiche reste courte, même avec beaucoup d'images).
   Le conteneur est focalisable au clavier (tabindex) pour que la bande se parcoure sans souris. */
.fiche-defile{ overflow-x:auto; padding-bottom:14px; scroll-snap-type:x proximity; }
.fiche-defile:focus-visible{ outline:2px solid var(--game-2); outline-offset:4px; border-radius:8px; }
.fiche-liste.fiche-medias{ display:flex; gap:18px; width:max-content; border-top:0; }
.fiche-medias > li{ border-bottom:0; }
.fiche-media{ flex:0 0 210px; display:flex; flex-direction:column; gap:10px; scroll-snap-align:start; }
.fiche-media img{ display:block; width:100%; height:130px; object-fit:cover; border-radius:10px; cursor:zoom-in; background:rgba(255,255,255,0.06); }
.fiche-ligne-texte{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.fiche-ligne-texte strong{
  font-weight:600; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fiche-ligne-texte small{ font-size:0.8rem; color:var(--muted); overflow-wrap:anywhere; }
.fiche-ligne-texte .fiche-tags{ color:var(--game-2); }

@media (max-width:700px){
  .fiche-ligne{ grid-template-columns:72px minmax(0,1fr); gap:4px 14px; }
  .fiche-ligne-meta, .fiche-ligne-date{ grid-column:2; }
  .fiche-ligne-img{ grid-row:1 / span 3; }
}

/* "Mon expérience" détaillée par plateforme */
.xp-plateforme + .xp-plateforme{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.1); }
.xp-nom{ font-weight:600; margin-bottom:8px; }

/* Bascule entre les statistiques du jeu, de sa bêta, de sa démo... : un seul bloc visible à la fois. Un SEUL petit bouton
   (deux flèches de 12 px), à droite du titre « Mon expérience » : il ne bouge pas quand le contenu change. Le script est dans
   jeu-view.php ; sans lui, tous les blocs restent visibles. */
.xp-entete{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.xp-entete h2{ margin-bottom:0; }                       /* l'espace sous le titre est porté par .xp-entete */
.xp-cycle{ position:relative; }
.xp-plateforme[hidden]{ display:none; }
.xp-cycle-actif .xp-plateforme + .xp-plateforme{ margin-top:0; padding-top:0; border-top:0; }   /* plus de filet : un seul bloc à l'écran */
.xp-bascule{
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:12px; height:12px; padding:0; cursor:pointer; border:0; background:none; color:var(--muted);
  transition:color .2s ease;
}
/* Le bouton est petit, mais sa zone de clic ne l'est pas : 12 px visibles, environ 32 px cliquables (utilisable au doigt). */
.xp-bascule::after{ content:""; position:absolute; top:-10px; right:-10px; bottom:-10px; left:-10px; }
.xp-bascule svg{ display:block; width:12px; height:12px; transition:transform .45s ease; }
.xp-bascule:hover, .xp-bascule:focus-visible{ color:var(--game-2); }
.xp-bascule:hover svg, .xp-bascule:focus-visible svg{ transform:rotate(180deg); }
.xp-bascule:focus-visible{ outline:2px solid var(--game-2); outline-offset:6px; border-radius:50%; }
.xp-statut{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .xp-bascule svg{ transition:none; } }
.xp-succes{ margin-top:14px; }
.xp-succes-texte{ margin-top:8px; font-size:0.88rem; color:var(--muted); }

/* Carte "Le jeu" d'un test ou d'un article : le nom et un lien mènent à la fiche */
.aside-game a{ color:inherit; text-decoration:none; }
.aside-game a:hover, .aside-game a:focus-visible{ color:var(--game-2); text-decoration:underline; text-underline-offset:3px; }
.aside-lien{ margin:0 0 14px; font-size:0.88rem; }
.aside-lien a{ color:var(--game-2); text-decoration:underline; text-underline-offset:3px; }

/* Page "Mes jeux" : le nom d'un jeu mène à sa fiche */
/* Tri du tableau : en-têtes cliquables (ordinateur) et liste déroulante « Trier par » (téléphone, où l'en-tête est masqué) */
.tri-bouton{
  display:inline-flex; align-items:center; gap:7px; padding:4px 0; cursor:pointer;
  background:none; border:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; text-align:left;
}
.tri-bouton:hover, .tri-bouton.actif{ color:var(--white); }
.tri-bouton:focus-visible{ outline:2px solid var(--game-2); outline-offset:4px; border-radius:4px; }
.tri-fleche{ flex:none; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; opacity:0; }
.tri-bouton:hover .tri-fleche{ opacity:0.35; border-top:5px solid currentColor; }        /* aperçu discret au survol */
.tri-bouton.actif .tri-fleche{ opacity:1; color:var(--game-2); }
.tri-bouton.actif.asc .tri-fleche{ border-top:0; border-bottom:5px solid currentColor; }   /* flèche vers le haut : croissant */
.tri-bouton.actif.desc .tri-fleche{ border-bottom:0; border-top:5px solid currentColor; }  /* flèche vers le bas : décroissant */
.jeux-tri-mobile{ display:none; align-items:center; gap:10px; margin-bottom:14px; font-size:0.88rem; color:var(--muted); }
.jeux-tri-mobile select{
  flex:1; min-width:0; padding:9px 12px; border-radius:10px; font-size:0.88rem;
  border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.04); color:var(--white);
}
.jeux-tri-mobile select option{ color:#b3b3b3; }
.sr-seul{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:760px){ .jeux-tri-mobile{ display:flex; } }   /* APRÈS la règle de base ci-dessus : à spécificité égale, la dernière gagne */
@media (prefers-reduced-motion: reduce){ .tri-fleche{ transition:none; } }

.game-badge{
  font-style:normal; margin-left:8px; padding:2px 9px; border-radius:999px; vertical-align:middle;
  font-size:0.7rem; font-weight:700; color:var(--game-2);
  background:rgba(0,194,209,0.14); border:1px solid rgba(0,194,209,0.35);
}
.game-feature-cover-lien{ display:block; }
.game-feature-cover-lien .game-feature-cover{ transition:filter .25s ease; }
.game-feature-cover-lien:hover .game-feature-cover{ filter:brightness(1.12); }
.game-feature-body h3 a, .game-name a{ color:inherit; text-decoration:none; }
.game-feature-body h3 a:hover, .game-feature-body h3 a:focus-visible,
.game-name a:hover, .game-name a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }

.test-related{ max-width:1240px; margin:0 auto; padding:10px clamp(20px, 5vw, 40px) 110px; }
.test-related h2{ font-size:1.4rem; margin-bottom:22px; }

/* ======================= ARTICLES (pages publiques) ======================= */

/* Pastille "Test" / "Article" d'une carte, quand tests et articles sont mélangés (en haut à gauche ;
   la pastille de satisfaction d'un test reste en haut à droite). */
.type-pill{
  position:absolute; top:12px; left:12px; padding:4px 11px; border-radius:999px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  background:rgba(10,12,16,0.78); color:var(--white); border:1px solid rgba(255,255,255,0.22);
}
/* Article sans image de couverture : un fond aux couleurs de son univers */
.test-card-img.sans-image.univers-gaming{ background:linear-gradient(160deg,#2B1750,#0A0C10); }
.test-card-img.sans-image.univers-life{ background:linear-gradient(160deg,#123138,#0A0C10); }

/* Page d'un article : une seule colonne (le bandeau du haut est celui des tests) */
.article-layout{ max-width:900px; margin:0 auto; padding:10px clamp(20px, 5vw, 40px) 70px; }
.article-hero .test-hero-bg{ opacity:0.38; }       /* une photo de couverture doit rester bien visible */
.article-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.article-tags a{
  display:inline-block; padding:5px 13px; border-radius:999px; font-size:0.82rem;
  color:var(--muted); border:1px solid rgba(255,255,255,0.14);
}
.article-tags a:hover{ color:var(--white); border-color:var(--game-2); }

/* Habillage de l'univers Life (ambre / sarcelle) à la place du violet / cyan de Gaming */
.univers-life .test-hero{ background:linear-gradient(200deg, #123138, var(--void) 80%); }
.univers-life .test-crumb a{ color:var(--life-1); }
.univers-life .test-body a{ color:var(--life-1); }
.univers-life .test-body blockquote{ border-left-color:var(--life-1); }
.univers-life .test-body .bloc-conclusion{ border-bottom-color:rgba(244,162,97,0.6); }
.univers-life .article-tags a:hover{ border-color:var(--life-1); }
.univers-life .video-gate-icon{ border-color:var(--life-1); }

/* Liste des articles : filtres */
.filtres{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:30px; }
.filtres a{ padding:8px 18px; border-radius:999px; font-size:0.85rem; color:var(--muted); border:1px solid rgba(255,255,255,0.16); }
.filtres a:hover{ color:var(--white); }
.filtres a[aria-current="true"]{ color:var(--white); border-color:var(--game-2); background:rgba(0,194,209,0.12); }
.filtre-actif{ color:var(--muted); font-size:0.85rem; margin-left:6px; }
.filtre-actif a{ padding:0; border:0; color:var(--game-2); margin-left:8px; text-decoration:underline; }

/* Bandeau d'aperçu (admin) */
.preview-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:300; text-align:center;
  padding:11px 16px; font-size:0.85rem; font-weight:600; background:#E8D98A; color:#1A1500;
}

/* ---- Agrandissement des images (voir assets/js/lightbox.js) ---- */
.zoomable{ cursor:zoom-in; transition:filter .2s ease; }
.zoomable:hover{ filter:brightness(1.1); }
.zoomable:focus-visible{ outline:2px solid var(--game-2); outline-offset:4px; }
html.lightbox-open{ overflow:hidden; }

/* Pas de "display" sur .lightbox : le navigateur masque lui-même un <dialog> fermé. */
.lightbox{
  width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:transparent; color:var(--white);
}
.lightbox::backdrop{ background:rgba(5,6,9,0.93); }
.lightbox-inner{
  position:relative; width:100%; height:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; padding:64px 72px;
}
.lightbox-img{
  display:block; max-width:100%; max-height:100%; object-fit:contain;
  border-radius:8px; box-shadow:0 10px 50px rgba(0,0,0,0.6);
}
.lightbox-btn{
  position:absolute; width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1.9rem; line-height:1; padding:0 0 3px;
  color:var(--white); background:rgba(20,24,32,0.85); border:1.5px solid rgba(255,255,255,0.25);
  transition:border-color .2s ease, background .2s ease;
}
.lightbox-btn:hover, .lightbox-btn:focus-visible{ border-color:var(--game-2); background:rgba(0,194,209,0.2); }
.lightbox-btn[hidden]{ display:none; }
.lightbox-close{ top:16px; right:16px; }
.lightbox-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:16px; top:50%; transform:translateY(-50%); }
.lightbox-count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:var(--muted); font-size:0.85rem; }
.lightbox-count[hidden]{ display:none; }
@media (max-width:700px){
  .lightbox-inner{ padding:64px 8px 56px; }
  .lightbox-btn{ width:40px; height:40px; font-size:1.6rem; }
  .lightbox-prev{ left:6px; } .lightbox-next{ right:6px; }
}

/* =============================== PIED DE PAGE ============================ */

footer{
  padding:50px 8% 36px; background:var(--void-2);
  display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,0.06);
}
.footer-note{ color:var(--muted); font-size:0.83rem; }
.footer-legal{ display:flex; gap:18px; }
.footer-legal a{ color:var(--muted); font-size:0.8rem; }
.footer-legal a:hover{ color:var(--white); text-decoration:underline; }

/* ============================ PAGES LEGALES ================================ */

.legal-content{
  max-width:760px; margin:0 auto; padding:150px 8% 90px;
}
.legal-content h1{ font-size:clamp(1.6rem, 3vw, 2.1rem); margin-bottom:8px; }
.legal-content .legal-updated{ color:var(--muted); font-size:0.82rem; margin-bottom:40px; }
.legal-content h2{ font-size:1.15rem; margin:36px 0 12px; color:var(--white); }
.legal-content p{ color:var(--muted); font-size:0.95rem; line-height:1.75; margin-bottom:14px; }
.legal-content ul{ margin:0 0 14px 20px; padding:0; }
.legal-content li{ color:var(--muted); font-size:0.95rem; line-height:1.75; margin-bottom:8px; }
.legal-content a{ color:var(--game-2); }
.legal-content a:hover{ text-decoration:underline; }
.legal-content strong{ color:var(--white); }