/* =============================================================================
   Intra-RH — Espace prestataire F29 : styles du module (contrat T-48).

   Principes :
   - mobile-first (D-100/D-136) : styles de base = écran de terrain ; desktop
     (poste du service RH / de la comptabilité) via media query ≥ 48 rem ;
   - UX sobre et lisible (D-129) : cartes, tableaux denses mais aérés ;
   - tokens de marque hérités du socle (assets/style.css — charte CTC commune)
     et classes d'en-tête/navigation communes aux modules du portail. Les blocs
     communs (badges, tableaux, boutons, filtres, encarts, toasts) sont REPRIS À
     L'IDENTIQUE des modules voisins : aucune variante de style n'est inventée.
   ============================================================================= */

/* --------------------------------------------------------------------------
   En-tête de module + navigation par onglets
   -------------------------------------------------------------------------- */
.entete-module { text-align: left; padding: 1rem; }
.entete-module h1 { font-size: 1.4rem; }
.entete-module .sous-titre { font-size: 0.85rem; }
.lien-accueil { color: inherit; text-decoration: none; }
.lien-accueil:hover { text-decoration: underline; }

.entete-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    max-width: 72rem;
    margin: 0 auto;
}

.entete-actions { display: flex; align-items: center; gap: 0.5rem; }

.selecteur-role {
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.35rem 0.6rem;
    border-radius: 0.35rem;
}

.nav-module {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 72rem;
    margin: 0.75rem auto 0;
    padding: 0 1rem;
}

.nav-module a {
    padding: 0.35rem 0.7rem;
    border-radius: 0.35rem;
    text-decoration: none;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.12);
}

.nav-module a.actif {
    background: #ffffff;
    color: #132030;
    font-weight: 600;
}

/* Navigation interne au dossier d'un prestataire (3 volets) */
.nav-dossier {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.nav-dossier a {
    padding: 0.3rem 0.65rem;
    border-radius: 0.35rem;
    font-size: 0.85rem;
    text-decoration: none;
    background: rgba(19, 32, 48, 0.08);
    color: inherit;
}

.nav-dossier a.actif { background: #132030; color: #ffffff; font-weight: 600; }

/* --------------------------------------------------------------------------
   Bandeaux (mode MOCK / API, identité de session)
   -------------------------------------------------------------------------- */
.bandeau-mode {
    max-width: 72rem;
    margin: 0.5rem auto;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    background: #fff4e0;
    border: 1px solid #e0b060;
}

.bandeau-mode.mode-api { background: #eaf5ea; border-color: #7fb07f; }
.bandeau-session { background: #eef2f7; border-color: #9fb3c8; }

/* --------------------------------------------------------------------------
   Contenu : cartes, tableaux, champs
   -------------------------------------------------------------------------- */
.contenu-module { max-width: 72rem; margin: 0 auto; padding: 1rem; }

.carte {
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.carte h2 { font-size: 1.05rem; margin: 0 0 0.6rem; color: #132030; }

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin: 0.5rem 0 1rem;
}

.tableau caption {
    text-align: left;
    font-size: 0.8rem;
    color: #5a6b7d;
    padding-bottom: 0.3rem;
}

.tableau th, .tableau td {
    text-align: left;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid #eceff3;
    vertical-align: top;
}

.tableau thead th { background: #f4f6f8; color: #132030; font-size: 0.8rem; }
.colonne-actions { white-space: nowrap; }

.grille-champs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

@media (min-width: 48rem) {
    .grille-champs { grid-template-columns: repeat(2, 1fr); }
    .entete-module h1 { font-size: 1.6rem; }
}

.champ { display: flex; flex-direction: column; gap: 0.15rem; }
.champ .etiquette { font-size: 0.78rem; color: #5a6b7d; }
.champ .valeur { font-size: 0.95rem; }
.champ .valeur.vide { color: #8a98a6; font-style: italic; }
.champ .aide { font-size: 0.75rem; color: #6b7b8c; }

.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin: 0.5rem 0 1rem; }
.filtres .champ { min-width: 16rem; }

.encart {
    border-left: 4px solid #9fb3c8;
    background: #f4f6f8;
    padding: 0.6rem 0.8rem;
    border-radius: 0.3rem;
    font-size: 0.88rem;
    margin: 0.5rem 0;
}

.encart-ok { border-left-color: #4c9a4c; background: #eef7ee; }
.encart-attention { border-left-color: #d09b2c; background: #fdf6e6; }
.encart-erreur { border-left-color: #c05050; background: #fbecec; }

.badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-ok { background: #dff0df; color: #2c6b2c; }
.badge-attention { background: #fbeccd; color: #8a6212; }
.badge-alerte { background: #f9dede; color: #96302f; }
.badge-neutre { background: #e7ebef; color: #4a5866; }
.badge-compteur {
    position: absolute;
    transform: translate(-0.6rem, -0.4rem);
    min-width: 1.1rem;
    text-align: center;
}

.bouton {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 0.35rem;
    border: 1px solid #132030;
    background: #132030;
    color: #ffffff;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}

.bouton.secondaire { background: #ffffff; color: #132030; }
.bouton.petit { padding: 0.2rem 0.5rem; font-size: 0.78rem; }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

.sous-info { font-size: 0.78rem; color: #5a6b7d; }
.chargement { color: #5a6b7d; font-style: italic; }

/* --------------------------------------------------------------------------
   Cloche F25 + notifications (composant partagé — reprise à l'identique)
   -------------------------------------------------------------------------- */
.bouton-cloche {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 0.35rem;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font-size: 1rem;
}

.toasts {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    z-index: 50;
    max-width: 24rem;
}

.toast {
    background: #132030;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.35rem;
    font-size: 0.85rem;
}

.toast.erreur { background: #96302f; }

.pied {
    max-width: 72rem;
    margin: 1rem auto 2rem;
    padding: 0 1rem;
    font-size: 0.8rem;
    color: #5a6b7d;
}