/*
 * MLS SUPPORT - CHARTE GRAPHIQUE CUSTOM
 * Couleurs basées sur le logo: Jaune/Or + Noir + Blanc cassé
 */

:root {
  --mls-primary: #F5C542;      /* Jaune Or du logo - couleur principale */
  --mls-secondary: #0D0D0D;    /* Noir profond - textes, headers */
  --mls-light: #FDF9F0;        /* Blanc cassé - backgrounds clairs */
  --mls-neutral: #E8E4D6;      /* Beige engrenages - zones intermédiaires */
  --mls-text: #6C757D;         /* Gris - textes secondaires */
  --mls-accent: #FF8C42;       /* Orange - CTA urgents */
  --mls-dark: #343A40;         /* Gris foncé métallisé */
}

/* ========================================
   COULEURS PRINCIPALES - OVERRIDE TEMPLATE
   ======================================== */

/* Couleur principale du template (skin color) = Jaune MLS */
.ttm-bgcolor-skincolor,
.ttm-btn-color-skincolor,
.ttm-btn-bgcolor-skincolor,
.ttm-textcolor-skincolor {
  background-color: var(--mls-primary) !important;
  color: var(--mls-secondary) !important;
}

/* Hover des boutons jaunes */
.ttm-btn-color-skincolor:hover,
.ttm-btn-bgcolor-skincolor:hover {
  background-color: var(--mls-secondary) !important;
  color: var(--mls-light) !important;
  transition: all 0.3s ease;
}

/* ========================================
   BOUTONS - CHARTE MLS HARMONISÉE
   ======================================== */

/* Boutons primaires (jaune) - Style carré industriel */
.ttm-btn-style-fill.ttm-btn-color-skincolor,
.ttm-btn.ttm-btn-color-skincolor,
.ttm-btn,
.btn,
button:not(.form-btn) {
  background-color: var(--mls-primary) !important;
  border: 2px solid var(--mls-primary) !important;
  color: var(--mls-secondary) !important;
  font-weight: 600 !important;
  border-radius: 2px !important; /* Style carré industriel */
  padding: 12px 25px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 140px !important;
  text-align: center !important;
}

.ttm-btn-style-fill.ttm-btn-color-skincolor:hover,
.ttm-btn.ttm-btn-color-skincolor:hover,
.ttm-btn:hover,
.btn:hover,
button:not(.form-btn):hover {
  background-color: var(--mls-secondary) !important;
  border-color: var(--mls-secondary) !important;
  color: var(--mls-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(245, 197, 66, 0.3) !important;
}

/* Boutons secondaires (bordure blanche) - Style carré */
.ttm-btn-style-border.ttm-btn-color-white,
.ttm-btn.ttm-btn-color-white,
.ttm-btn-outline {
  border: 2px solid var(--mls-light) !important;
  color: var(--mls-light) !important;
  background-color: transparent !important;
  border-radius: 2px !important;
  padding: 12px 25px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 140px !important;
  text-align: center !important;
}

.ttm-btn-style-border.ttm-btn-color-white:hover,
.ttm-btn.ttm-btn-color-white:hover,
.ttm-btn-outline:hover {
  background-color: var(--mls-primary) !important;
  border-color: var(--mls-primary) !important;
  color: var(--mls-secondary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2) !important;
}

/* Boutons dans la topbar - Style harmonisé */
.ttm-custombutton a {
  background-color: var(--mls-primary) !important;
  color: var(--mls-secondary) !important;
  padding: 10px 22px !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  border: 2px solid var(--mls-primary) !important;
}

.ttm-custombutton a:hover {
  background-color: var(--mls-secondary) !important;
  color: var(--mls-light) !important;
  border-color: var(--mls-secondary) !important;
  transform: translateY(-1px) !important;
}

/* ========================================
   HEADER - COULEURS MLS
   ======================================== */

/* Topbar - garde le noir du template */
.ttm-topbar-wrapper.ttm-bgcolor-darkgrey {
  background-color: var(--mls-secondary);
}

/* Navigation hover */
#menu ul.dropdown > li > a:hover,
#menu ul.dropdown > li:hover > a {
  color: var(--mls-primary) !important;
}

/* Menu actif */
#menu ul.dropdown > li.active > a {
  color: var(--mls-primary) !important;
}

/* Suppression des soulignements/traits indésirables du menu */
#menu ul.dropdown > li > a:before,
#menu ul.dropdown > li > a:after,
.ttm-stickable-header #menu ul.dropdown > li > a:before,
.ttm-stickable-header #menu ul.dropdown > li > a:after,
#menu ul.dropdown > li:hover > a:before,
#menu ul.dropdown > li:hover > a:after,
#menu ul.dropdown > li.active > a:before,
#menu ul.dropdown > li.active > a:after,
.ttm-stickable-header #menu ul.dropdown > li:hover > a:before,
.ttm-stickable-header #menu ul.dropdown > li:hover > a:after,
.ttm-stickable-header #menu ul.dropdown > li.active > a:before,
.ttm-stickable-header #menu ul.dropdown > li.active > a:after {
  display: none !important;
  background: none !important;
  border: none !important;
  content: none !important;
}

/* Indicateurs propres pour les sous-menus - Flèches uniquement */
#menu ul.dropdown > li:has(ul) > a:after,
#menu ul.dropdown > li.menu-item-has-children > a:after,
#site-header-menu #site-navigation .menu ul > li.has-submenu > a:after {
  content: "▼" !important;
  font-family: inherit !important;
  display: inline-block !important;
  margin-left: 8px !important;
  color: var(--mls-text) !important;
  font-size: 10px !important;
  opacity: 0.7 !important;
  transition: all 0.3s ease !important;
  background: none !important;
  border: none !important;
  position: static !important;
}

/* Hover des indicateurs de sous-menu */
#menu ul.dropdown > li:has(ul):hover > a:after,
#menu ul.dropdown > li.menu-item-has-children:hover > a:after,
#site-header-menu #site-navigation .menu ul > li.has-submenu:hover > a:after {
  color: var(--mls-primary) !important;
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

/* Sous-menus hover */
#menu ul.dropdown ul.sub-menu li a:hover {
  color: var(--mls-primary) !important;
  background-color: rgba(245, 197, 66, 0.1) !important;
}

/* Indicateurs de sous-menu - Amélioration visuelle */
#menu ul.dropdown > li.menu-item-has-children > a:after,
#site-header-menu #site-navigation .menu ul > li.has-submenu > a:after {
  color: var(--mls-primary) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  margin-left: 8px !important;
  font-size: 12px !important;
}

/* Hover des indicateurs de sous-menu */
#menu ul.dropdown > li.menu-item-has-children:hover > a:after,
#site-header-menu #site-navigation .menu ul > li.has-submenu:hover > a:after,
#menu ul.dropdown > li.menu-item-has-children.active > a:after,
#site-header-menu #site-navigation .menu ul > li.has-submenu.active > a:after {
  color: var(--mls-secondary) !important;
  transform: scale(1.1) !important;
  transition: all 0.3s ease !important;
}

/* ========================================
   TEXTES ET ACCENTS
   ======================================== */

/* Liens et accents */
a {
  color: var(--mls-primary);
}

a:hover {
  color: var(--mls-secondary);
}

/* Titres avec accent */
.ttm-textcolor-skincolor,
.section-title.style2 .title-header .title:after {
  color: var(--mls-primary) !important;
}

/* ========================================
   ICÔNES ET ÉLÉMENTS DÉCORATIFS
   ======================================== */

/* Icônes avec couleur MLS */
.icon-box.icon-style-border {
  border-color: var(--mls-primary);
  color: var(--mls-primary);
}

/* Social icons hover */
.social-icons li a:hover {
  background-color: var(--mls-primary);
  border-color: var(--mls-primary);
  color: var(--mls-secondary);
}

/* ========================================
   SECTIONS ET BACKGROUNDS
   ======================================== */

/* Sections avec background MLS */
.ttm-bgcolor-grey {
  background-color: var(--mls-light) !important;
}

.ttm-bgcolor-white {
  background-color: var(--mls-light) !important;
}

/* ========================================
   FORMULAIRES
   ======================================== */

/* Boutons de formulaire */
input[type="submit"],
button[type="submit"],
.form-btn {
  background-color: var(--mls-primary);
  color: var(--mls-secondary);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.form-btn:hover {
  background-color: var(--mls-secondary);
  color: var(--mls-light);
}

/* Focus sur les champs */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--mls-primary);
  box-shadow: 0 0 0 0.2rem rgba(245, 197, 66, 0.25);
}

/* ========================================
   SLIDER HERO - AJUSTEMENTS
   ======================================== */

/* Réduction de hauteur déjà appliquée dans le JS */

/* Overlay pour meilleur contraste */
.slide-overlay:after {
  background: rgba(13, 13, 13, 0.3);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.rev_slider .tp-caption {
  z-index: 2;
}

/* ========================================
   RESPONSIVE - CHARTE MLS
   ======================================== */

@media (max-width: 768px) {
  .ttm-btn {
    padding: 8px 16px;
    font-size: 14px;
  }

  .ttm-custombutton a {
    padding: 6px 15px;
    font-size: 13px;
  }
}

/* ========================================
   ANIMATIONS ET TRANSITIONS
   ======================================== */

/* Transitions globales pour les couleurs MLS */
.ttm-btn,
.ttm-custombutton a,
.social-icons li a,
#menu ul.dropdown > li > a {
  transition: all 0.3s ease;
}

/* Hover effect industriel */
.ttm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 197, 66, 0.3);
}

/* ========================================
   PRELOADER/LOADER - STYLE MLS JAUNE
   ======================================== */

/* Override du preloader par défaut */
#preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 999999 !important;
}

#status {
  position: fixed !important;
  z-index: 999999 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mls-secondary) !important; /* Fond noir */
  background-image: none !important; /* Supprime le GIF orange */
}

/* Container du loader MLS */
.mls-loader {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
}

/* Spinner jaune animé */
.mls-spinner {
  width: 60px !important;
  height: 60px !important;
  border: 4px solid rgba(245, 197, 66, 0.2) !important; /* Jaune transparent */
  border-top: 4px solid var(--mls-primary) !important; /* Jaune MLS */
  border-radius: 50% !important;
  animation: mls-spin 1s linear infinite !important;
}

/* Animation de rotation */
@keyframes mls-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Texte sous le spinner */
.mls-loader-text {
  color: var(--mls-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-family: 'Titillium Web', Arial, sans-serif !important;
  animation: mls-pulse 1.5s ease-in-out infinite !important;
}

/* Animation de pulsation pour le texte */
@keyframes mls-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .mls-spinner {
    width: 50px !important;
    height: 50px !important;
    border-width: 3px !important;
  }

  .mls-loader-text {
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }
}

/* ========================================
   BREADCRUMB/PAGE TITLE - BACKGROUND IMAGE
   ======================================== */

/* Configuration de l'image de breadcrumb */
.ttm-page-title-row {
  background-image: url(../images/breadcumb.jpeg) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Overlay sombre pour améliorer la lisibilité du texte */
.ttm-page-title-row::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(13, 13, 13, 0.6) !important; /* Overlay noir semi-transparent */
  z-index: -1 !important;
}

/* S'assurer que le contenu reste au-dessus de l'overlay */
.ttm-page-title-row .container {
  position: relative !important;
  z-index: 2 !important;
}

/* Styles pour le titre et breadcrumb */
.title-box .page-title-heading h1 {
  color: var(--mls-light) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
  font-weight: 700 !important;
}

.breadcrumb-wrapper {
  color: var(--mls-light) !important;
}

.breadcrumb-wrapper a {
  color: var(--mls-primary) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.breadcrumb-wrapper a:hover {
  color: var(--mls-light) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.ttm-bread-sep {
  color: var(--mls-neutral) !important;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .ttm-page-title-row {
    background-attachment: scroll !important; /* Désactive le parallax sur mobile */
    padding-top: 100px !important;
    padding-bottom: 80px !important;
  }

  .title-box .page-title-heading h1 {
    font-size: 36px !important;
    line-height: 42px !important;
  }
}

/* ========================================
   CLASSES UTILITAIRES MLS
   ======================================== */

.mls-bg-primary { background-color: var(--mls-primary) !important; }
.mls-bg-secondary { background-color: var(--mls-secondary) !important; }
.mls-bg-light { background-color: var(--mls-light) !important; }
.mls-text-primary { color: var(--mls-primary) !important; }
.mls-text-secondary { color: var(--mls-secondary) !important; }
.mls-text-light { color: var(--mls-light) !important; }