/* =====================================================
   ALAJI  Redesign Override
   Applique la charte du livrable HTML sur le thme Pixzlo Child
   Couleurs : navy #363D64  rose #D72A74  blanc #fff
   Fonts    : Plus Jakarta Sans (titres)  Titillium Web (corps)
   ===================================================== */

/*  Google Fonts  */
@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif&display=swap);

/*  Variables  */
:root {
  --alaji-navy:   #363D64;
  --alaji-pink:   #D72A74;
  --alaji-pink-light: #fde4ee;
  --alaji-white:  #ffffff;
  --alaji-bg:     #f7f8fb;
  --alaji-radius: 12px;
  --alaji-radius-sm: 8px;
}

/* =====================================================
   TYPOGRAPHIE
   ===================================================== */
h1, h2, h3, h4, h5, h6,
.section-title,
.entry-title,
.post-title {
  font-family: 'Plus Jakarta Sans', 'Titillium Web', system-ui, sans-serif !important;
  color: var(--alaji-navy) !important;
}

body {
  font-family: 'Titillium Web', system-ui, sans-serif !important;
  color: #0b0b0b !important;
  background: #fff !important;
}

/* =====================================================
   COULEURS  remplacement de #fc0 par le rose Alaji
   ===================================================== */
a:hover,
.navbar a:hover,
.navbar a:active,
.navbar a:focus,
.navbar .pixzlo-main-menu > .current-menu-item > a,
.navbar .pixzlo-main-menu > .current-menu-ancestor > a,
.navbar a.active {
  color: var(--alaji-pink) !important;
}

ul.dropdown-menu > li a:hover,
ul.mega-child-dropdown-menu > li a:hover,
.header-sticky ul.dropdown-menu > li a:hover,
ul.dropdown-menu > li a:active,
ul.dropdown-menu > li.current-menu-item > a,
ul.dropdown-menu > li.current-menu-parent > a {
  color: var(--alaji-pink) !important;
}

::selection { background: var(--alaji-pink); color: #fff; }

.feature-box-style-3::before { background-color: var(--alaji-pink) !important; }
.btn_link_actu.boxed2:hover { background: var(--alaji-pink); color: #fff; }
.link-yellow:hover,
.welcome-txt a:hover { color: var(--alaji-pink) !important; }

/* =====================================================
   HEADER  fond blanc, logo navy, barre sticky navy
   ===================================================== */

/* Fond header blanc */
.pixzlo-header,
.header-sticky,
.sticky-scroll.show-menu,
.header-layout-1,
.header-layout-2 {
  background: #fff !important;
  box-shadow: 0 2px 16px rgba(54,61,100,.08) !important;
  border-bottom: none !important;
}

/* Barre de navigation  texte navy */
.navbar,
.pixzlo-main-menu > li > a,
.navbar-items > li > a {
  color: var(--alaji-navy) !important;
  font-family: 'Titillium Web', system-ui !important;
  font-weight: 600 !important;
}

/* Hover nav  rose */
.pixzlo-main-menu > li > a:hover {
  color: var(--alaji-pink) !important;
}

/* Logo  forcer l'affichage du nouveau SVG si possible */
.navbar-brand img,
.site-logo img,
.pixzlo-logo img {
  max-height: 44px !important;
  width: auto !important;
}

/* Bouton accent dans le header */
.header-btn,
.btn-accent,
.nav-cta,
a[href*=e-learning].btn,
a[href*=e-learning] {
  background: var(--alaji-navy) !important;
  color: #fff !important;
  border-radius: var(--alaji-radius) !important;
  border: none !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  transition: background .2s ease !important;
}
a[href*=e-learning]:hover {
  background: var(--alaji-pink) !important;
  color: #fff !important;
}

/* =====================================================
   BOUTONS
   ===================================================== */
.btn-default,
.btn-primary,
button[type=submit],
input[type=submit],
.vc_btn3 {
  border-radius: var(--alaji-radius) !important;
  font-family: 'Titillium Web', system-ui !important;
  font-weight: 700 !important;
  transition: all .2s ease !important;
}

/* Bouton principal  navy */
.btn-primary,
.btn-main,
.vc_btn3.vc_btn3-style-flat.vc_btn3-color-blue,
.vc_btn3.vc_btn3-color-sky {
  background: var(--alaji-navy) !important;
  color: #fff !important;
  border-color: var(--alaji-navy) !important;
}
.btn-primary:hover,
.btn-main:hover {
  background: #4a527f !important;
  box-shadow: 0 10px 28px rgba(54,61,100,.28) !important;
  transform: translateY(-1px);
}

/* Bouton rose / CTA */
.btn-yellow,
.btn-cta,
.vc_btn3.vc_btn3-color-warning,
.btn-outline-primary {
  background: var(--alaji-pink) !important;
  color: #fff !important;
  border-color: var(--alaji-pink) !important;
  border-radius: var(--alaji-radius) !important;
}
.btn-yellow:hover,
.btn-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(215,42,116,.35);
  transform: translateY(-1px);
}

/* Bouton Voir les formations et Prendre rendez-vous */
.btn-formation,
a.btn[href*=formation],
a.btn[href*=Formation] {
  background: var(--alaji-pink) !important;
  color: #fff !important;
  border-radius: var(--alaji-radius) !important;
  font-weight: 700 !important;
}

/* =====================================================
   HERO / BANNER SECTIONS
   ===================================================== */
.vc_row.hero-section,
.rev-slide,
.tp-bgimg {
  /* On ne touche pas aux images de fond */
}

/* Titres hero */
.hero-title,
.banner-title,
.vc_custom_heading {
  font-family: 'Plus Jakarta Sans', 'Titillium Web', system-ui !important;
}

/* Badge Organisme de formation  CFA */
.hero-badge,
.badge-orga {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* =====================================================
   CARDS FORMATIONS
   ===================================================== */
.formation-card,
.course-item,
.vc_grid-item,
.service-box {
  border-radius: var(--alaji-radius) !important;
  border: 1px solid #eef0f4 !important;
  transition: all .2s ease !important;
  overflow: hidden !important;
}
.formation-card:hover,
.course-item:hover,
.vc_grid-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(54,61,100,.12) !important;
  border-color: var(--alaji-navy) !important;
}

/* Catgorie / tag formation */
.formation-category,
.cat-label,
.vc_label {
  background: var(--alaji-pink-light) !important;
  color: var(--alaji-navy) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}

/* =====================================================
   ACTUALITS / BLOG CARDS
   ===================================================== */
.post-card,
.blog-item,
.news-item {
  border-radius: var(--alaji-radius) !important;
  border: 1px solid #eef0f4 !important;
  overflow: hidden !important;
  transition: all .2s ease !important;
}
.post-card:hover,
.blog-item:hover,
.news-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(54,61,100,.1) !important;
}

/* =====================================================
   SECTIONS COLORES (fond navy)
   ===================================================== */
.section-navy,
.bg-navy,
.dark-section {
  background: var(--alaji-navy) !important;
  color: #fff !important;
}
.section-navy h1,
.section-navy h2,
.section-navy h3,
.bg-navy h1,
.bg-navy h2 {
  color: #fff !important;
}

/* Stats / chiffres cls  fond navy */
.stat-block,
.counter-box {
  background: var(--alaji-navy) !important;
  color: #fff !important;
  border-radius: var(--alaji-radius) !important;
}
.stat-block .counter,
.counter-box .counter {
  color: var(--alaji-pink) !important;
  font-family: 'Plus Jakarta Sans', system-ui !important;
  font-weight: 800 !important;
}

/* =====================================================
   FOOTER  fond navy fonc
   ===================================================== */
.site-footer,
footer.site-footer {
  background: var(--alaji-navy) !important;
  color: rgba(255,255,255,.75) !important;
  font-family: 'Titillium Web', system-ui !important;
}

.footer_top {
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  padding: 32px 0 !important;
}

.footer_middle {
  padding: 40px 0 !important;
}

.footer_bottom {
  border-top: 1px solid rgba(255,255,255,.1) !important;
  padding: 16px 0 !important;
}

.title_footer_box {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', 'Titillium Web', system-ui !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 12px !important;
  margin-bottom: 16px !important;
}

.footer_middle ul li a,
.services li a,
.client li a,
.contact li {
  color: rgba(255,255,255,.7) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 2 !important;
  transition: color .15s ease, transform .15s ease !important;
  display: inline-block !important;
}
.footer_middle ul li a:hover,
.services li a:hover,
.client li a:hover {
  color: #fff !important;
  transform: translateX(3px) !important;
}

/* Icnes sociales footer */
ul.social-icons > li > a {
  background: rgba(255,255,255,.12) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  transition: all .15s ease !important;
}
ul.social-icons > li > a:hover {
  background: var(--alaji-pink) !important;
  border-color: var(--alaji-pink) !important;
  transform: translateY(-2px) !important;
}

/* Lien bas de footer */
.link_footer p,
.link_footer a,
.link_footer span {
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
}
.link_footer a:hover { color: #fff !important; }

/* Newsletter footer */
.footer_top h4 {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', 'Titillium Web', system-ui !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}
.footer_top p,
.footer_top label,
.mailpoet_checkbox_label {
  color: rgba(255,255,255,.65) !important;
  font-size: 13px !important;
}

/* =====================================================
   FORMULAIRES
   ===================================================== */
input[type=text],
input[type=email],
input[type=tel],
input[type=search],
select,
textarea {
  border-radius: var(--alaji-radius-sm) !important;
  border: 1px solid #dde0ea !important;
  font-family: 'Titillium Web', system-ui !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--alaji-navy) !important;
  box-shadow: 0 0 0 3px rgba(54,61,100,.1) !important;
  outline: none !important;
}

/* =====================================================
   BARRE MOBILE
   ===================================================== */
.pixzlo-mobile-header,
.mobile-header,
.mobile-menu-btn {
  background: #fff !important;
}
.mobile-menu-btn span,
.hamburger-bar {
  background: var(--alaji-navy) !important;
}

/* Menu mobile ouvert  fond navy */
.mobile-nav-open .pixzlo-mobile-nav,
.mobile-menu-open {
  background: var(--alaji-navy) !important;
}

/* =====================================================
   QUALIOPI / BADGES
   ===================================================== */
.qualiopi-logo img,
.footer_top img[src*=qualiopi],
.footer_top img[src*=QUALIOPI] {
  filter: brightness(0) invert(1) !important;
  opacity: .85 !important;
}

/* =====================================================
   DIVERS  polish gnral
   ===================================================== */

/* Fil d'ariane */
.breadcrumb li,
.breadcrumb-item,
.breadcrumb a {
  color: rgba(255,255,255,.75) !important;
  font-size: 13px !important;
}

/* Pagination */
.page-numbers,
.pagination a {
  border-radius: var(--alaji-radius-sm) !important;
  border: 1px solid #eef0f4 !important;
  color: var(--alaji-navy) !important;
}
.page-numbers.current,
.pagination .active a {
  background: var(--alaji-pink) !important;
  color: #fff !important;
  border-color: var(--alaji-pink) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f3f7; }
::-webkit-scrollbar-thumb { background: var(--alaji-navy); border-radius: 3px; }