/* ==========================================================================
   CASQUE GAMER POUR JOUER À VALORANT (maquette client « casque-gamer-valorant »)

   Même famille que le guide du ping, dont elle reprend le gabarit à la lettre.
   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, 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 .casque-page, sans exception (leçon de
   setup.css et du ping) : 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 .casque-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.
   ========================================================================== */

  .casque-page {
    --casque-accent: #4cc9b0;
    --casque-accent-dark: #2f8f7c;
    --casque-accent-light: #e3f7f2;

    /* Le turquoise du bandeau sombre : le #4cc9b0 y manque de contraste, la
       maquette l'y éclaircit. Même valeur, même usage. */
    --casque-accent-hero: #7fdcc7;

    --casque-ok-dark: #38a892;
    --casque-info: #5c8ee6;
    --casque-info-dark: #3f6fc4;
    --casque-warn: #e6b44d;
    --casque-err: #d9544f;
  }

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

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

  /* ===== SOMMAIRE =====
     DOCTRINE : le sommaire reste à la charte corail de guide.css sur TOUS les
     guides, quel que soit l'accent de la page. Les surcharges turquoise du fil,
     des pastilles, du compteur et du survol du CTA ont donc été retirées : rien
     à écrire ici, guide.css fait foi. */

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

  /* ===== LES CINQ SONS DU JEU =====
     La maquette posait un pictogramme par carte : ils sont retirés (doctrine du
     site), le titre de chaque son portant déjà le sens. Le bloc perd donc sa
     colonne d'icônes et passe en simple empilement. */
  .casque-page .sounds { display: grid; gap: 10px; margin: 20px 0; }
  .casque-page .snd {
    padding: 15px 18px; background: var(--white); border: 1px solid #ececec;
    border-radius: 13px; transition: all 0.2s;
  }
  .casque-page .snd:hover { transform: translateX(3px); box-shadow: 0 6px 20px rgba(0,0,0,0.04); }
  .casque-page .snd strong { display: block; font-size: 0.87rem; color: var(--dark); margin-bottom: 3px; }
  .casque-page .snd > span { display: block; font-size: 0.83rem; color: var(--text-light); line-height: 1.65; }

  /* ===== LES QUATRE ÉTAPES DU RÉGLAGE ===== */
  .casque-page .steps { position: relative; margin: 22px 0; padding-left: 44px; }
  .casque-page .steps::before {
    content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: #ececec;
  }
  .casque-page .step { position: relative; margin-bottom: 20px; }
  .casque-page .step:last-child { margin-bottom: 0; }
  .casque-page .step::before {
    content: attr(data-n); position: absolute; left: -44px; top: 0; width: 32px; height: 32px;
    border-radius: 10px; background: var(--casque-accent-dark); 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);
  }
  .casque-page .step h3 { margin: 4px 0 8px; }
  .casque-page .step p { margin-bottom: 0; }

  /* ===== LES DEUX COMPARATIFS =====
     Les ✓ et les ✕ des listes sont des signes TYPOGRAPHIQUES posés en CSS, pas
     des emojis : ils restent, comme sur la souris, l'aim et le ranked. */
  .casque-page .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
  .casque-page .vbox { border-radius: 16px; padding: 21px 23px; border: 1px solid #ececec; background: var(--white); }
  .casque-page .vbox .vb-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; color: var(--dark); }
  .casque-page .vbox .vb-sub {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px;
  }
  .casque-page .vbox.a { border-color: rgba(76,201,176,0.4); background: #f7fdfb; }
  .casque-page .vbox.b { border-color: rgba(92,142,230,0.3); background: #fafcff; }
  .casque-page .vbox.a .vb-sub { color: var(--casque-ok-dark); }
  .casque-page .vbox.b .vb-sub { color: var(--casque-info-dark); }
  .casque-page .vbox ul { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
  .casque-page .vbox li {
    display: flex; align-items: flex-start; gap: 10px; font-size: 0.83rem;
    color: var(--text-light); line-height: 1.65;
  }
  .casque-page .vbox li::before { flex-shrink: 0; font-size: 0.78rem; line-height: 1.65; font-weight: 700; }
  .casque-page .vbox li.p::before { content: '✓'; color: var(--casque-ok-dark); }
  .casque-page .vbox li.m::before { content: '✕'; color: var(--casque-err); }

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

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

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

  /* ===== TABLEAU DU BUDGET =====
     Légende posée AU-DESSUS du cadre, plus en caption : charte des tableaux du
     ranked, des armes, de setup et du ping. Le bandeau sombre est ainsi le
     premier élément du cadre arrondi, d'où le border-top retiré. */
  .casque-page .table-note { margin: 22px 0 0; text-align: left; font-size: 0.76rem; color: var(--text-light); font-style: italic; }
  .casque-page .table-note + .table-wrap { margin-top: 10px; }
  .casque-page .table-wrap {
    border: 1px solid #ececec; border-top: 0; border-radius: 16px; overflow: hidden;
    background: var(--white); margin: 22px 0;
  }
  .casque-page table { width: 100%; border-collapse: collapse; }
  .casque-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;
  }
  .casque-page table thead th:first-child { color: rgba(255,255,255,0.95); }
  .casque-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  .casque-page table tbody tr:hover { background: #f6fdfb; }
  .casque-page table th[scope="row"] {
    text-align: left; padding: 13px 18px; font-size: 0.84rem; font-weight: 700;
    color: var(--dark); white-space: nowrap;
  }
  .casque-page table td { padding: 13px 18px; font-size: 0.81rem; color: var(--text-light); line-height: 1.6; }

  /* ===== NOTRE SÉLECTION =====
     Les quatre placeholders de la maquette ont laissé la place, le 03/08, aux
     bandeaux du back-office portant l'emplacement « casque ». 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 casque. */
  .casque-page .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
  .casque-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. */
  .casque-page .content a.shop-card { border-bottom: none; }
  .casque-page .content a.shop-card:hover { background: var(--white); border-bottom: none; }
  .casque-page .shop-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); border-color: transparent; }
  .casque-page .shop-img {
    height: 168px; background: var(--white); display: flex; align-items: center; justify-content: center;
    position: relative; padding: 14px;
  }
  .casque-page .shop-img img { max-width: 100%; max-height: 100%; object-fit: contain; border: none; border-radius: 0; margin: 0; }
  .casque-page .shop-img .ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c8c8c8; }
  .casque-page .shop-img .ph span { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .casque-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(--casque-accent-light); color: var(--casque-accent-dark);
  }
  /* Le coup de cœur du back-office, dans le rose de l'étiquette du catalogue :
     il doit se distinguer de l'étiquette neutre, qui porte l'accent de la
     page. */
  .casque-page .shop-tag.heart { background: #fce4e9; color: #c23a58; }
  .casque-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. */
  .casque-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. */
  .casque-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;
  }
  .casque-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;
  }
  .casque-page .shop-foot {
    padding: 12px 18px; border-top: 1px solid #f2f2f2; background: var(--bg);
    display: flex; align-items: center; justify-content: space-between;
  }
  .casque-page .shop-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--dark); letter-spacing: 0.5px; }
  .casque-page .shop-btn {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: white; background: var(--casque-accent-dark); padding: 8px 14px; border-radius: 7px;
  }
  .casque-page .shop-card:hover .shop-btn { background: #26786a; }

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

  @media (max-width: 1024px) {
    .casque-page .versus,
    .casque-page .shop-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 768px) {
    .casque-page .steps { padding-left: 38px; }
    .casque-page .step::before { left: -38px; width: 28px; height: 28px; font-size: 0.85rem; }

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

  @media (prefers-reduced-motion: reduce) {
    .casque-page .shop-card, .casque-page .snd { transition: none; }
  }