/**
 * Custom CSS - Overrides et styles personnalisés
 * 
 * @package Synergin-2026
 * @since 1.0.0
 */

/* ========================================
   ELEMENTOR OVERRIDES
   ======================================== */

/* Masquer le titre et la date sur les posts Elementor */
[data-elementor-type="wp-post"] .entry-header,
[data-elementor-type="wp-post"] .entry-meta,
[data-elementor-type="wp-post"] .entry-title,
[data-elementor-type="wp-post"] .posted-on {
    display: none !important;
}

#we_frourish p {
    border-left: 3px solid #ff8c02;
    padding-left: 2rem;
    min-height: 3rem;
}

.two-lines {
  min-height: 3rem;
}

/* Classe réutilisable pour animer un dégradé existant (horizontal) */
.gradient-animate {
    background-size: 200% 200% !important;
    animation: gradientShift 8s ease-in-out infinite;
}

/* Variante pour animation verticale */
.gradient-animate-vertical {
    background-size: 200% 200% !important;
    animation: gradientShiftVertical 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradientShiftVertical {
    0% {
        background-position: 50% 0%;
    }
    50% {
        background-position: 50% 100%;
    }
    100% {
        background-position: 50% 0%;
    }
}

/* Effet de survol sur les icônes tools */
#tools-icons img {
    transition: all 0.3s ease-in-out;
    filter: drop-shadow(0 0 0 transparent);
}

#tools-icons img:hover {
    transform: translateY(-8px) scale(1.1);
    filter: drop-shadow(0 8px 16px rgba(255, 168, 0, 0.3)) 
            drop-shadow(0 4px 8px rgba(96, 0, 255, 0.2));
}

/* Animation des abeilles le long de leurs tracés */
/* Les abeilles arrivent depuis l'extérieur de l'écran vers leur position Elementor (0,0) */

/* Abeille 1 - Arrive depuis la DROITE (hors écran) vers sa position finale */
#animate-bee-home1 {
    offset-path: path('M2000 0 Q1800 -50 1600 20 Q1400 80 1200 0 Q1000 -80 800 50 Q600 100 400 20 Q200 -20 0 0');
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: beeFlight1 8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}

/* Abeille 2 - Arrive depuis le HAUT (hors écran) vers sa position finale */
#animate-bee-home2 {
    offset-path: path('M0 -800 Q50 -600 0 -400 Q-50 -200 0 -100 Q50 -50 0 0');
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: beeFlight2 8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.8s forwards;
}

/* Abeille 3 - Arrive depuis la GAUCHE (hors écran) vers sa position finale */
#animate-bee-home3 {
    offset-path: path('M-1500 0 Q-1200 -50 -900 20 Q-600 80 -300 0 Q-150 -40 0 0');
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: beeFlight3 8s cubic-bezier(0.25, 0.1, 0.25, 1) 1.3s forwards;
}

@keyframes beeFlight1 {
    0% {
        offset-distance: 0%;
        opacity: 1;
    }
    20% {
        offset-distance: 25%;
    }
    25% {
        offset-distance: 28%;
    }
    45% {
        offset-distance: 55%;
    }
    65% {
        offset-distance: 75%;
    }
    70% {
        offset-distance: 78%;
    }
    90% {
        offset-distance: 97%;
    }
    100% {
        offset-distance: 100%;
        opacity: 1;
    }
}

@keyframes beeFlight2 {
    0% {
        offset-distance: 0%;
        opacity: 1;
    }
    15% {
        offset-distance: 22%;
    }
    35% {
        offset-distance: 48%;
    }
    40% {
        offset-distance: 50%;
    }
    60% {
        offset-distance: 72%;
    }
    80% {
        offset-distance: 90%;
    }
    85% {
        offset-distance: 93%;
    }
    100% {
        offset-distance: 100%;
        opacity: 1;
    }
}

@keyframes beeFlight3 {
    0% {
        offset-distance: 0%;
        opacity: 1;
    }
    10% {
        offset-distance: 15%;
    }
    30% {
        offset-distance: 42%;
    }
    50% {
        offset-distance: 62%;
    }
    55% {
        offset-distance: 65%;
    }
    75% {
        offset-distance: 85%;
    }
    95% {
        offset-distance: 98%;
    }
    100% {
        offset-distance: 100%;
        opacity: 1;
    }
}

/* Points dorés de la traînée */
.bee-trail-dot {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 70%, rgba(255, 165, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 99999;
    animation: trailFade 2.5s ease-out forwards;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 5px rgba(255, 215, 0, 0.6);
    transform: translate(-50%, -50%);
}

@keyframes trailFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.8);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Traînée lumineuse du curseur */
.mouse-trail-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 70%, rgba(255, 165, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 99999;
    animation: mouseTrailFade 1s ease-out forwards;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8), 0 0 4px rgba(255, 215, 0, 0.5);
    transform: translate(-50%, -50%);
}

@keyframes mouseTrailFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
}

/* Animation de texte - Effet de croissance organique */
.text-grow-animate {
    animation: textGrow 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-fill-mode: forwards;
    opacity: 0;
    transform: scale(0.8);
}

@keyframes textGrow {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Variante avec effet de pulsation subtile */
.text-pulse-animate {
    animation: textPulse 2s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}

/* Variante avec effet de brillance qui passe */
.text-shimmer-animate {
    position: relative;
    overflow: hidden;
}

.text-shimmer-animate::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.3) 50%, 
        transparent 100%
    );
    animation: shimmerPass 3s ease-in-out infinite;
}

@keyframes shimmerPass {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Classe réutilisable pour effet de survol - Croissance organique */
.hover-grow-organic {
    cursor: pointer;
    position: relative;
}

.hover-grow-organic:hover {
    filter: drop-shadow(0 10px 20px rgba(255, 215, 0, 0.4)) 
            drop-shadow(0 5px 10px rgba(255, 168, 0, 0.3));
    animation: hoverPulseSimple 0.6s ease-in-out forwards;
}

/* Animation de pulsation simplifiée sans transform pour éviter les conflits */
@keyframes hoverPulseSimple {
    0% {
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: drop-shadow(0 12px 24px rgba(255, 215, 0, 0.5)) 
                drop-shadow(0 6px 12px rgba(255, 168, 0, 0.4));
    }
    100% {
        filter: drop-shadow(0 10px 20px rgba(255, 215, 0, 0.4)) 
                drop-shadow(0 5px 10px rgba(255, 168, 0, 0.3));
    }
}

/* Effet de légère élévation pour les images uniquement */
.hover-grow-organic img {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
}

.hover-grow-organic:hover img {
    transform: scale(1.08) translateY(-5px);
}

/* Effet pour le texte uniquement - cibler le titre Elementor directement */
.hover-grow-organic .elementor-heading-title {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.hover-grow-organic:hover .elementor-heading-title {
    transform: scale(1.05) translateY(-3px) !important;
}

/* Fallback pour autres éléments texte */
.hover-grow-organic.text-only {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-grow-organic.text-only:hover {
    transform: scale(1.05) translateY(-3px) !important;
}

/* Effet de carte tirée - remonte de 50px au survol */
.draw-card {
    position: relative;
    transition: top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.6s ease-out;
    top: 0;
    cursor: pointer;
}

.draw-card:hover {
    top: -50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
                0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Animation de fond pour #frise-events - Défilement horizontal continu */
#frise-events {
    background-repeat: repeat-x;
    background-position: 0 center;
    animation: friseScroll 60s linear infinite;
}

@keyframes friseScroll {
    0% {
        background-position: 0 center;
    }
    100% {
        background-position: 100% center;
    }
}

/* ========================================
   CONTRÔLE VIDÉO HEADER
   ======================================== */

/* Forcer la vidéo à rester visible quand elle se termine */
.elementor-background-video-hosted {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Empêcher Elementor de masquer la vidéo à la fin */
.elementor-background-video-container {
    background-color: transparent !important;
}

.elementor-background-video-container .elementor-background-video-hosted {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}