/* ========================================
   APP.CSS - EventsManager
   Thème unifié basé sur AccessManager
   ======================================== */

/* ========================================
   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;
}


/* 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(#sidebar-toggle):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;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

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

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

.input-group-text i {
    font-size: inherit;
    line-height: 1.5em;
}

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

/* Auth layout (page login) */
.auth-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    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;
}

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

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

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

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

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

/* Force fond blanc et texte sombre sur toutes les cellules (Bootstrap 5.0.x) */
.table > :not(caption) > * > * {
    background-color: #fff;
    color: #212529;
}

/* 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;
}

/* ========================================
   SIDEBAR LAYOUT (eventsmanager)
   ======================================== */
#wrapper {
    min-height: calc(100vh - 2 * var(--marge-page, 0px));
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: var(--bs-primary);
    overflow: hidden;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    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-event-status {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(var(--bs-white-rgb), 0.15);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.event-active { display: flex; align-items: center; gap: 10px; color: var(--bs-white); }
.event-active > i { flex-shrink: 0; opacity: 0.7; }
.event-active-text { opacity: 0; transition: opacity 0.3s ease; overflow: hidden; }
.event-active-label { font-size: 0.62rem; color: rgba(var(--bs-white-rgb), 0.5); text-transform: uppercase; letter-spacing: 0.06em; }
.event-active-name { font-weight: 600; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; }
.event-none { display: flex; align-items: center; gap: 10px; color: var(--bs-warning); font-size: 0.8rem; }
.event-none span { opacity: 0; transition: opacity 0.3s ease; }

.sidebar-nav { list-style: none; padding: 6px 0; margin: 0; overflow-y: auto; flex: 1; }
.sidebar-nav li { margin: 0; }

/* Barre de défilement du menu : plus large et blanche pour ressortir sur le fond bleu */
.sidebar-nav { scrollbar-width: auto; scrollbar-color: var(--bs-white) rgba(var(--bs-white-rgb), 0.15); }
.sidebar-nav::-webkit-scrollbar { width: 20px; }
.sidebar-nav::-webkit-scrollbar-track { background: rgba(var(--bs-white-rgb), 0.15); border-radius: 10px; }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: var(--bs-white); border-radius: 10px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: var(--bs-gray-200); }

.sidebar-section {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(var(--bs-white-rgb), 0.4);
    padding: 12px 20px 4px;
    white-space: nowrap;
    list-style: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar .nav-link {
    color: rgba(var(--bs-white-rgb), 0.85);
    padding: 11px 20px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: background 0.15s;
}
.sidebar .nav-link i { min-width: 20px; margin-right: 15px; font-size: 1.05rem; flex-shrink: 0; }
.sidebar .nav-link span { opacity: 0; transition: opacity 0.3s ease; }
.sidebar .nav-link:hover { background: rgba(var(--bs-white-rgb), 0.15); color: var(--bs-white); }
.sidebar .nav-link.active { background: rgba(var(--bs-white-rgb), 0.22); color: var(--bs-white); font-weight: 600; }
.sidebar .badge-sidebar { margin-left: auto; display: none; }

/* Blocs encadrés du menu : le compte — identité, organisation, mot de passe,
   déconnexion — et l'administration — ce qui règle l'organisation 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. Ils restent dans le fil du
   menu, à leur place de dernières rubriques. Teinte du voile plutôt qu'une
   couleur nommée, pour suivre le thème. */
.sidebar-account,
.sidebar-group {
    margin-top: 8px;
    padding: 4px 0 6px;
    /* Encadré haut et bas : sur le bleu vif du menu, le seul voile ne suffisait
       pas à faire lire le bloc comme un cadre. */
    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-account .sidebar-section,
.sidebar-group .sidebar-section {
    padding-top: 8px;
}

/* Le cadre est un élément de la liste : ses entrées gardent la puce et les
   marges de n'importe quelle autre, sans les retrouver au niveau du cadre. */
.sidebar-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* .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-info {
    color: rgba(var(--bs-white-rgb), 0.85);
    padding: 11px 20px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.sidebar .nav-info i { min-width: 20px; margin-right: 15px; font-size: 1.05rem; flex-shrink: 0; }
.sidebar .nav-info span { opacity: 0; transition: opacity 0.3s ease; overflow: hidden; text-overflow: ellipsis; }

.sidebar .logout-link {
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: rgba(var(--bs-white-rgb), 0.85);
    padding: 11px 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: background 0.15s;
}
.sidebar .logout-link i { min-width: 20px; margin-right: 15px; font-size: 1.05rem; flex-shrink: 0; }
.sidebar .logout-link span { opacity: 0; transition: opacity 0.3s ease; }
.sidebar .logout-link:hover { background: rgba(var(--bs-white-rgb), 0.15); color: var(--bs-white); }

/* ========================================
   PAGE CONTENT
   ======================================== */
#page-content {
    min-height: calc(100vh - 2 * var(--marge-page, 0px));
    background: #f4f6f9;
    display: flex;
    flex-direction: column;
}

.content-alerts {
    padding: 16px 24px 0;
}

.content-body {
    padding: 20px 24px 40px;
    flex: 1;
    text-align: left;
}

/* ========================================
   DATA TABLES (style commun - identique accessmanager)
   ======================================== */
.table-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.app-table {
    width: 100%;
}

.app-table thead tr:nth-child(2) th input,
.app-table thead tr:nth-child(2) th select {
    width: 100%;
}

/* Sticky headers pour les grandes tables */
.app-table.sticky-header thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f8f9fa;
}

.app-table.sticky-header thead tr:nth-child(2) th {
    position: sticky;
    top: 39px;
    z-index: 19;
    background: #f8f9fa;
}

/* Pied de tableau */
.app-table tfoot td {
    font-weight: 700;
    border-top: 2px solid #dee2e6;
}

/* Boutons d'action dans les tableaux */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    padding: 0;
    font-size: 0.78rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    text-decoration: none;
}

.btn-action:hover { opacity: 0.82; transform: scale(1.08); }
.btn-action:disabled, .btn-action[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Variantes de couleur btn-action */
.btn-action-edit      { background: #3b82f6; color: #fff; }
.btn-action-danger    { background: #ef4444; color: #fff; }
.btn-action-shield    { background: #7c3aed; color: #fff; }
.btn-action-eye       { background: #0ea5e9; color: #fff; }
.btn-action-duplicate { background: #8b5cf6; color: #fff; }
.btn-action-test      { background: #f59e0b; color: #fff; }
.btn-action-send      { background: #10b981; color: #fff; }
.btn-action-qa        { background: #0ea5e9; color: #fff; }
.btn-action-ticket    { background: #10b981; color: #fff; }
.btn-action-retry     { background: #3b82f6; color: #fff; }
.btn-action-off       { background: #e5e7eb; color: #9ca3af; }

/* État du dernier envoi d'un courriel, d'après le journal des courriels
   (templates/_etat_envoi.html.twig). Le gris « envoi impossible » reste
   .btn-action-off. 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; }

/* ========================================
   BADGES & STATUTS COMMUNS
   ======================================== */
.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 auto;
}

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

.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.stat-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.color-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.12);
    vertical-align: middle;
}

.checkin-time {
    font-size: 0.78rem;
    color: #065f46;
    font-weight: 600;
}

.error-text {
    font-size: 0.75rem;
    color: #991b1b;
    font-family: monospace;
    max-width: 360px;
    white-space: pre-wrap;
    word-break: break-word;
}

.invite-count {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

/* La pastille « R » en tête de ligne a été retirée : un pseudo-élément CSS ne porte
   pas d'infobulle, et la lettre seule n'apprenait rien. Le référent est désormais
   signalé par une pastille à côté du nom, qui nomme l'invitant au survol
   (templates/event/invites.html.twig). La classe is-referent sert toujours : elle
   colore la ligne et sert de cible aux filtres. */

/* Variante hover rouge (ex: emails en échec) */
.app-table.danger-hover tbody tr:hover { background: #fff5f5 !important; }

/* ========================================
   EVENT SELECT PAGE
   ======================================== */
.event-select-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
    cursor: pointer;
}

.event-select-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    border-color: var(--bs-primary);
}

.event-select-card .card-footer {
    background: transparent;
    border-top: 1px solid var(--bs-border-color);
    padding: 12px 16px;
}

/* ========================================
   IMPORT PAGE
   ======================================== */
.import-wrap {
    max-width: 640px;
    margin: 0 auto;
}

.import-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    overflow: hidden;
}

.import-card .card-header {
    background: var(--bs-primary);
    color: #fff;
    padding: 20px 24px 16px;
    border: none;
}

.import-card .card-header .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.import-card .card-header .card-subtitle {
    font-size: 0.8rem;
    color: rgba(var(--bs-white-rgb), 0.55);
    margin-top: 4px;
}

.import-card .card-body {
    padding: 24px;
    background: #fff;
}

.import-card .card-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 14px 24px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.overwrite-panel {
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 10px;
}

.overwrite-panel .panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #3730a3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.overwrite-panel .form-check { margin-bottom: 5px; }
.overwrite-panel .form-check-label { font-size: 0.83rem; color: #374151; }

.results-section { margin-top: 2rem; }

.results-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-error tbody td { color: #991b1b; background: #fff5f5; }

/* ========================================
   REFERENT NAVIGATION
   ======================================== */
.referent-header h2 {
    color: var(--bs-primary);
}

.referent-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Les deux volets vivent dans un même formulaire : la navigation est faite de
   boutons, pas de liens — d'où la neutralisation des styles propres au bouton. */
.referent-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 8px;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border: 2px solid transparent;
}

.referent-nav-link:hover {
    background: var(--bs-tertiary-bg, var(--bs-secondary-bg));
    color: var(--bs-body-color);
    text-decoration: none;
}

.referent-nav-link.active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    font-weight: 600;
}

/* Volet ouvert parce qu'il porte une erreur de saisie. */
.referent-nav-link-error {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
}

/* ========================================
   EMAIL LOG — STAT CARDS
   ======================================== */
.stat-card {
    background-color: var(--stat-bg) !important;
    border-radius: 0.375rem !important;
    border: none !important;
    overflow: hidden !important;
}

.stat-card .card-body {
    background-color: transparent !important;
    color: #fff !important;
    text-align: center !important;
}

.stat-card .card-title {
    color: #fff !important;
    font-weight: bold !important;
}

.stat-card .card-text {
    color: #fff !important;
}

/* ========================================
   EXPORT DE CRIBLAGE
   ======================================== */
.check-icon {
    display: none;
    margin-right: 5px;
}

.btn-check:checked + label .check-icon {
    display: inline;
}

/* ========================================
   BOOTSTRAP OVERRIDES (global)
   ======================================== */
.card {
    background-color: #fff;
    color: #212529;
    border-color: #dee2e6;
    --bs-card-cap-bg: var(--bs-primary);
    --bs-card-cap-color: #fff;
}

.card-body,
.card-footer {
    background-color: #fff;
    color: #212529;
}

.card-footer.bg-light {
    background-color: #f8fafc !important;
}

.form-control,
.form-select,
.form-check-input {
    background-color: #fff;
    color: #212529;
    border-color: #ced4da;
}

.form-control:focus,
.form-select:focus {
    background-color: #fff;
    color: #212529;
    border-color: #86b7fe;
}

.input-group-text {
    background-color: var(--bs-gray-200);
    color: #212529;
    border-color: #ced4da;
}

.table {
    color: #212529;
    --bs-table-bg: #fff;
    --bs-table-striped-bg: #f8f9fa;
    --bs-table-hover-bg: #eef3ff;
    --bs-table-border-color: #dee2e6;
}

label {
    color: #212529;
}

.accordion-item {
    background-color: #fff;
    color: #212529;
    border-color: #dee2e6 !important;
}

.accordion-body {
    background-color: #fff;
    color: #212529;
}

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

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

    .form-control,
    .form-select,
    .input-group-text {
        font-size: 0.9rem;
    }

    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;
    }

    /* Sidebar Desktop */
    .sidebar {
        width: 60px;
        transition: width 0.3s ease;
    }

    .sidebar.collapsed { width: 60px; }

    .sidebar.expanded { width: 250px; }

    .sidebar.expanded .nav-link span,
    .sidebar.expanded .logout-link span,
    .sidebar.expanded .sidebar-brand span,
    .sidebar.expanded .event-active-text,
    .sidebar.expanded .event-none span,
    .sidebar.expanded .sidebar-section,
    .sidebar.expanded .nav-info span { opacity: 1; }

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

    /* Page content décalé de la sidebar */
    #page-content { margin-left: 60px; }

    /* Pas de burger sur desktop */
    .sidebar-toggle-btn { display: none !important; }
    body::after  { display: none !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;
    }

    .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;
    }

    .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;
    }

    /* Sidebar Mobile — masquée à gauche par défaut */
    .sidebar {
        left: -250px;
        width: 250px;
        transition: left 0.3s ease;
        overflow-y: auto;
        box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    }

    .sidebar.collapsed { left: -250px; }
    .sidebar.expanded  { left: 0; }

    .sidebar .nav-link span,
    .sidebar .logout-link span,
    .sidebar .nav-info span,
    .sidebar-brand span,
    .event-active-text,
    .event-none span,
    .sidebar-section { opacity: 1; }

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

    #page-content { margin-left: 0; padding-top: 55px; }

    /* Burger button */
    .sidebar-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 10px;
        font-size: 38px;
        color: var(--bs-primary);
        cursor: pointer;
        z-index: 999;
        background: var(--bs-body-bg);
        width: 45px;
        height: 45px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        border: none;
        padding: 0;
    }

    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;
    }

    body:has(.sidebar.expanded)::after {
        display: block;
    }

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

    /* Footer */
    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;
        justify-content: center !important;
        align-items: center !important;
    }

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

    footer > div {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    footer table {
        width: auto !important;
        max-width: 200px !important;
        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; 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 */
    .content-body { padding: 10px !important; }

    .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;
    }

    /* Forms */
    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;
    }

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

    label {
        font-size: 0.85rem !important;
        margin-bottom: 3px !important;
    }

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

    .filter { width: 100%; }

    /* Buttons */
    .btn,
    button:not(#sidebar-toggle),
    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;
    }

    #sidebar-toggle {
        font-size: 25px !important;
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .btn i, a.btn i {
        vertical-align: middle;
        line-height: 1;
        margin-right: 4px;
    }

    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; }

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

    /* Tables */
    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 */
    img { max-width: 100%; height: auto; }

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

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