@font-face {
    font-family: 'bbb-deadly';
    /* src: url("./assets/fonts/Sudoku.ttf") format("TrueType") */
    src: url('../assets/fonts/DEADLY KILLERS.otf') format('OpenType');
}

:root {
    /* Palette WWP - 5 couleurs principales */
    --bbb-noir: #080808;
    --bbb-accent-red: #bc2d12;
    --bbb-accent-orange: #ff3d00;
    --bbb-text: #eaeaea;
    --bbb-border: #1a1a22;

    /* Autres couleurs */
    --black-color: #000000;
    --blue-color: #034173;
    --aqua-dark-color: #01324f;
    --danger-color: #e74c3c;
    --danger-color-rgb: 231, 76, 60;
    --success-color: #27ae60;
    --info-color-rgb: 13, 202, 240;
    --secondary-color: #cf3114;
    --dark-red: #bc2d12;
    --karate-gold: #d4af37;
    --green-color: #059669;
    --violet-color: #9467bd;
    --orange-color: #ff7f0e;
    --jaune-color: #d8d80d;
    --gris-color: #7f7f7f;
    --pink-color: #ff00c8;

    --soft-white: #fafbfc;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --text-muted: #6c757d;
    --success-light: #d1e7dd;
    --warning-light: #fff3cd;
    --info-color: #1295af;

    /* Gradients */
    --gradient-bg: radial-gradient(ellipse at center, #d4af37 0%, #2d1f0f 45%, #18140c 60%);
    /* --gradient-bg: linear-gradient(135deg, #18140c 0%, #2d1f0f 50%, #18140c 100%); */
    --red-gradient: linear-gradient(135deg, #d13114 0%, #bb2e11 100%);
    --blue-gradient: linear-gradient(135deg, #055ca5 0%, #044880 100%);
    --gradient-primary: linear-gradient(135deg, #18140c 0%, #2d1f0f 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
    --gradient-red: linear-gradient(135deg, #cf3114 0%, #bc2d12 100%);
    --gradient-blue: linear-gradient(135deg, #055ca5 0%, #0466c8 100%);
    --gradient-green: linear-gradient(135deg, #059669 0%, #047857 100%);
    --gradient-green-subtile: linear-gradient(135deg, #c9ffde 0%, #c1ffd6 100%);
    --gradient-green-flashy: linear-gradient(135deg, #77ec8f 0%, #52ff52 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

    /*----Re-Bootstrap----*/
    --bs-primary: var(--blue-color) !important;
    --bs-success: var(--success-color);
    --bs-danger: var(--secondary-color);
    --bs-info: var(--info-color);
    --bs-info-rgb: var(--info-color-rgb);
    --bs-warning-rgb: var(--danger-color-rgb);
}

.btn {
    border-radius: 0.25rem !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--blue-color);
    --bs-btn-border-color: var(--blue-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #034a85;
    --bs-btn-hover-border-color: #083c8a;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #083c8a;
    --bs-btn-active-border-color: #09316e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--blue-color);
    --bs-btn-disabled-border-color: var(--blue-color);
}

.bg-primary {
    background-color: var(--blue-color) !important;
}
.bg-bleu {
    background-color: var(--blue-color) !important;
}

.bg-vert {
    background-color: var(--success-color) !important;
}

.bg-rouge {
    background-color: var(--danger-color) !important;
}

.bg-violet {
    background-color: var(--violet-color) !important;
}

.bg-orange {
    background-color: var(--orange-color) !important;
}

.bg-jaune {
    background-color: var(--jaune-color) !important;
}

.bg-gris {
    background-color: var(--gris-color) !important;
}

/* .text-warning{
		color(rgba())
} */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* background: var(--gradient-bg); */
    min-height: 100vh;
    margin: 0;

    /*Ajout suite refont 25-08-25 */
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
    color: var(--black-color);
    line-height: 1.6;
}

[ng-cloak],
.ng-cloak {
    display: none !important;
}

.loading-wait-text {
    color: #6c757d;
    font-style: italic;
    padding: 10px;
}

.text-info {
    color: var(--bs-info) !important;
}

/* --------- ALL ---------- */

.form-title {
    color: #055ca5;
}

.required:after {
    content: ' *';
    color: red;
}

.invalid-feedback {
    display: block;
}

.form-label.bbb {
    font-size: 1.2rem;
}

.dropdown-menu {
    overflow: hidden;
    overflow-y: auto;
    max-height: 250px;
}

.dropzone {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: #777;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background: #fff9ef;
}

.dropzone.image-upload,
.dropzone.dragover.image-upload {
    background-image: url('../assets/icons/image_100_0.15.png');
    background-repeat: no-repeat;
    background-position: center center;
}

.dropzone.dragover {
    border-color: var(--success-color);
    color: #3f51b5;
    background: #b0ff82;
    background: rgba(176, 255, 130, 1);
}

.photo-membre {
    height: 200px;
    width: 200px;
    align-content: center;
    overflow: hidden;
}

.photo-membre img {
    height: 200px;
    margin: -50%;
}

.img-125 {
    width: 125px;
    height: 125px;
}
.img-125-max {
    max-width: 125px;
    max-height: 125px;
}

.crop250 {
    width: 200px;
    height: 200px;
}

.reset-photo-membre {
    position: relative;
    top: 45px;
    left: -32px;
}

/* ----- FICHES GROUPES --- */

.selectdemoSelectHeader {
    /* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */
}

.selectdemoSelectHeader .demo-header-searchbox {
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 0;
}

.selectdemoSelectHeader .demo-select-header {
    box-shadow:
        0 1px 0 0 rgba(0, 0, 0, 0.1),
        0 0 0 0 rgba(0, 0, 0, 0.14),
        0 0 0 0 rgba(0, 0, 0, 0.12);
    padding-left: 16px;
    height: 48px;
    cursor: pointer;
    position: relative;
    display: flex;
    width: auto;
    /* background-color: wheat; */
}

.selectdemoSelectHeader md-content._md {
    max-height: 240px;
}

.selectdemoSelectHeader md-input-container {
    min-width: 112px;
}

.md-select-menu-container.selectdemoSelectHeader {
    top: auto !important;
    transform: translateY(155px) !important;
}

md-fab-speed-dial:not(.md-is-open) .md-fab-actions {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

.picto-membre {
    height: 80px;
    width: 80px;
}

.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ------- FAB SPEED DIAL ----------- */

.fabSpeedDialdemoBasicUsage .text-capitalize {
    text-transform: capitalize;
}

.fabSpeedDialdemoBasicUsage p.note {
    font-size: 1.2rem;
}

.fabSpeedDialdemoBasicUsage .lock-size {
    min-width: 300px;
    min-height: 300px;
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* ----- LOGIN ------------ */
/* label flottant couplé au jaune de lastapass */
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: rgba(255, 255, 255, 0) !important;
}

/* ----- PARAMETRES ------- */

.params.photo-groupe {
    max-height: 150px;
}

.params.logo-groupe {
    max-height: 150px;
}

/* Couleur du placeholder */
input::placeholder {
    /*color: #ffffff !important;*/
    font-style: italic;
    /* italique */
    font-size: 14px;
    /* taille de police */
}

input::-webkit-input-placeholder {
    /* color: #ffffff !important; */
    font-style: italic;
    font-size: 14px;
}

input::-moz-placeholder {
    /* color: #ffffff !important; */
    font-style: italic;
    font-size: 14px;
}

input:-ms-input-placeholder {
    /* color: #ffffff !important; */
    font-style: italic;
    font-size: 14px;
}

input::-ms-input-placeholder {
    /* color: #ffffff !important; */
    font-style: italic;
    font-size: 14px;
}

a {
    text-decoration: none;
}

a.link {
    text-decoration: underline;
}

/* ----------- ALL ------------------ */
.blue-title {
    color: var(--blue-color);
}

.btn-custom {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-custom.sm {
    font-size: smaller;
}

.btn-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-custom:hover::before {
    left: 100%;
}

/* ----------- Login ---------------- */
img.login {
    border-radius: 0.5rem 0 0 0.5rem;
    object-fit: cover;
    /* Remplit la zone, rogner si nécessaire */
    object-position: center;
    /* Centre l'image */
    height: 100%;
    /* Assure que l'image prend toute la hauteur du parent */
}

.header {
    /* height: 5vh; */
    /* background-color: rgb(0,34,64); */
    /* color: white; */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    /* au-dessus des éléments BS comme navbar */
}

.bottom-screen {
    /* --bs-gutter-x:0;
    margin-top:5vh; */
    /* background-color: rgb(0,34,64); */
    margin-top: 70px;
    box-shadow: inset 0 0 15rem rgba(0, 0, 0, 0.5);
}

.text-bbb-light {
    color: rgba(108, 117, 125, 0.5);
}

.logo-bbb {
    position: absolute;
    top: 5px;
    left: 10px;
    height: 60px;
    z-index: 999;
}

.photoUser {
    width: 60px;
    border-radius: 50%;
    position: relative;
    top: 20px;
}

/* .header{
    text-transform: uppercase;
} */
/* .oswald{
    font-family: 'oswald', sans-serif;
} */
.BBB-admin-text-header {
    font-family: 'bbb-deadly', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.2rem;
    /* padding-right: 1rem; */
    padding-left: 5rem;
    border-right: 1px solid rgb(43, 43, 43);
}

.header-container {
    /* border-bottom: 0.1em solid #a1a1a1; */
    /* color: antiquewhite; */

    background-color: #000000;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    height: 70px;
    display: flex;
    align-items: center;
    /* Centre verticalement tous les éléments */
    gap: 10px;
    /* Optionnel : ajoute un espace entre les éléments */
}

/* .card-body-dashboard-bg:hover{
    background-color: #ffc107;
    transition: all ease-in-out 0.6s;
} */
.card-dashboard {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.card-dashboard:hover {
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.8);
    color: oklch(0.76 0.14 205);
}

.card-section {
    border-radius: 0.5em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.315);
    /* border: 1px solid black; */
    padding: 0;
    /* ransition: all ease-in-out 3s; */
}

.card-section-header {
    /* background-color: rgba(0, 0, 0, 0.3); */
    border-radius: 0.5em 0.5rem 0 0;
    /* border-top-right-radius: 1em; */
    /* border: 1px solid black; */
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.315);
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

/* .card-section-content{
    background-color: rgba(0,0,0,0.15);
    padding: 1rem;

} */

.opaque015 {
    background-color: rgba(0, 0, 0, 0.15);
}

.opaque030 {
    background-color: rgba(0, 0, 0, 0.3);
}

.opaque085 {
    background-color: rgba(0, 0, 0, 0.85);
}

/* ----------------- Table Transparent ------------------- */

.table-transparent {
    --bs-table-bg: transparent !important;
    /* --bs-table-color: white !important; */
    /* --bs-border-width: 0;
    --bs-table-hover-bg:rgba(0,64,255,0.14); */
}

.text-overflow-ellispis {
    width: 10vw;
    white-space: nowrap;
    /* Pas de retour à la ligne */
    overflow: hidden;
    /* Masquer le texte débordant */
    text-overflow: ellipsis;
    /* Ajouter les "..." */
}

/* ----------------- Toast Boostrap ----------------------- */
.toast {
    z-index: 2;
}

/*------------------Modal Boostrap ------------------------ */

/* ----------------- Create Salle : Map -------------------- */

#mapDetail {
    height: 450px;
    width: 100%;
    margin: auto;
}

.greenMarker {
    background-image: url(https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png);
    filter: hue-rotate(-70deg);
    width: 25px;
    height: 41px;
}

.activeMarker {
    animation: 0.7s linear 0s infinite alternate markerRedBlink;
}

@keyframes markerRedBlink {
    0% {
        filter: hue-rotate(0deg);
    }

    49% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(155deg);
    }

    100% {
        filter: hue-rotate(155deg);
    }
}

.min-h-450 {
    min-height: 450px;
}

.main-screen {
    height: 100%;
    overflow-y: auto;
    /* Permet le défilement vertical */
}

.bbb-nav-item a {
    color: grey;
}

.bbb-nav-item:hover a {
    color: chocolate;
    transition: color ease-in-out 0.3s;
}

.bbb-nav-item.active a {
    color: white;
}

.bbb-nav-item.active {
    /*  border: darkblue 2px solid; */
    background-color: darkblue;
    transition: all 0.3s ease-in-out;
}

.bbb-nav-item.completed {
    background-color: #009300 !important;
}

.bbb-nav-item.completed a {
    color: whitesmoke;
}

.bbb-nav-item.invalid {
    background-color: crimson;
}

.bbb-nav-item.invalid a {
    color: whitesmoke;
}

.bbb-nav-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centre horizontalement le rond + le titre */
    text-align: center;
    position: relative;
    /* nécessaire pour placer la ligne */
}

.bbb-nav-item {
    background-color: lightgrey;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    /* centre le chiffre */
    justify-content: center;
    position: relative;
    /* pour que la ligne parte du centre */
    z-index: 1;
    /* pour que la bulle passe au-dessus de la barre */
}

/* Ligne de connexion : ajoutée à droite de chaque bulle sauf la dernière */
.bbb-nav-wrapper:not(:last-child) .bbb-nav-item::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    /* milieu vertical de la bulle (3.5rem / 2) */
    left: calc(50% + 1.5rem);
    /* centre + rayon de la bulle */
    width: var(5.4rem, 2rem);
    /* longueur de la barre = correspond au gap */
    height: 2px;
    background-color: #ccc;
    z-index: 0;
}

.nav-tabs {
    --bs-nav-tabs-border-color: #000000;
}

blockquote {
    background-color: rgb(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px;
    font-style: italic;
    font-size: small;
}

/* --------------- Test Edit Salle ------------- */

.is-changed {
    background-color: #fffdf5;
    border-left: 4px solid #ffc107;
}

.suggestion-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1050;
}

/* ---------------- Gestion de validation de form Angular -------- */
.errorsForm {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 20vw;
    overflow-y: auto;
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1050;
    margin: 15px;
    border-radius: 5px;
}

/* =================================================================
   RESPONSIVE - Écrans <= 1440px (laptops standards, 1366x768, etc.)
   ================================================================= */

/* Écrans moyens (1200px - 1440px) */
@media (max-width: 1440px) {
    .header-container {
        gap: 5px;
    }

    .BBB-admin-text-header {
        font-size: 2rem;
        padding-left: 5.25rem;
        letter-spacing: 0.2rem;
    }

    .modern-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .navbar-brand {
        font-size: 0.9rem;
        margin-right: 0.5rem;
    }
}

/* Écrans plus petits (992px - 1200px) */
@media (max-width: 1200px) {
    .header-container {
        height: 60px;
    }

    .logo-bbb {
        height: 50px;
    }

    .BBB-admin-text-header {
        font-size: 1.5rem;
        padding-left: 3.5rem;
        letter-spacing: 0.1rem;
        border-right: none;
        padding-right: 0.5rem;
    }

    .modern-tabs .nav-link {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }

    /* Cacher les icônes dans la nav pour gagner de la place */
    .modern-tabs .nav-link i {
        display: none;
    }

    .navbar-brand i {
        display: none;
    }

    .bottom-screen {
        margin-top: 60px;
    }

    /* Section utilisateur plus compacte */
    .header-right .text-uppercase {
        font-size: 0.8rem;
    }

    .header-right .btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }
}

/* Tablettes et petits laptops (< 992px) - navbar collapse */
@media (max-width: 991px) {
    .header-container {
        height: auto;
        min-height: 50px;
        flex-wrap: wrap;
        padding: 5px 10px;
    }

    .BBB-admin-text-header {
        font-size: 1.2rem;
        padding-left: 3rem;
    }

    .logo-bbb {
        height: 40px;
    }

    .navbar {
        width: 100%;
        margin-top: 5px;
    }

    .bottom-screen {
        margin-top: 110px;
    }
}

/* =====================================================================
   AVATAR STACK — contacts rapides sur fiches orgas
   ===================================================================== */
.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-stack .av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-left: -10px;
    cursor: default;
    text-transform: uppercase;
    position: relative;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.avatar-stack .av:first-child {
    margin-left: 0;
}

.avatar-stack .av:hover {
    transform: translateY(-4px);
    z-index: 99 !important;
}

.avatar-stack .av-more {
    background: #6c757d;
    font-size: 10px;
    cursor: default;
}

.avatar-stack .av-cta {
    background: transparent !important;
    border: 2px dashed #adb5bd !important;
    color: #6c757d !important;
    font-size: 18px;
    cursor: pointer;
    box-shadow: none;
}

.avatar-stack .av-cta:hover {
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    background: #e8f0fe !important;
    transform: translateY(-4px);
}

/* Popup contact sur clic avatar */
.av-popup-anchor {
    position: relative;
    cursor: pointer;
}

.av-popup {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 14px 16px 12px;
    width: 210px;
    z-index: 500;
    font-size: 13px;
    color: #212529;
    white-space: normal;
    pointer-events: all;
}

.av-popup::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.08));
}

.av-popup .av-popup-name {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
    color: #1a1a2e;
}

.av-popup .av-popup-role {
    color: #6c757d;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.av-popup .av-popup-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: #495057;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.av-popup .av-popup-line i {
    width: 13px;
    flex-shrink: 0;
    color: #adb5bd;
}

/* Google Places Autocomplete — doit passer au-dessus des modales (z-index > 2001) */
.pac-container {
    z-index: 2100 !important;
}

/* =============================================================
   DASHBOARD ACCUEIL — KPIs + Prochains événements
   ============================================================= */

.dashboard-accueil-wrapper {
    padding: 0.75rem 1rem;
    height: 100%;
    overflow-y: auto;
}

/* Loader centré */
.dashboard-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

/* --- KPI Cards --- */
.dashboard-kpi-card {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
    border-left: 4px solid transparent;
    min-height: 76px;
}

.dashboard-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-kpi-card--roster {
    border-left-color: var(--secondary-color);
}
.dashboard-kpi-card--orgas {
    border-left-color: var(--blue-color);
}
.dashboard-kpi-card--mois {
    border-left-color: var(--success-color);
}
.dashboard-kpi-card--next {
    border-left-color: var(--karate-gold);
}

.dashboard-kpi-icon {
    font-size: 1.6rem;
    width: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-kpi-card--roster .dashboard-kpi-icon {
    color: var(--secondary-color);
}
.dashboard-kpi-card--orgas .dashboard-kpi-icon {
    color: var(--blue-color);
}
.dashboard-kpi-card--mois .dashboard-kpi-icon {
    color: var(--success-color);
}
.dashboard-kpi-card--next .dashboard-kpi-icon {
    color: var(--karate-gold);
}

.dashboard-kpi-body {
    min-width: 0;
}

.dashboard-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1a1a2e;
}

.dashboard-kpi-value--date {
    font-size: 1.35rem;
}

.dashboard-kpi-value--none {
    font-size: 1.4rem;
    color: var(--text-muted);
}

.dashboard-kpi-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Section prochains événements --- */
.dashboard-events-section {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 0.875rem 1rem;
}

.dashboard-events-header {
    border-bottom: 1px solid var(--medium-gray);
    padding-bottom: 0.5rem;
}

.dashboard-events-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.dashboard-events-empty {
    color: var(--text-muted);
}

.dashboard-events-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.4rem 0.5rem;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.dashboard-events-table tbody td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
    font-size: 0.83rem;
}

.dashboard-event-row {
    cursor: pointer;
}

.dashboard-event-row:hover td {
    background-color: var(--light-gray);
}

.dashboard-event-date {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-event-nom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    display: inline-block;
}

.dashboard-event-type-badge {
    font-size: 0.68rem;
    padding: 0.2em 0.5em;
    white-space: nowrap;
}

.dashboard-badge-groupe {
    font-size: 0.68rem;
    padding: 0.2em 0.45em;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Colonnes largeurs fixes */
.dashboard-events-table .col-date {
    width: 100px;
}
.dashboard-events-table .col-type {
    width: 90px;
}
.dashboard-events-table .col-nom {
    min-width: 140px;
}
.dashboard-events-table .col-lieu {
    min-width: 110px;
}
.dashboard-events-table .col-groupes {
    min-width: 130px;
}
.dashboard-events-table .col-actions {
    width: 28px;
}

/* --- Raccourcis bas --- */
.dashboard-shortcut-card {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-size: 0.88rem;
    transition:
        box-shadow 0.15s ease,
        background 0.15s ease;
    text-decoration: none;
    color: inherit;
}

.dashboard-shortcut-card:hover {
    background: var(--light-gray);
    box-shadow: var(--shadow-md);
}

/* Responsive — 1366x768 : tout reste lisible */
@media (max-width: 992px) {
    .dashboard-kpi-value {
        font-size: 1.35rem;
    }

    .dashboard-event-nom {
        max-width: 140px;
    }
}

@media (max-width: 768px) {
    .dashboard-events-table .col-lieu,
    .dashboard-events-table .col-groupes {
        display: none;
    }
}

/* =========================================================================
   RECHERCHE GLOBALE — Navbar
   ========================================================================= */
.navbar-search-wrapper {
    width: 220px;
}

.navbar-search-input-group {
    position: relative;
}

.navbar-search-input {
    padding-right: 2rem;
    border-radius: 6px;
    font-size: 0.8125rem;
}

.navbar-search-icon {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6c757d;
    font-size: 0.75rem;
}

.navbar-search-spinner {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #dee2e6;
    border-top-color: #8f0000;
    border-radius: 50%;
    animation: navbar-spin 0.6s linear infinite;
}

@keyframes navbar-spin {
    to {
        transform: rotate(360deg);
    }
}

.navbar-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 320px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1060;
    max-height: 420px;
    overflow-y: auto;
}

.navbar-search-group-header {
    padding: 0.4rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
}

.navbar-search-item {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    gap: 0.5rem;
    transition: background 0.12s;
}

.navbar-search-item:hover,
.navbar-search-item.active {
    background: #fff5f5;
}

.navbar-search-item-icon {
    width: 1.25rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.navbar-search-item-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.navbar-search-item-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-search-item-sub {
    font-size: 0.7rem;
    color: #6c757d;
}

.navbar-search-item-badge {
    font-size: 0.65rem;
    background: #8f0000;
    color: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.navbar-search-item-status {
    font-size: 0.65rem;
    color: #6c757d;
    flex-shrink: 0;
}

.navbar-search-empty {
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: #6c757d;
    text-align: center;
}