/* =========================================================================
   MespERP - COUCHE ADAPTATIVE (« responsive »)
   -------------------------------------------------------------------------
   Cette feuille est chargée EN DERNIER, après mespfin.css, les feuilles de
   module et finition.css. Elle ne supprime aucune règle existante et ne
   touche à aucune logique métier : elle ne fait qu'adapter l'affichage à la
   taille réelle de l'écran, depuis la montre connectée (moins de 320 px)
   jusqu'au téléviseur ou au vidéoprojecteur (plus de 2 560 px), en passant
   par le téléphone, la tablette, l'ordinateur portable et l'écran de bureau.

   Principe retenu : l'échelle générale est pilotée par la taille de police de
   la racine (html), puisque toute la charte MespERP est exprimée en rem. Un
   écran de projection agrandit donc l'ensemble de l'interface sans qu'aucune
   page ait besoin d'être réécrite.

   Les règles d'impression demeurent celles de mespfin.css : cette feuille ne
   modifie rien à l'intérieur d'un bloc @media print.
   ========================================================================= */

/* ------------------------------------------------------------------ Bases */

/* Aucun média ne doit déborder de sa colonne, quel que soit l'écran. */
img, svg, video, canvas, iframe {
    max-width: 100%;
}
/* Le logo rappele en tete de la feuille de cloture des etats imprimes porte
   sa hauteur dans la feuille de style d'impression : il est ecarte de la
   remise a zero ci-dessous, faute de quoi il s'imprimait a sa taille
   naturelle et occupait le haut de la derniere feuille. */
img:not(.logo-doc):not(.logo-cloture):not(.pastille img) {
    height: auto;
}

/* Les mots très longs (identifiants, numéros, adresses de courriel) ne
   forcent plus l'apparition d'une barre de défilement horizontale. */
body, .card-body, .table td, .table th, .fil-ariane, .mention-legale {
    overflow-wrap: break-word;
}

/* Conteneur de défilement ajouté automatiquement autour des tableaux larges
   (voir assets/js/adaptatif.js). Le tableau conserve sa présentation ; seul
   son conteneur défile latéralement sur les écrans étroits. */
.table-adaptative {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-adaptative > .table {
    margin-bottom: 0;
}
@media print {
    /* À l'impression, le conteneur s'effface : le tableau reprend sa place. */
    .table-adaptative { overflow: visible !important; }
}

/* Les barres d'outils et d'actions passent à la ligne au lieu de déborder. */
.barre-haute, .barre-outils, .actions-entete, .card-header, .card-footer {
    flex-wrap: wrap;
}

/* =====================================================================
 * TABLETTE ET PETIT PORTABLE (jusqu'à 991,98 px)
 * La barre latérale rétractable est déjà gérée par mespfin.css ; on
 * assouplit ici les grilles et les en-têtes de cartes.
 * =================================================================== */
@media screen and (max-width: 991.98px) {
    .barre-haute {
        gap: .5rem;
        row-gap: .4rem;
    }
    .barre-haute .fil-ariane {
        width: 100%;
        order: 3;
    }
    .card-header .card-title,
    .card-header h2,
    .card-header h5 {
        font-size: .95rem;
    }
    /* Les groupes de boutons d'action occupent toute la largeur disponible. */
    .actions-entete .btn,
    .card-header .btn {
        flex: 1 1 auto;
    }
    /* Les fenêtres modales larges se déploient sur toute la largeur. */
    .modal-xl, .modal-lg {
        max-width: calc(100% - 1.4rem);
    }
}

/* Documents officiels (imprimés A4) consultés sur un écran étroit : le bloc
   défile latéralement au lieu d'élargir toute la page. À l'impression, la
   règle ne s'applique pas et la mise en page A4 reste identique. */
@media screen and (max-width: 991.98px) {
    .document {
        overflow-x: auto;
        padding: 1rem .9rem;
    }
}

/* =====================================================================
 * TÉLÉPHONE (jusqu'à 767,98 px)
 * =================================================================== */
@media screen and (max-width: 767.98px) {
    .contenu {
        padding: .9rem .7rem 2.2rem;
    }
    .card-body {
        padding: .85rem;
    }
    /* Les indicateurs se rangent deux par deux puis un par un. */
    .kpi .valeur {
        font-size: 1.35rem;
    }
    .kpi .icone {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.05rem;
    }
    /* Les sélecteurs d'exercice et de période restent lisibles. */
    .barre-haute .form-select-sm,
    .barre-haute .input-group-sm {
        font-size: .8rem;
    }
    /* Un tableau de saisie reste utilisable : police légèrement réduite. */
    .table {
        font-size: .82rem;
    }
    /* Les onglets nombreux défilent au lieu de se chevaucher. */
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .nav-tabs .nav-link, .nav-pills .nav-link {
        white-space: nowrap;
    }
    /* Les boutons d'un pied de fenêtre modale se répartissent la largeur. */
    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* =====================================================================
 * TRÈS PETIT TÉLÉPHONE (jusqu'à 575,98 px)
 * =================================================================== */
@media screen and (max-width: 575.98px) {
    html {
        font-size: 15px;
    }
    .contenu {
        padding: .75rem .55rem 2rem;
    }
    .barre-haute h1 {
        font-size: .95rem;
    }
    /* Une seule colonne : les paires de champs se superposent. */
    .row > [class*="col-sm-"],
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .modal-dialog {
        margin: .4rem;
    }
    .modal-body {
        padding: .8rem;
    }
    /* Les rangées de boutons et de filtres passent à la ligne plutôt que de
       déborder de l'écran. Les rangées explicitement déclarées « sans
       retour » (flex-nowrap) gardent leur comportement. */
    .d-flex:not(.flex-nowrap):not(.nav):not(.barre-laterale) {
        flex-wrap: wrap;
    }
}

/* =====================================================================
 * MONTRE CONNECTÉE ET ÉCRAN MINIATURE (jusqu'à 419,98 px)
 * Objectif : rester consultable. Les ornements disparaissent, tout se
 * range en une seule colonne et la typographie se resserre.
 * =================================================================== */
@media screen and (max-width: 419.98px) {
    html {
        font-size: 14px;
    }
    .contenu {
        padding: .6rem .45rem 1.6rem;
    }
    /* La barre latérale couvre l'écran lorsqu'on l'ouvre. */
    .barre-laterale {
        width: 86vw;
        left: -88vw;
    }
    .barre-laterale.ouverte {
        left: 0;
    }
    /* Éléments purement décoratifs mis de côté. */
    .barre-haute .fil-ariane,
    .barre-laterale .marque small,
    .kpi .icone {
        display: none;
    }
    .barre-haute h1 {
        font-size: .88rem;
        line-height: 1.25;
    }
    .card-header, .card-footer {
        padding: .5rem .6rem;
    }
    .card-body {
        padding: .6rem;
    }
    /* Une colonne unique, quelle que soit la grille demandée. */
    .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .table {
        font-size: .76rem;
    }
    .table > :not(caption) > * > * {
        padding: .3rem .35rem;
    }
    /* Les libellés longs (grades, matricules, intitulés) se replient. */
    .badge {
        white-space: normal;
    }
    /* Les graphiques suivent la largeur de leur carte. */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    .btn, .form-control, .form-select {
        font-size: .78rem;
    }
    /* Les fenêtres modales occupent tout l'écran. */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
    }
    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
}

/* Écran de moins de 320 px (petites montres) : dernier palier. */
@media screen and (max-width: 319.98px) {
    html {
        font-size: 12.5px;
    }
    .barre-haute .compte .identite,
    .barre-laterale .titre-groupe {
        display: none;
    }
    .table {
        font-size: .72rem;
    }
}

/* Écran bas et couché (montre rectangulaire, téléphone à l'horizontale) :
   la barre supérieure ne doit pas manger la hauteur utile. */
@media screen and (max-height: 480px) and (orientation: landscape) {
    .barre-haute {
        position: static;
        padding-top: .3rem;
        padding-bottom: .3rem;
    }
    .contenu {
        padding-top: .6rem;
    }
}

/* =====================================================================
 * GRAND ÉCRAN DE BUREAU (à partir de 1 600 px)
 * Le contenu est centré et l'échelle générale augmente légèrement.
 * =================================================================== */
@media screen and (min-width: 1600px) {
    html {
        font-size: 17px;
    }
    .contenu {
        max-width: 1560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================================
 * TÉLÉVISEUR ET VIDÉOPROJECTEUR (à partir de 1 920 px)
 * Lecture à distance : typographie et pastilles agrandies, traits plus
 * marqués, contenu centré pour éviter les très longues lignes.
 * =================================================================== */
@media screen and (min-width: 1920px) {
    html {
        font-size: 18.5px;
    }
    .contenu {
        max-width: 1780px;
    }
    .barre-laterale {
        width: 320px;
        flex-basis: 320px;
    }
    .kpi .valeur {
        font-size: 2rem;
    }
    .card {
        border-width: 1.5px;
    }
    .table > thead th {
        font-size: .82rem;
        letter-spacing: .06em;
    }
}

/* Écran de projection ou téléviseur 4K (à partir de 2 560 px). */
@media screen and (min-width: 2560px) {
    html {
        font-size: 21px;
    }
    .contenu {
        max-width: 2240px;
    }
    .barre-laterale {
        width: 360px;
        flex-basis: 360px;
    }
    .card {
        border-width: 2px;
        border-radius: 1rem;
    }
    .table, .form-control, .form-select, .btn {
        font-size: 1rem;
    }
}

/* Pastilles de l'ecran d'accueil : le libelle « STRUCTURES » ne doit pas se
   couper en deux lignes ; la police cede avant le mot. */
.pastille-erp .libelle {
    font-size: .58rem;
    letter-spacing: .01em;
    white-space: nowrap;
}
@media screen and (max-width: 419.98px) {
    .pastille-erp .libelle { font-size: .52rem; }
}