/* ==========================================================================
   QUELLE CHAISE GAMING CHOISIR (maquette client « fauteuil-gamer »)

   Sixième guide du cluster Setup et Matériel, même gabarit que le ping, le
   casque, l'écran, le clavier et le PC. Elle réutilise quatre feuilles déjà en
   place : agent.css pour le reset, le body, le fil d'Ariane et la palette de
   marque, listing.css pour le bandeau compact et ses pastilles, guide.css pour
   la mise en page à deux colonnes, le sommaire collant, les chapitres et le
   bloc « Pour aller plus loin », et mode-triche.css pour la barre de
   progression (masquée en mobile par cette feuille, rien à écrire ici) et la
   FAQ en questions ouvertes.

   TOUTES les règles sont scopées sous .chaise-gaming-page, sans exception (leçon de
   setup.css, du ping, du casque, de l'écran, du clavier et du PC) : la feuille
   est chargée dans @section('head'), donc AVANT agent.css et mega-menu.css, et
   un sélecteur nu y déborderait sur le reste du site en plus d'y perdre ses
   arbitrages de spécificité.

   ACCENT DE LA PAGE : le turquoise #4cc9b0 de la maquette, celui des
   sentinelles. Il n'est PAS injecté en :root par ColorPalette comme sur une
   fiche agent : le méga menu et le pied de page doivent rester à la couleur de
   la marque. Il vit donc dans les jetons ci-dessous.

   .shop-* : agent.css porte déjà une famille .shop-card, chargée partout. Les
   cartes produit de cette maquette ont une autre anatomie (.shop-img,
   .shop-body, .shop-foot contre .shop-card-img, .shop-card-body,
   .shop-card-footer) ; le scope .chaise-gaming-page suffit à faire gagner les règles
   d'ici, et chaque propriété utile est redéclarée plutôt que laissée à
   l'héritage.

   NOM ET SCOPE : chaise-gaming.css / .chaise-gaming-page, à la convention
   maison des pages dont le nom de feuille reprend le sujet du guide (casque.css,
   ecran.css, clavier.css). Les jetons gardent leur préfixe --f-* : ils sont
   locaux au scope, les renommer n'apporterait rien.
   ========================================================================== */

  .chaise-gaming-page {
    --f-accent: #4cc9b0;
    --f-accent-dark: #2f8f7c;
    --f-accent-light: #e3f7f2;

    /* Le turquoise du bandeau sombre : le #4cc9b0 y manque de contraste, la
       maquette l'y éclaircit. */
    --f-accent-hero: #7fdcc7;

    --f-ok: #4cc9b0;
    --f-ok-dark: #38a892;
    --f-info: #5c8ee6;
    --f-info-dark: #3f6fc4;
    --f-warn: #e6b44d;
    --f-warn-dark: #9d7118;
  }

  /* ===== BANDEAU ET BARRE DE LECTURE ===== */
  .chaise-gaming-page .page-hero-inner .hero-label,
  .chaise-gaming-page .page-hero-inner h1 span { color: var(--f-accent-hero); }

  .chaise-gaming-page .read-bar { background: linear-gradient(90deg, var(--f-accent), var(--f-info)); }

  /* ===== SOMMAIRE =====
     DOCTRINE (03/08) : le sommaire reste à la charte corail de guide.css sur
     TOUS les guides, quel que soit l'accent de la page. La maquette le peignait
     en turquoise, jusqu'au fil, aux pastilles et au compteur ; c'est une erreur
     du designer, aucun élément .toc-* n'est surchargé ici, guide.css fait foi. */

  /* ===== CONTENU ===== */
  .chaise-gaming-page .intro-p { font-size: 0.98rem !important; }
  .chaise-gaming-page .content a { color: var(--f-accent-dark); border-bottom-color: rgba(76,201,176,0.42); }
  .chaise-gaming-page .content a:hover { border-bottom-color: var(--f-accent-dark); background: var(--f-accent-light); }

  /* Le sommaire mobile vit DANS .content : sans cette reprise, ses chips
     hériteraient du style des liens du texte au lieu du leur. Même doctrine que
     le sommaire collant : le survol reprend le corail de guide.css, que les
     règles .content a de cette feuille emporteraient sinon en spécificité. */
  .chaise-gaming-page .toc-flat a { color: var(--text); border-bottom: none; }
  .chaise-gaming-page .toc-flat a:hover { background: rgba(var(--agent-accent-rgb), 0.12); color: var(--agent-accent-dark); }

  /* ===== LES QUATRE RÉGLAGES D'ASSISE =====
     Lignes numérotées. Le numéro est du TEXTE dans le HTML : il dit l'ordre
     dans lequel faire les réglages, la couleur ne le dirait pas. */
  .chaise-gaming-page .fits { display: grid; gap: 12px; margin: 20px 0; }
  .chaise-gaming-page .fit {
    display: flex; align-items: flex-start; gap: 14px; padding: 17px 20px;
    background: var(--white); border: 1px solid #ececec; border-radius: 13px;
  }
  .chaise-gaming-page .fit .f-n {
    flex-shrink: 0; width: 27px; height: 27px; border-radius: 8px;
    background: var(--f-accent-light); color: var(--f-accent-dark);
    font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
  }
  .chaise-gaming-page .fit strong { display: block; font-size: 0.88rem; color: var(--dark); margin-bottom: 4px; }
  .chaise-gaming-page .fit span { font-size: 0.85rem; color: var(--text-light); line-height: 1.72; }

  /* ===== LES QUATRE AXES D'ACCOUDOIRS =====
     Cartes à filet turquoise. Le pictogramme de la maquette est retiré
     (doctrine du site) ; l'étiquette 1D à 4D reste, c'est du texte et c'est
     l'information de la carte. */
  .chaise-gaming-page .arms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; }
  .chaise-gaming-page .arm {
    background: var(--white); border: 1px solid #ececec; border-radius: 15px; padding: 20px 22px;
    transition: transform 0.24s, box-shadow 0.24s; position: relative; overflow: hidden;
  }
  .chaise-gaming-page .arm::before {
    content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--f-accent);
  }
  .chaise-gaming-page .arm:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.05); }
  .chaise-gaming-page .arm .a-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .chaise-gaming-page .arm h3 { margin: 0; font-size: 0.93rem; }
  .chaise-gaming-page .arm .a-dim {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 5px; background: var(--f-accent-light); color: var(--f-accent-dark);
    margin-left: auto;
  }
  .chaise-gaming-page .arm p { margin: 0; font-size: 0.84rem !important; line-height: 1.72 !important; }

  /* ===== LES TROIS FAMILLES DE STYLE =====
     Le bandeau .st-art portait un emoji dans la maquette. Il est retiré, mais
     le bandeau RESTE : ce sont ses trois dégradés qui distinguent le baquet, le
     sobre et le tissu. Il est purement décoratif, d'où l'aria-hidden côté
     HTML. */
  .chaise-gaming-page .styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
  .chaise-gaming-page .style {
    background: var(--white); border: 1px solid #ececec; border-radius: 15px; overflow: hidden;
    transition: transform 0.24s, box-shadow 0.24s;
  }
  .chaise-gaming-page .style:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
  .chaise-gaming-page .style .st-art { height: 84px; }
  .chaise-gaming-page .style.s1 .st-art { background: linear-gradient(145deg, #201018, #a8344e); }
  .chaise-gaming-page .style.s2 .st-art { background: linear-gradient(145deg, #14181e, #4a5560); }
  .chaise-gaming-page .style.s3 .st-art { background: linear-gradient(145deg, #1a1610, #7a6a4a); }
  .chaise-gaming-page .style .st-body { padding: 15px 17px 17px; }
  .chaise-gaming-page .style h3 { margin: 0 0 6px; font-size: 0.9rem; }
  .chaise-gaming-page .style p { margin: 0; font-size: 0.79rem !important; line-height: 1.62 !important; }

  /* ===== LES CINQ POINTS DE SOLIDITÉ =====
     Le ✓ de la pastille est posé ICI, en contenu généré, et non dans le HTML :
     c'est un marqueur de liste, pas un pictogramme, exactement comme les
     marqueurs du versus du guide PC. La garde anti-emoji de la page reste ainsi
     valable sans rien perdre du rendu. */
  .chaise-gaming-page .checks { display: grid; gap: 11px; margin: 20px 0; }
  .chaise-gaming-page .check {
    display: flex; align-items: flex-start; gap: 13px; padding: 15px 18px;
    background: var(--white); border: 1px solid #ececec; border-radius: 12px;
  }
  .chaise-gaming-page .check .k-b {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
    background: var(--f-accent); color: white; font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center;
  }
  .chaise-gaming-page .check .k-b::before { content: '\2713'; }
  .chaise-gaming-page .check strong { display: block; font-size: 0.86rem; color: var(--dark); margin-bottom: 3px; }
  .chaise-gaming-page .check span { font-size: 0.83rem; color: var(--text-light); line-height: 1.65; }

  /* ===== VERSUS : LE FAUTEUIL GAMER CONTRE LE SIÈGE DE BUREAU =====
     La maquette n'oppose PAS des avantages à des inconvénients ici, elle
     décrit deux logiques : les listes gardent donc le simple chevron, aucun
     ✓ ni ✕ n'est ajouté. */
  .chaise-gaming-page .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
  .chaise-gaming-page .vbox { border-radius: 16px; padding: 22px 24px; border: 1px solid #ececec; background: var(--white); }
  .chaise-gaming-page .vbox .vb-title {
    display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700;
    margin-bottom: 5px; color: var(--dark);
  }
  .chaise-gaming-page .vbox .vb-sub {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 13px;
  }
  .chaise-gaming-page .vbox.a { border-color: rgba(76,201,176,0.4); background: #f7fdfb; }
  .chaise-gaming-page .vbox.b { border-color: rgba(92,142,230,0.32); background: #fafcff; }
  .chaise-gaming-page .vbox.a .vb-sub { color: var(--f-ok-dark); }
  .chaise-gaming-page .vbox.b .vb-sub { color: var(--f-info-dark); }
  .chaise-gaming-page .vbox ul { list-style: none; display: grid; gap: 9px; }
  .chaise-gaming-page .vbox li {
    display: flex; align-items: flex-start; gap: 10px; font-size: 0.83rem;
    color: var(--text-light); line-height: 1.65;
  }
  .chaise-gaming-page .vbox li::before { content: '\25B8'; flex-shrink: 0; font-size: 0.8rem; line-height: 1.55; }
  .chaise-gaming-page .vbox.a li::before { color: var(--f-ok-dark); }
  .chaise-gaming-page .vbox.b li::before { color: var(--f-info-dark); }

  /* ===== ENCADRÉS =====
     Trois tons : turquoise par défaut, bleu pour la mise en perspective, ambre
     pour la mise en garde. Les emojis des intitulés sont retirés (doctrine du
     site), le titre porte le sens. */
  .chaise-gaming-page .callout {
    margin: 22px 0; padding: 20px 24px; border-radius: 14px;
    border-left: 4px solid var(--f-accent); background: var(--f-accent-light);
  }
  .chaise-gaming-page .callout .co-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--f-accent-dark); margin-bottom: 8px;
  }
  .chaise-gaming-page .callout p { margin: 0; font-size: 0.88rem !important; color: #2f6659 !important; line-height: 1.78 !important; }
  .chaise-gaming-page .callout p + p { margin-top: 10px !important; }
  .chaise-gaming-page .callout p strong { color: #1f4a40 !important; }

  .chaise-gaming-page .callout.info { border-left-color: var(--f-info); background: #eaf1fc; }
  .chaise-gaming-page .callout.info .co-title { color: var(--f-info-dark); }
  .chaise-gaming-page .callout.info p { color: #3d5a80 !important; }
  .chaise-gaming-page .callout.info p strong { color: #2b4260 !important; }

  .chaise-gaming-page .callout.warn { border-left-color: var(--f-warn); background: #fdf6e3; }
  .chaise-gaming-page .callout.warn .co-title { color: var(--f-warn-dark); }
  .chaise-gaming-page .callout.warn p { color: #7d5c17 !important; }
  .chaise-gaming-page .callout.warn p strong { color: #5d4310 !important; }

  /* ===== LE TABLEAU DES BUDGETS =====
     Légende posée AU-DESSUS du cadre, plus en caption : charte des tableaux du
     ranked, des armes, de setup, du ping, du casque, de l'écran, du clavier et
     du PC. Le bandeau sombre est ainsi le premier élément du cadre arrondi,
     d'où le border-top retiré. La ligne recommandée est surlignée, et la
     légende le dit en toutes lettres : la couleur ne porte jamais
     l'information toute seule. */
  .chaise-gaming-page .table-note { margin: 22px 0 0; text-align: left; font-size: 0.76rem; color: var(--text-light); font-style: italic; }
  .chaise-gaming-page .table-note + .table-wrap { margin-top: 10px; }
  .chaise-gaming-page .table-wrap {
    border: 1px solid #ececec; border-top: 0; border-radius: 16px; overflow: hidden;
    background: var(--white); margin: 22px 0;
  }
  .chaise-gaming-page table { width: 100%; border-collapse: collapse; }
  .chaise-gaming-page table thead th {
    background: var(--dark); color: rgba(255,255,255,0.85); font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem; letter-spacing: 1.6px; text-transform: uppercase; text-align: left;
    padding: 13px 18px; font-weight: 400;
  }
  .chaise-gaming-page table thead th:first-child { color: rgba(255,255,255,0.95); }
  .chaise-gaming-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  .chaise-gaming-page table tbody tr:hover { background: #f6fdfb; }
  .chaise-gaming-page table tbody tr.reco { background: #f2fbf8; }
  .chaise-gaming-page table th[scope="row"] {
    text-align: left; padding: 14px 18px; font-size: 0.84rem; font-weight: 700;
    color: var(--dark); white-space: nowrap;
  }
  .chaise-gaming-page table td { padding: 14px 18px; font-size: 0.81rem; color: var(--text-light); line-height: 1.62; }

  /* ===== NOTRE SÉLECTION =====
     Les quatre placeholders de la maquette ont laissé la place, le 03/08, aux
     bandeaux du back-office portant l'emplacement « chaise ». Le dessin ne
     bouge pas : ce sont les mêmes cartes, alimentées par de vraies données.
     Le cadre photo garde sa mention « Photo produit » pour un produit dont la
     photo n'a pas encore été chargée au back-office, et les chapelets de
     caractéristiques de la maquette sont partis avec les placeholders : le
     bandeau ne porte pas de caractéristiques de fauteuil. */
  .chaise-gaming-page .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
  .chaise-gaming-page .shop-card {
    background: var(--white); border: 1px solid #ececec; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all 0.28s;
  }
  /* Ce sont des liens posés DANS .content : sans cette reprise, ils
     hériteraient du soulignement et du fond de survol des liens de texte. */
  .chaise-gaming-page .content a.shop-card { border-bottom: none; }
  .chaise-gaming-page .content a.shop-card:hover { background: var(--white); border-bottom: none; }
  .chaise-gaming-page .shop-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); border-color: transparent; }
  .chaise-gaming-page .shop-img {
    height: 178px; background: var(--white); display: flex; align-items: center; justify-content: center;
    position: relative; padding: 14px;
  }
  .chaise-gaming-page .shop-img img {
    max-width: 100%; max-height: 100%; object-fit: contain; border: none; border-radius: 0; margin: 0;
  }
  .chaise-gaming-page .shop-img .ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c8c8c8; }
  .chaise-gaming-page .shop-img .ph span { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .chaise-gaming-page .shop-tag {
    position: absolute; top: 11px; left: 11px; font-size: 0.54rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 5px;
    background: var(--f-accent-light); color: var(--f-accent-dark);
  }
  .chaise-gaming-page .shop-tag.heart { background: #fce4e9; color: #c23a58; }
  .chaise-gaming-page .shop-body { padding: 15px 18px 10px; flex: 1; }
  /* La marque, quand elle est renseignée : même dessin que la carte du
     catalogue matériel, dont ces cartes sont les cousines. */
  .chaise-gaming-page .shop-brand {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: #b0b0b0; margin-bottom: 4px;
  }
  /* Bornage du texte, motif du catalogue matériel : le titre du vendeur et la
     description marchande restent ENTIERS dans le HTML, seul leur rendu
     s'arrête, sur deux lignes pour le titre et trois pour la description. Sans
     cette borne, un produit importé à la description longue étire sa carte bien
     au-delà de ses voisines. Les trois déclarations -webkit vont ensemble,
     -webkit-box-orient étant celle qu'un nettoyage de feuille oublie et sans
     laquelle la boîte se dispose en ligne ; `overflow: hidden` déclenche
     l'ellipse. */
  .chaise-gaming-page .shop-body h4 {
    font-size: 0.92rem; font-weight: 700; color: var(--dark); margin: 0 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .chaise-gaming-page .shop-body p {
    font-size: 0.78rem !important; line-height: 1.62 !important; margin: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .chaise-gaming-page .shop-foot {
    padding: 12px 18px; border-top: 1px solid #f2f2f2; background: var(--bg);
    display: flex; align-items: center; justify-content: space-between;
  }
  .chaise-gaming-page .shop-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--dark); letter-spacing: 0.5px; }
  .chaise-gaming-page .shop-btn {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: white; background: var(--f-accent-dark); padding: 8px 14px; border-radius: 7px;
  }
  .chaise-gaming-page .shop-card:hover .shop-btn { background: #26786a; }

  .chaise-gaming-page .aff-note {
    margin-top: 16px; padding: 15px 18px; background: var(--bg); border: 1px solid #ececec;
    border-radius: 12px; font-size: 0.76rem; color: var(--text-light); line-height: 1.7;
  }

  /* Le renvoi au catalogue, en pied de section : un lien de texte, servi avec
     ou sans grille au-dessus. Il garde le dessin des liens du contenu, seul
     son poids le détache du paragraphe qui le précède. */
  .chaise-gaming-page .shop-all { margin-top: 18px; font-size: 0.82rem !important; font-weight: 700; }

  /* ===== FAQ =====
     Le gabarit vient de mode-triche.css ; seule la pastille « ? » de la
     maquette est ajoutée ici, au turquoise de la page. */
  .chaise-gaming-page .qa h3 { display: flex; align-items: flex-start; gap: 11px; }
  .chaise-gaming-page .qa h3::before {
    content: '?'; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
    background: var(--f-accent-light); color: var(--f-accent-dark); font-size: 0.82rem;
    font-weight: 700; display: flex; align-items: center; justify-content: center;
  }

  @media (max-width: 1024px) {
    .chaise-gaming-page .arms,
    .chaise-gaming-page .versus,
    .chaise-gaming-page .styles,
    .chaise-gaming-page .shop-grid { grid-template-columns: 1fr; }
    .chaise-gaming-page .arm .a-dim { margin-left: 0; }
  }

  @media (max-width: 768px) {
    .chaise-gaming-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .chaise-gaming-page table tbody tr { display: block; padding: 14px 18px; }
    .chaise-gaming-page table th[scope="row"] { display: block; padding: 0 0 8px; white-space: normal; }
    .chaise-gaming-page table td { display: block; padding: 5px 0; }
    .chaise-gaming-page table td::before {
      content: attr(data-label) " : "; font-weight: 700; color: #bbb; font-size: 0.68rem;
      text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 2px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .chaise-gaming-page .shop-card, .chaise-gaming-page .arm, .chaise-gaming-page .style { transition: none; }
  }