/* ========================================
   BB BOUGE - Styles personnalisés
   ======================================== */

/* === FONTS === */
.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

/* === NAVIGATION === */
.nav-link {
    cursor: pointer;
    transition: all 0.2s;
}

.nav-link:hover {
    color: #F4845F;
}

/* === BOUTONS CORAIL === */
.btn-coral {
    background: linear-gradient(135deg, #F4845F 0%, #F9A882 100%);
    transition: all 0.3s;
    display: inline-block;
}

.btn-coral:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 132, 95, 0.4);
}

/* === BOUTONS BLEU === */
.btn-b2b {
    background: linear-gradient(135deg, #2D5F7C 0%, #3A7A9D 100%);
    transition: all 0.3s;
    display: inline-block;
}

.btn-b2b:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 95, 124, 0.4);
}

/* === CARTES === */
.card-hover {
    transition: all 0.3s;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* === HERO SECTIONS === */
.hero-orange {
    background: url('../images/handprints-banner.png') bottom center no-repeat;
    background-size: 100% auto;
    background-color: #F97B5C;
    position: relative;
    min-height: 600px;
}

.hero-orange-small {
    background: url('../images/handprints-banner.png') bottom center no-repeat;
    background-size: 100% auto;
    background-color: #F97B5C;
    position: relative;
}

.hero-b2b {
    background: linear-gradient(135deg, #2D5F7C 0%, #3A7A9D 100%);
}

.hero-blue {
    background: linear-gradient(to bottom, #2D5F7C 0%, #3A7A9D 100%);
}

/* === DROPDOWN MENU === */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* === VALUE CARDS === */
.value-card {
    border-left: 4px solid #F4845F;
}

/* === TESTIMONIALS === */
.testimonial-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .hero-orange {
        min-height: 500px;
    }
}