/* Catalogue du matériel - page liste (pattern visuel sorts_v2, layout onglets en haut) */

/* Panneau opaque : le fond image global rendait le texte illisible (recette 2026-07-12).
   margin-top 76px = menu v5 fixed 60px + 16px d'air. */
.equip-page {
    padding: 20px 24px 36px;
    margin: 76px auto 32px;
    background: var(--blue-900-transparent);
    border: 1px solid var(--blue-500);
    border-radius: 10px;
}

.equip-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.equip-title {
    font-family: 'Cinzel', serif; color: var(--gold);
    font-size: 1.5rem; margin: 0; flex: 1 1 auto;
    text-align: left;
}
.equip-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#rechercheEquip {
    background: var(--blue-800); color: var(--blue-100);
    border: 1px solid var(--blue-500); border-radius: 6px;
    padding: 7px 12px; min-width: 240px;
}
.equip-compteur { color: var(--blue-100); opacity: .7; font-size: .9rem; }
.equip-btn {
    display: inline-block; padding: 7px 12px; border-radius: 6px;
    border: 1px solid var(--blue-500); background: var(--blue-700);
    color: var(--blue-100); cursor: pointer; text-decoration: none; font-size: .9rem;
}
.equip-btn:hover { border-color: var(--gold); color: var(--gold); }
.equip-btn-gold { border-color: var(--gold); color: var(--gold); }

/* Onglets de type (sélection unique, en haut) */
.equip-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    border-bottom: 1px solid var(--blue-500);
    padding-bottom: 10px; margin-bottom: 10px;
}
.equip-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.equip-tabs label {
    display: inline-block; padding: 6px 16px; border-radius: 18px;
    border: 1px solid var(--blue-500); background: var(--blue-800);
    color: var(--blue-100); font-family: 'Cinzel', serif; font-size: .88rem;
    cursor: pointer; user-select: none;
}
.equip-tabs label:hover { border-color: var(--gold); }
.equip-tabs input[type="radio"]:checked + label {
    border-color: var(--gold); color: var(--gold);
    background: rgba(245, 197, 66, 0.10);
}

/* Rangée statut (multi, rendue seulement si pertinente) */
.equip-statuts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: .85rem; }
.equip-statuts .lbl { color: var(--blue-100); opacity: .6; margin-right: 4px; }
.equip-statuts input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.equip-statuts label {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    border: 1px solid var(--blue-500); background: var(--blue-800);
    color: var(--blue-100); font-size: .8rem; cursor: pointer; user-select: none;
}
.equip-statuts input[type="checkbox"]:checked + label { border-color: var(--gold); color: var(--gold); }

/* Grille pleine largeur (pas de sidebar) */
.equip-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.equip-card {
    background: var(--blue-800); border: 1px solid var(--blue-500);
    border-radius: 8px; padding: 12px 14px;
    display: flex; flex-direction: column;
}
.equip-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.equip-card-nom {
    font-family: 'Cinzel', serif; color: var(--gold);
    text-decoration: none; font-size: 1.02rem;
}
.equip-card-nom:hover { text-decoration: underline; }
.equip-type-chip {
    font-size: .75rem; color: var(--blue-100); opacity: .75;
    border: 1px solid var(--blue-500); border-radius: 10px; padding: 1px 8px; white-space: nowrap;
}
.equip-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: .85rem; color: var(--blue-100); }
.equip-meta .pill {
    border: 1px solid var(--blue-500); border-radius: 10px;
    padding: 0 8px; font-size: .78rem; opacity: .9;
}
.equip-meta .pill-unique { border-color: var(--gold); color: var(--gold); }
.badge-statut { border-radius: 10px; padding: 0 8px; font-size: .78rem; font-weight: 600; }
.badge-attente { background: rgba(245, 197, 66, 0.15); color: var(--gold); }
.badge-amodifier { background: rgba(220, 80, 80, 0.18); color: var(--red-300); }
.equip-desc { margin: 8px 0 0; font-size: .85rem; color: var(--blue-100); opacity: .8; flex: 1 1 auto; }
.equip-vide { color: var(--blue-100); opacity: .7; padding: 24px; }

/* Zone d'action de la card : prix + emplacement du futur achat (pattern boutiques) */
.equip-card-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(10, 61, 102, 0.6);
}
.equip-prix { font-family: 'Cinzel', serif; color: var(--gold); font-size: .95rem; }
.equip-poids { color: var(--blue-100); opacity: .6; font-size: .8rem; margin-left: 8px; }

/* Encart règles contextuel (catalogue) */
.equip-encarts { margin-bottom: 12px; }
.equip-encart {
    border: 1px solid var(--blue-500); border-left: 3px solid var(--gold);
    border-radius: 6px; background: var(--blue-800);
    padding: 8px 14px; font-size: .9rem;
}
.equip-encart p { margin: 0; color: var(--blue-100); opacity: .9; }
.equip-encart a { color: var(--gold); margin-left: 6px; }

/* Page Règles de l'équipement */
.regles-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.regles-sommaire a {
    padding: 4px 12px; border: 1px solid var(--blue-500); border-radius: 14px;
    background: var(--blue-800); color: var(--blue-100); text-decoration: none; font-size: .88rem;
}
.regles-sommaire a:hover { border-color: var(--gold); color: var(--gold); }
.regles-section { margin-bottom: 28px; scroll-margin-top: 80px; color: var(--blue-100); }
.regles-section h2 { font-family: 'Cinzel', serif; color: var(--gold); border-bottom: 1px solid var(--blue-500); padding-bottom: 6px; text-align: left; }
.regles-section h3 { font-family: 'Cinzel', serif; color: var(--blue-200); font-size: 1rem; margin: 16px 0 6px; text-align: left; }
.regles-section h4, .regles-section h5 { color: var(--blue-100); text-align: left; margin: 12px 0 4px; }
.regles-section p { line-height: 1.5; text-align: left; }
.regles-section table { border-collapse: collapse; margin: 10px 0; }
.regles-section th, .regles-section td { border: 1px solid var(--blue-500); padding: 4px 10px; }

/* Contenu migré 2019 : styles scoppés en remplacement d'armes.css/accordeon.css
   (retirés de la page : ils stylent p/img/table/h3/* GLOBALEMENT et cassaient le menu v5) */
.regles-section .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.regles-section .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.regles-section .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.regles-section .marginTop { margin-top: 16px; }
.regles-section .table-full { width: 100%; }
.regles-section .td-same-height td { height: 35px; }
.regles-section .tr-same-size th { min-width: 75px; }
.regles-section .tr-same-size td { height: 35px; text-align: center; }
.regles-section .tb-check {
    display: inline-block; transform: rotate(45deg);
    height: 14px; width: 7px;
    border-bottom: 4px solid #78b13f; border-right: 4px solid #78b13f;
}
.regles-section .little-armes, .regles-section .little-armures { display: none; }

@media (max-width: 900px) {
    .regles-section .grid-2, .regles-section .grid-3, .regles-section .grid-4 { grid-template-columns: 1fr; }
    .regles-section .big-armes, .regles-section .big-armures { display: none; }
    .regles-section .little-armes, .regles-section .little-armures { display: table; }
}

@media (max-width: 700px) {
    .equip-toolbar-actions { width: 100%; }
    #rechercheEquip { flex: 1 1 auto; min-width: 0; }
}