/*=====================================================
EIFI Custom Styles
École Informatique du Finance - Design adapté au logo
Couleurs: Bleu foncé (#1a2b4a), Noir (#000000), Blanc (#ffffff)
======================================================*/

/* Empêcher le débordement horizontal */
body, html {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

/* Variables de couleurs EIFI */
:root {
  --eifi-blue-dark: #1a2b4a;
  --eifi-blue-darker: #0d1b2a;
  --eifi-black: #000000;
  --eifi-white: #ffffff;
  --eifi-blue-light: #2d4a6b;
  --eifi-accent: #3a5f8f;
}

/* Correction spécifique pour les éléments qui pourraient encore avoir du vert */
a:hover:not(.dropdown-item):not(.nav-link) {
  color: var(--eifi-blue-dark) !important;
}

/* S'assurer que tous les boutons utilisent les couleurs EIFI */
.theme-btn,
button.theme-btn,
a.theme-btn {
  background-color: var(--eifi-blue-dark) !important;
  border-color: var(--eifi-blue-dark) !important;
  color: var(--eifi-white) !important;
  position: relative;
  z-index: 1;
}

.theme-btn:hover,
button.theme-btn:hover,
a.theme-btn:hover {
  background-color: var(--eifi-black) !important;
  border-color: var(--eifi-black) !important;
  color: var(--eifi-white) !important;
}

/* Forcer le texte et les icônes à rester visibles au survol */
.theme-btn *,
.theme-btn span,
.theme-btn i,
button.theme-btn *,
button.theme-btn span,
button.theme-btn i,
a.theme-btn *,
a.theme-btn span,
a.theme-btn i {
  position: relative;
  z-index: 10 !important;
  color: var(--eifi-white) !important;
}

.theme-btn:hover *,
.theme-btn:hover span,
.theme-btn:hover i,
button.theme-btn:hover *,
button.theme-btn:hover span,
button.theme-btn:hover i,
a.theme-btn:hover *,
a.theme-btn:hover span,
a.theme-btn:hover i {
  color: var(--eifi-white) !important;
  position: relative;
  z-index: 10 !important;
}

/* Navbar - Fond blanc avec bordure - comportement standard */
.main-navigation {
  background-color: var(--eifi-white) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative; /* Laisser le JS gérer le fixed-top */
  z-index: 999;
}

/* Navbar fixe - classe ajoutée par JS */
.navbar.fixed-top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  animation: slide-down 0.7s;
  background-color: var(--eifi-white) !important;
}

/* Ajuster le header */
.header {
  padding-top: 0;
}

/* Header Top - Fond bleu foncé */
.header-top {
  background-color: var(--eifi-blue-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1000;
}

/* Header-top - Override du ::before pour remplacer la couleur orange */
.header-top::before {
  background: var(--eifi-blue-darker) !important; /* Remplace la couleur orange par le bleu foncé EIFI */
}

/* Header-top-left - Background conforme au design du logo EIFI */
.header-top-left {
  background: linear-gradient(135deg, var(--eifi-black) 0%, var(--eifi-blue-darker) 100%) !important;
  padding: 8px 20px !important;
  border-radius: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.header-top-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-top-social span {
  color: var(--eifi-white) !important;
  font-size: 14px;
  font-weight: 600;
  margin-right: 0;
}

.header-top-social a {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  color: var(--eifi-white) !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  text-align: center;
  border-radius: 50% !important;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-top-social a:hover {
  background: var(--eifi-white) !important;
  color: var(--eifi-blue-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
}

/* Correction du débordement du menu */
.navbar .container {
  max-width: 100%;
  overflow: visible !important;
  position: relative;
}

.navbar-nav {
  flex-wrap: wrap;
  max-width: 100%;
  overflow: visible !important;
}

.navbar #main_nav {
  flex-wrap: wrap;
  max-width: 100%;
  overflow: visible !important;
}

@media (min-width: 992px) {
  /* Logo à gauche, menu et boutons à droite */
  .navbar .container {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    flex-wrap: nowrap;
    gap: 0;
  }

  /* Le logo très proche du menu */
  .navbar .navbar-brand {
    margin-right: 5px !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  .navbar .navbar-brand-text {
    display: inline-block !important;
    font-size: 20px;
  }

  .navbar .navbar-brand {
    gap: 15px !important;
  }

  /* Le menu doit être aligné à droite, très proche du logo */
  .navbar #main_nav {
    flex: 1;
    min-width: 0;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .navbar-nav {
    flex-wrap: nowrap !important;
    flex: 1;
    justify-content: flex-end !important;
    min-width: 0;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Premier élément du menu (Accueil) très proche */
  .navbar-nav .nav-item:first-child .nav-link {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .navbar .nav-item {
    flex-shrink: 1;
    min-width: 0;
  }

  .navbar .nav-item .nav-link {
    white-space: nowrap;
    font-size: 13px;
    padding: 30px 8px !important;
    margin-right: 5px !important;
  }

  /* Zone de droite (recherche + bouton) poussée à droite */
  .nav-right {
    flex-shrink: 0;
    margin-left: auto;
    gap: 10px;
  }

  .nav-right-btn {
    white-space: nowrap;
  }

  .nav-right-btn .theme-btn {
    font-size: 12px;
    padding: 8px 15px;
  }

  .nav-right-btn .theme-btn span {
    font-size: 12px;
  }
}

@media (min-width: 1200px) {
  .navbar .nav-item .nav-link {
    font-size: 14px;
    padding: 30px 10px !important;
    margin-right: 8px !important;
  }
  
  .nav-right-btn .theme-btn {
    font-size: 13px;
    padding: 10px 18px;
  }
}

@media (min-width: 1400px) {
  .navbar .nav-item .nav-link {
    font-size: 15px;
    padding: 30px 12px !important;
    margin-right: 10px !important;
  }
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}

.navbar-brand-text {
  display: inline-block;
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-blue-darker) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.2px;
  white-space: nowrap;
  line-height: 1.3;
  text-transform: uppercase;
  position: relative;
  font-family: var(--heading-font, 'Yantramanav', sans-serif);
  text-shadow: 0 2px 4px rgba(26, 43, 74, 0.1);
  transition: all 0.3s ease;
}

.navbar-brand:hover .navbar-brand-text {
  background: linear-gradient(135deg, var(--eifi-blue-darker) 0%, var(--eifi-black) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-brand img {
  max-height: 60px;
  width: auto;
  height: auto;
  display: block;
}


.navbar-nav .nav-link {
  color: var(--eifi-blue-dark) !important;
  font-weight: 500;
  padding: 10px 15px !important;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--eifi-accent) !important;
}

/* Dropdown Menu */
.dropdown-menu {
  border: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: var(--eifi-blue-dark) !important;
  background-color: var(--eifi-blue-dark) !important;
}

/* Sous-menus imbriqués */
.dropdown-submenu {
  position: relative;
}

/* Cacher les sous-menus par défaut - IMPORTANT pour éviter qu'ils s'affichent au même niveau */
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -5px;
  margin-left: 5px;
  border-radius: 8px;
  min-width: 200px;
  z-index: 10001;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Même avec la classe 'show', ne pas afficher sauf au survol direct du parent */
.dropdown-submenu > .dropdown-menu.show {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Afficher uniquement au survol direct du parent */
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.dropdown-submenu > .dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Une seule flèche pour les sous-menus - désactiver les autres */
.dropdown-submenu > .dropdown-item::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  margin-right: 10px;
  font-size: 12px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Désactiver les autres flèches potentielles */
.dropdown-submenu > .dropdown-item i.fa-chevron-right,
.dropdown-submenu > .dropdown-item i.fas.fa-chevron-right {
  display: none !important;
}

.dropdown-submenu:hover > .dropdown-item::after {
  opacity: 1;
  transform: translateX(2px);
}

/* Sous-menus de niveau 2 (Master Réseaux, Master Conception) */
.dropdown-submenu .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -5px;
  margin-left: 5px;
  border-radius: 8px;
  min-width: 180px;
  z-index: 10002;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Même avec la classe 'show', ne pas afficher sauf au survol direct */
.dropdown-submenu .dropdown-submenu > .dropdown-menu.show {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.dropdown-submenu .dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu .dropdown-submenu:hover > .dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Règle très spécifique pour forcer le masquage des sous-menus imbriqués au niveau principal */
.navbar .nav-item .dropdown-menu > .dropdown-submenu > .dropdown-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.navbar .nav-item .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ajuster la position des sous-menus sur mobile */
@media (max-width: 991px) {
  .dropdown-submenu > .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0;
    box-shadow: none;
  }
}

/* Améliorer la stabilité du dropdown pendant le défilement */
.navbar .nav-item {
  position: relative;
  overflow: visible !important;
}

.navbar .nav-item.dropdown {
  position: relative;
}

.navbar .nav-item .dropdown-menu {
  margin-top: 0;
  padding-top: 5px;
  position: absolute !important;
  z-index: 10000 !important;
  overflow: visible !important;
  left: 0 !important;
  right: auto !important;
  top: 100% !important;
}

/* Alignement correct du dropdown sous son parent */
.navbar .nav-item.dropdown .dropdown-menu {
  left: 0 !important;
  transform-origin: top left;
}

/* S'assurer que le container ne cache pas le dropdown */
.main-navigation {
  overflow: visible !important;
  position: relative;
  z-index: 1000;
}

.navbar {
  overflow: visible !important;
  position: relative;
}

.navbar .container {
  overflow: visible !important;
  position: relative;
}

/* Zone de transition pour éviter la fermeture accidentelle */
.navbar .nav-item .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
  z-index: 10001;
}

.dropdown-item {
  color: var(--eifi-blue-dark) !important;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.dropdown-item:hover {
  background-color: var(--eifi-blue-dark) !important;
  color: var(--eifi-white) !important;
}

/* Forcer les couleurs EIFI sur tous les dropdowns */
.navbar .dropdown-menu,
.navbar .nav-item .dropdown-menu,
.navbar .nav-item.mega-menu .dropdown-menu {
  background: var(--eifi-blue-dark) !important;
  background-color: var(--eifi-blue-dark) !important;
}

.navbar .dropdown-menu .dropdown-item {
  color: var(--eifi-white) !important;
}

.navbar .dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--eifi-white) !important;
}

/* Mega Menu */
.mega-menu .mega-content {
  background-color: var(--eifi-white);
  width: 100% !important;
  max-width: 100% !important;
}

.mega-menu .dropdown-menu {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  background: var(--eifi-blue-dark) !important;
  background-color: var(--eifi-blue-dark) !important;
}

.mega-menu h5 {
  color: var(--eifi-blue-dark);
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.mega-menu-item {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu-item li {
  margin-bottom: 8px;
}

.mega-menu-item .dropdown-item {
  color: var(--eifi-blue-dark) !important;
  padding: 10px 15px !important;
  font-size: 15px;
  white-space: normal;
}

.mega-menu-item .dropdown-item:hover {
  background-color: var(--eifi-blue-dark) !important;
  color: var(--eifi-white) !important;
  padding-left: 20px !important;
}

/* Theme Button - Style EIFI */
.theme-btn {
  background-color: var(--eifi-blue-dark) !important;
  color: var(--eifi-white) !important;
  border: 2px solid var(--eifi-blue-dark);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

/* S'assurer que le texte reste visible au survol */
.theme-btn,
.theme-btn span,
.theme-btn i {
  position: relative;
  z-index: 2;
}

.theme-btn:hover {
  background-color: var(--eifi-black) !important;
  border-color: var(--eifi-black);
  color: var(--eifi-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 43, 74, 0.3);
}

/* Forcer le texte à rester visible au survol */
.theme-btn:hover,
.theme-btn:hover span,
.theme-btn:hover i {
  color: var(--eifi-white) !important;
  position: relative;
  z-index: 2;
}

/* Désactiver complètement le ::before du thème original qui masque le texte */
.theme-btn::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  z-index: -999 !important;
}

.theme-btn:hover::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  transform: none !important;
  z-index: -999 !important;
}

.theme-btn2 {
  background-color: transparent !important;
  color: var(--eifi-blue-dark) !important;
  border: 2px solid var(--eifi-blue-dark);
  position: relative;
  z-index: 1;
}

/* S'assurer que le texte reste visible au survol */
.theme-btn2,
.theme-btn2 span,
.theme-btn2 i {
  position: relative;
  z-index: 2;
}

.theme-btn2:hover {
  background-color: var(--eifi-blue-dark) !important;
  color: var(--eifi-white) !important;
}

/* Forcer le texte à rester visible au survol */
.theme-btn2:hover,
.theme-btn2:hover span,
.theme-btn2:hover i {
  color: var(--eifi-white) !important;
  position: relative;
  z-index: 2;
}

/* Désactiver complètement le ::before du thème original qui masque le texte */
.theme-btn2::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  z-index: -999 !important;
}

.theme-btn2:hover::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  transform: none !important;
  z-index: -999 !important;
}

/* Hero Section */
.hero-section {
  position: relative;
}

.hero-single {
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-single::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(26, 43, 74, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-title {
  color: var(--eifi-white) !important;
}

.hero-title span {
  color: var(--eifi-accent) !important;
}

.hero-sub-title {
  color: var(--eifi-white) !important;
}

/* Feature Area */
.feature-area {
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-blue-darker) 100%);
  padding: 60px 0;
}

.feature-item {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 30px;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.feature-title {
  color: var(--eifi-white) !important;
}

.feature-content p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Site Heading */
.site-title-tagline {
  color: var(--eifi-blue-dark) !important;
  font-weight: 600;
}

.site-title {
  color: var(--eifi-blue-dark) !important;
}

.site-title span {
  color: var(--eifi-accent) !important;
}

/* About Section */
.about-area {
  background-color: #f8f9fa;
}

/* Présentation du Directeur */
.director-presentation {
  position: relative;
  width: 100%;
}

.director-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.director-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  min-height: 500px;
}

.director-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-black) 100%);
  padding: 25px 30px;
  color: var(--eifi-white);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}

.director-info {
  text-align: left;
}

.director-name {
  color: var(--eifi-white) !important;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  font-family: var(--heading-font, 'Yantramanav', sans-serif);
}

.director-title {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}

/* Counter Area */
.counter-area {
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-black) 100%);
}

.counter-box {
  color: var(--eifi-white);
}

.counter-box .title {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Course Area */
.course-item {
  border: 1px solid rgba(26, 43, 74, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.course-item:hover {
  box-shadow: 0 10px 30px rgba(26, 43, 74, 0.15);
  transform: translateY(-5px);
}

.course-title a {
  color: var(--eifi-blue-dark) !important;
}

.course-title a:hover {
  color: var(--eifi-accent) !important;
}

/* Choose Area */
.choose-area {
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-blue-darker) 100%);
  position: relative;
  z-index: 1;
}

/* Assurer la visibilité du texte et des icônes dans choose-area */
.choose-area .site-title-tagline {
  color: var(--eifi-white) !important;
}

.choose-area .site-title-tagline i {
  color: var(--eifi-white) !important;
}

.choose-area .site-title {
  color: var(--eifi-white) !important;
}

.choose-area .site-title span {
  color: var(--eifi-accent) !important;
}

.choose-area .text-white,
.choose-area p.text-white {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Styles pour les éléments choose-item */
.choose-area .choose-item-info h4 {
  color: var(--eifi-blue-dark) !important;
}

.choose-area .choose-item-info p {
  color: var(--eifi-blue-dark) !important;
  opacity: 0.8;
}

/* Footer */
.footer-area {
  background: linear-gradient(135deg, var(--eifi-blue-darker) 0%, var(--eifi-black) 100%);
}

.footer-widget-title {
  color: var(--eifi-white) !important;
}

.footer-list a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer-list a:hover {
  color: var(--eifi-white) !important;
}

.copyright {
  background-color: var(--eifi-black);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright-text {
  color: rgba(255, 255, 255, 0.7) !important;
}

.copyright-text a {
  color: var(--eifi-white) !important;
}

/* Department Area */
.department-item {
  background-color: var(--eifi-white);
  border: 1px solid rgba(26, 43, 74, 0.1);
  border-radius: 10px;
  padding: 30px;
  transition: all 0.3s ease;
}

.department-item:hover {
  box-shadow: 0 10px 30px rgba(26, 43, 74, 0.15);
  transform: translateY(-5px);
  border-color: var(--eifi-blue-dark);
}

.department-title a {
  color: var(--eifi-blue-dark) !important;
}

.department-title a:hover {
  color: var(--eifi-accent) !important;
}

/* Testimonial Area */
.testimonial-area {
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-blue-darker) 100%);
}

/* Blog Area */
.blog-item {
  border: 1px solid rgba(26, 43, 74, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.blog-item:hover {
  box-shadow: 0 10px 30px rgba(26, 43, 74, 0.15);
  transform: translateY(-5px);
}

.blog-title a {
  color: var(--eifi-blue-dark) !important;
}

.blog-title a:hover {
  color: var(--eifi-accent) !important;
}

/* Style pour la description des actualités */
.blog-text {
  color: #666 !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 15px 0 20px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA Area */
.cta-area {
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-black) 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.cta-area::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/cta/01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.15;
  z-index: 0;
}

.cta-wrapper {
  position: relative;
  z-index: 1;
}

.cta-left {
  padding-right: 40px;
}

@media (max-width: 991px) {
  .cta-left {
    padding-right: 0;
    margin-bottom: 40px;
  }
}

.cta-image {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.cta-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  transition: transform 0.5s ease;
}

.cta-image:hover img {
  transform: scale(1.05);
}

.cta-content {
  position: relative;
  padding: 80px 40px;
  margin-top: 0;
  z-index: 1;
}

.cta-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-blue-darker) 100%);
  border-radius: 80px 80px 80px 0;
  z-index: -1;
}

.cta-content::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  right: 8px;
  border: 8px double var(--eifi-white);
  border-radius: 70px 70px 70px 0;
  z-index: -1;
}

.cta-content h1 {
  color: var(--eifi-white) !important;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 30px;
  margin-top: 15px;
}

.cta-btn .theme-btn {
  background: var(--eifi-white) !important;
  color: var(--eifi-blue-dark) !important;
  font-weight: 600;
  padding: 15px 35px;
  font-size: 16px;
  border: none;
}

.cta-btn .theme-btn:hover {
  background: var(--eifi-accent) !important;
  color: var(--eifi-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(255, 255, 255, 0.3);
}

@media (max-width: 991px) {
  .cta-content {
    padding: 60px 30px;
    margin-top: 0;
  }
  
  .cta-content h1 {
    font-size: 32px;
  }
  
  .cta-content p {
    font-size: 16px;
  }
}

/* Event Area */
.event-item {
  background-color: var(--eifi-white);
  border: 1px solid rgba(26, 43, 74, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.event-item:hover {
  box-shadow: 0 10px 30px rgba(26, 43, 74, 0.15);
  transform: translateY(-5px);
}

.event-title a {
  color: var(--eifi-blue-dark) !important;
}

.event-title a:hover {
  color: var(--eifi-accent) !important;
}

/* Style pour la description des événements (contenu CKEditor) */
.event-description {
  color: var(--body-text-color, #666) !important;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.event-description p {
  margin-bottom: 10px;
}

.event-description ul,
.event-description ol {
  margin-left: 20px;
  margin-bottom: 10px;
}

.event-description strong {
  font-weight: 600;
  color: var(--eifi-blue-dark);
}

.event-description a {
  color: var(--eifi-blue-dark);
  text-decoration: underline;
}

.event-description a:hover {
  color: var(--eifi-accent);
}

/* Enroll Area */
.enroll-area {
  background: linear-gradient(135deg, var(--eifi-blue-dark) 0%, var(--eifi-blue-darker) 100%);
}

.enroll-form {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.enroll-form-header h3 {
  color: var(--eifi-blue-dark) !important;
}

.form-control,
.form-select {
  border: 1px solid rgba(26, 43, 74, 0.2);
  border-radius: 5px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--eifi-blue-dark);
  box-shadow: 0 0 0 0.2rem rgba(26, 43, 74, 0.25);
}

/* Team Area */
.team-item {
  border: 1px solid rgba(26, 43, 74, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.team-item:hover {
  box-shadow: 0 10px 30px rgba(26, 43, 74, 0.15);
  transform: translateY(-5px);
}

.team-bio h5 a {
  color: var(--eifi-blue-dark) !important;
}

.team-bio h5 a:hover {
  color: var(--eifi-accent) !important;
}

/* Harmonisation des dimensions des photos dans la section team */
.team-img {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.team-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50px 50px 50px 0;
  transition: transform 0.3s ease;
}

.team-item:hover .team-img img {
  transform: scale(1.05);
}

/* Gallery Area */
.gallery-item {
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Pagination Styles */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 40px;
}

.pagination .page-item {
  margin: 0 2px;
}

.pagination .page-link {
  color: var(--eifi-blue-dark);
  background-color: var(--eifi-white);
  border: 2px solid var(--eifi-blue-dark);
  border-radius: 5px;
  padding: 10px 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}

.pagination .page-link:hover {
  background-color: var(--eifi-blue-dark);
  color: var(--eifi-white);
  border-color: var(--eifi-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 43, 74, 0.3);
}

.pagination .page-item.active .page-link {
  background-color: var(--eifi-blue-dark);
  color: var(--eifi-white);
  border-color: var(--eifi-blue-dark);
}

.pagination .page-item.disabled .page-link {
  color: #ccc;
  background-color: #f5f5f5;
  border-color: #ddd;
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination .page-link i {
  font-size: 14px;
}

.gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(26, 43, 74, 0.3);
}

/* Partner Area */
.partner-area {
  background-color: #f8f9fa;
}

/* Scroll Top */
#scroll-top {
  background-color: var(--eifi-blue-dark) !important;
}

#scroll-top:hover {
  background-color: var(--eifi-black) !important;
}

/* Responsive adjustments pour mobile */
@media (max-width: 991px) {
  /* Header-top caché sur mobile */
  .header-top {
    display: none !important;
  }

  /* Navbar fixe sur mobile (maintenant en haut) */
  .main-navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999 !important;
    overflow: visible;
  }

  /* Navbar elle-même */
  .navbar {
    position: relative !important;
    top: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    z-index: 999 !important;
  }


  /* Container navbar sur mobile */
  .navbar .container {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
    margin: 0 auto;
  }

  /* Ajuster le padding du main pour mobile (plus besoin de compenser le header-top) */
  .main {
    padding-top: 60px !important; /* navbar (~60px) */
  }

  /* Menu mobile collapsible - limiter la hauteur et empêcher le débordement */
  .navbar-collapse,
  .navbar-collapse.collapsing,
  .navbar-collapse.show {
    background-color: var(--eifi-white) !important;
    width: 100%;
    max-width: 100%;
    z-index: 1001 !important;
  }

  .navbar-collapse {
    margin-top: 0;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 60px) !important; /* Limiter la hauteur */
    overflow-y: auto !important; /* Scroll vertical si nécessaire */
    overflow-x: hidden !important; /* Pas de scroll horizontal */
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }

  /* Désactiver l'animation de transition pour éviter le décalage texte/fond */
  .navbar-collapse.collapsing {
    transition: none !important;
    display: none !important; /* On cache pendant l'état transitoire pour éviter le glitch */
  }

  /* Affichage direct quand la classe show est ajoutée */
  .navbar-collapse.show {
    display: block !important;
    transition: none !important;
    animation: fadeIn 0.3s ease-in-out;
  }

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

  /* Navbar-nav sur mobile */
  .navbar-nav {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 10px 0; /* Un peu de padding interne */
  }

  /* Items du menu mobile */
  .navbar-nav .nav-item {
    width: 100%;
    max-width: 100%;
  }

  .navbar-nav .nav-link {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Logo sur mobile */
  .navbar-brand {
    margin-right: 0 !important;
    padding-left: 10px !important;
    max-width: calc(100% - 100px); /* Laisser de l'espace pour le bouton hamburger */
    overflow: hidden;
    flex-wrap: nowrap;
  }

  .navbar-brand img {
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
  }

  .navbar-brand-text {
    display: none !important; /* Cacher complètement le texte sur mobile */
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .navbar-brand {
    gap: 0 !important; /* Supprimer l'espace entre logo et texte sur mobile */
  }
}


  .header-top-contact ul {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .navbar-brand-text {
    font-size: 12px !important;
    display: none !important; /* Cacher le texte sur mobile pour économiser l'espace */
  }
  
  .hero-title {
    font-size: 28px !important;
  }

  /* Ajustements supplémentaires pour petits écrans */
  .header-top {
    padding: 8px 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 1000 !important;
    background-color: var(--eifi-blue-dark) !important;
  }

  .main-navigation {
    top: 35px !important;
  }

  .main {
    padding-top: 90px !important;
  }
}