/* ========== SECTION HERO PRINCIPALE ========== */

.hero-section {
    padding-top: 50px;
}

/* Logo */
.hero-section .logo {
    height: 150px;
    margin-bottom: 20px;
}

/* Titre principal */
.hero-section h1 {
    font-weight: bold;
    color: var(--color-text);
    text-align: left;
}

/* Sous-titre */
.hero-section .hero-subtitle {
    color: var(--color-text);
    margin-top: 10px;
    margin-bottom: 25px;
    text-align: left;
}

/* Lien personnalisé */
.custom-link {
    color: var(--color-site-item);
    text-decoration: none;
    font-weight: 500;
}

.custom-link:hover {
    color: var(--color-site-item-hover);
}

/* Bouton centré */
.hero-section .center-btn {
    display: flex;
    justify-content: start;
}

.hero-section .btn {
    font-weight: bold;
    background: var(--color-site-item);
    color: var(--color-gray-background);
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.hero-section .btn:hover {
    background: var(--color-site-item-hover);
    transform: translateY(-3px);
}

/* ========== CAROUSEL ========== */

.carousel-inner {
    border-radius: 12px;
    overflow: hidden;
}

.carousel-inner img {
    object-fit: cover;
    width: 100%;
    height: 400px;
}

/* Indicateurs du carousel */
.carousel-indicators {
    position: static;
    justify-content: center;
    margin-bottom: 0px;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--color-text);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 1;
    transition: background-color 0.3s ease;
}

.carousel-indicators .active {
    background-color: var(--color-site-item);
}

/* ========== SECTION PRÉSENTATION ========== */

.hero-presentation {
    background-color: var(--color-gray-background);
}

/* Description textuelle sous le carousel */
.hero-description {
    color: var(--color-text);
    text-align: center;
    padding-top: 35px;
    padding-bottom: 30px;
    font-size: 17px;
}

/* ========== STATISTIQUES ========== */

.stat-item {
    background-color: var(--color-gray-background);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px var(--color-gray-shadow);
    border: 1px solid var(--color-gray-border);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-item h3 {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-site-item);
    margin-bottom: 10px;
}

.stat-item p {
    font-size: 1.1rem;
    color: var(--color-text);
}

/* ========== ANIMATION ========== */

/* Animation Fade-In Up */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-section {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.2s;
}

/* ========== RESPONSIVE (Mobile) ========== */

@media (max-width: 767px) {
    /* Réorganisation des colonnes dans la section présentation */
    .hero-presentation .row {
        flex-direction: column;
    }

    .stat-item {
        margin-bottom: 15px;
    }

    /* Centrage des textes et boutons */
    .hero-section h1,
    .hero-section .hero-subtitle {
        text-align: center;
    }

    .hero-section .center-btn {
        justify-content: center;
    }

    .center-btn {
        margin-bottom: 25px;
    }
}