/* ======================================= */
/*          SECTION HERO (hero.css)              */
/*        Version Finale - Rendu Naturel       */
/* ======================================= */

.hero-section {
    position: relative;
    display: flex;
    align-items: center; /* Centré verticalement */
    min-height: 95vh;
    padding: var(--spacing-lg) 0; /* Réduction du padding hero */
    color: var(--color-text-inverse);
    overflow: hidden;
}

/* --- Arrière-plan Vidéo optimisé pour la fluidité --- */
@keyframes subtle-zoom {
    0% { transform: scale(1.02); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1.02); }
}

.hero-background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Animation plus subtile et fluide */
    animation: subtle-zoom 120s ease-in-out infinite;
    z-index: 1;
    /* Optimisations pour la performance */
    transform: translateZ(0); /* Force l'accélération GPU */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Amélioration visuelle subtile */
    filter: contrast(1.05) brightness(0.95) saturate(1.1);
    /* Transition fluide pour les changements d'état */
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Fallback pour l'image si la vidéo ne charge pas */
.hero-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: subtle-zoom 60s ease-in-out infinite;
    z-index: 1;
}


/* --- Contenu Central Aligné à Gauche --- */
.hero-container {
    position: relative;
    z-index: 3;
}

.hero-content {
    text-align: center;
}

/* --- Système d'Animation Chorégraphié --- */
@keyframes slide-in-up {
    from { transform: translateY(110%); }
    to { transform: translateY(0); }
}
.hero-line-wrapper {
    overflow: hidden;
    animation: 0.1s forwards;
}
/* Les animations sont désormais pilotées au scroll via classes utilitaires */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(0) translateX(0);
    will-change: opacity, transform;
    /* Durée et easing plus doux et plus longs */
    --anim-dur: 2000ms;
    --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.animate-on-scroll.animate {
    opacity: 1;
    transform: none;
    transition: opacity var(--anim-dur) ease, transform var(--anim-dur) var(--anim-ease);
}

/* Directions */
.anim-top { transform: translateY(-20px); }
.anim-bottom { transform: translateY(20px); }
.anim-left { transform: translateX(-24px); }
.anim-right { transform: translateX(24px); }

/* Délais utilitaires */
.delay-0 { transition-delay: 0ms; }
.delay-150 { transition-delay: 150ms; }
.delay-300 { transition-delay: 300ms; }
.delay-450 { transition-delay: 450ms; }
.delay-600 { transition-delay: 600ms; }
.delay-750 { transition-delay: 750ms; }

/* Apparition en cascade des badges */
.badge-anim { transform: translateX(-18px); }
.hero-subtitle .badge-anim.animate { transition-delay: var(--stagger, 0ms); }
.hero-subtitle .badge-anim:nth-child(1) { --stagger: 0ms; }
.hero-subtitle .badge-anim:nth-child(2) { --stagger: 300ms; }
.hero-subtitle .badge-anim:nth-child(3) { --stagger: 600ms; }
.hero-subtitle .badge-anim:nth-child(4) { --stagger: 900ms; }
.hero-subtitle .badge-anim:nth-child(5) { --stagger: 1200ms; }

/* Accessibilité: limiter les animations si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll { opacity: 1 !important; transform: none !important; }
    .animate-on-scroll.animate { transition: none !important; }
    .hero-background-video, .hero-background {
        animation: none !important;
        transform: scale(1.02) translateZ(0) !important;
    }
}

/* Optimisation performance générale */
.hero-background-video {
    /* Force le rendu sur le GPU pour de meilleures performances */
    will-change: transform, filter;
    /* Évite les reflows pendant l'animation */
    contain: layout style paint;
}

/* Optimisation mobile: amélioration des performances */
@media (max-width: 768px) {
    .hero-background-video {
        animation: none; /* Désactive l'animation sur mobile pour de meilleures performances */
        transform: scale(1.05) translateZ(0); /* Garde un léger zoom statique avec GPU */
        filter: contrast(1.02) brightness(0.95); /* Filtres réduits sur mobile */
    }
}


/* --- Hiérarchie Typographique --- */
.hero-expertise-line {
    font-family: var(--font-primary);
    font-weight: 200;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: 20px;
    position: relative;
}

.hero-main-title,
.hero-main-title-accent {
    font-family: var(--font-primary);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Ombre portée un peu plus forte */
    color: white;
}
.hero-main-title-accent {
    color: white; /* Couleur de base du titre */
    margin-bottom: 32px;
}

/* Style spécifique pour les mots en surbrillance (Conformité et Influence) */
.hero-main-title-accent .highlight-accent {
    color: var(--color-accent);
}

.hero-subtitle {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 800px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 40px;
}

/* Badges sous-titre */
.hero-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    background: rgba(255,255,255,0.15);
    color: var(--color-text-inverse);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
    font-family: var(--font-secondary);
}
.hero-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-badge i {
    font-size: 0.9rem;
    color: var(--color-accent);
    transition: transform 0.25s ease;
}

.hero-badge:hover i {
    transform: scale(1.1);
}

.hero-cta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-cta .btn { padding: 16px 28px; }
.hero-cta .btn-primary { font-size: 1.05rem; }
.hero-cta .btn-secondary { font-size: 1.05rem; }

/* Personnalisation du bouton secondaire du hero (style moins Bootstrap) */
.hero-cta .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.2px;
    box-shadow: none;
}
.hero-cta .btn-secondary:hover,
.hero-cta .btn-secondary:focus {
    background: rgba(255, 136, 0, 0.14);
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-1px);
}
.hero-cta .btn-secondary:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.hero-cta .btn-secondary:active { transform: translateY(0); }

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* NOUVEAU : Style pour les piliers de valeur */
.hero-pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    position: relative;
    z-index: 3;
}

.pillar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-inverse);
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.pillar-item i {
    font-size: 1.2rem;
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .hero-pillars { flex-direction: column; align-items: center; gap: var(--spacing-xs); }
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .hero-main-title, .hero-main-title-accent { font-size: 3rem; }
    .hero-subtitle { font-size: 1.15rem; }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 100vh;
        padding: 0 var(--section-padding);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hero-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
    }
    .hero-expertise-line {
        margin-bottom: 0;
        margin-top: 0;
    }
    .hero-main-title-accent {
        margin-bottom: 0;
    }
    .hero-pillars {
        margin: 0;
    }
    .hero-main-title, .hero-main-title-accent { font-size: 2.5rem; }
    .hero-subtitle { max-width: 90%; margin-left: auto; margin-right: auto; justify-content: center; }
    .hero-pillars { flex-direction: column; align-items: center; gap: 0.75rem; }
    .pillar-item {
        font-size: 0.9rem;
        padding: 10px 18px;
        gap: 10px;
    }
    .pillar-item i {
        font-size: 1rem;
    }
}
@media (max-width: 480px) {
    .hero-section {
        min-height: 100vh;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hero-content {
        gap: 2rem;
    }
    .hero-expertise-line {
        font-size: 0.8rem;
        margin-bottom: 0;
        margin-top: 0;
    }
    .hero-main-title, .hero-main-title-accent {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 0;
    }
    .hero-subtitle {
        font-size: 0.95rem;
        gap: 8px 10px;
        margin-bottom: 0;
    }
    .hero-badge {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    .pillar-item {
        font-size: 0.85rem;
        padding: 8px 14px;
        gap: 8px;
    }
    .pillar-item i {
        font-size: 0.9rem;
    }
    .hero-cta {
        flex-direction: column;
        gap: 12px;
    }
    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
        padding: 14px 20px;
        font-size: 0.95rem;
    }
}