/* ==========================================================================
   LES ARMES DE VALORANT (maquette client « armes-valorant »)

   Complète agent.css, qui fournit le reset, le body, le fil d'Ariane et
   l'accordéon de la FAQ, et listing.css, qui fournit le hero, ses pastilles et
   la barre de filtres.

   La maquette déclarait ses propres variables : l'or de l'arsenal est repris
   ici en --arm-*, parce que la dérivation automatique de ColorPalette produit
   un ton trop clair pour du texte sur fond blanc. ColorPalette reste en place
   pour le hero, qui est sombre.

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

  .armes-page {
    --arm-accent: #e6b44d;
    --arm-accent-dark: #9d7118;
    --arm-accent-light: #fbf2da;

    /* Le code couleur des six familles, repris par les cartes et le tableau. */
    --c-pistol: #4cc9b0;
    --c-smg: #5c8ee6;
    --c-shotgun: #e8637e;
    --c-rifle: #e6b44d;
    --c-sniper: #b44ddf;
    --c-heavy: #d9544f;
  }

  /* ===== SECTIONS ===== */
  .armes-page .sec { max-width: 1200px; margin: 0 auto; padding: 42px 40px; scroll-margin-top: 140px; }
  .armes-page .sec.tight { padding-top: 0; }
  .armes-page .sec-label {
    font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--arm-accent-dark); margin-bottom: 8px;
  }
  .armes-page .sec h2 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.68rem; color: var(--dark);
    letter-spacing: 1px; line-height: 1.12; margin-bottom: 14px;
  }
  .armes-page .sec h2 em { color: var(--arm-accent-dark); font-style: normal; }
  .armes-page .sec h3 { font-size: 1rem; font-weight: 700; color: var(--dark); margin: 24px 0 10px; }
  .armes-page .sec p { font-size: 0.9rem; color: var(--text-light); line-height: 1.88; margin-bottom: 14px; max-width: 880px; }
  .armes-page .sec p:last-child { margin-bottom: 0; }
  .armes-page .sec p strong { color: var(--text); font-weight: 600; }

  /* ===== CITATION ===== */
  .pullquote {
    margin: 0 0 26px; padding: 26px 30px; border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--agent-gradient-start), var(--agent-gradient-end));
  }
  .pullquote::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 80% 50%, var(--agent-glow) 0%, transparent 62%);
  }
  .pullquote p {
    position: relative; z-index: 2; color: rgba(255,255,255,0.82) !important;
    font-size: 1.02rem !important; line-height: 1.68 !important; font-style: italic;
    margin: 0 !important; max-width: 780px;
  }
  .pullquote .pq-src {
    position: relative; z-index: 2; display: block; margin-top: 10px; font-style: normal;
    font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--arm-accent); font-weight: 700;
  }

  /* ===== TABLEAU MAÎTRE ===== */
  .armes-page .filter-bar-inner { gap: 8px; }
  /* Légende posée AU-DESSUS du cadre, plus en caption : calibrage des tableaux
     de trouver sa sensibilité et de souris. Le bandeau sombre est ainsi le
     premier élément du cadre arrondi, d'où le border-top retiré. */
  .armes-page .table-note { margin: 22px 0 0; text-align: left; font-size: 0.76rem;
    color: var(--text-light); font-style: italic; }
  .armes-page .table-note + .table-wrap { margin-top: 10px; }
  .armes-page .table-wrap { border: 1px solid #ececec; border-top: 0; border-radius: 16px; overflow: hidden; background: var(--white); margin-top: 20px; }
  .armes-page table { width: 100%; border-collapse: collapse; }
  /* Intitulés de colonnes au calibrage du carrefour : à 0,72 rem et 55 % de
     blanc ils se lisaient mal sur le bleu nuit. */
  .armes-page table thead th {
    background: var(--dark); color: rgba(255,255,255,0.85); font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem; letter-spacing: 1.6px; text-transform: uppercase; text-align: left;
    padding: 13px 18px; font-weight: 400; white-space: nowrap;
  }
  .armes-page table thead th:first-child { color: rgba(255,255,255,0.95); }
  .armes-page table thead th.sortable { cursor: pointer; user-select: none; transition: color 0.2s; }
  .armes-page table thead th.sortable:hover { color: #fff; }
  .armes-page table thead th.sortable::after { content: ' ⇅'; opacity: 0.35; font-size: 0.85em; }
  .armes-page table thead th.asc::after { content: ' ↑'; opacity: 0.9; }
  .armes-page table thead th.desc::after { content: ' ↓'; opacity: 0.9; }
  .armes-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.18s; }
  .armes-page table tbody tr:hover { background: #fffbf0; }
  .armes-page table tbody tr.hidden { display: none; }
  .armes-page table th[scope="row"] { text-align: left; padding: 10px 18px; font-size: 0.86rem; font-weight: 700; color: var(--dark); white-space: nowrap; }
  .armes-page table th[scope="row"] .w-row { display: flex; align-items: center; gap: 13px; }
  .armes-page table td { padding: 12px 18px; font-size: 0.82rem; color: var(--text-light); }
  .armes-page table td.num { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.5px; color: var(--dark); }
  .armes-page table td.price { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.5px; color: var(--arm-accent-dark); }
  .armes-page table td.price.free { color: var(--c-pistol); }
  .armes-page table td.head { font-weight: 700; color: var(--coral-dark); }

  .tag-new {
    display: inline-block; margin-left: 8px; font-size: 0.52rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px;
    background: var(--arm-accent-light); color: var(--arm-accent-dark); vertical-align: 1px;
  }

  /* ===== EMPLACEMENTS DES VISUELS =====
     Les dégradés de famille restent en fond : ils habillent l'attente, et
     continueront de porter le code couleur derrière les PNG transparents que
     le client déposera dans public/images/armes/. Convention de nommage :
       · vignette du tableau      {slug}.png,      320 × 160
       · bandeau de catégorie     cat-{famille}.png, 480 × 200
       · comparatif Vandal/Phantom vandal.png et phantom.png, 640 × 260
     La vue pose la balise dès que le fichier existe, sans autre geste. */
  .w-thumb {
    width: 86px; height: 46px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; position: relative;
  }
  .w-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }
  /* Textes d'attente : passés en sombre le 05/08, les dégradés de famille
     ont été éclaircis (voir la vue) et le blanc translucide n'y lisait plus. */
  .w-thumb .ph {
    font-size: 0.48rem; color: rgba(26,26,46,0.45); text-transform: uppercase;
    letter-spacing: 0.6px; font-weight: 700; text-align: center; line-height: 1.5; padding: 0 4px;
  }

  .cat-art {
    height: 74px; border-radius: 10px; margin-bottom: 13px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .cat-art img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
  .cat-art .ph { font-size: 0.55rem; color: rgba(26,26,46,0.45); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

  .vs-art {
    height: 128px; border-radius: 12px; margin-bottom: 14px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; position: relative;
  }
  .vs-art img { width: 100%; height: 100%; object-fit: contain; padding: 10px; display: block; }
  .vs-art .ph {
    font-size: 0.62rem; color: rgba(26,26,46,0.45); text-transform: uppercase;
    letter-spacing: 1.5px; font-weight: 700; text-align: center; line-height: 1.8;
  }

  .armes-page .no-results { display: none; text-align: center; padding: 40px 20px; color: var(--text-light); font-size: 0.86rem; }
  .armes-page .no-results.show { display: block; }

  /* ===== CATÉGORIES ===== */
  .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
  .cat {
    background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 20px 22px;
    position: relative; overflow: hidden; transition: all 0.22s;
  }
  .cat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
  .cat:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.05); }
  .cat.pistol::before { background: var(--c-pistol); }
  .cat.smg::before { background: var(--c-smg); }
  .cat.shotgun::before { background: var(--c-shotgun); }
  .cat.rifle::before { background: var(--c-rifle); }
  .cat.sniper::before { background: var(--c-sniper); }
  .cat.heavy::before { background: var(--c-heavy); }
  .cat .c-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .cat h3 { margin: 0; font-size: 0.92rem; }
  .cat .c-count { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #bbb; }
  .armes-page .cat p { font-size: 0.8rem !important; line-height: 1.65 !important; margin-bottom: 10px !important; }
  .cat .c-range { font-size: 0.72rem; font-weight: 700; color: var(--arm-accent-dark); }

  /* ===== VERSUS ===== */
  .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
  .vsbox { border-radius: 16px; padding: 22px 24px; border: 1px solid #ececec; background: var(--white); }
  .vsbox.a { border-color: rgba(230,180,77,0.4); background: #fffdf6; }
  .vsbox.b { border-color: rgba(92,142,230,0.3); background: #fafcff; }
  .vsbox .v-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  .vsbox h3 { margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 1px; }
  .vsbox.a h3 { color: var(--arm-accent-dark); }
  .vsbox.b h3 { color: #3f6fc4; }
  .vsbox .v-price { font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; color: #bbb; letter-spacing: 0.5px; }
  .vsbox .v-claim { font-size: 0.78rem; font-weight: 700; margin-bottom: 12px; }
  .vsbox.a .v-claim { color: var(--arm-accent-dark); }
  .vsbox.b .v-claim { color: #3f6fc4; }
  .vsbox ul { list-style: none; display: grid; gap: 9px; }
  .vsbox li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.83rem; color: var(--text-light); line-height: 1.65; }
  .vsbox li::before { flex-shrink: 0; font-size: 0.78rem; line-height: 1.65; font-weight: 700; }
  .vsbox li.p::before { content: '✓'; color: #38a892; }
  .vsbox li.m::before { content: '✕'; color: #d14d67; }

  /* ===== ENCADRÉS ===== */
  .armes-page .callout { margin: 22px 0; padding: 20px 24px; border-radius: 14px; border-left: 4px solid var(--arm-accent); background: var(--arm-accent-light); }
  .armes-page .callout p { margin: 0; font-size: 0.88rem !important; color: #7d5c17 !important; line-height: 1.78 !important; }
  .armes-page .callout p strong { color: #5d4310 !important; }
  .armes-page .callout .co-title {
    display: flex; align-items: center; gap: 9px; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px; color: var(--arm-accent-dark); margin-bottom: 8px;
  }
  .armes-page .callout.info { border-left-color: #5c8ee6; background: #eaf1fc; }
  .armes-page .callout.info p { color: #3d5a80 !important; }
  .armes-page .callout.info p strong { color: #2b4260 !important; }
  .armes-page .callout.info .co-title { color: #3f6fc4; }

  /* ===== RÈGLES D'ACHAT ===== */
  .rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }
  .rule {
    display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--white);
    border: 1px solid #ececec; border-radius: 14px; transition: all 0.22s;
  }
  .rule:hover { transform: translateX(3px); box-shadow: 0 8px 22px rgba(0,0,0,0.04); }
  .rule .r-n {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; background: var(--arm-accent-light);
    color: var(--arm-accent-dark); font-family: 'Bebas Neue', sans-serif; font-size: 0.88rem;
    display: flex; align-items: center; justify-content: center; letter-spacing: 0.5px;
  }
  .rule strong { display: block; font-size: 0.87rem; color: var(--dark); margin-bottom: 4px; }
  .rule span { font-size: 0.8rem; color: var(--text-light); line-height: 1.65; }

  /* ===== SOURCES ===== */
  .srcbox { max-width: 1200px; margin: 0 auto; padding: 0 40px 46px; }
  .srcbox-in { background: var(--white); border: 1px solid #ececec; border-radius: 16px; padding: 22px 26px; }
  .srcbox h3 { font-size: 0.92rem; margin-bottom: 10px; }
  .srcbox p { font-size: 0.8rem; color: var(--text-light); line-height: 1.7; margin: 0; }
  .srcbox a { color: #3f6fc4; text-decoration: none; border-bottom: 1px solid rgba(92,142,230,0.3); }

  /* Étiquette de champ réservée aux lecteurs d'écran. */
  .armes-page .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

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

  @media (max-width: 768px) {
    .armes-page .filter-bar-inner { padding: 0 16px; overflow-x: auto; }
    .armes-page .sec { padding: 30px 20px; }
    .armes-page .sec h2 { font-size: 1.4rem; }
    .cats { grid-template-columns: 1fr; }
    .srcbox { padding: 0 20px 36px; }

    /* Repli du tableau en blocs, comme les tableaux des fiches cartes. */
    .armes-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .armes-page table tbody tr { display: block; padding: 14px 18px; }
    .armes-page table th[scope="row"] { display: block; padding: 0 0 10px; font-size: 0.95rem; white-space: normal; }
    .armes-page table th[scope="row"] .w-row { gap: 14px; }
    .w-thumb { width: 104px; height: 56px; }
    .vs-art { height: 110px; }
    .armes-page table td { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
    .armes-page table td::before {
      content: attr(data-label); font-weight: 700; color: #bbb; font-size: 0.68rem;
      text-transform: uppercase; letter-spacing: 0.5px; align-self: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cat, .rule, .armes-page table tbody tr { transition: none; }
  }