/*
 * ============================================================
 *  EDLEARN — DARK THEME v2.0
 *  Edify IT Group · learn.edify.site
 *  Chamilo LMS 1.11 · Bootstrap 3
 *
 *  Palette : Noir · Gris · Rouge Edify
 *  Polices  : DM Sans (corps) · Cormorant Garamond (titres)
 * ============================================================
 */

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Fonds */
  --e-bg-0:       #0A0B0F;
  --e-bg-1:       #0F1018;
  --e-bg-2:       #141520;
  --e-bg-3:       #1C1D2C;
  --e-bg-4:       #232438;
  --e-bg-card:    #111220;
  --e-bg-card-h:  #181928;
  --e-bg-input:   #0F1018;

  /* Rouge Edify */
  --e-red:        #C8102E;
  --e-red-h:      #E01535;
  --e-red-muted:  #8B0B1F;
  --e-red-soft:   rgba(200,16,46,0.14);
  --e-red-glow:   rgba(200,16,46,0.30);
  --e-red-border: rgba(200,16,46,0.35);

  /* Gris */
  --e-grey-1:     #2A2B3D;
  --e-grey-2:     #3A3B50;
  --e-grey-3:     #52546E;

  /* Bordures */
  --e-border-0:   rgba(255,255,255,0.04);
  --e-border-1:   rgba(255,255,255,0.07);
  --e-border-2:   rgba(255,255,255,0.11);
  --e-border-3:   rgba(255,255,255,0.17);

  /* Texte */
  --e-txt-1:      #F2F3FF;
  --e-txt-2:      #9A9CBF;
  --e-txt-3:      #5C5E7A;
  --e-txt-4:      #3A3C52;

  /* Typographie */
  --e-font-d:     'Cormorant Garamond', Georgia, serif;
  --e-font-b:     'DM Sans', system-ui, sans-serif;
  --e-font-m:     'JetBrains Mono', 'Courier New', monospace;

  /* Transitions */
  --e-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --e-t1:         0.18s;
  --e-t2:         0.28s;

  /* Rayons */
  --e-r-sm:       6px;
  --e-r-md:       10px;
  --e-r-lg:       14px;
  --e-r-xl:       20px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--e-font-b) !important;
  background-color: var(--e-bg-0) !important;
  color: var(--e-txt-2) !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--e-font-d) !important;
  color: var(--e-txt-1) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
}

h1, .h1 { font-size: 2.4rem !important; }
h2, .h2 { font-size: 1.9rem !important; }
h3, .h3 { font-size: 1.5rem !important; }
h4, .h4 { font-size: 1.2rem !important; }
h5, .h5 { font-size: 1rem !important; font-weight: 600 !important; }
h6, .h6 { font-size: 0.875rem !important; font-weight: 600 !important; }

p {
  font-family: var(--e-font-b) !important;
  color: var(--e-txt-2) !important;
  line-height: 1.7 !important;
}

a,
a:visited {
  color: var(--e-txt-2) !important;
  text-decoration: none !important;
  transition: color var(--e-t1) var(--e-ease) !important;
}
a:hover, a:focus {
  color: var(--e-txt-1) !important;
  text-decoration: none !important;
}

strong, b { color: var(--e-txt-1) !important; font-weight: 600 !important; }

small, .small { font-size: 0.8rem !important; color: var(--e-txt-3) !important; }

hr {
  border: none !important;
  border-top: 1px solid var(--e-border-1) !important;
  margin: 24px 0 !important;
}

blockquote {
  border-left: 3px solid var(--e-red) !important;
  background: var(--e-bg-2) !important;
  padding: 14px 20px !important;
  border-radius: 0 var(--e-r-sm) var(--e-r-sm) 0 !important;
  color: var(--e-txt-2) !important;
  font-style: italic !important;
}

code, kbd, samp {
  font-family: var(--e-font-m) !important;
  background: var(--e-bg-3) !important;
  color: #7EC8E3 !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  font-size: 0.85em !important;
}

pre {
  font-family: var(--e-font-m) !important;
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-md) !important;
  color: var(--e-txt-1) !important;
  padding: 18px 20px !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  overflow-x: auto !important;
}

/* Selection */
::selection {
  background: rgba(200,16,46,0.25) !important;
  color: var(--e-txt-1) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--e-bg-1); }
::-webkit-scrollbar-thumb {
  background: var(--e-grey-1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--e-grey-2); }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
#wrapper,
#page-wrapper,
.main-content,
.container-fluid,
#main,
.layout-main,
.chamilo-legacy-content {
  background-color: var(--e-bg-0) !important;
  background: var(--e-bg-0) !important;
}

/* Contenu central */
.col-md-9,
.col-sm-8,
.col-md-8 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
#header {
  background: var(--e-bg-0) !important;
  border-bottom: 1px solid var(--e-border-1) !important;
  box-shadow: 0 1px 0 var(--e-border-0), 0 4px 24px rgba(0,0,0,0.4) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
}

/* Barre rouge fine au-dessus du header */
#header::before {
  content: '' !important;
  display: block !important;
  height: 2px !important;
  background: var(--e-red) !important;
  box-shadow: 0 0 12px var(--e-red-glow) !important;
}

.navbar,
.navbar-default {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 58px !important;
  margin-bottom: 0 !important;
}

/* Logo */
.navbar-brand {
  padding: 10px 16px !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
}

.navbar-brand img {
  max-height: 36px !important;
  width: auto !important;
}

/* Nav links */
.navbar-default .navbar-nav > li > a {
  font-family: var(--e-font-b) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--e-txt-3) !important;
  padding: 18px 14px !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--e-t1), border-color var(--e-t1) !important;
  letter-spacing: 0.01em !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--e-txt-1) !important;
  background: transparent !important;
  border-bottom-color: var(--e-border-2) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--e-txt-1) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--e-red) !important;
  box-shadow: none !important;
}

/* Dropdown */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background: transparent !important;
  color: var(--e-txt-1) !important;
  border-bottom-color: var(--e-red) !important;
}

.dropdown-menu {
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-2) !important;
  border-radius: var(--e-r-md) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px var(--e-border-1) !important;
  padding: 6px !important;
  min-width: 200px !important;
}

.dropdown-menu > li > a {
  font-family: var(--e-font-b) !important;
  font-size: 13.5px !important;
  color: var(--e-txt-2) !important;
  padding: 9px 16px !important;
  border-radius: var(--e-r-sm) !important;
  transition: all var(--e-t1) !important;
  background: transparent !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--e-bg-3) !important;
  color: var(--e-txt-1) !important;
}

.dropdown-menu > .divider {
  background: var(--e-border-1) !important;
  margin: 5px 0 !important;
}

.dropdown-menu .dropdown-header {
  font-family: var(--e-font-m) !important;
  font-size: 10px !important;
  color: var(--e-txt-4) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 7px 16px 4px !important;
}

/* Caret */
.caret { border-top-color: var(--e-txt-3) !important; }
.open > .dropdown-toggle .caret { border-top-color: var(--e-txt-1) !important; }

/* Toggle mobile */
.navbar-toggle {
  border-color: var(--e-border-2) !important;
  border-radius: var(--e-r-sm) !important;
  padding: 8px 10px !important;
  transition: all var(--e-t1) !important;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
  background: var(--e-bg-2) !important;
}
.navbar-toggle .icon-bar {
  background: var(--e-txt-2) !important;
  border-radius: 1px !important;
}

/* Navbar collapse mobile */
@media (max-width: 767px) {
  .navbar-collapse {
    background: var(--e-bg-1) !important;
    border-top: 1px solid var(--e-border-1) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
  }
  .navbar-default .navbar-nav > li > a {
    padding: 12px 18px !important;
    border-bottom: 1px solid var(--e-border-0) !important;
    border-left: none !important;
  }
  .navbar-default .navbar-nav > .active > a {
    border-bottom: 1px solid var(--e-border-0) !important;
    border-left: 3px solid var(--e-red) !important;
    padding-left: 15px !important;
  }
  .dropdown-menu {
    background: var(--e-bg-3) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#social-sidebar-wrapper,
.col-md-3,
.sidebar-wrapper {
  background: transparent !important;
}

#social-sidebar,
.sidebar {
  background: transparent !important;
}

/* ============================================================
   PANELS & BLOCS
   ============================================================ */
.panel {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-lg) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
  margin-bottom: 20px !important;
}

.panel-heading {
  background: var(--e-bg-3) !important;
  border-bottom: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-lg) var(--e-r-lg) 0 0 !important;
  padding: 14px 20px !important;
}

.panel-heading h3,
.panel-heading .panel-title,
.panel-title {
  font-family: var(--e-font-d) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--e-txt-1) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.panel-body {
  background: transparent !important;
  padding: 20px !important;
  color: var(--e-txt-2) !important;
}

.panel-footer {
  background: var(--e-bg-3) !important;
  border-top: 1px solid var(--e-border-1) !important;
  border-radius: 0 0 var(--e-r-lg) var(--e-r-lg) !important;
  padding: 12px 20px !important;
  color: var(--e-txt-3) !important;
}

/* Panel variants */
.panel-primary {
  border-color: var(--e-red-border) !important;
}
.panel-primary .panel-heading {
  background: var(--e-red-soft) !important;
  border-color: var(--e-red-border) !important;
}
.panel-primary .panel-heading .panel-title,
.panel-primary .panel-heading h3 {
  color: var(--e-txt-1) !important;
}

.panel-success > .panel-heading {
  background: rgba(61,201,122,0.1) !important;
  border-color: rgba(61,201,122,0.3) !important;
}
.panel-info > .panel-heading {
  background: rgba(91,184,245,0.1) !important;
  border-color: rgba(91,184,245,0.25) !important;
}
.panel-warning > .panel-heading {
  background: rgba(212,168,67,0.1) !important;
  border-color: rgba(212,168,67,0.3) !important;
}
.panel-danger > .panel-heading {
  background: var(--e-red-soft) !important;
  border-color: var(--e-red-border) !important;
}

/* Well */
.well {
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-md) !important;
  box-shadow: none !important;
  color: var(--e-txt-2) !important;
}

.well-sm { padding: 10px 14px !important; }
.well-lg { padding: 24px 28px !important; }

/* ============================================================
   COURS (course-box, catalogue)
   ============================================================ */
.course-box,
.view_grid_course,
[class*="course-box"] {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-lg) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
  overflow: hidden !important;
  transition: transform var(--e-t2) var(--e-ease),
              border-color var(--e-t2) var(--e-ease),
              box-shadow var(--e-t2) var(--e-ease) !important;
}

.course-box:hover,
.view_grid_course:hover {
  transform: translateY(-4px) !important;
  border-color: var(--e-border-2) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45) !important;
  background: var(--e-bg-card-h) !important;
}

/* Thumbnail du cours */
.course-box .course-picture,
.view_grid_course .course-picture,
.course-box .image {
  background: var(--e-bg-3) !important;
  border-bottom: 1px solid var(--e-border-0) !important;
  overflow: hidden !important;
}

.course-box .course-picture img,
.view_grid_course .course-picture img {
  opacity: 0.9 !important;
  transition: opacity var(--e-t2), transform var(--e-t2) !important;
}
.course-box:hover .course-picture img,
.view_grid_course:hover .course-picture img {
  opacity: 1 !important;
  transform: scale(1.03) !important;
}

/* Nom du cours */
.course-box .title,
.view_grid_course .title,
.course-box h4,
.course-box h4 a,
.course-title,
.course-box-title {
  font-family: var(--e-font-d) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--e-txt-1) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}
.course-box h4 a:hover { color: var(--e-red-h) !important; }

/* Description du cours */
.course-box .description,
.view_grid_course .description,
.course-box .course-description {
  font-size: 0.875rem !important;
  color: var(--e-txt-2) !important;
  line-height: 1.6 !important;
}

/* Catégorie */
.my-course-badge,
.course-box .category-name,
.course-category {
  font-family: var(--e-font-m) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--e-txt-3) !important;
}

/* Barre bas de card */
.course-box .notifications,
.course-box .course-box-tools,
.course-box-tools {
  background: var(--e-bg-3) !important;
  border-top: 1px solid var(--e-border-1) !important;
  padding: 10px 14px !important;
}

/* Stars / votes */
.star-rating .fa-star,
.rating_score .fa-star { color: #C8963E !important; }
.star-rating .fa-star-o,
.rating_score .fa-star-o { color: var(--e-txt-4) !important; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  font-family: var(--e-font-b) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border-radius: var(--e-r-sm) !important;
  padding: 8px 18px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all var(--e-t1) var(--e-ease) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5 !important;
}

/* Primary (rouge Edify) */
.btn-primary,
.btn-default.btn-primary {
  background: var(--e-red) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(200,16,46,0.28) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--e-red-h) !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(200,16,46,0.40) !important;
  transform: translateY(-1px) !important;
}

/* Default / Secondary */
.btn-default {
  background: transparent !important;
  border-color: var(--e-border-2) !important;
  color: var(--e-txt-2) !important;
}
.btn-default:hover,
.btn-default:focus {
  background: var(--e-bg-2) !important;
  border-color: var(--e-border-3) !important;
  color: var(--e-txt-1) !important;
}

/* Info */
.btn-info {
  background: rgba(91,184,245,0.12) !important;
  border-color: rgba(91,184,245,0.3) !important;
  color: #7EC8E3 !important;
}
.btn-info:hover, .btn-info:focus {
  background: rgba(91,184,245,0.2) !important;
  color: #A8DDED !important;
}

/* Success */
.btn-success {
  background: rgba(55,179,106,0.12) !important;
  border-color: rgba(55,179,106,0.3) !important;
  color: #4DC98A !important;
}
.btn-success:hover, .btn-success:focus {
  background: rgba(55,179,106,0.2) !important;
  color: #6DDEA0 !important;
}

/* Warning */
.btn-warning {
  background: rgba(200,150,62,0.12) !important;
  border-color: rgba(200,150,62,0.3) !important;
  color: #C8963E !important;
}
.btn-warning:hover, .btn-warning:focus {
  background: rgba(200,150,62,0.2) !important;
  color: #DBA94A !important;
}

/* Danger */
.btn-danger {
  background: var(--e-red-soft) !important;
  border-color: var(--e-red-border) !important;
  color: var(--e-red) !important;
}
.btn-danger:hover, .btn-danger:focus {
  background: rgba(200,16,46,0.22) !important;
  color: var(--e-red-h) !important;
}

/* Link */
.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--e-txt-2) !important;
  box-shadow: none !important;
}
.btn-link:hover { color: var(--e-txt-1) !important; }

/* Tailles */
.btn-lg {
  padding: 12px 28px !important;
  font-size: 15.5px !important;
  border-radius: var(--e-r-md) !important;
}
.btn-sm {
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  border-radius: 5px !important;
}
.btn-xs {
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}

/* Full-width */
.btn-block { display: block !important; width: 100% !important; }

/* Disabled */
.btn[disabled],
.btn.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
  font-family: var(--e-font-b) !important;
  font-size: 14px !important;
  background: var(--e-bg-input) !important;
  background-color: var(--e-bg-input) !important;
  border: 1px solid var(--e-border-2) !important;
  border-radius: var(--e-r-sm) !important;
  color: var(--e-txt-1) !important;
  padding: 9px 14px !important;
  height: auto !important;
  transition: border-color var(--e-t1), box-shadow var(--e-t1) !important;
  box-shadow: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--e-txt-4) !important;
  opacity: 1 !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background: var(--e-bg-input) !important;
  border-color: var(--e-red-border) !important;
  box-shadow: 0 0 0 3px var(--e-red-soft) !important;
  color: var(--e-txt-1) !important;
  outline: none !important;
}

select option {
  background: var(--e-bg-2) !important;
  color: var(--e-txt-1) !important;
}

label,
.control-label {
  font-family: var(--e-font-m) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--e-txt-3) !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  margin-bottom: 7px !important;
  display: block !important;
}

.form-group { margin-bottom: 18px !important; }

/* Feedback states */
.has-error .form-control {
  border-color: var(--e-red) !important;
  box-shadow: 0 0 0 2px var(--e-red-soft) !important;
}
.has-success .form-control {
  border-color: rgba(55,179,106,0.5) !important;
  box-shadow: 0 0 0 2px rgba(55,179,106,0.12) !important;
}

.help-block {
  font-size: 12px !important;
  color: var(--e-txt-3) !important;
  margin-top: 5px !important;
}

/* Input groups */
.input-group-addon {
  background: var(--e-bg-3) !important;
  border: 1px solid var(--e-border-2) !important;
  color: var(--e-txt-3) !important;
  border-radius: var(--e-r-sm) !important;
  font-size: 14px !important;
}

/* Checkboxes & radios */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--e-red) !important;
  cursor: pointer !important;
}

/* ============================================================
   TABLEAUX
   ============================================================ */
.table,
table {
  color: var(--e-txt-2) !important;
  font-size: 14px !important;
}

.table > thead > tr > th {
  font-family: var(--e-font-m) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--e-txt-3) !important;
  background: var(--e-bg-3) !important;
  border-bottom: 1px solid var(--e-border-2) !important;
  border-color: var(--e-border-1) !important;
  padding: 12px 16px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
  background: transparent !important;
  border-color: var(--e-border-0) !important;
  color: var(--e-txt-2) !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
}

.table > tbody > tr:hover > td {
  background: rgba(255,255,255,0.025) !important;
}

.table-bordered {
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-md) !important;
  overflow: hidden !important;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--e-border-1) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(255,255,255,0.018) !important;
}

.table-hover > tbody > tr:hover > td {
  background: rgba(255,255,255,0.035) !important;
}

/* ============================================================
   ONGLETS (TABS)
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--e-border-1) !important;
}

.nav-tabs > li > a {
  font-family: var(--e-font-b) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--e-txt-3) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  margin-bottom: -1px !important;
  transition: color var(--e-t1), border-color var(--e-t1) !important;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background: transparent !important;
  border-color: transparent transparent var(--e-border-2) !important;
  color: var(--e-txt-1) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--e-red) !important;
  color: var(--e-txt-1) !important;
}

.tab-content {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-top: none !important;
  border-radius: 0 0 var(--e-r-md) var(--e-r-md) !important;
  padding: 22px !important;
}

/* Pills */
.nav-pills > li > a {
  font-family: var(--e-font-b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--e-txt-3) !important;
  background: transparent !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: 100px !important;
  padding: 6px 16px !important;
  transition: all var(--e-t1) !important;
}
.nav-pills > li.active > a,
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
  background: var(--e-red-soft) !important;
  border-color: var(--e-red-border) !important;
  color: #ff5577 !important;
}

/* Sidebar navigation */
.nav-stacked > li > a {
  font-size: 14px !important;
  color: var(--e-txt-2) !important;
  padding: 9px 14px !important;
  border-radius: var(--e-r-sm) !important;
  border: none !important;
  transition: all var(--e-t1) !important;
}
.nav-stacked > li.active > a,
.nav-stacked > li > a:hover {
  background: var(--e-bg-3) !important;
  color: var(--e-txt-1) !important;
}
.nav-stacked > li.active > a {
  border-left: 3px solid var(--e-red) !important;
}

/* ============================================================
   ALERTES
   ============================================================ */
.alert {
  border-radius: var(--e-r-md) !important;
  border: 1px solid !important;
  font-size: 14px !important;
  padding: 13px 18px !important;
  font-family: var(--e-font-b) !important;
}

.alert-info {
  background: rgba(91,184,245,0.09) !important;
  border-color: rgba(91,184,245,0.28) !important;
  color: #7EC8E3 !important;
}
.alert-success {
  background: rgba(55,179,106,0.09) !important;
  border-color: rgba(55,179,106,0.28) !important;
  color: #4DC98A !important;
}
.alert-warning {
  background: rgba(200,150,62,0.09) !important;
  border-color: rgba(200,150,62,0.28) !important;
  color: #C8963E !important;
}
.alert-danger {
  background: var(--e-red-soft) !important;
  border-color: var(--e-red-border) !important;
  color: #FF5577 !important;
}

.alert .close { color: inherit !important; opacity: 0.5 !important; }
.alert .close:hover { opacity: 1 !important; }

/* ============================================================
   BADGES & LABELS
   ============================================================ */
.badge {
  font-family: var(--e-font-m) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  background: var(--e-red) !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 3px 8px !important;
  letter-spacing: 0.04em !important;
  vertical-align: middle !important;
}

.label {
  font-family: var(--e-font-m) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  padding: 3px 9px !important;
  letter-spacing: 0.04em !important;
}

.label-default {
  background: var(--e-bg-3) !important;
  color: var(--e-txt-2) !important;
}
.label-primary {
  background: var(--e-red-soft) !important;
  color: #FF5577 !important;
  border: 1px solid var(--e-red-border) !important;
}
.label-info {
  background: rgba(91,184,245,0.1) !important;
  color: #7EC8E3 !important;
  border: 1px solid rgba(91,184,245,0.28) !important;
}
.label-success {
  background: rgba(55,179,106,0.1) !important;
  color: #4DC98A !important;
  border: 1px solid rgba(55,179,106,0.28) !important;
}
.label-warning {
  background: rgba(200,150,62,0.1) !important;
  color: #C8963E !important;
  border: 1px solid rgba(200,150,62,0.28) !important;
}
.label-danger {
  background: var(--e-red-soft) !important;
  color: #FF5577 !important;
  border: 1px solid var(--e-red-border) !important;
}

/* ============================================================
   BARRES DE PROGRESSION
   ============================================================ */
.progress {
  background: var(--e-bg-3) !important;
  border-radius: 100px !important;
  height: 6px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.progress-bar {
  background: var(--e-red) !important;
  box-shadow: 0 0 8px var(--e-red-glow) !important;
  border-radius: 100px !important;
  transition: width 0.6s ease !important;
  font-size: 11px !important;
  line-height: 6px !important;
}
.progress-bar-info  { background: #5BB8F5 !important; box-shadow: 0 0 8px rgba(91,184,245,0.4) !important; }
.progress-bar-success { background: #3DC97A !important; box-shadow: 0 0 8px rgba(61,201,122,0.4) !important; }
.progress-bar-warning { background: #C8963E !important; box-shadow: none !important; }

/* ============================================================
   LISTE GROUPS
   ============================================================ */
.list-group { margin-bottom: 0 !important; }

.list-group-item {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  color: var(--e-txt-2) !important;
  font-size: 14px !important;
  padding: 12px 18px !important;
  transition: all var(--e-t1) !important;
}
.list-group-item:first-child {
  border-radius: var(--e-r-md) var(--e-r-md) 0 0 !important;
}
.list-group-item:last-child {
  border-radius: 0 0 var(--e-r-md) var(--e-r-md) !important;
}
.list-group-item:hover,
.list-group-item:focus {
  background: var(--e-bg-card-h) !important;
  color: var(--e-txt-1) !important;
}
.list-group-item.active,
.list-group-item.active:hover {
  background: var(--e-red-soft) !important;
  border-color: var(--e-red-border) !important;
  color: #FF5577 !important;
}
.list-group-item-heading {
  font-family: var(--e-font-d) !important;
  color: var(--e-txt-1) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.list-group-item-text {
  color: var(--e-txt-3) !important;
  font-size: 13px !important;
}

/* ============================================================
   MODALES
   ============================================================ */
.modal-backdrop,
.modal-backdrop.in {
  background: #000 !important;
  opacity: 0.7 !important;
}

.modal-content {
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-2) !important;
  border-radius: var(--e-r-xl) !important;
  box-shadow: 0 40px 80px rgba(0,0,0,0.7) !important;
}

.modal-header {
  background: var(--e-bg-3) !important;
  border-bottom: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-xl) var(--e-r-xl) 0 0 !important;
  padding: 18px 24px !important;
}

.modal-title {
  font-family: var(--e-font-d) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--e-txt-1) !important;
  letter-spacing: -0.02em !important;
}

.modal-body {
  padding: 24px !important;
  color: var(--e-txt-2) !important;
}

.modal-footer {
  background: var(--e-bg-3) !important;
  border-top: 1px solid var(--e-border-1) !important;
  border-radius: 0 0 var(--e-r-xl) var(--e-r-xl) !important;
  padding: 14px 24px !important;
}

.close {
  color: var(--e-txt-2) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  transition: color var(--e-t1) !important;
}
.close:hover, .close:focus {
  color: var(--e-txt-1) !important;
  opacity: 1 !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { margin: 8px 0 !important; }

.pagination > li > a,
.pagination > li > span {
  font-family: var(--e-font-b) !important;
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-1) !important;
  color: var(--e-txt-2) !important;
  font-size: 14px !important;
  padding: 7px 13px !important;
  transition: all var(--e-t1) !important;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  background: var(--e-bg-3) !important;
  border-color: var(--e-border-2) !important;
  color: var(--e-txt-1) !important;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-radius: var(--e-r-sm) 0 0 var(--e-r-sm) !important;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-radius: 0 var(--e-r-sm) var(--e-r-sm) 0 !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--e-red) !important;
  border-color: var(--e-red) !important;
  color: #fff !important;
  box-shadow: 0 0 12px var(--e-red-glow) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  background: var(--e-bg-1) !important;
  color: var(--e-txt-4) !important;
  border-color: var(--e-border-0) !important;
  cursor: not-allowed !important;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
  font-family: var(--e-font-m) !important;
  font-size: 11.5px !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.02em !important;
}

.breadcrumb > li { color: var(--e-txt-4) !important; }
.breadcrumb > li > a { color: var(--e-txt-3) !important; }
.breadcrumb > li > a:hover { color: var(--e-txt-1) !important; }
.breadcrumb > .active { color: var(--e-txt-2) !important; }

.breadcrumb > li + li::before,
.breadcrumb > li + li:before {
  color: var(--e-txt-4) !important;
  content: "/\00a0" !important;
}

/* ============================================================
   POPOVERS & TOOLTIPS
   ============================================================ */
.tooltip-inner {
  background: var(--e-bg-4) !important;
  color: var(--e-txt-1) !important;
  font-family: var(--e-font-b) !important;
  font-size: 12.5px !important;
  border-radius: var(--e-r-sm) !important;
  padding: 6px 12px !important;
  border: 1px solid var(--e-border-2) !important;
}

.tooltip.top .tooltip-arrow { border-top-color: var(--e-border-2) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--e-border-2) !important; }
.tooltip.left .tooltip-arrow { border-left-color: var(--e-border-2) !important; }
.tooltip.right .tooltip-arrow { border-right-color: var(--e-border-2) !important; }

.popover {
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-2) !important;
  border-radius: var(--e-r-md) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
  color: var(--e-txt-2) !important;
  font-family: var(--e-font-b) !important;
  font-size: 13.5px !important;
}

.popover-title {
  background: var(--e-bg-3) !important;
  border-bottom: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-md) var(--e-r-md) 0 0 !important;
  color: var(--e-txt-1) !important;
  font-family: var(--e-font-d) !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
}

/* ============================================================
   PAGE DE CONNEXION
   ============================================================ */
#login-block,
.well.login-form,
.login-wrapper,
#login-box {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-2) !important;
  border-radius: var(--e-r-xl) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5) !important;
  padding: 36px 32px !important;
}

.login-logo { text-align: center !important; margin-bottom: 28px !important; }

/* ============================================================
   PLUGIN BUYCOURSES
   ============================================================ */
.buy-course-btn,
.buy-button,
a.btn[href*="buycourses"],
.buycourses-btn {
  background: var(--e-red) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-family: var(--e-font-b) !important;
  font-weight: 600 !important;
  border-radius: var(--e-r-sm) !important;
  box-shadow: 0 0 16px var(--e-red-glow) !important;
}

.buy-course-btn:hover,
.buy-button:hover {
  background: var(--e-red-h) !important;
  color: #fff !important;
  box-shadow: 0 0 24px var(--e-red-glow) !important;
}

/* ============================================================
   MESSAGES / NOTIFICATIONS
   ============================================================ */
.message-box,
.message-block {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-md) !important;
}

/* ============================================================
   CALENDRIER / AGENDA
   ============================================================ */
.fc-toolbar .fc-button {
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-2) !important;
  color: var(--e-txt-2) !important;
  border-radius: var(--e-r-sm) !important;
  font-family: var(--e-font-b) !important;
  font-size: 13px !important;
  transition: all var(--e-t1) !important;
}
.fc-toolbar .fc-button:hover {
  background: var(--e-bg-3) !important;
  color: var(--e-txt-1) !important;
}
.fc-toolbar .fc-button.fc-state-active {
  background: var(--e-red-soft) !important;
  border-color: var(--e-red-border) !important;
  color: #FF5577 !important;
}

.fc-event {
  background: var(--e-red) !important;
  border-color: var(--e-red-muted) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-family: var(--e-font-b) !important;
  font-size: 12px !important;
}

.fc-day-grid-container,
.fc-scroller {
  background: var(--e-bg-card) !important;
}

.fc th {
  background: var(--e-bg-3) !important;
  color: var(--e-txt-3) !important;
  border-color: var(--e-border-1) !important;
  font-family: var(--e-font-m) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.fc td {
  border-color: var(--e-border-0) !important;
  color: var(--e-txt-2) !important;
}

.fc .fc-today {
  background: rgba(200,16,46,0.06) !important;
}

/* ============================================================
   EDITEUR CKEDITOR
   ============================================================ */
.cke_chrome,
.cke_top,
.cke_bottom {
  background: var(--e-bg-2) !important;
  border-color: var(--e-border-2) !important;
}

.cke_top { border-radius: var(--e-r-md) var(--e-r-md) 0 0 !important; }
.cke_bottom { border-radius: 0 0 var(--e-r-md) var(--e-r-md) !important; }

.cke_button,
.cke_button_on,
.cke_button_off {
  background: transparent !important;
  border-radius: 4px !important;
}
.cke_button:hover { background: var(--e-bg-3) !important; }
.cke_button_on { background: var(--e-red-soft) !important; }

/* ============================================================
   LEARNING PATH (SCORM)
   ============================================================ */
#scorm-body {
  background: var(--e-bg-0) !important;
}

#learnpath_sidebar,
.lp-sidebar {
  background: var(--e-bg-1) !important;
  border-right: 1px solid var(--e-border-1) !important;
}

.lp-item,
.learnpath-item {
  font-family: var(--e-font-b) !important;
  color: var(--e-txt-2) !important;
  padding: 9px 14px !important;
  border-radius: var(--e-r-sm) !important;
  transition: all var(--e-t1) !important;
}
.lp-item:hover,
.lp-item.active {
  background: var(--e-bg-3) !important;
  color: var(--e-txt-1) !important;
}
.lp-item.active { border-left: 3px solid var(--e-red) !important; }

/* ============================================================
   FORUM
   ============================================================ */
.forum-topic,
.forum-message {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-md) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  transition: border-color var(--e-t1) !important;
}
.forum-topic:hover { border-color: var(--e-border-2) !important; }

.forum-user-name {
  font-family: var(--e-font-d) !important;
  font-weight: 700 !important;
  color: var(--e-txt-1) !important;
}

.forum-message-body { color: var(--e-txt-2) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer,
footer,
.footer,
.footer-wrapper {
  background: var(--e-bg-0) !important;
  background-color: var(--e-bg-0) !important;
  border-top: 1px solid var(--e-border-1) !important;
  color: var(--e-txt-4) !important;
  font-size: 12.5px !important;
  font-family: var(--e-font-b) !important;
  padding: 18px 40px !important;
}

#footer a, footer a {
  color: var(--e-txt-3) !important;
  transition: color var(--e-t1) !important;
}
#footer a:hover, footer a:hover {
  color: var(--e-txt-2) !important;
}

/* Chamilo link */
#footer a[href*="chamilo.org"] {
  color: var(--e-red) !important;
  font-weight: 500 !important;
}

/* ============================================================
   COOKIE WARNING
   ============================================================ */
#cookie-warning,
.cookie-bar {
  background: var(--e-bg-2) !important;
  border-top: 1px solid var(--e-border-2) !important;
  color: var(--e-txt-2) !important;
  font-size: 13px !important;
  font-family: var(--e-font-b) !important;
  padding: 14px 24px !important;
}

#cookie-warning a { color: var(--e-txt-1) !important; text-decoration: underline !important; }

#cookie-warning .btn,
.cookie-bar .btn,
#cookie-warning .accept-cookie-policy {
  background: var(--e-red) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: var(--e-r-sm) !important;
  font-family: var(--e-font-b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 18px !important;
  cursor: pointer !important;
}

/* ============================================================
   CONNEXION CHAMILO — SIDEBAR BLOCKS
   ============================================================ */
#helpBlock,
#navigation_sidebarBlock,
.sidebar-block {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-lg) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.sidebar-block-title,
[id$="BlockHeader"],
.sidebar-title {
  background: var(--e-bg-3) !important;
  border-bottom: 1px solid var(--e-border-1) !important;
  color: var(--e-txt-2) !important;
  font-family: var(--e-font-m) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
}

/* ============================================================
   UTILITAIRES CHAMILO SPÉCIFIQUES
   ============================================================ */

/* Surlignage requis */
.required-field { color: var(--e-red) !important; }

/* Section titles */
.section-title,
.section-global-title {
  font-family: var(--e-font-d) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--e-txt-1) !important;
  letter-spacing: -0.02em !important;
  border-bottom: 1px solid var(--e-border-1) !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}

/* Page titles générés par Chamilo */
.page-header {
  border-bottom: 1px solid var(--e-border-1) !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}
.page-header h1,
.page-header h2 {
  font-family: var(--e-font-d) !important;
  font-size: 2rem !important;
  color: var(--e-txt-1) !important;
}

/* Images */
img { max-width: 100%; border-radius: 4px; }

/* Icônes Font Awesome dans contexte Chamilo */
.fa { vertical-align: middle !important; }

/* Avatars */
.img-circle {
  border: 2px solid var(--e-border-2) !important;
}

/* Social wall */
.social-post,
.timeline-item {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-lg) !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
}

/* Mini notifications badge */
.notification-count {
  background: var(--e-red) !important;
  color: #fff !important;
  font-family: var(--e-font-m) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  padding: 2px 6px !important;
  position: absolute !important;
  top: 8px !important;
  right: 4px !important;
  box-shadow: 0 0 8px var(--e-red-glow) !important;
}

/* ============================================================
   IMPRESSION
   ============================================================ */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  #header, #footer, .sidebar, #social-sidebar-wrapper {
    display: none !important;
  }
  .panel {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   FIX v2 — CATALOGUE COURS (cards blanches) + HOMEPAGE
   Ciblage précis des sélecteurs Chamilo 1.11
   ============================================================ */

/* ── Force fond sombre sur TOUS les conteneurs possibles ── */
body, html,
#wrapper, #page-wrapper,
.container-fluid, .container,
.row, [class*="col-"] { background-color: transparent; }

/* ── CATALOGUE : override base.css qui force #fff ── */
.view_grid_course,
.view_grid_course.panel,
.course-box,
.course-box.panel,
.panel.course-box,
.courses-categories .panel,
.courses-categories .course-box,
ul.courses-list > li,
.session-box,
.session-box.panel,
.catalog-course-item {
  background: var(--e-bg-card) !important;
  background-color: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-lg) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
  color: var(--e-txt-2) !important;
  transition: transform var(--e-t2) var(--e-ease),
              border-color var(--e-t2) var(--e-ease),
              box-shadow var(--e-t2) var(--e-ease) !important;
  overflow: hidden !important;
}

.view_grid_course:hover,
.course-box:hover,
.session-box:hover {
  transform: translateY(-4px) !important;
  border-color: var(--e-border-2) !important;
  background-color: var(--e-bg-card-h) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45) !important;
}

/* Panel body à l'intérieur des cards */
.view_grid_course .panel-body,
.course-box .panel-body,
.session-box .panel-body {
  background: transparent !important;
  background-color: transparent !important;
  padding: 16px !important;
}

/* Titres des cours dans catalogue */
.view_grid_course h4,
.view_grid_course h4 a,
.view_grid_course .course-box-title,
.view_grid_course .course_title,
.course-box h4,
.course-box h4 a,
.course-box .course-box-title,
.course-box .course_title,
.course-box .title a,
.session-box h4,
.session-box h4 a,
.catalog-course-item h4,
.catalog-course-item h4 a {
  font-family: var(--e-font-d) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--e-txt-1) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}
.view_grid_course h4 a:hover,
.course-box h4 a:hover {
  color: var(--e-red-h) !important;
}

/* Description cours */
.view_grid_course .course-description,
.view_grid_course p,
.course-box .course-description,
.course-box p,
.session-box p,
.catalog-course-item p {
  color: var(--e-txt-2) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Infos votes/visites */
.view_grid_course .course-info,
.course-box .course-info,
.view_grid_course small,
.course-box small,
.view_grid_course .votes-count,
.course-box .votes-count {
  color: var(--e-txt-3) !important;
  font-size: 12px !important;
  font-family: var(--e-font-m) !important;
}

/* Bas de card : zone bouton et catégorie */
.view_grid_course .panel-footer,
.course-box .panel-footer,
.course-box .course-box-tools,
.session-box .panel-footer {
  background: var(--e-bg-3) !important;
  background-color: var(--e-bg-3) !important;
  border-top: 1px solid var(--e-border-0) !important;
  padding: 12px 16px !important;
}

/* ── BADGE CATÉGORIE (bandeau coloré en bas de l'image) ── */
.course-box .course-category,
.view_grid_course .course-category,
.course-category-badge,
.courses-categories .label,
.course-box .category {
  background: var(--e-red) !important;
  color: #fff !important;
  font-family: var(--e-font-m) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
}

/* ── BOUTON S'INSCRIRE → rouge Edify ── */
.view_grid_course .btn-success,
.course-box .btn-success,
.session-box .btn-success,
.register-button,
.subscription-button,
a.btn-success[href*="subscribe"],
a.btn-success[href*="inscription"],
a.btn-success[href*="register"],
.courses-categories .btn-success,
.catalog-course-item .btn-success,
form[action*="inscription"] .btn-success,
.course-box a.btn {
  background: var(--e-red) !important;
  background-color: var(--e-red) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-family: var(--e-font-b) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 7px 16px !important;
  border-radius: var(--e-r-sm) !important;
  box-shadow: 0 0 14px var(--e-red-glow) !important;
  transition: all var(--e-t1) !important;
}
.view_grid_course .btn-success:hover,
.course-box .btn-success:hover,
.courses-categories .btn-success:hover {
  background: var(--e-red-h) !important;
  background-color: var(--e-red-h) !important;
  box-shadow: 0 0 20px var(--e-red-glow) !important;
  transform: translateY(-1px) !important;
}

/* ── RATING STARS ── */
.view_grid_course .star-rating li a,
.course-box .star-rating li a,
.star-rating-widget li a,
.view_grid_course ul.star-rating li,
.course-box ul.star-rating li {
  color: var(--e-txt-4) !important;
}
.view_grid_course .star-rating li.selected a,
.course-box .star-rating li.selected a,
.star-rating .fa-star,
.view_grid_course .fa-star {
  color: #C8963E !important;
}

/* ── LISTE COURS (vue liste, pas grille) ── */
.courses-categories,
.courses-list,
ul.courses-list {
  background: transparent !important;
}

.courses-categories li,
ul.courses-list li {
  background: transparent !important;
  list-style: none !important;
}

/* ── BARRE DE RECHERCHE CATALOGUE ── */
.search-courses,
.catalog-search,
.courses-search-form {
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-md) !important;
  padding: 16px !important;
  margin-bottom: 24px !important;
}

/* ── PAGE SESSIONS : cards ── */
.session-box {
  background: var(--e-bg-card) !important;
}
.session-box .session-title,
.session-box h4 {
  font-family: var(--e-font-d) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--e-txt-1) !important;
}
.session-box .session-coach,
.session-box .session-info {
  font-size: 13px !important;
  color: var(--e-txt-2) !important;
}
.session-box .session-date,
.session-box small {
  font-family: var(--e-font-m) !important;
  font-size: 11px !important;
  color: var(--e-txt-3) !important;
}

/* ── PROFIL FORMATEUR dans session card ── */
.session-box .user-avatar,
.session-box .coach-avatar {
  border: 2px solid var(--e-border-2) !important;
  border-radius: 50% !important;
}

/* ── CONTENU PRINCIPAL (fond blanc généré par Chamilo) ── */
#content_area,
#content-area,
.content-area,
#mainNavigation ~ div,
.chamilo-body,
.main-section,
.page-content {
  background: var(--e-bg-0) !important;
  background-color: var(--e-bg-0) !important;
}

/* ── SIDEBAR GAUCHE / BLOC LOGIN ── */
#loginbox,
#login-box,
.login-box,
.login_form,
.loginform {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-2) !important;
  border-radius: var(--e-r-xl) !important;
  padding: 28px 24px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

/* ── BLOCS SIDEBAR (Général, Navigation principale, Achat de cours) ── */
.sidebar_block,
[id*="Block"],
.panel-sidebar {
  background: var(--e-bg-card) !important;
  border: 1px solid var(--e-border-1) !important;
  border-radius: var(--e-r-lg) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}

[id*="BlockHeader"],
.sidebar_block_title {
  background: var(--e-bg-3) !important;
  color: var(--e-txt-3) !important;
  font-family: var(--e-font-m) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid var(--e-border-0) !important;
  cursor: pointer !important;
}

[id*="BlockContent"],
.sidebar_block_content {
  background: transparent !important;
  padding: 8px 0 !important;
}

[id*="BlockContent"] a,
.sidebar_block_content a {
  display: block !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  color: var(--e-txt-2) !important;
  border-radius: var(--e-r-sm) !important;
  transition: all var(--e-t1) !important;
}
[id*="BlockContent"] a:hover,
.sidebar_block_content a:hover {
  background: var(--e-bg-3) !important;
  color: var(--e-txt-1) !important;
}

/* ── FORMULAIRE LOGIN inline ── */
#login-block label,
.loginform label {
  color: var(--e-txt-3) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: var(--e-font-m) !important;
}

#login-block input,
.loginform input {
  background: var(--e-bg-input) !important;
  border: 1px solid var(--e-border-2) !important;
  color: var(--e-txt-1) !important;
  border-radius: var(--e-r-sm) !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}
#login-block input:focus,
.loginform input:focus {
  border-color: var(--e-red-border) !important;
  box-shadow: 0 0 0 3px var(--e-red-soft) !important;
  outline: none !important;
}

#login-block input[type="submit"],
.loginform input[type="submit"],
.login-button {
  background: var(--e-red) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 0 16px var(--e-red-glow) !important;
  width: 100% !important;
  padding: 10px !important;
  border-radius: var(--e-r-sm) !important;
  font-family: var(--e-font-b) !important;
}

/* ── LANGUE SELECT ── */
.language-select,
#header select,
.navbar select {
  background: var(--e-bg-2) !important;
  border: 1px solid var(--e-border-1) !important;
  color: var(--e-txt-2) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
}

/* ── ICÔNE MAISON / HOME ── */
.fa-home,
a[href*="index.php"] .fa { color: var(--e-txt-3) !important; }


/* ============================================================
   FIX v3 — SESSION CARDS + HOMEPAGE POPULAR COURSES + BADGES
   ============================================================ */

/* ── SESSION CARDS (image 4 : encore blanches) ── */
/* Chamilo utilise .well ou div sans classe spécifique */
.view-course-session,
.view_course_session,
.session-image-box,
.session-list > div,
.session-grid > div,
.catalog-session,
.well.session,
div[class*="session"] {
  background: #111220 !important;
  background-color: #111220 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  color: #9A9CBF !important;
}

/* Ciblage ultra-large : tout .well en contexte sessions */
.catalog-sessions .well,
#sessions-list .well,
.sessions-catalogue .well,
#catalog .well,
.page-content .well {
  background: #111220 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
  border-radius: 14px !important;
  color: #9A9CBF !important;
}

/* Titres dans session cards */
.catalog-sessions .well h4,
.catalog-sessions .well h4 a,
#sessions-list .well h4,
#sessions-list .well h4 a,
#catalog .well h4,
#catalog .well h4 a,
div[class*="session"] h4,
div[class*="session"] h4 a {
  color: #C8102E !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

/* Coach / infos sous le titre dans session cards */
.catalog-sessions .well p,
#sessions-list .well p,
div[class*="session"] p,
div[class*="session"] small {
  color: #9A9CBF !important;
  font-size: 13px !important;
}

/* ── COURS POPULAIRES SUR HOMEPAGE (image 2 : blancs) ── */
/* Chamilo génère ces cards via un shortcode/widget dans un .well ou .panel */
.homepage_main .course-box,
.homepage_main .panel,
.homepage_main .view_grid_course,
.homepage_intro .course-box,
.homepage_intro .panel,
#main .course-box:not(.dark),
#main .view_grid_course,
/* fallback général très large */
div.view_grid_course,
div.course-box {
  background: #111220 !important;
  background-color: #111220 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
}

/* Panel-body à l'intérieur (fond blanc résiduel) */
div.view_grid_course .panel-body,
div.course-box .panel-body,
div.view_grid_course .course-info,
div.course-box .course-info {
  background: transparent !important;
  color: #9A9CBF !important;
}

div.view_grid_course h4,
div.view_grid_course h4 a,
div.course-box h4,
div.course-box h4 a {
  color: #F2F3FF !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
}

/* ── BADGES CATÉGORIE : orange Chamilo → rouge Edify ── */
/* Chamilo utilise un label absolu sur l'image du cours */
.course-box .course-category,
.view_grid_course .course-category,
.course-category,
.catalog-badge,
span.label.course-category,
div.course-category,
.course-box .label,
.view_grid_course .label,
.course-tag,
[class*="course-label"],
/* ciblage par position absolue type Chamilo */
.course-box > span:first-child,
.view_grid_course > span:first-child {
  background: #C8102E !important;
  background-color: #C8102E !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── CATALOGUE : compteur et pagination ── */
.total_courses, p.total_courses,
#main > p:first-child { color: #5C5E7A !important; font-size: 12px !important; }

/* ── RECHERCHE CATALOGUE : fond sombre ── */
.search-form, #search-courses-form,
.catalog-search, .courses-search {
  background: #0F1018 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* Inputs de recherche dans le catalogue */
#catalog input[type="text"],
#catalog input[type="date"],
#catalog .form-control,
.catalog-search input,
.catalog-search .form-control {
  background: #141520 !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: #F2F3FF !important;
  border-radius: 8px !important;
}
#catalog input[type="text"]::placeholder,
#catalog input[type="date"]::placeholder {
  color: #3A3C52 !important;
}

/* ── BOUTON RECHERCHER dans le catalogue ── */
#catalog .btn-default,
.catalog-search .btn,
.catalog-search .btn-default {
  background: #1C1D2C !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: #9A9CBF !important;
  border-radius: 8px !important;
  transition: all 0.18s !important;
}
#catalog .btn-default:hover,
.catalog-search .btn:hover {
  background: #252637 !important;
  color: #F2F3FF !important;
}

/* ── ONGLETS CATALOGUE DE COURS / LISTE DES SESSIONS ── */
.catalog-tabs .nav-tabs,
#catalog .nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.catalog-tabs .nav-tabs > li > a,
#catalog .nav-tabs > li > a {
  color: #5C5E7A !important;
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding-bottom: 12px !important;
  transition: color 0.18s !important;
}
.catalog-tabs .nav-tabs > li.active > a,
#catalog .nav-tabs > li.active > a {
  color: #F2F3FF !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #C8102E !important;
}