/**
 * Styles Multilingues - Job Skill
 *
 * CSS commun pour header-multi.php et footer-multi.php
 * Chargé uniquement sur les pages vitrine multilingues
 *
 * @author Job Skill Dev Team
 * @date 2025-10-15
 */

/* ============================================================================
   GENERAL
   ========================================================================== */

body {
    font-family: 'Poppins', sans-serif;
}

/* ============================================================================
   HEADER - Sticky Effect
   ========================================================================== */

#main-header {
    transition: all 0.3s ease;
}

#main-header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
}

/* ============================================================================
   LANGUAGE SWITCHER
   ========================================================================== */

.language-switcher {
    display: flex;
    gap: 0.5rem;
}

.language-switcher a {
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.language-switcher a:hover {
    background-color: #f3f4f6;
}

.language-switcher a.active {
    background-color: #E8598F;
    color: white;
}

/* ============================================================================
   MOBILE MENU
   ========================================================================== */

#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}

#mobile-menu.open {
    transform: translateX(0);
}

/* Overlay pour fermer le menu mobile en cliquant à l'extérieur */
#mobile-menu-overlay {
    transition: opacity 0.3s ease-in-out;
}

#mobile-menu-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================================
   FOOTER - Newsletter
   ========================================================================== */

#newsletter-form input[type="email"] {
    transition: all 0.2s;
}

#newsletter-form input[type="email"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(232, 89, 143, 0.3);
}

/* ============================================================================
   ANIMATIONS
   ========================================================================== */

/* Fade in pour les messages (newsletter, etc.) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#newsletter-message {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Assurer que le menu mobile ne déborde pas */
@media (max-width: 1023px) {
    #mobile-menu {
        max-width: 100vw;
    }
}

/* Ajustements pour petits écrans */
@media (max-width: 640px) {
    .language-switcher a {
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ============================================================================
   UTILITIES
   ========================================================================== */

/* Masquer le scroll body quand mobile menu est ouvert */
body.mobile-menu-open {
    overflow: hidden;
}

/* Link hover effects uniformes */
a.hover-pink:hover {
    color: #E8598F;
    transition: color 0.2s;
}

/* ============================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    #main-header,
    footer,
    .language-switcher {
        display: none;
    }
}