/* ==========================================================================
   Dashboard admin — ce qui est propre à cet espace.
   Jetons : tokens.css ; composants communs : composants.css.
   Aucun style inline (CSP style-src 'self').

   Sommaire : coquille et navigation (tiroir mobile / barre latérale) ·
   session · pied de page · connexion · page d'erreur · tableau de bord et
   indicateurs · planning · fiches (bénévole, créneau) · reporting.
   ========================================================================== */

:root {
    --hauteur-barre: 3.75rem;
    --largeur-laterale: 16.5rem;
}

.page {
    max-width: var(--largeur-contenu);
    margin: 0 auto;
    padding: var(--espace-6) var(--espace-4) var(--espace-12);
}

/* --------------------------------------------------------------------------
   Marque
   -------------------------------------------------------------------------- */

.marque {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-3);
    min-height: var(--cible);
    border-radius: var(--rayon);
    color: var(--couleur-texte);
    font-family: var(--police-titre);
    font-weight: var(--graisse-titre);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.marque:hover {
    color: var(--couleur-texte);
    text-decoration: none;
}

.marque-logo {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--rayon);
    background: linear-gradient(135deg, var(--sarcelle-600), var(--sarcelle-800));
    color: #ffffff; /* sur le dégradé sarcelle, dans les deux thèmes */
    box-shadow: var(--ombre-sm);
}

.marque-logo .icone {
    width: 1.25rem;
    height: 1.25rem;
}

.marque-nom span {
    color: var(--couleur-accent);
}

/* --------------------------------------------------------------------------
   En-tête : barre compacte + tiroir (téléphone, tablette)
   -------------------------------------------------------------------------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--couleur-bordure);
    background: var(--couleur-surface);
}

.entete-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-4);
    height: var(--hauteur-barre);
    padding: 0 var(--espace-3) 0 var(--espace-4);
}

/* Le bouton montre « ☰ » fermé, « ✕ » ouvert. */
.bouton-menu[aria-expanded="true"] .icone-ouvrir,
.bouton-menu[aria-expanded="false"] .icone-fermer {
    display: none;
}

.bouton-menu > span {
    display: inline-flex;
}

.tiroir {
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
    padding: var(--espace-3) var(--espace-3) var(--espace-4);
}

/* Avec JavaScript : le menu devient un tiroir qui glisse depuis la gauche,
   sous la barre (le bouton reste visible pour le refermer). */
.js .tiroir {
    position: fixed;
    top: var(--hauteur-barre);
    bottom: 0;
    left: 0;
    width: min(20rem, 86vw);
    overflow-y: auto;
    border-right: 1px solid var(--couleur-bordure);
    background: var(--couleur-surface);
    box-shadow: var(--ombre-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--duree) var(--courbe), visibility 0s linear var(--duree);
}

.js.menu-ouvert .tiroir {
    transform: none;
    visibility: visible;
    transition: transform var(--duree) var(--courbe);
}

.js.menu-ouvert,
.js.menu-ouvert body {
    overflow: hidden;
}

/* Voile derrière le tiroir : un clic dessus referme le menu. */
.voile {
    position: fixed;
    inset: var(--hauteur-barre) 0 0;
    z-index: 40;
    background: var(--couleur-voile);
}

/* --------------------------------------------------------------------------
   Menu principal
   -------------------------------------------------------------------------- */

.menu ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-lien {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
    min-height: var(--cible);
    padding: var(--espace-2) var(--espace-3);
    border-radius: var(--rayon);
    color: var(--couleur-texte-secondaire);
    font-weight: var(--graisse-moyenne);
    text-decoration: none;
    transition: background-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}

.menu-lien .icone {
    color: var(--couleur-texte-discret);
}

.menu-lien:hover {
    background: var(--couleur-surface-survol);
    color: var(--couleur-texte);
    text-decoration: none;
}

/* Page en cours : fond, graisse ET barre d'accent (pas la couleur seule). */
.menu-lien[aria-current="page"] {
    position: relative;
    background: var(--couleur-accent-doux);
    color: var(--couleur-accent-texte);
    font-weight: var(--graisse-forte);
}

.menu-lien[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0.625rem;
    bottom: 0.625rem;
    left: 0;
    width: 3px;
    border-radius: var(--rayon-pilule);
    background: var(--couleur-accent);
}

.menu-lien[aria-current="page"] .icone {
    color: var(--couleur-accent);
}

/* --------------------------------------------------------------------------
   Session (bas du tiroir / de la barre latérale)
   -------------------------------------------------------------------------- */

.session {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--espace-1) var(--espace-3);
    margin-top: auto;
    padding: var(--espace-4) var(--espace-2) 0;
    border-top: 1px solid var(--couleur-bordure);
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--rayon-pilule);
    background: var(--couleur-avatar-fond);
    color: var(--couleur-avatar-texte);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-forte);
}

.session-identite {
    display: grid;
    margin: 0;
    line-height: 1.3;
}

.session-nom {
    overflow: hidden;
    font-weight: var(--graisse-forte);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-role {
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
}

.session-actions {
    display: grid;
    grid-column: 1 / -1;
    gap: 2px;
    margin: var(--espace-2) 0 0;
    padding: 0;
    list-style: none;
}

.session-lien,
.session-actions .bouton {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--espace-3);
    width: 100%;
    min-height: var(--cible);
    padding: var(--espace-2) var(--espace-3);
    border-radius: var(--rayon);
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-moyenne);
    text-decoration: none;
}

.session-lien:hover {
    background: var(--couleur-surface-survol);
    color: var(--couleur-texte);
    text-decoration: none;
}

.session-lien[aria-current="page"] {
    background: var(--couleur-accent-doux);
    color: var(--couleur-accent-texte);
    font-weight: var(--graisse-forte);
}

.session-actions .icone {
    color: var(--couleur-texte-discret);
}

.session-actions .formulaire-bouton {
    display: block;
}

/* --------------------------------------------------------------------------
   Grand écran (≥ 64 rem = 1024 px) : barre latérale fixe.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
    .admin-connecte {
        padding-left: var(--largeur-laterale);
    }

    .entete {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        width: var(--largeur-laterale);
        border-right: 1px solid var(--couleur-bordure);
        border-bottom: 0;
        background: var(--couleur-surface-laterale);
    }

    .entete-barre {
        height: 4.5rem;
        padding: 0 var(--espace-5);
    }

    .bouton-menu {
        display: none;
    }

    .tiroir,
    .js .tiroir {
        position: static;
        flex: 1;
        width: auto;
        overflow-y: auto;
        padding: var(--espace-2) var(--espace-3) var(--espace-5);
        border: 0;
        background: none;
        box-shadow: none;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .menu-lien[aria-current="page"] {
        background: var(--couleur-surface);
        box-shadow: var(--ombre-xs);
    }

    .voile {
        display: none;
    }

    .page {
        padding: var(--espace-10) var(--espace-10) var(--espace-12);
    }
}

/* --------------------------------------------------------------------------
   Connexion (et pages publiques : erreur sans session)
   -------------------------------------------------------------------------- */

.admin-public .page {
    max-width: none;
    padding: 0;
}

.admin-public .page > .alerte {
    max-width: 30rem;
    margin: var(--espace-6) auto 0;
}

.connexion {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
}

.connexion-visuel {
    display: none;
}

.connexion-panneau {
    display: grid;
    place-items: center;
    padding: var(--espace-8) var(--espace-4);
}

.connexion-carte {
    width: 100%;
    max-width: 26rem;
}

.connexion-carte .marque {
    margin-bottom: var(--espace-8);
}

.connexion-carte h1 {
    margin-bottom: var(--espace-1);
}

.connexion-carte .sous-titre {
    margin-bottom: var(--espace-6);
    color: var(--couleur-texte-secondaire);
}

.connexion-carte .formulaire .bouton {
    width: 100%;
    margin-top: var(--espace-1);
}

.connexion-legal {
    margin-top: var(--espace-8);
    padding-top: var(--espace-4);
    border-top: 1px solid var(--couleur-bordure);
}

.connexion-note {
    display: flex;
    gap: var(--espace-2);
    margin: var(--espace-6) 0 0;
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
}

.connexion-note .icone {
    margin-top: 0.15em;
    color: var(--couleur-texte-discret);
}

@media (min-width: 60rem) {
    .connexion {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    /* Panneau d'identité : dégradés CSS seulement (aucune image à charger).
       Couleurs de marque FIXES (sarcelle profonde + blanc), identiques dans
       les deux thèmes : seule exception documentée à la règle des jetons
       sémantiques (contrastes vérifiés : blanc sur sarcelle-900 = 11:1). */
    .connexion-visuel {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--espace-12);
        background:
            radial-gradient(60rem 40rem at 110% -10%, rgb(64 184 161 / 0.35), transparent 60%),
            radial-gradient(40rem 30rem at -20% 120%, rgb(31 154 133 / 0.3), transparent 60%),
            var(--sarcelle-900);
        color: #ffffff;
    }

    .connexion-visuel .marque,
    .connexion-visuel .marque-nom span {
        color: #ffffff;
    }

    .connexion-visuel .marque-logo {
        background: rgb(255 255 255 / 0.14);
        box-shadow: none;
    }

    .connexion-accroche {
        max-width: 30rem;
    }

    .connexion-accroche p:first-child {
        margin: 0 0 var(--espace-6);
        color: #ffffff;
        font-family: var(--police-titre);
        font-size: var(--texte-3xl);
        font-weight: var(--graisse-titre);
        line-height: 1.15;
        letter-spacing: -0.03em;
    }

    .connexion-atouts {
        display: grid;
        gap: var(--espace-3);
        margin: 0;
        padding: 0;
        color: var(--sarcelle-100);
        list-style: none;
    }

    .connexion-atouts li {
        display: flex;
        align-items: center;
        gap: var(--espace-3);
    }

    .connexion-atouts .icone {
        color: var(--sarcelle-300);
    }

    .connexion-pied {
        margin: 0;
        color: var(--sarcelle-200);
        font-size: var(--texte-sm);
    }

    .connexion-carte .marque {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Tableau de bord : indicateurs
   -------------------------------------------------------------------------- */

.indicateurs {
    display: grid;
    /* Deux colonnes dès le téléphone (≥ 2 × 9 rem), quatre sur grand écran. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--espace-4);
    margin-bottom: var(--espace-4);
}

.indicateur {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "valeur icone"
        "libelle libelle";
    align-items: start;
    gap: var(--espace-1) var(--espace-3);
    padding: var(--espace-5);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-lg);
    background: var(--couleur-surface);
    box-shadow: var(--ombre-sm);
    color: var(--couleur-texte);
    text-decoration: none;
    transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe),
        transform var(--duree) var(--courbe);
}

.indicateur:hover {
    border-color: var(--couleur-accent-vif);
    box-shadow: var(--ombre-md);
    color: var(--couleur-texte);
    text-decoration: none;
    transform: translateY(-1px);
}

.indicateur-icone {
    grid-area: icone;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--rayon);
    background: var(--couleur-accent-doux);
    color: var(--couleur-accent);
}

.indicateur .valeur {
    grid-area: valeur;
    font-family: var(--police-titre);
    font-size: var(--texte-3xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.indicateur .libelle {
    grid-area: libelle;
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
}

/* Urgences : fond ambré + icône triangle (le libellé dit déjà « urgences »). */
.indicateur-alerte {
    border-color: var(--alerte-bordure);
    background: var(--alerte-fond);
}

.indicateur-alerte .indicateur-icone {
    background: var(--alerte-icone-fond);
    color: var(--alerte-texte);
}

.indicateur-alerte .valeur,
.indicateur-alerte .libelle {
    color: var(--alerte-texte);
}

.indicateur-alerte:hover {
    border-color: var(--alerte-plein);
}

/* Section titrée d'une page (titre + compteur + phrase d'aide). */
.section {
    margin-top: var(--espace-10);
}

.section-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-2) var(--espace-3);
    margin-bottom: var(--espace-1);
}

.section-entete h2 {
    margin: 0;
}

.section-aide {
    color: var(--couleur-texte-secondaire);
}

/* --------------------------------------------------------------------------
   Planning : navigation entre périodes (contrôle segmenté)
   -------------------------------------------------------------------------- */

.periode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-3);
    margin-bottom: var(--espace-5);
}

.periode-pas {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--couleur-bordure);
    border-radius: calc(var(--rayon) + 3px);
    background: var(--couleur-surface);
    box-shadow: var(--ombre-xs);
}

.periode-pas .bouton {
    min-height: 2.5rem;
    border: 0;
    box-shadow: none;
}

.periode-courante {
    margin: 0;
    padding: 0 var(--espace-3);
    font-weight: var(--graisse-forte);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.periode-retour {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    min-height: var(--cible);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-forte);
}

.occupation {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-3);
    white-space: nowrap;
}

.places-restantes {
    font-weight: var(--graisse-forte);
}

/* Liste des missions : le titre porte aussi le type et le lieu (une colonne
   de moins) et garde de la largeur. Tableaux « .tableau-actions-empilees »
   (missions, personnel) : les actions s'empilent dans une colonne étroite.
   Le tableau tient dès 1024 px, sans bouton coupé. */
@media (min-width: 45rem) {
    .tableau-missions .cellule-titre {
        min-width: 11rem;
    }

    .tableau-actions-empilees .cellule-action .actions {
        flex-direction: column;
        align-items: stretch;
        width: auto;
    }

    .tableau-actions-empilees .cellule-action .actions > *,
    .tableau-actions-empilees .cellule-action .formulaire-bouton .bouton {
        width: 100%;
        justify-content: center;
    }
}

/* Jauge et « 3/8 places » peuvent passer sur deux lignes (colonne étroite
   sur grand écran, carte de 320 px sur téléphone). */
.tableau-missions .occupation {
    flex-wrap: wrap;
    row-gap: var(--espace-1);
}

/* Occupation d'une mission (liste des missions) : jauge + « 12/20 places ». */
.occupation-mission {
    display: grid;
    gap: 2px;
}

.occupation-mission small {
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-xs);
}

/* Planning : occupation cumulée par mission (US 1.3), cartes en grille. */
.par-mission {
    margin-bottom: var(--espace-6);
}

.cartes-occupation {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--espace-3);
    margin: var(--espace-3) 0 0;
    padding: 0;
    list-style: none;
}

.carte-occupation {
    display: grid;
    align-content: start;
    gap: var(--espace-2);
    padding: var(--espace-4) var(--espace-5);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-lg);
    background: var(--couleur-surface);
    box-shadow: var(--ombre-xs);
}

.carte-occupation-titre {
    color: var(--couleur-texte);
    font-weight: var(--graisse-forte);
    text-decoration: none;
}

.carte-occupation-titre:hover {
    color: var(--couleur-accent-texte);
    text-decoration: underline;
}

.carte-occupation-chiffres {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espace-1) var(--espace-3);
    margin: 0;
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
    font-variant-numeric: tabular-nums;
}

.carte-occupation-taux {
    color: var(--couleur-texte);
    font-family: var(--police-titre);
    font-size: var(--texte-xl);
    font-weight: var(--graisse-titre);
}

.carte-occupation meter {
    width: 100%;
}

.carte-occupation .texte-secondaire {
    margin: 0;
}

/* Formulaire de série de créneaux : phrase d'introduction et aperçu. */
.formulaire-intro {
    margin: 0;
    color: var(--couleur-texte-secondaire);
}

.apercu {
    display: flex;
    align-items: flex-start;
    gap: var(--espace-3);
    padding: var(--espace-4);
    border-radius: var(--rayon);
    background: var(--couleur-accent-doux);
    color: var(--couleur-accent-texte);
}

.apercu > .icone {
    flex-shrink: 0;
    margin-top: 0.15em;
}

.apercu p {
    margin: 0;
    font-weight: var(--graisse-moyenne);
}

.apercu-titre {
    display: block;
    font-size: var(--texte-xs);
    font-weight: var(--graisse-forte);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 30rem) {
    .periode-pas {
        display: grid;
        grid-template-columns: auto 1fr auto;
        width: 100%;
    }

    .periode-pas .bouton span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .periode-courante {
        text-align: center;
        white-space: normal;
    }
}


/* --------------------------------------------------------------------------
   Pied de page du dashboard (liens légaux)
   -------------------------------------------------------------------------- */

.pied {
    max-width: var(--largeur-contenu);
    margin: 0 auto;
    padding: 0 var(--espace-4) var(--espace-6);
}

.pied-contenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--espace-6);
    padding-top: var(--espace-3);
    border-top: 1px solid var(--couleur-bordure);
}

.pied-texte {
    margin: 0;
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-xs);
}

@media (min-width: 64rem) {
    .pied {
        padding: 0 var(--espace-10) var(--espace-6);
    }
}

/* --------------------------------------------------------------------------
   Page d'erreur (403, 404, 409, 500)
   -------------------------------------------------------------------------- */

.page-erreur {
    display: grid;
    justify-items: start;
    gap: var(--espace-2);
    max-width: 36rem;
    margin: var(--espace-8) auto;
}

.admin-public .page-erreur {
    padding: 0 var(--espace-4);
}

.page-erreur-code {
    margin: 0;
    color: var(--couleur-accent-texte);
    font-family: var(--police-titre);
    font-size: var(--texte-3xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

.page-erreur h1 {
    margin-bottom: var(--espace-2);
}

.page-erreur .alerte {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Fiches : en-tête d'une personne, colonnes d'information
   -------------------------------------------------------------------------- */

.entete-personne {
    display: flex;
    align-items: center;
    gap: var(--espace-4);
}

.avatar-grand {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    font-size: var(--texte-lg);
}

/* Deux colonnes sur grand écran (fiche bénévole : conditions + disponibilités). */
.colonnes {
    display: grid;
    gap: 0 var(--espace-8);
}

@media (min-width: 64rem) {
    .colonnes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Liste de créneaux horaires (disponibilités hebdomadaires). */
.liste-horaires {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0 var(--espace-5);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-lg);
    background: var(--couleur-surface);
    box-shadow: var(--ombre-sm);
    list-style: none;
}

.liste-horaires li {
    display: flex;
    justify-content: space-between;
    gap: var(--espace-4);
    padding: var(--espace-3) 0;
    font-variant-numeric: tabular-nums;
}

.liste-horaires li + li {
    border-top: 1px solid var(--couleur-bordure);
}

.liste-horaires span:first-child {
    font-weight: var(--graisse-forte);
}

/* Liste de personnes à prévenir (annulation d'un créneau). */
.liste-personnes {
    display: grid;
    gap: var(--espace-2);
    margin: 0 0 var(--espace-5);
    padding: 0;
    list-style: none;
}

.liste-personnes a {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    min-height: var(--cible);
}

/* Liste à puces simple dans une zone de confirmation. */
.liste-points {
    margin: 0 0 var(--espace-5);
    padding-left: 1.25rem;
    color: var(--couleur-texte-secondaire);
}

.liste-points li + li {
    margin-top: var(--espace-1);
}

/* --------------------------------------------------------------------------
   Détail d'un créneau : validation des heures (formulaire en ligne)
   -------------------------------------------------------------------------- */

.validation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espace-2);
    margin: 0;
}

.validation-heures {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
}

.validation-heures label {
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
}

.validation input[type="number"] {
    width: 5.5rem;
}

@media (min-width: 45rem) {
    .validation {
        flex-wrap: nowrap;
    }
}

@media (max-width: 45rem) {
    .validation {
        justify-content: flex-start;
    }

    .validation-heures {
        flex: 1 1 100%;
    }

    .validation .bouton {
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   Reporting : sélecteur d'exercice, financeur (sous-titre de tableau)
   -------------------------------------------------------------------------- */

.selecteur-exercice {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espace-3);
    margin-bottom: var(--espace-6);
}

.selecteur-exercice .champ {
    width: 12rem;
}

.tableau-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espace-1) var(--espace-3);
}

.tableau-titre .texte-secondaire {
    display: inline;
}

/* Liste des bénévoles : NOM en gras, prénom en graisse normale. */
.cellule-titre .prenom {
    font-weight: var(--graisse-normale);
}

/* Indicateur sans lien (reporting) : pas d'effet de survol. */
.indicateur-statique:hover {
    border-color: var(--couleur-bordure);
    box-shadow: var(--ombre-sm);
    transform: none;
}

.indicateur-statique .valeur {
    font-size: var(--texte-xl);
    white-space: nowrap;
}

/* Montants longs sur téléphone : l'icône décorative laisse la place. */
@media (max-width: 30rem) {
    .indicateur-statique .indicateur-icone {
        display: none;
    }

    .indicateur-statique {
        grid-template-areas:
            "valeur valeur"
            "libelle libelle";
    }
}

.selecteur-exercice .entete-meta {
    align-self: center;
    margin: 0;
}

/* Reporting par financeur sur téléphone : une carte par financeur (tbody),
   ses lignes séparées par un filet, sous-total en pied de carte. */
@media (max-width: 45rem) {
    .tableau-groupes tbody {
        display: block;
        margin-bottom: var(--espace-3);
        padding: var(--espace-4);
        border: 1px solid var(--couleur-bordure);
        border-radius: var(--rayon-lg);
        background: var(--couleur-surface);
        box-shadow: var(--ombre-sm);
    }

    .tableau-groupes tbody tr {
        margin: 0;
        padding: var(--espace-2) 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .tableau-groupes tbody tr + tr {
        border-top: 1px solid var(--couleur-bordure);
    }

    .tableau-groupes .ligne-sous-total td:first-child {
        font-weight: var(--graisse-forte);
    }
}

/* Jauge d'occupation dans une carte étroite (320 px) : plus courte. */
@media (max-width: 22rem) {
    .occupation meter {
        width: 4rem;
    }
}

/* Compte du personnel : rôles proposés sur deux colonnes. */
@media (min-width: 40rem) {
    .options-roles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}