/*
Theme Name: L'Agence Oueb Child
Theme URI: https://lagenceoueb.fr
Description: Thème enfant de GeneratePress par L'Agence Oueb
Author: L'Agence Oueb
Author URI: https://lagenceoueb.fr
Template: generatepress
Version: 1.0.0
Text Domain: lagenceoueb-child
*/

html {
    /*scroll-behavior: smooth;*/
}

.hero-parallax {
    position: relative;
    overflow: hidden;
    height: 100vh; /* ou la hauteur souhaitée */
}

.hero-parallax::before {
    content: '';
    position: absolute;
    inset: -30% 0; /* dépasse pour avoir de la marge de défilement */
    background-image: url('assets/geranimo-WJkc3xZjSXw-unsplash-scaled.jpg');
    background-size: cover;
    background-position: center;
    transform: translateY(var(--parallax-offset, 0px));
    will-change: transform;
     pointer-events: none;
}

/* Overlay sombre optionnel */
.hero-parallax::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
     pointer-events: none;
}

/* Le contenu passe par-dessus l'image et l'overlay */
.hero-parallax > * {
    position: relative;
    z-index: 1;
}


/* ===========================================
   scroll-down-button.css
   Bouton scroll-down animé — CSS pur
   Aucun JavaScript requis.
 
   HTML minimal :
   <a class="scroll-down-btn" href="#about" aria-label="Défiler vers le contenu">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
     </svg>
   </a>
   =========================================== */
 
.scroll-down-btn {
    /* display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    text-decoration: none; */
    
    animation: scroll-btn-bounce 1.2s ease-in-out infinite;
}
 
.scroll-down-btn:hover {
    animation-play-state: paused;
}
 
 .scroll-down-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    cursor: pointer !important;
    /*display: block !important;*/
    margin-top: -60px !important; /* remonte le bouton dans le hero */
    margin-bottom: 30px !important;
    text-align: center;
    position: relative;
    z-index: 2;
}

.scroll-down-btn .gb-shape svg {
    /*width: 24px !important;
    //height: 24px !important;
    //fill: #ffffff !important;*/
    display: block !important;
}

 
/* --- Animation rebond ---
   Montée principale → chute → petit rebond → pause */
@keyframes scroll-btn-bounce {
    /* 0%   { transform: translateY(0);     }
    40%  { transform: translateY(-10px); }
    55%  { transform: translateY(0);     }
    65%  { transform: translateY(-4px);  }
    75%  { transform: translateY(0);     }
    100% { transform: translateY(0);     } */
    0%   { transform: translateY(5px);  }
    50%  { transform: translateY(-5px); }
    100% { transform: translateY(5px);  }
}
 

#team .gb-loop-item:nth-child(1) { --anim-delay: 0; }
#team .gb-loop-item:nth-child(2) { --anim-delay: 150; }
#team .gb-loop-item:nth-child(3) { --anim-delay: 300; }
#team .gb-loop-item:nth-child(4) { --anim-delay: 450; }


 
/* ─── Sticky header – transition douce ─────────────────────── */

html body .main-navigation {
    background-color: transparent !important;
    transition: background-color 0.6s ease,
                box-shadow 0.6s ease !important;
}

html body .main-navigation.is_stuck {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
}

/* Liens */
html body .main-navigation .main-nav ul li a {
    color: #ffffff !important;
    transition: color 0.6s ease !important;
}
html body .main-navigation.is_stuck .main-nav ul li a {
    color: #111111 !important;
}
html body .main-navigation.is_stuck .main-nav ul li a:hover {
    color: #229791 !important;
}

/* Logo swap */
html body .main-navigation .sticky-navigation-logo { display: none !important; }
html body .main-navigation .site-logo { display: block !important; }
html body .main-navigation.is_stuck .site-logo { display: none !important; }
html body .main-navigation.is_stuck .sticky-navigation-logo { display: block !important; }

/* Taille logo */
html body .main-navigation .navigation-branding img {
    height: 120px;
    width: auto;
    transition: height 0.4s ease;
}
html body .main-navigation.is_stuck .navigation-branding img {
    height: 60px;
    width: auto;
}

/* Logo – fondu croisé au lieu du swap sec */
html body .main-navigation .sticky-navigation-logo {
    display: block !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
    position: absolute !important;
}
html body .main-navigation .site-logo {
    opacity: 1 !important;
    transition: opacity 0.6s ease !important;
}
html body .main-navigation.is_stuck .sticky-navigation-logo {
    opacity: 1 !important;
}
html body .main-navigation.is_stuck .site-logo {
    opacity: 0 !important;
}



/* ======================================= */



/* Ajustements JMS */

.main-navigation {
    /* height: 60px !important;
    overflow: auto; */
    
}

.inside-navigation {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}
.site-logo {
}

/* --- Accessibilité : respecte la préférence système --- */
@media (prefers-reduced-motion: reduce) {
    .scroll-down-btn {
        animation: none;
    }
}