/* ==========================================================================
   OPTIMISER SON PING (maquette client « optimiser-son-ping »)

   Même famille que le mode triche, le crosshair, le ranked et l'aim. Elle
   réutilise quatre feuilles déjà en place : agent.css pour le reset, le body 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, l'étiquette « Nouveau » et la
   FAQ en questions ouvertes.

   TOUTES les règles sont scopées sous .ping-page, sans exception (leçon de
   setup.css) : 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.
   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 trois jetons ci-dessous, et les rares endroits où
   guide.css et listing.css posent du corail sont repris ici, un par un.
   ========================================================================== */

  .ping-page {
    --ping-accent: #5c8ee6;
    --ping-accent-dark: #3f6fc4;
    --ping-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. */
    --ping-accent-hero: #8fb4f0;

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

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

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

  /* ===== 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 bleues du fil,
     des pastilles, du compteur et du survol du CTA ont donc été retirées : rien
     à écrire ici, guide.css fait foi. */

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

  /* Le récapitulatif n'est pas au sommaire : il porte sa propre classe pour
     ne pas entrer dans le suivi de lecture de guide.js, tout en gardant la
     respiration et le décalage d'ancre d'un chapitre. */
  .ping-page .chapter-recap { scroll-margin-top: calc(var(--hdr-h) + 20px); margin-bottom: 54px; }

  /* ===== LES SEUILS ===== */
  .ping-page .gauge-list { display: grid; gap: 8px; margin: 20px 0; }
  .ping-page .gl {
    display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: var(--white);
    border: 1px solid #ececec; border-radius: 12px;
  }
  .ping-page .gl .g-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
  .ping-page .gl .g-val {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--dark);
    letter-spacing: 0.5px; width: 96px; flex-shrink: 0;
  }
  .ping-page .gl .g-txt { font-size: 0.85rem; color: var(--text-light); line-height: 1.6; }

  /* ===== LE DIAGNOSTIC EN QUATRE ÉTAPES ===== */
  .ping-page .diag { position: relative; margin: 22px 0; padding-left: 44px; }
  .ping-page .diag::before {
    content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: #ececec;
  }
  .ping-page .dstep { position: relative; margin-bottom: 24px; }
  .ping-page .dstep:last-child { margin-bottom: 0; }
  .ping-page .dstep::before {
    content: attr(data-n); position: absolute; left: -44px; top: 0; width: 32px; height: 32px;
    border-radius: 10px; background: var(--ping-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);
  }
  .ping-page .dstep h3 { margin: 4px 0 8px; }
  .ping-page .dstep p { margin-bottom: 10px; }
  .ping-page .dstep p:last-child { margin-bottom: 0; }
  .ping-page .verdict {
    margin-top: 12px; padding: 13px 16px; border-radius: 11px;
    background: var(--ping-accent-light); border-left: 3px solid var(--ping-accent);
  }
  .ping-page .verdict .v-t {
    font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--ping-accent-dark); margin-bottom: 5px;
  }
  .ping-page .verdict p { margin: 0 !important; font-size: 0.85rem !important; color: #3d5a80 !important; line-height: 1.72 !important; }

  /* ===== ENCADRÉS =====
     Deux tons seulement : bleu neutre et vert pour la règle à retenir, les
     deux que la page utilise. Le ton rouge de la maquette n'était posé nulle
     part, il n'est pas repris. Les emojis des intitulés sont retirés (doctrine
     du site), le titre porte le sens. */
  .ping-page .callout {
    margin: 22px 0; padding: 20px 24px; border-radius: 14px;
    border-left: 4px solid var(--ping-accent); background: var(--ping-accent-light);
  }
  .ping-page .callout .co-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--ping-accent-dark); margin-bottom: 8px;
  }
  .ping-page .callout p { margin: 0; font-size: 0.88rem !important; color: #3d5a80 !important; line-height: 1.78 !important; }
  .ping-page .callout p + p { margin-top: 10px !important; }
  .ping-page .callout p strong { color: #2b4260 !important; }

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

  /* ===== LES TROIS CONNEXIONS ===== */
  .ping-page .conn {
    background: var(--white); border: 1px solid #ececec; border-radius: 16px; padding: 22px 24px;
    margin-bottom: 16px; position: relative; overflow: hidden;
  }
  .ping-page .conn::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; }
  .ping-page .conn.c1::before { background: var(--ping-ok); }
  .ping-page .conn.c2::before { background: var(--ping-warn); }
  .ping-page .conn.c3::before { background: var(--ping-err); }
  .ping-page .conn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .ping-page .conn-head .rank {
    width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center;
    justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem;
    color: white; flex-shrink: 0;
  }
  .ping-page .conn.c1 .rank { background: var(--ping-ok-dark); }
  .ping-page .conn.c2 .rank { background: var(--ping-warn-dark); }
  .ping-page .conn.c3 .rank { background: var(--ping-err); }
  .ping-page .conn-head h3 { margin: 0; font-size: 1rem; }

  /* ===== LES DEUX CPL AFFILIÉS ===== */
  .ping-page .prods { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
  .ping-page .prod {
    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;
  }
  .ping-page .prod:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(0,0,0,0.09); border-color: transparent; }
  .ping-page .prod-img {
    height: 168px; background: var(--white); display: flex; align-items: center; justify-content: center;
    position: relative; padding: 14px;
  }
  .ping-page .prod-img img { max-width: 100%; max-height: 100%; 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 guides d'achat. */
  .ping-page .prod-img .ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c8c8c8; }
  .ping-page .prod-img .ph span { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .ping-page .prod-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(--ping-accent-light); color: var(--ping-accent-dark);
  }
  /* Le coup de cœur du back-office, dans le rose de l'étiquette du catalogue :
     il doit se distinguer du badge neutre, qui porte l'accent de la page. */
  .ping-page .prod-tag.heart { background: #fce4e9; color: #c23a58; }
  .ping-page .prod-body { padding: 15px 18px 10px; flex: 1; }
  /* Bornage du texte, motif du catalogue matériel : deux lignes de titre, trois
     de description, pour que la grille ne se déforme pas. Les produits de cette
     page sont pilotés au back-office depuis le 04/08, ce bornage n'est donc plus
     une précaution mais la règle qui tient la grille. */
  .ping-page .prod-body h4 {
    font-size: 0.9rem; font-weight: 700; color: var(--dark); margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ping-page .prod-body p {
    font-size: 0.78rem !important; line-height: 1.6 !important; margin: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ping-page .prod-foot {
    padding: 12px 18px; border-top: 1px solid #f2f2f2; background: var(--bg);
    display: flex; align-items: center; justify-content: space-between;
  }
  .ping-page .prod-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.08rem; color: var(--dark); letter-spacing: 0.5px; }
  .ping-page .prod-btn {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: white; background: var(--ping-accent); padding: 8px 14px; border-radius: 7px;
  }
  .ping-page .prod:hover .prod-btn { background: var(--ping-accent-dark); }

  .ping-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;
  }

  /* ===== CE QUI NE SERT À RIEN =====
     La croix des quatre cartes est un signe typographique, pas un emoji : elle
     est conservée telle quelle, comme sur l'aim et le ranked. */
  .ping-page .nope { display: grid; gap: 12px; margin-top: 20px; }
  .ping-page .no {
    display: flex; align-items: flex-start; gap: 14px; padding: 17px 20px; background: var(--white);
    border: 1px solid #ececec; border-radius: 13px;
  }
  .ping-page .no .n-x {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: #fdeceb; color: #b83c37;
    font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .ping-page .no strong { display: block; font-size: 0.88rem; color: var(--dark); margin-bottom: 4px; }
  .ping-page .no > span > span { font-size: 0.84rem; color: var(--text-light); line-height: 1.7; }

  /* ===== TABLEAU RÉCAPITULATIF =====
     Légende posée AU-DESSUS du cadre, plus en caption : charte des tableaux du
     ranked, des armes et de setup. Le bandeau sombre est ainsi le premier
     élément du cadre arrondi, d'où le border-top retiré. */
  .ping-page .table-note { margin: 22px 0 0; text-align: left; font-size: 0.76rem; color: var(--text-light); font-style: italic; }
  .ping-page .table-note + .table-wrap { margin-top: 10px; }
  .ping-page .table-wrap {
    border: 1px solid #ececec; border-top: 0; border-radius: 16px; overflow: hidden;
    background: var(--white); margin: 22px 0;
  }
  .ping-page table { width: 100%; border-collapse: collapse; }
  .ping-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;
  }
  .ping-page table thead th:first-child { color: rgba(255,255,255,0.95); }
  .ping-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  .ping-page table tbody tr:hover { background: #f7fafd; }
  .ping-page table th[scope="row"] { text-align: left; padding: 13px 18px; font-size: 0.84rem; font-weight: 700; color: var(--dark); }
  .ping-page table td { padding: 13px 18px; font-size: 0.81rem; color: var(--text-light); line-height: 1.6; }
  .ping-page .pill {
    display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 3px 9px; border-radius: 5px; white-space: nowrap;
  }
  .ping-page .p-fort { background: #e0f5ef; color: #2f7a68; }
  .ping-page .p-moyen { background: #eaf1fc; color: #3f6fc4; }
  .ping-page .p-faible { background: #f2f2f2; color: #888; }
  .ping-page .p-facile { background: #e0f5ef; color: #2f7a68; }
  .ping-page .p-moy { background: #fbf2da; color: #9d7118; }

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

  @media (max-width: 1024px) {
    .ping-page .prods { grid-template-columns: 1fr; }
    .ping-page .gl { flex-wrap: wrap; }
  }

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

    .ping-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ping-page table tbody tr { display: block; padding: 14px 18px; }
    .ping-page table th[scope="row"] { display: block; padding: 0 0 8px; }
    .ping-page table td { display: block; padding: 4px 0; }
    .ping-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) {
    .ping-page .prod { transition: none; }
  }