/**
 * ============================================================
 * COMPAGNONS PRO ACADEMY — Charte graphique officielle
 * Palette : Bleu Marine #1A3680 + Or #FFB800
 * ============================================================
 */

/* ---- Import de la police Poppins pour les titres ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   1. VARIABLES CSS — Override de toute la palette de couleurs
   ============================================================ */
:root,
.home_1st,
.home_2nd,
.home_3rd,
.home_4th,
.home_5th {
  /* Couleurs principales */
  --cp-navy:          #1A3680;
  --cp-navy-dark:     #0D1A4A;
  --cp-navy-light:    #2B4E9E;
  --cp-gold:          #FFB800;
  --cp-gold-dark:     #E6A500;
  --cp-gold-light:    rgba(255, 184, 0, 0.15);

  /* Override des variables du template */
  --primary-color:    #5A6478;
  --primary-color-2:  #6E798A;
  --secondery-color:  #5A6478;

  --color-1:          #1A2847;  /* Titres sombres (ex-purple-black → navy) */
  --color-2:          #0D1A4A;
  --color-3:          #505763;
  --color-4:          #FFB800;  /* Accent principal : or (ex-purple) */
  --color-5:          #1A2847;
  --color-6:          #5A6478;
  --color-7:          #0D1A4A;  /* Fond sombre (ex-dark purple → dark navy) */
  --color-8:          rgba(255, 255, 255, 0.80);
  --color-9:          #fff;
  --color-10:         #1E293B;
  --color-11:         #6E798A;
  --color-12:         rgba(255, 184, 0, 0.14); /* Light accent bg (ex-light purple) */
  --color-13:         #6D7487;
  --color-14:         #1A2847;
  --color-15:         rgba(255, 184, 0, 0.32); /* Semi-transparent gold */
  --color-16:         rgba(90, 100, 120, 0.67);
  --color-17:         #1A3680;  /* Bleu marine (ex-blue #0080FF) */

  --bg-white:         #fff;
  --bg-white-2:       #F0F4FF;  /* Fond clair légèrement bleuté */
  --bg-white-3:       #fff;
  --bg-white-4:       #fff;
  --bg-white-5:       #fff;
  --bg-white-6:       #444;
  --bg-white-7:       #fff;

  --hover-color:      #EEF2FF;
  --hover-color-2:    #EEF2FF;
  --border-color:     rgba(26, 54, 128, 0.15);

  --color-linear:     linear-gradient(120deg, #EEF2FF 0%, #FFF8E0 100%);
  --box-shadow:       0px 4px 24px rgba(26, 54, 128, 0.12);
}

/* ============================================================
   2. TYPOGRAPHIE — Poppins pour les titres
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Inter', sans-serif !important;
  color: #1A2847;
}

/* ============================================================
   3. BARRE SUPÉRIEURE (Sub-header) — Bleu marine
   ============================================================ */
.sub-header {
  background: linear-gradient(90deg, #0D1A4A 0%, #1A3680 100%) !important;
  border-bottom: 2px solid rgba(255, 184, 0, 0.35);
  padding: 10px 0 !important;
}

.sub-header .icon a {
  color: rgba(255, 255, 255, 0.90) !important;
  font-weight: 500;
}
.sub-header .icon a:hover {
  color: #FFB800 !important;
}

.sub-header .right-icon i {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.2s;
}
.sub-header .right-icon i:hover {
  color: #FFB800 !important;
}

/* Sélecteur de langue dans la top bar */
.right-icon .language-control .nice-select {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 6px !important;
}
.right-icon .language-control .nice-select .option {
  color: #1A2847 !important;
}

/* ============================================================
   4. BARRE DE NAVIGATION PRINCIPALE — Sticky + effets premium
   ============================================================ */

/* ── État par défaut (haut de page) ── */
.menubar {
  position: relative !important;
  z-index: 1050 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 5px 0 !important;
  border-bottom: 3px solid #FFB800 !important;
  box-shadow: 0 2px 20px rgba(26, 54, 128, 0.08) !important;
  transition:
    padding          0.38s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       0.38s cubic-bezier(0.4, 0, 0.2, 1),
    background       0.38s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter  0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Fixé en haut après scroll (classe ajoutée par JS) ── */
.menubar.nav-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  animation: navSlideDown 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Barre de progression de lecture (dorée, 3px en haut) */
.menubar::after {
  content: '' !important;
  position: absolute !important;
  top: -3px !important;
  left: 0 !important;
  height: 3px !important;
  width: var(--read-progress, 0%) !important;
  background: linear-gradient(90deg, #1A3680 0%, #FFB800 60%, #E6A500 100%) !important;
  z-index: 2 !important;
  transition: width 0.08s linear !important;
  pointer-events: none !important;
}

/* ── État scrollé (ajout de classe .scrolled via JS) ── */
.menubar.scrolled {
  padding: 8px 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow:
    0 4px 28px rgba(26, 54, 128, 0.14),
    0 1px 0   rgba(255, 184, 0, 0.35) !important;
}

/* ── Logo — flotte par-dessus le menubar ── */
.menubar .navbar-brand.logo,
.menubar a.logo {
  position: relative !important;
  z-index: 300 !important;
  display: flex !important;
  align-items: center !important;
}

.menubar .logo img,
.navbar-brand.logo img {
  height: 90px !important;
  margin-bottom: -28px !important;
  filter: drop-shadow(0 6px 18px rgba(26, 54, 128, 0.22)) !important;
  transition:
    height        0.38s cubic-bezier(0.4, 0, 0.2, 1),
    margin-bottom 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    filter        0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: height !important;
}

.menubar.scrolled .logo img,
.menubar.scrolled .navbar-brand.logo img {
  height: 60px !important;
  margin-bottom: -12px !important;
  filter: drop-shadow(0 3px 10px rgba(26, 54, 128, 0.18)) !important;
}

/* ── Aligner nav-links + search à droite ── */
.menubar .navbar-collapse#navbarSupportedContent {
  justify-content: flex-end !important;
}
.menubar .navbar-collapse#navbarSupportedContent .right-menubar {
  margin-left: 0.75rem !important;
}

/* ── Liens de navigation ── */
.menubar .right-menubar a,
.navbar-nav .nav-link {
  color: #1A2847 !important;
  font-weight: 600 !important;
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
  position: relative !important;
  transition: color 0.22s ease, background 0.22s ease !important;
}
/* ── nav-link text-nowrap : bouton visible ── */
.navbar-nav .nav-link.text-nowrap {
  background: rgba(26, 54, 128, 0.07) !important;
  border-radius: 22px !important;
  padding: 6px 18px !important;
  transition: background 0.22s ease, color 0.22s ease !important;
}
.navbar-nav .nav-link.text-nowrap:hover {
  background: #1A3680 !important;
  color: #fff !important;
}
.navbar-nav .nav-link.text-nowrap::after {
  display: none !important;
}
/* ── Connexion : bouton solide ── */
a.sign-in-log,
a[href*="login"].ms-3 {
  background: #1A3680 !important;
  border-radius: 22px !important;
  padding: 9px 24px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  box-shadow: 0 4px 18px rgba(26, 54, 128, 0.35) !important;
  text-decoration: none !important;
  border: 2px solid #1A3680 !important;
}
a.sign-in-log:hover,
a[href*="login"].ms-3:hover {
  background: #FFB800 !important;
  border-color: #FFB800 !important;
  color: #1A2847 !important;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.40) !important;
  transform: translateY(-2px) !important;
}
/* Soulignement animé au survol */
.navbar-nav .nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: #FFB800 !important;
  border-radius: 2px !important;
  transition: width 0.25s ease, left 0.25s ease !important;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 80% !important;
  left: 10% !important;
}
.menubar .right-menubar a:hover,
.navbar-nav .nav-link:hover {
  color: #1A3680 !important;
}

/* ── Dropdown badge "Courses" ── */
.header-dropdown {
  background-color: rgba(255, 184, 0, 0.12) !important;
  border-radius: 6px !important;
  color: #1A3680 !important;
  font-weight: 600 !important;
}
.menubar li .header-dropdown {
  color: #1A3680 !important;
}

/* ── Bouton Sign in / Sign up ── */
.sign-in-box .sign-up-btn {
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  padding: 10px 22px !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 14px rgba(26, 54, 128, 0.30) !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.sign-in-box .sign-up-btn:hover {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(255, 184, 0, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* ── Dropdown menu ── */
.navbarHover {
  border-top: 3px solid #FFB800 !important;
  box-shadow: 0 10px 40px rgba(26, 54, 128, 0.16) !important;
  border-radius: 0 0 14px 14px !important;
  backdrop-filter: blur(16px) !important;
  animation: dropdownFadeIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-width: 420px !important;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.navbarHover a:hover {
  color: #1A3680 !important;
  background-color: rgba(26, 54, 128, 0.05) !important;
  padding-left: 18px !important;
  transition: all 0.18s ease !important;
}
.navbarHover a:hover .text-cat {
  color: #1A3680 !important;
}
.text-cat,
.navbar-nav .navbarHover li a {
  font-size: 17px !important;
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
/* Bouton "Toutes les formations" — premier item du dropdown */
.navbar-nav .navbarHover li:first-child {
  padding: 6px 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
}
.navbar-nav .navbarHover li:first-child > a {
  background-color: #68768B !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
}
.navbar-nav .navbarHover li:first-child > a:hover {
  background-color: #1A3680 !important;
  color: #FFB800 !important;
}
.navbar-nav .navbarHover li,
.navbar-nav .navbarHover li a {
  display: block !important;
  width: 100% !important;
}
.navbarHover a {
  display: block !important;
  width: 100% !important;
}

/* ── Icônes panier/wishlist/search dans la navbar — boutons ronds ── */
.menubar .right-menubar .header-search-icon,
.menubar .right-menubar a:not(.nav-link):not(.navbar-brand):not(.ms-3):not(.cp-btn-moncompte) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(26, 54, 128, 0.07) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
/* ── header-search-icon actif par défaut ── */
.menubar .right-menubar .header-search-icon {
  background: rgba(26, 54, 128, 0.15) !important;
}
.menubar .right-menubar .header-search-icon svg path {
  fill: #1A3680 !important;
}
.menubar .right-menubar .header-search-icon:hover,
.menubar .right-menubar a:not(.nav-link):not(.navbar-brand):not(.ms-3):not(.cp-btn-moncompte):hover {
  background: rgba(26, 54, 128, 0.22) !important;
  transform: scale(1.08) !important;
}
.menubar .right-menubar a.cp-btn-moncompte {
  display: inline-flex !important;
  align-items: center !important;
  border: 2px solid #1A3680 !important;
  border-radius: 50px !important;
  padding: 5px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A3680 !important;
  background: #fff !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  text-decoration: none !important;
}
.menubar .right-menubar a.cp-btn-moncompte:hover {
  background: #1A3680 !important;
  color: #fff !important;
}
.menubar .right-menubar i {
  transition: transform 0.2s ease, color 0.2s ease !important;
}
.menubar .right-menubar i:hover {
  transform: scale(1.18) !important;
  color: #FFB800 !important;
}

/* ============================================================
   5. BOUTONS PRINCIPAUX
   ============================================================ */

/* Bouton primaire */
.btn-primary,
.btn-purple,
[class*="btn-"]:not(.btn-outline):not(.btn-light):not(.btn-white):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-secondary):not(.btn-dark):not(.btn-info) {
  border-radius: 8px !important;
}

/* Couleur des étoiles de notation */
.star-icon, .rating i, .fa-star {
  color: #FFB800 !important;
}

/* Badges / étiquettes */
.badge-purple,
[style*="background-color: #754FFE"],
[style*="background:#754FFE"] {
  background-color: #1A3680 !important;
}

/* ============================================================
   6. CARDS DE COURS — Layout horizontal compact & premium
   ============================================================ */

/* ── GRID : cartes côte à côte ── */
.course-group-slider {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}
@media (max-width: 991px) {
  .course-group-slider { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}
@media (max-width: 576px) {
  .course-group-slider { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── Chaque carte ── */
.single-popup-course.epopCourse {
  width: 100% !important;
  padding: 0 !important;
}
.single-popup-course.epopCourse .courses-card-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(26, 54, 128, 0.09) !important;
  border: 1px solid rgba(26, 54, 128, 0.06) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  text-decoration: none !important;
  position: relative !important;
}
.single-popup-course.epopCourse .courses-card-body:hover {
  box-shadow: 0 10px 32px rgba(26, 54, 128, 0.18) !important;
  transform: translateY(-4px) !important;
}

/* ── Image carrée en haut ── */
.single-popup-course.epopCourse .courses-card-image {
  width: 100% !important;
  height: 170px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.single-popup-course.epopCourse .courses-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
  display: block !important;
}
.single-popup-course.epopCourse .courses-card-body:hover .courses-card-image img {
  transform: scale(1.06) !important;
}

/* Overlay dégradé sur l'image */
.single-popup-course.epopCourse .courses-card-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(13,26,74,0.35) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

/* Badge niveau ── */
.single-popup-course.epopCourse .courses-card-image-text {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2 !important;
}
.single-popup-course.epopCourse .courses-card-image-text h3 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  background: rgba(26, 54, 128, 0.92) !important;
  color: #fff !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(4px) !important;
}

/* Wishlist ── */
.single-popup-course.epopCourse .courses-icon {
  display: none !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  transition: transform 0.2s !important;
}
.single-popup-course.epopCourse .courses-icon:hover { transform: scale(1.15) !important; }
.single-popup-course.epopCourse .courses-icon i { font-size: 12px !important; color: #bbb !important; }
.single-popup-course.epopCourse .courses-icon.red-heart i { color: #e74c3c !important; }

/* ── Zone texte ── */
.single-popup-course.epopCourse .courses-text {
  flex: 1 !important;
  padding: 14px 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Titre ── */
.single-popup-course.epopCourse .courses-text h5 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A3680 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Note ── */
.single-popup-course.epopCourse .review-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* Masquer les avis/étoiles sur tout le site */
.review-icon-star { display: none !important; }
.single-popup-course.epopCourse .review-icon-star {
  display: none !important;
}
.single-popup-course.epopCourse .review-icon-star p {
  font-size: 11px !important;
  color: #999 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.single-popup-course.epopCourse .review-icon-star i {
  font-size: 11px !important;
  color: #FFB800 !important;
}
.single-popup-course.epopCourse .review-btn { display: none !important; }

/* Masquer "0 Leçons" et "0 Heures" partout (garder le logo CP) */
.duration-time > span { display: none !important; }
.duration-time > p { display: none !important; }
.duration-time > svg { display: none !important; }
.duration-time .course-card-cp-logo { display: block !important; }
/* Popup hover : masquer leçons (1er) et heures (2ème), garder Maître Compagnons Pro® (dernier) */
.course-popover-content .course-meta > span:nth-child(1),
.course-popover-content .course-meta > span:nth-child(2) { display: none !important; }
.course-popover-content .course-meta > span:last-child { display: inline-flex !important; }

/* Durée ── */
.single-popup-course.epopCourse .duration-time p {
  font-size: 11px !important;
  color: #aaa !important;
  margin: 0 !important;
}

/* Bouton S'inscrire ── */
.single-popup-course.epopCourse .courses-price-border {
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(26,54,128,0.07) !important;
}
.single-popup-course.epopCourse .courses-price {
  display: flex !important;
  justify-content: flex-end !important;
}
/* Remplacer "S'inscrire maintenant" par "Découvrir" partout */
.enrollBtn {
  font-size: 0 !important;
  visibility: visible !important;
}
.enrollBtn::after {
  content: 'Découvrir';
  font-size: 12px;
  visibility: visible;
}
.enrollBtn i { display: none !important; }

.single-popup-course.epopCourse .enrollBtn {
  display: inline-block !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%) !important;
  border-radius: 30px !important;
  padding: 7px 18px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 10px rgba(26,54,128,0.2) !important;
}
.single-popup-course.epopCourse:hover .enrollBtn {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  color: #1A3680 !important;
  box-shadow: 0 4px 14px rgba(255,184,0,0.35) !important;
}

/* Prix des cours */
.courses-price-left h5,
.courses-card-body .price {
  color: #1A3680 !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Catégories en pills */
.courses-card-body .category-label,
.course-category {
  background-color: rgba(255, 184, 0, 0.15) !important;
  color: #1A3680 !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
}

/* Lien "Voir tout" */
.view-all-btn,
a[href*="courses"]:not(.nav-link) {
  color: #1A3680 !important;
  font-weight: 600 !important;
}
.view-all-btn:hover {
  color: #FFB800 !important;
}

/* ============================================================
   7. HERO SECTION / SECTION D'ACCUEIL
   ============================================================ */

/* Titres principaux de section */
.section-title h1,
.section-title h2,
.hero-content h1,
.hero-content h2 {
  font-family: 'Poppins', sans-serif !important;
  color: #1A2847 !important;
  font-weight: 800 !important;
}

/* Accent dans les titres (span coloré) */
.text-purple,
.text-primary-brand,
[style*="color: #754FFE"],
[style*="color:#754FFE"] {
  color: #FFB800 !important;
}

/* Gradient de fond sections alternées */
.section-bg,
.bg-light-purple,
.bg-gradient-section {
  background: linear-gradient(120deg, #F0F4FF 0%, #FFF8E0 100%) !important;
}

/* ============================================================
   8. FORMULAIRES
   ============================================================ */
.form-control:focus,
.nice-select.open {
  border-color: #1A3680 !important;
  box-shadow: 0 0 0 3px rgba(26, 54, 128, 0.15) !important;
}

/* Bouton de recherche / CTA formulaire */
.search-form button,
.search-btn-primary {
  background: #1A3680 !important;
  color: #fff !important;
  border: none !important;
}
.search-form button:hover {
  background: #FFB800 !important;
}

/* ============================================================
   9. FOOTER — Fond marine profond
   ============================================================ */
.footer {
  background: linear-gradient(160deg, #060D2A 0%, #0D1A4A 100%) !important;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1A3680, #FFB800, #1A3680);
}

.footer h1 {
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px !important;
}

.footer p,
.footer li,
.footer a {
  color: rgba(255, 255, 255, 0.72) !important;
}

.footer a:hover {
  color: #FFB800 !important;
}

.footer img {
  height: 52px !important;
  width: auto !important;
  object-fit: contain;
}

/* Logo footer avec légère lueur dorée */
.footer .col-lg-5 img:first-child {
  filter: brightness(1) drop-shadow(0 0 8px rgba(255, 184, 0, 0.25));
}

/* Formulaire newsletter dans le footer */
.lattest-news h1 {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px !important;
}

.lattest-news form {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transition: border-color 0.2s;
}
.lattest-news form:focus-within {
  border-color: rgba(255, 184, 0, 0.60) !important;
}

/* Bouton flèche newsletter → doré */
.form-arrow {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(255, 184, 0, 0.40) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.form-arrow:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 18px rgba(255, 184, 0, 0.55) !important;
}

/* Barre inférieure du footer */
.eBottomfooter {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.eBottomfooter p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
}

/* ============================================================
   10. BREADCRUMB
   ============================================================ */
.breadcrumb-area,
.course-breadcrumb {
  background: linear-gradient(135deg, #0D1A4A 0%, #1A3680 100%) !important;
}
.breadcrumb-area h1,
.breadcrumb-area h2 {
  color: #fff !important;
}
.breadcrumb-item a {
  color: rgba(255, 184, 0, 0.85) !important;
}
.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.70) !important;
}

/* ============================================================
   11. SIDEBAR & FILTRES
   ============================================================ */
.sidebar-widget-title,
.filter-title {
  color: #1A2847 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

/* Checkbox accent */
input[type="checkbox"]:checked {
  accent-color: #1A3680;
}

/* Range slider */
input[type="range"] {
  accent-color: #1A3680;
}

/* ============================================================
   12. PAGINATION
   ============================================================ */
.pagination .page-item.active .page-link {
  background-color: #1A3680 !important;
  border-color: #1A3680 !important;
  color: #fff !important;
}
.pagination .page-link {
  color: #1A3680 !important;
}
.pagination .page-link:hover {
  background-color: #EEF2FF !important;
  color: #1A3680 !important;
}

/* ============================================================
   13. TAGS & BADGES
   ============================================================ */
.badge-course-level,
.tag-pill {
  background-color: #EEF2FF !important;
  color: #1A3680 !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
}

/* Badge "Bestseller" / "New" */
.badge-bestseller {
  background-color: #FFB800 !important;
  color: #fff !important;
}

/* ============================================================
   14. INSTRUCTOR / PROFILE CARDS
   ============================================================ */
.instructor-card:hover {
  box-shadow: 0 8px 32px rgba(26, 54, 128, 0.15) !important;
}
.instructor-name,
.instructor-card h4,
.instructor-card h5 {
  color: #1A2847 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

/* ============================================================
   15. PROFIL DROPDOWN (menu utilisateur)
   ============================================================ */
.menu_pro_tgl_bg {
  background-color: #fff !important;
  border-top: 3px solid #FFB800 !important;
  box-shadow: 0 8px 32px rgba(26, 54, 128, 0.18) !important;
  border-radius: 12px !important;
}
.menu_pro_tgl_bg h4 {
  color: #1A2847 !important;
  font-family: 'Poppins', sans-serif !important;
}
.menu_pro_tgl_bg a {
  color: #1A2847 !important;
}
.menu_pro_tgl_bg a:hover {
  color: #1A3680 !important;
}
.menubar .right-menubar .menu_pro_tgl_bg ul li:hover {
  background-color: #EEF2FF !important;
}

/* ============================================================
   16. PANIER / WISHLIST — Icônes navbar
   ============================================================ */
.menubar .right-menubar i {
  color: #1A2847 !important;
  transition: color 0.2s;
}
.menubar .right-menubar i:hover {
  color: #1A3680 !important;
}
.menubar .right-menubar .menu_number {
  background-color: #FFB800 !important;
  color: #fff !important;
}

/* ============================================================
   17. SECTION BANNIÈRE STATS (chiffres clés)
   ============================================================ */
.stat-card h3,
.counter-section h2,
.counter-section h3 {
  color: #1A3680 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
}
.counter-section {
  background: linear-gradient(135deg, #F0F4FF 0%, #FFF8E0 100%) !important;
}

/* ============================================================
   18. BOUTONS ACHAT / ENRÔLEMENT
   ============================================================ */
.btn-enroll,
.enroll-btn,
.buy-btn,
.add-to-cart-btn {
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(26, 54, 128, 0.28) !important;
}
.btn-enroll:hover,
.enroll-btn:hover,
.buy-btn:hover {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(255, 184, 0, 0.40) !important;
  transform: translateY(-1px);
}

/* ============================================================
   19. PAGE COURS — Détail
   ============================================================ */
.course-info-card {
  border-top: 4px solid #FFB800 !important;
  box-shadow: 0 8px 32px rgba(26, 54, 128, 0.12) !important;
}

/* Onglets curriculum */
.nav-tabs .nav-link.active {
  border-bottom: 3px solid #1A3680 !important;
  color: #1A3680 !important;
  font-weight: 700 !important;
}
.nav-tabs .nav-link {
  color: #5A6478 !important;
}
.nav-tabs .nav-link:hover {
  color: #1A3680 !important;
}

/* ============================================================
   20. ÉLÉMENTS DIVERS — Cohérence visuelle
   ============================================================ */

/* Liens globaux */
a:not([class]):hover,
a.text-purple:hover {
  color: #1A3680 !important;
}

/* Separateurs / dividers dorés */
.divider-gold {
  height: 3px;
  background: linear-gradient(90deg, #1A3680, #FFB800);
  border-radius: 2px;
  margin: 20px 0;
}

/* Fond alternance sections */
.bg-section-alt {
  background: linear-gradient(120deg, #F0F4FF 0%, #FFF8E0 100%) !important;
}

/* Scroll bar personnalisée */
::-webkit-scrollbar-thumb {
  background: #1A3680 !important;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #FFB800 !important;
}

/* Toastr notifications */
.toast-info { background-color: #1A3680 !important; }
.toast-success { background-color: #1A8A4A !important; }

/* ============================================================
   21. RESPONSIVE — Mobile
   ============================================================ */

/* ── Hamburger bleu (override du violet #754FFE dans responsive.css) ── */
.btn-bar,
.btn-bar i {
  color: #1A3680 !important;
}
.btn-bar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  background: rgba(26, 54, 128, 0.10) !important;
  border-radius: 10px !important;
  font-size: 20px !important;
  margin-right: 4px !important;
  transition: background 0.2s ease !important;
}
.btn-bar:hover,
.btn-bar:focus {
  background: rgba(26, 54, 128, 0.20) !important;
  color: #1A3680 !important;
}

@media (max-width: 991px) {
  .sub-header {
    padding: 8px 0 !important;
  }

  /* ════════════════════════════════════════════════
     OFFCANVAS PLEINE PAGE — menu mobile branded
     ════════════════════════════════════════════════ */

  /* ── Wrapper pleine page ── */
  .mobile-view-offcanves #offcanvasWithBothOptions,
  #offcanvasWithBothOptions {
    width: 100vw !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    background: linear-gradient(160deg, #060D2A 0%, #0D1A4A 55%, #1A3680 100%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    /* Bootstrap gère la transition transform — on ne l'écrase pas */
  }

  /* ── Logo watermark en arrière-plan ── */
  #offcanvasWithBothOptions::before {
    content: '' !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 420px !important;
    height: 420px !important;
    max-width: 90vw !important;
    background: url('/uploads/system/logo_compagnonspro_officiel.webp') center / contain no-repeat !important;
    opacity: 0.18 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  /* Contenu au dessus du watermark */
  #offcanvasWithBothOptions .offcanves-top,
  #offcanvasWithBothOptions .offcanvas-body {
    position: relative !important;
    z-index: 1 !important;
  }

  /* ── En-tête : logo + bouton fermer + connexion ── */
  #offcanvasWithBothOptions .offcanvas-header,
  #offcanvasWithBothOptions .offcanves-top .offcanvas-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 184, 0, 0.20) !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* Logo dans l'en-tête */
  .offcanvas-nav-logo {
    display: block !important;
    height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Bouton fermer — croix blanche 44px */
  #offcanvasWithBothOptions .btn-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background: rgba(255,255,255,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E") center/16px no-repeat !important;
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    filter: none !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
  }
  #offcanvasWithBothOptions .btn-close:hover {
    background-color: rgba(255,184,0,0.25) !important;
    border-color: #FFB800 !important;
  }

  /* ── Bouton CONNEXION ── */
  #offcanvasWithBothOptions .logIn-btn,
  .mobile-view-offcanves .logIn-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
    color: #1A2847 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.2px !important;
    padding: 10px 22px !important;
    border-radius: 22px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255,184,0,0.35) !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
    white-space: nowrap !important;
  }
  #offcanvasWithBothOptions .logIn-btn:hover,
  .mobile-view-offcanves .logIn-btn:hover {
    background: #fff !important;
    color: #1A3680 !important;
    box-shadow: 0 6px 20px rgba(255,255,255,0.25) !important;
  }

  /* ── Bouton INSCRIPTION ── */
  #offcanvasWithBothOptions .signUp-btn,
  .mobile-view-offcanves .signUp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: rgba(255,255,255,0.80) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 9px 18px !important;
    border-radius: 22px !important;
    border: 1.5px solid rgba(255,255,255,0.30) !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
    white-space: nowrap !important;
  }
  #offcanvasWithBothOptions .signUp-btn:hover,
  .mobile-view-offcanves .signUp-btn:hover {
    border-color: #FFB800 !important;
    color: #FFB800 !important;
  }

  /* Zone boutons */
  #offcanvasWithBothOptions .offcanves-btn,
  .mobile-view-offcanves .offcanves-btn {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* ── Corps : items de navigation ── */
  #offcanvasWithBothOptions .offcanvas-body {
    overflow-y: auto !important;
    padding: 8px 0 32px !important;
  }
  #offcanvasWithBothOptions .btn-toggle,
  #offcanvasWithBothOptions .btn-toggle-list,
  #offcanvasWithBothOptions .nav-link,
  #offcanvasWithBothOptions a:not(.logIn-btn):not(.signUp-btn) {
    color: #7BB8FF !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: transparent !important;
    padding: 16px 24px !important;
    width: 100% !important;
    letter-spacing: 0.1px !important;
  }
  #offcanvasWithBothOptions .btn-toggle:hover,
  #offcanvasWithBothOptions .btn-toggle-list:hover,
  #offcanvasWithBothOptions a:not(.logIn-btn):not(.signUp-btn):hover,
  #offcanvasWithBothOptions .btn-toggle:focus,
  #offcanvasWithBothOptions .btn-toggle-list:focus,
  #offcanvasWithBothOptions a:not(.logIn-btn):not(.signUp-btn):focus,
  #offcanvasWithBothOptions .btn-toggle:active,
  #offcanvasWithBothOptions .btn-toggle-list:active,
  #offcanvasWithBothOptions a:not(.logIn-btn):not(.signUp-btn):active {
    color: #FFB800 !important;
    background: rgba(255, 184, 0, 0.06) !important;
    padding-left: 30px !important;
  }
  /* Sous-menus collapse — même bleu que les items parents */
  #offcanvasWithBothOptions .collapse a {
    font-size: 14px !important;
    padding: 12px 36px !important;
    color: #7BB8FF !important;
  }
  #offcanvasWithBothOptions .collapse a:hover,
  #offcanvasWithBothOptions .collapse a:focus,
  #offcanvasWithBothOptions .collapse a:active {
    color: #FFB800 !important;
    padding-left: 44px !important;
  }
  /* Badge panier */
  #offcanvasWithBothOptions .badge {
    background: #FFB800 !important;
    color: #1A2847 !important;
    font-weight: 700 !important;
  }

  /* Icônes des items */
  #offcanvasWithBothOptions i.fas,
  #offcanvasWithBothOptions i.far,
  #offcanvasWithBothOptions i.fab,
  #offcanvasWithBothOptions i.fa-solid {
    color: #FFB800 !important;
    width: 20px !important;
    text-align: center !important;
  }

  .menubar {
    border-bottom: 2px solid #FFB800 !important;
  }

  /* ── Masquer le bouton Cart dans le menu mobile ── */
  #offcanvasWithBothOptions #mobileCartItemsCounter,
  #offcanvasWithBothOptions #mobileCartItemsCounter + li,
  li:has(#mobileCartItemsCounter) {
    display: none !important;
  }

  /* ── Séparateur entre nav principale et nav secondaire ── */
  .offcanvas-separator {
    height: 1px !important;
    background: rgba(255, 184, 0, 0.20) !important;
    padding: 0 !important;
    margin: 8px 24px !important;
    border: none !important;
    width: calc(100% - 48px) !important;
  }
}

/* ============================================================
   22. ANIMATION AU SURVOL DES CARDS
   ============================================================ */


/* ============================================================
   23. HIGHLIGHT DORÉ — Éléments vedettes
   ============================================================ */
.highlight-gold {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  color: #fff !important;
}
.text-gold {
  color: #FFB800 !important;
}
.text-navy {
  color: #1A3680 !important;
}
.bg-navy {
  background-color: #1A3680 !important;
}
.bg-gold {
  background-color: #FFB800 !important;
}

/* Correction : ancre "Voir les formations" dans hero */
.hero-cta-primary {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.45) !important;
  transition: all 0.25s ease !important;
}
.hero-cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 184, 0, 0.55) !important;
}

/* ============================================================
   24. BOUTON PRINCIPAL "JOIN NOW" (ctBtn)
   ============================================================ */
.ctBtn {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  padding: 10px 24px !important;
  box-shadow: 0 4px 16px rgba(255, 184, 0, 0.38) !important;
  transition: all 0.25s ease !important;
  letter-spacing: 0.3px;
}
.ctBtn:hover {
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%) !important;
  box-shadow: 0 4px 18px rgba(26, 54, 128, 0.35) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* ============================================================
   25. LIENS DE NAVIGATION PRINCIPALE
   ============================================================ */
.main-nav-wrap .nav-item .nav-link {
  color: #1A2847 !important;
  font-weight: 600 !important;
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}
.main-nav-wrap .nav-item .nav-link:hover {
  color: #1A3680 !important;
}

/* ============================================================
   26. COULEUR DES ICÔNES D'ACHAT / PANIER dans les cards
   ============================================================ */
.courses-price-left .course-card-btn,
.wishlist-btn,
.add-to-cart-icon {
  color: #1A3680 !important;
  border-color: #1A3680 !important;
}
.courses-price-left .course-card-btn:hover,
.add-to-cart-icon:hover {
  background-color: #1A3680 !important;
  color: #fff !important;
}

/* ============================================================
   27. SECTION "BECOME AN INSTRUCTOR" / BANNERS CTA
   ============================================================ */
.become-instructor-section,
.cta-banner {
  background: linear-gradient(135deg, #0D1A4A 0%, #1A3680 60%, #2B4E9E 100%) !important;
}
.become-instructor-section h1,
.become-instructor-section h2,
.cta-banner h1,
.cta-banner h2 {
  color: #fff !important;
}
.become-instructor-section p,
.cta-banner p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   28. TABS ACTIFS & ACCORDEONS
   ============================================================ */
.accordion-button:not(.collapsed) {
  background-color: #EEF2FF !important;
  color: #1A3680 !important;
}
.accordion-button:not(.collapsed)::after {
  filter: none !important;
  color: #1A3680 !important;
}
.accordion-button:focus {
  border-color: #1A3680 !important;
  box-shadow: 0 0 0 3px rgba(26, 54, 128, 0.15) !important;
}

/* ============================================================
   29. BARRE DE PROGRESSION (cours)
   ============================================================ */
.progress-bar {
  background-color: #1A3680 !important;
}
.progress {
  background-color: #EEF2FF !important;
}

/* ============================================================
   30. SÉLECTEUR NICE-SELECT
   ============================================================ */
.nice-select.open,
.nice-select:focus {
  border-color: #1A3680 !important;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: #EEF2FF !important;
  color: #1A3680 !important;
}
.nice-select .option.selected {
  color: #1A3680 !important;
  font-weight: 600 !important;
}

/* ============================================================
   ██╗  ██╗ ██████╗ ███╗   ███╗███████╗
   ██║  ██║██╔═══██╗████╗ ████║██╔════╝
   ███████║██║   ██║██╔████╔██║█████╗
   ██╔══██║██║   ██║██║╚██╔╝██║██╔══╝
   ██║  ██║╚██████╔╝██║ ╚═╝ ██║███████╗
   ╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝
   PAGE D'ACCUEIL — Améliorations complètes
   ============================================================ */

/* ============================================================
   31. LOGO PLUS GRAND
   ============================================================ */
.menubar .logo img,
.navbar-brand.logo img {
  height: 100px !important;
  width: auto !important;
  transition: transform 0.2s ease !important;
}
.menubar .logo img:hover {
  transform: scale(1.03) !important;
}

/* ============================================================
   32. BANNIÈRE HERO — Typographies massives et dynamiques
   ============================================================ */

/* Fond de la section hero avec image d'arrière-plan + dégradé */
.h-1-banner.bannar-area {
  background:
    linear-gradient(135deg, rgba(247,249,255,0.91) 0%, rgba(255,251,238,0.86) 40%, rgba(240,244,255,0.91) 100%),
    url('/uploads/system/bg_compagnonspro.png') center center / cover no-repeat !important;
  padding-top: 60px !important;
  padding-bottom: 180px !important;
  position: relative;
  overflow: hidden;
}

/* Décoration géométrique derrière le hero */
.h-1-banner.bannar-area::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,184,0,0.07) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  pointer-events: none;
}
.h-1-banner.bannar-area::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,54,128,0.06) 0%, transparent 70%);
  bottom: 50px;
  left: -50px;
  pointer-events: none;
}

/* TITRE HERO — Massif et percutant */
.h-1-banner .h-1-banner-text h1,
.EbannerLeft h1 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.8px !important;
  color: #1A2847 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  width: auto !important;
  max-width: 620px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* ── Ligne de métiers animée sous le h1 ── */
.banner-professions-anim {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-top: -8px !important;
  margin-bottom: 20px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1A2847 !important;
  position: relative !important;
  z-index: 5 !important;
}
.banner-prof-prefix {
  font-weight: 400 !important;
  color: #4A5568 !important;
  font-size: 22px !important;
  white-space: nowrap !important;
}
.banner-prof-word {
  color: #FFB800 !important;
  font-weight: 800 !important;
  display: inline-block !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  white-space: nowrap !important;
}
.banner-prof-word.prof-hide {
  opacity: 0 !important;
  transform: translateY(-12px) !important;
}
.banner-prof-word.prof-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Mot accentué dans le titre (dernier mot ou span) */
.h-1-banner .h-1-banner-text h1 span,
.EbannerLeft h1 span {
  color: #FFB800 !important;
  position: relative;
  display: inline-block !important;
}
.h-1-banner .h-1-banner-text h1 span::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #FFB800, #E6A500);
  border-radius: 3px;
  opacity: 0.45;
}

/* Sous-titre de la bannière */
.EbannerTop p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #4A5568 !important;
  margin-bottom: 28px !important;
  max-width: 520px;
}

/* ============================================================
   33. BARRE DE RECHERCHE — Nouvelle disposition moderne
   ============================================================ */

/* Conteneur étendu full-width */
.EbannerTop {
  width: 100% !important;
  max-width: 560px !important;
  margin-top: 24px !important;
  position: relative !important;
  z-index: 10 !important;
  margin-bottom: -30px !important;
}

/* Input de recherche redessiné */
.EbannerTop .search-option {
  position: relative !important;
  margin-bottom: 20px !important;
}

.EbannerTop .search-option .form-control {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1A2847 !important;
  background: #fff !important;
  border: 2px solid rgba(130, 110, 210, 0.45) !important;
  border-radius: 50px !important;
  padding: 18px 160px 18px 24px !important;
  height: 60px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
  margin-top: 0 !important;
}
.EbannerTop .search-option .form-control::placeholder {
  color: #A0AEC0 !important;
  font-weight: 400 !important;
}
.EbannerTop .search-option .form-control:focus {
  border-color: #1A3680 !important;
  box-shadow: 0 8px 32px rgba(26, 54, 128, 0.18) !important;
  outline: none !important;
}

/* Bouton de recherche — Doré, positionné à droite */
.EbannerTop .search-option .submit-cls {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 16px rgba(255, 184, 0, 0.40) !important;
  transition: all 0.25s ease !important;
  white-space: nowrap;
  cursor: pointer;
}
.EbannerTop .search-option .submit-cls::before {
  content: 'Rechercher';
  font-size: 13px;
  font-weight: 600;
}
.EbannerTop .search-option .submit-cls:hover {
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%) !important;
  box-shadow: 0 6px 20px rgba(26, 54, 128, 0.35) !important;
  transform: translateY(-1px);
}
/* Cacher l'icône SVG originale du bouton (on garde juste le texte via ::before) */
.EbannerTop .search-option .submit-cls svg {
  display: none !important;
}

/* Tags populaires sous la recherche */
.EbannerTop .search-option + * {
  margin-top: 12px;
}

/* ============================================================
   34. STATS CARDS (bannar-card) — Refonte complète
   ============================================================ */

.Ebaner-card {
  background: #fff !important;
  background-image: none !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(26, 54, 128, 0.12) !important;
  border: 1px solid rgba(26, 54, 128, 0.08) !important;
  margin-top: 160px !important;
  overflow: hidden;
  position: relative;
}
.Ebaner-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1A3680, #FFB800, #2B4E9E);
}

.Ebaner-card .banner-card-1 {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 32px 24px !important;
}

.Ebaner-card .banner-card-1 h6,
.Ebaner-card h6 {
  color: #1A2847 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-left: 0 !important;
  margin-bottom: 4px !important;
}
.Ebaner-card .banner-card-1 p,
.Ebaner-card p {
  color: #6E798A !important;
  font-size: 13px !important;
  margin-left: 0 !important;
  line-height: 1.5 !important;
}

/* Icônes des stats cards */
.bannar-card img,
.Ebaner-card .bannar-card img {
  width: 48px !important;
  height: 48px !important;
  margin: 0 0 12px 0 !important;
  filter: hue-rotate(200deg) saturate(1.5) !important;
}

/* Separateur entre les cards */
.arrow-side::after {
  background-color: rgba(26, 54, 128, 0.15) !important;
  height: 50px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0 !important;
}

/* ============================================================
   35. TITRES DE SECTIONS — UX premium avec espacement optimisé
   ============================================================ */

/* Wrapper cTitle : centré, respiration verticale généreuse */
.cTitle {
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 0;
}

/* Eyebrow label au-dessus du titre */
.cTitle::before {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, #FFB800, #E6A500);
  border-radius: 4px;
  margin: 0 auto 22px;
}

.cTitle h1,
.cTitle h2,
section h1.f-36,
.section-heading h1,
.section-heading h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  color: #1A2847 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.18 !important;
  margin-bottom: 0 !important;
}

/* Séparateur décoratif entre h1 et p */
.cTitle h1 + p,
.cTitle h2 + p {
  margin-top: 18px !important;
}

.cTitle p,
.section-heading p {
  font-size: 17px !important;
  color: #6E798A !important;
  max-width: 560px !important;
  margin: 0 auto 48px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}

/* Filet doré sous le titre de la section formations */
.courses.eTopcourse .cTitle h1::after,
.courses.eTopcourse .cTitle h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, #FFB800, rgba(255,184,0,0.3));
  border-radius: 3px;
  margin: 14px auto 0;
}

/* ============================================================
   36. CARDS DE COURS — Présentation améliorée
   ============================================================ */

/* Badge niveau sur l'image */
.courses-card-image-text h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  background: rgba(26, 54, 128, 0.82) !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.courses-card-image-text h3 .cp-badge-logo,
img.cp-badge-logo {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;
  object-fit: contain !important;
  mix-blend-mode: screen !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Titre du cours */
.courses-text h5 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1A2847 !important;
  line-height: 1.4 !important;
}

/* Prix */
.courses-price-left h5 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #1A3680 !important;
}
.colorBlue {
  color: #1A3680 !important;
}

/* Icône wishlist heart */
.courses-icon i {
  color: #1A3680 !important;
  transition: color 0.2s, transform 0.2s !important;
}
.courses-icon:hover i,
.courses-icon.red-heart i {
  color: #E53E3E !important;
  transform: scale(1.15) !important;
}

/* ============================================================
   37. CATÉGORIES — Cards redesignées avec SVG icons
   ============================================================ */

/* ── Card principale ── */
.cp-cat-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  background: #fff !important;
  border: 1.5px solid rgba(26, 54, 128, 0.10) !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: box-shadow 0.25s ease, transform 0.22s ease, border-color 0.25s ease, background 0.25s ease !important;
  box-shadow: 0 2px 10px rgba(26, 54, 128, 0.05) !important;
  margin-bottom: 4px !important;
  position: relative !important;
  overflow: hidden !important;
}
.cp-cat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #FFB800 0%, #E6A500 100%);
  border-radius: 16px 0 0 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cp-cat-card:hover {
  box-shadow: 0 10px 32px rgba(26, 54, 128, 0.13) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(26, 54, 128, 0.22) !important;
  background: #fafbff !important;
}
.cp-cat-card:hover::before {
  opacity: 1;
}

/* ── Icône ── */
.cp-cat-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(26,54,128,0.08) 0%, rgba(255,184,0,0.10) 100%);
  border: 1.5px solid rgba(26, 54, 128, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A3680;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cp-cat-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.cp-cat-card:hover .cp-cat-icon {
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%);
  border-color: #1A3680;
  color: #fff;
}

/* ── Texte ── */
.cp-cat-text {
  flex: 1;
  min-width: 0;
}
.cp-cat-text h5 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1A2847 !important;
  margin: 0 0 5px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
.cp-cat-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #6E798A;
  font-family: 'Poppins', sans-serif;
}
.cp-cat-count svg {
  color: #FFB800;
  opacity: 0.85;
}

/* ── Flèche ── */
.cp-cat-arrow {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(26,54,128,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A3680;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.cp-cat-card:hover .cp-cat-arrow {
  background: #FFB800;
  color: #1A2847;
  transform: translateX(3px);
}

/* ── Section header: max-width élargi ── */
.top-categories .cTitle {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.top-categories .cTitle p,
.top-categories.top-categories .cTitle p,
.courses.Ecourse .cTitle p,
.Ecourse.courses .cTitle p {
  max-width: 100% !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Responsive ── */
@media (max-width: 575px) {
  .cp-cat-card {
    padding: 14px 16px !important;
  }
  .cp-cat-icon {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   38. FOOTER — Refonte complète
   ============================================================ */

/* Structure principale */
.footer {
  background: linear-gradient(160deg, #060D2A 0%, #0D1A4A 50%, #0A1535 100%) !important;
  padding: 80px 0 0 !important;
  position: relative !important;
}

/* Bande supérieure colorée */
.footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #1A3680 0%, #FFB800 50%, #1A3680 100%) !important;
}

/* Logo dans le footer — plus grand */
.footer .col-lg-5 > img:first-child,
.footer > .container > .row > .col-lg-5 img {
  height: 60px !important;
  width: auto !important;
  margin-bottom: 24px !important;
  filter: brightness(1.1) drop-shadow(0 2px 12px rgba(255,184,0,0.20)) !important;
}

/* Description sous le logo */
.footer > .container > .row > .col-lg-5 > p {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 32px !important;
  padding-right: 40px !important;
  text-align: left !important;
}

/* Titres des colonnes footer */
.footer h1 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #FFB800 !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,184,0,0.20) !important;
  position: relative;
}
.footer h1::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background: #FFB800;
  border-radius: 2px;
}

/* Liens footer */
.footer a {
  color: rgba(255,255,255,0.62) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 5px 0 !important;
  transition: color 0.2s, padding-left 0.2s !important;
  display: block !important;
}
.footer a:hover {
  color: #FFB800 !important;
  padding-left: 6px !important;
}

/* Newsletter section */
.lattest-news {
  max-width: 100% !important;
  margin-top: 0 !important;
}
.lattest-news h1 {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #FFB800 !important;
  border-bottom: 1px solid rgba(255,184,0,0.20) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}
.lattest-news h1::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background: #FFB800;
}

/* Formulaire newsletter */
.lattest-news form {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  border-radius: 50px !important;
  padding: 4px 4px 4px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 0 !important;
  transition: border-color 0.25s !important;
}
.lattest-news form:focus-within {
  border-color: rgba(255,184,0,0.50) !important;
  background: rgba(255,255,255,0.09) !important;
}

.lattest-news .form-control {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.90) !important;
  font-size: 14px !important;
  padding: 10px 0 !important;
  flex: 1 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
}
.lattest-news .form-control::placeholder {
  color: rgba(255,255,255,0.40) !important;
}

/* Bouton flèche newsletter */
.form-arrow {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  border: none !important;
  color: #fff !important;
  height: 42px !important;
  width: 42px !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(255,184,0,0.38) !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
  cursor: pointer !important;
}
.form-arrow:hover {
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%) !important;
  transform: scale(1.08) translateX(2px) !important;
  box-shadow: 0 6px 18px rgba(26,54,128,0.40) !important;
}

/* Icônes réseaux sociaux footer — avec cercle au hover */
.eBottomfooter {
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  padding: 28px 0 !important;
  margin-top: 60px !important;
}
.eBottomfooter p {
  color: rgba(255,255,255,0.45) !important;
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Icônes sociales en bas */
.eBottomfooter .nav-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  transition: background 0.25s, transform 0.25s !important;
  padding: 0 !important;
}
.eBottomfooter .nav-item a:hover {
  background: #FFB800 !important;
  transform: translateY(-3px) !important;
  padding-left: 0 !important;
}
.eBottomfooter .nav-item a svg path {
  transition: fill 0.25s !important;
}
.eBottomfooter .nav-item a:hover svg path {
  fill: #fff !important;
}

/* ============================================================
   39. RESPONSIVE MOBILE — Ajustements hero et footer
   ============================================================ */
@media (max-width: 1199px) {
  .h-1-banner .h-1-banner-text h1,
  .EbannerLeft h1 {
    font-size: 38px !important;
  }
}

@media (max-width: 991px) {
  .h-1-banner .h-1-banner-text h1,
  .EbannerLeft h1 {
    font-size: 34px !important;
    letter-spacing: -0.3px !important;
  }

  .EbannerTop {
    max-width: 100% !important;
  }

  .Ebaner-card {
    margin-top: 40px !important;
    position: relative !important;
    bottom: auto !important;
  }

  .footer > .container > .row > .col-lg-5 > p {
    padding-right: 0 !important;
  }

  .eBottomfooter .nav {
    justify-content: flex-start !important;
    margin-top: 16px !important;
  }
}

@media (max-width: 767px) {
  .h-1-banner .h-1-banner-text h1,
  .EbannerLeft h1 {
    font-size: 28px !important;
    letter-spacing: -0.2px !important;
  }

  .EbannerTop p {
    font-size: 16px !important;
  }

  .EbannerTop .search-option .form-control {
    padding: 16px 140px 16px 18px !important;
    height: 54px !important;
  }

  .EbannerTop .search-option .submit-cls {
    padding: 8px 16px !important;
  }
  .EbannerTop .search-option .submit-cls::before {
    content: '' !important;
    display: none !important;
  }

  .cTitle h1, section h1.f-36 {
    font-size: 30px !important;
  }

  .menubar .logo img {
    height: 75px !important;
  }
}

/* ============================================================
   40. SECTION INSTRUCTEURS — Card améliorée
   ============================================================ */
.eInstuctor .instructor-card-img img {
  transition: transform 0.35s ease !important;
}
.eInstuctor:hover .instructor-card-img img {
  transform: scale(1.05) !important;
}
.instructor-card-text h5 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: #1A2847 !important;
  font-size: 16px !important;
}
.instructor-card-text p {
  color: #6E798A !important;
  font-size: 13px !important;
}

/* ============================================================
   ████████╗██████╗      FOOTER REDESIGN COMPLET
   ╚══██╔══╝╚════╝       Classes réelles : lms2 / ft2-*
   ============================================================ */

/* ============================================================
   41. FOOTER — Structure générale
   ============================================================ */
.lms2-footer-section {
  background: linear-gradient(160deg, #050B1F 0%, #0A1535 55%, #0D1A4A 100%) !important;
  position: relative !important;
  overflow: hidden;
}

/* Bande supérieure tricolore */
.lms2-footer-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #1A3680 0%, #FFB800 50%, #1A3680 100%) !important;
  z-index: 2;
}

/* Décor géométrique d'arrière-plan */
.lms2-footer-section::after {
  content: '' !important;
  position: absolute !important;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,184,0,0.04) 0%, transparent 70%);
  bottom: -100px;
  right: -100px;
  pointer-events: none;
}

/* Padding intérieur */
.ft2-padding {
  padding-top: 72px !important;
  padding-bottom: 60px !important;
}

/* Séparateur horizontal */
.ft2-border-bottom {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ============================================================
   42. FOOTER — Logo et description
   ============================================================ */
.ft2-logo-area .lms2-footer-logo img {
  height: 90px !important;
  width: auto !important;
  filter: brightness(1.1) drop-shadow(0 2px 14px rgba(255,184,0,0.22)) !important;
  margin-bottom: 20px !important;
}

.ft2-logo-area p,
.ft2-logo-desc {
  color: rgba(255,255,255,0.58) !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
}

/* Espacement des colonnes de liens */
.ft2-nav-wrap {
  padding-right: 8px;
}
.ft2-nav-group li {
  margin-bottom: 2px !important;
}
.ft2-nav-link {
  padding: 5px 0 !important;
  font-size: 13.5px !important;
}

/* ============================================================
   43. FOOTER — Titres de colonnes
   ============================================================ */
.ft2-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #FFB800 !important;
  margin-bottom: 28px !important;
  padding-bottom: 14px !important;
  position: relative !important;
  border-bottom: none !important;
}

.ft2-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(255,184,0,0.18) !important;
}

.ft2-title::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 36px !important;
  height: 2px !important;
  background: #FFB800 !important;
  z-index: 1 !important;
}

/* ============================================================
   44. FOOTER — Liens de navigation
   ============================================================ */
.ft2-nav-group {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ft2-nav-group li {
  margin-bottom: 4px !important;
}

.ft2-nav-link {
  color: rgba(255,255,255,0.60) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 0 !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
  position: relative;
}

.ft2-nav-link:hover {
  color: #FFB800 !important;
  padding-left: 8px !important;
}

/* Icône "Send message" dans contact */
.ft2-logo-area .ft2-nav-link svg path {
  fill: rgba(255,255,255,0.40) !important;
  transition: fill 0.2s !important;
}
.ft2-logo-area .ft2-nav-link:hover svg path {
  fill: #FFB800 !important;
}
.ft2-logo-area .ft2-nav-link:hover {
  padding-left: 6px !important;
}

/* ============================================================
   45. FOOTER — Section newsletter (Subscribe)
   ============================================================ */
.ft2-subscribe-wrap {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  position: relative;
  overflow: hidden;
}

.ft2-subscribe-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1A3680, #FFB800);
  border-radius: 20px 20px 0 0;
}

.ft2-subscribe-wrap .ft2-title {
  font-size: 13px !important;
  margin-bottom: 20px !important;
}

/* Input newsletter */
.ft2-newsLetter-input {
  width: 100% !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  border-radius: 50px !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 14px 56px 14px 20px !important;
  height: 52px !important;
  transition: border-color 0.25s, background 0.25s !important;
  outline: none !important;
  box-shadow: none !important;
}

.ft2-newsLetter-input::placeholder {
  color: rgba(255,255,255,0.35) !important;
  font-size: 13px !important;
}

.ft2-newsLetter-input:focus {
  border-color: rgba(255,184,0,0.55) !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: 0 0 0 3px rgba(255,184,0,0.12) !important;
}

/* Bouton flèche newsletter */
.ft2-newsLetter-btn {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(255,184,0,0.40) !important;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s !important;
}

.ft2-newsLetter-btn:hover {
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%) !important;
  transform: scale(1.08) translateX(2px) !important;
  box-shadow: 0 6px 20px rgba(26,54,128,0.40) !important;
}

/* Description sous la newsletter */
.ft2-short-des {
  color: rgba(255,255,255,0.45) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-top: 14px !important;
}

/* ============================================================
   46. FOOTER — Réseaux sociaux
   ============================================================ */
.ft2-social-group {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 10px !important;
}

.ft2-socila-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s !important;
  text-decoration: none !important;
}

.ft2-socila-link:hover {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  border-color: #FFB800 !important;
  transform: translateY(-4px) !important;
}

.ft2-socila-link svg path {
  transition: fill 0.25s ease !important;
}

.ft2-socila-link:hover svg path {
  fill: #fff !important;
}

/* ============================================================
   47. FOOTER — Barre du bas (copyright)
   ============================================================ */
.ft2-bottom-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 0 !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.ft2-copyright-info {
  color: rgba(255,255,255,0.40) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.ft2-copyright-info a {
  color: rgba(255,184,0,0.75) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.ft2-copyright-info a:hover {
  color: #FFB800 !important;
}

.ft2-copyright-nav-group {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 20px !important;
}

.ft2-copyright-nav-link {
  color: rgba(255,255,255,0.40) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.ft2-copyright-nav-link:hover {
  color: #FFB800 !important;
}

/* ============================================================
   48. FOOTER — Responsive mobile
   ============================================================ */
@media (max-width: 991px) {
  .ft2-padding {
    padding-top: 52px !important;
    padding-bottom: 40px !important;
  }

  .ft2-subscribe-wrap {
    padding: 28px 24px !important;
  }

  .ft2-bottom-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .ft2-copyright-nav-group {
    gap: 4px 14px !important;
  }
}

@media (max-width: 575px) {
  .ft2-logo-area .lms2-footer-logo img {
    height: 65px !important;
  }

  .ft2-subscribe-wrap {
    padding: 24px 18px !important;
  }

  .ft2-social-group {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   49. FOOTER — Fix couleur des liens (override sélecteurs trop larges)
   ============================================================ */
.lms2-footer-section .ft2-nav-link,
.lms2-footer-section a.ft2-nav-link,
footer.lms2-footer-section a {
  color: rgba(255, 255, 255, 0.60) !important;
  padding-left: 0 !important;
}

.lms2-footer-section .ft2-nav-link:hover,
.lms2-footer-section a.ft2-nav-link:hover,
footer.lms2-footer-section a:hover {
  color: #FFB800 !important;
  padding-left: 8px !important;
}

/* Titres ft2 dans le footer (ne pas hériter du hover padding) */
.lms2-footer-section .ft2-title,
.lms2-footer-section h4.ft2-title {
  padding-left: 0 !important;
  color: #FFB800 !important;
}

/* Copyright links en bas */
.ft2-copyright-info a,
.ft2-copyright-nav-link {
  color: rgba(255, 255, 255, 0.40) !important;
  padding-left: 0 !important;
}
.ft2-copyright-info a:hover,
.ft2-copyright-nav-link:hover {
  color: #FFB800 !important;
  padding-left: 0 !important;
}

/* Icônes sociales — ne pas hériter du padding-left hover */
.ft2-socila-link,
.ft2-socila-link:hover {
  padding-left: 0 !important;
  color: inherit !important;
}

/* ============================================================
   50. SECTION "STUDENT" — Banners violet → Navy Compagnons Pro
   ============================================================ */

/* ── BLOCS COMMUNAUTÉ / RÉSEAU — Design premium ── */

.cp-promo-card {
  border-radius: 24px;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cp-promo-card:hover {
  transform: translateY(-4px);
}

/* Logo watermark en fond */
.cp-promo-logo-bg {
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: 180px;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cp-promo-card--network .cp-promo-logo-bg {
  opacity: 0.14;
}

/* Décoration halo en fond */
.cp-promo-deco {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── Bloc 1 : Communauté (fond navy foncé) ── */
.cp-promo-card--community {
  background: linear-gradient(145deg, #060D2A 0%, #0D1A4A 50%, #1A3680 100%);
  box-shadow: 0 12px 40px rgba(6,13,42,0.30);
}
.cp-promo-card--community .cp-promo-deco {
  bottom: -80px; right: -80px;
  background: radial-gradient(circle, rgba(255,184,0,0.13) 0%, transparent 65%);
}
.cp-promo-card--community::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFB800 0%, rgba(255,184,0,0.25) 100%);
}

/* ── Bloc 2 : Réseau (fond or/gold) ── */
.cp-promo-card--network {
  background: linear-gradient(145deg, #E6A500 0%, #FFB800 55%, #FFC933 100%);
  box-shadow: 0 12px 40px rgba(230,165,0,0.28);
}
.cp-promo-card--network .cp-promo-deco {
  top: -70px; left: -70px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 65%);
}
.cp-promo-card--network::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.40);
}

/* ── Contenu commun ── */
.cp-promo-kicker {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 30px;
  padding: 4px 13px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.cp-promo-card--community .cp-promo-kicker {
  color: #FFB800;
  background: rgba(255,184,0,0.14);
  border: 1px solid rgba(255,184,0,0.30);
}
.cp-promo-card--network .cp-promo-kicker {
  color: #1A2847;
  background: rgba(26,40,71,0.12);
  border: 1px solid rgba(26,40,71,0.20);
}

.cp-promo-card h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 16px !important;
  position: relative;
  z-index: 1;
}
.cp-promo-card--community h2 { color: #fff !important; }
.cp-promo-card--network h2  { color: #1A2847 !important; }

.cp-promo-card p {
  font-size: 14.5px !important;
  line-height: 1.78 !important;
  margin: 0 0 28px !important;
  flex: 1;
  position: relative;
  z-index: 1;
}
.cp-promo-card--community p { color: rgba(255,255,255,0.80) !important; }
.cp-promo-card--network p  { color: rgba(26,40,71,0.78) !important; }

/* ── Boutons ── */
.cp-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 30px;
  padding: 12px 24px;
  text-decoration: none !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
  align-self: flex-start;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.cp-promo-btn svg { flex-shrink: 0; transition: transform 0.2s; }
.cp-promo-btn:hover svg { transform: translateX(4px); }

/* Bouton clair (sur fond navy) */
.cp-promo-btn--light {
  background: #FFB800 !important;
  color: #1A2847 !important;
  border: 2px solid #FFB800 !important;
}
.cp-promo-btn--light:hover {
  background: transparent !important;
  color: #FFB800 !important;
  border-color: #FFB800 !important;
}

/* Bouton sombre (sur fond or) */
.cp-promo-btn--gold {
  background: #1A2847 !important;
  color: #fff !important;
  border: 2px solid #1A2847 !important;
}
.cp-promo-btn--gold:hover {
  background: transparent !important;
  color: #1A2847 !important;
  border-color: #1A2847 !important;
}
.cp-promo-btn--outline {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.6) !important;
}
.cp-promo-btn--outline:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .cp-promo-card { padding: 32px 26px; }
  .cp-promo-card h2 { font-size: 20px !important; }
  .cp-promo-btn { white-space: normal; }
}

/* ============================================================
   51. BANNER — Ebanner image plein + cirlceTwo par dessus
   ============================================================ */

/* eCircle_parent : derrière le texte EbannerLeft */
.eCircle_parent {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
}

/* Texte banner toujours au-dessus de l'image */
.h-1-banner-text.EbannerLeft,
.EbannerLeft {
  position: relative !important;
  z-index: 50 !important;
}

/* Ebanner : image pleine, non clippée */
.eCircle_parent .Ebanner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
}

.eCircle_parent .Ebanner img {
  height: 460px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* eCircle container : positionné en haut à droite de eCircle_parent, fadeInRightBig via animate.css */
.eCircle_parent .eCircle {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 144px !important;
  height: 144px !important;
  z-index: 10 !important;
  animation-delay: 0.5s !important;
  animation-fill-mode: both !important;
}

/* Ebanner image : z-index inférieur pour que eCircle passe dessus */
.eCircle_parent .Ebanner {
  position: relative !important;
  z-index: 1 !important;
}

/* circleOne : statique, derrière cirlceTwo */
.eCircle_parent .eCircle .circleOne {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}
.eCircle_parent .eCircle .circleOne {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 144px !important;
  height: 144px !important;
  border-radius: 50% !important;
  background: #fff !important;
}
.eCircle_parent .eCircle .circleOne img {
  height: 80px !important;
  width: auto !important;
  display: block !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* cirlceTwo : quasi-concentrique + rotation infinie */
.eCircle_parent .eCircle .cirlceTwo {
  position: absolute !important;
  top: 6px !important;
  left: 8px !important;
  z-index: 2 !important;
  animation: rotateText 10s linear 1.5s infinite !important;
}
.eCircle_parent .eCircle .cirlceTwo img {
  height: 131px !important;
  width: auto !important;
  display: block !important;
}

/* ── Search input toujours visible (expanded par défaut) ── */
.header-search .search-input,
.search-container .search-input {
  width: 100% !important;
  max-width: 380px !important;
  border: 2px solid rgba(130, 110, 210, 0.45) !important;
  border-radius: 50px !important;
  padding: 8px 110px 8px 46px !important;
  opacity: 1 !important;
  background: #fff !important;
  transition: border-color 0.25s ease !important;
}
.header-search .search-input:focus,
.search-container .search-input:focus {
  border-color: rgba(130, 110, 210, 0.80) !important;
  box-shadow: 0 0 0 3px rgba(130, 110, 210, 0.12) !important;
  outline: none !important;
}
/* Loupe à gauche via pseudo-élément sur le container */
.header-search .search-container,
.search-container {
  position: relative !important;
}
.header-search .search-container::before,
.search-container::before {
  content: '' !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.625 16.3125C4.3875 16.3125 0.9375 12.8625 0.9375 8.625C0.9375 4.3875 4.3875 0.9375 8.625 0.9375C12.8625 0.9375 16.3125 4.3875 16.3125 8.625C16.3125 12.8625 12.8625 16.3125 8.625 16.3125ZM8.625 2.0625C5.0025 2.0625 2.0625 5.01 2.0625 8.625C2.0625 12.24 5.0025 15.1875 8.625 15.1875C12.2475 15.1875 15.1875 12.24 15.1875 8.625C15.1875 5.01 12.2475 2.0625 8.625 2.0625Z' fill='%238277c8'/%3E%3Cpath d='M16.499 17.0625C16.3565 17.0625 16.214 17.01 16.1015 16.8975L13.499 14.295C13.2815 14.0775 13.2815 13.7175 13.499 13.5C13.7165 13.2825 14.0765 13.2825 14.294 13.5L16.8965 16.1025C17.114 16.32 17.114 16.68 16.8965 16.8975C16.784 17.01 16.6415 17.0625 16.499 17.0625Z' fill='%238277c8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Masquer le label et le bouton originaux */
.search-container label.header-search-icon,
.search-container button.header-search-icon {
  display: none !important;
}
/* Bouton "Trouver" à droite à l'intérieur du champ */
.search-container .search-submit-btn {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #1A3680 !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 5px 18px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  z-index: 3 !important;
  transition: background 0.2s ease !important;
}
.search-container .search-submit-btn:hover {
  background: #FFB800 !important;
  color: #1A3680 !important;
}

/* Masquer le prix sur les cartes cours */
.courses-price-left {
  display: none !important;
}

/* Masquer le panier navbar */
.wisth_tgl_div {
  display: none !important;
}

/* Masquer le bloc "Créé par" sur les cartes cours */
.info-tag.eInfo {
  display: none !important;
}

/* Masquer les info-tags : étoiles, inscrits (course_page) */
.course-heading-info .info-tag:not(.eInfo) {
  display: none !important;
}

/* Masquer le prix h1/h3 dans le sidebar cours */
.ammount h1.fw-500,
.ammount h3.fw-500 {
  display: none !important;
}

/* Masquer le bouton "Acheter maintenant" */
a[onclick*="handle_buy_now"] {
  display: none !important;
}

/* Masquer aussi "Ajouter au panier" / "Retirer du panier" */
a[onclick*="handle_cart_items"] {
  display: none !important;
}


/* ============================================================
   PRÉ-RÉSERVATION — Bouton + Modale
   ============================================================ */

/* ── Bouton déclencheur ── */
.btn-prereservation {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%) !important;
  border-radius: 30px !important;
  padding: 10px 22px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 16px rgba(26,54,128,0.28) !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  text-decoration: none !important;
  font-family: 'Poppins', sans-serif !important;
}
.btn-prereservation:hover,
.single-popup-course.epopCourse:hover .btn-prereservation {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%) !important;
  color: #1A3680 !important;
  box-shadow: 0 6px 20px rgba(255,184,0,0.40) !important;
  transform: translateY(-1px) !important;
}
.btn-prereservation svg {
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
}

/* Bouton course_page sidebar */
.btn-prereservation-lg {
  width: 100%;
  justify-content: center;
  font-size: 14px !important;
  padding: 13px 24px !important;
  border-radius: 12px !important;
  margin-top: 12px;
}

/* ── Overlay ──
   display:none → flex évite les bugs opacity/visibility sur iOS Safari
   position explicite top/left/right/bottom (inset pas supporté iOS < 14.5) */
.pr-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(10, 18, 50, 0.72) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 99999 !important;
  display: none !important;       /* caché par défaut */
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  -webkit-overflow-scrolling: auto !important;
}
.pr-modal-overlay.pr-open {
  display: flex !important;
  animation: prOverlayFadeIn 0.22s ease forwards !important;
}
@keyframes prOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Container ── */
.pr-modal-container {
  background: #fff !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 680px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
  box-shadow: 0 24px 80px rgba(10,18,50,0.28) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,54,128,0.2) transparent;
}
.pr-modal-overlay.pr-open .pr-modal-container {
  animation: prContainerSlideIn 0.32s cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes prContainerSlideIn {
  from { transform: translateY(28px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ── En-tête ── */
.pr-modal-header {
  background: linear-gradient(135deg, #1A3680 0%, #0D1A4A 100%) !important;
  padding: 22px 28px 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  border-radius: 20px 20px 0 0 !important;
  position: sticky;
  top: 0;
  z-index: 2;
  overflow: hidden;
}
.pr-modal-header::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  background: url('../../../../../uploads/system/logo_compagnonspro_officiel.webp') center/contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
}
.pr-modal-header-inner { flex: 1; position: relative; z-index: 1; }
.pr-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #FFB800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.pr-modal-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
  font-family: 'Poppins', sans-serif !important;
}
.pr-modal-formation-name {
  font-size: 12px !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 0 !important;
  font-style: italic;
}
.pr-modal-close {
  background: rgba(255,255,255,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.30) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  margin-left: 14px !important;
  transition: background 0.2s, transform 0.2s !important;
  z-index: 10 !important;
  position: relative !important;
}
.pr-modal-close:hover {
  background: rgba(255,255,255,0.30) !important;
  transform: scale(1.08) !important;
}

/* ── Modale : mobile responsive (bottom-sheet) ── */
@media (max-width: 575px) {
  /* Overlay : bottom sheet — pas de backdrop-filter sur mobile (bug iOS) */
  .pr-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(10, 18, 50, 0.65) !important;
  }
  /* Container : pleine largeur, slide depuis le bas */
  .pr-modal-container {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }
  /* Animation bottom-sheet remplace prContainerSlideIn */
  .pr-modal-overlay.pr-open .pr-modal-container {
    animation: prContainerBottomSheet 0.34s cubic-bezier(0.22,1,0.36,1) forwards !important;
  }
  @keyframes prContainerBottomSheet {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  /* En-tête : aligner le bouton fermer au centre */
  .pr-modal-header {
    padding: 14px 14px 12px !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .pr-modal-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  .pr-modal-formation-name { font-size: 11px !important; }
  /* Bouton fermer — cible tactile 44px */
  .pr-modal-close {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,0.28) !important;
    border: 2px solid rgba(255,255,255,0.50) !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
  }
  .pr-modal-close svg { width: 18px !important; height: 18px !important; }
  /* Corps */
  .pr-modal-body { padding: 16px !important; }
  .pr-form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pr-radio-group { gap: 8px !important; }
  .pr-radio-item { font-size: 12px !important; padding: 7px 12px !important; }
}

/* ── Body ── */
.pr-modal-body { padding: 24px 28px 28px !important; }

/* Intro box */
.pr-intro-box {
  background: rgba(26,54,128,0.05);
  border-left: 3px solid #1A3680;
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.pr-intro-box p { font-size: 13px; color: #444; margin: 0 0 8px; line-height: 1.6; }
.pr-intro-box p:last-child { margin-bottom: 0; }
.pr-link-reseau {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1A3680;
  text-decoration: none;
  transition: color 0.2s;
}
.pr-link-reseau:hover { color: #FFB800; }

/* ── Grid formulaire ── */
.pr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.pr-field-full { grid-column: 1 / -1; }

/* Champs */
.pr-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1A3680;
  margin-bottom: 5px;
}
.pr-field input,
.pr-field textarea,
.pr-select-wrapper select {
  width: 100%;
  border: 1.5px solid #e0e5f0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #2c3e50;
  background: #fafbfd;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  font-family: inherit;
}
.pr-field input:focus,
.pr-field textarea:focus,
.pr-select-wrapper select:focus {
  border-color: #1A3680;
  box-shadow: 0 0 0 3px rgba(26,54,128,0.1);
  background: #fff;
}
.pr-field input.pr-invalid,
.pr-field textarea.pr-invalid,
.pr-select-wrapper select.pr-invalid {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231,76,60,0.1) !important;
}
.pr-field input.pr-readonly { background: #f0f2f8 !important; color: #666 !important; cursor: default; }
.pr-field textarea { resize: vertical; min-height: 80px; }
.pr-required { color: #e74c3c; }
.pr-hint { color: #999; font-weight: 400; font-size: 11px; }
.pr-error { display: block; font-size: 11px; color: #e74c3c; margin-top: 3px; min-height: 14px; }

/* Select custom */
.pr-select-wrapper { position: relative; }
.pr-select-wrapper select { appearance: none; padding-right: 36px; }
.pr-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #1A3680;
}

/* Radio group */
.pr-label-block { display: block; font-size: 12px; font-weight: 600; color: #1A3680; margin-bottom: 8px; }
.pr-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #444;
  padding: 8px 14px;
  border: 1.5px solid #e0e5f0;
  border-radius: 30px;
  transition: all 0.2s;
  user-select: none;
}
.pr-radio-item:hover { border-color: #1A3680; background: rgba(26,54,128,0.04); }
.pr-radio-item input[type="radio"] { display: none; }
.pr-radio-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #c0cad8;
  transition: all 0.2s;
  flex-shrink: 0;
}
.pr-radio-item input[type="radio"]:checked ~ .pr-radio-dot {
  border-color: #1A3680;
  background: #1A3680;
  box-shadow: inset 0 0 0 2.5px #fff;
}
.pr-radio-item:has(input[type="radio"]:checked) {
  border-color: #1A3680;
  background: rgba(26,54,128,0.06);
  font-weight: 600;
  color: #1A3680;
}

/* Encart non-membre */
.pr-notice-box {
  display: flex;
  gap: 12px;
  background: rgba(255,184,0,0.08);
  border: 1.5px solid rgba(255,184,0,0.3);
  border-radius: 12px;
  padding: 14px 16px;
  align-items: flex-start;
}
.pr-notice-box svg { flex-shrink: 0; margin-top: 2px; }
.pr-notice-box p { font-size: 12.5px; color: #555; margin: 0 0 8px; line-height: 1.5; }
.pr-btn-candidater {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #1A3680;
  text-decoration: none;
  border-bottom: 2px solid #FFB800;
  transition: color 0.2s;
}
.pr-btn-candidater:hover { color: #FFB800; }

/* ── RGPD ── */
.pr-rgpd-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #edf0f7;
}
.pr-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 12.5px;
  color: #555;
  line-height: 1.5;
  user-select: none;
}
.pr-checkbox-item input[type="checkbox"] { display: none; }
.pr-checkbox-dot {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid #c0cad8;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-checkbox-item input[type="checkbox"]:checked + .pr-checkbox-dot {
  border-color: #1A3680;
  background: #1A3680;
}
.pr-checkbox-item input[type="checkbox"]:checked + .pr-checkbox-dot::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
  display: block;
}
.pr-rgpd-text { font-size: 11px; color: #999; margin-top: 12px; line-height: 1.6; }
.pr-rgpd-text a { color: #1A3680; text-decoration: underline; }

/* ── Bouton submit ── */
.pr-form-footer { margin-top: 22px; }
.pr-btn-submit {
  width: 100%;
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 6px 20px rgba(26,54,128,0.25);
}
.pr-btn-submit:hover {
  background: linear-gradient(135deg, #FFB800 0%, #E6A500 100%);
  color: #1A3680;
  box-shadow: 0 6px 20px rgba(255,184,0,0.35);
  transform: translateY(-1px);
}
.pr-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.pr-spin { animation: pr-spin 0.8s linear infinite; }
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* ── Écran succès ── */
.pr-success-inner {
  padding: 50px 40px 40px;
  text-align: center;
  position: relative;
}
.pr-close-success {
  position: absolute !important;
  top: 16px !important;
  right: 20px !important;
  background: rgba(26,54,128,0.08) !important;
  color: #1A3680 !important;
  margin-left: 0 !important;
}
.pr-success-icon {
  margin: 0 auto 20px;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.pr-success-inner h3 {
  font-size: 22px;
  font-weight: 800;
  color: #1A3680;
  margin: 0 0 12px;
  font-family: 'Poppins', sans-serif;
}
.pr-success-main { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 18px; }
.pr-success-notice {
  background: rgba(26,54,128,0.05);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.pr-success-notice p { font-size: 12.5px; color: #666; margin: 0; line-height: 1.6; }
.pr-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pr-btn-back-formation {
  padding: 10px 20px;
  border: 2px solid #1A3680;
  border-radius: 30px;
  color: #1A3680;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.pr-btn-back-formation:hover { background: #1A3680; color: #fff; }
.pr-btn-reseau-link {
  padding: 10px 20px;
  background: linear-gradient(135deg, #FFB800, #E6A500);
  border-radius: 30px;
  color: #1A3680;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
  box-shadow: 0 4px 12px rgba(255,184,0,0.3);
}
.pr-btn-reseau-link:hover { opacity: 0.85; color: #1A3680; }

/* ── Body scroll lock ── */
/* Fix iOS Safari : position fixed + overflow hidden pour bloquer le scroll */
body.pr-modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* ── Responsive mobile ── */
@media (max-width: 600px) {
  .pr-modal-container { border-radius: 16px 16px 0 0 !important; max-height: 96vh !important; }
  .pr-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .pr-modal-header { padding: 18px 20px 16px !important; border-radius: 16px 16px 0 0 !important; }
  .pr-modal-body { padding: 18px 20px 24px !important; }
  .pr-form-grid { grid-template-columns: 1fr !important; }
  .pr-success-inner { padding: 40px 24px 32px !important; }
  .pr-radio-group { flex-direction: column; }
}

/* ════════════════════════════════════════════════
   ACADEMY AUTHORITY SECTION — Design premium
════════════════════════════════════════════════ */

/* ── Wrapper section ── */
.academy-authority-section {
  background:
    linear-gradient(180deg, rgba(244,246,251,0.78) 0%, rgba(255,255,255,0.72) 60%),
    url('/uploads/system/image_bk_compagnonspro.png') center center / cover no-repeat;
  padding: 80px 0 64px;
  border-top: 1px solid #e8ecf5;
  overflow: hidden;
}

/* ── ① INTRO ── */
.academy-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 72px;
}
.academy-kicker {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  background: #FFB800;
  border: 1px solid #FFB800;
  border-radius: 30px;
  padding: 4px 14px;
  margin-bottom: 20px;
}
.academy-intro h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 44px !important;
  font-weight: 900 !important;
  color: #1A2847 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 20px !important;
}
.academy-lead {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #5A6478 !important;
  line-height: 1.8 !important;
  margin: 0 0 28px !important;
}
.academy-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
}
.academy-checklist li {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #3D4E6B;
  padding-left: 22px;
  position: relative;
}
.academy-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB800' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── ② 4 CARTES ── */
.academy-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
.academy-card {
  background: #fff;
  border: 1.5px solid rgba(26,54,128,0.09);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 4px 18px rgba(26,54,128,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.academy-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1A3680, #FFB800);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.academy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(26,54,128,0.12);
  border-color: rgba(26,54,128,0.18);
}
.academy-card:hover::after { transform: scaleX(1); }
.academy-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(26,54,128,0.08) 0%, rgba(255,184,0,0.10) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A3680;
  margin-bottom: 18px;
  transition: background 0.25s, color 0.25s;
}
.academy-card:hover .academy-card-icon {
  background: linear-gradient(135deg, #1A3680 0%, #2B4E9E 100%);
  color: #fff;
}
.academy-card h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1A2847 !important;
  margin: 0 0 10px !important;
  line-height: 1.35 !important;
}
.academy-card p {
  font-size: 13.5px !important;
  color: #6E798A !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ── ③ SPLIT GRID ── */
.academy-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 64px;
  align-items: stretch;
}
.academy-panel {
  background: #fff;
  border: 1.5px solid rgba(26,54,128,0.09);
  border-radius: 22px;
  padding: 40px 36px;
  box-shadow: 0 4px 18px rgba(26,54,128,0.05);
}
.academy-panel-kicker {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #1A3680;
  background: rgba(26,54,128,0.07);
  border-radius: 20px;
  padding: 3px 12px;
  margin-bottom: 16px;
}
.academy-panel h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #1A2847 !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.2px !important;
}
.academy-panel p {
  font-size: 14px !important;
  color: #5A6478 !important;
  line-height: 1.75 !important;
  margin: 0 0 14px !important;
}
.academy-tags {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.academy-tags li {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A3680;
  background: rgba(26,54,128,0.07);
  border: 1px solid rgba(26,54,128,0.14);
  border-radius: 30px;
  padding: 5px 14px;
  transition: background 0.2s, color 0.2s;
}
.academy-tags li:hover {
  background: #1A3680;
  color: #fff;
}

/* Panel highlight (réseau) */
.academy-panel-highlight {
  background: linear-gradient(145deg, #1A2847 0%, #1A3680 100%) !important;
  border-color: transparent !important;
  position: relative;
  overflow: hidden;
}
.academy-panel-highlight::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,184,0,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.academy-panel-highlight .academy-panel-kicker {
  color: #FFB800;
  background: rgba(255,184,0,0.15);
}
.academy-panel-highlight h2 {
  color: #fff !important;
}
.academy-panel-highlight p {
  color: rgba(255,255,255,0.80) !important;
}
.academy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #FFB800 !important;
  text-decoration: none !important;
  border: 1.5px solid rgba(255,184,0,0.40);
  border-radius: 30px;
  padding: 10px 22px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.academy-link:hover {
  background: #FFB800;
  color: #1A2847 !important;
  border-color: #FFB800;
}

/* ── ④ FAQ ACCORDÉON ── */
.academy-faq {
  max-width: 780px;
  margin: 0 auto 56px;
}
.academy-faq > h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1A2847 !important;
  text-align: center;
  margin: 0 0 36px !important;
}
.academy-faq-item {
  border: 1.5px solid rgba(26,54,128,0.10);
  border-radius: 14px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.academy-faq-item[open] {
  box-shadow: 0 6px 22px rgba(26,54,128,0.09);
  border-color: rgba(26,54,128,0.20);
}
.academy-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1A2847;
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 12px;
  transition: color 0.2s;
}
.academy-faq-item summary::-webkit-details-marker { display: none; }
.academy-faq-item[open] summary { color: #1A3680; }
.faq-chevron {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(26,54,128,0.07);
  display: flex; align-items: center; justify-content: center;
  color: #1A3680;
  transition: transform 0.3s ease, background 0.2s;
}
.academy-faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  background: #1A3680;
  color: #fff;
}
.faq-body {
  padding: 0 22px 18px;
  animation: faqSlideDown 0.28s ease;
}
.faq-body p {
  font-size: 14px !important;
  color: #5A6478 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}
@keyframes faqSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ⑤ BANDEAU ÉCOSYSTÈME ── */
.academy-ecosystem {
  text-align: center;
  background: rgba(26,54,128,0.04);
  border: 1px solid rgba(26,54,128,0.10);
  border-radius: 14px;
  padding: 18px 28px;
}
.academy-ecosystem p {
  font-size: 13.5px !important;
  color: #6E798A !important;
  margin: 0 !important;
  line-height: 1.7 !important;
}
.academy-ecosystem a {
  color: #1A3680 !important;
  font-weight: 600;
  text-decoration: none !important;
}
.academy-ecosystem a:hover { color: #FFB800 !important; }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .academy-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .academy-split-grid { grid-template-columns: 1fr; }
  .academy-intro h2 { font-size: 34px !important; }
}
@media (max-width: 575px) {
  .academy-benefits-grid { grid-template-columns: 1fr; }
  .academy-intro h2 { font-size: 28px !important; }
  .academy-panel { padding: 28px 22px; }
  .academy-authority-section { padding: 56px 0 48px; }
  .academy-faq > h2 { font-size: 22px !important; }
}

/* ════════════════════════════════════════════════
   FORMATEUR CTA SECTION
════════════════════════════════════════════════ */
.formateur-cta-section {
  background: linear-gradient(135deg, #1A3680 0%, #0D1A4A 100%);
  padding: 52px 0;
}
.formateur-cta-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
}
.formateur-cta-icon {
  flex-shrink: 0;
  width: 72px; height: 72px;
  background: rgba(255,184,0,.15);
  border: 2px solid rgba(255,184,0,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #FFB800;
}
.formateur-cta-body { flex: 1; min-width: 0; }
.formateur-cta-badge {
  display: inline-block;
  background: #FFB800; color: #1A3680;
  font-size: 10px; font-weight: 800;
  padding: 3px 12px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .8px;
  margin-bottom: 10px;
}
.formateur-cta-body h2 {
  color: #fff; font-size: 22px; font-weight: 800;
  margin: 0 0 10px; line-height: 1.3;
}
.formateur-cta-body p {
  color: rgba(255,255,255,.75); font-size: 14px;
  line-height: 1.7; margin: 0;
}
.formateur-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #FFB800, #E6A000);
  color: #1A3680 !important; font-weight: 800; font-size: 14px;
  padding: 13px 28px; border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(255,184,0,.35);
  transition: all .25s;
}
.formateur-cta-btn:hover {
  background: linear-gradient(135deg, #fff, #f0f0f0);
  color: #1A3680 !important;
  box-shadow: 0 8px 24px rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.formateur-cta-deco {
  flex-shrink: 0;
  display: flex; align-items: center;
}
@media (max-width: 768px) {
  .formateur-cta-inner { flex-direction: column; padding: 28px 22px; text-align: center; gap: 18px; }
  .formateur-cta-deco { display: none; }
  .formateur-cta-body h2 { font-size: 18px; }
}

/* ════════════════════════════════════════════════
   HERO REDESIGN — Badge, Tagline, 3 CTAs
════════════════════════════════════════════════ */

/* Badge accroche */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,184,0,0.12);
  border: 1.5px solid rgba(255,184,0,0.4);
  border-radius: 30px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #b07c00;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-badge svg { color: #FFB800; flex-shrink: 0; }

/* H1 — surcharge du tiret + span couleur */
.EbannerLeft h1 span,
.h-1-banner .h-1-banner-text h1 span {
  color: #FFB800 !important;
}

/* Tagline Excellence · Savoir-faire · Distinction */
.hero-tagline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: #1A3680 !important;
  margin: 16px 0 0 0 !important;
  flex-wrap: wrap;
}
.hero-tagline span { white-space: nowrap; }
.hero-dot {
  color: #FFB800 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* Description hero */
.hero-desc {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #4A5568 !important;
  margin: 14px 0 28px !important;
  max-width: 520px !important;
}

/* Groupe 3 CTAs */
.hero-cta-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

/* CTA base */
.hero-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 22px !important;
  border-radius: 50px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
}
.hero-cta svg { flex-shrink: 0; }

/* CTA principal — or gold */
.hero-cta-primary {
  background: linear-gradient(135deg, #FFB800, #E6A000) !important;
  color: #1A3680 !important;
  box-shadow: 0 6px 20px rgba(255,184,0,0.35) !important;
}
.hero-cta-primary:hover {
  background: linear-gradient(135deg, #1A3680, #2B4E9E) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(26,54,128,0.3) !important;
  transform: translateY(-2px) !important;
}

/* CTA secondaire — navy outline */
.hero-cta-secondary {
  background: #1A3680 !important;
  color: #fff !important;
  border-color: #1A3680 !important;
  box-shadow: 0 4px 16px rgba(26,54,128,0.2) !important;
}
.hero-cta-secondary:hover {
  background: #0D1A4A !important;
  border-color: #0D1A4A !important;
  color: #FFB800 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(26,54,128,0.3) !important;
}

/* CTA tertiaire — outline transparent */
.hero-cta-outline {
  background: transparent !important;
  color: #1A3680 !important;
  border-color: rgba(26,54,128,0.35) !important;
}
.hero-cta-outline:hover {
  background: #1A3680 !important;
  color: #fff !important;
  border-color: #1A3680 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(26,54,128,0.2) !important;
}

@media (max-width: 768px) {
  .hero-cta-group { flex-direction: column; align-items: stretch !important; }
  .hero-cta { justify-content: center !important; }
  .hero-tagline { font-size: 12px !important; letter-spacing: 1.2px !important; }
  .hero-badge { font-size: 11px; }
}

/* ── H1 deux lignes — tailles distinctes, chacune sur une seule ligne ── */
.EbannerLeft h1,
.h-1-banner .h-1-banner-text h1 {
  font-size: unset !important;
  max-width: none !important;
  margin-bottom: 18px !important;
  line-height: 1 !important;
}
.h1-line1 {
  display: block !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1A3680 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
}
.h1-line1::after { display: none !important; }
.h1-line2 {
  display: block !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #1A2847 !important;
  letter-spacing: -0.6px !important;
  white-space: nowrap !important;
  line-height: 1.12 !important;
  text-transform: none !important;
}
.h1-line2::after { display: none !important; }
@media (max-width: 1199px) {
  .h1-line2 { font-size: 26px !important; }
  .h1-line1 { font-size: 15px !important; }
}
@media (max-width: 991px) {
  .h1-line2 { font-size: 22px !important; white-space: normal !important; }
  .h1-line1 { font-size: 14px !important; }
}
@media (max-width: 767px) {
  .h1-line2 { font-size: 20px !important; }
}

/* ── Fix spécificité : forcer block sur les deux lignes H1 ── */
.EbannerLeft h1 .h1-line1,
.h-1-banner .h-1-banner-text h1 .h1-line1 {
  display: block !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1A3680 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}
.EbannerLeft h1 .h1-line1::after,
.h-1-banner .h-1-banner-text h1 .h1-line1::after { display: none !important; }

.EbannerLeft h1 .h1-line2,
.h-1-banner .h-1-banner-text h1 .h1-line2 {
  display: block !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #1A2847 !important;
  letter-spacing: -0.6px !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}
.EbannerLeft h1 .h1-line2::after,
.h-1-banner .h-1-banner-text h1 .h1-line2::after { display: none !important; }

@media (max-width: 1199px) {
  .EbannerLeft h1 .h1-line2,
  .h-1-banner .h-1-banner-text h1 .h1-line2 { font-size: 26px !important; }
}
@media (max-width: 991px) {
  .EbannerLeft h1 .h1-line2,
  .h-1-banner .h-1-banner-text h1 .h1-line2 { font-size: 22px !important; white-space: normal !important; }
  .EbannerLeft h1 .h1-line1,
  .h-1-banner .h-1-banner-text h1 .h1-line1 { font-size: 14px !important; }
}
@media (max-width: 767px) {
  /* H1 plus grand + autoriser le retour à la ligne */
  .EbannerLeft h1 .h1-line2,
  .h-1-banner .h-1-banner-text h1 .h1-line2 {
    font-size: 30px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
  .EbannerLeft h1 .h1-line1,
  .h-1-banner .h-1-banner-text h1 .h1-line1 {
    font-size: 17px !important;
    white-space: normal !important;
  }
  /* Masquer le soulignement "Formations techniques" sur mobile */
  .hero-highlight::after { display: none !important; }
  /* Soulignement doré — appliqué directement sur les deux spans pour garantir l'affichage */
  .EbannerLeft h1 .h1-line2 .h1-part1,
  .EbannerLeft h1 .h1-line2 .h1-part2,
  .h-1-banner .h-1-banner-text h1 .h1-line2 .h1-part1,
  .h-1-banner .h-1-banner-text h1 .h1-line2 .h1-part2 {
    text-decoration: underline !important;
    text-decoration-color: #FFB800 !important;
    text-decoration-thickness: 4px !important;
    text-underline-offset: 8px !important;
  }
  /* Désactiver le pseudo-element ::after (inutile) */
  .EbannerLeft h1 .h1-line2::after,
  .h-1-banner .h-1-banner-text h1 .h1-line2::after {
    display: none !important;
  }
}

/* ── Formations dropdown : texte blanc au survol et à l'ouverture ── */
.navbar-nav .nav-link.dropdown-toggle:hover,
.navbar-nav .nav-link.dropdown-toggle.show,
.navbar-nav .nav-link.header-dropdown:hover,
.navbar-nav .nav-link.header-dropdown.show {
  color: #fff !important;
  background: #1A3680 !important;
  border-radius: 22px !important;
  padding: 6px 14px !important;
}
.navbar-nav .nav-link.dropdown-toggle:hover span,
.navbar-nav .nav-link.dropdown-toggle:hover i,
.navbar-nav .nav-link.dropdown-toggle.show span,
.navbar-nav .nav-link.dropdown-toggle.show i,
.navbar-nav .nav-link.header-dropdown:hover span,
.navbar-nav .nav-link.header-dropdown:hover i,
.navbar-nav .nav-link.header-dropdown.show span,
.navbar-nav .nav-link.header-dropdown.show i {
  color: #fff !important;
}

/* ── text-nowrap : forcer blanc sur span et icône au survol ── */
.navbar-nav .nav-link.text-nowrap:hover span,
.navbar-nav .nav-link.text-nowrap:hover i,
.navbar-nav .nav-link.text-nowrap:hover .fa-angle-down,
.navbar-nav .nav-link.text-nowrap.active span,
.navbar-nav .nav-link.text-nowrap.show span {
  color: #fff !important;
}

/* ── hero-cta-primary : SVG et texte blanc au survol ── */
.hero-cta.hero-cta-primary:hover,
a.hero-cta-primary:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #1A3680, #2B4E9E) !important;
}
.hero-cta.hero-cta-primary:hover svg,
a.hero-cta-primary:hover svg {
  stroke: #fff !important;
  color: #fff !important;
}

/* ── Espace entre les boutons de la navbar ── */
ul.navbar-nav.main-nav-wrap { gap: 6px !important; }

/* ── Surlignement doré style "maîtrise d'œuvre" ── */
.hero-highlight {
  position: relative;
  display: inline;
  white-space: nowrap;
}
.hero-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFB800, #E6A000);
  border-radius: 2px;
}

/* ── Titre formation dans les cards : texte complet visible ── */
.single-popup-course.epopCourse .courses-text h5,
.courses-text h5,
.grid-view-body .courses-text h5.mb-2,
.courses-list-view-body .courses-text h5 {
  font-size: 15px !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  max-height: none !important;
}

/* ── Masquer icône wishlist (cœur) sur les cards ── */
.courses-icon[id*="coursesWishlistIcon"],
.courses-icon .fa-heart,
.fa-heart.checkPropagation { display: none !important; }

/* ── Badge Accès Réservé sur les cards ── */
.card-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(26,54,128,0.06);
  border: 1px solid rgba(26,54,128,0.18);
  border-radius: 20px;
  padding: 4px 11px 4px 8px;
  margin: 4px 0 2px;
  font-size: 10px;
  font-weight: 600;
  color: #1A3680;
  white-space: nowrap;
  letter-spacing: 0.1px;
  line-height: 1;
}
.card-access-badge svg {
  flex-shrink: 0;
  opacity: 0.75;
}

/* ── Masquer entièrement le bloc wishlist (cœur) ── */
.courses-icon[id*="coursesWishlistIcon"] { display: none !important; }

/* ── Masquer tous les blocs wishlist (cœur) sur les cards ── */
.courses-card-image .courses-icon,
div.courses-icon { display: none !important; }

/* ── H1 : mise en valeur et fade sur "Élever son art." ── */
.h1-part1 {
  color: #1A2847;
}
.h1-part2 {
  color: #1A2847;
  margin-left: 0.28em;
  opacity: 0;
  animation: fadeSlideIn 1s ease forwards;
  animation-delay: 1.2s;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── h1-line2 entièrement bleu ── */
.EbannerLeft h1 .h1-line2,
.EbannerLeft h1 .h1-line2 .h1-part1,
.EbannerLeft h1 .h1-line2 .h1-part2,
.h-1-banner .h-1-banner-text h1 .h1-line2,
.h-1-banner .h-1-banner-text h1 .h1-line2 .h1-part1,
.h-1-banner .h-1-banner-text h1 .h1-line2 .h1-part2 {
  color: #1A2847 !important;
}

/* ════════════════════════════════════════════════
   IMAGE HERO MOBILE — responsive + tailles texte
   ════════════════════════════════════════════════ */

/* Image mobile hero — bloc séparé masqué (on utilise le fond CSS) */
.hero-mobile-visual { display: none !important; }

/* Masquer l'image desktop (eCircle_parent) sur téléphone */
@media (max-width: 767px) {
  .eCircle_parent { display: none !important; }

  /* Image en arrière-plan du hero sur mobile, derrière le H1 */
  .h-1-banner.bannar-area {
    background:
      linear-gradient(180deg,
        rgba(247,249,255,0.55) 0%,
        rgba(250,252,255,0.42) 35%,
        rgba(255,255,255,0.80) 100%
      ),
      url('/uploads/system/595b8086058fbf22a5bdfc5b01273e2c.png') center 15% / cover no-repeat !important;
    padding-bottom: 60px !important;
  }
}

/* ── TAILLES TEXTE MOBILE (≤ 767px) ── */
@media (max-width: 767px) {
  /* H1 hero */
  .EbannerLeft h1 .h1-line1,
  .h-1-banner .h-1-banner-text h1 .h1-line1 {
    font-size: 16px !important;
    white-space: normal !important;
  }
  .EbannerLeft h1 .h1-line2,
  .h-1-banner .h-1-banner-text h1 .h1-line2 {
    font-size: 26px !important;
    white-space: normal !important;
    line-height: 1.18 !important;
  }
  /* Description hero */
  .hero-desc {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  /* Badge accroche */
  .hero-badge {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }
  /* Tagline Excellence · Savoir-faire · Distinction */
  .hero-tagline {
    font-size: 13px !important;
    letter-spacing: 1.4px !important;
  }
  /* Profession animée */
  .banner-professions-anim {
    font-size: 24px !important;
  }
  .banner-prof-prefix {
    font-size: 22px !important;
  }
  .banner-prof-word {
    font-size: 26px !important;
  }
  /* CTAs */
  .hero-cta {
    font-size: 15px !important;
    padding: 14px 20px !important;
  }
  /* Banner cards sous le hero */
  .Ebaner-card .banner-card-1 h6,
  .bannar-card .banner-card-1 h6,
  .Ebaner-card h6 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  .Ebaner-card .banner-card-1 p,
  .bannar-card .banner-card-1 p,
  .Ebaner-card p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Banner cards — centrage mobile */
  .banner-card-1 .row { flex-direction: column; align-items: center; text-align: center; }
  .banner-card-1 .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  .banner-card-1 .row > [class*="col-"]:first-child {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
  }
  .banner-card-1 .row > [class*="col-"]:first-child img {
    width: 52px !important;
    height: 52px !important;
  }
  .banner-card-1 h6,
  .Ebaner-card .banner-card-1 h6,
  .bannar-card .banner-card-1 h6 {
    text-align: center !important;
    font-size: 17px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner-card-1 p,
  .Ebaner-card .banner-card-1 p,
  .bannar-card .banner-card-1 p {
    text-align: center !important;
    font-size: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── TAILLES TEXTE TÉLÉPHONE PETIT (≤ 575px) ── */
@media (max-width: 575px) {
  .EbannerLeft h1 .h1-line1,
  .h-1-banner .h-1-banner-text h1 .h1-line1 {
    font-size: 15px !important;
  }
  .EbannerLeft h1 .h1-line2,
  .h-1-banner .h-1-banner-text h1 .h1-line2 {
    font-size: 24px !important;
  }
  .hero-desc { font-size: 15px !important; }
  /* Sections du contenu */
  .cTitle h1,
  section h1.f-36 { font-size: 22px !important; }
  .cTitle p,
  .cTitle > p { font-size: 15px !important; }
  /* Cartes formations */
  .course-item-one .content .title { font-size: 15px !important; }
  /* Section académie */
  .academy-intro h2 { font-size: 26px !important; }
  .academy-lead { font-size: 16px !important; }
  .academy-card h3 { font-size: 16px !important; }
  .academy-card p { font-size: 14px !important; }
  .academy-panel h2 { font-size: 20px !important; }
  .academy-panel p { font-size: 14px !important; }
  .academy-faq > h2 { font-size: 20px !important; }
  .academy-faq-item summary { font-size: 15px !important; }
  .academy-faq-item p { font-size: 14px !important; }
  /* Blocs promo communauté */
  .cp-promo-kicker { font-size: 10px !important; }
  .cp-promo-card h2 { font-size: 20px !important; }
  .cp-promo-card p { font-size: 14px !important; }
  .cp-promo-btn { font-size: 14px !important; padding: 13px 20px !important; }
  /* Mobile image: plein écran */
  .hero-mobile-visual {
    margin: 24px -12px 0;
    border-radius: 16px 16px 0 0;
  }
  .hero-mobile-visual img {
    max-height: 280px;
    border-radius: 16px 16px 0 0;
  }

  /* Banner cards — renforcement centrage ≤ 575px */
  .banner-card-1 h6,
  .Ebaner-card .banner-card-1 h6,
  .bannar-card .banner-card-1 h6 {
    font-size: 16px !important;
  }
  .banner-card-1 p,
  .Ebaner-card .banner-card-1 p,
  .bannar-card .banner-card-1 p {
    font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR FILTRES — course-all-category — Redesign Compagnons Pro®
   ════════════════════════════════════════════════════════════════ */

/* ── Conteneur principal ── */
.course-all-category {
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 4px 28px rgba(26, 54, 128, 0.10) !important;
  overflow: hidden !important;
  position: sticky !important;
  top: 90px !important;
}

/* ── Barre dorée en haut du sidebar ── */
.course-all-category::before {
  content: '' !important;
  display: block !important;
  height: 4px !important;
  background: linear-gradient(90deg, #1A3680, #FFB800, #1A3680) !important;
}

/* ── Champ de recherche ── */
.course-all-category .form-group {
  position: relative !important;
  padding: 16px 16px 0 !important;
  margin-bottom: 4px !important;
}
.course-all-category .form-group .form-control {
  border: 1.5px solid #e2e8f5 !important;
  border-radius: 10px !important;
  padding: 11px 44px 11px 14px !important;
  font-size: 14px !important;
  font-family: 'Poppins', sans-serif !important;
  color: #1A2847 !important;
  background: #f6f8fd !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
}
.course-all-category .form-group .form-control:focus {
  border-color: #1A3680 !important;
  background: #fff !important;
  outline: none !important;
}
.course-all-category .form-group .form-control::placeholder {
  color: #9eaabf !important;
  font-size: 13px !important;
}
.course-all-category .form-group button[type="submit"] {
  position: absolute !important;
  left: auto !important;
  right: 26px !important;
  top: 16px !important;
  height: 44px !important;
  width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
}
.course-all-category .form-group button svg path { fill: #1A3680 !important; }
.course-all-category .form-group button:hover svg path { fill: #FFB800 !important; }

/* ── Accordion : supprimer les bordures par défaut Bootstrap ── */
.course-all-category .accordion { border: none !important; }
.course-all-category .accordion-item {
  border: none !important;
  border-top: 1px solid #edf0f8 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.course-all-category .accordion-item:first-child { border-top: none !important; }

/* ── Boutons accordion (titres de section) ── */
.course-all-category .accordion-button {
  background: transparent !important;
  color: #1A2847 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  border: none !important;
}
.course-all-category .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A3680' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.25s ease !important;
}
.course-all-category .accordion-button:not(.collapsed) {
  color: #1A3680 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.course-all-category .accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg) !important;
}
.course-all-category .accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* ── Corps accordion ── */
.course-all-category .accordion-body {
  padding: 4px 16px 16px !important;
}

/* ── Options (form-check) ── */
.course-all-category .form-check {
  padding: 7px 0 7px 28px !important;
  margin-bottom: 0 !important;
  position: relative !important;
}
.course-all-category .form-check-input {
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid #c8d0e4 !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  cursor: pointer !important;
  margin-left: -22px !important;
  margin-top: 3px !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
}
.course-all-category .form-check-input:checked {
  background-color: #1A3680 !important;
  border-color: #1A3680 !important;
  box-shadow: 0 0 0 3px rgba(26,54,128,0.12) !important;
}
.course-all-category .form-check-input:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* ── Labels ── */
.course-all-category .form-check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  width: 100% !important;
  gap: 8px !important;
}
.course-all-category .form-check-label a,
.course-all-category .course-category a {
  color: #4a5568 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
  line-height: 1.4 !important;
}
.course-all-category .form-check-label a:hover,
.course-all-category .course-category a:hover {
  color: #1A3680 !important;
}
/* Label actif */
.course-all-category .form-check-label.active a {
  color: #1A3680 !important;
  font-weight: 700 !important;
}
.course-all-category .form-check-label.active {
  background: rgba(26,54,128,0.05) !important;
  border-radius: 8px !important;
  padding: 3px 8px 3px 4px !important;
  margin: -3px -8px -3px -4px !important;
}

/* ── Compteur (nombre de formations) ── */
.course-all-category .form-check-label span,
.course-all-category .course-category span {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #1A3680 !important;
  background: rgba(26,54,128,0.08) !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── Sous-catégories (ul) ── */
.course-all-category .course-category .webdesign ul {
  list-style: none !important;
  padding-left: 12px !important;
  border-left: 2px solid #e8ecf5 !important;
  margin-left: 4px !important;
}
.course-all-category .course-category .webdesign ul li a {
  font-size: 13px !important;
  color: #6b7a99 !important;
}
.course-all-category .course-category .webdesign ul li a:hover {
  color: #1A3680 !important;
}

/* ── Bouton Show More / Show Less ── */
.course-all-category .show-more {
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px dashed #e2e8f5 !important;
}
.course-all-category .show-more a,
.course-all-category .show-more-less-btn,
.course-all-category .show-more-less-btn-lan {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A3680 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.course-all-category .show-more a:hover,
.course-all-category .show-more-less-btn:hover,
.course-all-category .show-more-less-btn-lan:hover {
  color: #FFB800 !important;
}
.course-all-category .show-more a::after,
.course-all-category .show-more-less-btn::after,
.course-all-category .show-more-less-btn-lan::after {
  content: ' ↓' !important;
  font-size: 12px !important;
}

/* ── Étoiles notation ── */
.course-all-category .form-check-icon ul {
  display: flex !important;
  gap: 3px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.course-all-category .form-check-icon ul li i {
  color: #d1d8e8 !important;
  font-size: 13px !important;
}
.course-all-category .form-check-icon ul li.icon-color i {
  color: #FFB800 !important;
}
.course-all-category .form-check-label:hover .form-check-icon ul li i,
.course-all-category .form-check-input:checked ~ .form-check-label .form-check-icon ul li.icon-color i {
  color: #E6A000 !important;
}

/* ── Responsive mobile ── */
@media (max-width: 991px) {
  .course-all-category {
    position: static !important;
    margin-bottom: 32px !important;
  }
}

/* ── Masquer le sélecteur de langue nice-select ── */
.nice-select.select-control.form-select,
.nice-select.form-select { display: none !important; }

/* ── h1-line1 : pas de soulignement sur mobile ── */
@media (max-width: 767px) {
  .EbannerLeft h1 .h1-line1,
  .h-1-banner .h-1-banner-text h1 .h1-line1 {
    text-decoration: none !important;
  }
}

/* ── h1-part1 / h1-part2 : taille augmentée sur mobile ── */
@media (max-width: 767px) {
  .EbannerLeft h1 .h1-line2 .h1-part1,
  .EbannerLeft h1 .h1-line2 .h1-part2,
  .h-1-banner .h-1-banner-text h1 .h1-line2 .h1-part1,
  .h-1-banner .h-1-banner-text h1 .h1-line2 .h1-part2 {
    font-size: 34px !important;
    font-weight: 900 !important;
  }
}
@media (max-width: 575px) {
  .EbannerLeft h1 .h1-line2 .h1-part1,
  .EbannerLeft h1 .h1-line2 .h1-part2,
  .h-1-banner .h-1-banner-text h1 .h1-line2 .h1-part1,
  .h-1-banner .h-1-banner-text h1 .h1-line2 .h1-part2 {
    font-size: 30px !important;
  }
}

/* ── Sidebar formations : masquer Prix, Langue, Évaluations sur mobile ── */
@media (max-width: 767px) {
  .sidebar-filter-price,
  .sidebar-filter-language,
  .sidebar-filter-ratings {
    display: none !important;
  }
}

/* ── Logo watermark dans le banner hero ── */
.hero-logo-watermark {
  position: absolute !important;
  right: -60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 520px !important;
  height: auto !important;
  opacity: 0.07 !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
  filter: grayscale(30%) !important;
}
@media (max-width: 991px) {
  .hero-logo-watermark {
    width: 340px !important;
    right: -20px !important;
    opacity: 0.09 !important;
  }
}
@media (max-width: 767px) {
  /* Sur mobile : logo centré derrière la tagline Excellence · Savoir-faire · Distinction */
  .hero-logo-watermark {
    width: 420px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    top: 40% !important;
    bottom: auto !important;
    opacity: 0.22 !important;
    filter: grayscale(5%) !important;
  }
}
@media (max-width: 575px) {
  .hero-logo-watermark {
    width: 88vw !important;
    max-width: 420px !important;
    opacity: 0.20 !important;
    top: 42% !important;
    right: 50% !important;
    transform: translateX(50%) !important;
  }
}

/* ── Logo Compagnons Pro® dans les cartes formation (remplace durée) ── */
.duration-time {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}
.duration-time .course-card-cp-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  display: block !important;
  filter: grayscale(100%) contrast(1.1) !important;
  opacity: 0.75 !important;
  transition: transform 0.35s ease, opacity 0.35s ease !important;
  transform-origin: center !important;
}
.duration-time:hover .course-card-cp-logo,
.course-item-one:hover .duration-time .course-card-cp-logo {
  transform: scale(1.18) !important;
  opacity: 1 !important;
  filter: grayscale(100%) contrast(1.3) !important;
}

/* ── Modal header : titre et bouton fermer en blanc ── */
.modal-header .title,
.modal-header h5.title {
  color: #ffffff !important;
}
.modal-header .btn.btn-secondary {
  color: #ffffff !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* ── Page Connexion : eCircle_parent compact à gauche du h3 ── */
.login-ecircle-compact {
  flex-shrink: 0 !important;
  width: 90px !important;
  position: relative !important;
}
.login-ecircle-compact .Ebanner img {
  width: 90px !important;
  height: 90px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}
.login-ecircle-compact .eCircle {
  position: absolute !important;
  bottom: -8px !important;
  right: -8px !important;
}
.login-ecircle-compact .eCircle .circleOne img,
.login-ecircle-compact .eCircle .cirlceTwo img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}
.login-header-row h3 {
  font-size: 2rem !important;
}

/* ── FAQ accordion : bullet centré verticalement avec le texte ── */
.faq-accrodion .accordion .accordion-button::before {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ── Page Connexion / Inscription : reset du positionnement absolu du thème ── */
.sign-up .eCircle_parent {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
}
.sign-up .Ebanner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 1 !important;
}
.sign-up .Ebanner img {
  height: auto !important;
  max-height: 420px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}
.sign-up .eCircle {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  top: auto !important;
  left: auto !important;
}
.sign-up .col-lg-7 {
  position: relative !important;
}
/* Fond en opacité sur la section connexion */
.sign-up {
  position: relative !important;
  overflow: hidden !important;
}
.sign-up::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: url('/uploads/system/image_bk_compagnonspro.png') center / cover no-repeat !important;
  opacity: 0.06 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.sign-up .container {
  position: relative !important;
  z-index: 1 !important;
}

/* ---- Section header générique (Parcours inspirants, etc.) ---- */
.cp-section-header {
  padding: 18px 0 4px;
  margin-bottom: 20px !important;
}
.cp-section-badge {
  display: inline-block;
  background: rgba(255, 184, 0, 0.12);
  color: #FFB800;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1.5px solid rgba(255, 184, 0, 0.35);
  border-radius: 50px;
  padding: 4px 18px;
  margin-bottom: 8px;
}
.cp-section-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: #1A3680;
  margin: 0 auto 8px;
  max-width: 640px;
  line-height: 1.25;
}
.cp-section-title span {
  color: #1A3680 !important;
}
.cp-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  width: 80px;
}
.cp-section-divider span {
  display: block;
  height: 4px;
  width: 64px;
  background: linear-gradient(90deg, #FFB800 0%, #ffd466 100%);
  border-radius: 4px;
}
.cp-section-subtitle {
  font-size: 1.02rem;
  color: #5a6a8a;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Blog banner : hauteur minimale ---- */
.blog-page-section .container-lg.py-5,
section:has(.image-placeholder-2) .container-lg {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
section:has(.image-placeholder-2) .row.my-md-4 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---- image-placeholder-2 : dégradé bleu marine Compagnons Pro ---- */
.image-placeholder-2 {
  background: linear-gradient(135deg, rgba(26,54,128,0.82) 0%, rgba(10,25,70,0.70) 100%) !important;
}

/* ---- Filtres cours : masquer prix, évaluations, langue ---- */
.sidebar-filter-price,
.sidebar-filter-ratings,
.sidebar-filter-language {
  display: none !important;
}

/* ============================================================
   REFONTE MENU UTILISATEUR CONNECTÉ — Admin
   ============================================================ */

/* ── Dropdown principal : plus large, ombre renforcée ── */
.menu_pro_tgl_bg {
  width: 300px !important;
  border-top: 3px solid #FFB800 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 12px 40px rgba(26,54,128,.18) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ── Bloc user-info en haut : fond navy dégradé ── */
.menu_pro_tgl_bg .path-pos { padding: 0 !important; }
.menu_pro_tgl_bg .path-pos::after { display: none !important; }

.menu_pro_tgl_bg .user-images {
  background: linear-gradient(135deg, #1A3680, #2B4E9E) !important;
  padding: 18px 20px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
  position: relative !important;
}
.menu_pro_tgl_bg .user-images::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFB800, rgba(255,184,0,.3));
}
.menu_pro_tgl_bg .user-images a { flex-shrink: 0 !important; margin: 0 !important; }
.menu_pro_tgl_bg .path-pos img {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border: 2px solid #FFB800 !important;
  flex-shrink: 0 !important;
}
.menu_pro_tgl_bg .user-info { flex: 1 !important; min-width: 0 !important; text-align: left !important; }
.menu_pro_tgl_bg h4 {
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  margin: 0 0 3px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.menu_pro_tgl_bg p {
  color: rgba(255,255,255,.7) !important;
  font-size: 0.70rem !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Liste des items ── */
.menu_pro_tgl_bg ul {
  border-top: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}
.menubar .right-menubar .menu_pro_tgl_bg ul li {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.menu_pro_tgl_bg ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px !important;
  margin: 0 !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: #1E293B !important;
  transition: background .15s, color .15s, padding-left .15s !important;
  white-space: nowrap !important;
}
.menu_pro_tgl_bg ul li a svg { flex-shrink: 0 !important; }
.menu_pro_tgl_bg ul li:hover a {
  background: #f0f5ff !important;
  color: #1A3680 !important;
  padding-left: 22px !important;
  margin-left: 0 !important;
}
.menu_pro_tgl_bg ul li:hover { background: transparent !important; }
.menu_pro_tgl_bg ul li:hover::after { display: none !important; }

/* ── Séparateur ADMINISTRATION ── */
.cp-dropdown-admin-sep {
  list-style: none !important;
  pointer-events: none !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}
.cp-dropdown-admin-sep span {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(90deg, #1A3680 70%, #2453B2) !important;
  padding: 5px 18px !important;
  border-left: 3px solid #FFB800 !important;
}

/* ── Items ADMIN : fond bleu pâle + couleur navy ── */
.cp-dropdown-admin-item { background: #f4f7ff !important; }
.cp-dropdown-admin-item a { color: #1A3680 !important; font-weight: 600 !important; }
.cp-dropdown-admin-item:hover a {
  background: #e8eeff !important;
  color: #1A3680 !important;
}

/* ── Item Déconnexion : rouge doux ── */
.menu_pro_tgl_bg ul li:last-child a {
  color: #c0392b !important;
  border-top: 1px solid #f0f0f0 !important;
  margin-top: 4px !important;
}
.menu_pro_tgl_bg ul li:last-child:hover a {
  background: #fff5f5 !important;
  color: #c0392b !important;
}
.menu_pro_tgl_bg ul li:last-child a svg path { fill: #c0392b !important; }

/* ── Bouton ADMINISTRATION dans la navbar ── */
a.cp-admin-navbtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #1A3680, #2453B2) !important;
  color: #FFB800 !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(255,184,0,0.5) !important;
  white-space: nowrap !important;
  transition: all .2s !important;
  box-shadow: 0 2px 8px rgba(26,54,128,.25) !important;
}
a.cp-admin-navbtn:hover {
  background: linear-gradient(135deg, #FFB800, #e6a500) !important;
  color: #1A3680 !important;
  box-shadow: 0 4px 12px rgba(255,184,0,.35) !important;
}
a.cp-admin-navbtn svg { flex-shrink: 0 !important; }

/* ============================================================
   ARTICLE-HERO — Bloc intro article avec logo watermark
   ============================================================ */
.article-hero {
  position: relative;
  background: linear-gradient(135deg, #1A3680 0%, #0D1A4A 100%);
  border-left: 4px solid #FFB800;
  border-radius: 10px;
  padding: 28px 32px 28px 36px;
  margin: 24px 0 28px;
  overflow: hidden;
}
.article-hero::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  background: url('../../../../../uploads/system/logo_compagnonspro_officiel.webp') center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
  mix-blend-mode: screen;
}
.article-hero h2,
.article-hero h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFB800;
  margin: 0 0 10px;
  line-height: 1.35;
  position: relative;
  z-index: 1;
  padding-right: 120px;
}
.article-hero p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin: 0;
  position: relative;
  z-index: 1;
  padding-right: 100px;
}
@media (max-width: 575px) {
  .article-hero { padding: 20px 20px 20px 24px; }
  .article-hero h2, .article-hero h3, .article-hero p { padding-right: 0; }
  .article-hero::after { opacity: 0.06; width: 90px; height: 90px; }
}

/* ── Bouton CTA À propos ── */
.cp-about-cta {
  color: #fff !important;
}
.cp-about-cta:hover {
  color: #fff !important;
}

/* ── Bouton Maison officielle ── */
.cp-maison-btn { display:inline-block; }
@media (max-width: 575px) {
  .cp-maison-btn { padding:1px 5px !important; font-size:9px !important; }
  .cp-maison-btn .cp-maison-label { display:none; }
}

/* ── Lien réseau hero ── */
.cp-hero-reseau-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(26,54,128,.75);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(26,54,128,.3);
  padding-bottom: 2px;
  transition: all .25s;
}
@media (max-width: 575px) {
  .cp-hero-reseau-link {
    font-size: 15px;
    font-weight: 800;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
}