/* ═══════════════════════════════════════════════════════════════════════════
   Thème public d'Aegis GameScan.

   TOUT S'EXPRIME EN VARIABLES, et c'est ce qui rend le thème réglable depuis
   l'administration sans toucher à ce fichier. Les quatre variables posées par
   l'en-tête — --accent, --accent-2, --bg, --ink — suffisent à retourner
   l'apparence ; les autres en descendent par calcul.

   La palette est CLAIRE par défaut. Le sombre est prévu plus bas, déclenché
   par la préférence du système : on ne fait pas deux thèmes, on fait un thème
   qui sait s'adapter.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --accent:   #2563eb;
    --accent-2: #4f46e5;
    --bg:       #ffffff;
    --ink:      #0f172a;
    --radius:   16px;

    /* Dérivées : elles suivent les quatre du dessus sans réglage séparé. */
    --ink-2:    color-mix(in srgb, var(--ink) 62%, transparent);
    --ink-3:    color-mix(in srgb, var(--ink) 42%, transparent);
    --ligne:    color-mix(in srgb, var(--ink) 12%, transparent);
    --surface:  color-mix(in srgb, var(--ink) 3%, var(--bg));
    --carte:    var(--bg);
    --ombre:    0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
    --ombre-f:  0 2px 6px rgba(15,23,42,.06), 0 24px 48px -20px rgba(15,23,42,.22);

    --vert:     #16a34a;
    --ambre:    #d97706;
    --rouge:    #dc2626;

    --large:    1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.pg {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

.pg-wrap { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 22px; }
.pg--narrow .pg-wrap { max-width: var(--large); }
.pg:not(.pg--narrow) .pg-wrap { max-width: 1480px; }

.pg-main { display: block; }

/* ═════════════════════════ EN-TÊTE ═════════════════════════ */

.pg-top {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ligne);
}
.pg-top__in {
    display: flex; align-items: center; gap: 22px;
    height: 68px;
}

.pg-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.pg-brand__mark { display: flex; }
.pg-brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.pg-brand__txt b { font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.pg-brand__txt i {
    font-style: normal; font-size: 9.5px; font-weight: 700;
    letter-spacing: .22em; color: var(--ink-3);
}

.pg-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.pg-nav a {
    padding: 8px 12px; border-radius: 9px; font-size: 14px;
    color: var(--ink-2); white-space: nowrap;
    transition: background .15s, color .15s;
}
.pg-nav a:hover { background: var(--surface); color: var(--ink); }
.pg-nav a.actif { color: var(--accent); font-weight: 600; }

/* ── Les groupes déroulants ──
   ⚠️ LE SOUS-MENU EST TOUJOURS DANS LE DOCUMENT, seulement invisible. Le
   retirer puis le remettre en JavaScript le ferait apparaître APRÈS le premier
   rendu, et il n'existerait pas du tout pour qui bloque les scripts. Ici, il
   s'ouvre au survol — donc même sans JavaScript — et le bouton ne sert qu'au
   clavier et au tactile, où il n'y a pas de survol. */
.pg-nav__grp { position: relative; display: flex; align-items: center; }
.pg-nav__tete {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 9px; font-size: 14px;
    color: var(--ink-2); white-space: nowrap;
    background: none; border: 0; cursor: pointer; font-family: inherit;
    transition: background .15s, color .15s;
}
.pg-nav__tete:hover { background: var(--surface); color: var(--ink); }
.pg-nav__tete.actif { color: var(--accent); font-weight: 600; }
.pg-nav__e { font-style: normal; }

/* Le chevron est un bouton à part quand le titre du groupe mène lui-même
   quelque part : sans cela, cliquer le titre ouvrirait le menu au lieu d'aller
   sur la page — ou l'inverse, selon ce qu'on aurait tranché. Les deux gestes
   sont séparés, donc aucun des deux n'est perdu. */
button.pg-nav__chev {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 26px; margin-left: -6px;
    background: none; border: 0; cursor: pointer;
    color: var(--ink-3); font-size: 11px; border-radius: 7px;
}
button.pg-nav__chev:hover { background: var(--surface); color: var(--ink); }
.pg-nav__chev { font-size: 10px; color: var(--ink-3); transition: transform .18s; }
.pg-nav__grp[data-pgGrp].ouvert .pg-nav__chev { transform: rotate(180deg); }

.pg-nav__sous {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    min-width: 230px; padding: 7px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--carte); border: 1px solid var(--ligne);
    border-radius: 14px; box-shadow: var(--ombre-f);
    /* Invisible, mais présent : `visibility` et non `display`, pour que
       l'ouverture puisse être animée et que le calcul de largeur soit déjà
       fait au moment où le menu apparaît. */
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.pg-nav__grp:hover > .pg-nav__sous,
.pg-nav__grp:focus-within > .pg-nav__sous,
.pg-nav__grp.ouvert > .pg-nav__sous {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.pg-nav__sous a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px; border-radius: 9px; font-size: 14px; white-space: normal;
}

/* Une petite zone morte entre le titre et le panneau : sans elle, le menu se
   referme dès que la souris traverse les 8 px de vide, et l'on n'atteint
   jamais la première entrée. */
.pg-nav__grp::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}

.pg-search {
    position: relative; flex: 0 1 260px;
}
.pg-search__i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 12px; opacity: .5; pointer-events: none;
}
.pg-search input {
    width: 100%; height: 38px; padding: 0 12px 0 32px;
    border: 1px solid var(--ligne); border-radius: 999px;
    background: var(--surface); color: inherit; font: inherit; font-size: 13.5px;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.pg-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.pg-auth { display: flex; align-items: center; gap: 12px; flex: none; }

.pg-lien {
    color: var(--accent); font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
}
.pg-lien:hover { text-decoration: underline; }

.pg-burger {
    display: none; flex-direction: column; gap: 4px; flex: none;
    width: 38px; height: 38px; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--ligne);
    border-radius: 10px; cursor: pointer;
}
.pg-burger span { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ═════════════════════════ BOUTONS ═════════════════════════ */

.pg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-weight: 600; font-size: 14px;
    border: 1px solid transparent; cursor: pointer;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: transform .12s, box-shadow .18s, filter .18s;
}
.pg-btn:hover {
    transform: translateY(-1px); filter: brightness(1.06);
    box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--accent) 62%, transparent);
}
.pg-btn--sm { padding: 7px 14px; font-size: 13.5px; }
.pg-btn--lg { padding: 13px 22px; font-size: 15px; border-radius: 12px; }
.pg-btn--ghost {
    background: var(--carte); color: var(--ink);
    border-color: var(--ligne); box-shadow: var(--ombre);
}
.pg-btn--ghost:hover { filter: none; border-color: var(--accent); color: var(--accent); }

.pg-rond {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--carte); border: 1px solid var(--ligne); color: var(--ink-2);
    cursor: pointer; box-shadow: var(--ombre); font-size: 14px;
}
.pg-rond:hover { color: var(--accent); border-color: var(--accent); }

/* ═════════════════════════ HÉROS ═════════════════════════ */

.pg-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(1200px 520px at 78% 8%,
            color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 7%, var(--bg)),
            var(--bg) 92%);
    background-size: cover; background-position: center;
    border-bottom: 1px solid var(--ligne);
}
.pg-hero__in {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px; align-items: center;
    padding: 58px 22px 66px;
}

/* ⚠️ LA CARTE S'ARRÊTE AVANT LE BORD, et c'est ce qui rend le personnage
   visible. Étalée jusqu'au bout, elle le recouvrait ENTIÈREMENT : il était
   bien chargé, bien positionné, et parfaitement invisible — on cherche
   longtemps une image qui ne manque pas. Cette bande libre est sa place. */
.pg-hero__demo { padding-right: 13%; }

.pg-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

.pg-hero__title {
    margin: 20px 0 18px;
    font-size: clamp(25px, 2.9vw, 36px); line-height: 1.2;
    font-weight: 800; letter-spacing: -.02em;
}
.pg-hero__title span { display: block; }
/* La FIN de chaque ligne prend l'accent : c'est elle qui porte la promesse.
   Le découpage vient de PHP — le gabarit n'a pas d'expression pour le faire. */
.pg-hero__title em {
    font-style: normal;
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

.pg-hero__text {
    margin: 0 0 26px; max-width: 46ch;
    font-size: 15.5px; color: var(--ink-2);
}

.pg-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* QUATRE COLONNES, PAS « autant que ça rentre ». Avec auto-fit, la quatrième
   promesse tombait seule à la ligne suivante — une orpheline qu'on lit comme
   un oubli plutôt que comme une liste. */
.pg-promesses {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 18px; margin: 38px 0 0; padding: 0; list-style: none;
}
.pg-promesses li { display: flex; flex-direction: column; }
.pg-promesses b { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.pg-promesses span { font-size: 12px; color: var(--ink-3); }

/* Le personnage : décoratif, donc jamais capté par la souris et invisible aux
   lecteurs d'écran. Il passe DERRIÈRE la carte pour ne rien masquer. */
.pg-hero__perso {
    position: absolute; right: 0; bottom: 0; z-index: 1;
    /* ⚠️ JAMAIS PLUS DE 100 % DE HAUTEUR. Au-delà, le haut de l'image sort du
       cadre — que « overflow: hidden » découpe aussitôt — et le personnage se
       retrouve décapité. C'est exactement ce qui arrivait en bas de page. */
    height: 100%; width: auto; max-width: 32%;
    /* « contain » plutôt que « cover » : le rendu est détouré, le rogner lui
       couperait la tête ou les pieds selon la hauteur de la section. */
    object-fit: contain; object-position: bottom right;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 18px 38px rgba(15,23,42,.26));
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}

/* ═════════════════════ CARTE DE DÉMONSTRATION ═════════════════════ */

.pg-demo {
    position: relative;
    background: var(--carte); border: 1px solid var(--ligne);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--ombre-f);
    padding: 22px;
}
.pg-demo__tag {
    position: absolute; top: -11px; left: 20px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--ink); color: var(--bg);
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.pg-demo__haut { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; }
.pg-demo__lab {
    display: block; font-size: 11.5px; font-weight: 600;
    color: var(--ink-3); margin-bottom: 10px;
}
.pg-demo__score { text-align: center; }
.pg-demo__note { display: block; font-size: 12.5px; font-weight: 700; color: var(--vert); }

.pg-jauge { position: relative; width: 132px; margin: 0 auto 6px; }
.pg-jauge svg { transform: rotate(-135deg); display: block; width: 100%; height: auto; }
.pg-jauge circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.pg-jauge__f { stroke: var(--surface); stroke-dasharray: 245 327; }
.pg-jauge__v {
    stroke: url(#none); stroke: var(--vert);
    stroke-dasharray: calc(245 * var(--v) / 100) 327;
}
.pg-jauge b {
    position: absolute; inset: 0; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    font-size: 33px; font-weight: 800; line-height: 1;
}
.pg-jauge b i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); }

.pg-demo__conf dl {
    display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0;
    font-size: 12.5px;
}
.pg-demo__conf dt { color: var(--ink-3); white-space: nowrap; }
.pg-demo__conf dd { margin: 0; font-weight: 600; text-align: right; }

.pg-demo__bas {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ligne);
}
.pg-demo__bas span {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px; border-radius: 10px; background: var(--surface);
}
.pg-demo__bas i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.pg-demo__bas b { font-size: 16px; font-weight: 800; }
.pg-demo__bas b.ok  { color: var(--vert); }
.pg-demo__bas b.mid { color: var(--ambre); }

.pg-demo__pied {
    margin: 16px 0 0; padding: 11px 14px; border-radius: 10px;
    background: color-mix(in srgb, var(--vert) 9%, transparent);
    color: color-mix(in srgb, var(--vert) 85%, var(--ink));
    font-size: 12.5px;
}

/* ══════════════════════ L'AVIS DE BETA PUBLIQUE ══════════════════════
   ⚠️ AMBRE, PAS VERT. Le vert est la couleur du succès partout ailleurs sur
   ce site : un avertissement en vert se lit comme un satisfecit et l'oeil
   passe dessus. L'ambre est la couleur de la reserve, et c'est bien de cela
   qu'il s'agit.

   ⚠️ IL NE CRIE PAS NON PLUS. Un bandeau rouge pleine largeur ferait douter
   du site entier, alors que le propos est l'inverse : les chiffres sont
   verifiables, simplement perfectibles. Fond tres pale, filet a gauche. */
.pg-beta {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 18px 20px; border-radius: var(--radius);
    background: color-mix(in srgb, var(--ambre) 7%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--ambre) 28%, transparent);
    border-left: 4px solid var(--ambre);
}

.pg-beta__e { font-size: 26px; line-height: 1.1; flex: none; }
.pg-beta__c { min-width: 0; }

.pg-beta__t {
    display: block; margin-bottom: 6px;
    font-size: 15.5px; color: color-mix(in srgb, var(--ambre) 75%, var(--ink));
}

.pg-beta p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.pg-beta p:last-child { margin-bottom: 0; }

/* La ligne qui invite au forum se detache du reste : c'est la seule qui
   demande quelque chose au lecteur. */
.pg-beta__aide {
    margin-top: 10px !important; padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--ambre) 20%, transparent);
}
.pg-beta .pg-lien { white-space: nowrap; }

/* Sur la page de resultat, l'avis precede les chiffres : il doit se lire en
   une seconde, pas occuper un ecran. */
.pg-beta--compact { padding: 13px 16px; gap: 12px; margin-bottom: 16px; }
.pg-beta--compact .pg-beta__e { font-size: 20px; }
.pg-beta--compact .pg-beta__t { font-size: 14px; margin-bottom: 3px; }
.pg-beta--compact p { font-size: 12.8px; }

/* La section qui l'accueille a l'accueil : collee au bloc precedent, sinon
   elle flotte au milieu de nulle part. */
.pg-sec--beta { padding-top: 34px; padding-bottom: 0; }

@media (max-width: 560px) {
    .pg-beta { flex-direction: column; gap: 10px; padding: 15px 16px; }
}

/* ═════════════════════════ SECTIONS ═════════════════════════ */

.pg-sec { padding: 62px 0; }
.pg-sec + .pg-sec { padding-top: 0; }

.pg-sec__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.pg-h2 {
    margin: 0 0 20px; font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 800; letter-spacing: -.015em;
}
.pg-sec__head .pg-h2 { margin: 0; }
.pg-h3 { margin: 0; font-size: 15.5px; font-weight: 700; }

.pg-args { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 16px; }
.pg-arg {
    padding: 20px; border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre);
    transition: transform .16s, box-shadow .2s, border-color .2s;
}
.pg-arg:hover {
    transform: translateY(-3px); box-shadow: var(--ombre-f);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--ligne));
}
.pg-arg__i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; font-size: 18px;
    background: color-mix(in srgb, var(--accent) 11%, transparent);
    margin-bottom: 13px;
}
.pg-arg h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; }
.pg-arg p  { margin: 0; font-size: 12.8px; color: var(--ink-2); line-height: 1.62; }

/* ═════════════════════ CARROUSEL DE JEUX ═════════════════════ */

/* ⚠️ L'ASCENSEUR EST MASQUÉ, PAS SUPPRIMÉ. Le débordement reste ce qui fait
   défiler : c'est lui qui permet au doigt, à la molette et au clavier de
   parcourir la liste sans une ligne de JavaScript. On cache seulement sa
   barre, qui n'a pas sa place au milieu d'une rangée de jaquettes — les deux
   flèches rondes en tiennent lieu. */
.pg-rail__zone { position: relative; }

.pg-rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(206px, 1fr);
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 8px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.pg-rail::-webkit-scrollbar { display: none; }

.pg-rond--rail {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 40px; height: 40px; font-size: 16px;
    background: var(--carte); box-shadow: var(--ombre-f);
    transition: opacity .18s, color .15s, border-color .15s;
}
.pg-rond--rail.g { left: -18px; }
.pg-rond--rail.d { right: -18px; }
/* Une flèche en bout de course s'efface au lieu de rester cliquable : un
   bouton qui ne fait rien laisse croire à une panne. */
.pg-rond--rail:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 1240px) {
    .pg-rond--rail.g { left: 2px; }
    .pg-rond--rail.d { right: 2px; }
}

.pg-jeu {
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre); overflow: hidden;
    transition: transform .16s, box-shadow .2s;
}
.pg-jeu:hover { transform: translateY(-3px); box-shadow: var(--ombre-f); }
.pg-jeu__img { display: block; aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden; }
.pg-jeu__img img { width: 100%; height: 100%; object-fit: cover; }
.pg-jeu__corps { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px 15px; }
.pg-jeu__nom {
    font-size: 13.8px; font-weight: 700; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.pg-jeu__meta { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

.pg-pastille {
    align-self: flex-start; margin-top: 3px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.pg-pastille.ok   { background: color-mix(in srgb, var(--vert) 13%, transparent); color: var(--vert); }
.pg-pastille.mute { background: var(--surface); color: var(--ink-3); }

/* ═════════════════════════ LES DEUX LISTES ═════════════════════════ */

.pg-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; }

.pg-bloc {
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre); padding: 20px;
}
.pg-bloc .pg-sec__head { margin-bottom: 14px; }

.pg-liste { list-style: none; margin: 0; padding: 0; }
.pg-liste > li {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0; border-top: 1px solid var(--ligne);
}
.pg-liste > li:first-child { border-top: 0; }

/* La pastille d'origine ne se replie pas sur deux lignes dans les listes de composants. */
.pg-liste__cliquable > .pg-pastille { flex: none; align-self: center; margin-top: 0; white-space: nowrap; }

.pg-ava, .pg-rang {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 11%, transparent);
    color: var(--accent); font-size: 12px; font-weight: 700;
}
.pg-rang { background: var(--surface); color: var(--ink-2); font-size: 15px; }
/* Le type de machine : image carrée arrondie plutôt qu'une pastille d'initiales. */
.pg-ava--pc { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; overflow: hidden; }
.pg-ava--pc img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ⚠️ TOUTE LA LIGNE EST CLIQUABLE, PAS SEULEMENT LE TITRE. Le lien est étiré
   sur la ligne par un pseudo-élément : un seul lien dans le HTML (lecteurs
   d'écran, clic milieu, copie d'adresse), une grande cible sous le doigt. */
.pg-liste__cliquable { position: relative; cursor: pointer; transition: background .15s; border-radius: 10px; }
.pg-liste__cliquable:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pg-liste__lien { color: inherit; text-decoration: none; }
.pg-liste__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pg-liste__lien:focus-visible { outline: none; }
.pg-liste__lien:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.pg-liste__cliquable:hover .pg-liste__lien { color: var(--accent); }
.pg-liste__fleche { flex: none; color: var(--ink-3); font-weight: 700; transition: transform .15s, color .15s; }
.pg-liste__cliquable:hover .pg-liste__fleche { color: var(--accent); transform: translateX(3px); }

/* La page « Toutes les analyses » : lignes aérées, pièces sur trois lignes. */
.pg-liste--analyses { max-width: 900px; margin: 0 auto; }
.pg-liste--analyses > li { padding: 14px 12px; }
.pg-liste__spec--large {
    display: flex; flex-direction: column; align-items: flex-end;
    white-space: normal; text-align: right; line-height: 1.45; max-width: 45%;
}
.pg-liste__spec--large span:first-child { color: var(--ink-2); font-weight: 600; }

.pg-vign {
    flex: none; width: 44px; height: 34px; border-radius: 7px;
    overflow: hidden; background: var(--surface);
}
.pg-vign img { width: 100%; height: 100%; object-fit: cover; }

.pg-liste__c { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pg-liste__c b { font-size: 13.5px; font-weight: 700; }
.pg-liste__c i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.pg-liste__spec { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

.pg-score {
    flex: none; display: flex; flex-direction: column; align-items: center;
    padding: 5px 11px; border-radius: 9px; line-height: 1.1;
    font-size: 16px; font-weight: 800;
}
.pg-score i { font-style: normal; font-size: 9.5px; font-weight: 600; opacity: .7; }
.pg-score.ok { background: color-mix(in srgb, var(--vert) 12%, transparent); color: var(--vert); }

/* ⚠️ UNE NOTE VERTE QUOI QU'ELLE VAILLE NE NOTE RIEN. La pastille n'avait
   qu'une seule variante — `ok`, verte — et les gabarits l'écrivaient en dur :
   un 16/100 s'affichait du même vert rassurant qu'un 81/100. La couleur est
   désormais celle que le service calcule, la MÊME que sur la fiche de
   l'analyse et dans le classement (voir `VerdictService::motDeLaNote`). */
.pg-score--vert  { background: color-mix(in srgb, var(--vert) 12%, transparent);  color: var(--vert); }
.pg-score--jaune { background: color-mix(in srgb, var(--jaune) 16%, transparent); color: var(--jaune); }
.pg-score--ambre { background: color-mix(in srgb, var(--ambre) 14%, transparent); color: var(--ambre); }
.pg-score--rouge { background: color-mix(in srgb, var(--rouge) 12%, transparent); color: var(--rouge); }

/* L'état vide : il occupe la place du contenu, plutôt que de la laisser
   s'effondrer. Une section qui rétrécit se lit comme une page cassée. */
.pg-vide {
    color: var(--ink-3); font-size: 13px; text-align: center; padding: 24px 8px;
}
.pg-vide--bloc {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border-top: 0; padding: 34px 14px;
}
.pg-vide--bloc span[aria-hidden] { font-size: 30px; opacity: .5; }
.pg-vide--bloc b { font-size: 13.5px; color: var(--ink-2); }
.pg-vide--bloc span:last-child { max-width: 40ch; line-height: 1.6; }

/* ═════════════════════════ LES CHIFFRES ═════════════════════════ */

/* ── Le catalogue pendant qu'il se met à jour ────────────────────────
   ⚠️ ON ATTÉNUE, ON NE VIDE PAS. Remplacer les résultats par un sablier fait
   sauter la page à chaque case cochée ; les laisser en place, simplement
   estompés, garde la position de lecture et la hauteur du bloc. La transition
   est assez lente pour ne pas clignoter sur une réponse rapide. */
.pg-cat--charge .pg-cat__corps { opacity: .45; transition: opacity .18s .1s; }
.pg-cat--charge .pg-cat__corps a { pointer-events: none; }
.pg-cat__corps { transition: opacity .12s; }

/* ── 💬 Les derniers sujets du forum, sur l'accueil ──────────────────
   Dix lignes à la file feraient une colonne interminable au milieu de la
   page : elles se rangent sur deux colonnes dès qu'il y a la place, et
   retombent sur une seule quand il n'y en a plus. */
.pg-liste--forum {
    display: grid; gap: 0 26px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
/* Chaque colonne reprend son propre filet : sans cela, la première ligne de
   la colonne de droite en garde un que rien ne justifie. */
.pg-liste--forum > li:nth-child(-n + 2) { border-top: 0; }
.pg-liste--forum > li { padding: 11px 10px; }
.pg-liste--forum .pg-liste__c i { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pg-forum__n { font-weight: 650; color: var(--ink-2); }

/* Une pastille d'avatar : la photo remplit le rond, les initiales le centrent.
   « pg-ava--pc » ne convient pas — c'est un carré arrondi, pensé pour une
   image de boîtier qui doit rester entière. */
.pg-ava--photo {
    overflow: hidden; color: #fff; font-size: 11.5px;
    background: linear-gradient(135deg, hsl(var(--h, 220) 70% 56%), hsl(calc(var(--h, 220) + 40) 72% 42%));
}
.pg-ava--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pg-role {
    --fo-r: var(--accent);
    display: inline-flex; align-items: center; gap: 3px;
    padding: 0 6px; border-radius: 99px;
    font-style: normal; font-size: 10.5px; font-weight: 750;
    color: var(--fo-r);
    background: color-mix(in srgb, var(--fo-r) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--fo-r) 38%, transparent);
}

@media (max-width: 720px) {
    /* Sur une colonne, seule la toute première ligne perd son filet. */
    .pg-liste--forum > li:nth-child(2) { border-top: 1px solid var(--ligne); }
}

.pg-chiffres {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 6px; padding: 26px 18px;
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--surface);
}
/* L'ICÔNE EST À GAUCHE DU TEXTE, pas au-dessus : empilée, elle se lisait
   comme un titre de colonne et coupait le lien entre le nombre et ce qu'il
   compte. À gauche, l'œil parcourt une ligne au lieu de trois blocs. */
.pg-chiffre {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    padding: 8px 14px; text-align: left;
    border-left: 1px solid var(--ligne);
}
.pg-chiffre:first-child { border-left: 0; }
.pg-chiffre__i {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; font-size: 18px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.pg-chiffre__t { display: flex; flex-direction: column; min-width: 0; }
.pg-chiffre b { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pg-chiffre i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.pg-chiffre--vide b { color: var(--ink-3); }
.pg-chiffre--vide .pg-chiffre__i { background: var(--surface); opacity: .7; }

.pg-chiffres__note {
    margin: 12px 0 0; text-align: center;
    font-size: 11.5px; color: var(--ink-3);
}

/* ═════════════════════ APPEL À L'ACTION ═════════════════════ */

.pg-cta { padding: 0 0 62px; }
.pg-cta__in {
    position: relative; overflow: hidden;
    border-radius: calc(var(--radius) + 6px);
    background:
        radial-gradient(760px 380px at 88% 108%,
            color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 10%, var(--surface)),
            color-mix(in srgb, var(--accent-2) 8%, var(--surface)));
    border: 1px solid var(--ligne);
    padding: 28px 38px; min-height: 210px;
    /* ═══ TROIS COLONNES, ET LE PERSONNAGE EN EST UNE ═══
       Il était posé en absolu, et il fallait alors lui réserver une bande à la
       main : 42 % de retrait à droite pour une image qui n'en occupait que 25.
       Le texte se retrouvait à l'étroit à côté d'un vide.

       En le faisant entrer dans la grille, la place qu'il prend est celle qu'il
       occupe VRAIMENT — plus de pourcentage à deviner, et tout ce qui reste
       revient au discours. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 330px);
    align-items: center; gap: 34px;
}
.pg-cta__txt { position: relative; z-index: 2; }
.pg-cta__act {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Le libellé ne se coupe jamais en deux : « Analyser / mon PC » sur deux
   lignes se lit comme un bouton cassé. */
.pg-cta__act .pg-btn { white-space: nowrap; }
.pg-cta__txt h2 {
    margin: 0 0 10px; font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 800; line-height: 1.3; letter-spacing: -.015em;
}
.pg-cta__txt p  { margin: 0 0 18px; color: var(--ink-2); font-size: 13.5px; }
.pg-cta__note   { display: block; font-size: 12px; color: var(--ink-3); text-align: center; }

.pg-cta__perso {
    position: relative; z-index: 1;
    /* Il se pose SUR le bord bas du bandeau : la marge négative le laisse
       toucher le bord, où « overflow: hidden » l'arrête net. C'est ce qui lui
       donne l'assise du personnage debout plutôt que l'air d'une vignette
       flottante. */
    align-self: end; margin-bottom: -36px;
    width: 100%; height: auto; max-height: 340px;
    object-fit: contain; object-position: bottom center;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 16px 32px rgba(15,23,42,.24));
}

/* ═════════════════════════ PIED DE PAGE ═════════════════════════ */

.pg-foot { border-top: 1px solid var(--ligne); background: var(--surface); }
.pg-foot__in {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 30px; flex-wrap: wrap; padding-top: 38px; padding-bottom: 26px;
}
.pg-foot__marque p { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); max-width: 42ch; }
.pg-brand--foot .pg-brand__txt b { font-size: 15px; }

.pg-foot__nav { display: flex; gap: 20px; flex-wrap: wrap; }
.pg-foot__nav a { font-size: 13.5px; color: var(--ink-2); }
.pg-foot__nav a:hover { color: var(--accent); }

.pg-foot__bas {
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding-top: 16px; padding-bottom: 26px;
    border-top: 1px solid var(--ligne);
    font-size: 12px; color: var(--ink-3);
}
.pg-foot__bas p { margin: 0; }
.pg-foot__bas a:hover { color: var(--accent); }

/* ═════════════════════════ ADAPTATIF ═════════════════════════ */

@media (max-width: 1180px) {
    .pg-hero__in { grid-template-columns: 1fr; gap: 34px; }
    .pg-hero__demo { padding-right: 0; }
    .pg-hero__perso { display: none; }
}

@media (max-width: 980px) {
    .pg-nav {
        display: none; position: absolute; top: 68px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 22px 16px;
        background: var(--bg); border-bottom: 1px solid var(--ligne);
        box-shadow: var(--ombre-f);
    }
    .pg-nav.ouvert { display: flex; }

    /* ⚠️ SOUS 980 px, LE SURVOL N'EXISTE PLUS. Un panneau flottant s'ouvrirait
       au premier effleurement et se refermerait sans qu'on ait pu le viser. Le
       groupe se déplie donc SUR PLACE, en poussant ce qui suit — le seul
       comportement qui se manipule au doigt. */
    .pg-nav__grp { flex-wrap: wrap; }
    .pg-nav__tete { flex: 1; }
    button.pg-nav__chev { width: 34px; height: 34px; margin-left: 0; }
    .pg-nav__sous {
        position: static; width: 100%; order: 3;
        min-width: 0; margin: 2px 0 4px 14px; padding: 4px 0 4px 10px;
        border: 0; border-left: 2px solid var(--ligne);
        border-radius: 0; box-shadow: none; background: none;
        transform: none;
        /* Replié, un panneau seulement transparent garderait sa hauteur et
           laisserait un trou dans le menu : ici il disparaît vraiment. */
        display: none;
    }
    .pg-nav__grp:hover > .pg-nav__sous { opacity: 0; visibility: hidden; }
    .pg-nav__grp.ouvert > .pg-nav__sous {
        display: flex; opacity: 1; visibility: visible;
    }
    .pg-burger { display: flex; }
    .pg-search { flex: 1; }
    .pg-auth { display: none; }
    .pg-demo__haut { grid-template-columns: 1fr; }
    .pg-demo__conf dd { text-align: left; }
    .pg-demo__bas { grid-template-columns: repeat(3, 1fr); }
    .pg-chiffre { border-left: 0; }
}

@media (max-width: 860px) {
    .pg-promesses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    /* Sous cette largeur, trois colonnes étoufferaient le texte : le
       personnage s'efface et le reste s'empile. */
    .pg-cta__in { grid-template-columns: 1fr; gap: 22px; }
    .pg-cta__act { align-items: flex-start; }
    .pg-cta__note { text-align: left; }
    .pg-cta__perso { display: none; }
}

@media (max-width: 760px) {
    .pg-sec { padding: 42px 0; }
    .pg-cta__in { padding: 30px 24px; min-height: 0; }
    .pg-liste__spec { display: none; }
    .pg-hero__in { padding: 40px 22px 48px; }

    /* Sur la page dédiée, les pièces SONT le contenu : elles passent dessous
       au lieu de disparaître. */
    .pg-liste--analyses > li { flex-wrap: wrap; }
    .pg-liste--analyses .pg-liste__spec--large {
        display: flex; order: 5; flex-basis: 100%; max-width: none;
        align-items: flex-start; text-align: left; padding-left: 55px;
    }
}

/* ═════════════════════════ MODE SOMBRE ═════════════════════════
   Il ne se règle pas dans l'administration : il suit la préférence du
   système. Un visiteur qui a choisi le sombre l'a choisi partout, et lui
   imposer du blanc éclatant sur une page consultée le soir est le meilleur
   moyen qu'il la referme.

   ⚠️ Il ne s'applique QUE si l'administration n'a pas imposé ses propres
   couleurs — d'où le test sur les variables : quand --bg a été réglé à autre
   chose que le blanc par défaut, le choix humain l'emporte sur celui du
   système. */
/* ═══════════════════════ LE THÈME SOMBRE ═══════════════════════
   TROIS ÉTATS, PAS DEUX. Le visiteur peut n'avoir rien choisi — on suit alors
   sa préférence système — ou avoir choisi explicitement, et son choix doit
   l'emporter DANS LES DEUX SENS : du clair vers le sombre, mais aussi du
   sombre vers le clair sur une machine réglée en sombre.

   D'où la garde « :not([data-theme=light]) » sur la règle système : sans elle,
   qui demande le clair sur un système sombre ne l'obtiendrait jamais, et le
   bouton paraîtrait cassé une fois sur deux. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    --bg:      #0b0f18;
    --ink:     #e8ecf5;
    --surface: color-mix(in srgb, var(--ink) 6%, var(--bg));
    --carte:   color-mix(in srgb, var(--ink) 4%, var(--bg));
    --ligne:   color-mix(in srgb, var(--ink) 14%, transparent);
    --ombre:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --ombre-f: 0 2px 6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.75);
    }
    :root:not([data-theme="light"]) .pg-demo__tag { background: var(--accent); color: #fff; }
    :root:not([data-theme="light"]) .pg-hero__perso,
    :root:not([data-theme="light"]) .pg-cta__perso { filter: drop-shadow(0 22px 44px rgba(0,0,0,.6)); }
    :root:not([data-theme="light"]) .pg-theme__c { opacity: 1; transform: none; }
    :root:not([data-theme="light"]) .pg-theme__s { opacity: 0; transform: rotate(40deg) scale(.7); }
}

/* Le choix explicite, qui l'emporte sur le système. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:      #0b0f18;
    --ink:     #e8ecf5;
    --surface: color-mix(in srgb, var(--ink) 6%, var(--bg));
    --carte:   color-mix(in srgb, var(--ink) 4%, var(--bg));
    --ligne:   color-mix(in srgb, var(--ink) 14%, transparent);
    --ombre:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --ombre-f: 0 2px 6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.75);
}
:root[data-theme="dark"] .pg-demo__tag { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .pg-hero__perso,
:root[data-theme="dark"] .pg-cta__perso { filter: drop-shadow(0 22px 44px rgba(0,0,0,.6)); }
:root[data-theme="dark"] .pg-theme__c { opacity: 1; transform: none; }
:root[data-theme="dark"] .pg-theme__s { opacity: 0; transform: rotate(40deg) scale(.7); }

/* ── Le bouton lui-même ──
   Les deux icônes sont posées l'une sur l'autre ; seule celle du thème OPPOSÉ
   se voit, parce qu'un bouton annonce ce qu'il FERA, pas l'état courant. */
.pg-theme {
    position: relative; flex: none;
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--ligne);
    cursor: pointer; font-size: 15px; line-height: 1;
    transition: border-color .15s, background .15s;
}
.pg-theme:hover { border-color: var(--accent); }
.pg-theme__c, .pg-theme__s { position: absolute; transition: opacity .18s, transform .18s; }
.pg-theme__c { opacity: 0; transform: rotate(-40deg) scale(.7); }
.pg-theme__s { opacity: 1; transform: none; }

/* Les animations coûtent à qui les supporte mal : on les retire pour lui. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CATALOGUE DES JEUX
   ═══════════════════════════════════════════════════════════════════════════ */

.pg-band {
    background:
        radial-gradient(900px 380px at 82% 0%,
            color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg)), var(--bg));
    border-bottom: 1px solid var(--ligne);
}
.pg-band__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 30px; flex-wrap: wrap; padding: 44px 22px 40px;
}
.pg-band__t { margin: 0 0 8px; font-size: clamp(24px, 2.8vw, 34px); font-weight: 800;
    letter-spacing: -.02em; }
.pg-band__s { margin: 0; max-width: 52ch; font-size: 13.5px; color: var(--ink-2); }

.pg-band__chiffres { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-mini {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-radius: 12px;
    background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre);
}
.pg-mini__i {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 9px; font-size: 15px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.pg-mini__t { display: flex; flex-direction: column; line-height: 1.2; }
.pg-mini__t b { font-size: 17px; font-weight: 800; }
.pg-mini__t i { font-style: normal; font-size: 11px; color: var(--ink-3); }

/* La barre d'onglets, de recherche et de tri. */
.pg-barre { border-bottom: 1px solid var(--ligne); background: var(--bg); }
.pg-barre__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px;
}
.pg-ongl { display: flex; gap: 2px; flex-wrap: wrap; }
.pg-ongl a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 13px 13px 12px; font-size: 13.5px; color: var(--ink-2);
    border-bottom: 2px solid transparent; white-space: nowrap;
}
/* L'emoji reste de la même taille quel que soit l'onglet actif : le libellé
   passe en gras quand on le choisit, et un emoji qui grossirait avec lui
   ferait sauter toute la ligne d'un pixel. */
.pg-ongl__e { font-size: 13px; line-height: 1; font-weight: 400; }
.pg-ongl a:hover { color: var(--ink); }
.pg-ongl a.actif { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }

/* ⚠️ LES DEUX CONTRÔLES ONT LA MÊME HAUTEUR, ET C'EST TOUT LE SUJET. Ils
   étaient à 38 et 36 px, posés côte à côte : l'œil voit un décalage d'un pixel
   sans savoir le nommer, et la barre paraît bâclée. Une variable les tient
   ensemble — changer la hauteur les change tous les deux. */
.pg-barre__f { --h: 38px; display: flex; align-items: center; gap: 10px; }
.pg-search--l { flex: 0 1 260px; }
.pg-search--l input { height: var(--h); }

/* Le libellé « Trier par » devient une étiquette DANS le champ plutôt qu'un
   mot posé à côté : il tient moins de place et ne se détache plus du menu
   auquel il se rapporte. */
/* ⚠️ LE PADDING EST SUR LES ENFANTS, PAS SUR LA PASTILLE, et ce n'est pas un
   détail de style. Porté par la pastille, il laissait le menu occuper 100 px
   sur les 200 de la pilule : le reste — dont LA FLÈCHE, le seul endroit où
   tout le monde clique — tombait sur l'étiquette, qui ne déroule rien. On
   cliquait sur le chevron, il ne se passait rien, et on croyait le tri cassé.
   Le menu remplit maintenant la pastille jusqu'au bord droit, flèche
   comprise. */
.pg-tri {
    position: relative; display: flex; align-items: center;
    height: var(--h);
    border: 1px solid var(--ligne); border-radius: 999px;
    background: var(--surface);
    font-size: 12.5px; color: var(--ink-3); cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.pg-tri:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pg-tri > span { white-space: nowrap; padding-left: 13px; margin-right: 6px; }
.pg-tri select {
    flex: 1; min-width: 0; height: 100%;
    appearance: none; -webkit-appearance: none;
    border: 0; background: none; padding: 0 34px 0 0; margin: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
    cursor: pointer; outline: none;
}
/* Le chevron : dessiné en CSS plutôt qu'ajouté en image, pour suivre la
   couleur du texte dans les deux thèmes. */
.pg-tri::after {
    content: ''; position: absolute; right: 14px; top: 50%;
    width: 7px; height: 7px; margin-top: -5px;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg); pointer-events: none;
}

/* ── La bascule grille / liste ── */
.pg-vues { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--ligne); }
.pg-vues a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 28px; border-radius: 7px;
    font-size: 14px; line-height: 1; color: var(--ink-3);
    transition: background .15s, color .15s;
}
.pg-vues a:hover { color: var(--ink); }
.pg-vues a.actif { background: var(--carte); color: var(--accent); box-shadow: var(--ombre); }

/* Colonne de filtres, puis grille. La colonne SUIT le défilement : parcourir
   quatre cents fiches en devant remonter pour changer un filtre décourage
   d'en changer. */
.pg-cat {
    display: grid; grid-template-columns: 244px minmax(0, 1fr);
    gap: 26px; align-items: start; padding-top: 26px; padding-bottom: 40px;
}

.pg-filtres {
    position: sticky; top: 84px;
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre); padding: 16px;
}
.pg-filtres__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ligne);
}
.pg-filtres__head b { font-size: 14px; }
.pg-filtres__head .pg-lien { font-size: 12.5px; }

.pg-grp { border: 0; margin: 0; padding: 14px 0 4px; border-bottom: 1px solid var(--ligne); }
.pg-grp legend {
    padding: 0; margin-bottom: 9px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
}
.pg-case {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 0; font-size: 13px; cursor: pointer;
}
.pg-case span { flex: 1; min-width: 0; }
.pg-case i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.pg-case input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.pg-case:hover span { color: var(--accent); }

.pg-annees { display: flex; gap: 10px; }
.pg-annees label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex: 1; }
.pg-annees span { color: var(--ink-3); }
.pg-annees input {
    width: 100%; min-width: 0; height: 32px; padding: 0 8px;
    border: 1px solid var(--ligne); border-radius: 8px;
    background: var(--surface); color: inherit; font: inherit; font-size: 12.5px;
}

.pg-promo {
    margin-top: 16px; padding: 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.pg-promo b { display: block; font-size: 13px; margin-bottom: 5px; }
.pg-promo p { margin: 0 0 8px; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.pg-promo__note { font-size: 11.5px; color: var(--ink-3); }

/* L'adresse de l'API, dans un encart étroit : elle doit se recopier, donc elle
   ne se coupe pas — elle passe à la ligne n'importe où plutôt que de déborder
   de la colonne ou d'imposer un ascenseur horizontal dans une barre latérale. */
.pg-promo__url {
  display: block; margin: 0 0 8px; padding: 6px 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  line-height: 1.45; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--ligne); border-radius: 7px;
  overflow-wrap: anywhere; word-break: break-all;
}
.pg-promo .pg-lien { font-size: 12px; }

.pg-cat__head { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; min-height: 36px; }
.pg-cat__n { font-size: 13px; color: var(--ink-2); font-weight: 600; }

/* 185 px, et non 210 : à 210, la quatrième carte ne tenait plus une fois la
   colonne de filtres déduite, et la grille retombait à trois — beaucoup de
   vide à droite pour rien. */
.pg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 16px; }

/* « À voir aussi » : cinq fiches sur UNE ligne, exactement. Le calcul
   automatique en plaçait cinq par ligne sur la fiche — qui prend toute la
   largeur — et quatre dans le catalogue, qui garde une colonne pour ses
   filtres. La rangée finissait donc sur un trou. On fixe le compte ici, et on
   laisse le calcul automatique reprendre la main quand l'écran rétrécit. */
@media (min-width: 1080px) {
    .pg-grille--voisins { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.pg-carte {
    display: flex; flex-direction: column;
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre); overflow: hidden;
    transition: transform .16s, box-shadow .2s;
}
.pg-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-f); }
.pg-carte__img {
    position: relative; display: block; aspect-ratio: 16 / 9;
    background: var(--surface); overflow: hidden;
}
.pg-carte__img img { width: 100%; height: 100%; object-fit: cover; }
.pg-carte__ph {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 30px; opacity: .35;
}
.pg-badge.amber { background: var(--ambre); }
.pg-badge {
    position: absolute; top: 9px; left: 9px;
    padding: 3px 8px; border-radius: 6px;
    background: var(--accent); color: #fff;
    font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
}
.pg-carte__c { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px 8px; flex: 1; }
.pg-carte__t {
    font-size: 13.5px; font-weight: 700; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-carte__t:hover { color: var(--accent); }
.pg-carte__m { font-size: 11.5px; color: var(--ink-3); }
.pg-carte__p { padding: 0 13px 13px; }

.pg-pages { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.pg-pages a, .pg-pages span {
    min-width: 36px; height: 36px; padding: 0 11px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ligne); border-radius: 9px;
    background: var(--carte); font-size: 13px; color: var(--ink-2);
}
.pg-pages a:hover { border-color: var(--accent); color: var(--accent); }
.pg-pages a.actif { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pg-pages span { opacity: .5; border-color: transparent; background: none; }

.pg-args--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pg-arg .pg-lien { margin-top: 9px; font-size: 12.5px; }

.pg-vide--large { grid-column: 1 / -1; padding: 60px 20px; }

/* Pied de page en colonnes. */
.pg-foot__cols {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 26px; flex: 1 1 420px;
}
.pg-foot__cols > div { display: flex; flex-direction: column; gap: 7px; }
.pg-foot__cols b { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.pg-foot__cols a { font-size: 13px; color: var(--ink-2); }
.pg-foot__cols a:hover { color: var(--accent); }
.pg-foot__txt { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }

/* ── Les encarts de communauté ──────────────────────────────────────────
   ⚠️ UN IFRAME NE SE REDIMENSIONNE PAS TOUT SEUL. Les deux cadres portaient
   une largeur fixe écrite dans leur balise — 350 px pour Discord, 1500 px
   pour Facebook — et débordaient donc de leur colonne sur tout écran plus
   étroit. On leur donne un conteneur qui commande la largeur, et l'iframe
   la suit. */
.pg-embed {
    width: 100%; border-radius: var(--radius);
    overflow: hidden; background: var(--surface);
    border: 1px solid var(--ligne);
}
.pg-embed iframe { display: block; width: 100%; border: 0; }

/* ⚠️ LA TAILLE VIENT DES OPTIONS DU THÈME, en style direct sur l'élément :
   ces règles ne fixent que ce qui ne se règle pas. Écrire ici une largeur
   la ferait gagner sur le réglage, et le champ de l'écran d'options
   n'aurait plus aucun effet — un réglage qui ne règle rien. */
.pg-foot__com { min-width: 0; }
.pg-foot__com > b { display: block; margin-bottom: 10px; }

.pg-embed--fb { margin: 0 auto; }

.pg-sec--com .pg-sec__head { justify-content: center; text-align: center; }

@media (max-width: 1000px) {
    .pg-cat { grid-template-columns: 1fr; }
    .pg-filtres { position: static; }
}

@media (max-width: 700px) {
    .pg-barre__in { align-items: stretch; }
    .pg-barre__f { flex-wrap: wrap; }
    /* Les deux contrôles passent l'un sous l'autre : à demi-largeur, la
       pastille de tri paraissait posée de travers sous une recherche qui,
       elle, prend toute la ligne. */
    .pg-search--l, .pg-tri { flex: 1 1 100%; }
    .pg-band__chiffres { width: 100%; }
    .pg-mini { flex: 1 1 44%; }
}

/* ── L'affichage en liste ──
   La MÊME carte, retournée : une seule colonne, l'image à gauche, et la ligne
   de détails que la grille n'a pas la place de montrer. Refaire un second
   gabarit pour la liste aurait garanti que les deux divergent au premier
   changement. */
.pg-grille--liste { grid-template-columns: 1fr; gap: 10px; }
.pg-grille--liste .pg-carte {
    flex-direction: row; align-items: stretch;
}
.pg-grille--liste .pg-carte:hover { transform: none; }
.pg-grille--liste .pg-carte__img { flex: none; width: 190px; aspect-ratio: 16 / 9; }
.pg-grille--liste .pg-carte__c { justify-content: center; padding: 12px 16px; }
.pg-grille--liste .pg-carte__t { -webkit-line-clamp: 1; font-size: 14.5px; }
.pg-grille--liste .pg-carte__plus { display: block; }
.pg-grille--liste .pg-carte__p {
    display: flex; align-items: center; padding: 12px 16px 12px 0; flex: none;
}

/* En grille, la ligne de détails n'est pas affichée : 185 px de large ne
   suffisent pas à la lire, et elle ne ferait qu'allonger la carte. */
.pg-carte__plus { display: none; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 620px) {
    /* Sous cette largeur, la liste redevient une pile : 190 px d'image plus le
       texte ne tiennent plus côte à côte. */
    .pg-grille--liste .pg-carte { flex-direction: column; }
    .pg-grille--liste .pg-carte__img { width: 100%; }
    .pg-grille--liste .pg-carte__p { padding: 0 13px 13px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FICHE D'UN JEU
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le bandeau d'incomplétude. Ambre et non rouge : la fiche n'est pas cassée,
   elle est en cours d'écriture — le rouge annoncerait une panne. */
.pg-alerte {
    background: color-mix(in srgb, var(--ambre) 12%, var(--bg));
    border-bottom: 1px solid color-mix(in srgb, var(--ambre) 30%, transparent);
}
.pg-alerte__in {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-top: 14px; padding-bottom: 14px;
}
.pg-alerte__i { font-size: 20px; flex: none; }
.pg-alerte b { display: block; font-size: 13.5px; }
.pg-alerte p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); max-width: 82ch; }
.pg-alerte > div > div { flex: 1; min-width: 0; }
.pg-alerte .pg-lien { margin-left: auto; white-space: nowrap; }

/* ── L'en-tête ──
   La bannière du jeu sert de fond, floutée et assombrie : elle donne
   l'ambiance sans jamais disputer la lisibilité au texte posé dessus. */
.pg-fiche { position: relative; overflow: hidden; border-bottom: 1px solid var(--ligne); }
.pg-fiche::before {
    content: ''; position: absolute; inset: -30px;
    background-image: var(--fond, none);
    background-size: cover; background-position: center;
    filter: blur(26px) saturate(1.15); transform: scale(1.08);
    opacity: .5;
}
.pg-fiche__voile {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 62%, transparent),
        color-mix(in srgb, var(--bg) 92%, transparent) 78%, var(--bg));
}
/* La bande d'image, par-dessus le flou. Un dégradé la fond dans la page vers
   le bas : sans lui, elle se termine par une arête nette qui coupe la fiche
   en deux. */
.pg-fiche__banniere {
    position: relative; z-index: 1;
    height: clamp(160px, 22vw, 280px); overflow: hidden;
}
.pg-fiche__banniere img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.pg-fiche__banniere::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%,
        color-mix(in srgb, var(--bg) 70%, transparent) 78%, var(--bg));
}

.pg-fiche__in {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: 190px minmax(0, 1fr);
    gap: 28px; align-items: end; padding-top: 40px; padding-bottom: 34px;
}
/* La jaquette remonte SUR la bannière : c'est ce qui relie les deux images au
   lieu de les empiler. */
.pg-fiche__banniere + .pg-fiche__voile + .pg-fiche__in { margin-top: -90px; padding-top: 0; }

.pg-fiche__jaquette {
    aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
    background: var(--surface); box-shadow: var(--ombre-f);
    border: 1px solid var(--ligne);
    display: flex; align-items: center; justify-content: center; font-size: 44px;
}
.pg-fiche__jaquette img { width: 100%; height: 100%; object-fit: cover; }

.pg-fil { display: flex; gap: 7px; font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.pg-fil a:hover { color: var(--accent); }

.pg-fiche__txt h1 {
    margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.pg-fiche__meta {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2);
}
.pg-fiche__res { margin: 0 0 14px; max-width: 76ch; font-size: 13.5px; color: var(--ink-2); }
.pg-fiche__prov { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Le corps, en deux colonnes ── */
.pg-fiche__corps {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px; align-items: start; padding-top: 28px; padding-bottom: 44px;
}
.pg-fiche__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pg-fiche__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }

.pg-bloc2 {
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre); padding: 20px;
}
.pg-bloc2--compact { padding: 16px; }
.pg-bloc2 .pg-h2 { margin: 0 0 16px; }
.pg-h3 { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 9px; }
.pg-aide2 { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.pg-mono2 { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ── Les trois paliers ── */
.pg-paliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pg-palier {
    border: 1px solid var(--ligne); border-radius: 12px;
    background: var(--surface); padding: 14px;
}
.pg-palier header { margin-bottom: 11px; }
.pg-palier header b { display: block; font-size: 13.5px; }
.pg-palier header i { font-style: normal; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; display: block; margin-top: 3px; }
/* Un palier absent s'affiche en creux : il ne doit ni se confondre avec un
   palier rempli, ni disparaître — son absence est une information. */
.pg-palier--vide { border-style: dashed; opacity: .8; }
.pg-palier__vide { margin: 0; font-size: 12px; color: var(--ink-3); font-style: italic; }

.pg-specs { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0 0 10px; font-size: 12.5px; }
.pg-specs dt { color: var(--ink-3); white-space: nowrap; }
.pg-specs dd { margin: 0; font-weight: 600; text-align: right; }

.pg-mat { margin-top: 9px; }
.pg-mat__t { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.pg-puce {
    display: inline-block; margin: 0 4px 4px 0; padding: 3px 9px;
    border-radius: 7px; background: var(--carte); border: 1px solid var(--ligne);
    font-size: 11.5px; font-weight: 600;
}
.pg-puce i { font-style: normal; font-size: 10px; color: var(--ink-3); }

.pg-communs {
    display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--ligne); font-size: 12.5px; color: var(--ink-2);
}

/* ── Les mesures ── */
.pg-mesures + .pg-mesures { margin-top: 18px; }
.pg-mesures__def { display: block; font-size: 13px; margin-bottom: 8px; }
/* Le tableau déborde DANS SON CADRE, jamais la page : sur un téléphone, une
   page qui glisse latéralement rend toute la lecture pénible. */
.pg-tbl { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 10px; }
.pg-tbl table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pg-tbl th {
    text-align: left; padding: 9px 12px; background: var(--surface);
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); font-weight: 700; white-space: nowrap;
}
.pg-tbl td { padding: 10px 12px; border-top: 1px solid var(--ligne); vertical-align: top; }
.pg-tbl td b { display: block; }
.pg-tbl td i { font-style: normal; font-size: 11px; color: var(--ink-3); display: block; }
.pg-opts { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-fps b { font-size: 17px; font-weight: 800; color: var(--vert); }
.pg-src { max-width: 190px; }
.pg-src a { color: var(--accent); text-decoration: underline; word-break: break-word; }

.pg-note2 {
    display: flex; gap: 12px; padding: 16px; border-radius: 12px;
    background: color-mix(in srgb, var(--ambre) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--ambre) 22%, transparent);
}
.pg-note2 span[aria-hidden] { font-size: 22px; flex: none; }
.pg-note2 b { display: block; font-size: 13.5px; }
.pg-note2 p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

/* ── 🏆 Le classement des machines ─────────────────────────────────────── */
.pg-clas { display: flex; flex-direction: column; gap: 10px; }

.pg-clas__l {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) 150px;
    gap: 16px; align-items: center;
    padding: 14px 16px; border: 1px solid var(--ligne);
    border-radius: var(--radius); background: var(--carte);
}
/* Le podium se distingue par un liseré, pas par une couleur de fond : trois
   cartes criardes au-dessus de vingt sobres déséquilibrent la page entière. */
.pg-clas__l--podium { border-color: color-mix(in srgb, var(--ambre) 45%, var(--ligne)); }

.pg-clas__rang { text-align: center; line-height: 1.1; }
.pg-clas__rang b { display: block; font-size: 20px; font-weight: 700; color: var(--ink-3); }
.pg-clas__med { display: block; font-size: 24px; }
.pg-clas__l--podium .pg-clas__rang b { color: var(--ambre); }

.pg-clas__c { min-width: 0; }
.pg-clas__tete { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pg-clas__chassis { font-size: 17px; flex: none; }
.pg-clas__gpu { font-size: 15px; font-weight: 650; color: var(--ink); }
a.pg-clas__gpu:hover { color: var(--accent); }

.pg-clas__specs {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: 12.5px; color: var(--ink-2);
}
.pg-clas__specs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pg-clas__specs a:hover { color: var(--accent); }

.pg-clas__pourquoi { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pg-clas__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.pg-clas__note { text-align: right; line-height: 1.25; }
.pg-clas__note b { font-size: 26px; font-weight: 700; }
.pg-clas__note i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.pg-clas__note span { display: block; font-size: 12.5px; color: var(--ink-2); }
.pg-clas__note .pg-lien { font-size: 12px; margin-top: 4px; display: inline-block; }

/* ⚠️ LES POINTS SONT DISCRETS, PAS EN VEDETTE. La note sur 100 dit ce que la
   machine fait des jeux — c'est elle qu'on lit d'abord. Les points ne servent
   qu'a departager deux machines que la note met a egalite : les afficher aussi
   gros ferait croire a un second verdict, alors que ce n'est qu'un rang. */
.pg-clas__pts {
    margin-top: 5px; padding-top: 5px;
    border-top: 1px solid var(--ligne);
    font-size: 11.5px !important; color: var(--ink-3) !important;
    font-variant-numeric: tabular-nums;
}
.pg-clas__pts b { font-size: 13.5px; color: var(--ink-2); }

/* La definition a cote de la note : elle explique pourquoi un 96 peut se
   trouver au-dessus d'un 100. Discrete, mais toujours presente. */
.pg-clas__def {
    display: block; font-style: normal;
    font-size: 11px; color: var(--ink-3); margin-top: 1px;
}

/* ══════════ LES CONDITIONS D'UN PALIER ══════════
   Elles precedent le materiel et doivent s'en distinguer : ce ne sont pas des
   exigences de composants mais le CONTRAT du palier — a quelle definition,
   pour combien d'images. D'ou le filet et le fond legerement tenu. */
.pg-specs--cond {
    margin-bottom: 10px; padding: 8px 10px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 0 8px 8px 0;
}

/* La note de l'editeur : une precision, pas une exigence. */
.pg-palier__note {
    margin: 10px 0 0; padding-top: 8px;
    border-top: 1px dashed var(--ligne);
    font-size: 12px; line-height: 1.55; color: var(--ink-3);
}

.pg-clas__l--vert  .pg-clas__note b { color: var(--vert); }
.pg-clas__l--jaune .pg-clas__note b { color: color-mix(in srgb, var(--vert) 55%, var(--ambre)); }
.pg-clas__l--ambre .pg-clas__note b { color: var(--ambre); }
.pg-clas__l--rouge .pg-clas__note b { color: var(--rouge); }

.pg-clas__ecartes {
    margin: 18px 0 0; font-size: 12.5px; color: var(--ink-3);
    line-height: 1.6; text-align: center;
}

/* ⚠️ SOUS 720 px, LA COLONNE DE NOTE PASSE SOUS LE RESTE. À trois colonnes
   sur un téléphone, le nom de la carte se réduisait à deux mots coupés. */
@media (max-width: 720px) {
    .pg-clas__l { grid-template-columns: 48px minmax(0, 1fr); }
    .pg-clas__note { grid-column: 1 / -1; text-align: left; display: flex;
                    align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .pg-clas__note span { display: inline; }
}

/* ══════════════════════ LA LISTE DES ANALYSES ══════════════════════
   ⚠️ PRÉFIXE `pg-anl`, ET SURTOUT PAS `pg-clas`. Les deux pages se ressemblent
   à dessein, mais le classement a ses propres règles d'admission : partager
   les classes ferait qu'une retouche du palmarès repeindrait en silence une
   liste qui n'obéit pas aux mêmes règles. Ce module a déjà payé deux fois le
   prix d'un nom de classe réutilisé.

   ⚠️ CE N'ÉTAIT PAS DES CARTES AVANT, MAIS DES LIGNES. Chacune s'intitulait
   « PC fixe » ou « PC portable » — deux libellés répétés — et reléguait les
   pièces dans une colonne grise, alignée à droite, en corps 11. On ne pouvait
   pas distinguer deux machines sans lire trois lignes de gris clair. */
.pg-anl__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

.pg-anl__barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Le compte vit dans son propre élément : collé au libellé, « PC fixes (1) »
   se lit comme le nom du filtre et grossit la barre pour rien.

   ⚠️ LA RÈGLE EST PORTÉE PAR `.pg-anl__barre`, PAS PAR `.pg-ongl` SEUL.
   `pg-ongl` sert aussi aux deux catalogues, au classement et aux joueurs :
   une règle posée sur la classe partagée attendrait le jour où l'un d'eux
   glisse un `<i>` dans un onglet pour le repeindre sans prévenir. */
.pg-anl__barre .pg-ongl a i {
  font-style: normal; font-size: 11px; font-weight: 600;
  margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface); color: var(--ink-3);
}
.pg-anl__barre .pg-ongl a.actif i { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

.pg-anl__tri { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12.5px; }
.pg-anl__tri > span { color: var(--ink-3); margin-right: 2px; }
.pg-anl__tri a {
  padding: 5px 10px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
}
.pg-anl__tri a:hover { background: var(--surface); }
.pg-anl__tri a.actif { border-color: var(--ligne); background: var(--carte); color: var(--ink-1); font-weight: 600; }

.pg-anl__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }

.pg-anl__c {
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 16px;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--ligne);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  transition: box-shadow .16s ease, transform .16s ease;
}
.pg-anl__c:hover { box-shadow: var(--ombre-f); transform: translateY(-1px); }

/* La couleur du liseré porte le verdict avant qu'on ait lu le chiffre. */
.pg-anl__c--vert  { border-left-color: var(--vert); }
.pg-anl__c--jaune { border-left-color: var(--jaune, var(--ambre)); }
.pg-anl__c--ambre { border-left-color: var(--ambre); }
.pg-anl__c--rouge { border-left-color: var(--rouge); }

.pg-anl__tete { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; }

.pg-anl__ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); font-size: 19px; overflow: hidden;
}
.pg-anl__ico img { width: 100%; height: 100%; object-fit: contain; }

.pg-anl__id { min-width: 0; }
.pg-anl__id b { display: block; font-size: 14.5px; line-height: 1.3; }
.pg-anl__id b, .pg-anl__id a { color: var(--ink-1); text-decoration: none; }
.pg-anl__id a:hover { color: var(--accent); text-decoration: underline; }
.pg-anl__id i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* Le chiffre et son dénominateur sur une ligne, le mot en dessous : une grille
   à deux colonnes évite d'ajouter un élément d'emballage au gabarit. */
.pg-anl__note {
  display: grid; grid-template-columns: auto auto;
  justify-content: end; align-items: baseline;
  text-decoration: none; line-height: 1.1; white-space: nowrap;
}
.pg-anl__note span { grid-column: 1 / -1; justify-self: end; }
/* ⚠️ « 81 » SEUL NE DIT PAS SUR QUELLE ÉCHELLE. Le dénominateur tient en deux
   caractères et supprime la question ; c'est aussi ce qu'affiche le classement,
   et deux pages qui présentent la même note doivent la présenter pareil. */
.pg-anl__note b { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pg-anl__note i { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 1px; }
.pg-anl__note span { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.pg-anl__note--vert  b { color: var(--vert); }
.pg-anl__note--jaune b, .pg-anl__note--ambre b { color: var(--ambre); }
.pg-anl__note--rouge b { color: var(--rouge); }
.pg-anl__note--vide  b { color: var(--ink-3); font-size: 20px; }

/* Les points, sous le mot. Discrets à dessein : la note reste ce qu'on lit en
   premier, les points ne servent qu'à départager le haut du tableau. Ils
   prennent toute la largeur de la grille, comme le mot juste au-dessus. */
.pg-anl__pts {
  grid-column: 1 / -1; justify-self: end; margin-top: 2px;
  font-style: normal; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}

.pg-anl__specs { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12px; color: var(--ink-2); }
.pg-anl__specs a { color: inherit; text-decoration: none; }
.pg-anl__specs a:hover { color: var(--accent); text-decoration: underline; }

.pg-anl__pourquoi {
  margin: 0; font-size: 11.5px; color: var(--ink-3);
  padding-top: 9px; border-top: 1px solid var(--ligne);
}

.pg-anl__bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pg-anl__tags { display: flex; flex-wrap: wrap; gap: 5px; }

.pg-anl__lien { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.pg-anl__lien:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .pg-anl__g { grid-template-columns: 1fr; }
  /* Sous cette largeur, trois colonnes écrasent le nom de la carte à deux
     caractères : la note passe sous l'identité plutôt que de lui disputer
     la place. */
  .pg-anl__tete { grid-template-columns: 40px minmax(0, 1fr); }
  .pg-anl__note { grid-column: 2; grid-template-columns: auto auto 1fr; justify-content: start; }
  .pg-anl__note span { grid-column: 3; justify-self: start; margin: 0 0 0 8px; }
  .pg-anl__barre { align-items: flex-start; }
}

/* ═══════════════════════ LE BANDEAU DÉFILANT ═══════════════════════
   Il vit tout en haut de CHAQUE page. Trois contraintes en découlent :

   ⚠️ 1. IL NE DOIT RIEN COÛTER À CHAQUE IMAGE. L'animation ne porte que sur
   `transform`, que le processeur graphique compose sans repeindre le texte.
   Animer `left` ou `margin` forcerait un recalcul de mise en page soixante
   fois par seconde, sur toutes les pages — le genre de détail qui fait
   chauffer un portable sans qu'on sache pourquoi.

   ⚠️ 2. IL DOIT POUVOIR S'ARRÊTER. Un texte qui bouge est illisible pour qui
   lit lentement, et plusieurs troubles de l'attention le rendent franchement
   pénible. Le survol et le focus clavier le figent.

   ⚠️ 3. IL DOIT RESPECTER « MOUVEMENT RÉDUIT ». Ce réglage système n'est pas
   une préférence esthétique : il est coché par des gens que le mouvement rend
   malades. On ne le contourne pas — le bandeau devient alors une bande fixe
   que l'on fait défiler soi-même. */
.pg-bandeau {
  --bandeau-duree: 40s;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 12%, var(--carte)),
              color-mix(in srgb, var(--accent) 4%, var(--carte)));
  border-bottom: 1px solid var(--ligne);
}

/* Les deux extrémités s'effacent : sans elles, le texte se coupe net au bord
   et l'on voit la couture du cycle. */
.pg-bandeau::before,
.pg-bandeau::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
  pointer-events: none;
}
.pg-bandeau::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.pg-bandeau::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.pg-bandeau__voie { display: flex; width: max-content; animation: pg-bandeau-defile var(--bandeau-duree) linear infinite; }

/* ⚠️ LA TRANSLATION EST DE −50 %, PAS DE −100 %. La voie contient DEUX copies
   de la liste : à la moitié, la seconde occupe exactement la position de
   départ de la première, et le retour à zéro ne se voit pas. Avec −100 %, la
   bande se viderait avant de repartir. */
@keyframes pg-bandeau-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.pg-bandeau:hover .pg-bandeau__voie,
.pg-bandeau:focus-within .pg-bandeau__voie { animation-play-state: paused; }

/* ── La commande de pause ──
   ⚠️ LE SURVOL NE SUFFIT PAS : un téléphone ne survole rien et n'a pas de
   touche de tabulation. Sans ce bouton, arrêter le texte qui défile demandait
   de quitter la page — sur toutes les pages du site. */
.pg-bandeau__case:checked ~ .pg-bandeau__voie,
.pg-bandeau__case:checked ~ .pg-bandeau__voie .pg-bandeau__i { animation-play-state: paused; }

/* Masquée à l'œil, JAMAIS au clavier : `display:none` la sortirait de l'ordre
   de tabulation et emporterait la pause avec elle. */
.pg-bandeau__case {
  position: absolute; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden;
}

.pg-bandeau__pause {
  position: absolute; z-index: 3;
  top: 50%; right: 6px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--ligne); border-radius: 999px;
  background: var(--carte);
  color: var(--ink-2);
  font-size: 9px; line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.pg-bandeau__pause:hover { color: var(--accent); border-color: var(--accent); }

/* L'anneau de focus se porte sur l'étiquette : c'est elle qu'on voit. */
.pg-bandeau__case:focus-visible ~ .pg-bandeau__pause {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.pg-bandeau__ic--lire { display: none; }
.pg-bandeau__case:checked ~ .pg-bandeau__pause .pg-bandeau__ic--stop { display: none; }
.pg-bandeau__case:checked ~ .pg-bandeau__pause .pg-bandeau__ic--lire { display: inline; }

.pg-bandeau__piste { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }

.pg-bandeau__i {
  --bandeau-teinte: 210;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 18px;
  font-size: 12.5px; white-space: nowrap;
  border-right: 1px solid var(--ligne);
}

.pg-bandeau__e { font-size: 14px; line-height: 1; }

.pg-bandeau__t {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--bandeau-teinte) 70% 45%);
}

.pg-bandeau__v { color: var(--ink-1); font-weight: 600; text-decoration: none; }
a.pg-bandeau__v:hover { color: hsl(var(--bandeau-teinte) 70% 45%); text-decoration: underline; }

/* ── Les couleurs animées, en option ──
   ⚠️ C'EST LA TEINTE QUI TOURNE, PAS LE CONTENU. `filter: hue-rotate` sur le
   bandeau entier repeindrait aussi le texte en le rendant illisible à la
   moitié du cycle. On n'anime donc que la variable de teinte des libellés,
   chacun partant de SA couleur : le fil chatoie, mais un processeur reste
   reconnaissable au premier coup d'œil. */
@property --bandeau-teinte {
  syntax: '<number>'; inherits: true; initial-value: 210;
}

.pg-bandeau--rgb .pg-bandeau__i { animation: pg-bandeau-teinte 9s linear infinite; }

@keyframes pg-bandeau-teinte {
  to { --bandeau-teinte: 570; }   /* 210 + 360 : un tour complet de la roue */
}

.pg-bandeau--rgb { background-size: 200% 100%; animation: pg-bandeau-fond 14s ease-in-out infinite alternate; }

@keyframes pg-bandeau-fond {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (max-width: 700px) {
  .pg-bandeau__i { padding: 6px 13px; font-size: 12px; }
  .pg-bandeau__t { display: none; }   /* Sur téléphone, l'emoji suffit à typer l'info. */
  .pg-bandeau::before, .pg-bandeau::after { width: 28px; }
}

/* ⚠️ « MOUVEMENT RÉDUIT » COUPE TOUT, y compris les couleurs animées : une
   teinte qui pulse est un mouvement, même si rien ne se déplace. La bande
   devient alors défilable à la main, et rien n'est perdu. */
@media (prefers-reduced-motion: reduce) {
  .pg-bandeau__voie { animation: none; }
  .pg-bandeau--rgb .pg-bandeau__i,
  .pg-bandeau--rgb { animation: none; }
  .pg-bandeau { overflow-x: auto; }
  .pg-bandeau__voie { width: auto; }
  .pg-bandeau__piste:nth-child(2) { display: none; }  /* la copie ne sert plus */

  /* Plus rien ne bouge : un bouton « pause » n'aurait plus rien à arrêter, et
     une commande sans effet est pire qu'une commande absente. */
  .pg-bandeau__case,
  .pg-bandeau__pause { display: none; }
}

/* ══════════════ LE CLASSEMENT ET SA COLONNE DE MÉTHODE ══════════════
   ⚠️ LA MÉTHODE SUIT LA LECTURE, ELLE NE LA PRÉCÈDE PLUS. En bandeau de tête,
   on la lisait une fois puis elle disparaissait au premier défilement — au
   moment exact où l'on compare des notes et où la question « sur quoi ? » se
   pose. Collée en haut de sa colonne, elle reste sous les yeux tout du long. */
.pg-clasg { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }

.pg-clasg__a { min-width: 0; }

.pg-clasg__b {
  display: grid; gap: 12px; align-content: start;
  /* ⚠️ `top` DOIT DÉPASSER LA HAUTEUR DE L'EN-TÊTE COLLANT, sinon la colonne
     se glisse dessous et son premier titre devient illisible. */
  position: sticky; top: 84px;
}

.pg-clasg__c {
  padding: 15px 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--radius);
}
.pg-clasg__c--gris { background: var(--carte); border-color: var(--ligne); }

.pg-clasg__t { display: block; font-size: 13.5px; margin-bottom: 7px; }
.pg-clasg__c p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.pg-clasg__c p:last-of-type { margin-bottom: 0; }
.pg-clasg__c .pg-btn { margin-top: 10px; width: 100%; justify-content: center; }

@media (max-width: 900px) {
  /* Sous cette largeur la colonne passerait à deux cents pixels : illisible.
     Elle redevient un bloc, et repasse AU-DESSUS du classement — c'est là que
     se lit une règle quand on ne peut plus l'avoir à côté. */
  .pg-clasg { grid-template-columns: minmax(0, 1fr); }
  .pg-clasg__b { position: static; order: -1; }
}

/* ══════════════════════ LA DOCUMENTATION DE L'API ══════════════════════ */
.pg-api { max-width: 860px; }

.pg-api__t { margin: 34px 0 10px; font-size: 19px; letter-spacing: -.015em; }
.pg-api__t:first-of-type { margin-top: 8px; }
.pg-api__x { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

.pg-api code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 5px; padding: 1px 6px;
}

.pg-api__regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 8px; }

.pg-api__r {
  padding: 14px 16px; background: var(--carte);
  border: 1px solid var(--ligne); border-radius: var(--radius);
}
/* ⚠️ `> b`, PAS `b`. Le titre de la carte est un enfant direct ; la regle
   sans chevron attrapait aussi les gras a l'interieur du paragraphe et les
   passait en bloc — chaque mot souligne partait a la ligne. */
.pg-api__r > b { display: block; font-size: 14px; margin-bottom: 5px; }
.pg-api__r p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

/* La méthode HTTP : une pastille, pour qu'on distingue une lecture d'un envoi
   sans avoir à lire. */
.pg-api__m {
  display: inline-block; min-width: 46px; text-align: center;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  background: color-mix(in srgb, var(--vert) 14%, transparent); color: var(--vert);
}
.pg-api__m--post { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

.pg-api__ex { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.pg-api__ex li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pg-api__ex a { text-decoration: none; }
.pg-api__ex i { font-style: normal; color: var(--ink-3); font-size: 12.5px; }

.pg-api__duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin-bottom: 14px; }

.pg-api__code {
  margin: 0 0 14px; padding: 13px 15px; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 11px;
  font-size: 12.5px; line-height: 1.6;
}
/* Dans un bloc de code, le fond et le cadre du `code` en ligne feraient double. */
.pg-api__code code { background: none; border: 0; padding: 0; font-size: inherit; }

.pg-api__codes { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-api__codes li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }

.pg-api__eps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.pg-api__eps > li {
  padding: 13px 15px; background: var(--carte);
  border: 1px solid var(--ligne); border-radius: 12px;
}
.pg-api__eps > li > p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

.pg-api__ep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pg-api__p { margin: 10px 0 0; display: grid; gap: 5px; }
.pg-api__p > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.pg-api__p dt { margin: 0; }
.pg-api__p dd { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

.pg-api__note {
  margin: 16px 0 0; padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 12px;
}
.pg-api__note--gris {
  background: var(--surface);
  border-color: var(--ligne);
}
.pg-api__note > b { display: block; font-size: 14px; margin-bottom: 5px; }
.pg-api__note p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 560px) {
  .pg-api__p > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ══════════════════ LES DEUX ONGLETS DE LA DOCUMENTATION ══════════════════
   ⚠️ DES BOUTONS RADIO, PAS UN SCRIPT. Les deux panneaux sont dans le HTML :
   la recherche du navigateur (Ctrl+F) les trouve tous les deux, les moteurs
   les indexent tous les deux, et rien ne dépend du chargement d'un fichier.
   Un onglet en JavaScript aurait rendu la moitié de cette page invisible à
   qui la cherche — sur la page même où l'on explique qu'une API doit être
   simple à lire.

   ⚠️ ET CE SONT DE VRAIS BOUTONS RADIO, pas des `div` déguisés en onglets.
   Le clavier les parcourt aux flèches, le lecteur d'écran annonce « Novices,
   sélectionné », et rien de tout cela n'a eu à être réécrit. */
.pg-ong { margin-top: 26px; }

/* Masqués à l'œil, jamais au clavier : `display:none` les sortirait de
   l'ordre de tabulation et emporterait la navigation avec eux. */
.pg-ong__r {
  position: absolute; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden;
}

.pg-ong__barre {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px; margin-bottom: 22px;
}

.pg-ong__o {
  display: block; padding: 13px 16px;
  background: var(--carte);
  border: 1px solid var(--ligne); border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pg-ong__o > b     { display: block; font-size: 14.5px; }
.pg-ong__o > small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.pg-ong__o:hover   { border-color: color-mix(in srgb, var(--accent) 45%, var(--ligne)); }

/* L'onglet retenu. Le fond ET la bordure changent : la seule bordure ne se
   voit pas assez pour dire « c'est celui-ci que vous lisez ». */
#vue-novice:checked ~ .pg-ong__barre [for="vue-novice"],
#vue-pro:checked    ~ .pg-ong__barre [for="vue-pro"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--carte));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* L'anneau de focus se porte sur l'étiquette : c'est elle qu'on voit. */
#vue-novice:focus-visible ~ .pg-ong__barre [for="vue-novice"],
#vue-pro:focus-visible    ~ .pg-ong__barre [for="vue-pro"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.pg-ong__p { display: none; }
#vue-novice:checked ~ .pg-ong__p--1,
#vue-pro:checked    ~ .pg-ong__p--2 { display: block; }

/* Le premier titre d'un panneau n'a pas à décoller de la barre d'onglets. */
.pg-ong__p > .pg-api__t:first-child { margin-top: 0; }

/* ══════════════════ LA COLORATION DES EXEMPLES ══════════════════
   ⚠️ LES COULEURS SONT DES VARIABLES, redéfinies en thème sombre. Un jeu de
   couleurs pensé sur fond blanc devient illisible sur fond nuit — le bleu des
   clefs y passe sous le seuil de contraste et l'on ne distingue plus la
   structure, qui est tout ce qu'on vient chercher dans un extrait.

   Les teintes sont posées à la main plutôt que dérivées de `--accent` : le
   thème du site est réglable, et une clef JSON qui prendrait la couleur de
   l'accent se confondrait avec les liens. */
:root {
  --cd-cle:  #0550ae;   /* les noms de champs */
  --cd-txt:  #0a7c42;   /* les chaînes */
  --cd-num:  #b3510a;   /* les nombres */
  --cd-bool: #8250df;   /* true / false / null, et les options de commande */
  --cd-ent:  #953800;   /* les en-têtes HTTP */
  --cd-com:  var(--ink-3);

  /* ⚠️ LE VERBE A SA PROPRE COULEUR, ET CE N'EST PAS `--vert`. Mesuré, le
     vert du site donnait 3,11 de contraste sur le fond des extraits — sous
     les 4,5 exigés pour du petit texte. Et le reprendre l'aurait de toute
     façon confondu avec les chaînes, qui sont vertes elles aussi. */
  --cd-verbe: #a40e26;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cd-cle:  #79c0ff;
    --cd-txt:  #7ee787;
    --cd-num:  #ffa657;
    --cd-bool: #d2a8ff;
    --cd-ent:  #ffab70;
    --cd-verbe: #ff7b72;
  }
}
:root[data-theme="dark"] {
  --cd-cle:  #79c0ff;
  --cd-txt:  #7ee787;
  --cd-num:  #ffa657;
  --cd-bool: #d2a8ff;
  --cd-ent:  #ffab70;
  --cd-verbe: #ff7b72;
}

.pg-api__code .cd-c { color: var(--cd-cle);  font-weight: 600; }
.pg-api__code .cd-s { color: var(--cd-txt); }
.pg-api__code .cd-n { color: var(--cd-num); }
.pg-api__code .cd-b { color: var(--cd-bool); }
.pg-api__code .cd-h { color: var(--cd-ent);  font-weight: 600; }
.pg-api__code .cd-x { color: var(--cd-com);  font-style: italic; }

/* Le verbe et l'adresse d'une requête : c'est la ligne qu'on copie, elle doit
   sauter aux yeux avant les en-têtes. */
.pg-api__code .cd-v { color: var(--cd-verbe); font-weight: 700; }
.pg-api__code .cd-u { color: var(--ink); font-weight: 600; }

/* Dans un encadré, l'extrait ne reprend pas la marge d'un bloc isolé. */
.pg-api__note .pg-api__code { margin: 10px 0 0; }

.pg-prose { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
/* La description d'une fiche : le rendu Markdown des pages libres, à la
   taille d'un bloc de fiche plutôt qu'à celle d'un article. */
.pg-prose.md-corps { font-size: 14.5px; }
.pg-prose.md-corps h1 { font-size: 21px; }
.pg-prose.md-corps h2 { font-size: 18px; }
.pg-prose.md-corps h3 { font-size: 16px; }
.pg-prose.md-corps h4 { font-size: 14.5px; }

/* ── Les vidéos ── */
.pg-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pg-video { margin: 0; }
.pg-video__b {
    position: relative; display: block; width: 100%; padding: 0; border: 0;
    aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; cursor: pointer;
    background: var(--surface); box-shadow: var(--ombre);
}
.pg-video__b img { width: 100%; height: 100%; object-fit: cover; }
.pg-video__play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff; background: rgba(0,0,0,.34);
    transition: background .18s;
}
.pg-video__b:hover .pg-video__play { background: rgba(0,0,0,.16); }
.pg-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 11px; display: block; }
.pg-video figcaption { margin-top: 7px; font-size: 12.5px; }
.pg-video__g { display: block; font-size: 11px; color: var(--ink-3); }

/* ── Ce qui manque ── */
.pg-manques { list-style: none; margin: 0; padding: 0; }
.pg-manques li { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--ligne); }
.pg-manques li:first-child { border-top: 0; }
.pg-manques span[aria-hidden] { font-size: 13px; flex: none; margin-top: 2px; }
.pg-manques b { font-size: 13px; }
.pg-manques p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

.pg-technos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pg-technos li { font-size: 12.5px; display: flex; gap: 8px; align-items: center; }

.pg-pastille.blue { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.pg-pastille.amber { background: color-mix(in srgb, var(--ambre) 14%, transparent); color: var(--ambre); }
.pg-pastille.grey  { background: var(--surface); color: var(--ink-2); }

@media (max-width: 1000px) {
    .pg-fiche__corps { grid-template-columns: 1fr; }
    .pg-fiche__side { position: static; }
}

@media (max-width: 620px) {
    .pg-fiche__in { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
    .pg-specs dd { text-align: left; }
    .pg-communs { flex-direction: column; gap: 7px; }
}


/* ── Le modal vidéo ──
   Bâti sur <dialog> : le fond assombri, la fermeture par Échap et le piège au
   clavier viennent du navigateur, gratuitement et correctement — trois choses
   qu'on réécrit toujours mal à la main. */
.pg-modal {
    width: min(94vw, 980px); padding: 0; border: 0;
    border-radius: calc(var(--radius) + 4px);
    background: var(--carte); color: var(--ink);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
}
.pg-modal::backdrop { background: rgba(4, 8, 18, .72); backdrop-filter: blur(3px); }
.pg-modal__head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 16px; border-bottom: 1px solid var(--ligne);
}
.pg-modal__head b { font-size: 13.5px; min-width: 0; }
.pg-modal__x {
    flex: none; width: 30px; height: 30px; border-radius: 8px;
    background: var(--surface); border: 1px solid var(--ligne);
    color: var(--ink-2); cursor: pointer; font-size: 13px; line-height: 1;
}
.pg-modal__x:hover { color: var(--ink); border-color: var(--accent); }
.pg-modal__corps { line-height: 0; }
.pg-modal__corps iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }


/* ── Le logo du site ──
   Les deux versions sont dans le HTML ; la feuille montre celle qui va avec le
   thème. Choisir en JavaScript ferait apparaître le mauvais logo le temps d'un
   battement de cil, à chaque chargement. */
.pg-brand__logo { display: flex; align-items: center; }

/* ⚠️ LA SPÉCIFICITÉ, PAS L'ORDRE. « .pg-brand__logo img » vaut (0,1,1) et
   « .pg-logo-sombre » seulement (0,1,0) : le premier l'emportait quelle que
   soit sa position dans le fichier, et son « display: block » annulait le
   « display: none » du second. Les DEUX logos s'affichaient, l'un sous
   l'autre. La règle partagée ne pose donc plus de display du tout, et chaque
   variante est visée avec la même spécificité que celle qui la cache. */
.pg-brand__logo img { max-height: 38px; width: auto; }
.pg-brand__logo .pg-logo-clair  { display: block; }
.pg-brand__logo .pg-logo-sombre { display: none; }

:root[data-theme="dark"] .pg-brand__logo .pg-logo-clair  { display: none; }
:root[data-theme="dark"] .pg-brand__logo .pg-logo-sombre { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pg-brand__logo .pg-logo-clair  { display: none; }
    :root:not([data-theme="light"]) .pg-brand__logo .pg-logo-sombre { display: block; }
}
/* Le logo du pied de page est plus GRAND que celui de l'en-tete, pas plus
   petit : la barre du haut est contrainte en hauteur, le pied ne l'est pas, et
   c'est la derniere chose que le visiteur voit. */
.pg-brand--foot .pg-brand__logo img { max-height: 62px; }

.pg-foot__mail { margin: 8px 0 0; font-size: 13px; }
.pg-foot__mail a { color: var(--accent); }
.pg-foot__mail a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════
   PAGES D'EXPLICATION — « Comment ça marche » et « Qui sommes-nous »
   ═══════════════════════════════════════════════════════════════════════════ */

.pg-page {
    background:
        radial-gradient(900px 400px at 84% 0%,
            color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg)), var(--bg));
    border-bottom: 1px solid var(--ligne);
}
.pg-page__in {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 40px; align-items: center; padding-top: 52px; padding-bottom: 48px;
}
.pg-page__t {
    margin: 18px 0 14px; font-size: clamp(26px, 3.1vw, 40px);
    font-weight: 800; letter-spacing: -.025em; line-height: 1.12;
}
.pg-page__x { margin: 0; max-width: 60ch; font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.pg-page__img img {
    width: 100%; border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--ombre-f); border: 1px solid var(--ligne);
}

/* ── Les étapes ──
   Un fil vertical relie les numéros. Il n'est pas décoratif : il dit que la
   lecture est LINÉAIRE, que chaque étape dépend de la précédente, et qu'on ne
   peut pas les prendre dans le désordre. */
.pg-etapes { list-style: none; margin: 0; padding: 0; position: relative; }
.pg-etapes::before {
    content: ''; position: absolute; left: 23px; top: 34px; bottom: 34px;
    width: 2px; background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 45%, transparent),
        color-mix(in srgb, var(--accent-2) 20%, transparent));
}
.pg-etapes > li { position: relative; display: flex; gap: 22px; padding: 0 0 26px; }
.pg-etapes > li:last-child { padding-bottom: 0; }

.pg-etape__n {
    position: relative; z-index: 2; flex: none;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 18px; font-weight: 800;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent);
    border: 4px solid var(--bg);
}
.pg-etape__c {
    flex: 1; min-width: 0; padding: 16px 20px;
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre);
    transition: transform .16s, box-shadow .2s, border-color .2s;
}
.pg-etapes > li:hover .pg-etape__c {
    transform: translateX(3px); box-shadow: var(--ombre-f);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--ligne));
}
.pg-etape__c h2 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; }
.pg-etape__c p  { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }

/* ── Le calcul ── */
.pg-calcul {
    border: 1px solid var(--ligne); border-radius: calc(var(--radius) + 4px);
    background: var(--carte); box-shadow: var(--ombre); padding: 26px;
}
.pg-calcul__t .pg-h2 { margin-bottom: 8px; }
.pg-calcul__t .pg-aide2 { margin-bottom: 20px; max-width: 74ch; }

.pg-formule {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap; padding: 20px; border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 9%, var(--surface)),
        color-mix(in srgb, var(--accent-2) 7%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    margin-bottom: 20px;
}
.pg-formule code {
    padding: 8px 14px; border-radius: 9px;
    background: var(--carte); border: 1px solid var(--ligne);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px; font-weight: 600;
}
.pg-formule span { font-size: 17px; font-weight: 800; color: var(--accent); }

.pg-exemple {
    padding: 18px 20px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--ligne);
}
.pg-exemple > b { display: block; font-size: 13.5px; margin-bottom: 10px; }
.pg-exemple ol { margin: 0; padding-left: 20px; }
.pg-exemple li { font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.pg-exemple li b { color: var(--ink); }

/* ── La promesse ── */
.pg-promesse {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 24px; border-radius: calc(var(--radius) + 4px);
    background: color-mix(in srgb, var(--ambre) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ambre) 24%, transparent);
}
.pg-promesse__i { font-size: 32px; flex: none; line-height: 1; }
.pg-promesse h2 { margin: 0 0 7px; font-size: 17px; font-weight: 800; }
.pg-promesse p  { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; max-width: 78ch; }

/* ── L'histoire, en quinconce ──
   L'alternance rythme une lecture qui serait sinon quatre paragraphes
   identiques empilés. */
.pg-histoire { display: flex; flex-direction: column; gap: 16px; }
.pg-histoire__b {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 22px 24px; border-radius: var(--radius);
    border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre);
    max-width: 82%;
}
.pg-histoire__b:nth-child(even) { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.pg-histoire__n {
    flex: none; width: 42px; height: 42px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); font-size: 17px; font-weight: 800;
}
.pg-histoire__b h2 { margin: 0 0 7px; font-size: 16px; font-weight: 700; }
.pg-histoire__b p  { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.72; }

/* ── Les règles ── */
.pg-regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pg-regle {
    position: relative; padding: 22px 20px 20px;
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre); overflow: hidden;
}
.pg-regle::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.pg-regle__n {
    display: block; font-size: 30px; font-weight: 800; line-height: 1;
    color: color-mix(in srgb, var(--accent) 30%, transparent); margin-bottom: 8px;
}
.pg-regle p { margin: 0; font-size: 13.5px; line-height: 1.7; }

/* ── L'appel de fin ── */
.pg-final {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 28px 30px; border-radius: calc(var(--radius) + 4px);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 10%, var(--surface)),
        color-mix(in srgb, var(--accent-2) 8%, var(--surface)));
    border: 1px solid var(--ligne);
}
.pg-final .pg-h2 { margin: 0 0 5px; }
.pg-final .pg-aide2 { margin: 0; }
.pg-final__b { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
    .pg-page__in { grid-template-columns: 1fr; gap: 28px; }
    .pg-histoire__b { max-width: 100%; }
    .pg-histoire__b:nth-child(even) { align-self: stretch; flex-direction: row; text-align: left; }
}

@media (max-width: 620px) {
    .pg-etapes::before { left: 18px; }
    .pg-etape__n { width: 38px; height: 38px; font-size: 15px; }
    .pg-etapes > li { gap: 14px; }
    .pg-formule { flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CATALOGUE DES COMPOSANTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* 246 px : a 280, la troisieme carte ne tenait plus une fois la colonne de
   filtres deduite, et la grille retombait a deux — beaucoup de vide a droite. */
.pg-comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(246px, 1fr)); gap: 14px; }

.pg-comp {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); box-shadow: var(--ombre);
    transition: transform .16s, box-shadow .2s, border-color .2s;
}
.pg-comp:hover {
    transform: translateY(-3px); box-shadow: var(--ombre-f);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--ligne));
}

/* Le lien qui enveloppe la carte : il ne change RIEN a la mise en page, il
   n'ajoute qu'une zone cliquable. « display: contents » l'efface de la grille
   pour que les enfants gardent leur place exacte. */
.pg-comp__lien { display: contents; color: inherit; }
.pg-comp__fl { opacity: 0; transition: opacity .15s, transform .15s; display: inline-block; }
.pg-comp:hover .pg-comp__fl { opacity: 1; transform: translateX(2px); }
.pg-comp:hover .pg-comp__nom { color: var(--accent); }

.pg-comp__haut { display: flex; gap: 12px; align-items: center; }
.pg-comp__logo {
    flex: none; width: 52px; height: 40px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--surface); border: 1px solid var(--ligne);
}
.pg-comp__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg-comp__logo i { font-style: normal; font-size: 17px; opacity: .5; }

.pg-comp__id { min-width: 0; flex: 1; }
.pg-comp__nom {
    display: block; font-size: 14px; font-weight: 700; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-comp__meta { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ── L'indice ──
   Le nombre et son origine sont sur la MÊME ligne, jamais séparés : un nombre
   seul se lit comme une mesure, et ce n'est vrai que pour une pièce sur six. */
.pg-comp__indice { padding: 11px 12px; border-radius: 10px; background: var(--surface); }
.pg-comp__val {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.pg-comp__val b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.pg-jauge2 {
    display: block; height: 6px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.pg-jauge2 i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* L'absence d'indice occupe la MÊME place que sa présence : une carte qui
   rétrécit quand l'information manque se lit comme une carte cassée. */
.pg-comp__sans { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.pg-comp__sans b { font-size: 13px; color: var(--ink-2); }
.pg-comp__sans span { color: var(--ink-3); font-size: 11.5px; line-height: 1.5; }

.pg-comp__specs { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-comp__specs span {
    padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
    background: var(--surface); border: 1px solid var(--ligne); color: var(--ink-2);
}

.pg-comp__bas {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-top: auto;
    padding-top: 11px; border-top: 1px solid var(--ligne);
}
.pg-comp__tec { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-comp__jeux { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.pg-comp__jeux.mute { color: var(--ink-3); font-weight: 400; }

/* ── L'affichage en liste ──
   La MÊME carte, mise à plat : tout sur une ligne, l'indice au centre. Refaire
   un second gabarit garantirait que les deux divergent au premier changement. */
.pg-comps--liste { grid-template-columns: 1fr; gap: 8px; }
.pg-comps--liste .pg-comp {
    flex-direction: row; align-items: center; gap: 18px; padding: 12px 16px;
}
.pg-comps--liste .pg-comp:hover { transform: none; }
.pg-comps--liste .pg-comp__haut { flex: 1 1 260px; min-width: 0; }
.pg-comps--liste .pg-comp__indice { flex: 0 0 190px; padding: 8px 11px; }
.pg-comps--liste .pg-comp__val { margin-bottom: 6px; }
.pg-comps--liste .pg-comp__val b { font-size: 17px; }
.pg-comps--liste .pg-comp__specs { flex: 0 1 auto; }
.pg-comps--liste .pg-comp__bas {
    margin-top: 0; padding-top: 0; border-top: 0; flex: 0 0 auto;
    flex-direction: column; align-items: flex-end; gap: 5px;
}

@media (max-width: 860px) {
    .pg-comps--liste .pg-comp { flex-wrap: wrap; gap: 12px; }
    .pg-comps--liste .pg-comp__indice { flex: 1 1 100%; }
    .pg-comps--liste .pg-comp__bas { flex: 1 1 100%; flex-direction: row; align-items: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FICHE D'UN COMPOSANT
   ═══════════════════════════════════════════════════════════════════════════ */

.pg-cfiche {
    background:
        radial-gradient(800px 340px at 78% 0%,
            color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg)), var(--bg));
    border-bottom: 1px solid var(--ligne);
}
/* ── La bannière de marque ──
   MONTÉE COMME CELLE D'UNE FICHE DE JEU, et pour la même raison : une bande en
   haut, un voile par-dessus, et le contenu qui remonte dessus. Deux fiches du
   même site qui se ressemblent doivent se ressembler VRAIMENT — deux montages
   différents pour le même effet finissent toujours par diverger. */
.pg-cfiche { position: relative; overflow: hidden; }
/* Le fond flou repris de la bannière : c'est lui qui fait tenir l'ensemble.
   Sans image de marque, `--fond` reste vide et la règle ne peint rien — le
   dégradé d'accent défini plus haut reste seul, comme avant. */
.pg-cfiche::before {
    content: ''; position: absolute; inset: -30px; z-index: 0;
    background-image: var(--fond, none);
    background-size: cover; background-position: center;
    filter: blur(26px) saturate(1.15); transform: scale(1.08); opacity: .45;
}
.pg-cfiche__banniere {
    position: relative; z-index: 1;
    height: clamp(120px, 16vw, 200px); overflow: hidden;
}
.pg-cfiche__banniere img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pg-cfiche__banniere::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 26%,
        color-mix(in srgb, var(--bg) 70%, transparent) 76%, var(--bg));
}
.pg-cfiche__voile {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg,
        transparent 40%, color-mix(in srgb, var(--bg) 55%, transparent) 74%, var(--bg));
}

.pg-cfiche__in {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 22px; align-items: center; padding-top: 34px; padding-bottom: 30px;
}
/* Le contenu remonte SUR la bannière : c'est ce qui relie les deux au lieu de
   les empiler, exactement comme sur une fiche de jeu. */
.pg-cfiche__banniere + .pg-cfiche__voile + .pg-wrap { margin-top: -62px; padding-top: 0; }

.pg-cfiche__logo {
    width: 96px; height: 74px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre);
    font-size: 30px;
}
.pg-cfiche__logo img { max-width: 84%; max-height: 84%; object-fit: contain; }

.pg-cfiche__txt h1 {
    margin: 0 0 9px; font-size: clamp(21px, 2.5vw, 30px);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}

/* Les indices : le nombre en grand, son origine juste dessous. Jamais l'un
   sans l'autre — un nombre seul se lit comme une mesure. */
.pg-cfiche__ind { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-ind {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 13px 18px; border-radius: 13px; min-width: 132px;
    background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre);
}
.pg-ind__n { font-size: 11px; color: var(--ink-3); font-weight: 600; text-align: center; }
.pg-ind b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.pg-ind--vide { align-items: flex-start; max-width: 240px; }
.pg-ind--vide b { font-size: 14px; color: var(--ink-2); }
.pg-ind--vide span { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

/* ── Les caractéristiques ── */
.pg-specs2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pg-spec2 {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px; border-radius: 11px;
    background: var(--surface); border: 1px solid var(--ligne);
}
.pg-spec2__n { font-size: 11.5px; color: var(--ink-3); }
.pg-spec2 b { font-size: 15px; font-weight: 700; }
.pg-spec2 .pg-pastille { align-self: flex-start; }

/* ── Les jeux qui citent la pièce ── */
.pg-jeuxlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.pg-jeuligne {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; border-radius: 10px;
    border: 1px solid var(--ligne); background: var(--surface);
    transition: border-color .15s, background .15s;
}
.pg-jeuligne:hover { border-color: var(--accent); background: var(--carte); }
.pg-jeuligne b {
    flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Les voisins ──
   Trois colonnes : le nom, l'indice, l'écart. L'écart est la colonne utile —
   « combien je gagne en passant à celle-ci » est la vraie question. */
.pg-voisins { list-style: none; margin: 0; padding: 0; }
.pg-voisins li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 52px;
    gap: 8px; align-items: center;
    padding: 8px 0; border-top: 1px solid var(--ligne); font-size: 12.5px;
}
.pg-voisins li:first-child { border-top: 0; }
.pg-voisins a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pg-voisins a:hover { color: var(--accent); }
.pg-voisins span { font-weight: 700; }
.pg-voisins i { font-style: normal; font-size: 11.5px; color: var(--ink-3); text-align: right; }

.pg-alias { display: flex; gap: 5px; flex-wrap: wrap; }
.pg-alias span {
    padding: 3px 8px; border-radius: 7px;
    background: var(--surface); border: 1px solid var(--ligne);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
    color: var(--ink-2);
}

@media (max-width: 900px) {
    .pg-cfiche__in { grid-template-columns: 76px minmax(0, 1fr); }
    .pg-cfiche__ind { grid-column: 1 / -1; }
    .pg-cfiche__logo { width: 76px; height: 60px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   UNE PAGE LIBRE, ÉCRITE EN MARKDOWN
   ══════════════════════════════════════════════════════════════════════════ */

.pg-libre__in { max-width: 780px; padding-top: 34px; padding-bottom: 56px; }

/* ⚠️ LA LARGEUR EST BRIDÉE, ET C'EST LE RÉGLAGE LE PLUS IMPORTANT ICI. Une
   ligne de texte qui traverse un écran large se relit mal : l'œil perd le
   début de la suivante. Autour de 70 caractères, il la retrouve seul. */
.md-corps { font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.md-corps > *:first-child { margin-top: 0; }
.md-corps > *:last-child { margin-bottom: 0; }

.md-corps h1, .md-corps h2, .md-corps h3, .md-corps h4 {
    color: var(--ink); font-weight: 800; letter-spacing: -.01em;
    margin: 1.9em 0 .6em; line-height: 1.25;
}
.md-corps h1 { font-size: 28px; }
.md-corps h2 { font-size: 23px; }
.md-corps h3 { font-size: 19px; }
.md-corps h4 { font-size: 16px; }

.md-corps p { margin: 0 0 1.05em; }
.md-corps a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.md-corps a:hover { text-decoration-thickness: 2px; }
.md-corps strong { color: var(--ink); font-weight: 700; }

.md-corps ul, .md-corps ol { margin: 0 0 1.05em; padding-left: 1.35em; }
.md-corps li { margin: .3em 0; }
.md-corps li::marker { color: var(--accent); }

.md-corps blockquote {
    margin: 1.4em 0; padding: 12px 18px;
    border-left: 3px solid var(--accent);
    background: var(--surface); border-radius: 0 12px 12px 0;
    color: var(--ink-2);
}
.md-corps blockquote p:last-child { margin-bottom: 0; }

/* Le code garde une chasse fixe : c'est ce qui permet d'aligner un extrait et
   de compter les espaces, la seule raison de l'écrire ainsi. */
.md-corps code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .89em; padding: 2px 6px; border-radius: 6px;
    background: var(--surface); border: 1px solid var(--ligne); color: var(--ink);
}
.md-corps pre {
    margin: 1.4em 0; padding: 15px 17px; border-radius: 13px;
    background: var(--surface); border: 1px solid var(--ligne);
    /* Un bloc de code ne se coupe pas : il défile dans SA propre boîte, sinon
       c'est la page entière qui gagne une barre horizontale. */
    overflow-x: auto;
}
.md-corps pre code { padding: 0; border: 0; background: none; font-size: 13.5px; line-height: 1.6; }

.md-corps hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--ligne); }

.md-corps img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 1.4em 0; }

/* Même règle que pour le code : le tableau défile chez lui. */
.md-corps .md-tableau, .md-corps table { width: 100%; overflow-x: auto; display: block; }
.md-corps table { border-collapse: collapse; margin: 1.4em 0; font-size: 14.5px; }
.md-corps th, .md-corps td {
    padding: 9px 13px; border: 1px solid var(--ligne); text-align: left; white-space: nowrap;
}
.md-corps th { background: var(--surface); color: var(--ink); font-weight: 700; }

.pg-libre__maj {
    margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--ligne);
    font-size: 13px; color: var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   LES PARTENAIRES
   ══════════════════════════════════════════════════════════════════════════ */

.pg-part { padding: 34px 0 60px; display: grid; gap: 16px; }

.pg-part__c {
    display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 24px;
    align-items: center; padding: 22px 24px; border-radius: 18px;
    border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre);
}
.pg-part__logo {
    width: 128px; height: 88px; border-radius: 13px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--ligne); font-size: 34px;
}
.pg-part__logo img { max-width: 86%; max-height: 86%; object-fit: contain; }
.pg-part__txt h2 { margin: 0 0 7px; font-size: 19px; font-weight: 790; }
.pg-part__txt p { margin: 0 0 12px; font-size: 14px; line-height: 1.62; color: var(--ink-2); }

.pg-part__l { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pg-part__r {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 620;
    background: var(--surface); border: 1px solid var(--ligne); color: var(--ink-2);
    transition: border-color .15s, color .15s;
}
.pg-part__r:hover { border-color: var(--accent); color: var(--accent); }

/* ⚠️ LA MISE AU POINT EST EN BAS DE PAGE, PAS EN PETIT DANS UN COIN. Une
   page de partenaires se lit spontanément comme une recommandation ; dire
   qu'elle n'en est pas une fait partie de ce qu'elle doit dire. */
.pg-part__note {
    margin-top: 12px; padding: 18px 22px; border-radius: 16px;
    border: 1px dashed var(--ligne); background: var(--surface);
}
.pg-part__note b { display: block; font-size: 14px; font-weight: 760; margin-bottom: 6px; }
.pg-part__note p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

.pg-part__vide { padding: 40px; text-align: center; color: var(--ink-3); }

/* L'appel à partenariat, quand la liste est vide.
   ⚠️ IL PROPOSE AU LIEU DE CONSTATER. « Aucun partenaire » ferme la page ; un
   appel à candidature l'ouvre — et c'est précisément à ce moment-là qu'un
   futur partenaire est en train de la lire. */
/* ⚠️ PLEINE LARGEUR. Aucun bridage à 900 px : la moitié droite de l'écran
   reste vide et ça se voit immédiatement. Les grilles à l'intérieur se chargent
   déjà de garder des lignes de texte lisibles. */
.pg-part__appel { width: 100%; }

.pg-part__appel-h { padding: 8px 0 32px; }
.pg-part__appel-h > span { font-size: 44px; display: block; margin-bottom: 12px; }
.pg-part__appel-h h2 {
    margin: 0 0 12px; font-size: clamp(21px, 3vw, 28px);
    font-weight: 820; letter-spacing: -.015em; line-height: 1.2;
}
.pg-part__appel-h p { margin: 0; font-size: 15px; line-height: 1.66; color: var(--ink-2); }

.pg-part__h3 {
    margin: 0 0 16px; font-size: 16px; font-weight: 780;
    padding-bottom: 10px; border-bottom: 1px solid var(--ligne);
}
.pg-part__grid {
    margin-bottom: 28px;
    display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.pg-part__grid > div {
    padding: 17px 19px; border-radius: 14px;
    border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre);
}
.pg-part__grid b { display: block; font-size: 14.5px; font-weight: 760; margin-bottom: 7px; }
.pg-part__grid span { font-size: 13px; line-height: 1.6; color: var(--ink-2); }

.pg-part__deux {
    padding: 22px 24px; border-radius: 18px; margin-bottom: 8px;
    border: 1px solid var(--ligne); background: var(--surface);
}
.pg-part__deux { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pg-part__deux b { display: block; font-size: 13.5px; font-weight: 760; margin-bottom: 9px; }
.pg-part__deux ul { margin: 0; padding-left: 19px; }
.pg-part__deux li { font-size: 13px; line-height: 1.62; color: var(--ink-2); margin-bottom: 5px; }

/* La phrase qui engage : elle est mise en avant parce qu'elle est le cœur de
   la proposition, pas une clause de bas de page. */
.pg-part__franc {
    margin: 20px 0 0; padding: 14px 17px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
    background: var(--carte); border-left: 3px solid var(--accent);
}

.pg-part__fin {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ligne);
}
.pg-part__contact { margin: 0; font-size: 15.5px; font-weight: 650; }
.pg-part__contact a { color: var(--accent); }
.pg-part__admin { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.pg-part__admin a { color: var(--ink-3); text-decoration: underline; }

@media (max-width: 720px) {
    .pg-part__c { grid-template-columns: 1fr; gap: 14px; }
    .pg-part__logo { width: 100%; height: 76px; }
}

/* ═══════════════════ 🛒 OÙ L'ACHETER, ET LES ÉCARTS COLORÉS ═══════════════════
   Ajouts liés aux liens marchands d'une fiche et au code couleur des pièces
   voisines. Tout s'exprime en variables du thème : une couleur écrite en dur
   ici survivrait au passage en sombre et deviendrait illisible. */

.pg-achats { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.pg-achats a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--surface);
  color: inherit; text-decoration: none;
  font-size: 13.5px;
  transition: border-color .16s, transform .16s;
}

.pg-achats a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateX(2px);
}

.pg-achats a > span { font-size: 17px; line-height: 1; }
.pg-achats a > b    { flex: 1; font-weight: 600; }

/* Le mot est discret mais TOUJOURS visible : un lien rémunéré qui ne se dit
   pas est exactement ce que ce site reproche ailleurs. */
.pg-achats a > i {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Un bloc qui annonce une absence ne doit pas ressembler à un bloc d'action :
   même cadre, mais sans la couleur qui appelle le clic. */
.pg-bloc2--muet {
  background: var(--surface);
  border-style: dashed;
}

.pg-bloc2--muet .pg-h3 { color: var(--ink-2); }

/* Vert quand on monte, rouge quand on descend.
   ⚠️ « .pg-voisins i » impose le gris et l'emportait par spécificité : la
   couleur n'apparaissait jamais. Le sélecteur la reprend explicitement. */
.pg-v-plus,  .pg-voisins i.pg-v-plus  { color: var(--vert);  font-weight: 700; font-size: 12.5px; }
.pg-v-moins, .pg-voisins i.pg-v-moins { color: var(--rouge); font-weight: 700; font-size: 12.5px; }


/* ════════════ ÉTIQUETTES SUR LES VIGNETTES DE L'ACCUEIL ════════════
   Le badge « À VENIR » se pose en absolu : sans un repère de positionnement sur
   la vignette, il se serait accroché au premier ancêtre positionné de la page et
   serait parti flotter ailleurs. */
.pg-jeu__img { position: relative; }

.pg-jeu__img .pg-badge {
  position: absolute; top: 8px; left: 8px;
  z-index: 2;
}

/* ════════════ ⭐ À LA UNE ════════════
   Les jeux mis en avant. Une grande carte pour le premier, deux plus petites
   à côté. Le texte se pose sur la bannière du jeu : un voile sombre garantit
   la lecture dans les deux thèmes, quelle que soit l'image. */
.pg-une__grille {
    display: grid; gap: 16px;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-auto-rows: minmax(170px, auto);
}
.pg-une__carte {
    position: relative; display: flex; align-items: flex-end;
    min-height: 170px; border-radius: 18px; overflow: hidden;
    color: #fff; text-decoration: none;
    background: var(--une-fond, linear-gradient(135deg, var(--accent), #0f172a)) center / cover no-repeat;
    box-shadow: var(--ombre);
    transition: transform .18s ease, box-shadow .18s ease;
}
.pg-une__carte:hover { transform: translateY(-3px); color: #fff; }
.pg-une__carte:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pg-une__carte--grande { grid-row: span 2; min-height: 356px; }
.pg-une__carte--seule  { grid-column: 1 / -1; min-height: 320px; }
.pg-une__carte--duo    { min-height: 300px; }
.pg-une__carte--seule .pg-une__nom { font-size: 30px; }
.pg-une__voile {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,12,24,.05) 20%, rgba(8,12,24,.88) 100%);
}
.pg-une__corps {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: 18px 20px; width: 100%;
}
.pg-une__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-une__badges .pg-badge { position: static; }
.pg-une__nom {
    font-size: 19px; font-weight: 820; line-height: 1.2; letter-spacing: -.01em;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.pg-une__carte--grande .pg-une__nom { font-size: 28px; }
.pg-une__meta { font-size: 12.5px; opacity: .85; }
.pg-une__resume { font-size: 14px; line-height: 1.55; opacity: .92; max-width: 60ch; }
.pg-une__cta {
    margin-top: 4px; font-size: 13px; font-weight: 750;
    color: #fff; opacity: .95;
}
.pg-une__carte:hover .pg-une__cta { text-decoration: underline; }

@media (max-width: 760px) {
    .pg-une__grille { grid-template-columns: 1fr; }
    .pg-une__carte--grande { grid-row: auto; min-height: 260px; }
    .pg-une__carte--grande .pg-une__nom { font-size: 23px; }
}

/* ═══════════════ Fiche jeu : « Mon PC peut-il le faire tourner ? » ═══════════════ */
.pg-tester { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pg-tester__ou {
    display: flex; align-items: center; gap: 10px; margin: 2px 0;
    font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em;
}
.pg-tester__ou::before, .pg-tester__ou::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.pg-tester__l { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.pg-tester__l select {
    font: inherit; font-weight: 400; font-size: 13.5px; color: var(--ink);
    width: 100%; min-width: 0; padding: 8px 10px; border-radius: 9px;
    background: var(--carte); border: 1px solid var(--ligne);
}
.pg-tester__l select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pg-tester__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ═══════════════ Fiche jeu : les PC analysés ═══════════════ */
.pg-commu__pct { margin: 6px 0 8px; font-size: 14px; color: var(--ink-2); }
.pg-commu__pct b { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; margin-right: 4px; }
.pg-commu__jauge {
    display: flex; height: 8px; border-radius: 99px; overflow: hidden;
    background: var(--ligne); margin-bottom: 10px;
}
.pg-commu__jauge i { display: block; height: 100%; }
.pg-commu__jauge .ok    { background: var(--vert); }
.pg-commu__jauge .moyen { background: var(--ambre); }
.pg-commu__jauge .ko    { background: var(--rouge); }
.pg-commu__jauge--attente i { background: var(--accent); opacity: .6; }

/* ═══════════════ En-tête : le membre connecté ═══════════════
   ⚠️ IL RESTE VISIBLE SOUS 980 px, contrairement aux liens « Se connecter » :
   sur un téléphone, c'est le seul chemin vers son espace. Le nom s'efface,
   l'avatar reste. */
.pg-moi { position: relative; flex: none; }
.pg-moi__btn {
    display: flex; align-items: center; gap: 9px;
    padding: 3px 10px 3px 3px; border-radius: 99px;
    background: var(--surface); border: 1px solid var(--ligne);
    color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: border-color .15s;
}
.pg-moi__btn:hover, .pg-moi.ouvert .pg-moi__btn { border-color: var(--accent); }
.pg-moi__ava {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, hsl(var(--h, 220) 70% 55%), hsl(calc(var(--h, 220) + 40) 70% 45%));
    color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.pg-moi__ava img { width: 100%; height: 100%; object-fit: cover; }
.pg-moi__nom { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-moi__chev { font-size: 10px; color: var(--ink-3); transition: transform .18s; }
.pg-moi.ouvert .pg-moi__chev { transform: rotate(180deg); }

.pg-moi__menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
    min-width: 230px; padding: 7px;
    display: flex; flex-direction: column; gap: 1px;
    background: var(--carte); border: 1px solid var(--ligne);
    border-radius: 14px; box-shadow: var(--ombre-f);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.pg-moi:focus-within .pg-moi__menu,
.pg-moi.ouvert .pg-moi__menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
    .pg-moi:hover .pg-moi__menu { opacity: 1; visibility: visible; transform: none; }
}
.pg-moi__tete { padding: 8px 11px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ligne); }
.pg-moi__tete b { display: block; font-size: 14px; }
.pg-moi__tete i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.pg-moi__menu a {
    padding: 8px 11px; border-radius: 9px; font-size: 13.5px; color: var(--ink-2);
    transition: background .15s, color .15s;
}
.pg-moi__menu a:hover, .pg-moi__menu a:focus-visible { background: var(--surface); color: var(--ink); outline: none; }
.pg-moi__menu .pg-moi__sortie { margin-top: 4px; border-top: 1px solid var(--ligne); border-radius: 0 0 9px 9px; }

@media (max-width: 980px) {
    .pg-moi__nom, .pg-moi__chev { display: none; }
    .pg-moi__btn { padding: 3px; }
}

/* ═══════════════ Succès débloqués ═══════════════ */
.pg-toasts {
    position: fixed; right: 18px; bottom: 18px; z-index: 90;
    display: flex; flex-direction: column; gap: 10px;
    width: min(360px, calc(100vw - 36px));
}
.pg-toast {
    --c: var(--accent);
    display: flex; gap: 12px; align-items: flex-start;
    padding: 13px 14px; border-radius: 14px;
    background: var(--carte); border: 1px solid var(--ligne);
    border-left: 4px solid var(--c);
    box-shadow: var(--ombre-f);
    animation: pg-toast-in .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
.pg-toast:nth-child(2) { animation-delay: .15s; }
.pg-toast:nth-child(3) { animation-delay: .3s; }
.pg-toast--bronze  { --c: #c77b30; }
.pg-toast--argent  { --c: #8a9bb0; }
.pg-toast--or      { --c: #e0a800; }
.pg-toast--platine { --c: #3fb6cf; }
.pg-toast--diamant { --c: #b77dff; }
.pg-toast.sortie { animation: pg-toast-out .3s ease-in both; }
.pg-toast__e {
    width: 42px; height: 42px; flex: none; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: color-mix(in srgb, var(--c) 16%, transparent);
}
.pg-toast__c { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.pg-toast__c i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c); }
.pg-toast__c b { font-size: 14.5px; }
.pg-toast__c span { font-size: 12.5px; color: var(--ink-2); }
.pg-toast__x {
    background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1;
    color: var(--ink-3); padding: 0 2px;
}
.pg-toast__x:hover { color: var(--ink); }
@keyframes pg-toast-in  { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes pg-toast-out { to   { opacity: 0; transform: translateX(30px); } }

/* ═══════════════ 🤫 Les secrets ═══════════════ */

/* La manette du pied de page : rien ne la distingue, sauf au survol. */
.pg-manette {
    background: none; border: 0; padding: 0; margin: 0; font: inherit; line-height: 1;
    cursor: default; display: inline-block; transition: transform .2s;
}
.pg-manette:hover { transform: rotate(-12deg) scale(1.2); cursor: pointer; }
.pg-manette:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 🥚 Le mode rétro : un écran cathodique par-dessus le site.
   ⚠️ UN CALQUE À LA TAILLE DE L'ÉCRAN, JAMAIS UN FILTRE SUR LA PAGE. Un
   « filter » posé sur body faisait de body le repère de tout ce qui est fixe :
   le voile s'étendait sur toute la hauteur du document (11 000 px, pas
   toujours dessiné), et les annonces comme la fenêtre du jeu partaient hors
   de l'écran.
   ⚠️ NI FILTRE NI FLOU SUR LE CALQUE NON PLUS : un backdrop-filter sur tout
   l'écran se recalcule à chaque défilement et ralentissait le navigateur.
   Un dégradé fixe, teinté, suffit à l'effet. */
.pg-crt {
    position: fixed; inset: 0; z-index: 200; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, rgba(0,255,170,.04) 0%, transparent 55%, rgba(0,0,0,.38) 100%);
    animation: pg-crt-allume .45s ease-out;
}
@keyframes pg-crt-allume {
    0%   { opacity: 0; transform: scaleY(.02); }
    60%  { opacity: 1; transform: scaleY(1.02); }
    100% { transform: none; }
}
.pg-retro .pg-h2, .pg-retro h1 { text-shadow: 2px 0 rgba(255,0,80,.35), -2px 0 rgba(0,200,255,.35); }

/* La sortie, toujours à portée tant que le mode est actif. */
.pg-crt-sortie {
    position: fixed; left: 16px; bottom: 16px; z-index: 201;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 99px; cursor: pointer;
    background: #0b0f18; color: #00ffaa; border: 1px solid rgba(0,255,170,.45);
    font: 700 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .03em;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}
.pg-crt-sortie:hover, .pg-crt-sortie:focus-visible { background: #00ffaa; color: #0b0f18; outline: none; }

.pg-confettis { position: fixed; inset: 0; z-index: 210; pointer-events: none; overflow: hidden; }
.pg-confettis i {
    position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px;
    animation: pg-confetti linear forwards;
}
@keyframes pg-confetti { to { top: 105vh; transform: rotate(720deg) translateX(40px); opacity: .7; } }

/* 🕵️ Le mini-jeu. */
.pg-fr {
    position: fixed; inset: 0; z-index: 150;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(6, 9, 16, .82); backdrop-filter: blur(6px);
}
.pg-fr__cadre {
    width: min(440px, 100%); padding: 16px; border-radius: 20px;
    background: #111827; color: #e8ecf5;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pg-fr__tete { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pg-fr__tete > b { font-size: 17px; letter-spacing: .02em; margin-right: auto; }
.pg-fr__score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pg-fr__score i { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.pg-fr__score strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.pg-fr__x {
    width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer;
    background: rgba(255,255,255,.08); color: #fff; font-size: 20px; line-height: 1;
}
.pg-fr__x:hover { background: rgba(255,255,255,.18); }
.pg-fr__ecran { position: relative; }
.pg-fr__ecran { width: min(100%, calc(100vh - 150px)); margin: 0 auto; }
.pg-fr__ecran canvas { display: block; width: 100%; height: auto; border-radius: 12px; touch-action: none; }
@media (hover: none), (max-width: 700px) {
    .pg-fr__ecran { width: min(100%, calc(100vh - 270px)); }
}
.pg-fr__msg {
    position: absolute; inset: 0; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px; text-align: center; background: rgba(11, 15, 24, .82);
}
.pg-fr__msg[hidden] { display: none; }
.pg-fr__msg b { font-size: 20px; }
.pg-fr__msg span { font-size: 13.5px; opacity: .8; max-width: 30ch; }
.pg-fr__pad {
    display: none; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px);
    gap: 6px; justify-content: center; margin-top: 12px;
}
.pg-fr__pad button {
    border: 0; border-radius: 12px; font-size: 18px; color: #fff; cursor: pointer;
    background: rgba(255,255,255,.1);
}
.pg-fr__pad button:active { background: var(--accent); }
.pg-fr__pad [data-dir="haut"]   { grid-column: 2; grid-row: 1; }
.pg-fr__pad [data-dir="gauche"] { grid-column: 1; grid-row: 2; }
.pg-fr__pad [data-dir="bas"]    { grid-column: 2; grid-row: 2; }
.pg-fr__pad [data-dir="droite"] { grid-column: 3; grid-row: 2; }
@media (hover: none), (max-width: 700px) { .pg-fr__pad { display: grid; } }

/* 🤫 L'anomalie : un texte qui se dédouble et tremble. */
.pg-glitch {
    position: fixed; z-index: 120; padding: 6px 12px;
    background: rgba(0,0,0,.85); border: 1px solid rgba(0,255,170,.5); border-radius: 4px;
    color: #00ffaa; font: 700 13px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .05em;
    cursor: crosshair; animation: pg-glitch-saut 2.4s steps(1) infinite;
}
.pg-glitch span { position: relative; display: inline-block; }
.pg-glitch span::before, .pg-glitch span::after {
    content: attr(data-texte); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden;
}
.pg-glitch span::before { color: #ff2a6d; transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); animation: pg-glitch-a .9s infinite; }
.pg-glitch span::after  { color: #05d9e8; transform: translate(2px, 0);  clip-path: inset(50% 0 0 0); animation: pg-glitch-b 1.1s infinite; }
.pg-glitch--fuite { animation: pg-glitch-fuite .6s forwards; }
.pg-glitch--prise { animation: pg-glitch-prise .7s forwards; }
@keyframes pg-glitch-saut {
    0%, 100% { opacity: .9; transform: none; }
    30% { opacity: .25; transform: translate(3px, -2px) skewX(8deg); }
    32% { opacity: 1; transform: translate(-4px, 1px); }
    60% { opacity: .1; }
    62% { opacity: .95; transform: skewX(-6deg); }
}
@keyframes pg-glitch-a { 50% { transform: translate(3px, -1px); } }
@keyframes pg-glitch-b { 50% { transform: translate(-3px, 1px); } }
@keyframes pg-glitch-fuite { to { opacity: 0; transform: scaleY(.05); } }
@keyframes pg-glitch-prise { to { opacity: 0; transform: scale(2.4); filter: blur(4px); } }

/* ══════════════════════════ NOTRE MÉTHODE ══════════════════════════
   ⚠️ LA PAGE DOIT SE LIRE, PAS S'ADMIRER. C'est un document technique : on y
   vient pour verifier un seuil ou refaire un calcul. D'ou une colonne etroite,
   beaucoup de blanc, et aucune couleur qui n'ait de sens. */
.pg-meth { max-width: 880px; }

.pg-meth__t {
    margin: 40px 0 12px; font-size: 22px; letter-spacing: -.02em;
    padding-bottom: 8px; border-bottom: 2px solid var(--ligne);
}
.pg-meth__t:first-of-type { margin-top: 8px; }
.pg-meth__t3 { margin: 22px 0 10px; font-size: 15px; color: var(--ink-2); }
.pg-meth__x { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }

/* Les chiffres du referentiel : ce que le site contient vraiment. */
.pg-meth__n {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin: 18px 0;
}
.pg-meth__n > div {
    padding: 14px 16px; border-radius: 12px;
    background: var(--carte); border: 1px solid var(--ligne); text-align: center;
}
.pg-meth__n b { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pg-meth__n span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); line-height: 1.4; }

/* Les quatre provenances. Le liseré porte le sens : vert pour ce qui fonde un
   verdict, ambre pour ce qui le situe seulement. */
.pg-meth__prov { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 16px 0; }
.pg-meth__p {
    padding: 14px 16px; border-radius: 12px;
    background: var(--carte); border: 1px solid var(--ligne); border-left: 4px solid var(--ligne);
}
.pg-meth__p--ok    { border-left-color: var(--vert); }
.pg-meth__p--amber { border-left-color: var(--ambre); }
.pg-meth__p--mute  { border-left-color: var(--ink-3); }
.pg-meth__p > b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.pg-meth__p p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.pg-meth__c { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* L'aveu sur la part d'estimations : il doit se voir, sans crier. */
.pg-meth__aveu {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 18px 0; padding: 16px 18px; border-radius: var(--radius);
    background: color-mix(in srgb, var(--ambre) 7%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--ambre) 30%, transparent);
}
.pg-meth__aveu > span { font-size: 22px; line-height: 1.1; flex: none; }
.pg-meth__aveu b { display: block; margin-bottom: 6px; font-size: 15px; }
.pg-meth__aveu p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.pg-meth__aveu p:last-child { margin: 0; }

/* Le calcul, etape par etape. */
.pg-meth__ex {
    margin: 16px 0; padding: 18px 20px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--ligne);
}
.pg-meth__ex ol { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.pg-meth__ex li b { font-size: 14px; }
.pg-meth__ex li p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }

/* Les deux lignes de calcul : en chasse fixe, pour qu'on les recopie. */
.pg-meth__calc {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px !important; color: var(--ink) !important;
    padding: 7px 10px; margin-top: 5px !important;
    background: var(--carte); border: 1px solid var(--ligne); border-radius: 8px;
    overflow-x: auto; white-space: nowrap;
}
.pg-meth__src { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.pg-meth__note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); font-style: italic; }

/* Les coefficients : un tableau qui se lit d'un coup d'oeil. */
.pg-meth__coefs {
    display: grid; gap: 8px; margin-bottom: 8px;
    /* 215px : la largeur du plus long libellé de la table (« DLSS Équilibré »)
       avec son coefficient et son effet. En dessous, le pourcentage passait
       seul à la ligne et faisait grandir un pavé au milieu de la rangée. */
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.pg-meth__coef {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 9px 12px; border-radius: 9px;
    background: var(--carte); border: 1px solid var(--ligne); font-size: 13px;
}
.pg-meth__coef b { flex: 1 1 auto; font-weight: 600; }
.pg-meth__coef span { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; white-space: nowrap; }
.pg-meth__coef i { font-style: normal; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.pg-meth__coef--ref { background: var(--surface); }

/* Les paliers de lecture. */
.pg-meth__pal { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.pg-meth__pal li {
    display: grid; grid-template-columns: 150px 170px minmax(0, 1fr); gap: 12px; align-items: baseline;
    padding: 10px 14px; border-radius: 10px;
    background: var(--carte); border: 1px solid var(--ligne); font-size: 13px;
}
.pg-meth__seuil { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12.5px; }
.pg-meth__pal i { font-style: normal; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }

/* Les limites, et les refus. */
.pg-meth__lim { display: grid; gap: 10px; margin: 16px 0; }
.pg-meth__lim > div {
    padding: 13px 16px; border-radius: 11px;
    background: var(--carte); border: 1px solid var(--ligne);
}
.pg-meth__lim b { display: block; font-size: 14px; margin-bottom: 4px; }
.pg-meth__lim p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.pg-meth__lim--refus > div { border-left: 4px solid var(--rouge); }

.pg-meth__fin {
    margin-top: 34px; padding: 20px; border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 6%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.pg-meth__fin b { display: block; font-size: 16px; margin-bottom: 6px; }
.pg-meth__fin p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

@media (max-width: 680px) {
    .pg-meth__pal li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .pg-meth__aveu { flex-direction: column; gap: 8px; }
}

/* ═════════════════════ LE LANCER DE RAYONS, SUR L'ANALYSE ═════════════════════
   Le bloc porte quatre tons : vert quand le niveau tient, ambre quand il passe
   tout juste, rouge quand c'est hors de portée, gris quand on ne sait pas. La
   couleur est sur le liseré gauche seulement — un fond teinté sur un bloc de
   cette taille écraserait le verdict principal, qui reste la vraie réponse. */
.an-rt { border-left: 4px solid var(--ligne); }
.an-rt--ok    { border-left-color: var(--vert); }
.an-rt--amber { border-left-color: var(--ambre); }
.an-rt--rouge { border-left-color: var(--rouge); }
.an-rt--mute  { border-left-color: var(--ink-3); }

.an-rt__h { display: flex; gap: 14px; align-items: flex-start; }
.an-rt__e { font-size: 26px; line-height: 1.1; flex: none; }
.an-rt__x { margin: 6px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

.an-rt__l { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }

/* Une ligne par niveau : pastille, nom, chiffre, verdict. Les deux dernières
   colonnes s'effacent quand le niveau n'a pas de chiffre, et la phrase qui
   explique pourquoi prend leur place. */
.an-rt__n {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 12px; align-items: center;
    padding: 11px 14px; border-radius: 11px;
    background: var(--carte); border: 1px solid var(--ligne);
}
.an-rt__n--sans { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); }
.an-rt__ne { font-size: 19px; line-height: 1; }
.an-rt__nom b { display: block; font-size: 13.5px; }
.an-rt__nom i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); margin-top: 1px; }

.an-rt__fps { text-align: right; white-space: nowrap; }
.an-rt__fps b { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.an-rt__fps i { font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-left: 2px; }
.an-rt__cond { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

.an-rt__sans { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 640px) {
    .an-rt__n, .an-rt__n--sans { grid-template-columns: auto minmax(0, 1fr); }
    .an-rt__fps { grid-column: 2; text-align: left; }
    .an-rt__fps .an-rt__cond { margin-top: 2px; }
    .an-rt__n .an-pill { grid-column: 2; justify-self: start; }
    .an-rt__sans { grid-column: 2; }
}

/* ═════════════════════ 🔎 LA RECHERCHE : propositions pendant la frappe ═════════════════════
   Le panneau est dans le HTML (masqué) ; le script le remplit. Il se pose sous la barre, aligné à
   droite : la barre est au bout de l'en-tête, un panneau aligné à gauche sortirait de l'écran. */
.pg-search { flex: 0 1 300px; transition: flex-basis .2s; }
.pg-search:focus-within { flex-basis: 380px; }
.pg-search input { padding-right: 34px; }
.pg-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pg-search__k {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ligne); border-bottom-width: 2px; border-radius: 6px;
    font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--carte);
    pointer-events: none; transition: opacity .15s;
}
.pg-search:focus-within .pg-search__k { opacity: 0; }
.pg-search.charge .pg-search__i { animation: pgSgPulse .9s ease-in-out infinite; }
@keyframes pgSgPulse { 50% { opacity: .15; } }

.pg-search__pop {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
    width: min(560px, 92vw); max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; background: var(--carte); border: 1px solid var(--ligne);
    border-radius: 16px; box-shadow: var(--ombre-f);
    animation: pgSgIn .14s ease-out;
}
.pg-search__pop[hidden] { display: none; }
@keyframes pgSgIn { from { opacity: 0; transform: translateY(-6px); } }

.pg-sg__g + .pg-sg__g { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ligne); }
.pg-sg__h {
    display: flex; align-items: center; gap: 7px; padding: 8px 10px 4px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.pg-sg__hl { flex: 1; }
.pg-sg__hn { padding: 1px 7px; border-radius: 999px; background: var(--surface); font-size: 11px; letter-spacing: 0; }
.pg-sg__eff { margin-left: auto; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.pg-sg__eff:hover { text-decoration: underline; }

.pg-sg__i {
    display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 11px;
    color: inherit; text-decoration: none; cursor: pointer;
}
.pg-sg__i.actif, .pg-sg__i:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pg-sg__i.actif { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; }
.pg-sg__v {
    flex: none; width: 42px; height: 42px; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: var(--surface); font-size: 19px;
}
.pg-sg__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-sg__i--r .pg-sg__v { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
.pg-sg__c { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.pg-sg__t { font-size: 14px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sg__s, .pg-sg__x { font-style: normal; font-size: 12px; color: var(--ink-3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sg__x { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pg-sg__b {
    flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent);
}
.pg-search mark, .pg-rech mark {
    background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px;
}
.pg-sg__plus { display: block; padding: 7px 12px 7px 63px; font-size: 12.5px; font-weight: 600; color: var(--accent); border-radius: 9px; text-decoration: none; }
.pg-sg__plus.actif, .pg-sg__plus:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pg-sg__tout {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 11px 14px;
    border-radius: 11px; background: var(--surface); font-size: 13.5px; font-weight: 650; color: var(--ink); text-decoration: none;
}
.pg-sg__tout.actif, .pg-sg__tout:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.pg-sg__fl { font-size: 12px; color: var(--ink-3); }
.pg-sg__vide { display: flex; flex-direction: column; gap: 3px; padding: 18px 14px; font-size: 13px; color: var(--ink-3); }
.pg-sg__vide b { font-size: 14px; color: var(--ink); }

/* Lecteurs d'écran : annonces vocales, invisibles à l'œil. */
.pg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) {
    .pg-search { flex: 1 1 auto; }
    .pg-search:focus-within { flex-basis: auto; }
    .pg-search__k { display: none; }
    .pg-search__pop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: calc(100vh - 84px); }
}
@media (prefers-reduced-motion: reduce) {
    .pg-search__pop { animation: none; }
    .pg-search.charge .pg-search__i { animation: none; }
}

.pg-sg__dire { display: block; margin-top: 6px; padding: 9px 12px; border-radius: 10px; color: var(--accent); font-size: 13.5px; text-decoration: none; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pg-sg__dire.actif, .pg-sg__dire:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }

/* ═════════════════════ 🚩 SIGNALER UNE ERREUR ═════════════════════ */
.pg-sig__ligne { margin: 8px 0 0; }
.pg-sig__btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--ligne); border-radius: 999px;
    background: transparent; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s;
}
.pg-sig__btn:hover, .pg-sig__btn:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }

dialog.pg-sig {
    width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--ligne);
    border-radius: 18px; background: var(--carte); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(15,23,42,.45);
}
dialog.pg-sig::backdrop { background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
dialog.pg-sig form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.pg-sig__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-sig__tete h2 { margin: 0; font-size: 19px; }
.pg-sig__x { border: 0; background: var(--surface); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: inherit; font: inherit; }
.pg-sig__intro { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.pg-sig__lab { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.pg-sig select, .pg-sig textarea, .pg-sig input[type="url"] {
    width: 100%; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--surface);
    color: inherit; font: inherit; font-size: 14px; font-weight: 400; outline: none;
}
.pg-sig textarea { resize: vertical; min-height: 110px; }
.pg-sig select:focus, .pg-sig textarea:focus, .pg-sig input[type="url"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pg-sig__cpt { align-self: flex-end; font-weight: 400; color: var(--ink-3); }
.pg-sig__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pg-sig__msg { margin: 0; min-height: 18px; font-size: 13px; font-weight: 600; }
.pg-sig__msg.err { color: #dc2626; }
.pg-sig__msg.ok  { color: #16a34a; }
.pg-sig__pied { display: flex; justify-content: flex-end; gap: 10px; }
.pg-sig__ann, .pg-sig__env { padding: 10px 18px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--ligne); }
.pg-sig__ann { background: transparent; color: inherit; }
.pg-sig__env { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-sig__env:disabled { opacity: .6; cursor: wait; }

/* 🏆 Top des PC : le score en points est le chiffre principal, la note sur 100 vient ensuite. */
.pg-clas__note .pg-clas__big { display: block; line-height: 1.1; }
.pg-clas__note .pg-clas__big b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pg-clas__note .pg-clas__big i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.pg-clas__note .pg-clas__verdict { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pg-clas__note .pg-clas__sec { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.pg-clas__note .pg-clas__sec b { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pg-clas__l--vert .pg-clas__big b, .pg-clas__l--bon .pg-clas__big b { color: var(--vert); }

/* 🎯 Quelle carte pour… */
.pg-qc__synth{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:22px}
.pg-qc__b{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--pg-bord,rgba(128,128,128,.3));border-radius:12px}
.pg-qc__b span{font-size:22px}.pg-qc__b i{opacity:.8;font-style:normal}
.pg-qc__t{display:grid;gap:8px}
.pg-qc__l{display:grid;grid-template-columns:28px 1fr auto;gap:2px 10px;align-items:center;padding:10px 14px;border:1px solid rgba(128,128,128,.3);border-radius:10px;text-decoration:none;color:inherit}
.pg-qc__l i{grid-column:2;font-style:normal;font-size:12px;opacity:.7}
.pg-qc__f{grid-column:3;grid-row:1 / span 2;text-align:right;font-weight:600}.pg-qc__f small{display:block;font-weight:400;opacity:.7}
.pg-qc__l--ok{border-color:rgba(34,197,94,.5)}.pg-qc__l--limite{border-color:rgba(245,158,11,.5)}.pg-qc__l--non{border-color:rgba(239,68,68,.4)}
.pg-qc__n{line-height:1.7;opacity:.9}

/* 📊 Formulaire « relevé de FPS » : champs de saisie stylés comme les listes, deux colonnes, case à cocher alignée */
.pg-sig input[type="text"], .pg-sig input[type="number"] {
    width: 100%; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--surface);
    color: inherit; font: inherit; font-size: 14px; font-weight: 400; outline: none;
}
.pg-sig input[type="text"]:focus, .pg-sig input[type="number"]:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
dialog.pg-sig--large { width: min(720px, 94vw); }
dialog.pg-sig form.pg-rel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
form.pg-rel > .pg-sig__tete, form.pg-rel > .pg-sig__intro, form.pg-rel > .pg-sig__msg, form.pg-rel > .pg-sig__pied,
form.pg-rel > .pg-rel--pleine { grid-column: 1 / -1; }
.pg-sig__lab--check { flex-direction: row; align-items: center; gap: 10px; }
.pg-sig__lab--check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 560px) { dialog.pg-sig form.pg-rel { grid-template-columns: 1fr; } }