/*=================================
    Theme Purple - Airsoft SARL
    Styles personnalisés pour le thème violet
==================================*/

/* ===== COULEURS PRINCIPALES ===== */
:root {
    --purple-primary: #800080;
    --purple-dark: #4b0082;
    --purple-light: #9370db;
    --white: #ffffff;
    --gray-light: #f5f5f5;
}

/* ===== BODY ===== */
body {
    background: var(--purple-primary);
    color: var(--white);
}

/* ===== HEADER ===== */
.th-header.header-layout1 {
    background: var(--purple-primary) !important;
}

.header-top {
    background: var(--purple-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 0 !important;
}

.header-links ul li,
.header-links ul li a,
.header-links ul li span,
.header-links ul li i {
    color: var(--white) !important;
    font-size: 14px !important;
}

.social-links .social-title,
.social-links a {
    color: var(--white) !important;
}

.social-links a:hover {
    color: var(--purple-light) !important;
}

/* ===== STICKY WRAPPER (Menu principal) ===== */
.sticky-wrapper {
    background: var(--purple-primary) !important;
    padding: 0 !important;
}

.menu-area {
    background: var(--purple-primary) !important;
    padding: 15px 0 !important;
}

.header-logo {
    background: transparent !important;
}

.header-logo img {
    max-height: 60px !important;
    width: auto !important;
}

/* ===== MENU DESKTOP ===== */
.main-menu ul li a {
    color: var(--white) !important;
    transition: all 0.3s ease;
    font-size: 15px !important;
    padding: 8px 18px !important;
}

.main-menu ul li a:hover {
    color: var(--purple-light) !important;
}

.main-menu ul li.menu-item-has-children > a::after {
    border-color: var(--white) transparent transparent transparent;
}

/* Sous-menus */
.main-menu .sub-menu {
    background: var(--purple-dark) !important;
    border-top: 2px solid var(--purple-light);
    min-width: 220px !important;
}

.main-menu .sub-menu li a {
    color: var(--white) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px !important;
    padding: 10px 20px !important;
}

.main-menu .sub-menu li a:hover {
    background: var(--purple-primary);
    color: var(--white) !important;
    padding-left: 25px !important;
}

/* ===== MENU MOBILE ===== */
.th-menu-wrapper {
    background: var(--purple-primary) !important;
}

.th-menu-area {
    background: var(--purple-primary) !important;
}

.th-mobile-menu ul li a {
    color: var(--white) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 15px !important;
    padding: 14px 20px !important;
}

.th-mobile-menu ul li a:hover {
    color: var(--purple-light) !important;
    padding-left: 30px !important;
}

.th-mobile-menu .sub-menu {
    background: var(--purple-dark) !important;
}

.th-mobile-menu .sub-menu li a {
    padding-left: 35px !important;
    font-size: 14px !important;
}

.th-menu-toggle {
    color: var(--white) !important;
    font-size: 22px !important;
}

.mobile-logo img {
    max-width: 100px !important;
}

/* ===== BOUTONS ===== */
.th-btn {
    background-color: var(--white) !important;
    color: var(--purple-primary) !important;
    border: 2px solid var(--white);
    transition: all 0.3s ease;
    font-size: 14px !important;
    padding: 12px 24px !important;
}

.th-btn:hover {
    background-color: transparent !important;
    color: var(--white) !important;
    border-color: var(--white);
}

.th-btn.style2 {
    background-color: var(--white) !important;
    color: var(--purple-primary) !important;
    font-size: 16px !important;
    padding: 14px 28px !important;
}

.th-btn.style4 {
    background-color: var(--white) !important;
    color: var(--purple-primary) !important;
    font-size: 16px !important;
    padding: 14px 28px !important;
}

/* ===== SIDEMENU ===== */
.sidemenu-wrapper {
    background: var(--purple-dark) !important;
}

.sidemenu-info {
    background: var(--purple-dark) !important;
}

/* ===== FOOTER ===== */
.footer-wrapper.footer-layout1 {
    background: var(--purple-primary) !important;
}

.info-box {
    background: var(--purple-primary) !important;
}

.info-box_text,
.info-box_link,
.info-box_subtitle {
    color: var(--white) !important;
}

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

.widget_title {
    color: var(--white) !important;
}

.footer-btn {
    color: var(--white) !important;
}

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

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

/* ===== SCROLL TO TOP ===== */
.scroll-top {
    background: var(--purple-primary) !important;
    border: 2px solid var(--white);
}

.scroll-top:hover {
    background: var(--white) !important;
}

.scroll-top:hover .progress-circle path {
    stroke: var(--purple-primary) !important;
}

/* ===== HERO SECTION ===== */
.th-hero-wrapper.hero-1 {
    background: var(--purple-primary) !important;
}

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

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

.hero-big_text {
    color: rgba(255, 255, 255, 0.05) !important;
}

/* ===== SECTIONS ===== */
.course-area,
section {
    background: var(--purple-primary) !important;
}

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

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

.about-desc {
    color: var(--white) !important;
}

/* ===== SLIDER ARROWS ===== */
.slider-arrow {
    background: var(--white);
    color: var(--purple-primary);
    border: 2px solid var(--white);
}

.slider-arrow:hover {
    background: var(--purple-primary);
    color: var(--white);
    border-color: var(--white);
}

/* ===== CARDS & BOXES ===== */
.course-card {
    background: var(--purple-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.course-card .box-title a {
    color: var(--white) !important;
}

.course-card .line-btn {
    color: var(--white) !important;
}

.service-box {
    background: var(--purple-dark);
    transition: all 0.3s ease;
}

.service-box:hover {
    background: var(--purple-primary);
    transform: translateY(-5px);
}

/* ===== LIENS ===== */
a {
    color: var(--white);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--purple-light);
}

/* ===== RESPONSIVE ===== */

/* Tablettes */
@media (max-width: 991px) {
    .header-links ul li {
        font-size: 12px !important;
    }
    
    .header-links ul li span {
        font-size: 12px !important;
    }
    
    .th-menu-wrapper {
        width: 320px;
    }
    
    .main-menu ul li a {
        font-size: 14px !important;
        padding: 6px 15px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .header-top {
        padding: 8px 0 !important;
    }
    
    .social-links {
        margin-top: 8px;
    }
    
    .social-links .social-title {
        font-size: 12px !important;
    }
    
    .menu-area {
        padding: 12px 0 !important;
    }
    
    .header-logo img {
        max-height: 50px !important;
    }
    
    .th-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    .th-menu-wrapper {
        width: 280px;
    }
    
    .th-mobile-menu ul li a {
        font-size: 14px !important;
        padding: 12px 20px !important;
    }
}

/* ===== ANIMATIONS HOVER ===== */
.main-menu ul li,
.th-mobile-menu ul li,
.th-btn,
.slider-arrow,
a {
    transition: all 0.3s ease;
}

/* ===== BADGE ===== */
.badge-success {
    background: var(--white) !important;
    color: var(--purple-primary) !important;
}

/* ===== CHECKLIST ===== */
.checklist ul li {
    color: var(--white);
}

/* ===== CUSTOM CURSOR (si activé) ===== */
.cursor,
.cursor2 {
    border-color: var(--white);
}

/* ===== PRELOADER (si activé) ===== */
.preloader {
    background: var(--purple-primary);
}

.preloader .th-btn {
    background: var(--white);
    color: var(--purple-primary);
}

/* ===== FORMULAIRES ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.15);
}