/* ===== EventManager Pro — App CSS ===== */

:root {
    --em-primary:     #1A56DB;
    --em-secondary:   #0D2554;
    --em-green:       #22C55E;
    --em-cyan:        #06B6D4;
    --em-sidebar-w:   280px;
    --em-topbar-h:    64px;
    --em-sidebar-bg:  #0D2554;
    --em-sidebar-text:#e2e8f0;
    --em-sidebar-hover: rgba(255,255,255,0.08);
    --em-sidebar-active: rgba(26,86,219,0.25);
    --em-radius:      0.5rem;
}

html { font-size: 16px; }

/* ===== Layout ===== */
.em-layout {
    display: flex;
    min-height: 100vh;
    background-color: #eef2fb;
    background-image:
        radial-gradient(ellipse 80% 60% at 0% 0%,   rgba(26,86,219,.07)  0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(34,197,94,.06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 0%,  rgba(6,182,212,.05)  0%, transparent 50%),
        radial-gradient(rgba(13,37,84,.055) 1px, transparent 1px);
    background-size: auto, auto, auto, 26px 26px;
}

/* ===== Sidebar ===== */
.em-sidebar {
    width: var(--em-sidebar-w);
    min-height: 100vh;
    background: var(--em-sidebar-bg);
    color: var(--em-sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    transition: transform 0.25s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.em-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: #ffffff;
}

.em-sidebar-brand a { text-decoration: none; display: block; width: 100%; }

.em-sidebar-logo {
    max-width: 175px;
    max-height: 74px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 14px;
}

/* Nav */
.em-nav { list-style: none; padding: 0.5rem 0 1rem; margin: 0; flex: 1; overflow-y: auto; overflow-x: hidden; }
.em-nav::-webkit-scrollbar { width: 3px; }
.em-nav::-webkit-scrollbar-track { background: transparent; }
.em-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.em-nav-section {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    padding: 0.9rem 1.25rem 0.25rem;
}

.em-nav-item { padding: 0 0.5rem; list-style: none; }

.em-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--em-radius);
    color: var(--em-sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 0.05rem;
    user-select: none;
}
.em-nav-link:hover   { background: var(--em-sidebar-hover); color: #fff; }
.em-nav-link.active  { background: var(--em-sidebar-active); color: #fff; font-weight: 500;
                        border-left: 3px solid var(--em-primary); padding-left: calc(0.9rem - 3px); }
.em-nav-link i:not(.em-chevron) { font-size: 0.9rem; width: 1rem; text-align: center; flex-shrink: 0; }

/* Collapsible group headers */
.em-group-toggle { padding: 0 0.5rem; margin-top: 0.15rem; list-style: none; }
.em-group-toggle > span.em-nav-link {
    color: rgba(255,255,255,.55);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 0.5rem 0.9rem;
}
.em-group-toggle > span.em-nav-link:hover { color: rgba(255,255,255,.85); background: transparent; }
.em-group-toggle.open > span.em-nav-link  { color: rgba(255,255,255,.9); }
.em-chevron { font-size: 0.6rem !important; width: auto !important; margin-left: auto;
              transition: transform .2s ease; }
.em-group-toggle.open .em-chevron { transform: rotate(180deg); }

/* Sub-items */
.em-sub-nav { list-style: none; padding: 0; margin: 0;
              max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.em-sub-nav.show { max-height: 500px; }
.em-sub-nav li { padding: 0 0.5rem; list-style: none; }
.em-nav-link.em-sub {
    font-size: 0.83rem;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    color: rgba(255,255,255,.65);
}
.em-nav-link.em-sub:hover { color: #fff; background: var(--em-sidebar-hover); }
.em-nav-link.em-sub.active {
    color: #fff; background: var(--em-sidebar-active);
    border-left: 3px solid var(--em-primary);
    padding-left: calc(2rem - 3px);
}

/* ===== Main ===== */
.em-main {
    margin-left: var(--em-sidebar-w);
    flex: 1;
    min-width: 0;            /* permet au contenu de rétrécir → pas de scroll horizontal */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin 0.25s ease;
}

/* ===== Topbar ===== */
.em-topbar {
    height: var(--em-topbar-h);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 900;
}

.em-sidebar-toggle { border: none; background: none; padding: 0.4rem; color: #6b7280; }
.em-sidebar-toggle:hover { color: var(--em-primary); }

/* ===== Language switcher ===== */
.em-lang-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    padding: 0.3rem 0.7rem;
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
    transition: border-color .15s, background .15s;
}
.em-lang-btn:hover { border-color: var(--em-primary); background: #f0f5ff; color: var(--em-primary); }
.em-lang-btn::after { display: none; }
.em-lang-flag { font-size: 1.1rem; line-height: 1; }
.em-lang-code { font-size: 0.8rem; font-weight: 600; letter-spacing: .04em; }
.em-lang-menu { min-width: 150px; border-radius: 10px; padding: .4rem; border: 1px solid #e5e7eb; }
.em-lang-menu .dropdown-item {
    border-radius: 6px;
    padding: .45rem .75rem;
    font-size: .9rem;
    transition: background .12s;
}
.em-lang-menu .dropdown-item.active { background: #f0f5ff; color: var(--em-primary); font-weight: 500; }
.em-lang-menu .dropdown-item:hover:not(.active) { background: #f8fafc; }

.em-user-btn {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    transition: border-color 0.15s;
}
.em-user-btn:hover { border-color: var(--em-primary); color: var(--em-primary); }
.em-user-btn::after { display: none; }

/* ===== Avatar ===== */
.em-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--em-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.em-avatar-sm { width: 30px; height: 30px; font-size: 0.7rem; }
.em-avatar-xl {
    width: 96px; height: 96px; font-size: 2rem;
    overflow: hidden;
}

/* Avatar photo — toujours contenue dans le cercle */
.em-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.em-avatar-upload-wrap {
    position: relative;
    display: inline-block;
    width: 96px; height: 96px;
}
.em-avatar-upload-wrap .em-avatar-xl {
    width: 100%; height: 100%;
}
.em-avatar-upload-btn {
    position: absolute; bottom: 2px; right: 2px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--em-primary);
    color: #fff;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 2;
}
.em-avatar-upload-btn:hover { background: var(--em-secondary); }

/* ===== Content ===== */
.em-content { flex: 1; min-width: 0; overflow-x: clip; }

/* ===== Cards ===== */
.card { border-radius: var(--em-radius); }
.card-header { font-size: 0.95rem; }

/* Stat icon */
.em-stat-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ===== Buttons ===== */
.btn-em { border-radius: 50px; font-size: 0.9375rem; }

/* Boutons d'action d'en-tête : pilule vive, solide, couleur unifiée (style « Tickets ») */
.btn-em.em-green,.btn-em.em-orange,.btn-em.em-indigo,.btn-em.em-cyan,.btn-em.em-pink,
.btn-em.em-purple,.btn-em.em-teal,.btn-em.em-amber,.btn-em.em-blue,.btn-em.em-red,
.btn-em.em-sky,.btn-em.em-slate,.btn-em.em-fuchsia{color:#fff;border:0;font-weight:600;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn-em.em-green:hover,.btn-em.em-orange:hover,.btn-em.em-indigo:hover,.btn-em.em-cyan:hover,.btn-em.em-pink:hover,
.btn-em.em-purple:hover,.btn-em.em-teal:hover,.btn-em.em-amber:hover,.btn-em.em-blue:hover,.btn-em.em-red:hover,
.btn-em.em-sky:hover,.btn-em.em-slate:hover,.btn-em.em-fuchsia:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.07)}
.btn-em.em-green {background:#16a34a;box-shadow:0 6px 16px -6px rgba(22,163,74,.6)}
.btn-em.em-orange{background:#f97316;box-shadow:0 6px 16px -6px rgba(249,115,22,.6)}
.btn-em.em-indigo{background:#6366f1;box-shadow:0 6px 16px -6px rgba(99,102,241,.6)}
.btn-em.em-cyan  {background:#06b6d4;box-shadow:0 6px 16px -6px rgba(6,182,212,.6)}
.btn-em.em-pink  {background:#db2777;box-shadow:0 6px 16px -6px rgba(219,39,119,.6)}
.btn-em.em-purple{background:#7c3aed;box-shadow:0 6px 16px -6px rgba(124,58,237,.6)}
.btn-em.em-teal  {background:#0d9488;box-shadow:0 6px 16px -6px rgba(13,148,136,.6)}
.btn-em.em-amber {background:#d97706;box-shadow:0 6px 16px -6px rgba(217,119,6,.6)}
.btn-em.em-blue  {background:#2563eb;box-shadow:0 6px 16px -6px rgba(37,99,235,.6)}
.btn-em.em-red   {background:#dc2626;box-shadow:0 6px 16px -6px rgba(220,38,38,.6)}
.btn-em.em-sky   {background:#0ea5e9;box-shadow:0 6px 16px -6px rgba(14,165,233,.6)}
.btn-em.em-slate {background:#475569;box-shadow:0 6px 16px -6px rgba(71,85,105,.55)}
.btn-em.em-fuchsia{background:#c026d3;box-shadow:0 6px 16px -6px rgba(192,38,211,.6)}

/* Gradient bleu→vert — style principal */
.btn-primary,
.btn-em-grad {
    background: linear-gradient(135deg, #1A56DB 0%, #22C55E 100%);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-weight: 500;
    letter-spacing: .02em;
    box-shadow: 0 2px 12px rgba(26,86,219,.25), 0 1px 3px rgba(34,197,94,.15);
    transition: filter .2s ease, box-shadow .2s ease, transform .15s ease;
    position: relative;
    overflow: hidden;
}
.btn-primary::before,
.btn-em-grad::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(175deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%);
    border-radius: inherit;
    pointer-events: none;
}
.btn-primary:hover,
.btn-em-grad:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(26,86,219,.35), 0 2px 8px rgba(34,197,94,.2);
    transform: translateY(-1px);
    color: #fff;
    border: none;
}
.btn-primary:active,
.btn-em-grad:active {
    filter: brightness(0.96);
    transform: translateY(0) scale(.98);
    box-shadow: 0 2px 8px rgba(26,86,219,.2);
}
.btn-primary:focus-visible,
.btn-em-grad:focus-visible {
    outline: 3px solid rgba(26,86,219,.4);
    outline-offset: 2px;
}

/* Variante outline */
.btn-outline-primary {
    border-color: #1A56DB;
    color: #1A56DB;
    border-radius: 50px;
}
.btn-outline-primary:hover {
    background: linear-gradient(135deg, #1A56DB 0%, #22C55E 100%);
    border-color: transparent;
    color: #fff;
}

/* ===== Tables ===== */
.table th { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.table td { font-size: 0.9375rem; }
.table-hover > tbody > tr:hover { background-color: #f8faff; }

/* ===== Color dot ===== */
.em-color-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== Forms ===== */
.form-control, .form-select { font-size: 0.9375rem; border-radius: var(--em-radius); }
.form-label { font-size: 0.9375rem; color: #374151; }

/* ===== Badges ===== */
.badge { font-size: 0.72rem; font-weight: 500; }

/* ===== Guest layout ===== */
.em-guest-layout { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }

/* ===== Alerts ===== */
.alert { font-size: 0.9375rem; border-radius: var(--em-radius); }

/* ===== Events ===== */
.event-card { transition: transform 0.15s, box-shadow 0.15s; }
.event-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important; }

.text-white-75 { color: rgba(255,255,255,0.75); }

/* Nav tabs custom */
.nav-tabs .nav-link { font-size: 0.875rem; color: #6b7280; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; }
.nav-tabs .nav-link.active { color: var(--em-primary); border-bottom-color: var(--em-primary); background: none; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--em-primary); }

/* ===== Backdrop sidebar mobile ===== */
.em-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13,37,84,.45);
    z-index: 999;
    opacity: 0;
    transition: opacity .25s ease;
}
.em-sidebar-backdrop.show { display: block; opacity: 1; }

/* ===== Responsive ===== */

/* Tablette : sidebar plus étroite */
@media (max-width: 1100px) and (min-width: 769px) {
    :root { --em-sidebar-w: 230px; }
}

@media (max-width: 768px) {
    .em-sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.3); width: 270px; }
    .em-sidebar.show { transform: translateX(0); }
    .em-main { margin-left: 0; }
    .em-topbar { padding: 0 .85rem; }
    .em-sidebar-toggle { display: inline-flex !important; }

    /* Contenu : padding réduit */
    .em-content .p-3, .em-content .p-md-4 { padding: .85rem !important; }

    /* Cartes stats / grilles → empilées ou 2 colonnes */
    .em-config-status-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Boutons pleine largeur dans les barres d'action */
    .em-page-actions { flex-direction: column; align-items: stretch !important; }
    .em-page-actions .btn { width: 100%; }

    /* Titres plus compacts */
    h2, .h2 { font-size: 1.5rem; }
    h4, .h4 { font-size: 1.2rem; }

    /* Modales pleine largeur */
    .modal-dialog { margin: .5rem; }

    /* Tableaux : police réduite */
    .table td, .table th { font-size: .82rem; }
}

/* Le bouton hamburger n'apparaît que sur mobile */
.em-sidebar-toggle { display: none; }
@media (max-width: 768px) { .em-sidebar-toggle { display: inline-flex; } }

/* Cartes : marges internes réduites sur petit écran */
@media (max-width: 576px) {
    .card-body { padding: 1rem; }
    .em-config-status-grid { grid-template-columns: 1fr !important; }
    .btn-lg { padding: .6rem 1rem; font-size: 1rem; }
}

/* ===================== RTL (arabe) ===================== */
[dir="rtl"] body { text-align: right; }

/* Sidebar à droite */
[dir="rtl"] .em-sidebar { left: auto; right: 0; }
[dir="rtl"] .em-main    { margin-left: 0; margin-right: var(--em-sidebar-w); }
[dir="rtl"] .em-nav-link.active { border-left: none; border-right: 3px solid var(--em-primary); padding-left: 0.9rem; padding-right: calc(0.9rem - 3px); }
[dir="rtl"] .em-nav-link.em-sub { padding: 0.4rem 2rem 0.4rem 0.75rem; }
[dir="rtl"] .em-nav-link.em-sub.active { border-left: none; border-right: 3px solid var(--em-primary); padding-right: calc(2rem - 3px); }
[dir="rtl"] .em-chevron { margin-left: 0; margin-right: auto; }

/* Topbar : éléments alignés à gauche en RTL */
[dir="rtl"] .em-topbar-right { margin-left: 0 !important; margin-right: auto !important; }

/* Marges utilitaires Bootstrap inversées (me-* → marge à gauche en RTL) */
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

/* Texte aligné */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end   { text-align: left !important; }

/* Bordures de cartes / listes */
[dir="rtl"] .border-start { border-left: 0 !important; border-right: 1px solid #dee2e6 !important; }
[dir="rtl"] .border-end   { border-right: 0 !important; border-left: 1px solid #dee2e6 !important; }

/* Dropdown menus alignés correctement */
[dir="rtl"] .dropdown-menu-end { --bs-position: start; right: auto; left: 0; }

/* Responsive RTL */
@media (max-width: 768px) {
    [dir="rtl"] .em-sidebar { transform: translateX(100%); }
    [dir="rtl"] .em-sidebar.show { transform: translateX(0); }
    [dir="rtl"] .em-main { margin-right: 0; }
}

/* ════════════════════════ RTL / Arabe ════════════════════════ */
/* Police arabe lisible + taille de base un peu plus grande (l'arabe paraît plus petit à px égal) */
html[dir="rtl"] { font-size: 17.5px; }
html[dir="rtl"] body,
[dir="rtl"] .em-nav-link,
[dir="rtl"] .btn,
[dir="rtl"] .card,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    font-family: 'Cairo', system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Remonter les très petites tailles, peu lisibles en arabe */
[dir="rtl"] .small, [dir="rtl"] small, [dir="rtl"] .text-muted.small { font-size: 0.92rem; }

/* Menu RTL : hiérarchie logique → titres de section > sous-éléments.
   (En arabe il n'y a pas de majuscules, donc on distingue par la TAILLE et le GRAS.) */
[dir="rtl"] .em-nav-section { font-size: 0.9rem; letter-spacing: 0; color: rgba(255,255,255,.5); }
[dir="rtl"] .em-group-toggle > span.em-nav-link { font-size: 1rem; font-weight: 800; letter-spacing: 0; color: rgba(255,255,255,.78); }
[dir="rtl"] a.em-nav-link { font-size: 0.95rem; }            /* lien de 1er niveau (Tableau de bord) */
[dir="rtl"] .em-nav-link.em-sub { font-size: 0.9rem; }       /* sous-éléments : plus petits que le titre */
[dir="rtl"] .table th { font-size: 0.85rem; }
[dir="rtl"] .table td { font-size: 1rem; }
[dir="rtl"] .badge { font-size: 0.82em; }
[dir="rtl"] .card-header { font-size: 1.02rem; }
[dir="rtl"] .kpi-card .kpi-val, [dir="rtl"] .kpi .v { font-size: 1.85rem; }

/* L'arabe a des hampes/jambages : un interligne plus aéré améliore la lisibilité */
[dir="rtl"] body { line-height: 1.7; }

/* Icônes Bootstrap : conserver leur rendu (ne pas leur appliquer la police arabe) */
[dir="rtl"] .bi::before { font-family: "bootstrap-icons" !important; }

/* ════════════ Boutons "liquid glass" — Actions rapides ════════════ */
.qa-glass{
    --qa: 37,99,235;
    display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
    font-size:.82rem; font-weight:600; line-height:1.1;
    padding:.5rem 1rem; border-radius:4px; text-decoration:none;
    color:rgb(var(--qa));
    background:linear-gradient(180deg, rgba(var(--qa),.22) 0%, rgba(var(--qa),.07) 100%);
    border:1px solid rgba(var(--qa),.35);
    -webkit-backdrop-filter:blur(9px) saturate(1.4); backdrop-filter:blur(9px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px -8px rgba(var(--qa),.5);
    transition:transform .15s, box-shadow .15s, background .15s, color .15s;
}
.qa-glass:hover{
    transform:translateY(-1px); color:rgb(var(--qa));
    background:linear-gradient(180deg, rgba(var(--qa),.32) 0%, rgba(var(--qa),.13) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 22px -8px rgba(var(--qa),.55);
}
.qa-glass i{ font-size:.9rem; }
.qa-primary  { --qa: 37,99,235; }
.qa-success  { --qa: 22,163,74; }
.qa-info     { --qa: 14,165,233; }
.qa-warning  { --qa: 217,119,6; }
.qa-secondary{ --qa: 100,116,139; }
/* RTL : léger ajustement de taille pour l'arabe */
[dir="rtl"] .qa-glass{ font-size:.9rem; }

/* ════════════ Boutons d'action élégants (fiche événement) ════════════ */
.ev-act {
    --c: 37,99,235;
    display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
    font-size:.82rem; font-weight:600; line-height:1;
    padding:.52rem 1rem; border-radius:11px; text-decoration:none;
    color:rgb(var(--c));
    background:rgba(var(--c),.13);
    border:1px solid rgba(var(--c),.30);
    transition:background .15s, box-shadow .15s, transform .15s, border-color .15s;
}
.ev-act:hover {
    color:rgb(var(--c));
    background:rgba(var(--c),.22);
    border-color:rgba(var(--c),.5);
    transform:translateY(-1px);
    box-shadow:0 6px 16px -8px rgba(var(--c),.6);
}
.ev-act i { font-size:.95rem; }
/* Palette de couleurs vives distinctes */
.ev-act.primary   { --c:37,99,235; }   /* bleu     */
.ev-act.success   { --c:22,163,74; }   /* vert     */
.ev-act.info      { --c:6,182,212; }    /* cyan     */
.ev-act.warning   { --c:249,115,22; }  /* orange   */
.ev-act.danger    { --c:239,68,68; }    /* rouge    */
.ev-act.secondary { --c:100,116,139; } /* gris     */
.ev-act.purple    { --c:139,92,246; }  /* violet   */
.ev-act.indigo    { --c:99,102,241; }  /* indigo   */
.ev-act.emerald   { --c:16,185,129; }  /* émeraude */
.ev-act.teal      { --c:20,184,166; }  /* sarcelle */
.ev-act.pink      { --c:236,72,153; }  /* rose vif */
.ev-act.sky       { --c:14,165,233; }  /* azur     */
.ev-act.amber     { --c:245,158,11; }  /* ambre    */
.ev-act.rose      { --c:244,63,94; }    /* rose-rouge */
.ev-act.lime      { --c:132,204,22; }  /* vert lime */
.ev-act.dark      { --c:31,41,55; }
/* Variante pleine sombre */
.ev-act.solid-dark { color:#fff; background:#1f2937; border-color:#1f2937; }
.ev-act.solid-dark:hover { color:#fff; background:#111827; border-color:#111827; box-shadow:0 8px 18px -8px rgba(17,24,39,.6); }
/* Ajouter participant : version pleine bleue (mise en avant) */
.ev-act.solid-primary { color:#fff; background:rgb(var(--c)); border-color:rgb(var(--c)); --c:37,99,235; }
.ev-act.solid-primary:hover { color:#fff; background:rgba(var(--c),.88); border-color:rgba(var(--c),.88); box-shadow:0 8px 18px -8px rgba(var(--c),.6); }
/* Version pleine verte (ex. Ajouter participant) */
.ev-act.solid-success { color:#fff; background:rgb(var(--c)); border-color:rgb(var(--c)); --c:22,163,74; }
.ev-act.solid-success:hover { color:#fff; background:rgba(var(--c),.88); border-color:rgba(var(--c),.88); box-shadow:0 8px 18px -8px rgba(var(--c),.6); }

/* ════════════ Slider d'événements (Participants, Badges, Invitations, Certificats) ════════════ */
.ev-slider-wrap { position: relative; }
.ev-slider {
    display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
    padding: 2px 2px 8px; scrollbar-width: none; -ms-overflow-style: none;
}
.ev-slider::-webkit-scrollbar { display: none; }
.ev-card {
    --pc: #2563eb;
    flex: 0 0 330px; max-width: 330px; min-height: 132px;
    border-radius: 16px; overflow: hidden; text-decoration: none; color: #1c2438;
    background: #fff; border: 1px solid #e8edf5;
    box-shadow: 0 6px 18px -12px rgba(13,37,84,.3);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative; display: block;
}
.ev-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(13,37,84,.4); color: #1c2438; }
.ev-card.active { border-color: var(--pc); box-shadow: 0 0 0 2px var(--pc), 0 10px 26px -14px rgba(13,37,84,.4); }
.ev-card .evc-accent { height: 5px; background: linear-gradient(90deg, var(--pc), var(--pc)); opacity:.9; }
.ev-card .evc-body { padding: 12px 14px; }
.ev-card .evc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ev-card .evc-status { font-size: .66rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.ev-card .evc-org { font-size: .76rem; font-weight: 600; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-card .evc-orglogo { margin-left: auto; height: 22px; max-width: 70px; object-fit: contain; }
.ev-card .evc-name { font-size: 1.02rem; font-weight: 800; line-height: 1.15; letter-spacing: -.3px; margin-bottom: 4px;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-card .evc-meta { font-size: .76rem; color: #64748b; display: flex; flex-direction: column; gap: 1px; }
.ev-card .evc-logo { position: absolute; right: 12px; bottom: 10px; height: 30px; max-width: 84px; object-fit: contain; opacity: .95; }
.ev-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff;
    color: #334155; display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(13,37,84,.35); transition: background .15s, transform .15s;
}
.ev-slider-arrow:hover { background: #f1f5f9; }
.ev-slider-prev { left: -8px; } .ev-slider-next { right: -8px; }
.ev-slider-arrow[disabled] { opacity: 0; pointer-events: none; }
/* Recherche d'événements au-dessus du slider */
.ev-slider-search { position: relative; max-width: 340px; }
.ev-slider-search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.ev-slider-search .form-control { padding-left: 34px; border-radius: 10px; }
.ev-slider .ev-card[hidden] { display: none !important; }
[dir="rtl"] .ev-slider-search .bi { left: auto; right: 12px; }
[dir="rtl"] .ev-slider-search .form-control { padding-left: .75rem; padding-right: 34px; }
/* Événement sélectionné : seule sa carte reste + bouton de changement */
.ev-selected-row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.ev-selected-row .ev-card { flex: 0 0 360px; max-width: 360px; }
.ev-change-btn {
    display: inline-flex; align-items: center; gap: 8px; align-self: stretch;
    padding: 0 18px; border-radius: 14px; text-decoration: none; cursor: pointer;
    color: #334155; background: #fff; border: 1px dashed #cbd5e1; font-weight: 600; font-size: .85rem;
    transition: background .15s, border-color .15s, color .15s;
}
.ev-change-btn:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }
.ev-change-btn .bi { font-size: 1.05rem; }

/* ── Barre compacte « événement sélectionné » (pleine largeur, peu de hauteur) ── */
.ev-selected-bar { display: flex; align-items: center; gap: 12px; width: 100%;
    background: #fff; border: 1px solid #e9edf4; border-radius: 14px; overflow: hidden;
    padding: 12px 14px 12px 0; box-shadow: 0 10px 26px -22px rgba(15,23,42,.5); }
.ev-selected-bar .evs-accent { flex: 0 0 5px; align-self: stretch; background: var(--pc); border-radius: 0 4px 4px 0; }
/* Logo en tête, comme une marque, avec un léger séparateur */
.ev-selected-bar .evs-logobox { flex: 0 0 auto; display: flex; align-items: center; padding: 0 16px; border-right: 1px solid #eef1f6; }
.ev-selected-bar .evs-logo { height: 38px; max-width: 92px; object-fit: contain; }
.ev-selected-bar .evs-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1; }
.ev-selected-bar .evs-line1 { display: flex; align-items: baseline; gap: 9px; min-width: 0; flex-wrap: wrap; }
.ev-selected-bar .evs-status { flex: 0 0 auto; font-size: .66rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; align-self: center; }
.ev-selected-bar .evs-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.3px; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ev-selected-bar .evs-org { font-size: .74rem; font-weight: 600; color: #94a3b8; }
.ev-selected-bar .evs-meta { font-size: .78rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-selected-bar .evs-meta .bi { opacity: .7; }
/* « Changer d'événement » : lien texte discret (pas un bouton) pour ne pas concurrencer les actions de la page */
.ev-selected-bar .evs-change { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; color: #64748b; border: 0; padding: .35rem .55rem; font-size: .82rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: color .15s; }
.ev-selected-bar .evs-change:hover { color: #4f46e5; text-decoration: underline; }
.ev-selected-bar .evs-change .bi { font-size: .95rem; }
@media (max-width: 640px) {
    .ev-selected-bar .evs-name { white-space: normal; }
    .ev-selected-bar .evs-change span { display: none; }
}