/* ==========================================================================
   QUEL CLAVIER GAMER POUR JOUER À VALORANT ET FPS
   (maquette client « clavier-gamer-valorant »)

   Quatrième guide du cluster Setup et Matériel, même gabarit que le ping, le
   casque et l'écran. 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 .clavier-page, sans exception (leçon de
   setup.css, du ping, du casque et de l'écran) : 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 CORAIL #E8637E, c'est-à-dire la couleur de la marque
   elle-même. Contrairement au ping (bleu), au casque (turquoise) et à l'écran
   (bleu), cette maquette n'introduit aucune teinte propre : listing.css et
   guide.css peignent déjà le bandeau, les liens du texte et le sommaire au
   corail. Il n'y a donc quasiment RIEN à surcharger côté couleurs ici, et
   cette feuille ne porte que les blocs que les autres ne connaissent pas :
   grilles de switches, tableaux, encadrés, profils, cartes produit.

   Les jetons ci-dessous rappellent les valeurs de marque sous un nom local
   plutôt que de répéter #E8637E dans chaque règle. Les trois teintes de
   service (info, ok, warn) sont celles des encadrés de la maquette, communes à
   tous les guides du cluster.

   AUCUNE ÉTIQUETTE « NOUVEAU » : les cinq de la maquette sont retirées
   (arbitrage client du 03/08), la règle qui les peignait n'a donc jamais été
   écrite ici. Le test de la page le verrouille.

   .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 .clavier-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.
   ========================================================================== */

  .clavier-page {
    --clavier-accent: var(--coral);
    --clavier-accent-dark: var(--coral-dark);
    --clavier-accent-light: var(--coral-light);

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

  /* ===== BARRE DE LECTURE =====
     mode-triche.css la peint corail vers ambre ; la maquette la fait filer du
     corail au violet, comme le fil du sommaire de guide.css. Seule surcharge
     de couleur de la page, et la seule ligne à écrire sur le bandeau : le
     libellé et le mot coloré du titre sont DÉJÀ au corail dans listing.css. */
  .clavier-page .read-bar { background: linear-gradient(90deg, var(--clavier-accent), #b44ddf); }

  /* ===== SOMMAIRE =====
     DOCTRINE (03/08) : le sommaire reste à la charte corail de guide.css sur
     TOUS les guides. Ici la maquette est d'accord avec elle, il n'y a donc
     rien à écrire : aucun élément .toc-* n'est surchargé. */

  /* ===== CONTENU =====
     Les liens du texte sont déjà corail dans guide.css : rien à reprendre non
     plus. Seule la taille du chapô diffère de la charte. */
  .clavier-page .intro-p { font-size: 0.98rem !important; }

  /* ===== BANNIÈRE CLIQUABLE =====
     Un lien INTERNE vers la sélection (#clavier), pas un lien marchand. Posé
     dans .content, il faut lui retirer le soulignement et le fond de survol
     des liens de texte. */
  .clavier-page .banner-link {
    display: block; margin: 24px 0; border-radius: 14px; overflow: hidden; border-bottom: none;
  }
  .clavier-page .content a.banner-link:hover { background: none; border-bottom: none; }
  .clavier-page .banner-link img { width: 100%; height: auto; display: block; transition: transform 0.4s; }
  .clavier-page .banner-link:hover img { transform: scale(1.02); }

  /* ===== CITATION ===== */
  .clavier-page .quote {
    margin: 22px 0; padding: 20px 26px; border-radius: 14px;
    border-left: 4px solid var(--clavier-accent); background: var(--clavier-accent-light); font-style: italic;
  }
  .clavier-page .quote p { margin: 0; font-size: 0.95rem !important; color: #8a4d5c !important; line-height: 1.7 !important; }

  /* ===== ENCADRÉS =====
     Quatre tons : corail par défaut, bleu pour l'information, 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. */
  .clavier-page .callout {
    margin: 22px 0; padding: 20px 24px; border-radius: 14px;
    border-left: 4px solid var(--clavier-accent); background: var(--clavier-accent-light);
  }
  .clavier-page .callout .co-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--clavier-accent-dark); margin-bottom: 8px;
  }
  .clavier-page .callout p { margin: 0; font-size: 0.88rem !important; color: #8a4d5c !important; line-height: 1.78 !important; }
  .clavier-page .callout p + p { margin-top: 10px !important; }
  .clavier-page .callout p strong { color: #6f3644 !important; }

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

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

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

  /* ===== LES DEUX GRILLES DE SWITCHES =====
     Six GIF ANIMÉS repris de l'ancien site, servis tels quels : les convertir
     en WebP les figerait sur leur première image.

     La règle .ph de la maquette (la réserve « Visuel à fournir » de la case du
     switch tactile) n'est pas reprise : le GIF annoncé par le commentaire du
     designer existait dans l'import de l'ancien site, la case est remplie. */
  .clavier-page .sw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0; }
  .clavier-page .sw { background: var(--white); border: 1px solid #ececec; border-radius: 14px; overflow: hidden; }
  .clavier-page .sw-img {
    background: #f7f7f9; padding: 14px; display: flex; align-items: center; justify-content: center; min-height: 130px;
  }
  .clavier-page .sw-img img { max-width: 100%; height: auto; border: none; border-radius: 8px; margin: 0; }
  .clavier-page .sw-cap { padding: 11px 15px; font-size: 0.8rem; font-weight: 700; color: var(--dark); text-align: center; }

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

  /* La pastille de couleur devant chaque switch Cherry. C'est du CSS, pas un
     pictogramme : elle reste. La couleur EST l'information ici (le nom du
     switch la répète juste à côté), elle n'est donc jamais seule à porter le
     sens. */
  .clavier-page .dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 9px; vertical-align: 1px;
  }

  /* ===== LES QUATRE PROFILS ===== */
  .clavier-page .profiles { display: grid; gap: 14px; margin-top: 20px; }
  .clavier-page .prof {
    background: var(--white); border: 1px solid #ececec; border-radius: 14px;
    padding: 20px 22px; position: relative; overflow: hidden; transition: all 0.22s;
  }
  .clavier-page .prof::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
  .clavier-page .prof.p1::before { background: var(--clavier-ok); }
  .clavier-page .prof.p2::before { background: var(--clavier-info); }
  .clavier-page .prof.p3::before { background: var(--clavier-warn); }
  .clavier-page .prof.p4::before { background: var(--clavier-accent); }
  .clavier-page .prof:hover { transform: translateX(3px); box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
  .clavier-page .prof .pr-top { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; flex-wrap: wrap; }
  .clavier-page .prof h3 { margin: 0; font-size: 0.95rem; }
  .clavier-page .prof .pr-budget {
    margin-left: auto; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 4px 11px; border-radius: 6px; background: var(--bg);
    color: var(--text-light); white-space: nowrap;
  }
  .clavier-page .prof p { margin: 0; font-size: 0.86rem !important; line-height: 1.78 !important; }
  .clavier-page .prof .pr-reco {
    display: block; margin-top: 9px; font-size: 0.79rem; font-weight: 700; color: var(--clavier-accent-dark);
  }

  /* ===== NOTRE SÉLECTION =====
     Les trois claviers écrits en dur dans la vue sont passés en base le 03/08 :
     la grille sert désormais les bandeaux du back-office portant l'emplacement
     « clavier ». Le dessin ne bouge pas, il gagne seulement ce que la carte du
     back-office sait dire et que la vue en dur ne savait pas : l'étiquette de
     la sélection, la marque, le prix et le cadre photo de repli. Trois
     colonnes, comme la maquette : la sélection en compte trois, et une
     quatrième affectée au back-office irait simplement à la ligne. */
  .clavier-page .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
  .clavier-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. */
  .clavier-page .content a.shop-card { border-bottom: none; }
  .clavier-page .content a.shop-card:hover { background: var(--white); border-bottom: none; }
  .clavier-page .shop-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); border-color: transparent; }
  .clavier-page .shop-img {
    height: 168px; background: var(--white); display: flex; align-items: center; justify-content: center;
    position: relative; padding: 14px;
  }
  .clavier-page .shop-img img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    border: none; border-radius: 0; margin: 0;
  }
  /* Le cadre photo de repli, pour un bandeau dont la photo n'a pas encore été
     chargée au back-office : même dessin que sur les autres guides. */
  .clavier-page .shop-img .ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c8c8c8; }
  .clavier-page .shop-img .ph span { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .clavier-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(--clavier-accent-light); color: var(--clavier-accent-dark);
  }
  /* Le coup de cœur du back-office, dans le vert du site : le corail de la
     page est déjà celui de l'étiquette neutre, il ne distinguerait rien. */
  .clavier-page .shop-tag.heart { background: #e0f5ef; color: #2f7a68; }
  .clavier-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. */
  .clavier-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. */
  .clavier-page .shop-body h4 {
    font-size: 0.9rem; font-weight: 700; color: var(--dark); margin: 0 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .clavier-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;
  }
  .clavier-page .shop-foot {
    padding: 12px 18px; border-top: 1px solid #f2f2f2; background: var(--bg);
    display: flex; align-items: center; justify-content: space-between;
  }
  .clavier-page .shop-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--dark); letter-spacing: 0.5px; }
  .clavier-page .shop-btn {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: white; background: var(--clavier-accent); padding: 8px 14px; border-radius: 7px;
  }
  .clavier-page .shop-card:hover .shop-btn { background: var(--clavier-accent-dark); }

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

  @media (max-width: 1024px) {
    .clavier-page .shop-grid { grid-template-columns: 1fr; }
    .clavier-page .prof .pr-budget { margin-left: 0; }
  }

  @media (max-width: 768px) {
    .clavier-page .sw-grid { grid-template-columns: 1fr; }
    .clavier-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .clavier-page table tbody tr { display: block; padding: 14px 18px; }
    .clavier-page table th[scope="row"] { display: block; padding: 0 0 8px; white-space: normal; }
    .clavier-page table td { display: block; padding: 4px 0; }
    .clavier-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) {
    .clavier-page .shop-card, .clavier-page .prof, .clavier-page .banner-link img { transition: none; }
  }