@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap');

/* =============================================================================
   Intra-RH — feuille de style du squelette (contrat T-13)
   Mobile-first : les styles de base visent l'écran de terrain (mobile) ;
   l'adaptation desktop (managers) se fait par media query en augmentation.

   Charte graphique CTC commune appliquée le 15/08/2026 (décision F. Rollet ;
   déjà adoptée par Intra-gestion D-015 et MAISAN D-097) : tokens couleurs,
   police Nunito Sans et dégradé d'en-tête. La qualité esthétique fine des
   composants (densité, mise en page) sera retravaillée avec les maquettes
   de T-TRANS.4 — ce socle ne porte que les tokens.
   ============================================================================= */

:root {
    /* --- Charte CTC commune (tokens de marque) --- */
    --couleur-primaire: #132030;         /* marque — en-tête (dégradé), titres */
    --couleur-primaire-claire: #1c3a52;  /* dégradé d'en-tête, variations douces */
    --couleur-secondaire: #2F5496;       /* accents, bordures, liens */
    --couleur-accent-clair: #4A90D9;     /* accent charte — liens/survol (voir note ci-dessous) */
    --couleur-fond: #F5F6F8;             /* fond de page */
    --couleur-carte: #ffffff;            /* fond des cartes */
    --couleur-texte: #1A1A2E;            /* texte principal */
    --couleur-discret: #6B7280;          /* texte secondaire */

    /* Éléments interactifs (boutons, onglets actifs, focus, bordures de blocs) :
       la secondaire #2F5496 est retenue car du texte blanc sur l'accent charte
       #4A90D9 n'atteint que 3,3:1 (< 4,5:1 WCAG AA) ; #2F5496 donne 7,4:1,
       au niveau de l'ancien vert provisoire #0d5c46 (≈ 8:1). */
    --couleur-accent: #2F5496;

    /* Couleurs sémantiques d'état — hors charte de marque, inchangées
       (contrastes sur le nouveau fond #F5F6F8 : ok ≈ 4,7:1, ko ≈ 6,1:1) */
    --couleur-ok: #1a7f37;
    --couleur-ko: #b3261e;

    /* Tokens partagés des modules — source unique remontée au socle
       (auparavant copiés-collés à l'identique dans chaque CSS de module ;
       valeurs inchangées, couleurs sémantiques d'état comprises) */
    --couleur-bordure: #d8e0e5;
    --couleur-fond-bloc: #fbfdfd;
    --couleur-alerte: #b3261e;
    --couleur-avertissement: #9a6a00;
    --couleur-info: #0b5cad;
    --couleur-mock-fond: #fff7e6;
    --couleur-mock-bordure: #e0b34d;

    --rayon: 0.75rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    line-height: 1.55;
}

.entete {
    background: linear-gradient(135deg, #132030 0%, #1c3a52 100%);
    color: #fff;
    padding: 1.5rem 1rem;
    text-align: center;
}

.entete h1 {
    margin: 0;
    font-size: 1.75rem;
    letter-spacing: 0.02em;
}

.sous-titre {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

.contenu {
    /* Colonne unique en mobile (terrain), élargie et centrée sur desktop */
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.carte {
    background: var(--couleur-carte);
    border-radius: var(--rayon);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.carte h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.etat { font-weight: 600; }
.etat-ok { color: var(--couleur-ok); }
.etat-ko { color: var(--couleur-ko); }
.etat-inconnu { color: inherit; }

.pied {
    text-align: center;
    font-size: 0.85rem;
    color: var(--couleur-discret);
    padding: 1.5rem 1rem;
}

/* Adaptation desktop (managers) — min-width : logique mobile-first */
@media (min-width: 48rem) {
    .entete { padding: 2rem 1rem; }
    .entete h1 { font-size: 2.25rem; }
    .contenu { padding: 1.5rem 1rem; }
}