/* ==========================================================================
   QUEL PC POUR JOUER À VALORANT (maquette client « quel-pc-valorant »)

   Cinquième guide du cluster Setup et Matériel, même gabarit que le ping, le
   casque, l'écran et le clavier. 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 .quel-pc-page, sans exception (leçon de
   setup.css, du ping, du casque, de l'écran et du clavier) : 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 et l'écran. 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 .quel-pc-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 : quel-pc.css / .quel-pc-page, à la convention maison des pages
   dont le slug tient en plusieurs mots (quel-agent.css / .quel-agent-page).
   ========================================================================== */

  .quel-pc-page {
    --pc-accent: #5c8ee6;
    --pc-accent-dark: #3f6fc4;
    --pc-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 et l'écran. */
    --pc-accent-hero: #8fb4f0;

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

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

  .quel-pc-page .read-bar { background: linear-gradient(90deg, var(--pc-accent), var(--pc-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 et au compteur ; c'est une erreur du
     designer, aucun élément .toc-* n'est surchargé ici, guide.css fait foi. */

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

  /* ===== TÉMOIGNAGE =====
     Carte sombre de la maquette, reprise fidèlement. L'avatar est du TEXTE
     (« ILV »), pas une image : la rédaction n'a pas de portrait à y mettre. */
  .quel-pc-page .testi {
    margin: 24px 0; padding: 24px 28px; border-radius: 16px;
    background: linear-gradient(135deg, #0a0d18, #1c2740); position: relative; overflow: hidden;
  }
  .quel-pc-page .testi::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 82% 45%, rgba(92,142,230,0.2) 0%, transparent 62%);
    pointer-events: none;
  }
  .quel-pc-page .testi > * { position: relative; z-index: 2; }
  .quel-pc-page .testi .t-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
  .quel-pc-page .testi .t-av {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 0.92rem; color: white; letter-spacing: 1px;
    background: linear-gradient(140deg, #1c2740, #5c8ee6);
  }
  .quel-pc-page .testi .t-who strong { display: block; font-size: 0.86rem; color: white; }
  .quel-pc-page .testi .t-who span { font-size: 0.7rem; color: rgba(255,255,255,0.38); }
  .quel-pc-page .testi p {
    margin: 0; color: rgba(255,255,255,0.72) !important; font-size: 0.92rem !important;
    line-height: 1.8 !important; font-style: italic;
  }
  .quel-pc-page .testi p + p { margin-top: 11px !important; }
  .quel-pc-page .testi p strong { color: white !important; font-style: normal; }

  /* ===== VERSUS : LA TOUR CONTRE LE PORTABLE =====
     Les ✓ et ✕ des listes sont posés en CSS, pas dans le HTML : ce sont des
     marqueurs de liste, pas des pictogrammes, et ils portent une information
     que la couleur seule ne dirait pas. */
  .quel-pc-page .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
  .quel-pc-page .vbox { border-radius: 16px; padding: 22px 24px; border: 1px solid #ececec; background: var(--white); }
  .quel-pc-page .vbox .vb-title {
    display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700;
    margin-bottom: 5px; color: var(--dark);
  }
  .quel-pc-page .vbox .vb-sub {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 13px;
  }
  .quel-pc-page .vbox.a { border-color: rgba(92,142,230,0.35); background: #fafcff; }
  .quel-pc-page .vbox.b { border-color: rgba(76,201,176,0.4); background: #f7fdfb; }
  .quel-pc-page .vbox.a .vb-sub { color: var(--pc-accent-dark); }
  .quel-pc-page .vbox.b .vb-sub { color: var(--pc-ok-dark); }
  .quel-pc-page .vbox ul { list-style: none; display: grid; gap: 9px; }
  .quel-pc-page .vbox li {
    display: flex; align-items: flex-start; gap: 10px; font-size: 0.83rem;
    color: var(--text-light); line-height: 1.65;
  }
  .quel-pc-page .vbox li::before { flex-shrink: 0; font-size: 0.78rem; line-height: 1.65; font-weight: 700; }
  .quel-pc-page .vbox li.p::before { content: '\2713'; color: var(--pc-ok-dark); }
  .quel-pc-page .vbox li.m::before { content: '\2715'; color: var(--pc-err); }

  /* ===== LES CINQ COMPOSANTS, PAR PRIORITÉ =====
     Cartes numérotées, filet de couleur à gauche et pastille de priorité à
     droite. La pastille est du TEXTE (« Priorité maximale », « Confort »…) :
     la couleur ne porte jamais l'information toute seule. */
  .quel-pc-page .comps { display: grid; gap: 13px; margin-top: 20px; }
  .quel-pc-page .comp {
    background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 20px 22px;
    position: relative; overflow: hidden; transition: transform 0.22s, box-shadow 0.22s;
  }
  .quel-pc-page .comp::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
  .quel-pc-page .comp.c1::before { background: var(--pc-err); }
  .quel-pc-page .comp.c2::before { background: var(--coral); }
  .quel-pc-page .comp.c3::before { background: var(--pc-warn); }
  .quel-pc-page .comp.c4::before { background: var(--pc-accent); }
  .quel-pc-page .comp.c5::before { background: #b0b0b0; }
  .quel-pc-page .comp:hover { transform: translateX(3px); box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
  .quel-pc-page .comp .c-top { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; flex-wrap: wrap; }
  .quel-pc-page .comp .c-n {
    width: 28px; height: 28px; border-radius: 8px; background: var(--bg); color: var(--text-light);
    font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .quel-pc-page .comp h3 { margin: 0; font-size: 0.97rem; }
  .quel-pc-page .comp .c-prio {
    margin-left: auto; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 4px 11px; border-radius: 6px; white-space: nowrap;
  }
  .quel-pc-page .comp.c1 .c-prio { background: #fdeceb; color: #b83c37; }
  .quel-pc-page .comp.c2 .c-prio { background: var(--coral-light); color: #c23a58; }
  .quel-pc-page .comp.c3 .c-prio { background: #fbf2da; color: var(--pc-warn-dark); }
  .quel-pc-page .comp.c4 .c-prio { background: var(--pc-accent-light); color: var(--pc-accent-dark); }
  .quel-pc-page .comp.c5 .c-prio { background: #f2f2f2; color: #999; }
  .quel-pc-page .comp p { margin: 0; font-size: 0.87rem !important; line-height: 1.78 !important; }
  .quel-pc-page .comp p + p { margin-top: 9px !important; }

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

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

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

  /* ===== LES QUATRE PIÈGES DU PORTABLE =====
     Le « ! » de la pastille est du TEXTE dans le HTML, pas un pictogramme :
     c'est de la ponctuation, il reste. */
  .quel-pc-page .traps { display: grid; gap: 12px; margin-top: 20px; }
  .quel-pc-page .trap {
    display: flex; align-items: flex-start; gap: 14px; padding: 17px 20px; background: var(--white);
    border: 1px solid #ececec; border-radius: 13px; transition: transform 0.22s, box-shadow 0.22s;
  }
  .quel-pc-page .trap:hover { transform: translateX(3px); box-shadow: 0 8px 22px rgba(0,0,0,0.04); }
  .quel-pc-page .trap .t-x {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: #fdf6e3;
    color: var(--pc-warn-dark); font-size: 0.8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .quel-pc-page .trap strong { display: block; font-size: 0.88rem; color: var(--dark); margin-bottom: 4px; }
  .quel-pc-page .trap span { font-size: 0.84rem; color: var(--text-light); line-height: 1.7; }

  /* ===== 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 et du clavier.
     Le bandeau sombre est ainsi le premier élément du cadre arrondi, d'où le
     border-top retiré. */
  .quel-pc-page .table-note { margin: 22px 0 0; text-align: left; font-size: 0.76rem; color: var(--text-light); font-style: italic; }
  .quel-pc-page .table-note + .table-wrap { margin-top: 10px; }
  .quel-pc-page .table-wrap {
    border: 1px solid #ececec; border-top: 0; border-radius: 16px; overflow: hidden;
    background: var(--white); margin: 22px 0;
  }
  .quel-pc-page table { width: 100%; border-collapse: collapse; }
  .quel-pc-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;
  }
  .quel-pc-page table thead th:first-child { color: rgba(255,255,255,0.95); }
  .quel-pc-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  .quel-pc-page table tbody tr:hover { background: #f7fafd; }
  .quel-pc-page table th[scope="row"] {
    text-align: left; padding: 14px 18px; font-size: 0.84rem; font-weight: 700;
    color: var(--dark); white-space: nowrap;
  }
  .quel-pc-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 « quel-pc ». 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 machine. */
  .quel-pc-page .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
  .quel-pc-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. */
  .quel-pc-page .content a.shop-card { border-bottom: none; }
  .quel-pc-page .content a.shop-card:hover { background: var(--white); border-bottom: none; }
  .quel-pc-page .shop-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); border-color: transparent; }
  .quel-pc-page .shop-img {
    height: 168px; background: var(--white); display: flex; align-items: center; justify-content: center;
    position: relative; padding: 14px;
  }
  .quel-pc-page .shop-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .quel-pc-page .shop-img .ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c8c8c8; }
  .quel-pc-page .shop-img .ph span { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .quel-pc-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(--pc-accent-light); color: var(--pc-accent-dark);
  }
  .quel-pc-page .shop-tag.heart { background: #e0f5ef; color: #2f7a68; }
  .quel-pc-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. */
  .quel-pc-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. */
  .quel-pc-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;
  }
  .quel-pc-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;
  }
  .quel-pc-page .shop-foot {
    padding: 12px 18px; border-top: 1px solid #f2f2f2; background: var(--bg);
    display: flex; align-items: center; justify-content: space-between;
  }
  .quel-pc-page .shop-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--dark); letter-spacing: 0.5px; }
  .quel-pc-page .shop-btn {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: white; background: var(--pc-accent); padding: 8px 14px; border-radius: 7px;
  }
  .quel-pc-page .shop-card:hover .shop-btn { background: var(--pc-accent-dark); }

  .quel-pc-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. */
  .quel-pc-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. */
  .quel-pc-page .qa h3 { display: flex; align-items: flex-start; gap: 11px; }
  .quel-pc-page .qa h3::before {
    content: '?'; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
    background: var(--pc-accent-light); color: var(--pc-accent-dark); font-size: 0.82rem;
    font-weight: 700; display: flex; align-items: center; justify-content: center;
  }

  @media (max-width: 1024px) {
    .quel-pc-page .versus,
    .quel-pc-page .shop-grid { grid-template-columns: 1fr; }
    .quel-pc-page .comp .c-prio { margin-left: 0; }
  }

  @media (max-width: 768px) {
    .quel-pc-page .testi { padding: 20px 20px; }
    .quel-pc-page .testi .t-head { flex-wrap: wrap; }
    .quel-pc-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .quel-pc-page table tbody tr { display: block; padding: 14px 18px; }
    .quel-pc-page table th[scope="row"] { display: block; padding: 0 0 8px; white-space: normal; }
    .quel-pc-page table td { display: block; padding: 5px 0; }
    .quel-pc-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) {
    .quel-pc-page .shop-card, .quel-pc-page .comp, .quel-pc-page .trap { transition: none; }
  }