/* ==========================================================================
   LEXIQUE DE VALORANT (maquette client « lexique-valorant »)

   Complète agent.css, qui fournit le reset, le body, le fil d'Ariane et son
   bandeau, et listing.css, qui fournit le hero et ses pastilles.

   La maquette déclarait ses propres variables (--accent, --accent-light,
   --glow, --gradient-*) : elles sont REMPLACÉES par la palette du projet,
   injectée en :root par ColorPalette depuis la seule couleur violette de la
   page, exactement comme une fiche agent ou une fiche carte. Le lexique parle
   donc le même dialecte CSS que le reste du site.

   Le premier bloc de style de la maquette embarquait par ailleurs tout le CSS
   d'un listing d'agents (grille, filtres, actualités) sans aucun balisage
   correspondant dans la page : rien n'en a été repris.
   ========================================================================== */

  /* ===== LES ESSENTIELS ===== */
  .ess-band { background: var(--white); border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
  .ess-inner { max-width: 1200px; margin: 0 auto; padding: 42px 40px 46px; }
  .ess-inner .e-label {
    font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--agent-accent-dark); margin-bottom: 8px;
  }
  .ess-inner h2 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: var(--dark);
    letter-spacing: 1px; margin-bottom: 10px;
  }
  .ess-inner h2 em { color: var(--agent-accent); font-style: normal; }
  .ess-inner > p { font-size: 0.88rem; color: var(--text-light); line-height: 1.8; max-width: 760px; margin-bottom: 22px; }

  .ess-grid { display: flex; gap: 9px; flex-wrap: wrap; }
  .ess-chip {
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 9px;
    background: var(--bg); border: 1px solid #ececec; color: var(--text);
    font-size: 0.81rem; font-weight: 600; text-decoration: none; transition: all 0.2s;
  }
  .ess-chip:hover {
    background: var(--white); border-color: transparent; transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.07); color: var(--dark);
  }
  .ess-chip .ec-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

  /* ===== LE LEXIQUE ===== */
  .lex { max-width: 1200px; margin: 0 auto; padding: 40px 40px 20px; }
  .lex-intro { font-size: 0.9rem; color: var(--text-light); line-height: 1.88; max-width: 860px; margin-bottom: 30px; }
  .lex-intro strong { color: var(--text); font-weight: 600; }

  /* La marge de défilement dégage la lettre visée de sous l'en-tête collant. */
  .letter-block { margin-bottom: 34px; scroll-margin-top: 180px; }
  .letter-head {
    display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px;
    border-bottom: 2px solid var(--agent-accent-light); margin-bottom: 14px;
  }
  .l-big {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; line-height: 1;
    color: var(--agent-accent); letter-spacing: 2px;
  }
  .l-count { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #c4c4c4; }

  .entries { display: grid; gap: 10px; }
  .entry {
    background: var(--white); border: 1px solid #ececec; border-radius: 13px;
    padding: 16px 20px; transition: all 0.2s; scroll-margin-top: 120px;
  }
  .entry:hover { border-color: rgba(var(--agent-accent-rgb), 0.3); box-shadow: 0 6px 20px rgba(0,0,0,0.04); }
  .entry dt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
  .t-name { font-size: 0.98rem; font-weight: 700; color: var(--dark); }
  .t-orig { font-size: 0.74rem; color: #b0b0b0; font-style: italic; }
  .t-star { font-size: 0.72rem; color: #e6b44d; }
  .t-cat {
    margin-left: auto; font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 4px 10px; border-radius: 5px; white-space: nowrap;
  }
  .entry dd { margin: 0; font-size: 0.85rem; color: var(--text-light); line-height: 1.78; }

  /* Surbrillance de l'entrée visée par une ancre, posée par lexique.js : la
     classe remplace le style en ligne de la maquette, pour que la couleur
     reste ici et suive la palette de la page. */
  .entry.entry-vise { background: var(--agent-accent-light); }
  .entry { transition: background 0.4s ease, border-color 0.2s, box-shadow 0.2s; }

  /* ===== POUR ALLER PLUS LOIN ===== */
  .related { max-width: 1200px; margin: 0 auto; padding: 20px 40px 56px; }
  .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: repeat(3, 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;
  }
  .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;
  }
  /* Visuels du carrefour, détourés : « contain » les pose entiers dans la
     pastille quelles que soient leurs proportions. Même règle que les
     vignettes du guide du débutant. */
  .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 span { font-size: 0.7rem; color: var(--text-light); }

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

  @media (max-width: 768px) {
    .ess-inner { padding: 30px 20px 34px; }
    .lex { padding: 28px 20px 12px; }
    .entry dt { gap: 8px; }
    .t-cat { margin-left: 0; }
    .related { padding: 12px 20px 44px; }
    .rel-grid { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ess-chip, .rel, .entry { transition: none; }
  }