/* ==========================================================================
   STYLE1.CSS - NEXTHIRE PREMIUM DYNAMIC STYLES (MANPOWER INSPIRED)
   ========================================================================== */

:root {
    --gold-gradient: linear-gradient(135deg, #C9B29B 0%, #B39980 100%);
    --dark-gradient: linear-gradient(135deg, #1D2433 0%, #151A25 100%);
    --premium-shadow: 0 20px 40px rgba(29, 36, 51, 0.05);
    --transition-smooth: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- ANIMATION DES FILTRES DE DÉPART (SCROLL REVEAL) --- */
.reveal-el {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s var(--transition-smooth), transform 1.2s var(--transition-smooth);
    will-change: transform, opacity;
}

.reveal-el.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* Délais progressifs pour l'effet de grille ou de liste */
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }



/* --- HERO SECTION RE-STYLING (EFFET PREMIUM) --- */
.hero-section {
    position: relative;
    padding: 120px 0; /* Plus d'espace aéré */
}

.hero-video iframe {
    border: 4px solid white;
    box-shadow: 0 30px 60px rgba(29, 36, 51, 0.15) !important;
    transition: transform 0.8s var(--transition-smooth);
}

.hero-video:hover iframe {
    transform: scale(1.02) rotate(0.5deg);
}

/* --- EFFETS STATS PREMIUM (MANPOWER LOOK) --- */
.stats-section {
    background: var(--dark-gradient) !important;
    border-radius: 24px;
    width: 90%;
    max-width: 1300px;
    margin: 40px auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.stat-box i {
    transition: transform 0.6s var(--transition-smooth), color 0.3s;
}

.stat-box:hover i {
    transform: translateY(-8px) scale(1.1);
    color: #DCCCB8;
}

/* --- GRILLE DES SERVICES MODERNE --- */
.services-grid article {
    background: #ffffff !important;
    border: 1px solid rgba(236, 236, 236, 0.6) !important;
    box-shadow: var(--premium-shadow);
    transition: transform 0.5s var(--transition-smooth), box-shadow 0.5s var(--transition-smooth), border-color 0.3s !important;
    position: relative;
    overflow: hidden;
}

.services-grid article::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--gold-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--transition-smooth);
}

.services-grid article:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 30px 60px rgba(29, 36, 51, 0.1) !important;
    border-color: rgba(201,178,155, 0.4) !important;
}

.services-grid article:hover::before {
    transform: scaleX(1);
}

/* --- BOUTONS CHIC --- */
button, .btn, .btn-primary {
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px !important;
    box-shadow: 0 8px 20px rgba(29, 36, 51, 0.08);
    transition: all 0.4s var(--transition-smooth) !important;
}

button:not(.google-btn):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 30px rgba(201, 178, 155, 0.25) !important;
}

/* --- SECTION PROPOS / IMAGES EN MOUVEMENT FLUIDE --- */
.about-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px !important;
}

.about-image img {
    transition: transform 1.5s var(--transition-smooth) !important;
}

.about-image:hover img {
    transform: scale(1.08) !important;
}

/* Style chic des encadrés de contenu */
.about-content {
    border-radius: 24px !important;
    box-shadow: var(--premium-shadow) !important;
    border: none !important;
}
/* ================================
   IMAGES UNIFORMES (BIO + CONTACT)
================================ */

.about-image,
.contact-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--premium-shadow);
    transform-style: preserve-3d;
    transition: transform 0.6s var(--transition-smooth);
}

.about-image img,
.contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--transition-smooth);
}

/* hover soft premium */
.about-image:hover img,
.contact-image:hover img {
    transform: scale(1.06);
}
/* ================================
   BASE PREMIUM GLOBAL STYLE
================================ */

body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* cartes globales */
.card, .box, article {
    border-radius: 18px;
    transition: all 0.4s var(--transition-smooth);
}

/* hover premium global */
.card:hover, .box:hover, article:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

.typewriter {
    display: block;
    max-width: 100%;
}

/* chaque ligne reste dans le flux normal */
.typewriter .line {
    display: inline-block;
    position: relative;
}

/* masque au lieu de width (NE CASSE PAS GRID/FLEX) */
.typewriter .line::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: #F8F7F5; /* même que ton background body */
    transform: translateX(0);
}

/* animation 1 */
.line-1::after {
    animation: revealText 1.8s steps(30) forwards;
}

/* animation 2 avec délai */
.line-2::after {
    animation: revealText 2.8s steps(60) 2s forwards;
}

/* reveal clean */
@keyframes revealText {
    to {
        transform: translateX(100%);
    }
}


/* ==========================================================================
   FORCE LE TEXTE "SE CONNECTER" À RESTER BLANC AU SCROLL
   ========================================================================== */
#header.scrolled #nav-login-link, 
header.scrolled #nav-login-link,
#header.scrolled a[href*="se-connecter"],
header.scrolled a[href*="se-connecter"] {
    color: #ffffff !important; /* Force l'écriture en blanc */
    background: none !important; /* Supprime tout fond qui pourrait masquer le bouton */
    box-shadow: none !important; /* Supprime les ombres indésirables */
}