/* Listing « Tous les agents », d'après la créa agents-listing adaptée aux
   décisions du 29/07 : barre de filtres en une seule ligne (pictogrammes SVG
   de rôles, difficulté en menu déroulant, pas de compteur), cartes avec
   portraits détourés sur fond couleur d'agent. Cette feuille complète
   agent.css (chargée avant elle par le gabarit), qui fournit déjà le reset,
   le header, le fil d'Ariane, .section-heading et tout le bloc SEO. */

  /* ========== HERO ========== */
  .page-hero {
    position: relative;
    background: linear-gradient(135deg, #12091e 0%, #1e0e2e 100%);
    overflow: hidden;
  }

  .page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 30% 40%, rgba(232, 99, 126, 0.15) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 70%, rgba(92, 142, 230, 0.08) 0%, transparent 50%);
    pointer-events: none;
  }

  .page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 40px 36px;
  }

  /* L'accent de la page : le corail par défaut (listing), la couleur du
     rôle sur une page rôle, via la palette injectée. Jamais de corail figé
     ici : c'était le piège des couleurs en dur des créas. */
  .page-hero-inner .hero-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--agent-accent);
    margin-bottom: 10px;
  }

  .page-hero-inner h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    color: var(--white);
    line-height: 1.05;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }

  .page-hero-inner h1 span { color: var(--agent-accent); }

  .page-hero-inner > p {
    color: rgba(255,255,255,0.45);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 520px;
  }

  /* Pastilles de rôles : le pictogramme SVG prend la couleur du rôle posée
     sur la pastille ; les textes gardent leur gris clair. */
  .role-pills {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
  }

  .role-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
  }

  .role-pill .pill-name { color: rgba(255,255,255,0.5); }
  .role-pill .pill-count { color: rgba(255,255,255,0.85); font-size: 0.78rem; }

  /* ========== BARRE DE FILTRES ========== */
  .filter-bar {
    background: var(--white);
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 70px;
    z-index: 50;
    transition: transform 0.3s ease;
  }

  /* Passé le sommaire, la barre se retire sous le header (listing.js). */
  .filter-bar.barre-masquee { transform: translateY(-100%); }

  .filter-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    height: 58px;
    gap: 10px;
  }

  .filter-group {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
  }

  .filter-btn:hover { background: #f0f0f0; color: var(--text); }

  /* Actif : fond à la couleur du rôle (variable posée sur le bouton),
     « Tous » retombe sur le sombre de la charte. */
  .filter-btn.active {
    background: var(--role-c, var(--dark));
    color: white;
  }

  .filter-select {
    padding: 7px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    color: var(--text-light);
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    flex-shrink: 0;
  }

  .search-input {
    margin-left: auto;
    padding: 7px 14px 7px 32px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    font-size: 0.78rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: var(--white) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23aaa" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') 10px center no-repeat;
    width: 170px;
    min-width: 110px;
    outline: none;
    transition: border-color 0.2s;
  }

  .search-input:focus { border-color: var(--coral); }
  .search-input::placeholder { color: #bbb; }

  /* ========== GRILLE ========== */
  .agents-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 40px 48px;
    /* Cible de la puce « Les agents » du sommaire. */
    scroll-margin-top: 120px;
  }

  .agents-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

  .agent-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
  }

  .agent-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.08);
    border-color: transparent;
  }

  .agent-card.hidden { display: none; }

  /* Portrait détouré sur le fond couleur de l'agent, cadré tête et buste
     (même parti pris que le bloc « agents du même rôle » des fiches). */
  .agent-card-visual {
    height: 150px;
    overflow: hidden;
  }

  .agent-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
  }

  .agent-card:hover .agent-card-visual img { transform: scale(1.06); }

  .agent-card-body { padding: 14px 14px 12px; }

  .agent-card-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.2;
  }

  .agent-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .agent-card-role {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .difficulty-dots { display: flex; gap: 3px; }

  .difficulty-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ddd;
  }

  .difficulty-dots .dot.filled { background: var(--text); }

  .no-results {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .no-results.show { display: block; }

  /* ========== COMPRENDRE LES AGENTS ========== */
  .content-section {
    background: var(--white);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  .content-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .content-block .section-heading { font-size: 1.7rem; margin-bottom: 16px; }
  .content-block .section-heading span { color: var(--coral); }
  .content-block .section-label { color: var(--coral); }

  .content-block p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.75;
    margin-bottom: 12px;
  }

  .content-block p:last-child { margin-bottom: 0; }

  /* Mini-cartes rôles : la couleur du rôle est posée sur la carte, le
     pictogramme et le titre en héritent, le texte reste gris. */
  .roles-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .role-mini-card {
    background: var(--bg);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
  }

  .role-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  }

  .role-mini-card .rmc-icon { display: block; margin-bottom: 10px; }

  .role-mini-card h3 {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .role-mini-card p {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.5;
  }

  /* Les mini-cartes deviennent des liens dès qu'une page rôle existe. */
  a.role-mini-card { display: block; text-decoration: none; }

  /* Sommaire d'une page rôle (créa duellistes-valorant) : statique, greffé
     sous la grille, il ouvre l'éditorial. Puces générées depuis les H2 du
     contenu ; les couleurs suivent l'accent de la page (palette du rôle). */
  .toc {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 8px;
  }

  .toc-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 12px;
  }

  .toc-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-right: 4px;
  }

  .toc a {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--bg);
    transition: all 0.2s;
  }

  .toc a:hover {
    background: rgba(var(--agent-accent-rgb), 0.12);
    color: var(--agent-accent-dark);
  }

  /* Éditorial des pages rôles : le contenu porte ses propres titres. Le
     TEXTE reste limité à une largeur de lecture confortable, mais le bloc
     lui-même prend toute la largeur : le bandeau visuel 1200×500 s'étale
     ainsi comme dans la créa. */
  .role-editorial p,
  .role-editorial h2,
  .role-editorial h3,
  .role-editorial ul,
  .role-editorial ol,
  .role-editorial blockquote { max-width: 800px; }

  .role-editorial h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.7rem;
    color: var(--dark);
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 32px 0 14px;
    /* Cible du sommaire : ne pas atterrir sous les barres collantes. */
    scroll-margin-top: 140px;
  }

  /* Les mots accentués des H2 prennent la couleur du rôle (créas des pages
     rôles : <em> dans les titres, sans italique). */
  .role-editorial h2 em {
    color: var(--agent-accent);
    font-style: normal;
  }

  .role-editorial h2:first-child { margin-top: 0; }

  .role-editorial h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin: 22px 0 10px;
  }

  .role-editorial p { margin-bottom: 12px; }

  /* Visuel éditorial (créa duellistes-valorant) : pleine largeur de la
     colonne de lecture, coins arrondis comme les cartes du site. */
  .role-editorial img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin-bottom: 26px;
  }

  /* Liens dans l'éditorial : l'accent de la page. */
  .role-editorial a {
    color: var(--agent-accent-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--agent-accent-rgb), 0.3);
  }

  .role-editorial a:hover { border-bottom-color: var(--agent-accent-dark); }

  /* Le roster (créa duellistes-valorant) : la liste devient une grille de
     cartes, une par agent, sans puces. */
  .role-editorial ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0;
    padding: 0;
  }

  .role-editorial ul li {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.6;
    transition: all 0.2s;
  }

  .role-editorial ul li:hover {
    transform: translateX(3px);
    border-color: rgba(var(--agent-accent-rgb), 0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  }

  .role-editorial ul li a { border-bottom: none; }

  /* Citation en exergue (créa duellistes-valorant) : fond sombre de la
     palette, l'amorce en gras prend l'accent de la page. */
  .role-editorial blockquote {
    background: linear-gradient(135deg, var(--agent-gradient-start), var(--agent-gradient-end));
    border-radius: 16px;
    padding: 28px 32px;
    margin: 26px 0;
    position: relative;
    overflow: hidden;
  }

  .role-editorial blockquote::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, var(--agent-glow) 0%, transparent 60%);
    pointer-events: none;
  }

  .role-editorial blockquote p {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,0.75);
    font-size: 0.94rem;
    line-height: 1.7;
    margin: 0;
  }

  .role-editorial blockquote strong { color: var(--agent-accent); }

  /* Tableau de choix (créa duellistes-valorant) : entête sombre, agents
     recommandés en pastilles cliquables à l'accent de la page. */
  .role-editorial table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 22px 0;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
  }

  .role-editorial table th {
    background: var(--dark);
    color: rgba(255,255,255,0.55);
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 0.74rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 14px 24px;
  }

  .role-editorial table td {
    padding: 16px 24px;
    border-top: 1px solid #f2f2f2;
    font-size: 0.86rem;
    color: var(--text);
    vertical-align: middle;
  }

  .role-editorial table tbody tr:first-child td { border-top: none; }
  .role-editorial table tbody tr:hover td { background: rgba(var(--agent-accent-rgb), 0.03); }

  .role-editorial table td a {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    margin: 2px 6px 2px 0;
    border-radius: 6px;
    background: rgba(var(--agent-accent-rgb), 0.12);
    color: var(--agent-accent-dark);
    border-bottom: none;
    transition: all 0.2s;
  }

  .role-editorial table td a:hover {
    background: var(--agent-accent);
    color: white;
  }

  /* Variante pleine largeur : le bloc « les autres rôles » des pages rôles. */
  .roles-mini-grid-large { grid-template-columns: repeat(3, 1fr); }

  @media (max-width: 900px) {
    .roles-mini-grid-large { grid-template-columns: 1fr; }
  }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 1100px) {
    .agents-grid { grid-template-columns: repeat(5, 1fr); }
  }

  @media (max-width: 1024px) {
    .content-section-inner { grid-template-columns: 1fr; gap: 32px; }
    .agents-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  }

  @media (max-width: 768px) {
    .page-hero-inner { padding: 32px 20px 28px; }
    .page-hero-inner h1 { font-size: 2rem; }

    .filter-bar { top: 60px; }
    .filter-bar-inner { padding: 0 12px; height: 52px; gap: 6px; }

    /* Une seule ligne sur mobile : le pictogramme suffit, le libellé du
       rôle est porté par aria-label (décision client 29/07). La recherche
       devient élastique et absorbe la largeur restante. */
    .filter-group { gap: 2px; }
    .filter-btn { padding: 8px 8px; }
    .filter-btn .filter-label { display: none; }
    .filter-select { padding: 7px 5px; font-size: 0.68rem; }
    .search-input { flex: 1 1 auto; width: auto; min-width: 0; margin-left: 0; }

    .agents-section { padding: 20px 16px 40px; }
    .agents-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .agent-card-visual { height: 120px; }
    .agent-card-body { padding: 10px; }
    .agent-card-name { font-size: 0.78rem; }
    .agent-card-role { font-size: 0.56rem; }

    .content-section-inner { padding: 32px 20px; }
    .roles-mini-grid { grid-template-columns: 1fr; }

    /* Sommaire : vertical sur mobile, aligné à gauche, le libellé
       « Sommaire » en tête (décision client 29/07, remplace l'essai en
       défilement horizontal). */
    .toc { padding: 0 16px 8px; }
    .toc-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 14px 16px;
    }
    .toc-label { margin: 0 0 4px; }

    /* Roster de l'éditorial : une colonne. */
    .role-editorial ul { grid-template-columns: 1fr; }

    .role-editorial table th,
    .role-editorial table td { padding: 12px 14px; }
    .role-editorial blockquote { padding: 20px 18px; }
  }

  @media (max-width: 480px) {
    .agents-grid { grid-template-columns: repeat(2, 1fr); }
    .role-pills { gap: 6px; }
  }