/* ==========================================================================
   CONFIGURATION REQUISE POUR JOUER À VALORANT (maquette client
   « configuration-valorant »)

   Page du cluster PROGRESSER, section « Premiers pas » : elle ne fait pas
   partie de Setup & Matériel, même si elle en cite quatre guides. Elle reprend
   néanmoins le gabarit des guides du 03/08 et 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, les
   figures 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 .configuration-page, sans exception
   (leçon de setup.css, du ping, du casque, de l'écran, du clavier et du quel
   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 bleu #5c8ee6 de la maquette, celui des contrôleurs, le
   même que le ping, l'écran et le quel PC. 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.

   AUCUNE RÈGLE D'ÉTIQUETTE « NOUVEAU » : la maquette en posait cinq, toutes
   retirées sur consigne client, et la règle qui les habillait part avec elles.
   Un test verrouille son absence dans cette feuille, pour qu'elles ne puissent
   pas revenir par la petite porte.

   .pc-* : les bandeaux HORIZONTAUX de la maquette (image à gauche, corps au
   centre, prix et bouton à droite), qui servent ici la sélection de
   l'emplacement « quel-pc ». Anatomie propre à cette page, distincte des
   .shop-card verticales du guide « Quel PC » : c'est le dessin que la maquette
   demandait ici.
   ========================================================================== */

  .configuration-page {
    --cfg-accent: #5c8ee6;
    --cfg-accent-dark: #3f6fc4;
    --cfg-accent-light: #eaf1fc;

    /* Le bleu du bandeau sombre : le #5c8ee6 y manque de contraste, la maquette
       l'y éclaircit. Même valeur, même usage que sur le ping, l'écran et le
       quel PC. */
    --cfg-accent-hero: #8fb4f0;

    --cfg-ok: #4cc9b0;
    --cfg-ok-dark: #38a892;
    --cfg-warn: #e6b44d;
    --cfg-warn-dark: #9d7118;
    --cfg-err: #d9544f;
  }

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

  .configuration-page .read-bar { background: linear-gradient(90deg, var(--cfg-accent), var(--cfg-ok)); }

  /* ===== 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 bleu, jusqu'au fil, aux pastilles, au compteur et au CTA ; c'est une
     erreur du designer, aucun élément .toc-* n'est surchargé ici, guide.css
     fait foi. */

  /* ===== CONTENU ===== */
  .configuration-page .intro-p { font-size: 0.98rem !important; }
  .configuration-page .content a { color: var(--cfg-accent-dark); border-bottom-color: rgba(92,142,230,0.34); }
  .configuration-page .content a:hover { border-bottom-color: var(--cfg-accent-dark); background: var(--cfg-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é. */
  .configuration-page .toc-flat a { color: var(--text); border-bottom: none; }
  .configuration-page .toc-flat a:hover { background: rgba(var(--agent-accent-rgb), 0.12); color: var(--agent-accent-dark); }

  /* Les raccourcis clavier et les commandes (dxdiag, msinfo32, tpm.msc) : même
     dessin que sur le ping, seule autre page du site à en poser. */
  .configuration-page code {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; background: #f1f1f4;
    border: 1px solid #e4e4e8; border-radius: 5px; padding: 1px 6px; color: var(--dark);
  }

  /* Listes à puces du chapitre des réglages graphiques. */
  .configuration-page .content ul.pts { list-style: none; display: grid; gap: 12px; margin: 0 0 18px; }
  .configuration-page .content ul.pts li {
    display: flex; align-items: flex-start; gap: 12px; font-size: 0.89rem;
    color: var(--text-light); line-height: 1.78;
  }
  .configuration-page .content ul.pts li::before {
    content: '\25B8'; color: var(--cfg-accent); flex-shrink: 0; line-height: 1.6;
  }

  /* ===== LES TABLEAUX =====
     Deux sur cette page : les trois configurations officielles et les réglages
     conseillés. Les légendes sortent du cadre et passent AU-DESSUS, en
     p.table-note : charte des tableaux du ranked, des armes, de setup, du ping,
     du casque, de l'écran, du clavier et du quel PC. Le bandeau sombre est
     ainsi le premier élément du cadre arrondi, d'où le border-top retiré.

     Les en-têtes portent une SOUS-LIGNE d'images par seconde (.fps), reprise de
     la maquette : c'est elle qui dit ce que vaut chaque palier. */
  .configuration-page .table-note { margin: 22px 0 0; text-align: left; font-size: 0.76rem; color: var(--text-light); font-style: italic; }
  .configuration-page .table-note + .table-wrap { margin-top: 10px; }
  .configuration-page .table-wrap {
    border: 1px solid #ececec; border-top: 0; border-radius: 16px; overflow: hidden;
    background: var(--white); margin: 22px 0;
  }
  .configuration-page table { width: 100%; border-collapse: collapse; }
  .configuration-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; vertical-align: top;
  }
  .configuration-page table thead th:first-child { color: rgba(255,255,255,0.95); }
  .configuration-page table thead th .fps {
    display: block; font-family: 'DM Sans', sans-serif; font-size: 0.6rem; letter-spacing: 0.4px;
    color: rgba(255,255,255,0.45); text-transform: none; margin-top: 3px;
  }
  .configuration-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  .configuration-page table tbody tr:hover { background: #f7fafd; }
  .configuration-page table th[scope="row"] {
    text-align: left; padding: 14px 18px; font-size: 0.84rem; font-weight: 700;
    color: var(--dark); white-space: nowrap;
  }
  .configuration-page table td { padding: 14px 18px; font-size: 0.81rem; color: var(--text-light); line-height: 1.62; }
  /* La cellule mise en avant : la colonne recommandée du premier tableau, le
     réglage conseillé du second. */
  .configuration-page table td.hi { color: var(--cfg-accent-dark); font-weight: 700; }

  /* ===== VÉRIFIER SON PC EN QUATRE ÉTAPES =====
     Étapes numérotées reliées par un filet vertical. Le numéro est porté par
     l'attribut data-n du HTML : c'est une donnée de contenu, pas un compteur
     CSS, pour que l'ordre reste lisible dans la source. */
  .configuration-page .checks { position: relative; margin: 22px 0; padding-left: 44px; }
  .configuration-page .checks::before {
    content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: #ececec;
  }
  .configuration-page .ck { position: relative; margin-bottom: 20px; }
  .configuration-page .ck:last-child { margin-bottom: 0; }
  .configuration-page .ck::before {
    content: attr(data-n); position: absolute; left: -44px; top: 0; width: 32px; height: 32px;
    border-radius: 10px; background: var(--cfg-accent); color: white;
    font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; letter-spacing: 0.5px;
    box-shadow: 0 0 0 4px var(--bg);
  }
  .configuration-page .ck h3 { margin: 4px 0 8px; font-size: 0.97rem; }
  .configuration-page .ck p { margin-bottom: 0; }

  /* ===== ENCADRÉS =====
     Trois tons : bleu par défaut, vert pour ce qu'il faut retenir, rouge pour
     la mise en garde (le blocage au lancement sous Windows 11 n'est pas un
     conseil, c'est une panne). Les emojis des intitulés sont retirés (doctrine
     du site), le titre porte le sens. */
  .configuration-page .callout {
    margin: 22px 0; padding: 20px 24px; border-radius: 14px;
    border-left: 4px solid var(--cfg-accent); background: var(--cfg-accent-light);
  }
  .configuration-page .callout .co-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--cfg-accent-dark); margin-bottom: 8px;
  }
  .configuration-page .callout p { margin: 0; font-size: 0.88rem !important; color: #3d5a80 !important; line-height: 1.78 !important; }
  .configuration-page .callout p + p { margin-top: 10px !important; }
  .configuration-page .callout p strong { color: #2b4260 !important; }

  .configuration-page .callout.ok { border-left-color: var(--cfg-ok); background: #eefaf7; }
  .configuration-page .callout.ok .co-title { color: var(--cfg-ok-dark); }
  .configuration-page .callout.ok p { color: #2f6659 !important; }
  .configuration-page .callout.ok p strong { color: #1f4a40 !important; }

  .configuration-page .callout.warn { border-left-color: var(--cfg-err); background: #fdeceb; }
  .configuration-page .callout.warn .co-title { color: #b83c37; }
  .configuration-page .callout.warn p { color: #8a3a36 !important; }
  .configuration-page .callout.warn p strong { color: #6a2a26 !important; }

  /* ===== LES BANDEAUX PC, EN HORIZONTAL =====
     Les quatre cartes placeholders de la maquette laissent la place aux
     bandeaux du back-office portant l'emplacement « quel-pc » : ce sont
     exactement les MÊMES machines que le guide « Quel PC », par décision
     d'unification (le client n'entretient qu'une seule sélection).

     Le dessin, lui, est celui de la maquette d'ici : bandeau horizontal, image
     à gauche, prix et bouton à droite. Les chapelets de caractéristiques de la
     maquette sont partis avec les placeholders, le bandeau ne portant pas de
     caractéristiques de machine, et le filet coloré de gauche prend le bleu de
     la page plutôt qu'une couleur par carte : le palier venait de la maquette,
     pas de la base. */
  .configuration-page .pcs { display: grid; gap: 16px; margin-top: 22px; }
  .configuration-page .pc {
    display: grid; grid-template-columns: 200px 1fr auto; gap: 22px; align-items: center;
    background: var(--white); border: 1px solid #ececec; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: inherit; transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s;
    position: relative;
  }
  .configuration-page .pc::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--cfg-accent);
    /* Au-dessus des enfants : le bloc image (fond gris, 1re colonne à x=0)
       recouvrait le liseré sur sa hauteur (constat client du 04/08). */
    z-index: 1;
  }
  /* 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. */
  .configuration-page .content a.pc { border-bottom: none; }
  .configuration-page .content a.pc:hover { background: var(--white); border-bottom: none; }
  .configuration-page .pc:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); border-color: transparent; }
  .configuration-page .pc-img {
    height: 148px; background: var(--white); display: flex; align-items: center; justify-content: center;
    position: relative; padding: 14px;
  }
  .configuration-page .pc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .configuration-page .pc-img .ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c4c4c4; }
  .configuration-page .pc-img .ph span { font-size: 0.53rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .configuration-page .pc-body { padding: 18px 0; }
  /* L'étiquette de palier ne s'affiche que si le client l'a saisie au
     back-office (champ « tag » du bandeau) : rien de vide n'est rendu. */
  .configuration-page .pc-tier {
    display: inline-block; font-size: 0.56rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; padding: 4px 10px; border-radius: 5px; margin-bottom: 8px;
    background: var(--cfg-accent-light); color: var(--cfg-accent-dark);
  }
  .configuration-page .pc-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. 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. */
  .configuration-page .pc-body h3 {
    font-size: 1rem; font-weight: 700; color: var(--dark); margin: 0 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .configuration-page .pc-body p {
    font-size: 0.81rem !important; line-height: 1.62 !important; margin: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .configuration-page .pc-cta { padding: 18px 24px 18px 0; text-align: right; }
  .configuration-page .pc-price {
    display: block; font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; color: var(--dark);
    letter-spacing: 0.5px; margin-bottom: 8px; white-space: nowrap;
  }
  .configuration-page .pc-btn {
    display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: white; background: var(--cfg-accent); padding: 9px 17px;
    border-radius: 8px; white-space: nowrap; transition: background 0.2s;
  }
  .configuration-page .pc:hover .pc-btn { background: var(--cfg-accent-dark); }

  .configuration-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, comme sur le guide « Quel PC ». */
  .configuration-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 bleu de la page. */
  .configuration-page .qa h3 { display: flex; align-items: flex-start; gap: 11px; }
  .configuration-page .qa h3::before {
    content: '?'; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
    background: var(--cfg-accent-light); color: var(--cfg-accent-dark); font-size: 0.82rem;
    font-weight: 700; display: flex; align-items: center; justify-content: center;
  }

  @media (max-width: 1024px) {
    /* Le bandeau horizontal se replie en carte verticale : image en tête, corps
       puis pied, comme le prévoyait la maquette. */
    .configuration-page .pc { grid-template-columns: 1fr; gap: 0; }
    .configuration-page .pc-img { height: 168px; }
    .configuration-page .pc-body { padding: 18px 22px 0; }
    .configuration-page .pc-cta { padding: 14px 22px 20px; text-align: left; display: flex; align-items: center; gap: 16px; }
    .configuration-page .pc-price { margin-bottom: 0; }
  }

  @media (max-width: 768px) {
    .configuration-page .checks { padding-left: 38px; }
    .configuration-page .ck::before { left: -38px; width: 28px; height: 28px; font-size: 0.85rem; }
    .configuration-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .configuration-page table tbody tr { display: block; padding: 14px 18px; }
    .configuration-page table th[scope="row"] { display: block; padding: 0 0 8px; white-space: normal; }
    .configuration-page table td { display: block; padding: 5px 0; }
    .configuration-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) {
    .configuration-page .pc { transition: none; }
  }