/* ==========================================================================
   ACTIVER LE MODE TRICHE (maquette client « activer-le-mode-triche »)

   Complète agent.css, qui fournit le reset et le body, et guide.css, qui
   fournit tout le gabarit des guides : bandeau, mise en page à deux colonnes,
   sommaire collant et son suivi, chapitres, sommaire mobile statique et bloc
   « Pour aller plus loin ».

   Ne restent ici que les blocs propres à cette page : la barre de progression,
   la façade vidéo, les huit options, les quatre usages, la réponse rapide, les
   encadrés et la FAQ en questions ouvertes.
   ========================================================================== */

  /* ===== BARRE DE PROGRESSION DE LECTURE =====
     Retirée des trois guides le 30/07 sur décision du client, elle revient
     UNIQUEMENT ici, à sa demande, sur la page la plus lue du site. Elle vit
     donc dans cette feuille et pas dans guide.css : les autres guides ne
     doivent pas en hériter. */
  .read-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
    background: linear-gradient(90deg, var(--coral), #e6b44d);
    transition: width 0.1s linear;
  }

  /* ===== FAÇADE VIDÉO =====
     Même principe que les fiches cartes : la miniature YouTube tient lieu
     d'aperçu et l'iframe n'arrive qu'au clic, aucun appel tiers avant. */
  .triche-page .video-facade {
    position: relative; display: block; width: 100%; padding: 0; border: none;
    margin: 22px 0 0; border-radius: 16px; overflow: hidden; cursor: pointer;
    aspect-ratio: 16 / 9; background: var(--dark);
  }
  .triche-page .video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .triche-page .vf-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.34); transition: background 0.25s;
  }
  .triche-page .video-facade:hover .vf-overlay { background: rgba(0,0,0,0.18); }
  .triche-page .vf-btn {
    width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,0.14);
    border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.3rem; padding-left: 5px; transition: transform 0.25s, background 0.25s;
  }
  .triche-page .video-facade:hover .vf-btn { transform: scale(1.09); background: rgba(255,255,255,0.24); }
  /* La note « la vidéo ne se charge qu'au clic » a été retirée du site le
     04/08 (demande client), la règle .vf-note avec elle. */

  /* Le cadre que le script met à la place de la façade au clic. */
  .triche-page .video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; margin: 22px 0 0; }
  .triche-page .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* ===== APPEL VIDÉO DU BANDEAU ===== */
  .hero-video-cta {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 8px;
    font-size: 0.7rem; font-weight: 700; text-decoration: none;
    background: rgba(232,99,126,0.16); border: 1px solid rgba(232,99,126,0.35); color: #f2a3b4;
    transition: background 0.2s;
  }
  .hero-video-cta:hover { background: rgba(232,99,126,0.28); }

  /* ===== RÉPONSE RAPIDE ===== */
  .quick {
    margin: 24px 0; padding: 22px 26px; border-radius: 16px;
    background: var(--white); border: 1px solid #ececec;
  }
  .quick-head { margin-bottom: 12px; }
  .quick-head h3 { margin: 0; font-size: 0.98rem; color: var(--dark); }
  .quick ol { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
  .quick li { font-size: 0.86rem; color: var(--text-light); line-height: 1.7; }
  .quick li strong { color: var(--text); font-weight: 600; }

  /* ===== LES OPTIONS ===== */
  .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
  .opt {
    background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 18px 20px;
    transition: transform 0.22s, box-shadow 0.22s;
  }
  .opt:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.05); }
  .opt .o-top { margin-bottom: 8px; }
  .opt h3 { margin: 0; font-size: 0.92rem; color: var(--dark); }
  .opt p { font-size: 0.83rem; color: var(--text-light); line-height: 1.7; margin-bottom: 10px; }
  .opt p strong { color: var(--text); font-weight: 600; }
  .opt .o-use {
    display: block; font-size: 0.72rem; font-weight: 700; color: var(--coral-dark);
    border-top: 1px solid #f2f2f2; padding-top: 9px;
  }

  /* ===== LES USAGES ===== */
  .uses { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
  .use { background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 18px 20px; }
  .use h3 { margin: 0 0 7px; font-size: 0.92rem; color: var(--dark); }
  .use p { font-size: 0.83rem; color: var(--text-light); line-height: 1.7; margin: 0; }

  /* ===== ENCADRÉS =====
     Trois tons : neutre, vert pour la réponse rassurante, orange pour la mise
     en garde. Les emojis de la maquette sont retirés, le titre porte le sens. */
  .triche-page .callout {
    margin: 22px 0; padding: 20px 24px; border-radius: 14px;
    border-left: 4px solid var(--coral); background: var(--coral-light);
  }
  .triche-page .callout .co-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--coral-dark); margin-bottom: 8px;
  }
  .triche-page .callout p { margin: 0; font-size: 0.88rem; color: #7d2c3f; line-height: 1.78; }
  .triche-page .callout p strong { color: #5d1f2d; font-weight: 700; }

  .triche-page .callout.ok { border-left-color: #38a892; background: #e9f7f3; }
  .triche-page .callout.ok .co-title { color: #2b7d6c; }
  .triche-page .callout.ok p { color: #2f5d54; }
  .triche-page .callout.ok p strong { color: #1f4038; }

  .triche-page .callout.warn { border-left-color: #e6b44d; background: #fbf2da; }
  .triche-page .callout.warn .co-title { color: #9d7118; }
  .triche-page .callout.warn p { color: #7d5c17; }
  .triche-page .callout.warn p strong { color: #5d4310; }

  /* ===== FAQ =====
     Questions ouvertes, jamais d'accordéon sur les guides (décision client du
     30/07) : la parité avec l'ancienne page qui ranke première l'exige. */
  .faq { display: grid; gap: 14px; margin-top: 20px; }
  .qa { background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 18px 22px; }
  .qa h3 { margin: 0 0 8px; font-size: 0.92rem; color: var(--dark); }
  .qa p { margin: 0; font-size: 0.85rem; color: var(--text-light); line-height: 1.78; }
  .qa p strong { color: var(--text); font-weight: 600; }

  /* ===== CAPTURES D'ÉCRAN ===== */
  .triche-page figure { margin: 18px 0; border-radius: 14px; overflow: hidden; border: 1px solid #ececec; }
  .triche-page figure img { width: 100%; height: auto; display: block; }

  @media (max-width: 1024px) {
    .opts, .uses { grid-template-columns: 1fr; }

    /* Doctrine barre de lecture : dès le passage en mobile (le seuil où le
       gabarit des guides quitte les deux colonnes et où le sommaire collant
       cède la place au sommaire à plat), la barre de progression disparaît.
       Elle n'existe qu'en desktop. Cette feuille étant la seule à déclarer
       .read-bar, la règle vaut pour les cinq pages qui la portent aujourd'hui
       (mode triche, crosshair, ranked, aim, ping) ; toute future page à barre
       de lecture doit elle aussi la masquer en mobile. */
    .read-bar { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .read-bar, .opt, .triche-page .vf-btn, .triche-page .vf-overlay { transition: none; }
  }