/* ═══════════════════════════════════════════════════════════════════════════
   LE SIMULATEUR DE FUTURE MACHINE
   ═══════════════════════════════════════════════════════════════════════════

   Feuille séparée de theme.css, et pour une raison précise : elle ne sert
   qu'à deux pages sur vingt. La charger partout aurait fait payer à chaque
   visiteur le style d'un écran qu'il n'ouvrira peut-être jamais.

   Elle s'appuie sur les variables du thème (--accent, --bg, --ligne…), posées
   par l'en-tête. Elle n'en définit aucune : un simulateur qui aurait ses
   propres couleurs cesserait d'appartenir au site.

   ⚠️ LES VUES NE SONT MASQUÉES QUE SI LE SCRIPT A PRIS LA MAIN. La classe
   « sim--pilote » est posée par builder.js à son démarrage. Sans elle — script
   absent, bloqué, en erreur — toutes les vues restent dépliées et la page
   redevient un formulaire ordinaire qui marche. C'est la règle du module :
   le JavaScript ajoute du confort, jamais du contenu.               */

.sim { position: relative; }

/* ── La progression ──────────────────────────────────────────────────────
   Collée en haut : sur une liste de quatre cents modèles, savoir où l'on en
   est ne doit pas demander de remonter.                                 */
.sim-barre {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ligne);
}
.sim-barre__in { padding: 12px 0 0; }

.sim-pas {
    list-style: none; margin: 0 0 10px; padding: 0;
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
.sim-pas::-webkit-scrollbar { display: none; }
.sim-pas li {
    display: flex; align-items: center; gap: 7px; flex: none;
    padding: 6px 12px 6px 6px; border-radius: 999px;
    font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
    transition: background .16s, color .16s;
}
.sim-pas li span {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 800;
    background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-3);
    transition: background .16s, color .16s;
}
.sim-pas li b { font-weight: 600; }

.sim-pas li.cliquable { cursor: pointer; }
.sim-pas li.cliquable:hover { background: var(--surface); color: var(--ink); }

/* L'étape franchie porte une coche : elle dit « c'est fait », ce qu'un simple
   changement de couleur ne dit pas. */
.sim-pas li.fait { color: var(--vert); }
.sim-pas li.fait span {
    background: var(--vert); color: #fff;
    /* Le chiffre laisse la place à la coche : « fait » se lit d'un coup d'œil,
       là où un simple changement de couleur demande de comparer. */
    font-size: 0;
}
.sim-pas li.fait span::after { content: '✓'; font-size: 12px; font-weight: 800; }

.sim-pas li.vu { color: var(--ink); font-weight: 650; }
.sim-pas li.vu span {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.sim-barre__jauge { height: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sim-barre__jauge span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .32s cubic-bezier(.22, .61, .36, 1);
}

/* ── Une vue ─────────────────────────────────────────────────────────────
   ⚠️ ON MASQUE AVEC « visibility » ET UNE POSITION ABSOLUE, PAS AVEC
   « display: none ». Un élément en display:none n'a pas de hauteur mesurable :
   la transition d'entrée ne pourrait pas partir, et la page sauterait d'une
   vue à l'autre au lieu de glisser.                                      */
.sim-scene {
    position: relative;

    /* ⚠️ SANS CE CLIPPAGE, LA PAGE GAGNE DEUX ASCENSEURS FANTÔMES.
       MESURÉ : les vues masquées sont en position absolue, décalées de 28 px
       pour l'animation d'entrée. Une vue de 1385 px translatée de 28 finit à
       1413 — le navigateur en tire un ascenseur horizontal. Et la plus haute
       d'entre elles (l'étape des jeux, 1126 px) dépassait la vue courante de
       90 px vers le bas : d'où le trou sous le pied de page.

       Un élément en position absolue n'ajoute pas de hauteur à son parent,
       mais il ÉTEND SA ZONE DE DÉFILEMENT — ce sont deux choses différentes,
       et c'est ce que je n'avais pas vu.

       « clip » et non « hidden » : « hidden » ferait de la scène un conteneur
       de défilement, ce qui casserait le « sticky » de la barre du haut. */
    overflow: clip;
}

.sim--pilote .sim-vue {
    position: absolute; inset: 0 0 auto; width: 100%;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(28px);
    transition: opacity .3s ease, transform .34s cubic-bezier(.22, .61, .36, 1),
                visibility .34s;
}
.sim--pilote .sim-vue.vu {
    position: relative; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
}
/* Revenir en arrière se voit comme un retour : la vue entre par la gauche. */
.sim--pilote .sim-vue.sim-vue--recul { transform: translateX(-28px); }
.sim--pilote .sim-vue.vu.sim-vue--recul { transform: none; }

.pg-calme .sim-vue, .pg-calme .sim-barre__jauge span { transition: none !important; }

.sim-vue__in { padding: 40px 0 120px; }
.sim-vue--intro .sim-vue__in { padding: 64px 0 80px; max-width: 760px; }

/* ── L'accueil ── */
.sim-vue--intro h1 {
    margin: 14px 0 16px; font-size: clamp(28px, 4.2vw, 42px);
    font-weight: 850; letter-spacing: -.022em; line-height: 1.1;
}
.sim-intro__x { margin: 0 0 30px; font-size: 17px; line-height: 1.68; color: var(--ink-2); }

.sim-intro__p {
    display: grid; gap: 14px; margin-bottom: 34px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.sim-intro__p div {
    padding: 15px 17px; border-radius: 14px;
    border: 1px solid var(--ligne); background: var(--surface);
}
.sim-intro__p b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }
.sim-intro__p span { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

.sim-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border: 0; border-radius: 14px; cursor: pointer;
    font-family: inherit; font-size: 16px; font-weight: 750; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 62%, transparent);
    transition: transform .16s, box-shadow .16s;
}
.sim-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent) 68%, transparent);
}
.sim-cta span { transition: transform .18s; }
.sim-cta:hover span { transform: translateX(4px); }

.sim-intro__ailleurs {
    margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--ligne);
    font-size: 13.5px; color: var(--ink-3);
}
.sim-intro__ailleurs a { color: var(--accent); font-weight: 600; }

/* ── Le titre d'une étape ── */
/* ⚠️ PLEINE LARGEUR. Le bloc était bridé à 660 px, puis mis en deux colonnes :
   dans les deux cas la moitié droite de l'écran restait vide ou coupée, ce qui
   se voit immédiatement et fait bâclé. L'explication occupe donc toute la
   largeur du contenu, comme les grilles de choix juste en dessous — c'est ce
   qui donne à la page une seule colonne franche au lieu de deux alignements
   qui ne se correspondent pas. */
.sim-t { margin-bottom: 30px; }

.sim-t__n {
    display: inline-block; margin-bottom: 9px; padding: 4px 11px;
    border-radius: 999px; font-size: 11.5px; font-weight: 750;
    letter-spacing: .04em; text-transform: uppercase;
    background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.sim-t h2 {
    margin: 0 0 10px; font-size: clamp(23px, 3vw, 31px);
    font-weight: 820; letter-spacing: -.018em; line-height: 1.15;
}
.sim-t p { margin: 0 0 10px; font-size: 15px; line-height: 1.72; color: var(--ink-2); }
.sim-t p:last-child { margin-bottom: 0; }
/* La deuxième phrase, celle qui explique « pourquoi on vous demande ça », est
   plus discrète : elle se lit si on veut, elle ne barre pas la route. */
.sim-t p.sim-t__plus { font-size: 13.5px; color: var(--ink-3); }

/* ── Les marques ─────────────────────────────────────────────────────────
   Le logo occupe la moitié du bouton : c'est par lui qu'on reconnaît sa
   marque, pas par le nom écrit dessous.                                  */
.sim-marques {
    display: grid; gap: 14px; margin-bottom: 24px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.sim-marque {
    display: grid; gap: 4px; justify-items: center; text-align: center;
    padding: 22px 18px 18px; border-radius: 18px; cursor: pointer;
    background: var(--carte); border: 2px solid var(--ligne);
    font-family: inherit; color: inherit;
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.sim-marque:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-3px); box-shadow: var(--ombre-f);
}
.sim-marque.actif {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--carte));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.sim-marque__img {
    display: flex; align-items: center; justify-content: center;
    height: 54px; margin-bottom: 10px;
}
.sim-marque__img img { max-height: 46px; max-width: 130px; width: auto; object-fit: contain; }
.sim-marque__img i { font-style: normal; font-size: 34px; }
.sim-marque b { font-size: 15px; font-weight: 750; }
.sim-marque i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

/* L'avis de restriction de châssis, à l'étape de la carte.
   ⚠️ IL EXISTE PARCE QUE LA MOITIÉ DES MODÈLES DISPARAÎT quand un processeur
   de portable est choisi. Sans explication, on croit le catalogue incomplet
   plutôt que filtré. */
.sim-chassis {
    margin: 0 0 14px; padding: 11px 15px; border-radius: 11px;
    font-size: 13px; line-height: 1.55; color: var(--ink-2);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.sim-chassis b { color: var(--ink); }

/* ── La liste des pièces ─────────────────────────────────────────────────
   Elle défile DANS SA BOÎTE : quatre cents modèles poussés dans la page
   rendraient la barre de validation inatteignable.                       */
.sim-liste {
    border: 1px solid var(--ligne); border-radius: 16px; overflow: hidden;
    background: var(--carte);
    /* La liste vient à l'écran dès qu'une marque est choisie. Sans cette marge,
       elle se collerait au bord haut et passerait sous l'en-tête du site. */
    scroll-margin-top: 84px;
}
.sim-liste__filtre {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 15px; border-bottom: 1px solid var(--ligne); background: var(--surface);
}
.sim-liste__filtre--seul {
    border: 1px solid var(--ligne); border-radius: 13px; margin-bottom: 16px;
}
.sim-liste__filtre span { font-size: 14px; opacity: .6; }
.sim-liste__filtre input {
    flex: 1; border: 0; background: none; color: inherit;
    font-family: inherit; font-size: 14.5px; padding: 2px 0;
}
.sim-liste__filtre input:focus { outline: none; }

.sim-liste__corps {
    max-height: min(52vh, 460px); overflow-y: auto; padding: 10px;
    display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.sim-piece {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px; align-items: center; text-align: left;
    padding: 10px 12px; border-radius: 13px; cursor: pointer;
    background: var(--surface); border: 2px solid transparent;
    font-family: inherit; color: inherit;
    transition: border-color .15s, background .15s, transform .12s;
}
.sim-piece:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-1px); }
.sim-piece.actif {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.sim-piece__v {
    width: 52px; height: 46px; border-radius: 9px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--ligne);
}
.sim-piece__v img { width: 100%; height: 100%; object-fit: cover; }
.sim-piece__v i { font-style: normal; font-size: 20px; }
.sim-piece__txt { min-width: 0; }
.sim-piece__txt b {
    display: block; font-size: 13.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sim-piece__n {
    display: block; font-size: 11.5px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sim-piece__i { display: inline-block; font-size: 11px; font-weight: 750; color: var(--accent); margin-top: 2px; }

/* ⚠️ « PORTABLE » DOIT SE VOIR, SINON DEUX PIÈCES SONT INDISCERNABLES.
   MESURÉ : la liste NVIDIA contient deux « GeForce RTX 4090 » — la carte de
   bureau (indice 3350) et la puce de portable (1900). Ce ne sont PAS des
   doublons : ce sont deux puces réellement différentes, et l'écran
   d'administration a raison de les séparer. Mais sans mention à l'écran, on
   choisissait l'une pour l'autre sans le savoir. */
.sim-piece__mob {
    display: inline-block; margin: 2px 0 0 6px; padding: 1px 7px;
    border-radius: 999px; font-size: 10px; font-weight: 750;
    background: color-mix(in srgb, var(--ambre) 16%, transparent); color: var(--ambre);
}
.sim-piece__a { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ⚠️ UNE PIÈCE SANS INDICE RESTE CHOISISSABLE, mais elle se signale. La
   masquer laisserait croire le catalogue incomplet ; la griser jusqu'à
   l'illisible empêcherait de la lire. Elle est simplement plus discrète, et
   dit ce qui lui manque. */
.sim-piece--sansindice { opacity: .72; }
.sim-piece--sansindice .sim-piece__v { filter: grayscale(1); }
.sim-piece__i--non { color: var(--ink-3) !important; font-weight: 600 !important; }

/* Les rectangles d'attente : un vide se lit comme une panne. */
.sim-sq {
    height: 68px; border-radius: 13px;
    background: linear-gradient(90deg,
        var(--surface) 25%, color-mix(in srgb, var(--ink) 6%, var(--bg)) 37%, var(--surface) 63%);
    background-size: 400% 100%;
    animation: sim-sq 1.3s ease infinite;
}
@keyframes sim-sq { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.pg-calme .sim-sq { animation: none; }

.sim-attente { grid-column: 1 / -1; padding: 26px; text-align: center;
               color: var(--ink-3); font-size: 13.5px; }

/* ── La mémoire ── */
.sim-ram { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.sim-ram__b {
    display: grid; gap: 4px; padding: 18px; border-radius: 16px; cursor: pointer;
    text-align: left; font-family: inherit; color: inherit;
    background: var(--carte); border: 2px solid var(--ligne);
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.sim-ram__b:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-3px); box-shadow: var(--ombre-f);
}
.sim-ram__b.actif {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--carte));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.sim-ram__b b { font-size: 27px; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.sim-ram__b b u { text-decoration: none; font-size: 14px; font-weight: 700; margin-left: 4px; color: var(--ink-3); }
.sim-ram__b i { font-style: normal; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.sim-ram__b em {
    font-style: normal; font-size: 10.5px; font-weight: 750; margin-top: 3px; color: var(--ambre);
}

/* ── Le stockage ──
   Trois choix seulement : le format est donc plus large, et chacun porte son
   explication. ⚠️ LE DISQUE MÉCANIQUE SE SIGNALE AVANT LE CHOIX — c'est le seul
   qui puisse empêcher un jeu de démarrer, et le découvrir au résultat se vivrait
   comme une mauvaise surprise plutôt que comme une information. */
.sim-sto { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sim-sto__b {
    display: grid; gap: 5px; padding: 20px; border-radius: 16px; cursor: pointer;
    text-align: left; font-family: inherit; color: inherit;
    background: var(--carte); border: 2px solid var(--ligne);
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.sim-sto__b:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-3px); box-shadow: var(--ombre-f);
}
.sim-sto__b.actif {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--carte));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.sim-sto__e { font-size: 26px; margin-bottom: 3px; }
.sim-sto__b b { font-size: 17px; font-weight: 800; }
.sim-sto__b i { font-style: normal; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.sim-sto__b--risque { border-style: dashed; }
.sim-sto__b--risque i { color: var(--ambre); }

/* ── Les définitions ── */
.sim-defs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sim-def {
    display: grid; gap: 3px; padding: 18px; border-radius: 16px; cursor: pointer;
    text-align: left; font-family: inherit; color: inherit;
    background: var(--carte); border: 2px solid var(--ligne);
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.sim-def:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-3px); box-shadow: var(--ombre-f);
}
.sim-def.actif {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--carte));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.sim-def__e { font-size: 22px; margin-bottom: 4px; }
.sim-def b { font-size: 19px; font-weight: 820; }
.sim-def i { font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sim-def em { font-style: normal; font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }
.sim-def u {
    text-decoration: none; margin-top: 7px; padding: 5px 8px; border-radius: 8px;
    font-size: 10.5px; font-weight: 700; line-height: 1.35; color: var(--ambre);
    background: color-mix(in srgb, var(--ambre) 11%, transparent);
}
.sim-def--extra { border-style: dashed; }

/* ── Les jeux ── */
.sim-jeux {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
}
.sim-jeuc {
    position: relative; display: grid; gap: 7px; padding: 9px; border-radius: 15px;
    cursor: pointer; text-align: left; font-family: inherit; color: inherit;
    background: var(--carte); border: 2px solid var(--ligne);
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.sim-jeuc:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-3px); box-shadow: var(--ombre-f);
}
.sim-jeuc.actif {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--carte));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.sim-jeuc.actif::after {
    content: '✓'; position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.sim-jeuc__v {
    display: block; border-radius: 10px; overflow: hidden;
    aspect-ratio: 16 / 9; background: var(--surface);
}
.sim-jeuc__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-jeuc__e {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 32px; font-style: normal;
}
.sim-jeuc b {
    font-size: 12.5px; font-weight: 650; line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.64em;
}

/* Le compte du catalogue, au-dessus de la grille. */
.sim-jeux__compte {
    margin: 0 0 12px; font-size: 13px; color: var(--ink-3);
}
.sim-jeux__compte b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* La pagination. Elle disparaît quand il n'y a qu'une page : deux boutons
   éteints sous une grille complète n'apprennent rien. */
.sim-pagin {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ligne);
}
.sim-pagin button {
    padding: 9px 16px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 650; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--ligne);
    transition: background .15s, color .15s, border-color .15s;
}
.sim-pagin button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.sim-pagin button:disabled { opacity: .4; cursor: not-allowed; }
.sim-pagin span { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ⚠️ CE QUE GAMESCAN SAURA DIRE, ANNONCÉ SUR LA VIGNETTE. Découvrir « je ne
   sais pas » après cinq étapes se vit comme une panne ; le savoir avant de
   choisir, comme une information. */
.sim-jeuc__peut { display: flex; gap: 4px; font-size: 11.5px; }
.sim-jeuc__peut i { font-style: normal; }
.sim-jeuc__peut i.non { opacity: .22; filter: grayscale(1); }

/* ── La barre de validation ──────────────────────────────────────────────
   ⚠️ FIXÉE EN BAS, ET C'EST CE QUI FAIT L'ASSISTANT. Le choix se prend en
   haut, la validation en bas : sans barre fixe, il faudrait redescendre
   chercher le bouton après chaque sélection.                             */
.sim-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--ligne);
    box-shadow: 0 -8px 28px -18px rgba(15,23,42,.4);
}
.sim-nav__in {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px; align-items: center; padding: 13px 0;
}
.sim-nav__prec, .sim-nav__suiv {
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 12px; cursor: pointer; font-family: inherit; font-weight: 700;
    transition: background .15s, transform .15s, opacity .15s;
}
.sim-nav__prec {
    padding: 11px 18px; font-size: 14px; color: var(--ink-2);
    background: none; border: 1px solid var(--ligne);
}
.sim-nav__prec:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.sim-nav__suiv {
    padding: 13px 26px; font-size: 15px; color: #fff; border: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 62%, transparent);
}
.sim-nav__suiv:hover:not(:disabled) { transform: translateY(-1px); }
.sim-nav__prec:disabled, .sim-nav__suiv:disabled {
    opacity: .42; cursor: not-allowed; box-shadow: none; transform: none;
}
.sim-nav__etat { margin: 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.sim-nav__etat--ok { color: var(--vert); font-weight: 650; }

.sim-noscript { padding: 24px 0 48px; }

/* ⚠️ LE PIED DE PAGE DISPARAÎT PENDANT LES ÉTAPES, et ce n'est pas de la
   coquetterie : la barre de validation est fixée en bas de l'écran, et le pied
   de page passait dessous — ses liens devenaient incliquables, ses trois
   colonnes se lisaient à travers un bandeau translucide.

   Il revient sur l'accueil et sur le résultat, où la barre n'est plus là. Un
   assistant en cours n'a de toute façon rien à gagner à proposer six autres
   destinations. */
body.sim-encours .pg-foot { display: none; }

/* ── Le récapitulatif de la dernière vue ── */
.sim-recap {
    display: grid; gap: 10px; margin-bottom: 18px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.sim-recap__t {
    padding: 12px 15px; border-radius: 13px;
    border: 1px solid var(--ligne); background: var(--surface);
}
.sim-recap__t span {
    display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 4px;
}
.sim-recap__t b {
    display: block; font-size: 13.5px; font-weight: 720; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Le disque qui tourne pendant le calcul. */
.sim-calcul { padding: 56px 20px; text-align: center; }
.sim-calcul__r {
    display: inline-block; width: 34px; height: 34px; margin-bottom: 14px;
    border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-top-color: var(--accent); animation: sim-r .8s linear infinite;
}
@keyframes sim-r { to { transform: rotate(360deg); } }
.pg-calme .sim-calcul__r { animation: none; }
.sim-calcul p { margin: 0; font-size: 14px; color: var(--ink-3); }

/* ── L'avis flottant ── */
.sim-flash {
    position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 14px);
    z-index: 200; max-width: min(560px, 92vw);
    padding: 12px 18px; border-radius: 12px; font-size: 13.5px;
    background: var(--ink); color: var(--bg); box-shadow: var(--ombre-f);
    opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
    word-break: break-all;
}
.sim-flash.vu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ── Étroit ── */
@media (max-width: 720px) {
    .sim-vue__in { padding: 26px 0 116px; }
    .sim-pas li b { display: none; }
    .sim-pas li { padding: 6px; }
    .sim-nav__in { grid-template-columns: auto auto; gap: 10px; }
    .sim-nav__etat { grid-column: 1 / -1; order: -1; text-align: left; }
    .sim-nav__suiv { justify-self: end; }
    .sim-liste__corps { grid-template-columns: 1fr; max-height: 46vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE RÉSULTAT
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ LA VERSION PRÉCÉDENTE EMPILAIT TOUT EN UNE COLONNE : le chiffre, le
   tableau, les quatre volets du goulot, les charges, les conseils — six blocs
   à la file, pour chacun des six jeux possibles. On ne trouvait plus rien, et
   tout avait l'air également important.

   Chaque jeu est maintenant une carte à DEUX COLONNES : à gauche ce qu'on
   vient chercher (le nombre d'images, le tableau des réglages), à droite ce
   qui l'explique (le goulot, les conseils). La hiérarchie est dans la mise en
   page, pas seulement dans les titres.                                    */

.sim-vue--res .sim-vue__in { padding: 26px 0 60px; }

/* Le conteneur du fragment de résultat. Il est remplacé en bloc à chaque
   recalcul : la marge appartient donc à lui, pas à son premier enfant, qui
   change selon qu'il y a un bandeau d'avertissement ou non. */
.sim-res { margin-top: 4px; }

/* ── Le récapitulatif ── */
.sim-recap {
    display: grid; gap: 10px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.sim-recap__t {
    padding: 12px 15px; border-radius: 13px;
    border: 1px solid var(--ligne); background: var(--surface);
}
.sim-recap__t span {
    display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 4px;
}
.sim-recap__t b {
    display: block; font-size: 13.5px; font-weight: 720; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sim-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }

/* ── La synthèse ── */
.sim-synth {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px;
    align-items: center; padding: 22px 24px; margin-bottom: 16px;
    border-radius: 18px; border: 1px solid var(--ligne);
    border-left: 5px solid var(--ink-3);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, var(--carte)), var(--carte));
}
/* La teinte dit la réponse avant qu'on lise : vert ça passe, ambre en partie,
   rouge un jeu ne démarre pas. */
.sim-synth--vert  { border-left-color: var(--vert); }
.sim-synth--ambre { border-left-color: var(--ambre); }
.sim-synth--rouge { border-left-color: var(--rouge); }
.sim-synth__e { font-size: 44px; line-height: 1; }
.sim-synth__cpt {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.sim-synth__cpt li {
    padding: 4px 11px; border-radius: 999px; font-size: 12.5px;
    background: var(--surface); border: 1px solid var(--ligne); color: var(--ink-2);
}
.sim-synth__cpt li b { color: var(--ink); }

/* Une note d'une ligne, pas un bandeau : elle vaut pour toute la page. */
.sim-note {
    margin: -4px 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
}
.sim-synth__jauge {
    text-align: center; padding: 14px 8px; border-radius: 14px;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.sim-synth__jauge b {
    display: block; font-size: 42px; font-weight: 850; line-height: 1;
    color: var(--accent); font-variant-numeric: tabular-nums;
}
.sim-synth__jauge span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.sim-synth__txt h2 { margin: 0 0 8px; font-size: 21px; font-weight: 820; }
.sim-synth__txt p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.sim-synth__manque { font-size: 12.5px !important; color: var(--ink-3) !important; }

/* ── Les bandeaux ── */
.sim-avis {
    display: flex; gap: 12px; padding: 14px 16px; margin-bottom: 16px;
    border-radius: 13px; font-size: 13.5px; line-height: 1.6;
    border: 1px solid var(--ligne); background: var(--surface);
}
.sim-avis > span { font-size: 18px; line-height: 1.3; flex: none; }
.sim-avis--attention {
    border-color: color-mix(in srgb, var(--ambre) 40%, transparent);
    background: color-mix(in srgb, var(--ambre) 9%, transparent);
}
.sim-avis--stop {
    border-color: color-mix(in srgb, var(--rouge) 40%, transparent);
    background: color-mix(in srgb, var(--rouge) 9%, transparent);
}

/* ══════════════ LA CARTE D'UN JEU ══════════════ */
/* ⚠️ PAS D'« overflow: hidden » : il coupait les bulles d'explication des
   composants. L'arrondi est reporté sur l'en-tête, seul bloc coloré en haut. */
.sim-jc {
    margin-bottom: 18px; border-radius: 18px; overflow: visible;
    border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre);
}

.sim-jc__tete {
    display: grid; grid-template-columns: 128px minmax(0, 1fr) auto;
    gap: 18px; align-items: center; padding: 18px 22px;
    border-bottom: 1px solid var(--ligne);
    background: var(--surface);
    border-radius: 17px 17px 0 0;
}
.sim-jc__jaq {
    display: block; width: 128px; aspect-ratio: 16 / 9; border-radius: 11px;
    overflow: hidden; background: var(--bg); border: 1px solid var(--ligne);
}
.sim-jc__jaq img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-jc__jaq i {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 34px; font-style: normal;
}
.sim-jc__id h3 { margin: 0 0 6px; font-size: 19px; font-weight: 790; line-height: 1.25; }
.sim-jc__id h3 a { color: inherit; }
.sim-jc__id h3 a:hover { color: var(--accent); }
.sim-jc__id p { margin: 0; display: flex; gap: 12px; flex-wrap: wrap;
                font-size: 12px; color: var(--ink-3); }
.sim-jc__tag {
    padding: 1px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--ambre) 15%, transparent); color: var(--ambre);
    font-weight: 650;
}

/* Le chiffre : c'est la réponse à la question posée, il est traité comme tel. */
.sim-jc__fps { text-align: right; min-width: 132px; }
.sim-jc__fps b {
    display: block; font-size: 46px; font-weight: 860; line-height: 1;
    color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sim-jc__fps b u { text-decoration: none; font-size: 26px; }
.sim-jc__fps span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.sim-jc__fps i { display: block; font-style: normal; font-size: 11.5px;
                 color: var(--ink-3); margin-top: 3px; }
.sim-jc__nsp { color: var(--ink-3) !important; }

/* Le liseré de la carte reprend le verdict du jeu. */
.sim-jc--vert  { border-left: 4px solid var(--vert); }
.sim-jc--ambre { border-left: 4px solid var(--ambre); }
.sim-jc--rouge { border-left: 4px solid var(--rouge); }

.sim-jc__verdict { margin: 0 0 4px !important; display: flex; align-items: center; gap: 7px;
                   font-size: 14px !important; color: var(--ink) !important; }
.sim-jc__verdict span { font-size: 18px; }
.sim-jc__meta { font-size: 12px; }
.sim-jc__stop { font-size: 38px !important; }

/* ⚠️ UNE SEULE COLONNE. La mise en deux colonnes plaçait côte à côte un
   tableau et cinq volets : deux lectures concurrentes. Le corps se lit
   maintenant de haut en bas, dans l'ordre des questions. */
.sim-jc__corps { display: block; padding: 18px 22px 20px; }
.sim-jc__texte { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.sim-jc__corps .sim-bilan__act { margin: 0 0 16px; padding-top: 0; border-top: 0; }

/* ── L'état de chaque pièce ── */
.sim-comp {
    list-style: none; margin: 0 0 12px; padding: 0;
    display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
}
.sim-comp__aide { margin: 0 0 8px; font-size: 12px; color: var(--ink-3); }
.sim-comp__i {
    position: relative; cursor: help;
    transition: border-color .15s ease, box-shadow .15s ease;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "e n c" "e s c";
    column-gap: 9px; row-gap: 1px; align-items: center;
    padding: 9px 12px; border-radius: 12px;
    border: 1px solid var(--ligne); background: var(--surface);
}
.sim-comp__e { grid-area: e; font-size: 19px; }
.sim-comp__n { grid-area: n; font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.sim-comp__s { grid-area: s; font-size: 13px; font-weight: 720; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.sim-comp__c { grid-area: c; font-style: normal; font-size: 13px; font-weight: 780;
               font-variant-numeric: tabular-nums; }
.sim-comp--marge, .sim-comp--ok { border-color: color-mix(in srgb, var(--vert) 35%, var(--ligne)); }
.sim-comp--marge .sim-comp__c, .sim-comp--ok .sim-comp__c { color: var(--vert); }
.sim-comp--juste { border-color: color-mix(in srgb, var(--ambre) 45%, var(--ligne)); }
.sim-comp--juste .sim-comp__c { color: var(--ambre); }
.sim-comp--insuffisant { border-color: color-mix(in srgb, var(--rouge) 45%, var(--ligne));
                         background: color-mix(in srgb, var(--rouge) 6%, var(--surface)); }
.sim-comp--insuffisant .sim-comp__c { color: var(--rouge); }
.sim-comp--inconnu .sim-comp__s { color: var(--ink-3); font-weight: 600; }

/* ── La bulle d'explication ── */
.sim-comp__info-i {
    font-style: normal; font-size: 11px; color: var(--accent);
    margin-left: 2px;
}
.sim-comp__i:hover, .sim-comp__i:focus-visible, .sim-comp__i:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    outline: none;
}
.sim-comp__bulle {
    display: none; position: absolute; z-index: 30;
    top: calc(100% + 8px); left: 0; width: min(340px, 86vw);
    padding: 12px 14px; border-radius: 12px;
    background: var(--carte); color: var(--ink);
    border: 1px solid var(--ligne); box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .28);
    font-size: 12.5px; line-height: 1.6; text-align: left; cursor: default;
}
.sim-comp__bulle::before {
    content: ""; position: absolute; top: -6px; left: 22px;
    width: 10px; height: 10px; transform: rotate(45deg);
    background: var(--carte);
    border-left: 1px solid var(--ligne); border-top: 1px solid var(--ligne);
}
.sim-comp__bulle b    { display: block; margin-bottom: 4px; font-size: 13px; }
.sim-comp__bulle span { display: block; color: var(--ink-2); }
.sim-comp__bulle cite { display: block; margin-top: 6px; font-style: normal; font-size: 11px; color: var(--ink-3); }
.sim-comp__i:hover .sim-comp__bulle,
.sim-comp__i:focus .sim-comp__bulle,
.sim-comp__i:focus-within .sim-comp__bulle { display: block; }

/* Les bulles des cases de droite s'ouvrent vers la gauche, pour ne pas sortir
   de l'écran. */
.sim-comp__i:nth-child(n+3) .sim-comp__bulle { left: auto; right: 0; }
.sim-comp__i:nth-child(n+3) .sim-comp__bulle::before { left: auto; right: 22px; }

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

/* ── Le détail, replié ── */
.sim-plus { display: grid; gap: 8px; }
.sim-plus details {
    border: 1px solid var(--ligne); border-radius: 12px; background: var(--carte);
}
.sim-plus summary {
    cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 700;
    list-style-position: inside;
}
.sim-plus details[open] summary { border-bottom: 1px solid var(--ligne); }
.sim-plus .sim-tab { margin: 0; padding: 4px 8px 8px; }
.sim-detail { padding: 12px 14px; }
.sim-detail ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 9px; }
.sim-detail li b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.sim-detail li span { display: block; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.sim-detail li cite { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.sim-detail__global { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.sim-detail__src { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }

/* À l'impression, le détail replié n'apparaîtrait pas : on n'imprime que
   l'essentiel, et on le dit par l'absence des sommaires. */
@media print {
    .sim-plus { display: none; }
}
.sim-jc__gauche { padding: 20px 22px; border-right: 1px solid var(--ligne); }
.sim-jc__droite { padding: 20px 22px; background: var(--surface); }

.sim-jc__corps h4 {
    margin: 0 0 12px; font-size: 14px; font-weight: 760;
    letter-spacing: .01em;
}

/* ── Le tableau ── */
.sim-tab { overflow-x: auto; margin-bottom: 14px; }
.sim-tab table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sim-tab th, .sim-tab td {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--ligne);
    white-space: nowrap;
}
.sim-tab th {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-3); border-bottom-width: 2px;
}
.sim-tab tr:last-child td { border-bottom: 0; }
.sim-tab tbody tr:hover { background: var(--surface); }
.sim-tab__n { text-align: right !important; }
.sim-tab__n b { font-size: 15px; font-weight: 820; font-variant-numeric: tabular-nums; }
.sim-tab__n i {
    display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.sim-src {
    padding: 11px 14px; border-radius: 11px;
    border: 1px dashed var(--ligne); background: var(--surface);
}
.sim-src summary { cursor: pointer; font-size: 12.5px; font-weight: 700; }
.sim-src p { margin: 10px 0 0; font-size: 12px; line-height: 1.62; color: var(--ink-2); }

/* ── Les blocs de droite ── */
.sim-bloc { margin-bottom: 16px; }
.sim-bloc:last-child { margin-bottom: 0; }

.sim-verdict { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.sim-verdict span { font-size: 19px; }
.sim-verdict b { font-size: 15px; font-weight: 780; color: currentColor; }
.sim-verdict__x { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* Les couleurs de palier, posées une fois et héritées. */
.sim-n--aucun, .sim-n--leger  { color: var(--vert); }
.sim-n--modere                 { color: var(--ambre); }
.sim-n--important              { color: var(--ambre); }
.sim-n--tres_important         { color: var(--rouge); }
.sim-n--inconnu                { color: var(--ink-3); }

.sim-volets { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sim-volet {
    padding: 10px 12px; border-radius: 11px;
    border: 1px solid var(--ligne); background: var(--carte);
}
.sim-volet__h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sim-volet__h span { font-size: 14px; }
.sim-volet__h b { flex: 1; font-size: 12.5px; font-weight: 720; color: var(--ink); }
.sim-volet__h em {
    font-style: normal; font-size: 12.5px; font-weight: 800;
    font-variant-numeric: tabular-nums; color: currentColor;
}
.sim-volet__nsp { color: var(--ink-3) !important; }
.sim-volet__j {
    height: 4px; border-radius: 999px; margin-bottom: 7px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.sim-volet__j span { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.sim-volet p { margin: 0 0 4px; font-size: 11.5px; line-height: 1.55; color: var(--ink-2); }
.sim-volet cite { font-style: normal; font-size: 10.5px; color: var(--ink-3); }

/* ── Les charges ── */
.sim-charges {
    padding: 12px 14px; border-radius: 11px;
    border: 1px dashed var(--ligne); background: var(--carte);
}
.sim-charges h5 { margin: 0 0 3px; font-size: 12px; font-weight: 720; }
.sim-charges > p { margin: 0 0 9px; font-size: 10.5px; line-height: 1.5; color: var(--ink-3); }
.sim-charge {
    display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px;
    gap: 9px; align-items: center; margin-bottom: 5px; font-size: 11.5px;
}
.sim-charge > div {
    height: 7px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.sim-charge > div span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.sim-charge b { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Les conseils ── */
.sim-cons {
    padding: 12px 14px; border-radius: 11px; margin-bottom: 8px;
    border: 1px solid var(--ligne); background: var(--carte);
}
.sim-cons__h { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.sim-cons__h span { font-size: 16px; }
.sim-cons__h b { flex: 1; font-size: 13px; font-weight: 750; }
.sim-cons__h em {
    font-style: normal; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 820;
    background: color-mix(in srgb, var(--vert) 16%, transparent); color: var(--vert);
}
.sim-cons p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.58; color: var(--ink-2); }
.sim-cons__avert { color: var(--ink-3) !important; font-size: 10.5px !important; }
.sim-cons cite { font-style: normal; font-size: 10.5px; color: var(--ink-3); }

.sim-pieces { list-style: none; margin: 7px 0; padding: 0; display: grid; gap: 4px; }
.sim-pieces li {
    display: flex; gap: 9px; align-items: baseline;
    padding: 6px 10px; border-radius: 8px; background: var(--surface); font-size: 11.5px;
}
.sim-pieces a { font-weight: 680; color: var(--accent); }
.sim-pieces span { color: var(--ink-3); font-size: 10.5px; }
.sim-pieces b { margin-left: auto; color: var(--vert); font-variant-numeric: tabular-nums; }

.sim-vide { padding: 34px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* ── Ce qu'on ne promet pas ── */
.sim-honnete {
    margin-top: 28px; padding: 22px; border-radius: 16px;
    border: 1px dashed var(--ligne); background: var(--surface);
}
.sim-honnete h2 { margin: 0 0 16px; font-size: 17px; font-weight: 780; }
.sim-honnete__g { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sim-honnete__g b { display: block; font-size: 13px; font-weight: 750; margin-bottom: 5px; }
.sim-honnete__g p { margin: 0; font-size: 12px; line-height: 1.62; color: var(--ink-2); }

/* ── Le calcul en cours ── */
.sim-calcul { padding: 56px 20px; text-align: center; }
.sim-calcul__r {
    display: inline-block; width: 34px; height: 34px; margin-bottom: 14px;
    border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-top-color: var(--accent); animation: sim-r .8s linear infinite;
}
@keyframes sim-r { to { transform: rotate(360deg); } }
.pg-calme .sim-calcul__r { animation: none; }
.sim-calcul p { margin: 0; font-size: 14px; color: var(--ink-3); }

/* ── Étroit ──
   Sous 980 px, les deux colonnes passent l'une sous l'autre : côte à côte,
   elles deviendraient trop étroites pour le tableau comme pour les volets. */
@media (max-width: 980px) {
    .sim-jc__corps { grid-template-columns: 1fr; }
    .sim-jc__gauche { border-right: 0; border-bottom: 1px solid var(--ligne); }
}
@media (max-width: 720px) {
    .sim-synth { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; align-items: start; }
    .sim-synth__e { font-size: 30px; }
    .sim-synth__txt h2 { font-size: 18px; }
    .sim-jc__corps { padding: 14px 16px 16px; }
    .sim-jc__tete { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px 16px; }
    .sim-jc__jaq { width: 84px; }
    .sim-jc__fps { grid-column: 1 / -1; text-align: left; min-width: 0; }
    .sim-jc__fps b { font-size: 38px; }
    .sim-jc__gauche, .sim-jc__droite { padding: 16px; }
    .sim-charge { grid-template-columns: minmax(0, 1fr) 60px 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA COMPARAISON
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ HAUT ET BAS SEULEMENT. « padding: 30px 0 » écrasait la marge latérale de
   .pg-wrap : invisible sur grand écran, le contenu touchait les bords sur mobile. */
.sim-cmp { padding-top: 30px; padding-bottom: 64px; }

.sim-cmp__bilan {
    display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 20px; align-items: center; padding: 22px 26px; margin-bottom: 14px;
    border-radius: 18px; border: 1px solid var(--ligne);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 9%, var(--carte)), var(--carte));
}
.sim-cmp__b { text-align: center; }
.sim-cmp__b > span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; margin-bottom: 8px;
    font-size: 14px; font-weight: 850; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.sim-cmp__b b { display: block; font-size: 16px; font-weight: 790; }
.sim-cmp__b i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.sim-cmp__b em {
    display: inline-block; margin-top: 9px; padding: 3px 11px; border-radius: 999px;
    font-style: normal; font-size: 11.5px; font-weight: 750;
    background: var(--surface); border: 1px solid var(--ligne); color: var(--ink-2);
}
.sim-cmp__vs {
    font-size: 15px; font-weight: 850; letter-spacing: .06em; color: var(--ink-3);
    padding: 10px 14px; border-radius: 999px; background: var(--surface);
}
.sim-cmp__txt { margin: 0 0 20px; font-size: 14px; line-height: 1.62; color: var(--ink-2); }

/* Une ligne du tableau : un jeu, deux colonnes, l'écart au milieu. */
.sim-cmp__l {
    padding: 18px 22px; margin-bottom: 12px; border-radius: 16px;
    border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre);
}
.sim-cmp__l header { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.sim-cmp__jaq {
    width: 74px; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--ligne); font-size: 22px;
}
.sim-cmp__jaq img { width: 100%; height: 100%; object-fit: cover; }
.sim-cmp__jaq i { font-style: normal; }
.sim-cmp__l h3 { margin: 0; font-size: 16px; font-weight: 770; }
.sim-cmp__l h3 a { color: inherit; }
.sim-cmp__l h3 a:hover { color: var(--accent); }

.sim-cmp__duel {
    display: grid; grid-template-columns: minmax(0,1fr) 110px minmax(0,1fr);
    gap: 12px; align-items: stretch;
}
.sim-cmp__c {
    padding: 14px 16px; border-radius: 13px; text-align: center;
    border: 2px solid var(--ligne); background: var(--surface);
}

/* ⚠️ LA COLONNE GAGNANTE SE SIGNALE PAR UNE BORDURE, PAS PAR UN FOND VERT.
   Un fond coloré se lit comme « bon » ; or la machine qui devance l'autre peut
   très bien rester insuffisante pour le jeu. Ce qu'on marque ici, c'est
   « devant l'autre », pas « suffisant ». */
.sim-cmp__c--gagne {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}
.sim-cmp__c > span {
    display: inline-block; font-size: 11px; font-weight: 800; color: var(--ink-3);
    letter-spacing: .08em; margin-bottom: 4px;
}
.sim-cmp__c b {
    display: block; font-size: 30px; font-weight: 850; line-height: 1;
    color: var(--accent); font-variant-numeric: tabular-nums;
}
.sim-cmp__c b u { text-decoration: none; font-size: 17px; }
.sim-cmp__c i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.sim-cmp__c em {
    display: block; font-style: normal; font-size: 11px; margin-top: 7px;
    padding-top: 7px; border-top: 1px solid var(--ligne); color: var(--ink-2);
}

.sim-cmp__e {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px; border-radius: 13px; border: 1px dashed var(--ligne);
}
.sim-cmp__e b { font-size: 19px; font-weight: 850; font-variant-numeric: tabular-nums; }
.sim-cmp__e span { font-size: 10.5px; color: var(--ink-3); text-align: center; line-height: 1.35; }

.sim-cmp__p { margin: 13px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* L'écran vide explique comment s'en servir, plutôt que de constater le vide. */
.sim-cmp__vide { max-width: 620px; margin: 0 auto; padding: 54px 24px; text-align: center; }
.sim-cmp__e2 { font-size: 46px; margin-bottom: 14px; }
.sim-cmp__vide h2 { margin: 0 0 12px; font-size: 22px; font-weight: 810; }
.sim-cmp__vide p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.66; color: var(--ink-2); }
.sim-cmp__aide {
    padding: 0; font-size: 13px !important; margin-top: 18px !important;
}
.sim-cmp__aide a { color: var(--accent); font-weight: 650; }

/* Les deux liens à coller. */
.sim-cmp__form {
    display: grid; gap: 12px; margin: 22px 0 6px; text-align: left;
    padding: 18px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--ligne);
}
.sim-cmp__form label { display: grid; gap: 6px; }
.sim-cmp__form label span { font-size: 13px; font-weight: 700; }
.sim-cmp__form input {
    width: 100%; padding: 11px 13px; border-radius: 10px; font: inherit; font-size: 13.5px;
    border: 1px solid var(--ligne); background: var(--carte); color: var(--ink);
}
.sim-cmp__form input:focus { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.sim-cmp__form button { justify-self: center; margin-top: 4px; }
.sim-cmp__err {
    margin: 0 !important; padding: 10px 12px; border-radius: 10px; font-size: 13px !important;
    color: var(--rouge) !important; background: color-mix(in srgb, var(--rouge) 9%, transparent);
}
.sim-cmp__aide code {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
    padding: 1px 5px; border-radius: 5px; background: var(--bg);
}

@media (max-width: 860px) {
    .sim-cmp__bilan { grid-template-columns: 1fr; gap: 14px; }
    .sim-cmp__vs { justify-self: center; }
    .sim-cmp__duel { grid-template-columns: 1fr; }
    .sim-cmp__e { order: 3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🙂 LE BILAN PAR JEU

   ⚠️ LE VISAGE EST LA PARTIE UTILE. C'est la seule chose qu'on lit sans lire,
   et il doit donc être gros, isolé, et aligné sur le fait le plus GRAVE — pas
   sur la moyenne des volets. Une configuration excellente partout à qui il
   manque le SSD exigé ne mérite pas un sourire.
   ═══════════════════════════════════════════════════════════════════════════ */

.sim-bilan {
  margin-top: 18px; padding: 20px 22px;
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--ink-3);
  border-radius: 14px;
  background: var(--carte);
}

.sim-bilan--vert   { border-left-color: var(--vert);
  background: color-mix(in srgb, var(--vert) 6%, var(--carte));
  border-color: color-mix(in srgb, var(--vert) 26%, var(--ligne)); }
.sim-bilan--ambre  { border-left-color: var(--ambre);
  background: color-mix(in srgb, var(--ambre) 6%, var(--carte));
  border-color: color-mix(in srgb, var(--ambre) 26%, var(--ligne)); }
.sim-bilan--rouge  { border-left-color: var(--rouge);
  background: color-mix(in srgb, var(--rouge) 6%, var(--carte));
  border-color: color-mix(in srgb, var(--rouge) 26%, var(--ligne)); }
.sim-bilan--neutre { border-left-color: var(--ink-3); }

.sim-bilan__h { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }

/* ⚠️ 34 PIXELS, PAS 16. À la taille du texte, un visage n'est plus qu'une
   ponctuation : on le lit après la phrase, alors qu'il doit se lire avant. */
.sim-bilan__e { font-size: 34px; line-height: 1; flex: none; }
.sim-bilan__h b { font-size: 18px; letter-spacing: -.015em; line-height: 1.3; }

.sim-bilan__x { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }

.sim-bilan__act { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--ligne); }
.sim-bilan__act h5 {
  margin: 0 0 11px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); font-weight: 700;
}

.sim-bilan__act ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: b; }
.sim-bilan__act li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--ligne);
  counter-increment: b;
}
.sim-bilan__act li > span:first-child { font-size: 19px; line-height: 1.2; flex: none; }
.sim-bilan__act li div { min-width: 0; }

/* Le rang est repris devant l'intitulé : l'ordre EST l'information — le geste
   le plus rentable d'abord, pas le plus cher. */
.sim-bilan__act li b::before {
  content: counter(b) ". "; color: var(--accent); font-weight: 800;
}
.sim-bilan__act li b { display: block; font-size: 14px; margin-bottom: 2px; }
.sim-bilan__act li div span { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

.sim-bilan__nsp {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--ligne);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
}

@media (max-width: 620px) {
  .sim-bilan { padding: 16px 16px; }
  .sim-bilan__e { font-size: 28px; }
  .sim-bilan__h b { font-size: 16px; }
}

/* ══════════════ COMPARAISON : LES ONGLETS ══════════════ */
.sim-cmp__onglets {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 0 0 20px; padding: 5px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--ligne);
    width: fit-content; max-width: 100%;
}
.sim-cmp__onglets a {
    padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
    color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.sim-cmp__onglets a:hover { color: var(--ink); background: var(--carte); }
.sim-cmp__onglets a.actif { background: var(--accent); color: #fff; }

/* ══════════════ COMPARAISON : DEUX PIÈCES ══════════════ */
.sim-duo__form {
    display: grid; gap: 12px; align-items: end;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 150px auto;
    padding: 16px 18px; margin-bottom: 18px; border-radius: 16px;
    background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre);
}
.sim-duo__form label { display: grid; gap: 6px; min-width: 0; }
.sim-duo__form label span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sim-duo__form select {
    width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px;
    border: 1px solid var(--ligne); background: var(--bg); color: var(--ink);
}
.sim-duo__form select:focus { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.sim-duo__vs {
    align-self: center; margin-top: 18px; font-size: 13px; font-weight: 850;
    color: var(--ink-3); letter-spacing: .06em;
}

/* ══════════════ L'ARÈNE : DEUX PIÈCES FACE À FACE ══════════════
   Chaque carte porte la bannière de son constructeur sous un voile sombre, le
   logo de la gamme dans un écrin clair (lisible sur n'importe quel fond), et
   une jauge de puissance relative à la plus forte des deux. */
.sim-arene {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px; align-items: stretch; margin-bottom: 16px;
}
.sim-arene__c {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 250px; padding: 22px 22px 20px; border-radius: 20px;
    color: #fff; text-decoration: none;
    background: var(--arene-fond, none) center / cover no-repeat, var(--arene-base, #334155);
    box-shadow: var(--ombre);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sim-arene__c:hover { transform: translateY(-2px); color: #fff; }
.sim-arene__c--nvidia { --arene-base: linear-gradient(135deg, #0b3d1a, #76b900); }
.sim-arene__c--amd    { --arene-base: linear-gradient(135deg, #3b0a0a, #ed1c24); }
.sim-arene__c--intel  { --arene-base: linear-gradient(135deg, #062a52, #0071c5); }
.sim-arene__c--autre  { --arene-base: linear-gradient(135deg, #1e293b, #475569); }

.sim-arene__voile {
    position: absolute; inset: 0; z-index: -1;
    /* Sombre sous le texte (à gauche), plus léger à droite : la bannière reste
       reconnaissable sans concurrencer le nom de la pièce. */
    background:
        linear-gradient(90deg, rgba(8,12,24,.94) 0%, rgba(8,12,24,.82) 45%, rgba(8,12,24,.45) 100%),
        linear-gradient(0deg, rgba(8,12,24,.6) 0%, rgba(8,12,24,0) 45%);
}
.sim-arene__c--gagne {
    box-shadow: 0 0 0 3px var(--vert), 0 14px 34px -14px rgba(22, 163, 74, .55);
}
.sim-arene__coupe {
    position: absolute; top: 14px; right: 14px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--vert); color: #fff; font-size: 12px; font-weight: 800;
}

.sim-arene__logos { display: flex; align-items: center; gap: 10px; }
.sim-arene__logo {
    width: 64px; height: 64px; object-fit: contain; padding: 6px;
    border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.sim-arene__marque {
    height: 26px; max-width: 90px; object-fit: contain;
    padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.92);
}
.sim-arene__nom {
    margin-top: 6px; font-size: 24px; font-weight: 850; line-height: 1.15;
    letter-spacing: -.015em; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.sim-arene__meta { font-size: 12.5px; opacity: .85; }

.sim-arene__ind {
    margin-top: auto; display: grid; grid-template-columns: auto 1fr;
    align-items: baseline; gap: 2px 10px;
}
.sim-arene__ind i { grid-column: 1 / -1; font-style: normal; font-size: 11px;
                    letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.sim-arene__ind b { font-size: 30px; font-weight: 850; font-variant-numeric: tabular-nums; }
.sim-arene__jauge {
    align-self: center; height: 10px; border-radius: 999px;
    background: rgba(255,255,255,.18); overflow: hidden;
}
.sim-arene__jauge s {
    display: block; height: 100%; border-radius: 999px; text-decoration: none;
    background: rgba(255,255,255,.85);
}
.sim-arene__c--gagne .sim-arene__jauge s { background: #4ade80; }

/* Le médaillon central : VS et l'écart. */
.sim-arene__vs {
    align-self: center; display: grid; place-items: center; gap: 2px;
    width: 92px; height: 92px; border-radius: 50%;
    background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre);
}
.sim-arene__vs span { font-size: 12px; font-weight: 850; letter-spacing: .1em; color: var(--ink-3); }
.sim-arene__vs b { font-size: 18px; font-weight: 850; color: var(--accent); line-height: 1; }

.sim-duo__verdict {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 0 0 16px; padding: 16px 20px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--ligne);
    border-left: 4px solid var(--vert);
}
.sim-duo__verdict--egal { border-left-color: var(--accent); }
.sim-duo__verdict > span { font-size: 26px; line-height: 1.1; }
.sim-duo__verdict b { display: block; font-size: 18px; margin-bottom: 4px; }
.sim-duo__verdict p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* Les logos repères dans les barres et le tableau. */
.sim-duo__barre i img { width: 22px; height: 22px; object-fit: contain; display: block;
                        border-radius: 5px; background: #fff; padding: 1px; }
.sim-duo__th { display: inline-flex; align-items: center; gap: 8px; }
.sim-duo__th img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px;
                   background: #fff; padding: 2px; border: 1px solid var(--ligne); }

.sim-duo__bloc {
    margin-bottom: 18px; padding: 18px 22px; border-radius: 18px;
    background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre);
}
.sim-duo__bloc h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.sim-duo__x { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.sim-duo__ref { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* Un jeu : nom à gauche, deux barres, l'écart à droite. */
.sim-duo__jeu {
    display: grid; grid-template-columns: 220px minmax(0, 1fr) 150px;
    gap: 16px; align-items: center; padding: 10px 0;
    border-top: 1px solid var(--ligne);
}
.sim-duo__jn { display: flex; align-items: center; gap: 10px; min-width: 0;
               color: inherit; text-decoration: none; }
.sim-duo__jn img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; }
.sim-duo__jn b { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sim-duo__jn:hover b { color: var(--accent); }

.sim-duo__barres { display: grid; gap: 5px; }
.sim-duo__barre { display: grid; grid-template-columns: 24px minmax(0, 1fr) 76px; gap: 8px; align-items: center; }
.sim-duo__barre i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink-3); }
.sim-duo__barre span { height: 10px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.sim-duo__barre s {
    display: block; height: 100%; border-radius: 999px; text-decoration: none;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.sim-duo__barre.gagne s { background: var(--accent); }
.sim-duo__barre b { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

.sim-duo__ec { font-style: normal; font-size: 12px; font-weight: 700; text-align: right;
               color: var(--ink-3); line-height: 1.35; }
.sim-duo__ec.plus  { color: var(--ink-2); }
/* Le pourcentage, sous le nom du gagnant, en évidence. */
.sim-duo__ec.plus::first-line { font-weight: 650; }

.sim-duo__tab { width: 100%; }
.sim-duo__tab th[scope="row"] { font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.sim-duo__tab td.mieux { color: var(--vert); font-weight: 800; }

@media (max-width: 860px) {
    .sim-arene { grid-template-columns: 1fr; }
    .sim-arene__vs { justify-self: center; width: 76px; height: 76px; margin: -24px 0; z-index: 1; }
    .sim-arene__c { min-height: 210px; }
    .sim-arene__nom { font-size: 21px; }
    .sim-duo__form { grid-template-columns: 1fr; }
    .sim-duo__vs { margin: 0; justify-self: center; }
    .sim-duo__jeu { grid-template-columns: 1fr; gap: 8px; }
    .sim-duo__ec { text-align: left; }
    .sim-duo__bloc { padding: 16px; }
}

/* ═══════════════════ OÙ ACHETER, SOUS LE RÉSULTAT ═══════════════════
   ⚠️ CE BLOC NE DOIT PAS RESSEMBLER AU VERDICT. Le reste de la page mesure ;
   celui-ci vend. Un encadré volontairement plus sobre — pas de teinte de
   verdict, pas de gros chiffre — pour qu'on voie d'un coup d'œil qu'on a
   changé de registre. */
.sim-shop {
    margin-top: 28px; padding: 22px;
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--surface);
}
.sim-shop__h h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.01em; }
.sim-shop__h p  { margin: 0 0 18px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.sim-shop__g {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.sim-shop__r {
    display: flex; flex-direction: column;
    padding: 15px 16px; border-radius: 12px;
    background: var(--carte); border: 1px solid var(--ligne);
}
.sim-shop__r h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 7px; }

/* La pièce visée, puis la règle appliquée. La seconde est la promesse du
   bloc : « uniquement du NVIDIA », « ce que votre processeur accepte ». */
.sim-shop__pour  { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.sim-shop__regle { margin: 3px 0 12px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

.sim-shop__l { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sim-shop__l a {
    display: block; padding: 9px 11px; border-radius: 9px;
    border: 1px solid var(--ligne); text-decoration: none; color: inherit;
    transition: border-color .15s, background .15s;
}
.sim-shop__l a:hover { border-color: var(--accent); background: var(--surface); }
.sim-shop__l b { display: block; font-size: 12.5px; line-height: 1.4; }
.sim-shop__l span { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.sim-shop__l i { display: block; margin-top: 2px; font-size: 11px; font-style: normal; color: var(--ink-2); }

/* Le lien de recherche ferme toujours le rayon, garni ou non : c'est lui qui
   rend le bloc utile avant qu'une seule fiche ait été saisie. */
.sim-shop__plus {
    margin-top: auto; font-size: 12.5px; font-weight: 600;
    color: var(--accent); text-decoration: none;
}
.sim-shop__plus:hover { text-decoration: underline; }

.sim-shop__np {
    margin: 16px 0 0; padding: 11px 13px; border-radius: 10px;
    background: var(--carte); border: 1px solid var(--ligne);
    font-size: 12px; color: var(--ink-2); line-height: 1.6;
}

/* ⚠️ LA MENTION D'AFFILIATION SE LIT. Elle est discrète, pas invisible :
   la masquer serait exactement ce que le contrat Amazon interdit. */
.sim-shop__aff {
    margin: 12px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
}

/* Rien de tout cela ne part à l'imprimante. */
@media print { .sim-shop { display: none; } }