/* =========================================================================
   Jeux Video Porno — feuille de style unique

   DIRECTION : SALLE D'ARCADE
   Un catalogue doit donner envie d'appuyer sur le bouton. La version
   précédente tirait vers le cyberpunk de synthèse — violet lavande, magenta
   fluo, halos lumineux, police techno — un registre si répandu qu'il ne
   distingue plus rien et qu'on le reconnaît au premier coup d'œil.

   Celle-ci prend l'autre route : le charbon d'une salle sombre, et la chaleur
   orange des bornes qui y brûlent. Une couleur d'accent, une seule, employée
   là où l'on doit cliquer. Des titres en capitales condensées, comme sur les
   flancs d'un cabinet d'arcade. Aucun halo : la lumière vient des visuels des
   jeux, pas du décor.

   Aucune dépendance, aucun framework.
   ========================================================================= */

/* ------------------------------- Polices -------------------------------- */
/* Deux fichiers, sous-ensemble latin, 32 Ko au total.

   Anton porte les titres : condensée et très grasse, elle tient un nom de jeu
   entier dans la largeur d'une vignette sans rétrécir, et son poids donne aux
   pages l'aplomb d'une affiche.

   Archivo tient les libellés, boutons et badges, là où il faut de la clarté à
   petite taille. Le texte courant reste sur la pile système : il s'affiche
   sans aucune attente. */

@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/anton-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/archivo-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------- Jetons --------------------------------- */

:root {
    /* Charbon neutre, sans teinte. Un fond coloré tire l'œil et entre en
       concurrence avec les vignettes ; ici il s'efface pour les servir. */
    --bg:          #0b0b0c;
    --bg-2:        #101011;
    --surface:     #161618;
    --surface-2:   #1d1d20;
    --surface-3:   #26262a;
    --line:        #2e2e33;
    --line-soft:   #232327;

    --text:        #f2f1ef;
    --text-2:      #b4b2ae;
    /* 5,6:1 sur les surfaces : au-dessus du seuil AA de 4,5:1 exigé sous
       18 px, tout en restant nettement en retrait du texte principal. */
    --text-3:      #918e89;

    /* L'orange incandescent est la seule couleur vive de la charte. Il ne
       sert qu'à une chose : signaler ce sur quoi on peut appuyer. Répandu
       partout, il perdrait exactement ce pouvoir. */
    --ember:       #ff4a1a;
    --ember-soft:  #ff7a4d;
    --ember-dim:   rgba(255, 74, 26, .14);

    --amber:       #ffb224;   /* notes et distinctions */
    --jade:        #3ddc84;   /* points forts */
    --ice:         #4cc9f0;   /* VR, mentions techniques */

    /* Alias conservés : le reste de la feuille et les gabarits y font encore
       référence. Les redéfinir ici évite une réécriture massive pour un gain
       nul. */
    --neon:        var(--ember);
    --neon-soft:   var(--ember-soft);
    --neon-dim:    var(--ember-dim);
    --violet:      var(--ice);
    --cyan:        var(--ice);
    --gold:        var(--amber);
    --green:       var(--jade);

    /* Angles nets. L'arrondi généralisé adoucit tout et ressemble à tout ;
       quelques pixels suffisent à garder les surfaces habitables. */
    --radius:      4px;
    --radius-lg:   6px;

    /* Un rythme d'espacement en puissances de 1.5 : suffisamment serré pour la
       densité du catalogue, assez large pour respirer sur les fiches. */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  24px;
    --s-6:  32px;
    --s-7:  48px;
    --s-8:  64px;
    --s-9:  96px;

    --display: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
    --ui:      'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;

    --wrap: 1320px;
    /* Des ombres portées franches plutôt que des halos colorés : la lumière
       tombe, elle n'émane pas des éléments. */
    --shadow: 0 16px 40px -20px rgba(0, 0, 0, .9);
    --shadow-neon: 0 0 0 1px var(--ember), 0 14px 34px -18px rgba(0, 0, 0, .95);
}

/* ------------------------------- Base ----------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Atmosphère de salle sombre plutôt que halo coloré.

       Deux couches, aucune image : une trame de lignes horizontales très
       faibles, souvenir des écrans à balayage, et une braise orange rasante
       dans le coin haut. Les halos violets de la version précédente teintaient
       toute la page et écrasaient les visuels des jeux ; ceux-ci restent sous
       le seuil de perception consciente et ne font que retirer au fond son
       aspect d'aplat mort. */
    background-image:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, .012) 0px,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(760px 420px at 92% -120px, rgba(255, 74, 26, .10), transparent 66%);
    background-repeat: repeat, no-repeat;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Le navigateur applique « margin: 1em 40px » aux figure et blockquote. Sans
   ce reset, le visuel principal d'une fiche est décalé de 40 px par rapport
   au texte qui le suit. */
figure, blockquote { margin: 0; }

a { color: var(--neon-soft); text-decoration: none; }
a:hover { color: var(--neon); }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    /* Anton n'a qu'une graisse, très grasse par construction : pas de
       font-weight à monter, et un interlignage serré parce qu'elle est
       condensée et que ses capitales n'ont presque pas de jambages. */
    line-height: 1.05;
    letter-spacing: .005em;
    text-transform: uppercase;
    margin: 0 0 var(--s-3);
    text-wrap: balance;
}

/* Les titres montent d'un cran : une condensée occupe moins de largeur à
   taille égale, elle peut donc se permettre d'être plus grande. */
h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }

/* Les titres de fiche gardent leur casse : un nom de jeu porte parfois des
   capitales significatives, et « S.H.E.L.T.E.R. » ne doit pas devenir un
   bloc illisible. */
/* Un nom de jeu garde sa casse : « LoveXLust » ou « AI Adult Games » perdent
   leur sens en capitales forcées, et l'auteur du jeu l'a écrit ainsi. */
.game__title,
.card__title,
.featured__title { text-transform: none; }

p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }

:focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: 3px;
    border-radius: 3px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--s-4);
}

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: var(--s-4);
    top: var(--s-4);
    z-index: 999;
    background: var(--neon);
    color: #fff;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius);
}

/* Micro-libellé : la signature typographique du site, reprise partout. */
.eyebrow {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--neon);
    margin: 0 0 var(--s-2);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--neon);
    flex: none;
}

/* -------------------------------- En-tête -------------------------------- */

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

.masthead__inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: 62px;
}

.brand {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.28rem;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.brand:hover { color: var(--text); }
.brand__mark {
    width: 26px;
    height: 26px;
    flex: none;
    background: var(--ember);
    /* Coin coupé : le motif géométrique repris sur les cartes et les boutons. */
    clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
    display: grid;
    place-items: center;
    font-size: .74rem;
    font-weight: 600;
    color: #140702;
}
.brand__accent { color: var(--neon); }

.nav {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    /* Poussée à droite de la rangée : la recherche garde la place au centre. */
    margin-left: auto;
    /* Repère de positionnement du panneau déroulant.
       Surtout : pas d'overflow ici. Un overflow-x en défilement rognait la
       dernière entrée du menu, et un conteneur qui défile clippe aussi les
       éléments positionnés qu'il contient — le panneau restait invisible.
       Le déroulant a rendu ce défilement inutile : la barre ne porte plus
       que quatre entrées. */
    position: relative;
}

/* La liste porte la disposition, les <li> ne sont que des conteneurs. Un <li>
   hors de son <ul> est une erreur d'accessibilité : on garde donc la structure
   complète et on neutralise seulement l'apparence de liste. */
.nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav li { margin: 0; }

.nav a {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .02em;
    color: var(--text-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    white-space: nowrap;
    transition: color .15s, background .15s;
}
.nav a:hover, .nav a[aria-current] {
    color: var(--text);
    background: var(--surface-2);
}

.nav-toggle {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: var(--s-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-3);
    font-family: var(--ui);
    font-weight: 600;
    font-size: .8rem;
    cursor: pointer;
}

.nav-toggle__bars {
    display: grid;
    gap: 3px;
    width: 15px;
}
.nav-toggle__bars span {
    display: block;
    height: 2px;
    background: var(--neon);
    border-radius: 2px;
}

/* Recherche et navigation partagent un conteneur : rangée sur grand écran,
   panneau dépliant sur mobile. */
.masthead__panel {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: 1;
    min-width: 0;
    margin-left: var(--s-5);
}

@media (max-width: 1120px) {
    .nav-toggle { display: flex; }

    .masthead__panel {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-2);
        margin: 0;
        padding: var(--s-3);
        background: var(--bg-2);
        border-bottom: 1px solid var(--line);
        max-height: 75vh;
        overflow-y: auto;
    }
    .masthead__panel[data-open] { display: flex; }

    .masthead__panel .nav {
        margin: 0;
        overflow: visible;
        width: 100%;
    }
    .masthead__panel .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }
    .masthead__panel .nav a {
        display: block;
        padding: var(--s-3);
        text-align: left;
    }
}

/* --------------------------------- Héros --------------------------------- */

.hero {
    padding: var(--s-8) 0 var(--s-6);
    position: relative;
}
.hero__title { margin-bottom: var(--s-4); max-width: 20ch; }
.hero__lede {
    max-width: 62ch;
    color: var(--text-2);
    font-size: 1.05rem;
    margin-bottom: var(--s-5);
}
.hero__lede strong { color: var(--text); font-weight: 600; }

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-soft);
}
.stat__value {
    /* Archivo : ces chiffres font 24 px, une taille à laquelle Anton se tasse
       et devient une tache sombre plutôt qu'un nombre. */
    font-family: var(--ui);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.stat__label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-3);
    margin-top: var(--s-1);
}

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

.section { padding: var(--s-7) 0; }
.section--tight { padding: var(--s-6) 0; }

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.section__head h2 { margin: 0; }
.section__link {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .84rem;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* --------------------------------- Grille -------------------------------- */

.grid {
    display: grid;
    gap: var(--s-4);
    /* Quatre par ligne sur grand écran. Le nombre de colonnes est fixé plutôt
       qu'auto-ajusté : avec auto-fill, la largeur des cartes variait d'une
       page à l'autre selon la place disponible. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1000px) {
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-3);
    }
}

/* -------------------------------- Carte ---------------------------------- */

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    /* Réserve la place du contenu avant peinture : évite tout décalage. */
    contain: layout paint;
}


/* Le survol doit promettre le clic. Le liseré orange et la remontée suffisent :
   la vignette s'agrandit déjà légèrement, en ajouter plus donnerait une grille
   qui frétille au passage de la souris. */
.card:hover,
.card:focus-within {
    transform: translateY(-3px);
    border-color: var(--ember);
    box-shadow: var(--shadow);
}

.card__media {
    position: relative;
    /* 16/9 : c'est le format natif des visuels fournis par la source, donc
       celui qui ne recadre rien. */
    aspect-ratio: 16 / 9;
    background: var(--surface-2);
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.card:hover .card__media img { transform: scale(1.045); }

/* Voile bas : c'est lui qui rend le nom lisible quelle que soit la vignette. */
/* Voile bas : c'est lui qui rend le nom lisible quelle que soit la vignette.

   Il monte plus haut et plus opaque qu'auparavant. Les visuels du catalogue
   vont du quasi-noir au blanc saturé, et un dégradé timide laissait les titres
   se perdre sur les images claires. */
.card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 72%;
    background: linear-gradient(
        to top,
        rgba(6, 6, 8, .96) 0%,
        rgba(6, 6, 8, .88) 26%,
        rgba(6, 6, 8, .5) 62%,
        transparent 100%
    );
    pointer-events: none;
}

/* La note est l'argument du site — chaque jeu a été testé. Elle passe en
   pastille pleine plutôt qu'en contour translucide : sur des vignettes aux
   dominantes très variées, un fond opaque est la seule façon de rester lisible
   partout. */
.card__rating {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    z-index: 4;
    min-width: 34px;
    text-align: center;
    background: var(--amber);
    color: #0b0b0c;
    font-family: var(--ui);
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.5;
    padding: 1px var(--s-2);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .7);
}

.card__flags {
    position: absolute;
    left: var(--s-2);
    top: var(--s-2);
    z-index: 2;
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
}

.flag {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(6, 6, 8, .8);
    backdrop-filter: blur(6px);
    color: var(--text-2);
    border: 1px solid var(--line);
}
.flag--vr     { color: var(--ice);  border-color: rgba(76, 201, 240, .45); }
.flag--new    { color: #0b0b0c; background: var(--amber); border-color: var(--amber); }
/* La mise en avant porte la couleur d'accent : c'est le seul endroit de la
   grille où elle apparaît, ce qui la fait remarquer sans encadré. */
.flag--pick   { color: #140702; background: var(--ember); border-color: var(--ember); }

/* Marqueur de lecture : un disque orange au centre de la vignette, qui
   grandit en apparaissant. Il ne coûte rien — un SVG de quelques octets — et
   c'est lui qui transforme une grille d'images en une grille de jeux.

   pointer-events: none pour que le clic atteigne le lien qui couvre la carte :
   sans cela, le seul endroit non cliquable serait le centre de la vignette. */
.card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: var(--ember);
    color: #fff;
    opacity: 0;
    transform: scale(.72);
    transition: opacity .16s ease, transform .16s cubic-bezier(.2, .9, .3, 1.3);
    pointer-events: none;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .85);
}
.card__play svg { margin-left: 2px; }

.card:hover .card__play,
.card:focus-within .card__play {
    opacity: 1;
    transform: scale(1);
}

/* Sur un écran tactile il n'y a pas de survol : le marqueur resterait caché
   en permanence, autant ne pas le produire. */
@media (hover: none) {
    .card__play { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .card__play { transition: opacity .16s ease; transform: scale(1); }
}

/* La vignette s'assombrit légèrement au survol pour détacher le marqueur. */
.card:hover .card__media::before,
.card:focus-within .card__media::before {
    opacity: 1;
}
.card__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(11, 11, 12, .38);
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
}

/* Plateformes et gratuité, révélées au survol.

   La ligne est repliée par défaut — hauteur nulle, opacité nulle — et se
   déploie sous le titre au passage de la souris. Elle n'est pas dans le flux
   visible au repos, donc la grille garde sa densité ; elle répond quand le
   visiteur hésite entre deux vignettes.

   aria-hidden sur l'élément : l'information figure déjà sur la fiche, et la
   répéter ici n'apporterait qu'un doublon à la synthèse vocale. */
.card__meta {
    position: absolute;
    left: var(--s-3);
    right: var(--s-3);
    bottom: var(--s-3);
    z-index: 4;
    margin: 0;
    font-family: var(--ui);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

.card:hover .card__meta,
.card:focus-within .card__meta {
    opacity: 1;
    transform: translateY(0);
}

/* Le titre remonte pour laisser la place à la ligne qui apparaît. */
.card:hover .card__title,
.card:focus-within .card__title {
    transform: translateY(-18px);
}

/* Souris absente ou mouvement réduit : la ligne resterait invisible sans
   moyen de la faire venir. Elle est alors simplement affichée. */
@media (hover: none) {
    .card__meta { opacity: 1; transform: none; }
    .card__title { transform: translateY(-18px); }
}
@media (prefers-reduced-motion: reduce) {
    .card__meta { transition: none; }
    .card__title { transition: none; }
}

/* Nom du jeu, posé en bas à gauche du visuel. */
.card__title {
    position: absolute;
    left: var(--s-3);
    right: var(--s-3);
    bottom: var(--s-3);
    /* Au-dessus du voile de lisibilité, qui monte à 2 sur les vignettes
       carrées : à z-index égal, un ::after est peint après les enfants et
       recouvrirait le titre. */
    z-index: 4;
    margin: 0;
    /* Archivo et non Anton : une condensée ultra-grasse à cette taille, sur
       une image, se lit mal — les contreformes se referment et les points des
       sigles comme « S.H.E.L.T.E.R. » se collent. Anton reste aux grands
       titres, où son poids est un atout. */
    font-family: var(--ui);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0;
    /* Deux lignes maximum : un titre long ne doit pas remonter sur l'image. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: transform .16s ease;
    /* Le voile ne suffit pas sur une vignette très claire. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 12px rgba(0, 0, 0, .9);
}
.card__title a { color: #fff; }
.card__title a:hover { color: var(--neon-soft); }

/* Zone de clic : le lien vide couvre toute la vignette, sous le titre pour
   que celui-ci reste sélectionnable et garde son survol. */
.card__link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* ------------------------------- Boutons --------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-family: var(--ui);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .02em;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
    text-align: center;
}

/* Texte charbon sur l'orange, et non blanc.

   Mesuré : blanc sur #ff4a1a donne 3,36:1, sous le seuil AA de 4,5:1. Deux
   sorties possibles — assombrir l'orange jusqu'à ce que le blanc passe, ou
   inverser le texte. La seconde garde l'accent à pleine intensité, ce qui est
   précisément son rôle, et monte le contraste à plus de 6:1. */
.btn--primary {
    background: var(--ember);
    color: #140702;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .75);
}
.btn--primary:hover {
    background: var(--ember-soft);
    color: #140702;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(0, 0, 0, .85);
}

.btn--ghost {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--text);
}
.btn--ghost:hover { border-color: var(--neon); color: var(--text); }

.btn--lg { font-size: 1.05rem; padding: var(--s-4) var(--s-6); width: 100%; }

@media (min-width: 600px) {
    .btn--lg { width: auto; min-width: 280px; }
}

/* -------------------------------- Filtres -------------------------------- */

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding: var(--s-3) 0 var(--s-5);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: var(--s-5);
}

.toolbar__count {
    /* C'est un H2 pour la structure du document, pas pour l'œil : il garde
       l'apparence d'un simple compteur. */
    font-family: var(--body);
    font-size: .82rem;
    font-weight: 400;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    margin: 0;
    line-height: 1.4;
}
.toolbar__count strong {
    color: var(--text);
    font-weight: 700;
}
.toolbar__label { color: var(--text-3); }

@media (max-width: 640px) {
    /* Sur mobile la place manque : le compteur suffit, la précision passe. */
    .toolbar__label { display: none; }
}

.sorts { display: flex; gap: var(--s-1); margin-left: auto; flex-wrap: wrap; }

.sorts a {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-3);
    padding: var(--s-1) var(--s-3);
    border-radius: 999px;
    border: 1px solid transparent;
}
.sorts a:hover { color: var(--text-2); }
.sorts a[aria-current] {
    color: var(--neon);
    border-color: var(--ember);
    background: var(--neon-dim);
}

/* Rubans de catégories horizontaux : maillage interne sans coût vertical. */
.chips {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.chip {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .8rem;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: var(--s-1) var(--s-4);
    transition: border-color .15s, color .15s, background .15s;
}
.chip:hover {
    color: var(--text);
    border-color: var(--neon);
    background: var(--neon-dim);
}
.chip__count { color: var(--text-3); font-size: .74rem; margin-left: 4px; }

/* ------------------------------ Fiche de jeu ----------------------------- */

.game { padding: var(--s-6) 0 var(--s-8); }

.game__layout {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
    .game__layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

.game__header { margin-bottom: var(--s-5); }
.game__title { margin-bottom: var(--s-2); }
.game__headline {
    color: var(--text-2);
    font-size: 1.08rem;
    margin-bottom: var(--s-4);
    max-width: 62ch;
}

.game__hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    margin-bottom: var(--s-5);
    aspect-ratio: 16 / 9;
    background: var(--surface-2);
}
.game__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Corps rédactionnel : hiérarchie nette. La mesure n'est pas bridée, c'est la
   grille du gabarit qui donne la largeur. */
.prose { max-width: none; }
.prose h2 {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-soft);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: var(--s-5); color: var(--text); }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Panneau latéral collant : le lien de jeu reste visible pendant la lecture. */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s-5);
    position: sticky;
    top: 80px;
}

.panel__score {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}
.panel__score-value {
    font-family: var(--ui);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.panel__score-max { color: var(--text-3); font-size: 1rem; }

.specs { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.specs li {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-top: 1px solid var(--line-soft);
    font-size: .88rem;
    margin: 0;
}
.specs dt, .specs .k {
    color: var(--text-3);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .08em;
    font-family: var(--ui);
    font-weight: 600;
    padding-top: 3px;
}
.specs .v { color: var(--text); text-align: right; font-weight: 500; }

/* Points forts et points faibles côte à côte. */
.verdict {
    display: grid;
    gap: var(--s-4);
    margin: var(--s-6) 0;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) { .verdict { grid-template-columns: 1fr 1fr; } }

.verdict__col {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: var(--s-4);
}
/* Ces intertitres sont des h2 : depuis le passage au format court, le corps
   de la fiche n'a plus de titre intermédiaire, et un h3 y créerait un saut
   dans la hiérarchie. Le style, lui, reste celui d'une étiquette. */
.verdict__col h2 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 var(--s-3);
}
.verdict__col--pros h2 { color: var(--green); }
.verdict__col--cons h2 { color: var(--neon); }
.verdict__col ul { margin: 0; padding: 0; list-style: none; }
.verdict__col li {
    position: relative;
    padding-left: var(--s-5);
    font-size: .92rem;
    color: var(--text-2);
    margin-bottom: var(--s-2);
}
.verdict__col li::before {
    position: absolute;
    left: 0;
    top: -1px;
    font-family: var(--ui);
    font-weight: 700;
}
.verdict__col--pros li::before { content: '+'; color: var(--green); }
.verdict__col--cons li::before { content: '−'; color: var(--neon); }

/* --------------------------------- FAQ ----------------------------------- */

.faq { margin: var(--s-6) 0; }

.faq details {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: var(--s-2);
    overflow: hidden;
}
.faq summary {
    cursor: pointer;
    padding: var(--s-4);
    font-family: var(--ui);
    font-weight: 600;
    font-size: .98rem;
    color: var(--text);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    color: var(--neon);
    font-size: 1.3rem;
    line-height: 1;
    flex: none;
    transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--neon-soft); }
.faq__answer { padding: 0 var(--s-4) var(--s-4); color: var(--text-2); }
.faq__answer p:last-child { margin-bottom: 0; }

/* ------------------------------ Fil d'Ariane ----------------------------- */

.crumbs {
    font-size: .78rem;
    color: var(--text-3);
    padding: var(--s-4) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--neon-soft); }
.crumbs span[aria-hidden] { color: var(--line); }

/* ------------------------------ Pagination ------------------------------- */

.pager {
    display: flex;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-7);
    flex-wrap: wrap;
}
.pager a, .pager span {
    font-family: var(--ui);
    font-weight: 600;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--s-3);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--neon); color: var(--text); }
.pager .current {
    background: var(--neon);
    border-color: var(--neon);
    color: #fff;
}
.pager .dots { border-color: transparent; background: none; }

/* -------------------------- Bandeau d'avertissement ---------------------- */

.agecheck {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(4, 3, 8, .96);
    display: grid;
    place-items: center;
    padding: var(--s-4);
}
.agecheck__box {
    max-width: 460px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s-6);
    text-align: center;
}
.agecheck__box h2 { margin-bottom: var(--s-3); }
.agecheck__box p { color: var(--text-2); font-size: .92rem; }
.agecheck__actions { display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); flex-wrap: wrap; }

/* -------------------------------- Pied ----------------------------------- */

.footer {
    border-top: 1px solid var(--line-soft);
    background: var(--bg-2);
    margin-top: var(--s-9);
    padding: var(--s-7) 0 var(--s-5);
}

.footer__cols {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: var(--s-6);
}
.footer h3 {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-3);
    margin-bottom: var(--s-3);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--s-2); }
.footer a { color: var(--text-2); font-size: .9rem; }
.footer a:hover { color: var(--neon-soft); }

.footer__legal {
    border-top: 1px solid var(--line-soft);
    padding-top: var(--s-4);
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--text-3);
}

.badge-18 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--neon);
    color: var(--neon);
    font-family: var(--ui);
    font-weight: 700;
    font-size: .78rem;
    flex: none;
}

/* ------------------------------ Utilitaires ------------------------------ */

.muted { color: var(--text-3); }
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.notice {
    background: var(--surface);
    border-left: 3px solid var(--neon);
    border-radius: var(--radius);
    padding: var(--s-4);
    color: var(--text-2);
    font-size: .92rem;
}

.empty {
    text-align: center;
    padding: var(--s-9) var(--s-4);
    color: var(--text-3);
}

/* ------------------- Contenu rédactionnel : éléments longs ---------------- */
/* Les articles historiques contiennent des tableaux, des citations et des
   images insérées à la main. Sans ces règles ils cassent la mise en page. */

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--s-5);
    font-size: .92rem;
}
.prose table th,
.prose table td {
    padding: var(--s-3);
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
    color: var(--text-2);
}
.prose table th {
    font-family: var(--ui);
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .08em;
    border-bottom-color: var(--line);
}
.prose table tr:last-child td { border-bottom: 0; }

/* Un tableau large défile dans son propre conteneur : le corps de page ne doit
   jamais partir en défilement horizontal. */
.prose .table-scroll {
    overflow-x: auto;
    margin: 0 0 var(--s-5);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.prose .table-scroll table { margin: 0; }

.prose blockquote {
    margin: 0 0 var(--s-5);
    padding: var(--s-4) var(--s-5);
    border-left: 3px solid var(--neon);
    background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-2);
    font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose img {
    border-radius: var(--radius);
    margin: var(--s-4) 0;
}

.prose figure { margin: var(--s-5) 0; }
.prose figcaption {
    font-size: .82rem;
    color: var(--text-3);
    margin-top: var(--s-2);
    text-align: center;
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--line-soft);
    margin: var(--s-6) 0;
}

.prose code {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .88em;
}

/* Les listes du contenu reprennent la puce néon des points forts. */
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
    position: relative;
    padding-left: var(--s-5);
}
.prose ul > li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: .65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--neon);
}
.prose ol { padding-left: 1.4em; }
.prose ol > li::marker {
    color: var(--neon);
    font-family: var(--ui);
    font-weight: 700;
}

/* ------------------------------ Recherche -------------------------------- */

.search {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 var(--s-1) 0 var(--s-4);
    transition: border-color .15s;
    max-width: 260px;
    flex: 0 1 260px;
}
.search:focus-within { border-color: var(--neon); }

.search__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    color: var(--text);
    font-family: var(--body);
    font-size: .88rem;
    padding: 8px 0;
    outline: none;
}
.search__input::placeholder { color: var(--text-3); }
/* La croix native de Chrome sur un input search est illisible sur fond sombre. */
.search__input::-webkit-search-cancel-button { filter: invert(1) opacity(.4); }

.search__submit {
    background: none;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
    padding: 6px 8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
.search__submit:hover { color: var(--neon); }

@media (max-width: 1240px) {
    .search { max-width: 210px; flex-basis: 210px; }
    .nav a { padding: var(--s-2); font-size: .78rem; }
}

@media (max-width: 1120px) {
    /* Dans le panneau dépliant, la recherche occupe toute la largeur. */
    .search { max-width: none; flex: none; margin: 0 0 var(--s-2); }
}

/* ------------------------- États et encarts ------------------------------ */

/* Fiche sans lien de jeu vérifié : on le dit, plutôt que de laisser un vide. */
.panel__pending {
    background: var(--surface-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: var(--s-4);
    font-size: .88rem;
    color: var(--text-3);
    margin: 0;
}
.panel__pending a { display: block; margin-top: var(--s-2); }

/* Mention de conformité en fin de fiche. */
.jvp-disclaimer {
    margin-top: var(--s-6);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-left: 3px solid var(--line);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .84rem;
    color: var(--text-3);
}
.jvp-disclaimer strong { color: var(--text-2); }

/* ---------------------- Barre de tri sur petit écran ---------------------- */
/* Sur mobile, les quatre options de tri ne tiennent pas sur une ligne et le
   retour à la ligne casse la lecture. On les fait défiler horizontalement :
   la rangée reste une rangée, et le geste est naturel au pouce. */

@media (max-width: 640px) {
    .toolbar {
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--s-3);
        padding-block: var(--s-2) var(--s-4);
        margin-bottom: var(--s-4);
    }

    .toolbar__count {
        flex: none;
        margin: 0;
    }

    .sorts {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        /* Le dernier élément ne doit pas coller au bord : sinon rien n'indique
           qu'il reste du contenu à faire défiler. */
        padding-right: var(--s-4);
        -webkit-overflow-scrolling: touch;
    }
    .sorts::-webkit-scrollbar { display: none; }
    .sorts a { white-space: nowrap; }

    /* Le héros est déjà dense sur mobile : on resserre ce qui le suit. */
    .hero { padding: var(--s-6) 0 var(--s-4); }
    .stats { gap: var(--s-5); }
    .section { padding: var(--s-6) 0; }
    .section--tight { padding: var(--s-4) 0; }
}

/* ---------------------------- Lecteur de jeu ------------------------------ */
/* Le poster occupe la place définitive du jeu : quand l'iframe le remplace au
   clic, rien ne bouge autour. */

.player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--s-5);
}

.player__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}

.player__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.player__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-4);
    text-align: center;
    background: radial-gradient(60% 60% at 50% 50%, rgba(6, 6, 8, .35), rgba(6, 6, 8, .82));
}

.player__button {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--ui);
    font-weight: 700;
    font-size: 1.05rem;
    /* Même règle que .btn--primary : le blanc sur cet orange ne passe pas le
       seuil AA, le charbon si. */
    color: #140702;
    background: var(--ember);
    border: 0;
    border-radius: var(--radius);
    padding: var(--s-4) var(--s-6);
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .8);
    transition: transform .15s, box-shadow .15s;
}
.player__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, .9);
}

.player__note {
    margin: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .72);
    font-family: var(--ui);
    font-weight: 600;
    letter-spacing: .04em;
}

@media (max-width: 640px) {
    .player__button { font-size: .95rem; padding: var(--s-3) var(--s-5); }
    .player__note { font-size: .72rem; }
}

/* ------------------------- Section éditoriale ---------------------------- */
/* Texte sur toute la largeur du conteneur, et le maillage interne en dessous
   plutôt qu'à côté : la colonne latérale rognait la largeur utile. */

.editorial {
    display: block;
}

.editorial__body {
    max-width: none;
    min-width: 0;
}

/* ------------------------- Panneau de liens internes ---------------------- */
/* En rangée sous le texte : plusieurs blocs côte à côte, chacun prenant sa
   part de la largeur disponible. */

.linkpanel {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: var(--s-7);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line-soft);
}

.linkpanel__block {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: var(--s-4);
}

.linkpanel h3 {
    font-family: var(--ui);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-3);
    margin: 0 0 var(--s-3);
}

.linkpanel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.linkpanel li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-top: 1px solid var(--line-soft);
    margin: 0;
    font-size: .9rem;
}
.linkpanel li:first-child { border-top: 0; padding-top: 0; }

.linkpanel li a {
    color: var(--text-2);
    /* Deux lignes maximum : un nom de jeu long ne doit pas déséquilibrer le
       bloc. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.linkpanel li a:hover { color: var(--neon-soft); }

.linkpanel li span {
    flex: none;
    font-family: var(--ui);
    font-weight: 600;
    font-size: .74rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* Les liens insérés dans le corps du texte restent discrets mais visibles. */
.prose a {
    color: var(--neon-soft);
    text-decoration: underline;
    text-decoration-color: rgba(255, 108, 176, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s;
}
.prose a:hover { text-decoration-color: var(--neon); }

/* ------------------------------ Héros ------------------------------------ */
/* Le texte seul laissait la moitié droite de l'écran vide au-dessus de la
   ligne de flottaison. Le jeu à la une y prend place : il remplit l'espace
   avec ce que le visiteur est venu chercher, et donne au héros un point de
   fixation visuel. */

/* Modificateur, pas règle générale : les pages de catégorie réutilisent
   .hero sans conteneur de texte ni jeu à la une, et la grille y renvoyait le
   titre dans la colonne de droite. */
@media (min-width: 1000px) {
    .hero--split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: var(--s-8);
        align-items: center;
    }
}

.hero__text { min-width: 0; }

.featured {
    position: relative;
}

.featured__link {
    display: block;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.featured__link:hover {
    transform: translateY(-3px);
    border-color: var(--ember);
    box-shadow: var(--shadow-neon);
}

.featured__media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--surface-2);
}
.featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured__body {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-6) var(--s-4) var(--s-4);
    background: linear-gradient(to top, rgba(6, 6, 8, .96) 15%, rgba(6, 6, 8, .7) 55%, transparent);
}

.featured__label {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--neon);
}

.featured__title {
    font-family: var(--ui);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}

.featured__note {
    font-family: var(--ui);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    margin-top: var(--s-1);
}
.featured__note small {
    font-size: .8rem;
    color: var(--text-3);
    font-weight: 600;
}

@media (max-width: 999px) {
    /* Sur mobile, le héros est déjà dense : la une passe après le texte, en
       format plus plat pour ne pas repousser la grille hors de l'écran. */
    .featured { margin-top: var(--s-5); }
    .featured__media { aspect-ratio: 16 / 9; }
}

/* --------------------------- Sélecteur de langue -------------------------- */
/* Rendu avec <details> : ni script à charger, ni piège de focus à gérer, et le
   repli sans JavaScript est natif. */

.langs {
    position: relative;
    flex: none;
}

.langs > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--ui);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .06em;
    transition: border-color .15s, color .15s;
}
.langs > summary::-webkit-details-marker { display: none; }
.langs > summary:hover,
.langs[open] > summary {
    border-color: var(--neon);
    color: var(--text);
}

.langs__list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 170px;
    margin: 0;
    padding: var(--s-1);
    list-style: none;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.langs__list li { margin: 0; }

.langs__list a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: 6px;
    color: var(--text-2);
    font-size: .88rem;
}
.langs__list a:hover { background: var(--surface-2); color: var(--text); }
.langs__list a[aria-current] { color: var(--neon); }

.langs__code {
    font-family: var(--ui);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--text-3);
    min-width: 22px;
}
.langs__list a[aria-current] .langs__code { color: var(--neon); }

@media (max-width: 1120px) {
    /* Dans le panneau dépliant, le sélecteur passe pleine largeur et sa liste
       cesse d'être flottante : rien ne doit déborder du panneau. */
    .langs { width: 100%; }
    .langs > summary { justify-content: center; }
    .langs__list {
        position: static;
        min-width: 0;
        margin-top: var(--s-1);
        box-shadow: none;
    }
}

/* ----------------------------- Commentaires ------------------------------ */

.comments {
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line-soft);
}

.comments__list {
    list-style: none;
    margin: 0 0 var(--s-6);
    padding: 0;
}

.comment {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
}

/* Une réponse est décalée, sans s'enfoncer indéfiniment. */
.comment--reply {
    margin-left: var(--s-5);
    border-left: 2px solid var(--line);
}

.comment .children {
    list-style: none;
    margin: var(--s-3) 0 0;
    padding: 0;
}

.comment__head {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-2);
}

.comment__author {
    font-family: var(--ui);
    font-weight: 700;
    font-size: .94rem;
    color: var(--text);
}

.comment__date {
    font-size: .76rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.comment__pending {
    font-size: .8rem;
    color: var(--gold);
    margin: 0 0 var(--s-2);
}

.comment__body { color: var(--text-2); font-size: .94rem; }
.comment__body p:last-child { margin-bottom: 0; }

.comment__reply { margin: var(--s-3) 0 0; }
.comment__reply a {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.comments__closed {
    color: var(--text-3);
    font-size: .9rem;
    padding: var(--s-4);
    background: var(--surface);
    border-radius: var(--radius);
}

/* ------------------------- Formulaire d'avis ----------------------------- */

.commentform,
.comment-respond {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: var(--s-5);
}

.comment-form {
    display: grid;
    gap: var(--s-3);
    /* Le pseudo et l'e-mail se placent côte à côte sur une même ligne. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commentform__row {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Par défaut un champ occupe la largeur entière. */
    grid-column: 1 / -1;
}
.commentform__row--half { grid-column: auto; }

.commentform__row label,
.comment-form label {
    font-family: var(--ui);
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
}

.commentform__req { color: var(--neon); }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--body);
    font-size: .94rem;
    padding: var(--s-3);
    transition: border-color .15s;
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--neon);
}
.comment-form textarea { resize: vertical; min-height: 120px; }
.comment-form ::placeholder { color: var(--text-3); }

.commentform__note,
.comment-form .comment-notes {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .78rem;
    color: var(--text-3);
}

/* La case de mémorisation et le bouton d'envoi. */
.comment-form-cookies-consent {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
}
.comment-form-cookies-consent label {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--body);
    font-weight: 400;
    font-size: .84rem;
    color: var(--text-3);
}

.form-submit {
    grid-column: 1 / -1;
    margin: 0;
}

@media (max-width: 600px) {
    .comment-form { grid-template-columns: 1fr; }
    .commentform__row--half { grid-column: 1 / -1; }
    .comment--reply { margin-left: var(--s-3); }
}

/* ------------------- Visuels qui ne sont pas en 16/9 ---------------------- */
/* Les 42 fiches historiques ont une vignette carrée. La recadrer au format du
   cadre ampute un tiers de l'illustration, souvent le titre du jeu. On affiche
   donc l'image entière, centrée, et on comble les côtés avec la même image
   floutée : aucune requête de plus, et rien n'est ni coupé ni déformé. */

.card__media--fit .card__image,
.game__hero--fit .game__image {
    object-fit: contain;
    /* Le fond flouté est en dessous, l'image nette au-dessus des puces. */
    position: relative;
    z-index: 1;
}

.card__backdrop,
.game__backdrop,
.player__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Agrandi pour que le flou ne laisse pas voir les bords de l'image. */
    transform: scale(1.2);
    filter: blur(22px) saturate(1.15) brightness(.7);
    z-index: 0;
    pointer-events: none;
}

/* Sur une carte, le voile de lisibilité du titre doit rester au-dessus des
   deux images, mais sous le titre lui-même (z-index 4). */
.card__media--fit::after { z-index: 2; }
.card__media--fit .card__rating,
.card__media--fit .card__flags { z-index: 3; }

.game__hero--fit {
    position: relative;
    overflow: hidden;
}
.game__hero--fit .game__image {
    width: 100%;
    height: 100%;
}

.player__poster { z-index: 1; }
.player__overlay { z-index: 2; }

/* Le flou est coûteux à peindre sur un grand élément : on l'allège sur les
   écrans où la surface est la plus grande par rapport à la puissance. */
@media (max-width: 720px) {
    .card__backdrop,
    .game__backdrop,
    .player__backdrop {
        filter: blur(14px) brightness(.7);
    }
}

/* ------------------------- Déroulant de catégories ----------------------- */

/* Le panneau se positionne par rapport à .nav, pas à l'entrée elle-même :
   il peut ainsi occuper toute la largeur disponible sous la barre. */

.dropdown > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    color: var(--text-2);
    font-family: var(--ui);
    font-weight: 600;
    font-size: .88rem;
    transition: color .15s;
}
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary:hover,
.dropdown[open] > summary { color: var(--text); }
.dropdown > summary svg { transition: transform .18s ease; }
.dropdown[open] > summary svg { transform: rotate(180deg); }

.dropdown__panel {
    position: absolute;
    /* Aligné sur le bord droit de la navigation : ancré à gauche du déclencheur,
       un panneau de quatre colonnes sortirait de l'écran. */
    right: 0;
    top: calc(100% + 12px);
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: var(--s-5);
    padding: var(--s-5);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.dropdown__label {
    margin: 0 0 var(--s-3);
    font-family: var(--ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--neon);
}

.dropdown__group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dropdown__group li { margin: 0 0 2px; }
.dropdown__group a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--text-2);
    font-size: .84rem;
    white-space: nowrap;
}
.dropdown__group a:hover {
    background: var(--surface-2);
    color: var(--text);
}
.dropdown__count {
    color: var(--text-3);
    font-size: .74rem;
}

/* Sur mobile le déroulant vit déjà dans le panneau replié de l'en-tête : il
   s'y ouvre en pleine largeur plutôt qu'en calque flottant, qui déborderait
   de l'écran. */
@media (max-width: 900px) {
    .dropdown__panel {
        position: static;
        right: auto;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-4);
        padding: var(--s-4) 0 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .dropdown__group a { white-space: normal; }
}
@media (max-width: 560px) {
    .dropdown__panel { grid-template-columns: 1fr; }
}

/* Sélecteur de langue du pied de page : les langues en clair, sans déroulant. */
.langs-inline {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.langs-inline__label {
    font-family: var(--ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
}

.langs-inline ul {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.langs-inline a {
    display: block;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-2);
    font-size: .8rem;
}
.langs-inline a:hover { border-color: var(--neon); color: var(--text); }
.langs-inline a[aria-current] {
    border-color: var(--neon);
    color: var(--text);
    background: var(--surface-2);
}