/* ==========================================================================
   ÉCRAN GAMING POUR JOUER À VALORANT (maquette client « ecran-gaming-valorant »)

   Troisième guide du cluster Setup et Matériel, même gabarit que le ping et le
   casque. 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), l'étiquette « Nouveau » et
   la FAQ en questions ouvertes.

   TOUTES les règles sont scopées sous .ecran-page, sans exception (leçon de
   setup.css, du ping et du casque) : 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. 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 .ecran-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.
   ========================================================================== */

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

    --ecran-ok: #4cc9b0;
    --ecran-ok-dark: #38a892;
    --ecran-warn: #e6b44d;
    --ecran-warn-dark: #9d7118;
  }

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

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

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

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

  /* ===== CITATION ===== */
  .ecran-page .quote {
    margin: 22px 0; padding: 20px 26px; border-radius: 14px;
    border-left: 4px solid var(--ecran-accent); background: var(--ecran-accent-light); font-style: italic;
  }
  .ecran-page .quote p { margin: 0; font-size: 0.95rem !important; color: #3d5a80 !important; line-height: 1.7 !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. */
  .ecran-page .callout {
    margin: 22px 0; padding: 20px 24px; border-radius: 14px;
    border-left: 4px solid var(--ecran-accent); background: var(--ecran-accent-light);
  }
  .ecran-page .callout .co-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--ecran-accent-dark); margin-bottom: 8px;
  }
  .ecran-page .callout p { margin: 0; font-size: 0.88rem !important; color: #3d5a80 !important; line-height: 1.78 !important; }
  .ecran-page .callout p + p { margin-top: 10px !important; }
  .ecran-page .callout p strong { color: #2b4260 !important; }

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

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

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

  /* Les trois verdicts du tableau des définitions. Ce sont des MOTS, pas des
     pictogrammes : ils restent, seule leur mise en forme est ici. */
  .ecran-page .tag {
    display: inline-block; font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 3px 9px; border-radius: 5px; white-space: nowrap;
  }
  .ecran-page .t-ok { background: #e0f5ef; color: #2f7a68; }
  .ecran-page .t-mid { background: #fbf2da; color: #9d7118; }
  .ecran-page .t-no { background: #f2f2f2; color: #999; }

  /* ===== LES QUATRE TYPES DE DALLE ===== */
  .ecran-page .panels { display: grid; gap: 14px; margin-top: 20px; }
  .ecran-page .panel {
    background: var(--white); border: 1px solid #ececec; border-radius: 14px;
    padding: 20px 22px; position: relative; overflow: hidden;
  }
  .ecran-page .panel::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
  .ecran-page .panel.d1::before { background: var(--ecran-ok); }
  .ecran-page .panel.d2::before { background: var(--ecran-accent); }
  .ecran-page .panel.d3::before { background: var(--ecran-warn); }
  .ecran-page .panel.d4::before { background: #b0b0b0; }
  .ecran-page .panel .p-top { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; flex-wrap: wrap; }
  .ecran-page .panel h3 { margin: 0; font-size: 0.98rem; }
  .ecran-page .panel .p-verdict {
    margin-left: auto; font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 4px 11px; border-radius: 6px; white-space: nowrap;
  }
  .ecran-page .panel.d1 .p-verdict { background: #e0f5ef; color: #2f7a68; }
  .ecran-page .panel.d2 .p-verdict { background: var(--ecran-accent-light); color: var(--ecran-accent-dark); }
  .ecran-page .panel.d3 .p-verdict { background: #fdf6e3; color: #9d7118; }
  .ecran-page .panel.d4 .p-verdict { background: #f2f2f2; color: #999; }
  .ecran-page .panel p { margin: 0; font-size: 0.87rem !important; line-height: 1.78 !important; }
  .ecran-page .panel p + p { margin-top: 9px !important; }

  /* ===== NOTRE SÉLECTION =====
     Les quatre écrans é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
     « ecran ». 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. Les chapelets
     de caractéristiques de la maquette sont partis avec les tableaux en dur :
     le bandeau ne porte pas de caractéristiques d'écran. */
  .ecran-page .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
  .ecran-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. */
  .ecran-page .content a.shop-card { border-bottom: none; }
  .ecran-page .content a.shop-card:hover { background: var(--white); border-bottom: none; }
  .ecran-page .shop-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); border-color: transparent; }
  .ecran-page .shop-img {
    height: 178px; background: var(--white); display: flex; align-items: center; justify-content: center;
    position: relative; padding: 14px;
  }
  .ecran-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. */
  .ecran-page .shop-img .ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c8c8c8; }
  .ecran-page .shop-img .ph span { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .ecran-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(--ecran-accent-light); color: var(--ecran-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. */
  .ecran-page .shop-tag.heart { background: #fce4e9; color: #c23a58; }
  .ecran-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. */
  .ecran-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. */
  .ecran-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;
  }
  .ecran-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;
  }
  .ecran-page .shop-foot {
    padding: 12px 18px; border-top: 1px solid #f2f2f2; background: var(--bg);
    display: flex; align-items: center; justify-content: space-between;
  }
  .ecran-page .shop-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--dark); letter-spacing: 0.5px; }
  .ecran-page .shop-btn {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: white; background: var(--ecran-accent); padding: 8px 14px; border-radius: 7px;
  }
  .ecran-page .shop-card:hover .shop-btn { background: var(--ecran-accent-dark); }

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

  @media (max-width: 1024px) {
    .ecran-page .shop-grid { grid-template-columns: 1fr; }
    .ecran-page .panel .p-verdict { margin-left: 0; }
  }

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