/* =============================================================================
   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.
   La charte graphique définitive sera arrêtée par T-07/T-14.
   ============================================================================= */

:root {
    /* Palette sobre provisoire — contraste suffisant pour un usage terrain */
    --couleur-fond: #f4f6f8;
    --couleur-carte: #ffffff;
    --couleur-texte: #1c2b36;
    --couleur-accent: #0d5c46;      /* vert CTC (provisoire) */
    --couleur-ok: #1a7f37;
    --couleur-ko: #b3261e;
    --rayon: 0.75rem;
}

* { box-sizing: border-box; }

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

.entete {
    background: var(--couleur-accent);
    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: #5a6b76;
    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; }
}