/*
 * Structure commune du site (bandeau, cartes, formulaires).
 * Les couleurs et polices viennent UNIQUEMENT des variables du thème
 * (fichier public/css/themes/*.css). Un module ne doit pas recopier ce CSS.
 *
 * Largeurs :
 * - téléphone : toute la largeur, avec une petite marge
 * - ordinateur : presque tout l’écran (pas une colonne de tablette au milieu)
 */

* { box-sizing: border-box; }

:root {
    /* Marge gauche/droite : petite au téléphone, plus généreuse sur grand écran. */
    --gouttiere: clamp(1rem, 3vw, 2.5rem);
    /* Jusqu’à ~1920 px on prend toute la fenêtre (avec une petite marge).
       Au-delà (écran ultra-large) on arrête pour ne pas étirer les lignes. */
    --largeur-site: 120rem;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--police-titre);
    background:
        radial-gradient(circle at top right, var(--fond-halo) 0%, transparent 45%),
        var(--papier);
    color: var(--encre);
}

/*
 * Liens du texte : couleur du thème, y compris déjà visités.
 * Sans ça, le navigateur met du bleu / violet (illisibles sur fond sombre).
 * :where() a une priorité nulle, donc .bouton, .tag, etc. gardent leurs couleurs.
 */
:where(a) {
    color: var(--lien, var(--accent));
}

:where(a:visited) {
    color: var(--lien-visite, var(--lien, var(--accent)));
}

body.cookies-ouverts {
    padding-bottom: 9rem;
}

.lien-notif {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pastille {
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bouton-texte);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.liste-sociale {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.liste-sociale li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ligne);
    border-radius: 0.5rem;
    background: var(--carte);
    font-family: var(--police-texte);
}

.liste-sociale li.non-lue {
    border-color: var(--accent);
}

.liste-sociale a {
    color: var(--accent);
    text-decoration: none;
}

.liste-sociale a:hover {
    text-decoration: underline;
}

.liste-sociale form {
    margin: 0;
}

.contribution-champs {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.contribution-avant {
    color: var(--encre-discrete, var(--encre));
    text-decoration: line-through;
}

.contribution-apres {
    color: var(--accent);
    font-weight: 600;
}

/* ── Notifications : liste de lignes simples. Pas de fond coloré (illisible
   sur toute la largeur avec l'accent sombre de ce thème) : seuls la
   pastille et le gras du texte distinguent le non lu. ── */
.liste-notifications {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    border-top: 1px solid var(--ligne);
}

.liste-notifications form {
    margin: 0;
}

.notification {
    border-bottom: 1px solid var(--ligne);
}

/* .lien-bloc.notification-bouton : deux classes, pour l'emporter sur
   « button[type="submit"] » (fond plein var(--accent)) qui s'applique
   sinon aussi ici et rendait toute la ligne marron. */
.lien-bloc.notification-bouton {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
    row-gap: 0.1rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lien-bloc.notification-bouton:hover {
    background: color-mix(in srgb, var(--encre) 5%, transparent);
}

.notification-puce {
    flex: 0 0 auto;
    align-self: center;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: transparent;
}

.notification-non-lue .notification-puce {
    background: var(--accent);
}

.notification-texte {
    color: var(--encre-douce);
}

.notification-non-lue .notification-texte {
    color: var(--encre);
    font-weight: 600;
}

.notification-date {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

/* Logo GOG / Steam / Epic : pastille ronde, posée sur la jaquette (envies) ou sous le formulaire (fiche). */
a.wishlist-gog,
a.wishlist-steam,
a.wishlist-epic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    line-height: 0;
    text-decoration: none;
}

a.wishlist-gog img,
a.wishlist-steam img,
a.wishlist-epic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Le logo Steam est déjà un rond : on le recadre pour remplir la pastille. */
a.wishlist-steam img {
    object-fit: cover;
}

a.wishlist-gog:hover,
a.wishlist-gog:focus-visible,
a.wishlist-steam:hover,
a.wishlist-steam:focus-visible,
a.wishlist-epic:hover,
a.wishlist-epic:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.fiche-panneau a.wishlist-gog,
.fiche-panneau a.wishlist-steam,
.fiche-panneau a.wishlist-epic {
    margin-top: 0.65rem;
}

.etagere-vignette-meta {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--police-texte);
    font-size: 0.75rem;
    color: var(--encre-douce);
}

.badge-visibilite {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--encre-douce);
}

.actions-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin: 0 0 1.25rem;
}

.formulaire-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.formulaire-compact select,
.formulaire-compact input[type="date"],
.formulaire-compact input[type="text"] {
    width: auto;
    min-width: 8rem;
}

.formulaire-etagere {
    margin-top: 1rem;
    max-width: none;
}

.fiche-etagere-titre {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.meta-profil {
    margin: 0.25rem 0 0;
    font-family: var(--police-texte);
    color: var(--encre-douce);
}

.profil-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.profil-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--champ);
    flex-shrink: 0;
}

.profil-entete-texte {
    min-width: 0;
}

form.formulaire.formulaire-reseaux {
    max-width: 42rem;
}

.reseau-champ {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
    gap: 0.6rem;
    align-items: start;
}

.reseaux-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0.6rem 0 0;
}

.reseau-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.45rem;
    color: var(--encre);
    line-height: 0;
    text-decoration: none;
}

.reseau-logo:hover,
.reseau-logo:focus-visible {
    color: var(--accent);
}

.reseau-logo-svg {
    display: block;
}

.reseau-logo-gog {
    border-radius: 50%;
    object-fit: contain;
}

@media (max-width: 40rem) {
    .reseau-champ {
        grid-template-columns: 1fr;
    }
}

button.lien-bloc {
    display: grid;
    gap: 0.2rem;
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.carte h3 {
    margin: 1rem 0 0.4rem;
    font-size: 1rem;
}

/* Même largeur pour le menu et le contenu : ça aligne tout. */
.bandeau,
.page {
    width: min(100%, var(--largeur-site));
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

.bandeau-fond {
    border-bottom: 1px solid var(--ligne);
    background: var(--carte);
}

.onglets-modules-fond {
    border-bottom: 1px solid var(--ligne);
    background: var(--papier);
}

.onglets-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
    width: min(100%, var(--largeur-site));
    margin-inline: auto;
    padding: 0.55rem var(--gouttiere);
}

.onglet-module {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    color: var(--encre);
    text-decoration: none;
    font-family: var(--police-texte);
    font-size: 0.85rem;
}

.onglet-module:hover {
    text-decoration: none;
    border-color: var(--onglet, var(--accent));
}

.onglet-module.actif {
    border-color: var(--onglet, var(--accent));
    color: var(--onglet, var(--accent));
    font-weight: 600;
}

.onglet-point {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--onglet, var(--accent));
    flex: none;
}

.bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    font-family: var(--police-texte);
    font-size: 0.9rem;
}

.bandeau a {
    color: var(--accent);
    text-decoration: none;
}

.bandeau a:hover { text-decoration: underline; }

.bandeau a.marque {
    color: var(--encre);
    font-family: var(--police-titre);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
}

.bandeau a.marque:hover { text-decoration: none; color: var(--accent); }

.bandeau-identite {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bandeau-icone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: transparent;
    color: var(--encre);
    cursor: pointer;
}

.bandeau a.bandeau-icone,
.bandeau .bandeau-icone {
    color: var(--encre);
    text-decoration: none;
}

.bandeau a.bandeau-icone:hover,
.bandeau .bandeau-icone:hover,
.bandeau .bandeau-icone.actif {
    text-decoration: none;
    border-color: var(--accent);
    color: var(--accent);
}

.bandeau-icone .pastille {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
}

.bandeau-lien-icone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    color: var(--encre);
    text-decoration: none;
    white-space: nowrap;
}

.bandeau a.bandeau-lien-icone {
    color: var(--encre);
}

.bandeau a.bandeau-lien-icone:hover,
.bandeau a.bandeau-lien-icone.actif {
    text-decoration: none;
    border-color: var(--accent);
    color: var(--accent);
}

.menu-bandeau {
    position: relative;
}

.menu-bandeau > summary {
    list-style: none;
}

.menu-bandeau > summary::-webkit-details-marker,
.menu-bandeau > summary::marker {
    display: none;
    content: none;
}

.menu-bandeau > summary.lien-menu {
    cursor: pointer;
    color: var(--accent);
    font: inherit;
}

.bandeau .menu-bandeau > summary.lien-menu:hover,
.bandeau .menu-bandeau > summary.lien-menu.actif {
    color: var(--onglet, var(--accent));
    text-decoration: underline;
    font-weight: 600;
}

.menu-bandeau-liste {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 40;
    min-width: 12.5rem;
    padding: 0.35rem 0;
    border: 1px solid var(--ligne);
    border-radius: 0.5rem;
    background: var(--carte);
    box-shadow: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.12);
}

.menu-bandeau-droite .menu-bandeau-liste {
    left: auto;
    right: 0;
}

.menu-bandeau-liste a,
.menu-bandeau-liste button.lien {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.9rem;
    border: 0;
    background: none;
    color: var(--encre);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.bandeau .menu-bandeau-liste a,
.bandeau .menu-bandeau-liste button.lien {
    color: var(--encre);
}

.bandeau .menu-bandeau-liste a:hover,
.bandeau .menu-bandeau-liste button.lien:hover {
    background: var(--papier);
    text-decoration: none;
}

.menu-bandeau-sep {
    height: 1px;
    margin: 0.35rem 0;
    background: var(--ligne);
}

/* Bouton « trois traits » : caché sur ordinateur (les liens sont déjà là). */
.menu-principal-bouton {
    display: none;
}

.bandeau-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.1rem;
    align-items: center;
    margin-left: auto;
}

.bandeau-liens > a.actif {
    color: var(--onglet, var(--accent));
    font-weight: 600;
    text-decoration: underline;
}

/* ─── Bouton bascule mode édition / mode lecture ─── */

/*
    Le formulaire est inline dans la nav : on retire toutes les marges par défaut
    pour qu'il s'intègre comme un simple lien.
*/
.mode-edition-form {
    display: contents;
}

/*
    Apparence de base : ressemble à un lien de nav, discret.
    En mode lecture (pas actif), l'icône œil et le texte "Lecture" sont affichés.
*/
.mode-edition-bouton {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: transparent;
    color: var(--encre-douce);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.mode-edition-bouton:hover {
    background: var(--champ);
    color: var(--encre);
}

/*
    Mode édition ACTIF : le bouton se colore avec la couleur d'accent (même que les boutons),
    pour que l'admin sache clairement qu'il est en mode édition.
*/
.mode-edition-bouton.mode-edition-actif {
    background: var(--accent);
    color: var(--bouton-texte);
    border-color: var(--accent);
}

.mode-edition-bouton.mode-edition-actif:hover {
    opacity: 0.88;
}

/* ─── Fin bouton mode édition ─── */

.langues {
    display: flex;
    gap: 0.35rem;
    margin-left: 0.25rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.langues a {
    padding: 0.1rem 0.25rem;
}

.langues a.actif {
    font-weight: 700;
    text-decoration: underline;
    color: var(--encre);
}

.recherche-bandeau {
    display: flex;
    flex: 1 1 14rem;
    gap: 0.35rem;
    align-items: center;
    min-width: min(100%, 14rem);
    max-width: 32rem;
}

.recherche-champ {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.recherche-bandeau input[type="search"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 2.3rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.9rem;
}

/* Bouton loupe : rond, même hauteur que le champ pour un alignement net.
   margin: 0 annule la règle « header .bouton » (espacement des boutons
   sous un titre de page), qui s'applique aussi ici puisque la barre de
   recherche est elle-même dans le <header> du site. */
.recherche-bandeau .bouton-recherche {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    justify-self: auto;
    width: 2.3rem;
    height: 2.3rem;
    margin: 0;
    padding: 0;
    border-radius: 50%;
}

.recherche-bandeau .bouton-recherche .bandeau-icone-svg {
    width: 1.1rem;
    height: 1.1rem;
}

.bandeau button.lien {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}

.bandeau button.lien:hover { text-decoration: underline; }

.page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

header p.eyebrow {
    margin: 0 0 0.75rem;
    font-family: var(--police-texte);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.55rem, 4vw, 3.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    overflow-wrap: break-word;
}

.compte-raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.compte-raccourcis a {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--carte);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 1.05rem;
    text-decoration: none;
}

.compte-raccourcis a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.titre-alternatif {
    margin: -0.35rem 0 0.85rem;
    font-size: 1.05rem;
    color: var(--encre-douce);
}

.acronyme {
    margin: -0.35rem 0 0.65rem;
    font-family: var(--police-texte);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.titres-autres {
    margin: -0.25rem 0 0.85rem;
    max-width: 42rem;
    font-size: 0.95rem;
    color: var(--encre-douce);
}

/* Un paragraphe trop large est difficile à lire : on limite le texte, pas la page. */
.lead {
    margin: 0 0 2rem;
    max-width: 42rem;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--encre-douce);
}

.presentation {
    max-width: 42rem;
    margin: 0 0 2.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.presentation p {
    margin: 0 0 1rem;
}

.presentation p:last-child {
    margin-bottom: 0;
}

.cartes {
    display: grid;
    gap: 1rem;
    /* 1 colonne au téléphone, plusieurs dès qu’il y a de la place. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.chiffre-stat,
article.carte p.chiffre-stat {
    margin: 0.35rem 0 0;
    font-size: 1.8rem;
    font-weight: 600;
    font-family: var(--police-titre);
    color: var(--encre);
    line-height: 1.2;
}

/* Tableau de bord admin : un bloc (chiffres, tableau, outils) après l’autre. */
.bloc-admin {
    margin-top: 2.25rem;
}

.bloc-admin > h2 {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
}

.bloc-admin > .lead {
    margin-bottom: 1.1rem;
}

article.carte p.chiffre-stat + .aide,
article.carte p.aide + p.aide {
    margin-top: 0.35rem;
}

.vues-affichage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    align-items: center;
    margin: 0 0 1.1rem;
    font-family: var(--police-texte);
}

.recherche-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 1.1rem;
    font-family: var(--police-texte);
}

.recherche-liste .recherche-champ {
    flex: 1 1 14rem;
    max-width: 28rem;
}

.recherche-liste input[type="search"] {
    width: 100%;
}

.recherche-liste .bouton {
    justify-self: auto;
}

a.recherche-effacer {
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
}

a.recherche-effacer:hover {
    text-decoration: underline;
}

.vues-libelle {
    margin-right: 0.25rem;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

a.vues-choix {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--carte);
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
}

a.vues-choix.actif,
a.vues-choix:hover {
    background: var(--onglet, var(--accent));
    border-color: var(--onglet, var(--accent));
    color: var(--bouton-texte);
}

.filtre-lettres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.25rem;
    align-items: center;
    margin: 0 0 1.1rem;
    font-family: var(--police-texte);
}

a.filtre-lettre {
    display: inline-flex;
    min-width: 1.55rem;
    justify-content: center;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--ligne);
    border-radius: 0.3rem;
    background: var(--carte);
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
}

a.filtre-lettre.actif,
a.filtre-lettre:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bouton-texte);
}

.fiches-affiches {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr));
}

.fiche-affiche {
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.fiche-affiche img,
.fiche-affiche-vide {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--champ);
}

.fiche-affiche-visuel {
    position: relative;
    display: block;
}

.fiche-affiche-badge-papier {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 3;
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--encre) 25%, transparent);
    background: color-mix(in srgb, var(--carte) 92%, white 8%);
    color: color-mix(in srgb, var(--encre) 85%, black 15%);
    box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.fiche-affiche-badge-papier .bandeau-icone-svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Nombre d’exemplaires en surimpression (uniquement si plus d’une copie). */
.fiche-affiche-quantite {
    position: absolute;
    bottom: 0.35rem;
    right: 0.35rem;
    z-index: 3;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--encre) 25%, transparent);
    background: color-mix(in srgb, var(--carte) 92%, white 8%);
    color: color-mix(in srgb, var(--encre) 85%, black 15%);
    box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.22);
    font-family: var(--police-texte);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}

/* Moyenne presse d'un jeu, en surimpression en haut à gauche de l'affiche. */
.fiche-affiche-note {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    z-index: 3;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 88%, var(--carte) 12%);
    color: var(--bouton-texte);
    box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.22);
    font-family: var(--police-texte);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.fiche-affiche-visuel img,
.fiche-affiche-visuel .fiche-affiche-vide {
    border-radius: 0.3rem;
}

/* Numéro juste sous la couverture, à gauche (magazines). */
.fiche-affiche-numero {
    display: block;
    margin-top: 0.35rem;
    text-align: left;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

/* Bulle au survol : numéro, mois année, pages. */
.fiche-affiche-bulle {
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    top: 0.35rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.35rem;
    background: rgb(0 0 0 / 0.82);
    color: #fff;
    font-family: var(--police-texte);
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.fiche-affiche:hover .fiche-affiche-bulle,
.fiche-affiche:focus-visible .fiche-affiche-bulle {
    opacity: 1;
    visibility: visible;
}

.fiche-affiche-annee {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.fiches-liste {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-top: 1px solid var(--ligne);
}

.fiche-ligne {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    padding: 0.45rem 0.15rem;
    border-bottom: 1px solid var(--ligne);
    text-decoration: none;
    color: inherit;
    font-family: var(--police-texte);
}

.fiche-ligne.avec-exemplaires {
    grid-template-columns: 3rem minmax(0, 1fr) auto auto;
}

.fiche-ligne:hover {
    color: var(--accent);
}

.fiche-ligne img,
.fiche-ligne-vide {
    display: block;
    width: 3rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.2rem;
    background: var(--champ);
}

.fiche-ligne-titre {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fiche-ligne-annee {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--encre-douce);
    font-variant-numeric: tabular-nums;
}

.fiche-ligne-exemplaires {
    min-width: 2.2rem;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}

.pagination-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 0.85rem 0 1.1rem;
    font-family: var(--police-texte);
}

.pagination-etat {
    margin: 0;
    font-size: 0.85rem;
    color: var(--encre-douce);
}

.pagination-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

a.pagination-choix,
button.pagination-choix,
span.pagination-choix {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--ligne);
    border-radius: 0.35rem;
    background: var(--carte);
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
}

a.pagination-choix:hover,
button.pagination-choix:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bouton-texte);
}

span.pagination-choix.inactif {
    color: var(--encre-douce);
    opacity: 0.55;
    cursor: default;
}

span.pagination-choix.actuel {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bouton-texte);
    font-weight: 600;
}

.pagination-ellipse {
    padding: 0.3rem 0.15rem;
    color: var(--encre-douce);
}

.pagination-saut {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.pagination-saut-libelle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0;
    font-size: 0.85rem;
    color: var(--encre-douce);
}

.pagination-saut input[type="number"] {
    width: 4.2rem;
    padding: 0.25rem 0.4rem;
}

.pagination-saut-bouton {
    cursor: pointer;
    font-family: inherit;
}

.recherche-section {
    margin: 0 0 1.75rem;
}

.recherche-section > h2 {
    margin: 0 0 0.7rem;
    font-size: 1.15rem;
}

.recherche-compte {
    font-family: var(--police-texte);
    font-weight: 400;
    color: var(--encre-douce);
    font-size: 0.9rem;
}

.recherche-liens {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ligne);
}

.recherche-liens li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0.15rem;
    border-bottom: 1px solid var(--ligne);
    font-family: var(--police-texte);
}

.recherche-liens a {
    color: var(--accent);
    text-decoration: none;
}

.recherche-liens a:hover {
    text-decoration: underline;
}

.recherche-detail,
.recherche-tronque {
    font-size: 0.85rem;
    color: var(--encre-douce);
}

.recherche-tronque {
    margin: 0.6rem 0 0;
}

.recherche-suggestions {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
    min-width: 0;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--carte);
    box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.18);
    max-height: min(22rem, 70vh);
    overflow-y: auto;
}

.recherche-suggestion {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font-family: var(--police-texte);
}

.recherche-suggestion.actif,
.recherche-suggestion:hover {
    background: var(--champ);
}

.recherche-suggestion img,
.recherche-suggestion-vide {
    display: block;
    width: 2.1rem;
    height: 2.8rem;
    object-fit: cover;
    border-radius: 0.2rem;
    background: var(--champ);
}

.recherche-suggestion-texte {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.recherche-suggestion-titre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--encre);
}

.recherche-suggestion-detail {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.recherche-suggestion-tous {
    display: block;
    border-top: 1px solid var(--ligne);
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    color: var(--accent);
    font-size: 0.85rem;
}

.recherche-suggestion-simple {
    grid-template-columns: minmax(0, 1fr);
}

.formulaire .recherche-champ {
    display: block;
    flex: none;
    min-width: 0;
}

.formulaire .recherche-suggestions {
    min-width: 100%;
}

.recherche-suggestions.recherche-suggestions-longues {
    max-height: min(40rem, 80vh);
}

.mention-suggestions {
    position: fixed;
    z-index: 60;
    width: 20rem;
    max-width: calc(100vw - 1.5rem);
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--carte);
    box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.18);
    max-height: min(24rem, 70vh);
    overflow-y: auto;
}

article.carte,
.carte {
    background: var(--carte);
    border: 1px solid var(--ligne);
    border-radius: 0.6rem;
    padding: 1.15rem 1.25rem;
}

article.carte h2,
.carte h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

article.carte p,
.carte p {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--encre-douce);
}

form.formulaire {
    display: grid;
    gap: 1rem;
    font-family: var(--police-texte);
    /* Un formulaire n’a pas besoin d’occuper 1600 px de large. */
    max-width: 36rem;
}

label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.champ-bundle {
    display: grid;
    gap: 0.35rem;
}

.case-bundle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}

.case-bundle input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
}

.champ-bundle-membres {
    display: none;
}

.champ-bundle:has(input[name="est_un_bundle"]:checked) .champ-bundle-membres {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
input[type="url"],
input[type="date"],
input[type="search"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--champ);
    font: inherit;
    color: var(--encre);
}

textarea { min-height: 6rem; resize: vertical; }

.succes {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--carte);
    color: var(--accent);
    font-family: var(--police-texte);
    font-size: 0.9rem;
}

/* Sur téléphone, le tableau défile horizontalement au lieu de casser la page. */
.carte:has(table.tableau) {
    overflow-x: auto;
}

table.tableau {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-family: var(--police-texte);
    font-size: 0.9rem;
}

table.tableau th,
table.tableau td {
    text-align: left;
    padding: 0.55rem 0.4rem;
    border-bottom: 1px solid var(--ligne);
    vertical-align: middle;
}

table.tableau th {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-douce);
}

table.tableau-stats {
    min-width: 20rem;
}

table.tableau-stats .nombre,
table.tableau-stats th.nombre {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.tableau tfoot th {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    color: var(--encre);
}

.formulaire-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.formulaire-ligne select { width: auto; min-width: 10rem; }

code {
    font-size: 0.85em;
}

.aide {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.erreurs {
    margin: 0 0 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--fond-erreur);
    color: var(--erreur);
    font-family: var(--police-texte);
    font-size: 0.9rem;
}

.erreurs ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

.souvenir {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}

button[type="submit"],
.bouton {
    justify-self: start;
    padding: 0.55rem 1.1rem;
    border: 0;
    border-radius: 0.4rem;
    background: var(--accent);
    color: var(--bouton-texte);
    font: inherit;
    cursor: pointer;
}

.bouton-secondaire {
    justify-self: start;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--carte);
    color: var(--encre);
    font: inherit;
    cursor: pointer;
}

.bouton-danger {
    background: var(--erreur);
    color: #fff;
}

a.bouton-danger-lien,
button.bouton-danger-lien {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--erreur);
    border-radius: 0.4rem;
    background: transparent;
    color: var(--erreur);
    text-decoration: none;
    text-align: center;
    font: inherit;
    cursor: pointer;
}

a.bouton-danger-lien:hover,
button.bouton-danger-lien:hover {
    background: var(--erreur);
    color: #fff;
}

.wikipedia-rejeter {
    margin-top: 1rem;
}

.wikipedia-rejeter .aide {
    margin-top: 0.35rem;
}

.wikipedia-restaurer-bloc {
    margin-top: 1rem;
}

.wikipedia-restaurer-bloc .liste-simple {
    margin: 0.5rem 0 1rem;
    padding-left: 1.2rem;
}

.wikipedia-restaurer-bloc code {
    font-size: 0.9em;
}

.tableau-fiches-cadre {
    overflow-x: auto;
    max-width: 100%;
    margin: 0 0 1rem;
}

table.tableau-fiches {
    min-width: 48rem;
}

table.tableau-fiches th.tableau-fiches-titre,
table.tableau-fiches td.tableau-fiches-titre {
    min-width: 12rem;
    overflow: hidden;
}

table.tableau-fiches td.tableau-fiches-annee {
    width: 1%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--encre-douce);
}

table.tableau-fiches th {
    vertical-align: top;
    white-space: nowrap;
}

table.tableau-fiches th a {
    color: var(--accent);
    text-decoration: none;
}

table.tableau-fiches th a:hover {
    text-decoration: underline;
}

.tableau-fiches-coche {
    width: 2.2rem;
    text-align: center;
    vertical-align: middle;
}

.tableau-fiches-coche input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
}

.actions-lot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0 0 0.85rem;
}

.actions-lot .bouton,
.actions-lot .bouton-secondaire {
    margin-bottom: 0;
}

.actions-lot-aide {
    font-family: var(--police-texte);
    font-size: 0.85rem;
    color: var(--encre-douce);
}

.actions-lot-tout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--police-texte);
    font-size: 0.9rem;
    cursor: pointer;
}

.actions-lot-tout input,
.coche-lot input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.fiche-affiche-cadre.avec-coche,
article.carte.avec-coche {
    position: relative;
}

.fiche-affiche-cadre.avec-coche .coche-lot {
    position: absolute;
    z-index: 1;
    top: 0.3rem;
    left: 0.3rem;
}

article.carte.avec-coche .coche-lot {
    position: absolute;
    z-index: 1;
    top: 0.7rem;
    right: 0.7rem;
}

.fiche-ligne-cadre.avec-coche {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--ligne);
}

.fiche-ligne-cadre.avec-coche .fiche-ligne {
    border-bottom: none;
}

.liste-lot {
    margin: 0;
    padding-left: 1.2rem;
    font-family: var(--police-texte);
    line-height: 1.6;
}

.tri-selon {
    display: block;
    margin-top: 0.35rem;
}

.tri-selon select {
    width: auto;
    max-width: 11rem;
    padding: 0.2rem 0.35rem;
    font-size: 0.8rem;
}

.tableau-fiches-oeuvre {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.tableau-fiches-nom {
    min-width: 0;
    overflow-wrap: break-word;
}

.tableau-fiches-oeuvre:hover,
a.tableau-fiches-nom:hover {
    color: var(--accent);
}

.tableau-fiches-oeuvre img,
.tableau-fiches-vide {
    display: block;
    width: 2.4rem;
    height: 3.2rem;
    object-fit: cover;
    border-radius: 0.2rem;
    background: var(--champ);
}

.tableau-fiches-type {
    display: block;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.pied-site {
    border-top: 1px solid var(--ligne);
    background: var(--carte);
}

.pied-site-inner {
    width: min(100%, var(--largeur-site));
    margin-inline: auto;
    padding: 1rem var(--gouttiere) 1.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
    font-family: var(--police-texte);
    font-size: 0.8rem;
}

.pied-site a,
.pied-site button.lien {
    color: var(--encre-douce);
    text-decoration: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.pied-site a:hover,
.pied-site button.lien:hover {
    color: var(--accent);
    text-decoration: underline;
}

.page-legale {
    max-width: 46rem;
    font-family: var(--police-texte);
}

.page-legale h2 {
    margin: 2rem 0 0.6rem;
    font-size: 1.15rem;
}

.page-legale p,
.page-legale li {
    line-height: 1.55;
    color: var(--encre-douce);
}

.page-legale ul {
    padding-left: 1.2rem;
}

.page-legale a {
    color: var(--accent);
}

.carte-danger {
    margin-top: 2.5rem;
}

.carte-danger p {
    margin-bottom: 1rem;
}

.bandeau-cookies {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem var(--gouttiere) 1.15rem;
    border-top: 1px solid var(--ligne);
    background: var(--carte);
    font-family: var(--police-texte);
    box-shadow: 0 -0.6rem 1.4rem rgb(0 0 0 / 0.08);
}

.bandeau-cookies-contenu {
    width: min(100%, var(--largeur-site));
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
}

.bandeau-cookies-titre {
    margin: 0 0 0.35rem;
    font-family: var(--police-titre);
    font-size: 1rem;
    font-weight: 600;
}

.bandeau-cookies p {
    margin: 0;
    max-width: 44rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--encre-douce);
}

.bandeau-cookies a {
    color: var(--accent);
}

.bandeau-cookies-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.bandeau-cookies-actions .lien {
    border: 0;
    background: none;
    padding: 0.35rem 0.2rem;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}

.bandeau-cookies-details {
    width: min(100%, var(--largeur-site));
    margin: 0.9rem auto 0;
    display: grid;
    gap: 0.55rem;
    font-size: 0.9rem;
}

.bandeau-cookies[hidden],
.bandeau-cookies-details[hidden] {
    display: none;
}

.renvoi {
    margin-top: 1.25rem;
    font-family: var(--police-texte);
    font-size: 0.9rem;
    color: var(--encre-douce);
}

.renvoi a { color: var(--accent); }

.renvoi-haut {
    margin-top: 0;
    margin-bottom: 1.1rem;
}

.jaquette {
    display: block;
    width: 100%;
    max-width: 16rem;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0.35rem;
    background: var(--champ);
}

.jaquette-vide {
    min-height: 12rem;
}

.jaquette-liste {
    max-width: 8rem;
    margin-bottom: 0.75rem;
    aspect-ratio: auto;
}

/*
 * Logo / portrait d'une fiche crédit : on garde les proportions du fichier.
 * Les logos d'entreprise sont souvent en paysage ; on ne les force pas en 3/4.
 */
.logo-credit {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 12rem;
    object-fit: contain;
    object-position: center left;
    background: transparent;
}

.logo-entreprise {
    max-width: 16rem;
    max-height: 8rem;
}

.fiche-colonne .logo-credit {
    margin-bottom: 1.15rem;
}

.couverture-premier-libelle {
    margin: 0 0 0.45rem;
    font-family: var(--police-texte);
    font-size: 0.85rem;
    color: var(--encre-douce);
}

.formulaire-couverture {
    margin-top: 0.65rem;
    max-width: 16rem;
}

.formulaire-couverture button {
    width: 100%;
}

/* Fiche entreprise : plus grand que les tuiles, calé sur la colonne gauche. */
.fiche-visuel .logo-entreprise {
    max-width: 16rem;
    max-height: 8rem;
}

/* Tuiles de la liste entreprises : même taille compacte, pour ne pas remplir la carte. */
.logo-credit-liste.logo-entreprise {
    max-width: 8rem;
    max-height: 4rem;
}

.logo-personne {
    max-width: 12rem;
    max-height: 16rem;
}

/* Tuiles compactes (onglet Personnalités d’une entreprise). */
.tuiles-personnes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.85rem 0.65rem;
    margin: 0;
    padding: 0;
}

.tuile-personne {
    margin: 0;
    text-align: center;
}

.tuile-personne-lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}

.tuile-personne-lien:hover .tuile-personne-nom,
.tuile-personne-lien:focus-visible .tuile-personne-nom {
    color: var(--lien, var(--accent));
}

.tuile-personne-photo {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: color-mix(in srgb, var(--encre) 12%, var(--carte));
}

.tuile-personne-photo-vide {
    border: 1px solid var(--ligne);
    background: color-mix(in srgb, var(--encre) 14%, var(--carte));
}

.tuile-personne-nom {
    font-family: var(--police-texte);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--encre);
}

.tuile-personne-annees {
    font-family: var(--police-texte);
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--encre-douce);
}

.logo-credit-liste {
    margin-bottom: 0.75rem;
}

.fiche-visuel {
    min-width: 0;
}

.fiche-oeuvre {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 48rem) {
    .fiche-oeuvre {
        grid-template-columns: 16rem minmax(0, 1fr);
        align-items: start;
    }
}

.fiche-oeuvre .carte + .carte {
    margin-top: 1rem;
}

.fiche-colonne .actions-fiche {
    margin-top: 0.85rem;
    flex-direction: column;
    align-items: stretch;
}

.fiche-colonne .actions-fiche .bouton,
.fiche-colonne .actions-fiche .bouton-secondaire {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

.fiche-titre-ligne {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.fiche-titre {
    margin: 0.15rem 0 0.35rem;
    color: var(--accent);
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    line-height: 1.15;
}

/* Moyenne presse d'un jeu, en bulle tout à droite de la ligne du titre. */
.fiche-note-presse {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 0.15rem;
    border-radius: 999px;
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--carte));
    color: var(--accent);
    font-family: var(--police-titre);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fiche-annee {
    color: var(--encre-douce);
    font-weight: 400;
    white-space: nowrap;
}

.fiche-saga {
    margin: 0.2rem 0 1rem;
    font-family: var(--police-texte);
    font-size: 0.95rem;
}

.fiche-saga a {
    color: var(--accent);
    text-decoration: none;
}

.fiche-saga a:hover {
    text-decoration: underline;
}

.fiche-details-titre {
    margin: 0.5rem 0 0.85rem;
    font-size: 1.15rem;
}

.fiche-details {
    display: grid;
    gap: 0 2rem;
}

@media (min-width: 40rem) {
    .fiche-details {
        grid-template-columns: 1fr 1fr;
    }
}

.fiche-detail {
    margin: 0 0 0.95rem;
}

.fiche-detail-libelle {
    margin-bottom: 0.3rem;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.fiche-detail-valeur {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
    font-family: var(--police-texte);
}

.fiche-detail-lien {
    color: var(--encre);
    text-decoration: none;
}

.fiche-detail-lien:hover {
    color: var(--accent);
    text-decoration: underline;
}

.fiche-corps .description-oeuvre {
    margin-top: 0.5rem;
    color: var(--encre-douce);
}

/*
 * Classeur des collections sur le profil.
 * Chaque onglet (label) et sa page (page de garde) sont côte à côte dans le HTML ;
 * flex order range les onglets en barre, puis la page active en dessous.
 */
.profil-classeur {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: flex-end;
    margin-top: 0.75rem;
}

.profil-onglet-etiquette {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--ligne);
    border-bottom: none;
    border-radius: 0.55rem 0.55rem 0 0;
    background: color-mix(in srgb, var(--carte) 85%, var(--fond));
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
}

.profil-onglet-etiquette:hover {
    border-color: var(--onglet, var(--accent));
}

.fiche-onglet-input:checked + .profil-onglet-etiquette {
    background: var(--carte);
    border-color: var(--onglet, var(--accent));
    color: var(--onglet, var(--accent));
    font-weight: 600;
    z-index: 1;
}

.profil-onglet-page {
    order: 2;
    flex: 1 1 100%;
    display: none;
    margin-top: -1px;
    padding: 1.1rem 1rem 1.25rem;
    border: 1px solid var(--ligne);
    border-radius: 0 0.55rem 0.55rem 0.55rem;
    background: var(--carte);
}

.fiche-onglet-input:checked + .profil-onglet-etiquette + .profil-onglet-page {
    display: block;
}

.profil-visibilite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.profil-onglet-page .etagere-entete {
    margin-top: 0;
}

.profil-onglet-page .accueil-section-titre {
    font-size: 1.15rem;
}

/* Classeur à onglets (fiche jeu, entreprise, matériel…).
 * Chaque trio input + étiquette + panneau est un onglet.
 * Les étiquettes se regroupent en haut (order 1), le panneau ouvert en dessous (order 2).
 */
.fiche-classeur {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 0.35rem;
    margin-top: 0.75rem;
}

.fiche-onglet-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fiche-onglet-etiquette {
    order: 1;
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--carte);
    color: var(--accent);
    font-family: var(--police-texte);
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
}

.fiche-onglet-input:checked + .fiche-onglet-etiquette {
    background: var(--onglet, var(--accent));
    border-color: var(--onglet, var(--accent));
    color: var(--bouton-texte);
}

.fiche-onglet-panneau {
    order: 2;
    flex: 1 1 100%;
    display: none;
    padding-top: 0.65rem;
    margin-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}

.fiche-onglet-input:checked + .fiche-onglet-etiquette + .fiche-onglet-panneau {
    display: block;
}

.fiche-onglet-panneau .galerie-section {
    margin-top: 0;
}

.fiche-onglet-panneau .galerie-section h2 {
    margin-top: 0;
}

.fiche-onglet-panneau .fichiers-jeu {
    margin-top: 0;
}

/* Grande frise des consoles : une colonne CSS = une année.
 * Le nombre de colonnes est posé en inline (repeat(21, …)), pas via var(). */
.chrono-materiel {
    margin: 0 0 1.75rem;
}

.chrono-materiel h2 {
    margin: 0 0 0.35rem;
}

.chrono-cadre {
    width: 100%;
    margin: 0.85rem 0 0;
    padding: 0.75rem 0.85rem 0.9rem;
    border: 1px solid var(--ligne);
    border-radius: 0.85rem;
    background: var(--carte);
}

.chrono-entete,
.chrono-piste {
    display: grid;
    grid-template-columns: 9rem minmax(12rem, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: 100%;
}

.chrono-entete {
    margin-bottom: 0.35rem;
}

.chrono-entete-vide {
    display: block;
}

.chrono-grille {
    display: grid;
    /* Les colonnes viennent du style inline : repeat(N, minmax(0, 1fr)) */
    width: 100%;
    min-width: 0;
}

.chrono-grille-echelle {
    align-items: end;
    min-height: 1.25rem;
    border-bottom: 1px solid var(--ligne);
    padding-bottom: 0.2rem;
}

.chrono-annee {
    font-family: var(--police-texte);
    font-size: 0.72rem;
    color: var(--encre-douce);
    white-space: nowrap;
    line-height: 1;
}

.chrono-annee-debut {
    justify-self: start;
}

.chrono-annee-milieu {
    justify-self: center;
}

.chrono-annee-fin {
    justify-self: end;
}

.chrono-grille-occupation {
    height: 0.45rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--encre) 8%, transparent);
}

.chrono-occupation-cellule {
    display: block;
    height: 100%;
    background: var(--accent);
}

.chrono-pistes {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    width: 100%;
}

.chrono-piste {
    min-height: 1.9rem;
    margin: 0 0 0.4rem;
}

.chrono-piste:last-child {
    margin-bottom: 0;
}

.chrono-nom {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--police-texte);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--encre);
    text-decoration: none;
}

.chrono-nom:hover,
.chrono-nom:visited {
    color: var(--lien, var(--accent));
}

.chrono-grille-voie {
    align-items: center;
    min-height: 1.9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--encre) 6%, transparent);
}

.chrono-barre {
    --chrono-couleur: var(--accent);
    display: block;
    height: 1.35rem;
    margin: 0.2rem 0;
    border: 2px solid var(--chrono-couleur);
    border-radius: 999px;
    background: color-mix(in srgb, var(--chrono-couleur) 42%, var(--carte));
    text-decoration: none;
    min-width: 0;
}

.chrono-barre:hover,
.chrono-barre:focus-visible {
    background: color-mix(in srgb, var(--chrono-couleur) 58%, var(--carte));
    outline: 2px solid var(--chrono-couleur);
    outline-offset: 1px;
}

.chrono-barre-c1 { --chrono-couleur: #c45c26; }
.chrono-barre-c2 { --chrono-couleur: #1f7a6c; }
.chrono-barre-c3 { --chrono-couleur: #4f46a8; }
.chrono-barre-c4 { --chrono-couleur: #b45309; }
.chrono-barre-c5 { --chrono-couleur: #1d4ed8; }
.chrono-barre-c6 { --chrono-couleur: #9d174d; }
.chrono-barre-c7 { --chrono-couleur: #3f6212; }
.chrono-barre-c8 { --chrono-couleur: #0f766e; }

.chrono-barre-ouverte {
    background: repeating-linear-gradient(
        -55deg,
        color-mix(in srgb, var(--chrono-couleur) 42%, var(--carte)),
        color-mix(in srgb, var(--chrono-couleur) 42%, var(--carte)) 6px,
        color-mix(in srgb, var(--chrono-couleur) 20%, var(--carte)) 6px,
        color-mix(in srgb, var(--chrono-couleur) 20%, var(--carte)) 12px
    );
}

@media (max-width: 40rem) {
    .chrono-entete,
    .chrono-piste {
        grid-template-columns: 5.5rem minmax(8rem, 1fr);
        gap: 0.45rem;
    }

    .chrono-nom {
        font-size: 0.78rem;
    }

    .chrono-annee {
        font-size: 0.65rem;
    }
}

.credits-oeuvre-onglet {
    margin-top: 1.5rem;
}

.credits-oeuvre-onglet h2 {
    margin-top: 0;
}

/* Jaquettes de boîte dans l'onglet Fichiers. */
.jaquettes-jeu-onglet {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}

.jaquettes-jeu-onglet .jaquettes-jeu-titre {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.liste-credits {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-family: var(--police-texte);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--encre-douce);
}

.description-oeuvre {
    margin: 0;
    white-space: pre-wrap;
}

.tags-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
    margin: 0 0 0.75rem;
    font-family: var(--police-texte);
}

/* Badge matériel sur le profil : nom seul ; état + descriptif au survol. */
.materiel-tag {
    position: relative;
}

.materiel-tag-infobulle {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.4rem);
    z-index: 5;
    min-width: 8rem;
    max-width: 16rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.35rem;
    background: rgb(0 0 0 / 0.88);
    color: #fff;
    font-family: var(--police-texte);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.materiel-tag-infobulle-ligne {
    display: block;
}

.materiel-tag-infobulle-ligne + .materiel-tag-infobulle-ligne {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgb(255 255 255 / 0.25);
}

.materiel-tag:hover .materiel-tag-infobulle,
.materiel-tag:focus-visible .materiel-tag-infobulle {
    opacity: 1;
    visibility: visible;
}

.tags-ligne-centree {
    justify-content: center;
}

.tags-libelle {
    font-size: 0.8rem;
    color: var(--encre-douce);
    margin-right: 0.15rem;
}

a.tag,
span.tag {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--carte);
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
}

a.tag:hover {
    background: var(--accent);
    color: var(--bouton-texte);
}

/* Plateforme / genres : pastille pleine. Modes / thèmes : pastille cerclée. */
a.tag-plein {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bouton-texte);
}

a.tag-plein:hover {
    filter: brightness(1.08);
}

a.tag-contour {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.galerie-section {
    margin: 1.75rem 0 0;
}

.galerie-section h2 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}

.galerie-jaquettes {
    display: flex;
    justify-content: safe center;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.15rem 0.15rem 0.6rem;
}

.galerie-item {
    position: relative;
    flex: 0 0 5.6rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.galerie-item img,
.galerie-vide {
    display: block;
    width: 5.6rem;
    height: 7.5rem;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--champ);
    border: 2px solid transparent;
    opacity: 0.55;
    filter: grayscale(0.35);
}

.galerie-item.actuel img,
.galerie-item.actuel .galerie-vide {
    opacity: 1;
    filter: none;
    border-color: var(--accent);
}

/* Connecté : possédé en couleur, manquant en noir et blanc. */
.galerie-item.possede img,
.galerie-item.possede .galerie-vide {
    opacity: 1;
    filter: none;
}

.galerie-item.manquant img,
.galerie-item.manquant .galerie-vide {
    opacity: 0.9;
    filter: grayscale(1);
}

.galerie-item.possede.actuel img,
.galerie-item.possede.actuel .galerie-vide,
.galerie-item.manquant.actuel img,
.galerie-item.manquant.actuel .galerie-vide {
    border-color: var(--accent);
}

/* Page saga (et listes) : même code couleur que les galeries de fiche. */
.fiche-affiche.possede img,
.fiche-affiche.possede .fiche-affiche-vide,
.fiche-ligne.possede img,
.fiche-ligne.possede .fiche-ligne-vide,
.carte.possede .jaquette-liste {
    filter: none;
    opacity: 1;
}

.fiche-affiche.manquant img,
.fiche-affiche.manquant .fiche-affiche-vide,
.fiche-ligne.manquant img,
.fiche-ligne.manquant .fiche-ligne-vide,
.carte.manquant .jaquette-liste {
    filter: grayscale(1);
    opacity: 0.9;
}

.galerie-annee,
.galerie-numero {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.galerie-numero {
    text-align: left;
}

.galerie-autres-supports,
.saga-autres-supports {
    margin-top: 0.85rem;
}

.galerie-autres-supports > summary,
.saga-autres-supports > summary {
    display: inline-block;
    list-style: none;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--carte);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 0.9rem;
    cursor: pointer;
}

.galerie-autres-supports > summary::-webkit-details-marker,
.saga-autres-supports > summary::-webkit-details-marker,
.galerie-autres-supports > summary::marker,
.saga-autres-supports > summary::marker {
    display: none;
    content: none;
}

.galerie-autres-supports[open] > summary,
.saga-autres-supports[open] > summary {
    margin-bottom: 0.85rem;
}

/* ─── Galerie centrée sur l'opus courant (saga / numéros de magazine) ─── */

.galerie-centree-section {
    margin: 1.75rem 0 0;
}

/*
    La bande principale : boutons nav + liste de jaquettes.
    On utilise flex pour que les boutons soient collés à la liste.
*/
.galerie-centree-bande {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
    La liste de jaquettes : centrée, défilable si nécessaire.
    justify-content: center place l'actuel au milieu sur les écrans larges.
*/
.galerie-centree-liste {
    display: flex;
    justify-content: safe center;
    align-items: flex-start;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.5rem 0.25rem 0.75rem;
    flex: 1;
    scroll-snap-type: x mandatory;
}

/*
    Chaque item : taille identique à la galerie normale,
    avec scroll-snap pour aider le défilement tactile.
*/
.galerie-centree-item {
    position: relative;
    flex: 0 0 5.6rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: center;
}

.galerie-centree-item::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 7.5rem;
    border-radius: 0.3rem;
    border: 3px solid transparent;
    pointer-events: none;
    transition: border-color 0.15s;
}

.galerie-centree-item img,
.galerie-centree-vide {
    display: block;
    width: 5.6rem;
    height: 7.5rem;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--champ);
    opacity: 0.55;
    filter: grayscale(0.35);
    transition: opacity 0.15s;
}

/* L'opus actuellement consulté : liseré de la couleur des boutons, bien visible */
.galerie-centree-item.actuel img,
.galerie-centree-item.actuel .galerie-centree-vide {
    opacity: 1;
    filter: none;
}

.galerie-centree-item.actuel::after {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

/* Connecté : possédé en couleur normale */
.galerie-centree-item.possede img,
.galerie-centree-item.possede .galerie-centree-vide {
    opacity: 1;
    filter: none;
}

/* Connecté : manquant en noir et blanc */
.galerie-centree-item.manquant img,
.galerie-centree-item.manquant .galerie-centree-vide {
    opacity: 0.9;
    filter: grayscale(1);
}

/* Liseré + halo même si l'opus possédé/manquant est l'actuel */
.galerie-centree-item.possede.actuel::after,
.galerie-centree-item.manquant.actuel::after {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

/*
    Boutons de navigation (◁ / ▷) vers l'opus précédent / suivant
    quand la saga dépasse les 11 opus affichés.
*/
.galerie-centree-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--carte);
    border: 1px solid var(--ligne);
    color: var(--encre);
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s;
    flex-shrink: 0;
}

.galerie-centree-nav:hover {
    background: var(--champ);
}

/* ── Responsive ── */

/*
    Tablette (≤ 700 px) : on réduit la taille des jaquettes ET on ne montre
    que 3 items de chaque côté de l'actuel (7 au total).
    Le sélecteur [data-index-actuel="N"] [data-index="M"] permet de cibler
    chaque item selon sa distance à l'actuel.
*/
@media (max-width: 700px) {
    .galerie-centree-item {
        flex-basis: 4.5rem;
    }

    .galerie-centree-item::after {
        height: 6rem;
    }

    .galerie-centree-item img,
    .galerie-centree-vide {
        width: 4.5rem;
        height: 6rem;
    }

    /* On cache les items à plus de 3 positions de l'actuel.
       actuel=0 → visibles 0-3, actuel=1 → visibles 0-4, etc. */
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="0"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="1"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="2"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="3"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="4"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="5"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="6"] {
        display: none;
    }
}

/*
    Smartphone (≤ 480 px) : encore plus petit, 1 seul item de chaque côté
    (l'actuel + 1 avant + 1 après = 3 au total).
*/
@media (max-width: 480px) {
    .galerie-centree-item {
        flex-basis: 3.8rem;
    }

    .galerie-centree-item::after {
        height: 5rem;
    }

    .galerie-centree-item img,
    .galerie-centree-vide {
        width: 3.8rem;
        height: 5rem;
    }

    .galerie-centree-nav {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 1rem;
    }

    /* On ne garde qu'1 item de chaque côté (distance max = 1). */
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="0"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="1"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="2"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="3"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="4"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="5"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="6"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="7"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="8"] {
        display: none;
    }
}

/* ─── Fin galerie centrée ─── */

.credits-oeuvre {
    margin: 2rem 0 1.5rem;
}

.credits-oeuvre h2 {
    margin: 0 0 0.85rem;
    font-size: 1.15rem;
}

.credits-oeuvre-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
}

.credits-oeuvre-lien {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--encre);
    text-decoration: none;
    font-family: var(--police-texte);
}

.credits-oeuvre-lien:hover {
    color: var(--accent);
    text-decoration: underline;
}

.credits-oeuvre-portrait {
    width: 2.5rem;
    height: 2.5rem;
    max-width: 2.5rem;
    max-height: 2.5rem;
    object-fit: cover;
    border-radius: 50%;
}

.liaisons-credit {
    margin-top: 1.5rem;
}

.liaisons-credit .formulaire {
    margin-top: 1rem;
}

.liste-liens-credit {
    list-style: none;
    margin: 0.75rem 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.liste-liens-credit li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.liste-liens-credit form {
    margin: 0;
}

/* Texte présent dans la page (tests, lecteurs d'écran) mais invisible à l'écran. */
.lecteur-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Champ piège anti-robot : décalé hors de l'écran (pas display:none,
 * trop facile à détecter). Un humain ne le voit pas.
 */
.piege-miel {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.verif-anti-robot {
    display: grid;
    gap: 0.5rem;
}

.verif-anti-robot .aide {
    margin: 0;
}

altcha-widget {
    display: block;
}

.source-donnee {
    display: block;
    margin: 0.45rem 0 0;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

article.carte h2 a {
    color: inherit;
    text-decoration: none;
}

article.carte h2 a:hover {
    color: var(--accent);
    text-decoration: underline;
}

header p .bouton,
header .bouton {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.actions-fiche {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.actions-fiche form {
    margin: 0;
}

header .actions-fiche .bouton,
header .actions-fiche .bouton-secondaire {
    margin-bottom: 0;
}

.liste-fusion {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.liste-fusion a {
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ligne);
    border-radius: 0.5rem;
    background: var(--carte);
    color: var(--accent);
    text-decoration: none;
}

.liste-fusion a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bouton-texte);
}

footer.pied {
    margin-top: 2.5rem;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

/* Écrans étroits : menu en bouton, recherche en dessous, tableaux admin encore défilables. */
@media (max-width: 40rem) {
    .bandeau {
        position: relative;
        font-size: 0.85rem;
    }

    .bandeau-identite {
        order: 1;
    }

    .menu-principal-bouton {
        display: inline-flex;
        order: 3;
        margin-left: auto;
    }

    .bandeau-lien-icone {
        order: 2;
    }

    .recherche-bandeau {
        flex: 1 1 100%;
        max-width: none;
        order: 4;
    }

    /*
     * Les liens (Encyclopédie, Mes jeux…) se rangent dans un panneau,
     * pour ne plus s’empiler en vrac sous le logo.
     */
    .bandeau-liens {
        display: none;
        position: absolute;
        top: 100%;
        right: var(--gouttiere);
        z-index: 45;
        min-width: 14rem;
        max-width: min(20rem, calc(100vw - 2rem));
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0.4rem 0 0;
        padding: 0.35rem 0;
        border: 1px solid var(--ligne);
        border-radius: 0.5rem;
        background: var(--carte);
        box-shadow: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.12);
    }

    .menu-principal-etat:checked ~ .bandeau-liens {
        display: flex;
    }

    .bandeau-liens > a,
    .bandeau-liens > .menu-bandeau > summary.lien-menu {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.55rem 0.9rem;
        color: var(--encre);
        text-decoration: none;
        font-weight: 400;
    }

    .bandeau .bandeau-liens > a,
    .bandeau .bandeau-liens > .menu-bandeau > summary.lien-menu {
        color: var(--encre);
    }

    .bandeau-liens > a:hover,
    .bandeau-liens > a.actif,
    .bandeau-liens > .menu-bandeau > summary.lien-menu:hover,
    .bandeau-liens > .menu-bandeau > summary.lien-menu.actif {
        background: var(--papier);
        text-decoration: none;
    }

    .bandeau-liens .langues {
        margin: 0.2rem 0 0;
        padding: 0.45rem 0.9rem 0.55rem;
        border-top: 1px solid var(--ligne);
    }

    .bandeau-liens .menu-bandeau-liste {
        position: static;
        min-width: 0;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0 0 0.35rem;
    }

    /* Les listes de jeux ont leur propre mise en page (plus bas). Les autres tableaux défilent. */
    table.tableau:not(.tableau-fiches) {
        min-width: 28rem;
    }

    .bandeau-cookies-actions {
        width: 100%;
    }

    .bandeau-cookies-actions .bouton,
    .bandeau-cookies-actions .bouton-secondaire {
        flex: 1 1 8rem;
        text-align: center;
        margin-bottom: 0;
    }

    .formulaire-compact input[type="text"],
    .formulaire-compact input[type="date"],
    .formulaire-compact select {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
    }

    .pagination-liste {
        flex-direction: column;
        align-items: flex-start;
    }

    /*
     * Liste simple (sans colonnes) : l'année passe sous le titre,
     * plus de chevauchement sur un nom long.
     */
    .fiche-ligne {
        grid-template-columns: 3rem minmax(0, 1fr);
        align-items: start;
    }

    .fiche-ligne img,
    .fiche-ligne-vide {
        grid-row: 1 / 3;
    }

    .fiche-ligne-titre {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .fiche-ligne-annee {
        grid-column: 2;
    }

    .fiche-ligne.avec-exemplaires {
        grid-template-columns: 3rem minmax(0, 1fr) auto;
    }

    .fiche-ligne.avec-exemplaires .fiche-ligne-exemplaires {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}

.fiche-temps-jeu {
    margin: 0.85rem 0 0.15rem;
    font-family: var(--police-texte);
    text-align: center;
    cursor: pointer;
}

.fiche-temps-jeu-libelle {
    display: block;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.fiche-temps-jeu strong {
    font-size: 1.15rem;
}

.fiche-temps-jeu:hover strong,
.fiche-outil-temps:checked ~ .fiche-temps-jeu strong {
    color: var(--accent);
}

.fiche-temps-sources {
    list-style: none;
    margin: 0.35rem 0 0.9rem;
    padding: 0;
    font-family: var(--police-texte);
    font-size: 0.9rem;
    color: var(--encre-douce);
    text-align: center;
}

.fiche-temps-sources li {
    margin: 0.15rem 0;
}

.fiche-plateformes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.7rem 0 0;
}

.fiche-plateforme {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    font-family: var(--police-texte);
    font-size: 0.75rem;
    color: var(--encre-douce);
}

.fiche-outils {
    margin-top: 0.35rem;
}

.fiche-icones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.15rem;
    margin: 0.65rem 0 0.2rem;
}

.fiche-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    color: var(--encre);
    cursor: pointer;
    line-height: 0;
}

.fiche-icone:hover,
.fiche-icone.actif,
.fiche-outil-ressenti:checked ~ .fiche-icones .fiche-icone-ressenti,
.fiche-outil-temps:checked ~ .fiche-icones .fiche-icone-temps,
.fiche-outil-copies:checked ~ .fiche-icones .fiche-icone-copies,
.fiche-outil-statut:checked ~ .fiche-icones .fiche-icone-statut,
.fiche-outil-collection:checked ~ .fiche-icones .fiche-icone-collection,
.fiche-outil-envie:checked ~ .fiche-icones .fiche-icone-envie {
    color: var(--accent);
}

.fiche-icone-svg {
    display: block;
}

.fiche-panneau {
    display: none;
    margin-top: 0.75rem;
}

.fiche-outil-ressenti:checked ~ .fiche-panneaux > .panneau-ressenti,
.fiche-outil-temps:checked ~ .fiche-panneaux > .panneau-temps,
.fiche-outil-copies:checked ~ .fiche-panneaux > .panneau-copies,
.fiche-outil-statut:checked ~ .fiche-panneaux > .panneau-statut,
.fiche-outil-collection:checked ~ .fiche-panneaux > .panneau-collection,
.fiche-outil-envie:checked ~ .fiche-panneaux > .panneau-envie {
    display: block;
}

.fiche-panneau-fermer {
    margin: 0.65rem 0 0;
    text-align: center;
    font-family: var(--police-texte);
    font-size: 0.85rem;
}

.fiche-panneau-fermer label {
    display: inline;
    color: var(--accent);
    cursor: pointer;
}

.fiche-exemplaires,
.fiche-seances {
    list-style: none;
    margin: 0.4rem 0 0.75rem;
    padding: 0;
    font-family: var(--police-texte);
    font-size: 0.85rem;
    color: var(--encre-douce);
}

.fiche-exemplaires li,
.fiche-seances li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    align-items: center;
    justify-content: space-between;
    margin: 0.25rem 0;
}

.fiche-linux {
    margin: 0.15rem 0 0.5rem;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.fiche-copie-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.fiche-copie-modifier {
    min-width: 0;
}

.fiche-copie-modifier summary {
    display: inline;
    cursor: pointer;
    color: var(--accent);
    font-size: 0.85rem;
}

.fiche-copie-modifier[open] {
    flex: 1 1 100%;
}

.fiche-copie-modifier .form-copie-une {
    margin-top: 0.5rem;
}

.form-copie-une .bloc-format-physique,
.form-copie-une .bloc-magasin-pc {
    display: none;
}

.form-copie-une:has(.copie-kind-physique:checked) .bloc-format-physique {
    display: block;
}

.form-copie-une:has(.copie-kind-demat:checked) .bloc-magasin-pc {
    display: block;
}

.fiche-bibliotheque {
    margin-top: 0.85rem;
}

.ressenti-boutons,
.statut-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ressenti-boutons button,
.statut-boutons button {
    flex: 1 1 auto;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    text-align: center;
}

.ressenti-boutons .bouton-secondaire,
.statut-boutons .bouton-secondaire {
    background: var(--carte);
    color: var(--encre);
    border: 1px solid var(--ligne);
}

.champs-duree {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.formulaire-etagere .bouton-secondaire {
    background: var(--carte);
    color: var(--encre);
    border: 1px solid var(--ligne);
}

/*
 * Boîte de dialogue « mes exemplaires » : cases à cocher, Linux et magasins PC
 * n'apparaissent que si c'est pertinent (CSS :has, sans JavaScript).
 */
.fiche-form-copie {
    display: grid;
    gap: 0.75rem;
}

.copie-groupe {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.copie-groupe legend {
    padding: 0;
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

.copie-exemplaires {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
}

.copie-sous-titre {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.copie-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.copie-case {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--police-texte);
}

.copie-case input[type="checkbox"],
.copie-case input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    flex: none;
    accent-color: var(--accent);
}

.copie-demat-ligne {
    margin-top: 0.7rem;
}

.copie-cases-indent {
    margin: 0.35rem 0 0 1.45rem;
}

.bloc-linux,
.bloc-magasins-pc {
    display: none;
}

.fiche-form-copie:has(.plateforme-pc:checked) .bloc-linux,
.fiche-form-copie.sans-tags .bloc-linux {
    display: block;
}

.fiche-form-copie:has(.plateforme-pc:checked):has(.copie-demat:checked) .bloc-magasins-pc,
.fiche-form-copie.sans-tags:has(.copie-demat:checked) .bloc-magasins-pc {
    display: block;
}

/* Étagère perso : liste, vignettes, bibliothèque (tranches). */
.etagere-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.etagere-entete .bouton {
    margin-bottom: 0.35rem;
}

/* ─── Page d'accueil d'un module (jeux, magazines…) ─── */

/* Liens de navigation (Voir la collection / Statistiques) dans l'en-tête */
.accueil-nav-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Chaque section (stats, activité, ajouts, envies) */
.accueil-section {
    margin: 2rem 0 0;
    text-align: center;
}

.accueil-section-titre {
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
}

/* ── Statistiques : rangée de cartes chiffres, centrées ── */
.accueil-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.accueil-stat {
    text-align: center;
    padding: 1rem 1.5rem;
    min-width: 9rem;
}

.accueil-stat-chiffre {
    margin: 0 0 0.2rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}

.accueil-stat-libelle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--encre-douce);
}

a.accueil-stat-lien {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

a.accueil-stat-lien:hover {
    border-color: var(--accent);
}

/* ── Rangée de jaquettes (activité, ajouts, envies) ──
   Même taille que les galeries de saga (5.6 rem), centrées. */
.accueil-jaquettes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.accueil-jaquette-lien {
    flex: 0 0 5.6rem;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.accueil-jaquette-lien img,
.accueil-jaquette-vide {
    display: block;
    width: 5.6rem;
    height: 7.5rem;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--champ);
}

.accueil-jaquette-lien:hover img {
    opacity: 0.85;
}

.accueil-jaquette-titre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--encre-douce);
}

.accueil-jaquette-date {
    display: block;
    font-size: 0.72rem;
    color: var(--encre-douce);
    opacity: 0.7;
}

/* ── Responsive ── */

@media (max-width: 700px) {
    .accueil-jaquette-lien {
        flex-basis: 4.5rem;
    }

    .accueil-jaquette-lien img,
    .accueil-jaquette-vide {
        width: 4.5rem;
        height: 6rem;
    }
}

@media (max-width: 480px) {
    .accueil-jaquette-lien {
        flex-basis: 3.8rem;
    }

    .accueil-jaquette-lien img,
    .accueil-jaquette-vide {
        width: 3.8rem;
        height: 5rem;
    }

    .accueil-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Fin page d'accueil module ─── */

/* Bouton « Ajouter un jeu » : le champ de recherche s'ouvre juste en dessous. */
.ajout-rapide {
    position: relative;
    flex-shrink: 0;
}

.ajout-rapide > summary {
    list-style: none;
}

.ajout-rapide > summary::-webkit-details-marker,
.ajout-rapide > summary::marker {
    display: none;
    content: none;
}

.ajout-rapide-panneau {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.4rem);
    right: 0;
    width: min(32rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid var(--ligne);
    border-radius: 0.5rem;
    background: var(--carte);
    box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.18);
}

.ajout-rapide-recherche {
    display: block;
    margin: 0;
}

.ajout-rapide-panneau .aide {
    margin: 0.4rem 0 0.75rem;
}

.ajout-rapide-choisi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin: 0 0 0.85rem;
}

.ajout-rapide-choisi-titre {
    margin: 0;
    font-weight: 600;
}

.ajout-rapide-choisi button.lien {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
}

.ajout-rapide-choisi button.lien:hover {
    text-decoration: underline;
}

.ajout-rapide-panneau .fiche-form-copie {
    margin-bottom: 0.85rem;
}

@media (max-width: 40rem) {
    .ajout-rapide {
        flex: 1 1 100%;
    }

    .ajout-rapide-panneau {
        position: static;
        width: auto;
        margin-top: 0.65rem;
        box-shadow: none;
    }
}

.etagere-tri {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    align-items: center;
    margin: 0 0 0.85rem;
    font-family: var(--police-texte);
    font-size: 0.85rem;
}

.etagere-tri a {
    color: var(--accent);
    text-decoration: none;
}

.etagere-tri a.actif,
.etagere-tableau th a.actif {
    color: var(--onglet, var(--accent));
    font-weight: 600;
}

.etagere-tableau tbody tr {
    scroll-margin-top: 4.5rem;
}

.etagere-mini-jaquette,
.etagere-mini-vide {
    display: block;
    width: 2.4rem;
    height: 3.2rem;
    object-fit: cover;
    border-radius: 0.2rem;
    background: var(--champ);
}

.etagere-tag {
    display: inline-block;
    margin: 0.1rem 0.15rem 0.1rem 0;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--onglet, var(--accent)) 22%, transparent);
    color: var(--encre);
    font-size: 0.75rem;
}

.etagere-col-actions {
    width: 2.6rem;
    text-align: center;
}

.etagere-poubelle {
    display: inline-flex;
    margin: 0;
}

.etagere-poubelle .bandeau-icone {
    width: 1.55rem;
    height: 1.55rem;
    border-width: 1px;
    color: var(--encre-douce);
    background: color-mix(in srgb, var(--fond) 90%, transparent);
}

.etagere-poubelle .bandeau-icone:hover {
    color: var(--erreur);
    border-color: var(--erreur);
}

.etagere-vignettes {
    display: grid;
    gap: 0.85rem 0.7rem;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

/* Envies : chaque tuile s'étire à la hauteur de la plus haute de la grille. */
.etagere-vignettes:has(.etagere-vignette-envie) {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.etagere-vignette {
    position: relative;
    scroll-margin-top: 4.5rem;
}

.etagere-vignette a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.etagere-vignette img,
.etagere-vignette-vide {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--champ);
}

.etagere-vignette-titre {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--police-texte);
    font-size: 0.85rem;
    overflow-wrap: break-word;
}

/* Tuile d'envie : hauteur identique, avec ou sans lien GOG / Steam / Epic. */
.etagere-vignette-envie {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.etagere-vignette-envie .etagere-vignette-titre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.25;
    min-height: calc(2 * 1.25em);
}

.etagere-vignette-envie .etagere-vignette-meta {
    min-height: 1.15em;
}

.etagere-vignette-boutiques {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* Une ligne GOG, une ligne Steam, une ligne Epic : même place vide ou remplie. */
.etagere-vignette-boutique-ligne {
    display: flex;
    align-items: center;
    min-height: 1.25rem;
    width: 100%;
}

.etagere-vignette-gog,
.etagere-vignette-steam {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.etagere-vignette-epic {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    flex-shrink: 0;
}

.etagere-vignette a.etagere-vignette-gog,
.etagere-vignette a.etagere-vignette-steam,
.etagere-vignette a.etagere-vignette-epic {
    display: flex;
}

.etagere-vignette a.etagere-vignette-gog:hover,
.etagere-vignette a.etagere-vignette-gog:focus-visible {
    text-decoration: none;
}

.etagere-vignette a.etagere-vignette-steam:hover,
.etagere-vignette a.etagere-vignette-steam:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    text-decoration: none;
}

.etagere-vignette a.etagere-vignette-epic:hover,
.etagere-vignette a.etagere-vignette-epic:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    text-decoration: none;
}

.etagere-vignette-gog .wishlist-gog-inline,
.etagere-vignette-steam .wishlist-steam-inline,
.etagere-vignette-epic .wishlist-epic-inline {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.etagere-vignette-prix {
    display: inline;
    margin: 0;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.etagere-vignette a.etagere-vignette-gog:hover .etagere-vignette-prix,
.etagere-vignette a.etagere-vignette-gog:focus-visible .etagere-vignette-prix,
.etagere-vignette a.etagere-vignette-steam:hover .etagere-vignette-prix,
.etagere-vignette a.etagere-vignette-steam:focus-visible .etagere-vignette-prix {
    text-decoration: underline;
}

.etagere-vignette-prix s {
    color: var(--encre-douce);
    margin-right: 0.35rem;
    font-weight: 400;
}

.etagere-vignette-prix.en-promo {
    color: var(--accent);
}

.etagere-vignette-retrait {
    margin-top: auto;
    padding-top: 0.4rem;
}

.etagere-vignette-retrait .bouton-secondaire {
    width: 100%;
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
}

.etagere-vignette .etagere-poubelle {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    z-index: 1;
}

.etagere-poubelle-bouton .bandeau-icone-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.etagere-biblio {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.2rem 0.28rem;
    padding: 1.4rem 1rem 0.7rem;
    border-radius: 0.4rem;
    background:
        linear-gradient(#0000 0 82%, color-mix(in srgb, var(--encre) 18%, #4a321c) 82% 86%, #3a2716 86%),
        repeating-linear-gradient(90deg, #5a3c22 0 12px, #4a3018 12px 13px);
}

.etagere-tranche-bloc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    scroll-margin-top: 4.5rem;
}

.etagere-tranche {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 1.85rem;
    height: 11rem;
    padding: 0.4rem 0.15rem;
    border-radius: 0.15rem 0.15rem 0 0;
    background-color: var(--carte);
    background-size: cover;
    background-position: center;
    color: #f4efe4;
    text-decoration: none;
    box-shadow: inset -0.25rem 0 0.4rem rgba(0, 0, 0, 0.35);
}

.etagere-tranche-titre {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--police-texte);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    max-height: 10rem;
    overflow: hidden;
    text-shadow: 0 0 0.35rem #000, 0 0 0.2rem #000;
}

.etagere-tranche-apercu {
    display: none;
    position: absolute;
    left: 2.1rem;
    bottom: 0;
    z-index: 5;
    width: 7.5rem;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0.25rem;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.45);
}

.etagere-tranche:hover .etagere-tranche-apercu,
.etagere-tranche:focus .etagere-tranche-apercu {
    display: block;
}

/* Téléphone : pas de survol, l’aperçu au passage de souris ne servirait à rien. */
@media (hover: none) {
    .etagere-tranche-apercu {
        display: none !important;
    }
}

/*
 * Tablette et téléphone : les listes de jeux (encyclopédie + étagère)
 * ne sont plus un tableau trop large. Chaque ligne devient une petite carte :
 * jaquette + nom à gauche, année à droite, le reste en dessous avec son libellé.
 */
@media (max-width: 48rem) {
    .tableau-fiches-cadre {
        overflow-x: visible;
    }

    table.tableau-fiches {
        min-width: 0;
        width: 100%;
    }

    table.tableau-fiches,
    table.tableau-fiches tbody {
        display: block;
    }

    /* Les titres de colonnes deviennent des boutons de tri, comme en mode vignettes. */
    table.tableau-fiches thead {
        display: block;
        margin: 0 0 0.75rem;
    }

    table.tableau-fiches thead tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.45rem;
        align-items: center;
        padding: 0;
        border: 0;
    }

    table.tableau-fiches thead th {
        display: block;
        padding: 0;
        border: 0;
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.85rem;
        color: var(--encre);
    }

    table.tableau-fiches thead th:not(:has(a)):not(.tableau-fiches-coche) {
        display: none;
    }

    table.tableau-fiches thead th a {
        display: inline-block;
        padding: 0.2rem 0.7rem;
        border: 1px solid var(--ligne);
        border-radius: 999px;
        background: var(--carte);
        color: var(--accent);
        text-decoration: none;
        font-weight: 400;
    }

    table.tableau-fiches thead th a:hover,
    table.tableau-fiches thead th a.actif,
    table.tableau-fiches thead th a:has(span) {
        background: var(--onglet, var(--accent));
        border-color: var(--onglet, var(--accent));
        color: var(--bouton-texte);
    }

    table.tableau-fiches .tri-selon {
        display: none;
    }

    table.tableau-fiches tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        column-gap: 0.65rem;
        row-gap: 0.2rem;
        align-items: start;
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--ligne);
    }

    table.tableau-fiches td {
        border: 0;
        padding: 0.12rem 0;
        min-width: 0;
        overflow-wrap: break-word;
    }

    table.tableau-fiches td.tableau-fiches-coche {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        padding-top: 0.9rem;
    }

    table.tableau-fiches td.etagere-col-jaquette {
        grid-column: 1;
        grid-row: 1 / span 8;
    }

    table.tableau-fiches td.tableau-fiches-titre {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    /* Encyclopédie : la jaquette est déjà dans la case titre, on lui laisse plus de place. */
    table.tableau-fiches:not(.etagere-tableau) td.tableau-fiches-titre {
        grid-column: 1 / 3;
    }

    table.tableau-fiches:not(.etagere-tableau) td.tableau-fiches-coche + td.tableau-fiches-titre {
        grid-column: 2;
    }

    table.tableau-fiches td.tableau-fiches-annee {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        padding-top: 0.35rem;
        text-align: right;
        color: var(--encre-douce);
    }

    table.tableau-fiches td.etagere-col-actions {
        grid-column: 4;
        grid-row: 1;
        width: auto;
        padding-top: 0.15rem;
    }

    table.tableau-fiches td.tableau-meta {
        grid-column: 2 / -1;
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: 0.35rem 0.6rem;
        align-items: baseline;
        font-size: 0.85rem;
    }

    table.tableau-fiches td.tableau-meta::before {
        content: attr(data-label);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--encre-douce);
    }

    /* Case vide : on ne montre pas une ligne « Genre : » sans rien derrière. */
    table.tableau-fiches td.tableau-meta-vide {
        display: none;
    }

    table.tableau-fiches th.tableau-fiches-titre,
    table.tableau-fiches td.tableau-fiches-titre {
        min-width: 0;
    }
}

.materiel-resume {
    margin: 0 0 1rem;
}

.materiel-resume > h2,
.materiel-titre {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 0.9rem;
    font-weight: 600;
}

.materiel-entete {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    list-style: none;
}

.materiel-entete::-webkit-details-marker,
.materiel-entete::marker {
    display: none;
    content: none;
}

.materiel-crayon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    color: var(--encre-douce);
}

.materiel-entete:hover .materiel-crayon,
.materiel-modifier[open] > .materiel-entete .materiel-crayon {
    color: var(--accent);
}

.materiel-crayon .fiche-icone-svg {
    width: 1.05rem;
    height: 1.05rem;
}

.materiel-possede {
    margin: 0.4rem 0 0;
}

.materiel-panneau {
    margin-top: 0.7rem;
}

.materiel-vide {
    margin: 0 0 1rem;
    font-family: var(--police-texte);
    font-size: 0.9rem;
    color: var(--encre-douce);
}

.materiel-panneau .aide {
    margin: 0 0 0.85rem;
}

.materiel-panneau .bouton {
    margin-top: 0.85rem;
    margin-bottom: 0;
}

.materiel-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}

.materiel-case {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--champ);
    font-family: var(--police-texte);
    font-size: 0.9rem;
    cursor: pointer;
}

.materiel-case input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--accent);
}

.materiel-case:has(input:checked) {
    border-color: var(--accent);
    color: var(--accent);
}

.modules-compacts {
    display: grid;
    gap: 0.65rem;
}

.module-ligne {
    border: 1px solid var(--ligne);
    border-radius: 0.55rem;
    background: var(--carte);
    overflow: hidden;
}

.module-ligne-entete {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    cursor: pointer;
}

.module-ligne-entete::-webkit-details-marker,
.module-ligne-entete::marker {
    display: none;
    content: none;
}

.module-ligne-titre {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--police-texte);
    font-weight: 600;
}

.module-ligne-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.module-interrupteur {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.module-interrupteur input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.module-interrupteur-piste {
    position: relative;
    width: 2.3rem;
    height: 1.3rem;
    border-radius: 999px;
    border: 1px solid var(--ligne);
    background: var(--champ);
    transition: background 0.15s, border-color 0.15s;
}

.module-interrupteur-piste::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--encre-douce);
    transition: transform 0.15s, background 0.15s;
}

.module-interrupteur input:checked + .module-interrupteur-piste {
    background: color-mix(in srgb, var(--accent) 25%, var(--carte));
    border-color: var(--accent);
}

.module-interrupteur input:checked + .module-interrupteur-piste::after {
    transform: translateX(1rem);
    background: var(--accent);
}

.module-interrupteur-texte {
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.module-reglages-bouton {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.module-ligne[open] .module-reglages-bouton {
    border-color: var(--accent);
    color: var(--accent);
}

.module-ligne-reglages {
    display: grid;
    gap: 0.75rem;
    padding: 0 0.8rem 0.8rem;
    border-top: 1px solid var(--ligne);
}

/* Articles d'un numéro (tests, interviews, jeux offerts…). */
.articles-magazine {
    margin-top: 1.5rem;
}

.articles-magazine h2 {
    margin: 1.25rem 0 0.35rem;
}

.formulaire-article {
    margin-top: 1.25rem;
}

.formulaire-article button.lien {
    margin-left: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* Fichiers annexes d'un jeu (notice PDF, traduction ZIP). */
.fichiers-jeu {
    margin-top: 1.5rem;
}

.fichiers-jeu h2 {
    margin: 1.25rem 0 0.35rem;
}

.fichiers-jeu-liste {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.fichier-jeu-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.65rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--carte) 96%, transparent);
}

.fichier-jeu-type {
    font-weight: 600;
    min-width: 5.5rem;
}

.fichier-jeu-retirer {
    margin-left: auto;
}

.formulaire-fichier-jeu {
    margin-top: 1rem;
}

/* Jaquettes de boîte (colonne gauche, jeux vidéo). */
.jaquettes-jeu-colonne {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}

.jaquettes-jeu-titre {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.jaquettes-jeu .fichiers-jeu-liste {
    margin-top: 0.35rem;
}

.jaquette-lien {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.jaquette-lien:hover .jaquette-titre,
.jaquette-lien:focus-visible .jaquette-titre {
    text-decoration: underline;
}

.jaquette-carte {
    align-items: flex-start;
}

.jaquette-vignette {
    width: 3.6rem;
    height: 4.8rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--champ);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 14%, transparent);
}

.jaquette-vignette-vide {
    display: block;
}

.jaquette-meta {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-left: 4.25rem;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--encre) 70%, transparent);
}

.jaquette-meta:empty {
    display: none;
}

.jaquette-langue {
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    font-size: 0.72rem;
    font-weight: 600;
}

.formulaire-jaquette-jeu {
    margin-top: 0.5rem;
}

.bande-articles {
    margin: 0.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bande-articles-rangee {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    min-width: 0;
}

.bande-articles-rangee-seule {
    display: block;
}

.bande-articles-libelle {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    margin: 0.15rem 0 0;
    padding: 0.45rem 0.55rem 0.45rem 0.6rem;
    font-family: var(--police-texte);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre);
    background: var(--champ);
    border: 1px solid var(--ligne);
    border-left: 3px solid var(--accent);
    border-radius: 0 0.35rem 0.35rem 0;
}

.bande-articles-libelle-tri {
    padding: 0;
    overflow: hidden;
}

.bande-articles-tri {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.55rem 0.45rem 0.6rem;
    font: inherit;
    text-align: left;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.bande-articles-tri:hover,
.bande-articles-tri:focus-visible {
    background: var(--carte);
    outline: none;
}

.bande-articles-tri[aria-pressed="true"] {
    color: var(--accent);
}

.bande-articles-compte {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    opacity: 0.72;
}

.bande-articles-liste {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0.15rem 0 0.4rem;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.vignette-article {
    width: 5.75rem;
    flex: 0 0 auto;
}

.vignette-article:has(.vignette-article-meta.en-edition) {
    width: auto;
    min-width: 5.75rem;
    max-width: min(12.5rem, 100%);
    z-index: 2;
}

.vignette-article-absente .vignette-article-jaquette,
.vignette-article-absente .vignette-article-lettre {
    filter: grayscale(100%);
    opacity: 0.88;
}

.vignette-article-carte {
    position: relative;
    margin: 0;
}

.vignette-article-lien {
    display: block;
    line-height: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 0.35rem;
}

.vignette-article-jaquette,
.vignette-article-lettre {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 0.35rem;
    border: 1px solid var(--ligne);
    background: var(--champ);
}

.vignette-article-lettre {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--police-texte);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--encre-douce);
}

.vignette-article-lien:hover .vignette-article-jaquette,
.vignette-article-lien:focus-visible .vignette-article-jaquette {
    border-color: var(--accent);
}

.vignette-article-meta {
    margin-top: 0.35rem;
    min-height: 1.5rem;
}

.vignette-article-meta-vue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.vignette-article-meta.en-edition .vignette-article-meta-vue {
    display: none;
}

.vignette-article-form-meta {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.vignette-article-meta.en-edition .vignette-article-form-meta {
    display: flex;
}

.vignette-article-page,
.vignette-article-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    padding: 0.14rem 0.4rem;
    font-family: var(--police-texte);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    border: 1px solid var(--ligne);
    background: var(--champ);
}

.vignette-article-note {
    border-color: color-mix(in srgb, #c9a227 45%, var(--ligne));
    background: color-mix(in srgb, #c9a227 14%, var(--carte));
}

.mention-magazine-revue {
    margin: 0.35rem 0 0;
    font-family: var(--police-texte);
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--encre);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-magazine-numero {
    display: block;
    color: var(--encre-douce);
}

.fiche-onglet-panneau .mentions-magazines {
    margin-top: 0;
}

.vignette-article-crayon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    min-height: 1.35rem;
    padding: 0.12rem 0.28rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--carte);
    color: var(--encre-douce);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 700;
}

.vignette-article-crayon:hover,
.vignette-article-crayon:focus-visible {
    color: var(--encre);
    border-color: var(--accent);
}

.vignette-article-crayon-note {
    color: #c9a227;
}

.vignette-article-form-meta input[type="number"] {
    width: 3.5rem;
    max-width: 100%;
    margin: 0;
    padding: 0.15rem 0.3rem;
    font-size: 0.8rem;
    text-align: center;
}

.bouton-mini {
    width: auto;
    margin: 0;
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.2;
}

.vignette-article-etoiles {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
}

.vignette-article-etoile {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    background: color-mix(in srgb, var(--encre-douce) 35%, transparent);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.vignette-article-etoile-full {
    background: #c9a227;
}

.vignette-article-etoile-half {
    background: linear-gradient(
        90deg,
        #c9a227 0%,
        #c9a227 50%,
        color-mix(in srgb, var(--encre-douce) 35%, transparent) 50%,
        color-mix(in srgb, var(--encre-douce) 35%, transparent) 100%
    );
}

.vignette-article-retrait {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    z-index: 4;
    margin: 0;
}

.vignette-article-poubelle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--erreur, #b91c1c);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

.vignette-article-poubelle-icone {
    display: block;
    width: 0.62rem;
    height: 0.62rem;
}

.vignette-article-poubelle:hover,
.vignette-article-poubelle:focus-visible {
    background: #ef4444;
    outline: 1px solid #fff;
    outline-offset: 1px;
}

.vignette-article-bulle {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.25rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.45rem;
    border-radius: 0.35rem;
    background: rgb(0 0 0 / 0.82);
    color: #fff;
    font-family: var(--police-texte);
    font-size: 0.75rem;
    line-height: 1.3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.vignette-article-lien:hover + .vignette-article-meta + .vignette-article-retrait + .vignette-article-bulle,
.vignette-article-lien:hover + .vignette-article-meta + .vignette-article-bulle,
.vignette-article-carte:hover .vignette-article-bulle {
    opacity: 1;
    visibility: visible;
}

.vignette-article-carte:hover .vignette-article-bulle,
.vignette-article-lien:focus-visible ~ .vignette-article-bulle {
    opacity: 1;
    visibility: visible;
}

.vignette-article-meta.en-edition ~ .vignette-article-bulle,
.vignette-article-carte:has(.vignette-article-meta.en-edition) .vignette-article-bulle {
    display: none;
}

@media (max-width: 40rem) {
    .bande-articles-rangee {
        flex-direction: column;
        gap: 0.4rem;
    }

    .bande-articles-libelle {
        width: auto;
        flex-basis: auto;
    }
}

/* Recherche IGDB sur la page « Créer la fiche » (modération Steam). */
.champ-igdb {
    display: grid;
    gap: 0.35rem;
}

.champ-igdb .formulaire-ligne input[type="number"] {
    flex: 1;
    width: auto;
    min-width: 8rem;
}

.igdb-resultats {
    margin: 0.35rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--carte);
    max-height: min(22rem, 70vh);
    overflow-y: auto;
}

.igdb-resultats[hidden] {
    display: none;
}

/* Blog officiel : liste, article, aperçu des images. */
/* Liste des articles : un cadre de même proportion pour chaque carte, quelle
   que soit la forme de l'image d'origine (rognée avec object-fit si besoin),
   pour un rendu régulier plutôt que des vignettes de hauteurs différentes. */
.carte-blog-visuel {
    display: block;
    aspect-ratio: 16 / 9;
    margin: 0 0 0.75rem;
    border-radius: 0.4rem;
    overflow: hidden;
    background: var(--champ);
}

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

/* Blog personnel : titre, puis bannière configurable, puis colonne profil
   (avatar, réseaux, description) et, si activée, colonne statistiques
   (derniers jeux terminés / en cours) de part et d'autre des articles.
   Titre, bannière et colonnes partagent le même cadre (.blog-membre-cadre)
   pour rester alignés : sans lui, le titre démarre au bord de la page
   pendant que les colonnes, elles, sont centrées plus loin.
   Largeur du cadre = somme exacte des colonnes + espacements (14 + 1 + 40,
   et + 1 + 14 avec les stats) : sinon un espace invisible se glisse entre
   la grille (centrée dans sa propre case) et les colonnes, et l'espacement
   paraît irrégulier. */
.blog-membre-cadre {
    max-width: 55rem;
    margin-inline: auto;
}

.blog-membre-cadre--stats {
    max-width: 70rem;
}

.blog-banniere {
    /* Uniquement margin-top/bottom : un margin raccourci écraserait le
       margin-inline: auto de .blog-membre-cadre et décentrerait la bannière. */
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--champ);
}

.blog-banniere img {
    display: block;
    width: 100%;
    max-height: 18rem;
    object-fit: cover;
}

.blog-membre-mise-en-page {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.blog-membre-profil,
.blog-membre-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 0 0 14rem;
    max-width: 100%;
}

.blog-membre-avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--champ);
    align-self: center;
}

.blog-membre-description {
    margin: 0;
    color: var(--encre);
}

.blog-membre-articles {
    /* Largeur fixe (celle de la grille) : pas de grow, sinon cette case
       déborde du cadre et laisse un vide entre elle et les colonnes. */
    flex: 0 1 40rem;
    display: flex;
    flex-direction: column;
}

/* Liste des articles : une carte par ligne, plus lisible qu'une grille à
   plusieurs colonnes pour ce type de contenu (titre + chapô à lire). */
.cartes-blog {
    grid-template-columns: 1fr;
}

.cartes-blog:not(.cartes-blog-membre) {
    max-width: 40rem;
    margin-inline: auto;
}

.cartes-blog-membre {
    width: 100%;
}

/* Cartes de même hauteur alignées sur une ligne : le lien de lecture
   reste collé en bas, même quand un article n'a pas d'image de une. */
.carte-blog {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.carte-blog .renvoi {
    margin-top: auto;
    padding-top: 0.5rem;
}

.renvoi-pagination {
    text-align: center;
}

.blog-membre-stats h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.blog-stats-temps {
    margin: 0.75rem 0 1rem;
    font-size: 0.9rem;
    color: var(--encre);
}

.blog-stats-temps-titre {
    display: block;
    margin: 0 0 0.15rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--encre-douce);
}

.blog-stats-titre {
    margin: 1rem 0 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--encre-douce);
}

.blog-stats-titre:first-of-type {
    margin-top: 0;
}

.blog-stats-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.blog-stats-liste a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--encre);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.25;
}

.blog-stats-liste a:hover,
.blog-stats-liste a:focus-visible {
    color: var(--accent);
}

.blog-stats-liste img,
.blog-stats-vignette-vide {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.3rem;
    object-fit: cover;
    background: var(--champ);
    flex-shrink: 0;
}

@media (max-width: 40rem) {
    .blog-membre-profil,
    .blog-membre-stats {
        flex-basis: auto;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    /* Bloc centré dans la colonne, mais chaque ligne (vignette + titre)
       reste alignée à gauche : centrer chaque ligne individuellement
       décale les vignettes selon la longueur du titre, elles ne
       forment plus une colonne verticale. */
    .blog-stats-liste {
        width: auto;
        max-width: 100%;
    }
}

.article-blog-une img,
.apercu-blog,
.galerie-blog img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22rem;
    object-fit: cover;
    border-radius: 0.4rem;
}

.article-blog {
    max-width: 42rem;
    margin-inline: auto;
}

.article-blog-une {
    margin: 0 0 1.5rem;
}

.article-blog-corps {
    font-family: var(--police-texte);
    font-size: 1.08rem;
    line-height: 1.65;
}

.article-blog-corps p {
    margin: 0 0 1rem;
}

.article-blog-corps h2,
.article-blog-corps h3 {
    margin: 1.75rem 0 0.75rem;
    font-weight: 600;
    line-height: 1.25;
}

.article-blog-corps h2 { font-size: 1.5rem; }
.article-blog-corps h3 { font-size: 1.2rem; }

.article-blog-corps a {
    color: var(--accent);
    text-decoration: underline;
}

.article-blog-corps p.texte-centre {
    text-align: center;
}

.article-blog-corps p.texte-droite {
    text-align: right;
}

.article-blog-corps img.image-corps-article {
    display: inline-block;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0;
    border-radius: 0.4rem;
}

.mention-fiche {
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

.mention-fiche-image {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
}

.mention-fiche-image img {
    display: block;
    max-height: 6rem;
    width: auto;
    border-radius: 0.4rem;
    vertical-align: middle;
}

/*
 * Paragraphe qui ne contient que des jaquettes (App\Blog\FormateurTexte
 * pose la classe) : elles s'affichent en plus grand qu'une mention mêlée au
 * texte, côte à côte si plusieurs, sans se réduire à la taille d'une icône.
 */
.article-blog-corps p.paragraphe-visuel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.article-blog-corps p.paragraphe-visuel img {
    max-height: 14rem;
}

.bulle-fiche {
    position: fixed;
    z-index: 70;
    display: flex;
    gap: 0.65rem;
    width: 18rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.75rem;
    border: 1px solid var(--ligne);
    border-radius: 0.5rem;
    background: var(--carte);
    box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.18);
    font-family: var(--police-texte);
    pointer-events: none;
}

/* Sans ça, "display: flex" ci-dessus l'emporte sur le "display: none" du
   navigateur pour [hidden] (même spécificité, la règle du site gagne) et la
   bulle ne se referme jamais. */
.bulle-fiche[hidden] {
    display: none;
}

.bulle-fiche-image {
    flex: none;
    width: 3.4rem;
    height: 4.6rem;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--champ);
}

.bulle-fiche-corps {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.bulle-fiche-titre {
    margin: 0;
    font-weight: 600;
    color: var(--encre);
}

.bulle-fiche-detail {
    margin: 0;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.bulle-fiche-description {
    margin: 0;
    font-size: 0.85rem;
    color: var(--encre);
}

.barre-outils-texte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.barre-outils-texte button {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--ligne);
    border-radius: 0.4rem;
    background: var(--carte);
    color: var(--encre);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.barre-outils-texte button:hover {
    background: var(--champ);
}

.galerie-blog {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.galerie-blog-admin {
    margin-top: 0.75rem;
}

.galerie-blog-admin li {
    display: grid;
    gap: 0.35rem;
}

/*
 * Images "en plus" sous un article publié : contrairement à la galerie de
 * gestion (.galerie-blog, en pleine taille pour vérifier avant de coller ou
 * supprimer), ce sont de simples miniatures qui défilent horizontalement
 * (scroll-snap plutôt qu'un carrousel en JS, pas besoin de plus ici).
 */
.galerie-blog-vignettes {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin: 1.5rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
}

.galerie-blog-vignettes li {
    flex: none;
    scroll-snap-align: start;
}

.galerie-blog-vignettes img {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: 0.4rem;
}

.apercu-blog {
    max-width: 16rem;
    margin-top: 0.4rem;
}

.bouton-danger-lien {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--erreur);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}