/* ============================================================
   UTILITAIRES - FICHE-PAIE.FR
   Classes utilitaires responsive et styles globaux extraits
   de l'ancien /css/tokens.css (Design System, lot 3) : un
   fichier de tokens ne contient que des variables, les regles
   applicables vivent ici.

   Regles reprises a l'identique (selecteurs et valeurs
   inchanges). Charge par templates/layouts/main.php APRES
   /design-system/tokens.css (les classes consomment les
   tokens) et avant /css/style.css.

   Cree le : 24/07/2026 (Design System, lot 3)
   ============================================================ */
/* © 2025-2026 Purple Telecom - Tous droits reserves. */

/* ===========================================
   CLASSES UTILITAIRES RESPONSIVE
   =========================================== */

/* Masquer sur mobile, afficher sur desktop */
.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
}

/* Masquer sur desktop, afficher sur mobile */
.hide-desktop {
    display: block;
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none;
    }
}

/* Container responsive */
.container-responsive {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

@media (min-width: 576px) {
    .container-responsive {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container-responsive {
        max-width: var(--container-md);
    }
}

@media (min-width: 992px) {
    .container-responsive {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1200px) {
    .container-responsive {
        max-width: var(--container-xl);
    }
}


/* === SCROLLBAR GLOBALE - Branding fiche-paie.fr === */
/* Ajout 23/02/2026 - Teal #41bcc9 sur tout le site */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #41bcc9 #f1f5f9;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #41bcc9;
    border-radius: 5px;
    border: 2px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
    background: #36a3b0;
}