/* ========================================
   APP.CSS - Fichier CSS principal avec styles responsive
   ======================================== */

/* ========================================
   STYLES COMMUNS (Desktop et Mobile)
   ======================================== */

/* Base */
* {
    font-family: Verdana, sans-serif;
}

html {
    height: 100% !important;
}

body {
    text-align: center;
    cursor: auto;
}

body.wait {
    cursor: progress !important;
}

main {
    text-align: center;
}

/* Utility Classes */
.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-white {
    color: #fff;
}

/* Forms */
form {
    text-align: left;
}

label.required:after {
    content: " *";
    color: red;
}

.invalid-feedback ul {
    margin: 0;
    padding: 0;
}

.invalid-feedback li {
    list-style: none;
    font-size: 0.875em;
}

.filter {
    border-color: black;
}

/* Buttons */
/* Texte blanc au survol des boutons colorés. Sauf les boutons qui ont l'allure
   d'un texte sur fond clair : en-têtes de tri (.lien-tri) et pages
   (.page-link) des listes, dont le texte disparaissait au survol. */
.btn:hover,
button:hover:not(.lien-tri):not(.page-link),
input[type="submit"]:hover,
input[type="button"]:hover {
    color: #fff !important;
}

/* Accordion */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
    text-align: left;
}

.accordion-item {
    border: 1px solid white !important;
}

/* Cards */
.card {
    margin-top: 10px;
}

.card-header h2 {
    margin-top: 0.5rem !important;
}

.card-body .input-group-text {
    height: 100%;
}

.card-body .input-group {
    margin-bottom: 10px;
}

.input-group-text i{
     font-size: inherit;
    line-height: 1.5em;
}
/* Auth layout (page login) */
.auth-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
}

/* Login card */
#container_login {
    width: 100%;
    max-width: 420px;
}

#container_login .card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    margin-top: 0;
}

#container_login .card-header {
    padding: 24px 28px 20px;
    text-align: center;
}

#container_login .card-body {
    padding: 24px 28px 28px;
}

.language-selector {
    margin-top: 16px;
    text-align: center;
}

/* Table wrapper avec relief */
.access-table {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Status pills (badges ✔/✖) */
.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/*
 * Barre de défilement du menu. Discrète mais visible sur le fond coloré : un
 * voile blanc sur un voile plus léger. Elle n'apparaît que si le contenu
 * dépasse, « auto » et non « scroll ».
 */
.sidebar .nav,
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-white-rgb), 0.5) rgba(var(--bs-white-rgb), 0.12);
}

.sidebar .nav::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 10px;
}

.sidebar .nav::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: rgba(var(--bs-white-rgb), 0.12);
}

.sidebar .nav::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(var(--bs-white-rgb), 0.5);
    border-radius: 10px;
}

.badge-yes { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-no  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-unk { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }

/* État du dernier envoi d'un courriel, d'après le journal des courriels
   (templates/_etat_envoi.html.twig). Le gris « sans objet » reste .badge-unk.
   Le jaune porte un texte sombre : blanc, il ne se lirait pas. */
.envoi-possible { background: #3b82f6; color: #fff; }
.envoi-en-cours { background: #f59e0b; color: #1f2937; }
.envoi-termine  { background: #10b981; color: #fff; }
.envoi-echec    { background: #ef4444; color: #fff; }

/* Tables */
thead {
    border-bottom: 1px solid black;
}

th {
    text-align: center;
    position: relative;
}

.table td {
    vertical-align: middle;
    text-align: center;
}

/* Table Sorting Indicators */
.tri:before {
    bottom: 50%;
    content: "▲";
}

.tri:after {
    top: 50%;
    content: "▼";
}

.tri:after,
.tri:before {
    position: absolute;
    display: block;
    opacity: 0.125;
    line-height: 9px;
}

.asc:before,
.desc:after {
    opacity: 0.6;
}

/* En-tête triable d'une liste paginée par le serveur : un bouton du formulaire
   de filtre (templates/_tri.html.twig), qui garde exactement l'allure du texte
   d'en-tête — le style natif d'un bouton (fond gris, bordure, marges) est
   entièrement retiré. Son pseudo-élément couvre toute la cellule (th est en
   position: relative) : un clic n'importe où sur l'en-tête, flèches comprises,
   déclenche le tri, comme sur les listes triées dans la page. Le contour de
   focus reste celui du navigateur. */
.lien-tri {
    appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.lien-tri::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ========================================
   STYLES DESKTOP (≥ 769px)
   ======================================== */

@media screen and (min-width: 769px) {
    * {
        font-size: 0.9rem;
    }

    /* Sur écran large, la sidebar s'ouvre au survol : pas de bouton. */
    .sidebar-toggle-btn {
        display: none;
    }

    body {
        /* Marge de page, retranchée des hauteurs d'écran (min-height) : sans
           cela, toute page défilait de deux marges, et une liste à zone de
           défilement en montrait deux barres. */
        --marge-page: 10px;
        padding: var(--marge-page);
    }

    .py-4 {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
    }

    /* Top Banner */
    #topBanner {
        width: calc(100% - 60px);
        margin-left: 60px;
    }

    #topBanner table {
        margin: 0 auto;
    }

    /* Footer */
    footer {
        text-align: center;
        width: 100%;
        padding: 8px 0;
        margin-top: 16px;
    }

    /* Content Wrapper */
    .content-wrapper {
        margin-left: 60px;
        min-height: calc(100vh - 2 * var(--marge-page, 0px));
    }

    /* Navbar */
    .navbar {
        padding: 0;
        margin-bottom: 10px;
        margin-top: 10px;
        border: 0;
    }

    .navbar .btn {
        border-radius: 0;
    }

    .navbar-nav {
        flex-direction: row;
    }

    .navbar-text {
        padding-top: 1rem;
    }

    .container-fluid {
        padding: 0;
        margin: 0;
        width: 100%;
        -webkit-transition: all 0.35s linear 0s;
        transition: all 0.35s linear 0s;
    }

    /* Sidebar Desktop */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 60px;
        background-color: var(--bs-primary);
        transition: width 0.3s ease;
        /* Masque les libellés qui dépassent quand le menu est replié. Le
           défilement vertical est porté par la liste, pas par le menu. */
        overflow: hidden;
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }

    /* L'en-tête reste posé en haut ; c'est la liste qui défile en dessous. */
    .sidebar .sidebar-brand {
        flex-shrink: 0;
    }

    /*
     * Sur un écran bas — ou avec un compte cumulant les rôles, donc toutes les
     * entrées — le menu dépassait la hauteur de la fenêtre et le reste était
     * simplement coupé : la déconnexion devenait inatteignable. La liste défile
     * désormais, et la barre n'apparaît que si elle sert.
     */
    .sidebar .nav {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        /* Bootstrap pose flex-wrap: wrap sur .nav : dans une colonne à hauteur
           contrainte, les entrées passaient dans une SECONDE COLONNE, hors du
           menu, au lieu de déborder vers le bas. Rien ne défilait, et les
           dernières entrées disparaissaient sur le côté. */
        flex-wrap: nowrap;
    }

    /* Sans cela, les entrées — éléments d'un conteneur flex en colonne — se
       compriment pour tenir dans la hauteur disponible au lieu de déborder :
       le menu devient illisible et ne défile jamais. */
    .sidebar .nav > *,
    .sidebar .logout-section > *,
    .sidebar .sidebar-group > * {
        flex-shrink: 0;
    }

    .sidebar.collapsed {
        width: 60px;
    }

    .sidebar.expanded {
        width: 250px;
    }

    /* En-tête du menu : logo et nom de l'application. Le logo occupe la même
       gouttière que les icônes des entrées, si bien que rien ne se décale à
       l'ouverture ; le nom suit le sort des libellés et s'efface avec eux. */
    .sidebar-brand {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(var(--bs-white-rgb), 0.15);
        color: var(--bs-white);
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .sidebar-brand img {
        flex-shrink: 0;
    }

    .sidebar-brand span {
        margin-left: 12px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar.expanded .sidebar-brand span {
        opacity: 1;
    }

    /* .nav-info : le rappel du compte connecté, présenté comme une entrée du
       menu mais sans être activable — il ne reçoit donc aucun état de survol. */
    .sidebar .nav-link,
    .sidebar .nav-info {
        color: var(--bs-white);
        padding: 15px 20px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .sidebar .nav-link:hover {
        background-color: rgba(var(--bs-white-rgb), 0.3);
        color: var(--bs-white) !important;
    }

    .sidebar .nav-link:hover span,
    .sidebar .nav-link:hover i {
        color: var(--bs-white) !important;
    }

    .sidebar .nav-link i,
    .sidebar .nav-info i {
        min-width: 20px;
        margin-right: 15px;
        font-size: 1.2rem;
    }

    .sidebar .nav-link span,
    .sidebar .nav-info span {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar.expanded .nav-link span,
    .sidebar.expanded .nav-info span {
        opacity: 1;
    }

    /* Bandeau du bloc : même traitement que dans EventsManager — petites
       capitales espacées, à peine marquées, pour nommer la section sans peser
       autant qu'une entrée. Il s'efface avec les libellés quand le menu se
       replie, sans quoi il flotterait seul au-dessus des icônes. */
    .sidebar .sidebar-section {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(var(--bs-white-rgb), 0.55);
        padding: 12px 20px 4px;
        white-space: nowrap;
        text-align: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar.expanded .sidebar-section {
        opacity: 1;
    }

    /* Blocs encadrés du menu : le compte — identité, organisation, mot de passe,
       déconnexion — et l'administration — ce qui règle l'emprise plutôt que ce
       qui la fait tourner. Ni l'un ni l'autre ne relèvent du métier, d'où le
       même traitement, un seul jeu de règles pour les deux.
       Teinte du voile plutôt qu'une couleur nommée, pour suivre le thème. */
    .sidebar .logout-section,
    .sidebar .sidebar-group {
        width: 100%;
        margin-top: 12px;
        padding: 6px 0;
        /* Encadré haut et bas : le seul voile ne suffit pas toujours à faire
           lire le bloc comme un cadre, selon la teinte du thème. */
        border-top: 1px solid rgba(var(--bs-white-rgb), 0.35);
        border-bottom: 1px solid rgba(var(--bs-white-rgb), 0.35);
        background-color: rgba(var(--bs-white-rgb), 0.12);
    }

    .sidebar .logout-link {
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }

    .sidebar .logout-link:hover {
        background-color: rgba(var(--bs-white-rgb), 0.3);
        color: var(--bs-white) !important;
    }

    .sidebar .logout-link:hover span,
    .sidebar .logout-link:hover i {
        color: var(--bs-white) !important;
    }

    .badge-sidebar {
        margin-left: auto;
        display: none;
    }

    .sidebar.expanded .badge-sidebar {
        display: inline;
    }

    /* Pas de menu burger sur desktop */
    .sidebar::before {
        display: none;
    }

    .accordion-button {
        padding: 8px !important;
    }

    table {
        border-spacing: 5px;
    }

    .table tbody td {
        padding: 2px;
    }

    .tri:after,
    .tri:before {
        right: 10px;
        font-size: 0.8em;
    }
}

/* ========================================
   STYLES MOBILE (≤ 768px)
   ======================================== */

@media screen and (max-width: 768px) {
    * {
        font-size: 0.85rem;
    }

    body {
        /* Marge de page, retranchée des hauteurs d'écran (min-height) : sans
           cela, toute page défilait de deux marges, et une liste à zone de
           défilement en montrait deux barres. */
        --marge-page: 5px;
        padding: var(--marge-page);
        overflow-x: hidden;
    }

    main {
        padding: 0.5rem !important;
    }

    .py-4 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Top Banner caché sur mobile */
    #topBanner {
        display: none !important;
    }

    /* Footer - Visible et adapté sur mobile */
    footer {
        text-align: center !important;
        position: relative;
        bottom: auto;
        width: 100% !important;
        margin-top: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 5px;
        font-size: 0.75rem;
        display: flex !important; /* Force l'affichage sur mobile */
        justify-content: center !important;
        align-items: center !important;
    }

    footer * {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Correction du centrage du footer sur mobile */
    footer > div {
        margin-left: 0 !important; /* Annule le margin-left négatif */
        margin-right: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    footer table {
        width: auto !important;
        max-width: 200px !important; /* Limite la largeur du tableau */
        margin: 10px auto !important;
        border: 0 !important;
        border-spacing: 5px !important;
        display: table !important;
    }

    footer tr {
        display: table-row !important;
    }

    footer td {
        text-align: center !important;
        padding: 5px !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }

    footer img {
        max-width: 100px !important; /* Réduit la taille du logo sur mobile */
        width: 100px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    footer a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Content Wrapper */
    .content-wrapper {
        margin-left: 0;
        min-height: calc(100vh - 2 * var(--marge-page, 0px));
        width: 100%;
        padding-top: 10px;
    }

    /* Navbar */
    .navbar {
        padding: 0;
        margin-bottom: 5px;
        margin-top: 5px;
        border: 0;
    }

    .navbar .btn {
        border-radius: 0;
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .navbar-nav {
        flex-direction: column;
    }

    .navbar-text {
        padding-top: 0.5rem;
        font-size: 0.85rem;
    }

    .container-fluid {
        padding: 0;
        margin: 0;
        width: 100%;
        -webkit-transition: all 0.35s linear 0s;
        transition: all 0.35s linear 0s;
    }

    /* Sidebar Mobile - À gauche, masquée par défaut */
    .sidebar {
        position: fixed;
        top: 0;
        left: -250px; /* Masquée à gauche par défaut */
        height: 100vh;
        width: 250px;
        background-color: var(--bs-primary);
        transition: left 0.3s ease;
        overflow-y: auto;
        z-index: 1000;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    }

    .sidebar.collapsed {
        left: -250px; /* Masquée */
    }

    .sidebar.expanded {
        left: 0; /* Visible */
    }

    /* Le menu mobile ne se replie pas : il est ouvert ou absent. Le nom est
       donc toujours lisible. */
    .sidebar-brand {
        display: flex;
        align-items: center;
        padding: 14px 15px;
        border-bottom: 1px solid rgba(var(--bs-white-rgb), 0.25);
        color: var(--bs-white);
        font-weight: 700;
        white-space: nowrap;
    }

    .sidebar-brand span {
        margin-left: 12px;
        opacity: 1;
    }

    .sidebar .nav {
        flex-direction: column;
        padding-top: 10px;
    }

    .sidebar .nav-link,
    .sidebar .nav-info {
        color: var(--bs-white);
        padding: 12px 15px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        text-decoration: none;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(var(--bs-white-rgb), 0.1);
    }

    .sidebar .nav-link:hover {
        background-color: rgba(var(--bs-white-rgb), 0.3);
        color: var(--bs-white) !important;
    }

    .sidebar .nav-link:hover span,
    .sidebar .nav-link:hover i {
        color: var(--bs-white) !important;
    }

    .sidebar .nav-link i,
    .sidebar .nav-info i {
        min-width: 25px;
        margin-right: 10px;
        font-size: 1.1rem;
    }

    .sidebar .nav-link span,
    .sidebar .nav-info span {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .sidebar .logout-section .nav-info {
        border-bottom: none;
    }

    /* Bouton Menu burger fixe en haut à gauche */
    .sidebar::before {
        content: none; /* Pas de burger dans la sidebar elle-même */
    }

    /* Le burger est un vrai bouton (templates/base.html.twig) et non un
       pseudo-élément : un ::before ne reçoit pas les appuis, le menu ne s'ouvrait
       donc jamais sur mobile. Mêmes position et apparence qu'auparavant. */
    .sidebar-toggle-btn {
        /* Centrage explicite du glyphe plutôt que par line-height : la cible
           touchée est toute la boîte, le dessin doit occuper son centre. */
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        position: fixed;
        top: 10px;
        left: 10px;
        margin: 0;
        font-size: 2rem;
        line-height: 1;
        color: var(--bs-primary);
        cursor: pointer;
        /* Sous la sidebar (1000), volontairement : le menu ouvert recouvre le
           bouton, qui n'a plus lieu d'être puisqu'on referme en touchant en
           dehors du menu. */
        z-index: 999;
        background: var(--bs-body-bg);
        border: none;
        padding: 0;
        width: 45px;
        height: 45px;
        text-align: center;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Overlay sombre quand le menu est ouvert */
    body::after {
        content: "";
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    /* Afficher l'overlay quand la sidebar est expanded */
    body:has(.sidebar.expanded)::after {
        display: block;
    }

    .sidebar .sidebar-section {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(var(--bs-white-rgb), 0.55);
        padding: 12px 15px 4px;
        white-space: nowrap;
        text-align: center;
    }

    .sidebar .logout-section,
    .sidebar .sidebar-group {
        position: relative;
        bottom: auto;
        width: 100%;
        margin-top: 12px;
        padding: 6px 0;
        border-top: 1px solid rgba(var(--bs-white-rgb), 0.35);
        border-bottom: 1px solid rgba(var(--bs-white-rgb), 0.35);
        background-color: rgba(var(--bs-white-rgb), 0.12);
    }

    .sidebar .logout-section form {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .sidebar .logout-link {
        border: none;
        background: none;
        width: 100%;
        text-align: left !important;
        cursor: pointer;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 12px 15px !important;
    }

    .sidebar .logout-link:hover {
        background-color: rgba(var(--bs-white-rgb), 0.3);
        color: var(--bs-white) !important;
    }

    .sidebar .logout-link:hover span,
    .sidebar .logout-link:hover i {
        color: var(--bs-white) !important;
    }

    .badge-sidebar {
        margin-left: auto;
        display: inline;
    }

    /* Forms - Style form-control-sm pour mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select,
    .form-control,
    .form-select {
        font-size: 14px !important;
        padding: 4px 8px !important;
        height: auto !important;
        min-height: 31px !important;
        line-height: 1.5 !important;
    }

    /* Tom Select sur mobile */
    .ts-wrapper .ts-control {
        font-size: 14px !important;
        padding: 4px 8px !important;
        min-height: 31px !important;
    }

    /* Labels plus petits */
    label {
        font-size: 0.85rem !important;
        margin-bottom: 3px !important;
    }

    /* Input groups */
    .input-group-text {
        font-size: 14px !important;
        padding: 4px 8px !important;
    }

    .invalid-feedback li {
        font-size: 0.75em;
    }

    .filter {
        width: 100%;
    }

    /* Buttons - Taille réduite pour mobile.
       Le burger en est exclu : ces déclarations sont toutes en !important et
       écrasaient sa mise en forme — le glyphe tombait de 2rem à 0,85rem, et
       « margin: 3px 2px » décalait de quelques pixels un bouton pourtant
       positionné en fixe. Restait un carré blanc de 45 px dont la cible visible
       ne coïncidait plus avec la zone réellement touchée. */
    .btn,
    button:not(.sidebar-toggle-btn):not(.logout-link),
    input[type="submit"],
    input[type="button"],
    a.btn {
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
        margin: 3px 2px !important;
        min-width: auto !important;
        min-height: auto !important;
        line-height: 1.5 !important;
        vertical-align: middle !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Correction pour les icônes dans les boutons */
    .btn i,
    a.btn i {
        vertical-align: middle;
        line-height: 1;
        margin-right: 4px;
    }

    /* Liens normaux (non boutons) */
    a:not(.btn) {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    a:not(.btn) i {
        margin-right: 4px;
        vertical-align: middle;
    }

    /* Accordion */
    .accordion-button {
        padding: 10px !important;
        font-size: 0.9rem;
    }

    .accordion-body {
        padding: 10px;
    }

    /* Cards */
    .card {
        margin-bottom: 10px;
    }

    .card-header {
        padding: 8px 12px !important;
    }

    .card-header h2 {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    .card-body {
        padding: 10px !important;
    }

    .card-body .input-group {
        flex-wrap: wrap;
        margin-bottom: 8px !important;
    }

    /* Réduire les marges des formulaires */
    .mb-3 {
        margin-bottom: 8px !important;
    }

    .mt-3 {
        margin-top: 8px !important;
    }

    /* Tables responsive */
    table {
        border-spacing: 3px;
        font-size: 0.75rem;
        width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th {
        padding: 8px 4px;
        font-size: 0.75rem;
    }

    .table td {
        padding: 8px 4px;
        font-size: 0.75rem;
    }

    .table tbody td {
        padding: 4px 2px;
    }

    .tri:after,
    .tri:before {
        right: 5px;
        line-height: 8px;
        font-size: 0.7em;
    }

    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Alertes */
    .alert {
        font-size: 0.85rem;
        padding: 10px;
        margin: 5px 0;
    }

    /* Touch improvements */
    a, button, .btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    * {
        -webkit-overflow-scrolling: touch;
    }
}