.argument-container {
    padding: var(--space-xl) var(--space-lg) var(--space-lg) var(--space-lg);
    background-color: var(--source-color-white-transparent) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-z2);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.page-title-argument {
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
    text-align: left;
    width: 100%;
}

/* ============================================================
   NOUVEAU MENU PAR CATÉGORIES
   ============================================================ */

/* Titres des Catégories */
.category-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--source-color-accent-four-dark);
    /* CHANGEMENT : 12px = 0.75rem | 30px = 1.875rem */
    margin-bottom: 0.75rem;
    margin-top: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    /* CHANGEMENT : 12px = 0.75rem */
    gap: 0.75rem;
}

.category-title::before {
    content: "";
    display: inline-block;
    /* CHANGEMENT : 20px = 1.25rem */
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    /* CHANGEMENT : 4px = 0.25rem */
    border-radius: 0.25rem;
    flex-shrink: 0;
}

/* Configuration de la Grille */
.argument-grid-layout {
    display: flex !important;
    flex-wrap: wrap !important;
    /* CHANGEMENT : 10px = 0.625rem */
    gap: 0.625rem !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    justify-content: flex-start !important;
}

/* Style des Cartes */
.menu-item-argument {
    /* CHANGEMENT : 12px = 0.75rem */
    flex-basis: calc(25% - 0.75rem);
    flex-grow: 1;
    display: flex;
}

.menu-item-argument a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    /* CHANGEMENT : 2px 10px = 0.125rem 0.625rem */
    padding: 0.125rem 0.625rem !important;
    /* CHANGEMENT : 50px = 3.125rem */
    min-height: 3.125rem;

    background-color: var(--source-color-white-transparent) !important;
    border: 1px solid var(--color-argument-item-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-z2) !important;

    color: var(--color-argument-item) !important;
    font-weight: var(--fw-bold) !important;
    text-decoration: none !important;
}

/* État Survol et Actif */
.menu-item-argument a:hover,
.menu-item-argument a.active {
    background-color: #2d5a27 !important;
    color: #ffffff !important;
    border-color: #2d5a27 !important;
}

/* Barre de Recherche */
#argSearch {
    width: 100%;
    /* CHANGEMENT : 12px = 0.75rem */
    padding: 0.75rem;
    background-color: var(--source-color-white-transparent) !important;
    border: 1px solid var(--color-argument-item-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-z2);
    color: inherit;
}

#argSearchInput {
    /* CHANGEMENT : Utilisation de rem pour le 1.3rem existant */
    font-size: 1.3rem !important;
    font-weight: bold;
    color: var(--source-color-accent-four-dark);
    line-height: 1.5;
}

/* Conteneur de la barre de recherche */
.arg-search-flex-container {
    display: flex;
    /* CHANGEMENT : 8px = 0.5rem | 5px = 0.3125rem */
    gap: 0.5rem;
    align-items: center;
    max-width: 31.25rem; /* 500px */
    margin-bottom: 0.3125rem;
}

#argumentMenu {
    margin-top: 0;
    padding-top: 0;
}

/* Sections de catégories */
.category-section {
    /* CHANGEMENT : 30px = 1.875rem */
    margin-top: 1.875rem;
}

#argumentMenu .category-section:first-child {
    margin-top: 0;
}

/* Message "Aucun résultat" */
#no-result-message {
    color: #ff0000;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    /* CHANGEMENT : 30px = 1.875rem */
    padding: 1.875rem;
}

/* ============================================================
   RESPONSIVITÉ
   ============================================================ */

/* Tablettes (3 colonnes) - 1100px */
@media (max-width: 68.75rem) {
    .menu-item-argument {
        /* On garde le calcul de structure, mais on peut utiliser une variable si existante */
        flex-basis: calc(33.33% - 0.9375rem);
    }
}

/* Petites tablettes / Gros mobiles (2 colonnes) - 768px */
@media (max-width: 48rem) {
    .menu-item-argument {
        flex-basis: calc(50% - 0.9375rem);
    }
}

/* Mobiles (1 colonne) - 576px */
@media (max-width: 36rem) {
    .menu-item-argument {
        flex-basis: 100%;
    }
    .arg-search-flex-container {
        /* On garde le !important seulement si une règle inline ou id écrase la largeur ailleurs */
        max-width: 100% !important;
    }
}