.sous-titre {
    color: var(--couleur-texte-clair);
    margin: -10px 0 20px;
}

/* --- Couleurs des graphiques (lues dynamiquement par stats.php) ---
   Centralisées ici comme le reste des couleurs de l'application,
   plutôt qu'en dur dans le JavaScript. */
:root {
    /* Palette générique pour groupes politiques, départements, professions, commissions */
    --graph-couleur-1: #1f3a5f;
    --graph-couleur-2: #2d5286;
    --graph-couleur-3: #4a7cb5;
    --graph-couleur-4: #7ba7d1;
    --graph-couleur-5: #a8c8e6;
    --graph-couleur-6: #5b8c5a;
    --graph-couleur-7: #7fb37e;
    --graph-couleur-8: #c9a227;
    --graph-couleur-9: #d4b85a;
    --graph-couleur-10: #b6553c;
    --graph-couleur-11: #d18567;
    --graph-couleur-12: #8a5c9e;
    --graph-couleur-13: #b088c2;
    --graph-couleur-14: #5c7d8a;
    --graph-couleur-15: #8fadb8;

    /* Palette dédiée Homme/Femme : volontairement bien tranchée,
       distincte de la palette générique ci-dessus. */
    --graph-couleur-homme: #2d5286;
    --graph-couleur-femme: #c9455c;
    --graph-couleur-non-renseigne: #9aa3af;

    /* Palette sémantique pour le statut d'un dossier législatif :
       chaque famille de résultat a sa propre teinte cohérente avec son
       sens, plutôt que des couleurs génériques attribuées par position. */
    --graph-couleur-statut-en-cours: #4a7cb5;         /* bleu neutre : processus toujours ouvert */
    --graph-couleur-statut-promulguee: #1e7e34;       /* vert franc : aboutissement final, le plus positif */
    --graph-couleur-statut-adoptee: #5b8c5a;          /* vert plus doux : adopté à une étape, pas encore promulgué */
    --graph-couleur-statut-adoptee-modif: #8fb573;    /* vert-jaune : adopté mais avec des modifications */
    --graph-couleur-statut-rejetee: #b6553c;          /* rouge-brique : résultat négatif */
}

.grille-graphiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.bloc-large {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .grille-graphiques .bloc-large {
        grid-column: span 2;
    }
}

.conteneur-graphique {
    position: relative;
    height: 320px;
}

.conteneur-graphique-petit {
    height: 240px;
}

.note-graphique {
    font-size: 0.78rem;
    color: var(--couleur-texte-clair);
    margin: 8px 0 0;
}

/* --- Tableau croisé dynamique --- */
.controles-croise {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.controles-croise .champ {
    min-width: 220px;
}

.controles-croise label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--couleur-texte-clair);
    margin-bottom: 4px;
}

.controles-croise select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: #fff;
}

.tableau-croise th, .tableau-croise td {
    text-align: center;
    white-space: nowrap;
}

.tableau-croise th:first-child,
.tableau-croise td.ligne-entete {
    text-align: left;
    white-space: normal;
}

.tableau-croise .cellule-total {
    font-weight: 700;
    background: var(--couleur-fond);
}

.pourcentage-cellule {
    font-size: 0.78rem;
    color: var(--couleur-texte-clair);
    font-weight: 400;
}

.tableau-croise .ligne-total td {
    font-weight: 700;
    background: var(--couleur-fond);
    border-top: 2px solid var(--couleur-primaire);
}