@import url('https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap');

/* ============================================================
   1. VARIABLES PALETTE — Design System Vercel / Geist
   ============================================================ */
 :root {
   --palette-bg-primary-core: #1a499b;
   --palette-bg-tertiary-core: #1a499b;
   --palette-text-primary: #171717;
   --palette-text-secondary: #4d4d4d;
   --palette-text-muted: #666666;
   --palette-bg-base: #ffffff;
   --palette-surface-secondary: #fafafa;
   --palette-border-color: #ebebeb;
   --palette-accent: #0a72ef;
   --palette-accent-hover: #0060d6;
   --color-develop: #0a72ef;
   --color-preview: #de1d8d;
   --color-ship: #ff5b4f;
   --shadow-border: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
   --shadow-ring-gray: rgb(235, 235, 235) 0px 0px 0px 1px;
   --shadow-card: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
     rgba(0, 0, 0, 0.04) 0px 2px 2px,
     rgba(0, 0, 0, 0.04) 0px 8px 8px -8px,
     #fafafa 0px 0px 0px 1px;
   --shadow-hover: rgba(0, 0, 0, 0.12) 0px 0px 0px 1px,
     rgba(0, 0, 0, 0.06) 0px 4px 8px;
   --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12);
   --font-family-primary: 'Geist', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
   --font-feature-settings: "liga" 1;
   --radius-micro: 2px;
   --radius-subtle: 4px;
   --radius-standard: 6px;
   --radius-card: 8px;
   --radius-image: 12px;
   --radius-badge: 9999px;
   --radius-large: 64px;
   --radius-xl: 100px;
   --radius-circle: 50%;
   --spacing-1: 1px;
   --spacing-2: 2px;
   --spacing-3: 3px;
   --spacing-4: 4px;
   --spacing-5: 5px;
   --spacing-6: 6px;
   --spacing-7: 8px;
   --spacing-8: 10px;
   --spacing-9: 12px;
   --spacing-10: 14px;
   --spacing-11: 16px;
   --spacing-12: 32px;
   --logo-height: 50px;
   --navbar-height: 57px;
 }

/* ============================================================
   2. TOKENS BOOTSTRAP + PROJET — remplace vert Supabase
   ============================================================ */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --sb-green:           #0a72ef;
  --sb-green-btn:       #0a72ef;
  --sb-green-hover:     #0060d6;
  --bs-primary:         #171717;
  --bs-primary-rgb:     23, 23, 23;
  --bs-link-color:      #0072f5;
  --bs-link-color-rgb:  0, 114, 245;
  --bs-body-font-family: var(--font-family-primary);
}

/* ============================================================
   3. MODE CLAIR
   ============================================================ */
[data-bs-theme=light] {
  --palette-text-primary:      #171717;
  --palette-text-secondary:    #4d4d4d;
  --palette-text-muted:        #666666;
  --palette-bg-base:           #ffffff;
  --palette-surface-secondary: #fafafa;
  --palette-border-color:      #ebebeb;
  --shadow-card:      rgba(0,0,0,0.08) 0px 0px 0px 1px,
                      rgba(0,0,0,0.04) 0px 2px 2px,
                      rgba(0,0,0,0.04) 0px 8px 8px -8px,
                      #fafafa 0px 0px 0px 1px;

  --bs-body-bg:     #fafafa;
  --bs-body-color:  inherit;
  --sb-sidebar:     #fafafa;
  --sb-header:      #ffffff;
  --sb-border:      #ebebeb;
  --sb-text-muted:  #4d4d4d;
  --sb-input-bg:    #ffffff;
  --logo-filter:    none;
}

/* ============================================================
   4. MODE SOMBRE
   ============================================================ */
[data-bs-theme=dark] {
  --palette-text-primary:      #ededed;
  --palette-text-secondary:    #a0a0a0;
  --palette-text-muted:        #808080;
  --palette-bg-base:           #1c1c1c;
  --palette-surface-secondary: #141414;
  --palette-border-color:      #2e2e2e;
  --shadow-card:      rgba(0,0,0,0.4) 0px 0px 0px 1px,
                      rgba(0,0,0,0.2) 0px 2px 2px,
                      rgba(0,0,0,0.15) 0px 8px 8px -8px;
  --sb-accent:      #0a72ef;
  --bs-primary:     #171717;

  --bs-body-bg:     #1c1c1c;
  --bs-body-color:  #ededed;
  --sb-sidebar:     #171717;
  --sb-header:      #1c1c1c;
  --sb-border:      #2e2e2e;
  --sb-text-muted:  #8b949e;
  --sb-input-bg:    #0f0f0f;
  --logo-filter:    brightness(0) invert(1);
}

/* ============================================================
   5. TYPOGRAPHIE GLOBALE — Geist + feature settings
   ============================================================ */
body,
.content-wrapper,
.main-sidebar,
.main-header,
.dropdown-menu,
.card,
.table,
.btn,
.form-control,
.form-select,
.modal-content,
input, select, textarea {
  font-family: var(--font-family-primary) !important;
  font-feature-settings: var(--font-feature-settings);
}

body {
  color: var(--palette-text-primary);
}

/* ============================================================
   6. NEUTRALISATION GLOBALE — reset box-shadow, flat design
   ============================================================ */
*,
.btn,
.form-control,
.select2-selection,
.card,
.modal-content,
.dropdown-menu,
.swal2-popup,
.badge,
.alert,
.main-header,
.main-sidebar,
.nav-link,
.ew-grid,
.table,
.brand-link,
.input-group-text {
  box-shadow: none !important;
}

/* Éléments qui doivent rester ronds */
input[type="radio"],
.spinner-border,
.overlay::after,
.dark-overlay::after,
#loading-overlay::after,
.preloader::after,
.swal2-icon,
.swal2-icon.swal2-question,
.swal2-icon.swal2-warning,
.swal2-icon.swal2-info,
.swal2-icon.swal2-success,
.swal2-icon.swal2-error {
  border-radius: 50% !important;
}

/* ============================================================
   7. STRUCTURE PAGE
   ============================================================ */
body,
.content-wrapper,
.main-footer {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* ============================================================
   8. CARDS — overflow:hidden obligatoire (coins fermés)
   ============================================================ */
.card {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  border: none !important;
  background-color: var(--palette-bg-base);
  overflow: hidden;
}

.card-header,
.card-footer {
  border-radius: 0 !important;
  border-color: var(--palette-border-color) !important;
  background-color: transparent !important;
}

[data-bs-theme=dark] .card {
  background-color: var(--palette-bg-base);
  color: var(--palette-text-primary);
}

[data-bs-theme=light] .card {
  background-color: var(--palette-bg-base);
  color: var(--palette-text-primary);
}

/* ============================================================
   9. SIDEBAR
   ============================================================ */
.main-sidebar {
  background-color: var(--sb-sidebar) !important;
  border-right: 1px solid var(--palette-border-color) !important;
  padding-top: 0 !important;
}

/* Menu Sidebar */
.nav-sidebar > .nav-item > .nav-link,
.nav-sidebar .nav-link {
  color: var(--sb-text-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 7px 10px !important;
  border-radius: var(--radius-standard) !important;
  margin: 1px 8px !important;
  border-left: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.nav-sidebar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--bs-body-color) !important;
}

.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active:hover {
  background-color: rgba(10, 114, 239, 0.10) !important;
  color: var(--palette-accent) !important;
  font-weight: 500 !important;
  border-left: 2px solid var(--palette-accent) !important;
  padding-left: 8px !important;
}

/* Icônes sidebar */
.nav-sidebar .nav-icon,
.nav-sidebar .nav-link i {
  font-size: 14px !important;
  width: 16px !important;
  min-width: 16px !important;
  text-align: center !important;
  margin-right: 0 !important;
  opacity: 0.75;
}

.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link.active i {
  opacity: 1;
  color: var(--palette-accent) !important;
}

/* En-têtes de groupe sidebar */
.nav-sidebar .nav-item.nav-header,
.nav-sidebar .nav-header {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--sb-text-muted) !important;
  padding: 16px 18px 4px !important;
  margin: 0 !important;
  opacity: 0.6;
}

/* Dark mode sidebar */
[data-bs-theme=dark] .nav-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ededed !important;
}

[data-bs-theme=dark] .nav-sidebar .nav-link.active {
  background-color: rgba(10, 114, 239, 0.18) !important;
  color: var(--palette-accent) !important;
  border-left: 2px solid var(--palette-accent) !important;
  padding-left: 8px !important;
}

/* RemixIcon dans sidebar */
.nav-sidebar > .nav-item .nav-icon[class*="ri-"] {
  font-size: 1.1rem;
  line-height: 1;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon[class*="ri-"] {
  width: 1.6rem;
  text-align: center;
}

/* ============================================================
   10. LOGO & BRAND
   ============================================================ */
[data-bs-theme=light] [class*=sidebar-light] .brand-link,
[data-bs-theme=light] [class*=sidebar-light] .brand-link .pushmenu {
  color: var(--palette-bg-base);
  background-color: var(--palette-bg-primary-core);
}

.brand-link {
  height: var(--navbar-height) !important;
  line-height: var(--navbar-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 1rem !important;
  border-bottom: 1px solid var(--palette-border-color) !important;
  border-right: 1px solid var(--palette-border-color) !important;
  white-space: nowrap;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.brand-link .brand-image {
  max-height: 47px !important;
  width: auto !important;
  margin-right: 10px !important;
  margin-left: 25px !important;
  transition: transform 0.2s ease;
}

/* Logo par thème */
.brand-image.logo-light,
.brand-image.logo-dark,
.ew-brand-image.logo-light,
.ew-brand-image.logo-dark {
  display: none !important;
}

[data-bs-theme=light] .brand-image.logo-light,
[data-bs-theme=light] .ew-brand-image.logo-light {
  display: inline-block !important;
}

[data-bs-theme=dark] .brand-image.logo-dark,
[data-bs-theme=dark] .ew-brand-image.logo-dark {
  display: inline-block !important;
}

.brand-image:not(.logo-light):not(.logo-dark),
.ew-brand-image:not(.logo-light):not(.logo-dark) {
  display: inline-block !important;
  filter: var(--logo-filter);
}

.brand-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bs-body-color) !important;
  letter-spacing: -0.02em;
}

/* Logos thème sombre/clair (classes brand-logo-*) */
.brand-logo-dark,
.brand-logo-light {
  max-height: 55px;
  width: auto;
  margin: 0 auto;
}

.brand-logo-light {
  display: none !important;
}

.brand-logo-dark {
  display: block;
}

[data-bs-theme="dark"] .brand-logo-dark {
  display: none !important;
}

[data-bs-theme="dark"] .brand-logo-light {
  display: block !important;
}

/* ============================================================
   11. NAVBAR
   ============================================================ */
.main-header {
  height: var(--navbar-height) !important;
  display: flex !important;
  align-items: center !important;
  background-color: var(--palette-bg-base) !important;
  border-bottom: 1px solid var(--palette-border-color) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* Liens et textes navbar */
.main-header .nav-link,
.main-header .navbar-text,
.main-header .nav-item > a,
.main-header .btn,
.main-header span,
.main-header label {
  font-size: 13px !important;
  font-weight: 400 !important;
}

.main-header .nav-link {
  height: var(--navbar-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  color: var(--bs-body-color) !important;
  gap: 6px !important;
}

.main-header .nav-link .d-none.d-md-inline,
.main-header .nav-link > span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bs-body-color) !important;
}

.main-header .nav-link i,
.main-header .nav-link .fas,
.main-header .nav-link .far,
.main-header .nav-link .fab {
  font-size: 14px !important;
  opacity: 0.7;
}

.main-header .nav-link[data-widget] i {
  font-size: 16px !important;
  opacity: 0.6;
}

/* Navbar primaire */
.navbar-primary {
  background-color: var(--palette-bg-base);
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--palette-border-color);
}

[data-bs-theme=light] .navbar-primary {
  background-color: var(--palette-bg-base);
  color: var(--palette-text-primary);
}

[data-bs-theme=dark] .navbar-primary {
  background-color: var(--palette-bg-base);
  color: var(--palette-text-primary);
}

/* ============================================================
   12. GRILLES & TABLES
   ============================================================ */
.ew-grid {
  border: 1px solid var(--palette-border-color) !important;
  background-color: transparent !important;
  font-size: 12px !important;
  border-radius: var(--radius-card) !important;
}

/* En-têtes de colonnes */
.table thead th {
  background-color: var(--palette-surface-secondary) !important;
  color: var(--palette-text-secondary) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--palette-border-color) !important;
  border-right: 1px solid var(--palette-border-color) !important;
  padding: 8px 10px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Cellules de données */
.table td {
  font-size: 13px !important;
  font-family: var(--font-family-primary) !important;
  padding: 7px 10px !important;
  border-top: 1px solid var(--palette-border-color) !important;
  border-right: 1px solid var(--palette-border-color) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 220px !important;
}

/* Hover */
.table tbody tr:hover td {
  background-color: var(--bs-table-hover-bg) !important;
}

/* Variables table — mode clair */
[data-bs-theme=light] .table {
  --bs-table-color:        var(--palette-text-primary);
  --bs-table-bg:           var(--palette-bg-base);
  --bs-table-border-color: var(--palette-border-color);
  --bs-table-striped-bg:   #f8f9fa;
  --bs-table-striped-color: var(--palette-text-primary);
  --bs-table-active-bg:    #f0f4ff;
  --bs-table-active-color: var(--palette-text-primary);
  --bs-table-hover-bg:     #f5f7ff;
  --bs-table-hover-color:  var(--palette-text-primary);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

/* Variables table — mode sombre */
[data-bs-theme=dark] .table {
  --bs-table-color:        var(--palette-text-primary);
  --bs-table-bg:           var(--palette-bg-base);
  --bs-table-border-color: var(--palette-border-color);
  --bs-table-striped-bg:   #2c3034;
  --bs-table-striped-color: #ffffff;
  --bs-table-active-bg:    #373b3e;
  --bs-table-active-color: #ffffff;
  --bs-table-hover-bg:     #323539;
  --bs-table-hover-color:  #ffffff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

/* Bordures table — mode clair */
[data-bs-theme=light] thead,
[data-bs-theme=light] tbody,
[data-bs-theme=light] tfoot,
[data-bs-theme=light] tr,
[data-bs-theme=light] td,
[data-bs-theme=light] th {
  border-color: var(--palette-border-color);
  border-style: solid;
  border-width: 1px;
}

/* Bordures table — mode sombre */
[data-bs-theme=dark] thead,
[data-bs-theme=dark] tbody,
[data-bs-theme=dark] tfoot,
[data-bs-theme=dark] tr,
[data-bs-theme=dark] td,
[data-bs-theme=dark] th {
  border-color: var(--palette-border-color);
  border-style: solid;
  border-width: 1px;
}

/* En-têtes fixes mode clair */
[data-bs-theme=light] .table.ew-table.table-head-fixed thead tr:first-child th {
  background-color: var(--palette-surface-secondary);
  box-shadow: none;
  outline: 1px solid var(--palette-border-color);
  outline-offset: -1px;
}

[data-bs-theme=dark] .table.table-head-fixed thead tr:nth-child(1) th {
  background-color: #3f474e;
  border-top: 1px solid var(--palette-border-color);
}

/* Panneaux grille */
[data-bs-theme=light] .ew-grid .ew-grid-upper-panel {
  border-bottom: 1px solid var(--palette-border-color);
}

[data-bs-theme=light] .ew-grid .ew-grid-lower-panel {
  border-top-color: var(--palette-border-color);
}

[data-bs-theme=dark] .ew-grid .ew-grid-lower-panel {
  border-top-color: var(--palette-bg-base);
}

/* Expandable rows */
[data-bs-theme=light] .expandable-body > td > div,
[data-bs-theme=light] .expandable-body > td > p {
  padding: 0.75rem;
  background-color: inherit;
}

/* En-têtes colonnes grille mode clair */
[data-bs-theme=light] .ew-grid .ew-table > thead > tr > td,
[data-bs-theme=light] .ew-grid .ew-table > thead > tr > th {
  font-weight: 400;
  border-color: var(--palette-border-color);
}

[data-bs-theme=light] .ew-grid .ew-table > thead > *,
[data-bs-theme=light] .ew-grid .ew-table > thead > * > * {
  border-bottom-color: var(--palette-border-color) !important;
}

/* En-têtes rapport */
[data-bs-theme=light] .ew-grid .ew-table .ew-rpt-col-header,
[data-bs-theme=light] .ew-grid .ew-table .ew-rpt-col-summary,
[data-bs-theme=light] .ew-grid .ew-table .ew-table-header > td,
[data-bs-theme=light] .ew-grid .ew-table .ew-table-header > th {
  --bs-table-bg: #e8f0fe;
  --bs-table-color-state: #171717;
}

/* ============================================================
   13. BOUTONS — Design Vercel
   ============================================================ */

/* Groupe segmenté (segmented control) */
.btn-group:not(:has(.dropdown-toggle)) {
  background-color: var(--palette-surface-secondary) !important;
  border: 1px solid var(--palette-border-color) !important;
  border-radius: var(--radius-card) !important;
  padding: 3px !important;
  box-shadow: none !important;
}

.btn-group:not(:has(.dropdown-toggle)) > .btn {
  background-color: transparent !important;
  border: none !important;
  color: var(--palette-text-secondary) !important;
  border-radius: var(--radius-standard) !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin-left: 0 !important;
}

.btn-group:not(:has(.dropdown-toggle)) > .btn:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--palette-text-primary) !important;
}

.btn-group:not(:has(.dropdown-toggle)) > .btn.active {
  background-color: var(--palette-bg-primary-core) !important;
  color: var(--palette-bg-base) !important;
  font-weight: 500 !important;
  border: none !important;
}

[data-bs-theme=dark] .btn-group:not(:has(.dropdown-toggle)) {
  background-color: #141414 !important;
  border-color: var(--palette-border-color) !important;
}

[data-bs-theme=dark] .btn-group:not(:has(.dropdown-toggle)) > .btn:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #ededed !important;
}

/* Base commune */
.btn {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--font-family-primary) !important;
  border-radius: var(--radius-standard) !important;
  line-height: 1.5 !important;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  font-feature-settings: var(--font-feature-settings);
}

.btn-sm {
  padding: 3px 10px !important;
  font-size: 12px !important;
}

.btn-lg {
  padding: 8px 20px !important;
  font-size: 14px !important;
  letter-spacing: -0.01em;
}

/* Primary — Vercel Black */
.btn-primary,
.swal2-confirm {
  background-color: var(--palette-bg-primary-core) !important;
  border: 1px solid var(--palette-bg-primary-core) !important;
  color: var(--palette-bg-base) !important;
  font-weight: 500 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.swal2-confirm:hover {
  background-color: var(--palette-bg-tertiary-core) !important;
  border-color: var(--palette-bg-tertiary-core) !important;
  color: var(--palette-bg-base) !important;
}

.btn-primary:active {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

/* Secondary / Default — ghost Vercel */
.btn-secondary,
.btn-default {
  background-color: var(--palette-bg-base) !important;
  border: 1px solid var(--palette-border-color) !important;
  color: var(--palette-text-primary) !important;
  box-shadow: var(--shadow-ring-gray) !important;
}

.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--palette-text-primary) !important;
  border-color: var(--palette-text-primary) !important;
  color: var(--palette-bg-base) !important;
}

[data-bs-theme=dark] .btn-secondary,
[data-bs-theme=dark] .btn-default {
  background-color: var(--palette-surface-secondary) !important;
  border-color: var(--palette-border-color) !important;
  color: var(--palette-text-primary) !important;
  box-shadow: none !important;
}

[data-bs-theme=dark] .btn-secondary:hover,
[data-bs-theme=dark] .btn-default:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* Outline Primary */
.btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--palette-bg-primary-core) !important;
  color: var(--palette-bg-primary-core) !important;
}

.btn-outline-primary:hover {
  background-color: var(--palette-bg-primary-core) !important;
  color: var(--palette-bg-base) !important;
}

/* Danger */
.btn-danger,
.swal2-deny {
  background-color: var(--color-ship) !important;
  border: 1px solid var(--color-ship) !important;
  color: #ffffff !important;
}

.btn-danger:hover,
.swal2-deny:hover {
  background-color: #e04030 !important;
  border-color: #e04030 !important;
  color: #ffffff !important;
}

/* Warning */
.btn-warning {
  background-color: #f39c12 !important;
  border: 1px solid #f39c12 !important;
  color: #1a1a1a !important;
}

.btn-warning:hover {
  background-color: #d68910 !important;
  border-color: #d68910 !important;
}

/* Success */
.btn-success {
  background-color: #0a72ef !important;
  border: 1px solid #0a72ef !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background-color: #0060d6 !important;
  border-color: #0060d6 !important;
}

/* Ghost / Link */
.btn-link {
  color: var(--bs-link-color) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 5px 10px !important;
}

.btn-link:hover {
  color: var(--palette-bg-primary-core) !important;
  background-color: inherit!important;
  text-decoration: underline !important;
}

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Icônes dans les boutons */
.btn i,
.btn .fas,
.btn .far,
.btn .fab {
  font-size: 12px !important;
  opacity: 0.85;
}

/* Focus ring — accessibilité */
.btn:focus-visible {
  outline: 2px solid hsla(212, 100%, 48%, 1) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   14. INPUT-GROUP — date picker, search
   ============================================================ */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group > .form-control:not(:last-child) {
  border-radius: var(--radius-standard) 0 0 var(--radius-standard) !important;
}

.input-group > .btn:last-child {
  border-radius: 0 var(--radius-standard) var(--radius-standard) 0 !important;
  border-left: none !important;
}

/* Login : groupe mot de passe */
.ew-login-left .input-group {
  border: 1px solid var(--palette-border-color) !important;
  border-radius: var(--radius-standard) !important;
  overflow: hidden;
}

.ew-login-left .input-group .form-control {
  border: none !important;
  box-shadow: none !important;
}

.ew-login-left .input-group .btn.ew-toggle-password {
  border: none !important;
  border-left: 1px solid var(--palette-border-color) !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
  background-color: var(--palette-bg-base) !important;
}

/* ============================================================
   15. FORMULAIRES
   ============================================================ */
.form-control,
.form-select,
.select2-selection {
  background-color: var(--palette-bg-base) !important;
  border: 1px solid var(--palette-border-color) !important;
  color: var(--palette-text-primary) !important;
  border-radius: var(--radius-standard) !important;
  font-family: var(--font-family-primary) !important;
}

.form-control:focus,
.form-select:focus {
  outline: 2px solid hsla(212, 100%, 48%, 1) !important;
  outline-offset: 0 !important;
  border-color: var(--palette-accent) !important;
  box-shadow: none !important;
}

/* ============================================================
   16. SELECT2
   ============================================================ */
.select2-container--bootstrap5 .select2-selection {
  border-radius: var(--radius-standard) !important;
  border-color: var(--palette-border-color) !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option--selected {
  background-color: var(--palette-text-primary) !important;
  color: var(--palette-bg-base) !important;
}

.select2-container--bootstrap5 .select2-selection--multiple
  .select2-selection__rendered
  .select2-selection__choice {
  background-color: var(--palette-accent);
  border-color: var(--palette-accent-hover);
  border-radius: var(--radius-standard);
  color: #fff;
  display: inline-block;
  margin-left: 0;
  margin-top: 5px;
  padding: 0;
}

/* ============================================================
   17. PAGINATEUR .ew-pager
   ============================================================ */
.ew-pager .ew-prev-next .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--palette-border-color);
  background-color: var(--palette-surface-secondary);
  color: var(--palette-text-primary);
}

.ew-pager .ew-prev-next .btn:first-child {
  border-radius: var(--radius-standard) 0 0 var(--radius-standard);
}

.ew-pager .ew-prev-next .btn:last-child {
  border-radius: 0 var(--radius-standard) var(--radius-standard) 0;
}

.ew-pager .ew-prev-next .btn + .btn {
  border-left: none;
}

/* ============================================================
   18. DROPDOWN — tous les menus déroulants
   ============================================================ */
.dropdown-menu {
  min-width: 220px !important;
  padding: 6px 0 !important;
  border: 1px solid var(--palette-border-color) !important;
  border-radius: var(--radius-card) !important;
  background-color: var(--palette-bg-base) !important;
  font-family: var(--font-family-primary) !important;
  font-size: 13px !important;
  margin-top: 4px !important;
  box-shadow: var(--shadow-card) !important;
}

/* En-têtes de section */
.dropdown-menu .dropdown-header {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--palette-text-muted) !important;
  background-color: transparent !important;
  padding: 8px 14px 10px !important;
  border-bottom: 1px solid var(--palette-border-color) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

.dropdown-menu .dropdown-header.section-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--palette-text-muted) !important;
  padding: 10px 14px 4px !important;
  border-bottom: none !important;
  opacity: 0.7;
}

/* Items cliquables */
.dropdown-menu .dropdown-item {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--palette-text-primary) !important;
  background-color: transparent !important;
  padding: 7px 14px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background 0.1s ease !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--palette-surface-secondary) !important;
  color: var(--palette-text-primary) !important;
}

.dropdown-menu .dropdown-item.active {
  background-color: transparent !important;
  color: var(--palette-text-primary) !important;
  font-weight: 500 !important;
}

/* Point devant l'item actif */
.dropdown-menu .dropdown-item.active::before {
  content: "•" !important;
  color: var(--palette-accent) !important;
  margin-right: 2px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Item "Logout" / danger */
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item.logout {
  color: var(--color-ship) !important;
  margin-top: 2px !important;
  border-top: 1px solid var(--palette-border-color) !important;
}

/* Séparateur */
.dropdown-menu .dropdown-divider {
  margin: 4px 0 !important;
  border-color: var(--palette-border-color) !important;
  opacity: 1 !important;
}

/* Icônes dans les items */
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item .fas,
.dropdown-menu .dropdown-item .far,
.dropdown-menu .dropdown-item .fab {
  font-size: 13px !important;
  width: 16px !important;
  min-width: 16px !important;
  text-align: center !important;
  opacity: 0.65;
}

/* Dark mode dropdown */
[data-bs-theme=dark] .dropdown-menu {
  background-color: #1e1e1e !important;
  border-color: var(--palette-border-color) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item {
  color: var(--palette-text-primary) !important;
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item:hover,
[data-bs-theme=dark] .dropdown-menu .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--palette-text-primary) !important;
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item.active {
  color: var(--palette-text-primary) !important;
}

/* ============================================================
   19. DROPDOWN UTILISATEUR .ew-user-dropdown
   ============================================================ */
.ew-user-dropdown,
.dropdown-menu.ew-user-dropdown {
  min-width: 270px !important;
  padding: 0 !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid var(--palette-border-color) !important;
  background-color: var(--palette-bg-base) !important;
  font-family: var(--font-family-primary) !important;
}

/* Carte utilisateur (header) */
.ms-user-card {
  background-image: none !important;
  background-color: var(--palette-surface-secondary) !important;
  border-bottom: 1px solid var(--palette-border-color) !important;
  padding: 14px 14px 12px !important;
  margin-bottom: 4px !important;
  top: 0 !important;
  position: relative !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}

/* Wrapper flex */
.ms-user-card-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Avatar */
.ms-user-card-pic {
  flex-shrink: 0 !important;
}

.ms-user-card-pic img.ew-user-image {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 1px solid var(--palette-border-color) !important;
}

/* Avatar fallback */
.ms-user-card-initials {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: rgba(10, 114, 239, 0.12) !important;
  color: var(--palette-accent) !important;
  border: 1px solid rgba(10, 114, 239, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

/* Nom */
.ms-user-card-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--palette-text-primary) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Rôle */
.ms-user-card-position {
  font-size: 11.5px !important;
  color: var(--palette-text-secondary) !important;
  margin-top: 2px !important;
  opacity: 0.75;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Footer Logout */
.dropdown-footer {
  padding: 6px 8px 6px !important;
  border-top: 1px solid var(--palette-border-color) !important;
  margin-top: 4px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.dropdown-footer .btn {
  font-size: 12.5px !important;
  padding: 4px 14px !important;
  border-color: var(--palette-border-color) !important;
  color: var(--palette-text-primary) !important;
}

.dropdown-footer .btn:hover {
  background-color: rgba(255, 91, 79, 0.08) !important;
  border-color: var(--color-ship) !important;
  color: var(--color-ship) !important;
}

/* Dark mode user dropdown */
[data-bs-theme=dark] .ms-user-card {
  background-color: var(--palette-surface-secondary) !important;
  border-bottom-color: var(--palette-border-color) !important;
}

[data-bs-theme=dark] .dropdown-footer .btn:hover {
  background-color: rgba(255, 91, 79, 0.15) !important;
}

/* ============================================================
   20. SPINNER & OVERLAY
   ============================================================ */
@keyframes sb-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.overlay,
.card > .overlay,
.dark-overlay {
  background-color: rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: inherit !important;
}

.overlay > i,
.overlay > .fa,
.overlay > .fas,
.dark-overlay > i {
  color: var(--palette-accent) !important;
  font-size: 28px !important;
  animation: sb-spin 0.7s linear infinite !important;
}

/* Préchargeur pleine page */
#loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background-color: var(--bs-body-bg, #1c1c1c) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#loading-overlay i,
#loading-overlay img {
  display: none !important;
}

#loading-overlay::after {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border: 3px solid rgba(10, 114, 239, 0.2) !important;
  border-top-color: var(--palette-accent) !important;
  border-radius: 50% !important;
  animation: sb-spin 0.7s linear infinite !important;
}

/* Bootstrap spinner */
.spinner-border {
  border-radius: 50% !important;
  border-color: rgba(10, 114, 239, 0.25) !important;
  border-top-color: var(--palette-accent) !important;
  width: 2rem !important;
  height: 2rem !important;
  border-width: 3px !important;
  animation: sb-spin 0.7s linear infinite !important;
}

.spinner-grow {
  background-color: var(--palette-accent) !important;
}

/* ============================================================
   21. LIENS & TEXTE
   ============================================================ */
:root,
[data-bs-theme=light] {
  --bs-link-color-rgb: 0, 114, 245;
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgb(108 113 122) !important;
}

.text-bg-primary {
  color: #ffffff !important;
  background-color: var(--palette-bg-primary-core) !important;
}

[data-bs-theme=dark] .text-bg-primary {
  color: #ffffff !important;
  background-color: var(--palette-bg-primary-core) !important;
}

/* ============================================================
   22. BADGES — Pill style Vercel
   ============================================================ */
.badge {
  border-radius: var(--radius-badge) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
  font-feature-settings: var(--font-feature-settings);
}

/* Badge bleu par défaut */
.badge.bg-primary,
.badge.badge-primary {
  background-color: #ebf5ff !important;
  color: #0068d6 !important;
  border: 1px solid rgba(0, 104, 214, 0.2) !important;
}

/* ============================================================
   23. CONTENT HEADER & BREADCRUMB
   ============================================================ */
.content-header {
  padding: 15px 1rem;
  background-color: inherit;
}

.content-wrapper > .content {
  padding: 0 1rem;
  background-color: inherit;
}

.content-header h1,
.content-header .h1 {
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Content header bar */
.ew-content-header-bar {
  min-height: 2.5rem;
  padding: 0.25rem 0;
}

.ew-content-header-bar .ew-breadcrumbs {
  float: none !important;
  margin-bottom: 0;
  flex-wrap: wrap;
  align-items: center;
}

.ew-breadcrumb-help {
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.6;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}

.ew-breadcrumb-help:hover {
  opacity: 1;
  color: inherit;
}

[data-bs-theme=dark] .ew-breadcrumb-help {
  color: #dee2e6;
}

/* ============================================================
   24. ICÔNES FontAwesome (espacement)
   ============================================================ */
.fa-print:before   { content: "\f02f"; margin-right: 8px; }
.fa-key:before     { content: "\f084"; margin-right: 8px; }
.fa-angle-right:before { content: "\f105"; margin-right: 8px; }

/* ============================================================
   25. PAGE LOGIN — Split Layout Vercel-inspired
   ============================================================ */
body.login-page .wrapper.ew-layout,
body.login-page .content-wrapper,
body.login-page section.content,
body.login-page .content-header {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  min-height: unset !important;
  height: auto !important;
}

/* Conteneur split plein écran */
.ew-login-split {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Panneau gauche : formulaire */
.ew-login-left {
  flex: 0 0 460px;
  width: 460px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 48px 48px 32px;
  background-color: var(--bs-body-bg);
  border-right: 1px solid var(--palette-border-color);
  position: relative;
}

/* Logo en haut */
.ew-login-brand {
  margin-bottom: 70px;
}

.ew-login-brand img {
  height: 38px;
  width: auto;
  display: none;
}

[data-bs-theme=light] .ew-login-brand img.logo-light,
[data-bs-theme=dark] .ew-login-brand img.logo-dark {
  display: inline-block;
}

.ew-login-brand img:only-child {
  display: inline-block;
}

/* Card formulaire */
.ew-login-left .ew-login-box {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

.ew-login-left .ew-login-card {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.ew-login-left .ew-login-card .card-body {
  padding: 0 !important;
}

/* Titre "Welcome back" — Geist 22px 600 */
.ew-login-left .login-box-msg {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--palette-text-primary) !important;
  margin-bottom: 30px !important;
  letter-spacing: -0.04em;
}

/* Champs */
.ew-login-left .row.gx-0 {
  margin-bottom: 14px !important;
}

/* Bouton connexion */
.ew-login-left .d-grid .btn-primary {
  padding: 10px 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

/* Liens reset/register */
.ew-login-left .login-page-links {
  margin-top: 18px !important;
  font-size: 13px;
}

.ew-login-left .login-page-links .card-link {
  color: var(--bs-link-color) !important;
  text-decoration: none;
}

.ew-login-left .login-page-links .card-link:hover {
  text-decoration: underline;
}

/* Panneau droit : citation */
.ew-login-right {
  flex: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  background-color: var(--palette-bg-base);
}

[data-bs-theme=dark] .ew-login-right {
  background-color: #141414;
}

/* Blockquote citation */
.ew-login-quote {
  max-width: 540px;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ew-login-quote-mark {
  display: block;
  font-size: 72px;
  line-height: 0.8;
  color: var(--palette-border-color);
  font-family: Georgia, "Times New Roman", serif;
  margin-bottom: 24px;
  user-select: none;
}

[data-bs-theme=dark] .ew-login-quote-mark {
  color: #3a3a3a;
}

.ew-login-quote p {
  font-size: 20px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: var(--palette-text-primary) !important;
  margin-bottom: 36px !important;
  font-family: var(--font-family-primary) !important;
}

[data-bs-theme=dark] .ew-login-quote p {
  color: var(--palette-text-primary) !important;
}

.ew-login-quote footer {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: none !important;
  padding: 0 !important;
}

.ew-login-quote-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  background-color: var(--palette-bg-primary-core);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--palette-bg-base);
  font-size: 15px;
  flex-shrink: 0;
}

.ew-login-quote footer strong {
  display: block;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--palette-text-primary) !important;
  letter-spacing: -0.02em;
}

.ew-login-quote footer span {
  font-size: 12px !important;
  color: var(--palette-text-secondary) !important;
}

/* ============================================================
   26. FULLCALENDAR — dark mode
   ============================================================ */
[data-bs-theme=dark] .fc-theme-bootstrap5 .fc-list,
[data-bs-theme=dark] .fc-theme-bootstrap5 .fc-scrollgrid,
[data-bs-theme=dark] .fc-theme-bootstrap5 td,
[data-bs-theme=dark] .fc-theme-bootstrap5 th {
  border-color: inherit;
}

/* ============================================================
   27. IMAGES — Thumbnail liste
   ============================================================ */
.table td .ew-image,
.table td .ew-images .ew-image {
  width: 80px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: var(--radius-standard) !important;
  display: block !important;
}

/* Wrapper loupe au hover */
.ew-img-wrap {
  position: relative !important;
  display: inline-block !important;
  cursor: zoom-in !important;
}

.ew-img-wrap::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f002';
  font-weight: 900;
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: var(--radius-subtle);
  padding: 1px 5px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.ew-img-wrap:hover::after {
  opacity: 1;
}

/* ============================================================
   28. IMAGES — Vue Détail
   ============================================================ */
.ew-view-form .ew-image {
  max-width: 480px !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: var(--radius-standard) !important;
  display: block !important;
  margin: 0 auto 16px auto !important;
  cursor: zoom-in !important;
  border: 1px solid var(--palette-border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ============================================================
   29. IMAGES — Lightbox modale
   ============================================================ */
#ew-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
  animation: ewLbFadeIn 0.18s ease;
}

@keyframes ewLbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#ew-lightbox img {
  max-width: 90vw !important;
  max-height: 85vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
  cursor: default;
  display: block !important;
}

/* Bouton fermer */
#ew-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid #2e2e2e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ededed;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.15s ease;
}

#ew-lightbox-close:hover {
  background: rgba(10, 114, 239, 0.2);
  border-color: var(--palette-accent);
  color: var(--palette-accent);
}

/* ============================================================
   30. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  /* Login */
  .ew-login-split { flex-direction: column; }
  .ew-login-left {
    flex: none;
    width: 100%;
    min-height: 100vh;
    padding: 32px 24px;
  }
  .ew-login-right { display: none; }

  /* Images */
  .table td .ew-image,
  .table td .ew-images .ew-image {
    width: 60px !important;
    height: 45px !important;
  }

  .ew-view-form .ew-image {
    max-width: 100% !important;
  }

  #ew-lightbox img {
    max-width: 95vw !important;
    max-height: 80vh !important;
  }

  /* Hero typography — tracking proportionnel */
  h1, .h1 { letter-spacing: -0.03em; }
}

@media (max-width: 600px) {
  .card { border-radius: var(--radius-card) !important; }
}


.ew-grid {
  padding: 0;
  border: var(--bs-border-width) solid;
  margin-bottom: 1rem;
display:table
}