/* ==========================================================================
   LISTING DES CARTES (maquette client « maps-de-valorant »)

   Complète agent.css ET listing.css, qui fournissent déjà tout ce que cette
   page partage avec le listing des agents : le bandeau (.page-hero, .hero-label,
   .role-pills), la barre de filtres collante (.filter-bar, .filter-btn,
   .search-input, .filter-counter), le fil d'Ariane et le bloc SEO à accordéon
   (.seo-section, .seo-block, .seo-accordion-*). Rien de tout cela n'est
   redéclaré ici : seules les vignettes de cartes et les blocs éditoriaux
   propres à cette page le sont.

   L'accent de la page est le BLEU des cartes, injecté en :root par la vue via
   ColorPalette : les variables --agent-* portent donc ici le bleu, exactement
   comme elles portent la couleur du rôle sur une page rôle.
   ========================================================================== */

  /* La barre de filtres de listing.css colle à 70 px, valeur héritée de
     l'ancien en-tête. Sur cette page on la cale sur la hauteur RÉELLE du méga
     menu, comme la barre d'identité de la fiche carte. L'override est local :
     les autres listings gardent leur comportement actuel, leur reprise est un
     sujet à part. */
  .filter-bar { top: var(--hdr-h); }

  /* Le listing des agents tient sur une ligne en réduisant ses boutons de rôle
     à leur pictogramme. Ici les libellés sont du texte (« Toutes mécaniques »,
     « Téléporteurs »…) et ne se réduisent pas : la barre est donc DÉFILANTE
     horizontalement, et c'est elle qui absorbe le débordement plutôt que la
     page. Sans cela, les 8 boutons poussaient le document à 973 px de large
     sur un écran de 390. */
  .filter-bar-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-bar-inner::-webkit-scrollbar { display: none; }
  .filter-group { flex-shrink: 0; }
  .filter-btn { flex-shrink: 0; white-space: nowrap; }
  .filter-sep { width: 1px; height: 26px; background: #e8e8e8; flex-shrink: 0; margin: 0 6px; }
  .filter-bar .search-input { flex-shrink: 0; }
  .filter-bar .filter-counter { flex-shrink: 0; }

  /* ===== GRILLE DES CARTES ===== */
  .maps-section { max-width: 1200px; margin: 0 auto; padding: 32px 40px 8px; }
  .maps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

  .map-card {
    background: var(--white); border: 1px solid #eee; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: inherit; display: flex; flex-direction: column;
    transition: all 0.3s ease;
  }
  a.map-card:hover { transform: translateY(-7px); box-shadow: 0 20px 48px rgba(0,0,0,0.1); border-color: transparent; }
  .map-card.hidden { display: none; }

  .map-visual { position: relative; height: 178px; overflow: hidden; }
  .map-bg {
    width: 100%; height: 100%; position: relative;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.45s ease;
    /* Repli quand la carte n'a pas de visuel : le dégradé dérivé de sa couleur. */
    background: linear-gradient(150deg, var(--mc-1) 0%, var(--mc-2) 55%, var(--mc-3) 100%);
  }
  a.map-card:hover .map-bg { transform: scale(1.07); }
  .map-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .map-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45));
  }
  .map-bg .map-word {
    position: relative; z-index: 2; font-family: 'Bebas Neue', sans-serif;
    font-size: 1.7rem; letter-spacing: 3px; color: rgba(255,255,255,0.2);
  }

  .map-flag { position: absolute; bottom: 12px; left: 14px; z-index: 3; font-size: 1.1rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
  .map-sites {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    padding: 4px 10px; border-radius: 6px; font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: white;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
  }
  .map-sites.three { background: rgba(92,142,230,0.75); }
  .map-new {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    padding: 4px 10px; border-radius: 6px; font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: white;
    background: var(--coral); box-shadow: 0 4px 14px rgba(232,99,126,0.4);
  }

  .map-body { padding: 18px 20px 14px; flex: 1; display: flex; flex-direction: column; }
  .map-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
  .map-place { font-size: 0.72rem; color: var(--agent-accent-dark); font-weight: 600; margin-bottom: 10px; }
  .map-body p { font-size: 0.79rem; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; flex: 1; }

  .map-tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .map-tag {
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    padding: 4px 9px; border-radius: 5px; border: 1px solid #eee; color: var(--text-light); background: var(--bg);
  }
  .map-tag.hi { background: var(--agent-accent-light); color: var(--agent-accent-dark); border-color: transparent; }

  .map-foot {
    padding: 12px 20px; border-top: 1px solid #f2f2f2; background: var(--bg);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .map-foot .mf-year { font-size: 0.68rem; color: #bbb; }
  .map-foot .mf-cta {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--agent-accent-dark);
  }

  .maps-grid .no-results {
    display: none; grid-column: 1 / -1; text-align: center; padding: 56px 20px;
    color: var(--text-light); font-size: 0.9rem;
  }
  .maps-grid .no-results.show { display: block; }
  .maps-grid .no-results .nr-ico { font-size: 2.4rem; display: block; margin-bottom: 12px; }

  /* ===== BLOCS ÉDITORIAUX ===== */
  .article { max-width: 1200px; margin: 0 auto; padding: 44px 40px; }
  .art-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;
  }
  .article h2 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.72rem; color: var(--dark);
    letter-spacing: 1px; line-height: 1.1; margin-bottom: 16px;
  }
  .article h2 em { color: var(--agent-accent-dark); font-style: normal; }
  .article p { font-size: 0.9rem; color: var(--text-light); line-height: 1.9; margin-bottom: 14px; max-width: 880px; }

  .maps-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
  .maps-tips .tip { background: var(--white); border: 1px solid #eee; border-radius: 14px; padding: 24px; transition: all 0.25s; }
  .maps-tips .tip:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.05); }
  .maps-tips .t-n { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--agent-accent); line-height: 1; margin-bottom: 8px; }
  .maps-tips h3 { font-size: 0.9rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
  .maps-tips p { font-size: 0.82rem; color: var(--text-light); line-height: 1.7; margin-bottom: 0; }

  /* ===== BANDEAU CROISÉ VERS LES AGENTS ===== */
  .cross-band { background: linear-gradient(135deg, #0c0812 0%, #1c1226 55%, #241832 100%); position: relative; overflow: hidden; }
  .cross-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 76% 50%, rgba(var(--agent-accent-rgb), 0.18) 0%, transparent 58%);
  }
  .cross-inner {
    position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 44px 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
  }
  .cross-inner h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: white; letter-spacing: 1px; margin-bottom: 8px; }
  .cross-inner h2 em { color: var(--agent-accent); font-style: normal; }
  .cross-inner p { font-size: 0.84rem; color: rgba(255,255,255,0.42); line-height: 1.6; max-width: 620px; margin: 0; }
  .cross-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 10px;
    background: var(--agent-accent); color: white; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none;
    transition: all 0.2s; flex-shrink: 0; box-shadow: 0 6px 24px rgba(var(--agent-accent-rgb), 0.3);
  }
  .cross-btn:hover { background: var(--agent-accent-dark); transform: translateY(-2px); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1024px) {
    .maps-grid { grid-template-columns: 1fr 1fr; }
    .maps-tips { grid-template-columns: 1fr; }
  }

  @media (max-width: 768px) {
    .maps-section { padding: 22px 16px 4px; }
    .maps-grid { grid-template-columns: 1fr; gap: 16px; }
    .article { padding: 32px 20px; }
    .article h2 { font-size: 1.4rem; }
    .cross-inner { flex-direction: column; text-align: center; padding: 32px 20px; }
  }