/* ==========================================================================
   GUIDE « Débuter dans Valorant » (maquette client du 30/07)

   Complète agent.css, qui fournit déjà le reset, le body et la palette de
   marque en :root (--coral, --dark, --text, --bg, --white...) : rien de tout
   cela n'est redéclaré ici.

   --hdr-h N'EST PAS REDÉCLARÉE : elle vient de mega-menu.css (72 px, 62 px
   sous 900 px) et c'est bien la hauteur du vrai en-tête du site, pas les 70 px
   du header de la maquette qui a été abandonné. Le sommaire collant et le
   scroll-margin des chapitres la consomment telle quelle.

   Les couleurs de rôles ne vivent qu'ici et dans le méga menu : elles sont
   scopées sur .roles, jamais posées en :root.
   ========================================================================== */

  html { scroll-behavior: smooth; }

  /* La barre de progression de lecture de la maquette (.read-bar, filet
     dégradé au-dessus de l'en-tête) a été retirée le 30/07 sur décision du
     client : ses styles et son JS sont partis avec elle. Le suivi du chapitre
     courant dans le sommaire desktop, lui, est conservé. */

  /* ===== HERO ===== */
  .guide-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #0c0812 0%, #1c1226 55%, #241832 100%); }
  .guide-hero .hero-img { position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0.28; filter: saturate(0.9); }
  .guide-hero::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(12,8,18,0.94) 0%, rgba(28,18,38,0.82) 48%, rgba(36,24,50,0.52) 100%),
      radial-gradient(ellipse at 22% 45%, rgba(232,99,126,0.20) 0%, transparent 58%); }
  .hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 20px 40px 52px; }
  .guide-hero .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; flex-wrap: wrap; margin-bottom: 30px; }
  .guide-hero .breadcrumb a { color: rgba(255,255,255,0.32); text-decoration: none; transition: color 0.2s; }
  .guide-hero .breadcrumb a:hover { color: var(--coral); }
  .guide-hero .breadcrumb .sep { color: rgba(255,255,255,0.15); }
  .guide-hero .breadcrumb .current { color: rgba(255,255,255,0.6); font-weight: 600; }
  .hero-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.74rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
  .guide-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: white; letter-spacing: 2px;
    line-height: 1; margin-bottom: 16px; }
  .guide-hero h1 span { color: var(--coral); }
  .hero-lede { font-size: 0.95rem; color: rgba(255,255,255,0.5); line-height: 1.75; max-width: 640px; }
  .hero-lede strong { color: rgba(255,255,255,0.85); font-weight: 600; }
  .hero-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
  .hero-meta span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 8px;
    font-size: 0.7rem; font-weight: 600; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }

  /* ===== MISE EN PAGE ===== */
  .layout { max-width: 1200px; margin: 0 auto; padding: 44px 40px 24px; display: grid;
    grid-template-columns: 250px 1fr; gap: 52px; align-items: start; }

  /* ===== SOMMAIRE COLLANT ===== */
  .toc { position: sticky; top: calc(var(--hdr-h) + 24px); }
  .toc-head { font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--text-light); margin-bottom: 6px; }
  .toc-progress { font-size: 0.72rem; color: #bbb; margin-bottom: 16px; }
  .toc-progress b { color: var(--coral-dark); }
  .toc-list { list-style: none; position: relative; padding-left: 20px; }
  .toc-list::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: #ececec; border-radius: 2px; }
  .toc-fill { position: absolute; left: 5px; top: 8px; width: 2px; height: 0; border-radius: 2px;
    background: linear-gradient(180deg, var(--coral), #b44ddf); transition: height 0.25s ease; }
  .toc-list li { position: relative; }
  .toc-list li::before { content: ''; position: absolute; left: -18px; top: 12px; width: 8px; height: 8px;
    border-radius: 50%; background: #ddd; border: 2px solid var(--bg); transition: all 0.25s; }
  .toc-list li.done::before { background: var(--coral); }
  /* Puce du chapitre courant : corail, mais à la MÊME taille que les autres
     (décision client du 30/07). Le grossissement et le halo de la maquette
     mordaient sur le titre. Le gras du libellé suffit à la repérer. */
  .toc-list li.current::before { background: var(--coral); }
  .toc-list a { display: block; padding: 7px 0; font-size: 0.79rem; line-height: 1.45; color: var(--text-light);
    text-decoration: none; transition: color 0.2s, transform 0.2s; }
  .toc-list a:hover { color: var(--text); transform: translateX(2px); }
  .toc-list li.current a { color: var(--dark); font-weight: 700; }

  /* ===== ENCART « 5 ERREURS À ÉVITER » =====
     Charte de la maquette (carte sombre). Un seul jeu de styles pour ses deux
     emplacements : sous le sommaire collant au-dessus de 1024 px, dernier bloc
     de « Pour aller plus loin » en dessous. Le survol corail est réservé à la
     version LIEN : tant que l'article n'existe pas, le bloc est un div.

     Le sélecteur est doublé d'une variante `.toc a.toc-cta` : les guides qui
     chargent AUSSI listing.css (le ping, le casque) y trouvent une règle
     `.toc a` (fond clair, texte sombre, petit rayon) qui, à 0-1-1, l'emporte
     sur `.toc-cta` seul et repeignait la carte en clair. Les deux sélecteurs
     sont conservés : la variante « grille » de « Pour aller plus loin » vit
     hors du sommaire, elle n'est atteinte que par le premier. Les font-size et
     font-weight sont posés explicitement pour la même raison : sans eux, le
     libellé secondaire héritait des 0.74rem/600 de listing.css et sortait plus
     petit et plus gras que sur les guides sans cette feuille. */
  .toc-cta,
  .toc a.toc-cta { display: block; padding: 14px 16px; border-radius: 12px; background: var(--dark);
    color: white; text-decoration: none; transition: all 0.2s; font-size: 1rem; font-weight: 400; }
  a.toc-cta:hover,
  .toc a.toc-cta:hover { background: var(--coral); transform: translateY(-2px); }
  .toc-cta strong { display: block; font-size: 0.78rem; margin-bottom: 3px; }
  .toc-cta span { font-size: 0.68rem; opacity: 0.55; }

  .toc-cta-colonne { margin-top: 22px; }
  .toc-cta-grille { display: none; }

  /* ===== SOMMAIRE MOBILE =====
     Même parti pris que les pages rôles (nav.toc de listing.css) : une liste
     STATIQUE, jamais collante, verticale, libellé en tête, sans suivi de
     position. Les classes sont propres au guide, cette page ne chargeant pas
     listing.css. Masqué tant que le sommaire collant de gauche est là. */
  .toc-flat { display: none; }

  /* ===== CONTENU ===== */
  .content { max-width: 780px; }
  .chapter { scroll-margin-top: calc(var(--hdr-h) + 20px); margin-bottom: 54px; }
  .chapter:last-child { margin-bottom: 0; }
  .ch-num { display: inline-flex; align-items: center; gap: 10px; font-family: 'Bebas Neue', sans-serif;
    font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--coral); margin-bottom: 10px; }
  .ch-num::after { content: ''; width: 28px; height: 1px; background: var(--coral-light); }
  .content h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.72rem; color: var(--dark); letter-spacing: 1px;
    line-height: 1.1; margin-bottom: 18px; }
  .content h2 em { color: var(--coral); font-style: normal; }
  .content h3 { font-size: 1.02rem; font-weight: 700; color: var(--dark); margin: 28px 0 14px; }
  .content p { font-size: 0.92rem; color: var(--text-light); line-height: 1.9; margin-bottom: 16px; }
  .content p:last-child { margin-bottom: 0; }
  .content p strong { color: var(--text); font-weight: 600; }
  .content a { color: var(--coral-dark); text-decoration: none; border-bottom: 1px solid rgba(232,99,126,0.32);
    transition: border-color 0.2s, background 0.2s; }
  .content a:hover { border-bottom-color: var(--coral-dark); background: var(--coral-light); }

  /* Figures */
  .content figure { margin: 24px 0; }
  .content figure img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid #ececec; background: var(--white); }
  .content figure.inline-ico { max-width: 190px; margin: 22px auto; }
  .content figure.inline-ico img { border: none; background: none; }
  .content figcaption { font-size: 0.73rem; color: #b0b0b0; font-style: italic; text-align: center; margin-top: 10px; }

  /* Citation et aparté */
  .aside-quote { position: relative; margin: 26px 0; padding: 22px 26px 22px 30px; border-radius: 14px;
    background: linear-gradient(135deg, #0e0a14, #241832); overflow: hidden; }
  .aside-quote::after { content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 82% 50%, rgba(232,99,126,0.18) 0%, transparent 62%); pointer-events: none; }
  .aside-quote p { position: relative; z-index: 2; margin: 0; color: rgba(255,255,255,0.82) !important;
    font-size: 1rem !important; line-height: 1.65 !important; font-style: italic; }
  .aside-quote .aq-src { position: relative; z-index: 2; display: block; margin-top: 8px; font-style: normal;
    font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--coral); font-weight: 700; }

  .aside-note { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--coral);
    background: var(--coral-light); border-radius: 0 12px 12px 0; }
  .aside-note p { margin: 0; font-size: 0.86rem !important; color: #8a4d5c !important; font-style: italic; line-height: 1.7 !important; }

  /* Cartes conseils */
  .tips { display: grid; gap: 12px; margin: 20px 0 0; list-style: none; }
  .tips li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--white);
    border: 1px solid #ececec; border-radius: 13px; font-size: 0.87rem; color: var(--text-light);
    line-height: 1.65; transition: all 0.22s; }
  .tips li:hover { transform: translateX(3px); border-color: rgba(232,99,126,0.28); box-shadow: 0 6px 20px rgba(0,0,0,0.04); }
  .tips li .t-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--coral-light);
    color: var(--coral-dark); font-family: 'Bebas Neue', sans-serif; font-size: 0.82rem; display: flex;
    align-items: center; justify-content: center; letter-spacing: 0.5px; }

  /* Cartes rôles. Les couleurs de rôles sont scopées ici : elles n'existent
     pas en :root, et le méga menu garde les siennes de son côté. */
  .roles {
    --duelist: #e8637e;
    --sentinel: #4cc9b0;
    --controller: #5c8ee6;
    --initiator: #e6b44d;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0;
  }
  .role { padding: 18px 20px; background: var(--white); border: 1px solid #ececec; border-radius: 14px;
    position: relative; overflow: hidden; transition: all 0.22s; }
  .role::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
  .role:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.05); }
  .role.s::before { background: var(--sentinel); } .role.c::before { background: var(--controller); }
  .role.i::before { background: var(--initiator); } .role.d::before { background: var(--duelist); }
  .role .r-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
  /* Pictogrammes officiels du projet (fill currentColor) : ils prennent la
     couleur du rôle, là où la maquette posait un emoji. */
  .role .r-ico { display: inline-flex; align-items: center; }
  .role.s .r-ico { color: #38a892; } .role.c .r-ico { color: #3f6fc4; }
  .role.i .r-ico { color: #9d7118; } .role.d .r-ico { color: var(--coral-dark); }
  .role h4 { font-size: 0.88rem; font-weight: 700; }
  .role.s h4 a { color: #38a892; } .role.c h4 a { color: #3f6fc4; }
  .role.i h4 a { color: #9d7118; } .role.d h4 a { color: var(--coral-dark); }
  .role h4 a { border: none; }
  .role h4 a:hover { background: none; text-decoration: underline; }
  .role p { font-size: 0.8rem !important; line-height: 1.6 !important; margin: 0 !important; }

  /* Liste des capacités */
  .caps { list-style: none; margin: 18px 0; display: grid; gap: 9px; }
  .caps li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: var(--text-light); line-height: 1.7; }
  .caps li::before { content: '▸'; color: var(--coral); flex-shrink: 0; font-size: 0.9rem; line-height: 1.55; }

  /* Checklist matériel */
  .checklist { list-style: none; display: grid; gap: 10px; margin: 20px 0 0; }
  .checklist li { display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: var(--white);
    border: 1px solid #ececec; border-radius: 13px; font-size: 0.88rem; color: var(--text); transition: all 0.22s; }
  .checklist li:hover { border-color: rgba(76,201,176,0.4); background: #f8fdfc; }
  .checklist li .c-box { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #4cc9b0;
    color: white; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }

  /* Récapitulatif final */
  .recap { margin-top: 54px; padding: 30px 32px; border-radius: 18px;
    background: linear-gradient(135deg, #0c0812, #241832); position: relative; overflow: hidden; }
  .recap::after { content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 78% 40%, rgba(232,99,126,0.18) 0%, transparent 60%); pointer-events: none; }
  .recap > * { position: relative; z-index: 2; }
  .recap .rc-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.7rem; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }
  .recap h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: white; letter-spacing: 1px; margin-bottom: 18px; }
  .recap ol { list-style: none; counter-reset: r; display: grid; gap: 10px; }
  .recap li { counter-increment: r; display: flex; align-items: flex-start; gap: 13px;
    font-size: 0.86rem; color: rgba(255,255,255,0.55); line-height: 1.65; }
  .recap li::before { content: counter(r, decimal-leading-zero); flex-shrink: 0;
    font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem; color: var(--coral); letter-spacing: 1px; padding-top: 1px; }

  /* Liens connexes */
  .related { max-width: 1200px; margin: 0 auto; padding: 8px 40px 56px; }
  .related-inner { max-width: 780px; margin-left: calc(250px + 52px); }
  .related h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--dark); letter-spacing: 1px; margin-bottom: 16px; }
  .rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .rel { display: flex; align-items: center; gap: 13px; padding: 15px 17px; background: var(--white);
    border: 1px solid #ececec; border-radius: 13px; text-decoration: none; color: inherit; transition: all 0.22s; }
  /* Le survol n'est posé que sur les cartes qui MÈNENT quelque part : celles
     dont l'article n'est pas encore repris sont des div, elles gardent le
     visuel de la maquette mais ne se soulèvent pas et n'appellent pas le clic. */
  a.rel:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.05); border-color: transparent; }
  .rel .rl-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); display: flex;
    align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
  /* Pictogrammes du set client : 30 px dans la tuile de 36, ce qui laisse
     respirer le fond. Servis en 96 px pour rester nets en haute densité. */
  .rel .rl-ico img { width: 30px; height: 30px; object-fit: contain; display: block; }
  .rel strong { display: block; font-size: 0.83rem; color: var(--dark); margin-bottom: 2px; }
  .rel span { font-size: 0.7rem; color: var(--text-light); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1024px) {
    .layout { grid-template-columns: 1fr; gap: 0; padding: 0 20px 24px; }
    .toc { display: none; }

    /* Le sommaire collant disparaît : l'encart rejoint les cartes connexes. */
    .toc-cta-grille { display: block; }

    .toc-flat { display: block; margin-bottom: 28px; }
    .toc-flat-inner {
      display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
      padding: 14px 16px; background: var(--white); border: 1px solid #eee; border-radius: 12px;
    }
    .toc-flat-label {
      font-family: 'Bebas Neue', sans-serif; font-size: 0.7rem; letter-spacing: 2px;
      text-transform: uppercase; color: var(--text-light); margin: 0 0 4px;
    }
    .toc-flat a {
      font-size: 0.74rem; font-weight: 600; color: var(--text); text-decoration: none;
      padding: 5px 12px; border-radius: 6px; background: var(--bg); border: none;
      transition: all 0.2s;
    }
    .toc-flat a:hover { background: rgba(var(--agent-accent-rgb), 0.12); color: var(--agent-accent-dark); }

    /* min-width: 0 : garde-fou de grille, un élément de grille ayant
       min-width: auto par défaut. Il évite qu'un enfant large (une image, un
       tableau) impose sa largeur naturelle à la colonne au lieu de celle de
       l'écran. */
    .content { max-width: 100%; min-width: 0; padding-top: 8px; }
    .related-inner { margin-left: 0; max-width: 100%; }
    .related { padding: 8px 20px 44px; }
  }

  @media (max-width: 768px) {
    .hero-inner { padding: 16px 20px 40px; }
    .guide-hero h1 { font-size: 2.1rem; }
    .content h2 { font-size: 1.4rem; }
    .roles, .rel-grid { grid-template-columns: 1fr; }
    .recap { padding: 24px 22px; }
    .checklist li { flex-wrap: wrap; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
  }