html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    min-width: 320px;
    background-color: var(--bs-body-bg);
}

h1:focus {
    outline: none;
}

.bandeau-demo {
    background-color: #fff3cd;
    color: #664d03;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #b00020;
}

/* Calendrier des activités (F21) */
.pastille {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    vertical-align: -.1rem;
}

.pastille-retard {
    background-color: transparent;
    outline: 2px solid #dc3545;
}

.calendrier {
    min-height: 20rem;
}

.calendrier .evenement-retard {
    outline: 2px solid #dc3545;
    outline-offset: 1px;
}

.calendrier[data-echec]::before {
    content: attr(data-echec);
    display: block;
    color: #b00020;
    margin-bottom: .5rem;
}

/* 360 px : barre d'outils du calendrier sur plusieurs lignes, titre plus petit */
@media (max-width: 575.98px) {
    .calendrier .fc-toolbar-title {
        font-size: 1rem;
    }
}

/* Textes saisis sur plusieurs lignes (rapports) : retours à la ligne conservés */
.texte-multiligne {
    white-space: pre-line;
}

/* Grille des personnes touchées (F25) : cases étroites, lisible sur 360 px avec défilement horizontal local */
.grille-effectifs input[type=number] {
    min-width: 3.2rem;
}

.grille-effectifs th,
.grille-effectifs td {
    white-space: nowrap;
}

/* Tableaux de bord (F28, F29) : hauteur fixée par le conteneur, Chart.js s'y adapte */
.graphique {
    position: relative;
}

.indicateur .fs-4 {
    line-height: 1.2;
}

/* Version imprimable : sans menu ni pied de page, cartes non coupées */
@media print {
    header, footer {
        display: none !important;
    }

    .card {
        break-inside: avoid;
    }

    .graphique canvas {
        max-width: 100%;
    }
}

/* Fiche organisation (F12) : onglets sur une ligne, défilement horizontal sur 360 px */
.onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.onglets .nav-link {
    white-space: nowrap;
}

/* 360 px : un libellé masqué (visually-hidden, positionné en absolu) d'un tableau qui défile restait hors du conteneur
   et élargissait la page ; le conteneur devient son bloc de référence. */
.table-responsive,
.onglets {
    position: relative;
}

/* Logo des paramètres (F08) dans la barre de navigation : fond blanc pour un logo sombre ou transparent */
.logo-entete {
    height: 2rem;
    max-width: 6rem;
    object-fit: contain;
    background-color: #fff;
    border-radius: .25rem;
    padding: .125rem;
}

/* Messagerie (F41) : bulles de conversation, alignées selon l'auteur. */
.message-conversation {
    max-width: min(85%, 40rem);
}