/**
 * Styles CSS centralisés pour Wi Company - Version Onepage
 * Tous les styles du site regroupés dans un seul fichier
 */

/* ===== RESET ET STYLES GÉNÉRAUX ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background-color: white;
    color: #333;
    line-height: 1.6;
    padding-top: 0; /* Supprimé le padding-top pour le plein écran */
}

/* Body avec fond marbre pour toutes les pages */
body {
    background-image: url('../../images/fond-marbre.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin: 10px;
    min-height: calc(100vh - 20px);
}

/* ===== NAVIGATION ET HEADER STYLES ===== */

/* Navigation Menu */
.navbar {
    background-color: white;
    padding: 10px 0;
    position: fixed;
    top: -100px; /* Caché au départ pour slide full screen */
    left: 0px;
    right: 0px !important;
    z-index: 1001;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px !important; /* Coins arrondis pour le header - forcés */
    transition: top 0.3s ease-in-out; /* Animation fluide */
}

/* Header toujours visible sur les pages autres que home */
body:not(.home-page) .navbar {
    top: 10px; /* Visible dès le chargement */
}

/* Bouton de langue visible sur les pages autres que home */
body:not(.home-page) .language-toggle-btn {
    top: 20px; /* Visible dès le chargement */
}

/* Ajustement du contenu pour les pages autres que home */
body:not(.home-page) {
    padding-top: 100px; /* Espace pour le header fixe */
}

/* Header visible quand on scrolle */
.navbar.visible {
    top: 0px; /* Apparaît en haut quand on scrolle */
}

.nav-container {
    width: calc(100% - 20px); /* Marges de 10px de chaque côté */
    margin: 0 10px; /* Marges de 10px */
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo-container {
    background-color: #0B013C;
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    height: 50px;
}

.nav-logo {
    height: 30px;
    width: auto;
}

.nav-center {
    background-color: #0B013C;
    padding: 15px 40px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin: 0 20px;
    height: 50px;
}

.nav-center a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.nav-center a:hover {
    color: #85809D;
}

/* Label non cliquable pour "Nos Marques" */
.nav-brands-label {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: default;
    transition: color 0.3s ease;
}

.nav-item:hover .nav-brands-label {
    color: #85809D;
}

/* Menu déroulant pour les marques */
.nav-item {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 250px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 10px;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #0B013C;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.dropdown-menu a:first-child {
    border-radius: 8px 8px 0 0;
}

.dropdown-menu a:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: none;
}

.dropdown-menu a:hover {
    background: #0B013C;
    color: white;
    transform: translateX(5px);
}

.nav-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-right-container {
    background-color: #0B013C;
    padding: 15px 30px;
    border-radius: 8px;
    display: flex;
    gap: 20px;
    align-items: center;
    height: 50px;
    width: 350px; /* Largeur fixe de 350px */
    justify-content: flex-end; /* Alignement à droite du contenu */
}

.access-pro {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.access-pro:hover {
    color: #85809D;
}

.user-icon {
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.user-icon:hover {
    color: #85809D;
}

.menu-toggle {
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.menu-toggle:hover {
    color: #85809D;
}

/* Bouton hamburger pour mobile */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
    background-color: #0B013C;
}

.mobile-menu-toggle:hover {
    background-color: #1a0d5a;
}

/* Bouton hamburger */
.hamburger-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-left: 15px;
}

.hamburger-menu-btn span {
    width: 20px;
    height: 2px;
    background-color: white;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.hamburger-menu-btn:hover span {
    background-color: #cccccc;
}

/* Menu hamburger overlay */
.hamburger-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.hamburger-menu-overlay.show {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.hamburger-menu-content {
    position: absolute;
    top: 70px;
    bottom: 10px;
    right: 10px;
    width: 350px;
    background-color: #0B013C;
    padding: 30px;
    border-radius: 15px;
    color: white;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    max-height: calc(100vh - 90px);
    /* Améliorations pour la compatibilité Windows/Edge/Chrome */
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hamburger-menu-overlay.show .hamburger-menu-content {
    transform: translateY(0);
}

.hamburger-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hamburger-menu-header h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
}

.hamburger-menu-close {
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.hamburger-menu-section {
    padding: 20px 0;
}

.language-section {
    padding: 0 30px 20px;
}

/* Styles de base pour .lang-item - Redéfini plus bas avec plus de spécificité */

/* Drapeaux stylisés pour compatibilité Windows */
.flag-code {
    display: inline-block;
    width: 30px;
    height: 20px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 20px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Drapeaux avec SVG Data URI pour compatibilité maximale */
.flag-code[data-country="fr"] {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10" height="20" fill="%230055A4"/><rect x="10" width="10" height="20" fill="%23FFFFFF"/><rect x="20" width="10" height="20" fill="%23EF4135"/></svg>') no-repeat center;
    background-size: cover;
    color: transparent;
}

.flag-code[data-country="gb"] {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="%23012169"/><polygon points="0,0 6,0 30,14 30,20 24,20 0,6" fill="%23FFFFFF"/><polygon points="0,20 6,20 30,6 30,0 24,0 0,14" fill="%23FFFFFF"/><rect x="12" y="0" width="6" height="20" fill="%23FFFFFF"/><rect x="0" y="8" width="30" height="4" fill="%23FFFFFF"/><polygon points="0,0 2,0 30,17 30,20 28,20 0,3" fill="%23C8102E"/><polygon points="0,20 2,20 30,3 30,0 28,0 0,17" fill="%23C8102E"/><rect x="13" y="0" width="4" height="20" fill="%23C8102E"/><rect x="0" y="8.5" width="30" height="3" fill="%23C8102E"/></svg>') no-repeat center;
    background-size: cover;
    color: transparent;
}

.flag-code[data-country="es"] {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="5" fill="%23AA151B"/><rect y="5" width="30" height="10" fill="%23F1BF00"/><rect y="15" width="30" height="5" fill="%23AA151B"/></svg>') no-repeat center;
    background-size: cover;
    color: transparent;
}

/* Fallback pour navigateurs ayant des problèmes avec SVG Data URI */
@supports not (background: url('data:image/svg+xml;utf8,<svg></svg>')) {
    .flag-code[data-country="fr"] {
        background: #0055A4 !important;
        color: #fff !important;
    }
    
    .flag-code[data-country="gb"] {
        background: #012169 !important;
        color: #fff !important;
    }
    
    .flag-code[data-country="es"] {
        background: #AA151B !important;
        color: #fff !important;
    }
}

/* Fallback spécifique pour Edge Legacy et IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .flag-code[data-country="fr"] {
        background: #0055A4 !important;
        color: #fff !important;
    }
    
    .flag-code[data-country="gb"] {
        background: #012169 !important;
        color: #fff !important;
    }
    
    .flag-code[data-country="es"] {
        background: #AA151B !important;
        color: #fff !important;
    }
}

.menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 20px 30px;
}

.currency-section {
    padding: 0 30px 20px;
}

/* Styles de base pour .currency-item - Redéfini plus bas avec plus de spécificité */

.currency-symbol {
    background: white;
    color: #1a0d5a;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    /* Amélioration pour Windows/Edge/Chrome */
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: center;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.navigation-section {
    padding: 0 30px 20px;
}

.nav-item {
    display: block;
    padding: 15px 0;
    text-decoration: none;
    color: #cccccc;
    transition: color 0.3s ease;
}

.nav-item:hover {
    color: white;
}

.return-section {
    padding: 0 30px;
}

.return-home {
    display: block;
    padding: 20px 0;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 1.1em;
}

/* Sélecteur de langue vertical */
.language-switcher {
    position: fixed;
    top: -200px; /* Caché au départ, comme le header */
    right: 20px;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    backdrop-filter: blur(15px);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 40px;
    overflow: hidden;
}

/* Barre de langue visible quand on scrolle */
.language-switcher.visible {
    top: 80px; /* Position sous le header quand on scrolle */
}

/* État replié par défaut */
.language-switcher.collapsed {
    height: 40px;
}

/* État déplié */
.language-switcher.expanded {
    height: auto;
    min-height: 130px;
}

/* Bouton toggle pour la langue mobile */
.language-toggle-btn {
    display: none;
    position: fixed;
    top: -100px; /* Caché au départ, comme le header */
    right: 20px;
    z-index: 1002;
    background: rgba(11, 1, 60, 0.9);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    transition: top 0.3s ease-in-out; /* Animation fluide pour le positionnement */
}

/* Bouton toggle visible quand on scrolle */
.language-toggle-btn.visible {
    top: 80px; /* Même position que la barre de langue */
}

.language-toggle-btn:hover {
    background: #1a0d5c;
    transform: translateY(-2px);
}

.language-switcher a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 0;
    text-decoration: none;
    color: #0B013C;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
    min-height: 32px;
    width: 32px;
    position: relative;
}

.language-switcher a.active,
.language-switcher a:hover {
    background-color: #0B013C;
    color: white;
    transform: scale(1.05);
}

/* Drapeaux emoji */
.language-switcher a::before {
    content: "";
    font-size: 16px;
    margin-bottom: 2px;
}

.language-switcher a[href*="fr"]::before {
    content: "🇫🇷";
}

.language-switcher a[href*="en"]::before {
    content: "🇬🇧";
}

.language-switcher a[href*="es"]::before {
    content: "🇪🇸";
}

/* Masquer le texte par défaut, afficher seulement les drapeaux */
.language-switcher.collapsed a {
    font-size: 0;
}

.language-switcher.collapsed a::before {
    font-size: 18px;
}

/* Afficher le texte quand déplié */
.language-switcher.expanded a {
    font-size: 10px;
    flex-direction: column;
    gap: 2px;
}

.language-switcher.expanded a::before {
    font-size: 14px;
}

/* Bouton toggle pour replier/déplier */
.language-toggle-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(11, 1, 60, 0.8);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-switcher.collapsed .language-toggle-indicator::before {
    content: "▼";
}

.language-switcher.expanded .language-toggle-indicator::before {
    content: "▲";
}

/* Bannière de consentement des cookies */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #0B013C 0%, #1a0d5c 100%);
    color: white;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    z-index: 2000;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    border-top: 3px solid rgba(255,255,255,0.1);
}

.cookie-consent-banner.show {
    transform: translateY(0);
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-consent-text {
    flex: 1;
    min-width: 300px;
}

.cookie-consent-text h4 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    font-weight: 600;
}

.cookie-consent-text p {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.9;
    line-height: 1.4;
}

.cookie-consent-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.cookie-btn-accept {
    background: #616ba2;
    color: white;
}

.cookie-btn-accept:hover {
    background: #218838;
    transform: translateY(-2px);
}

.cookie-btn-decline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
}

.cookie-btn-decline:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
}

.cookie-btn-settings {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    text-decoration: none;
}

.cookie-btn-settings:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
    color: white;
}

/* Responsive navigation mobile */
@media (max-width: 768px) {
    .hamburger-menu-btn {
        display: none;
    }
    
    .hamburger-menu-content {
        right: 10px;
        width: calc(100% - 40px);
        max-width: 350px;
        max-height: calc(100vh - 90px);
    }
    
    .nav-center {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .language-toggle-btn.visible {
        top: 130px !important; /* Même position que la barre de langue sur mobile */
    }
    
    /* Système de langue pliable mobile */
    .language-toggle-btn {
        display: block !important;
        width: auto !important;      /* Largeur automatique selon le contenu */
        min-width: unset !important; /* Supprime les contraintes de largeur minimale */
        max-width: 80px !important;  /* Largeur maximale raisonnable */
        white-space: nowrap !important; /* Empêche le retour à la ligne */
        flex-shrink: 0 !important;   /* Empêche la compression */
        flex-grow: 0 !important;     /* Empêche l'expansion */
    }
    
    .language-switcher {
        display: none; /* Masqué par défaut sur mobile */
        top: 130px; /* Ajusté pour le nouveau positionnement (80px + 50px pour mobile) */
        right: 20px; /* Position normale sur mobile */
        width: 48px !important; /* Largeur fixe pour la barre verticale */
        min-width: unset !important;
        max-width: unset !important;
    }
    
    .language-switcher.visible {
        top: 130px !important; /* Position visible sur mobile */
    }
    
    .language-switcher a {
        padding: 6px !important; /* Padding réduit pour mobile */
        margin: 0 !important;     /* Pas de marge entre les boutons verticaux */
        font-size: 10px !important;   /* Police plus petite sur mobile */
        width: 32px !important;
        height: 32px !important;
        display: flex !important; /* Force l'affichage flex */
        flex-shrink: 0 !important;    /* Empêche la compression */
        flex-grow: 0 !important;      /* Empêche l'expansion */
    }
    
    .language-switcher.show {
        display: block !important;
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .nav-container {
        position: relative;
        width: calc(100% - 20px); /* Marges de 10px maintenues sur mobile */
        margin: 0 10px;
    }
    
    .nav-right-container {
        gap: 10px;
        padding: 12px 20px;
        width: auto !important; /* Largeur automatique sur mobile pour éviter le débordement */
        justify-content: flex-end;
    }
    
    .access-pro {
        font-size: 14px;
    }
    
    /* Responsive pour la bannière de cookies */
    .cookie-consent-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-consent-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .cookie-btn {
        min-width: 120px;
    }
}

/* Menu déroulant mobile */
.mobile-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0B013C;
    border-radius: 8px;
    padding: 20px 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 1000;
    min-width: 280px;
    max-width: 90vw;
}

.mobile-nav-dropdown.show {
    display: block;
}

.mobile-nav-dropdown a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.mobile-nav-dropdown a:hover {
    background-color: #1a0d5a;
}

.mobile-nav-dropdown .nav-brands-label {
    display: block;
    color: #85809D;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-top: 1px solid #2a1f5f;
    margin-top: 10px;
    cursor: default;
}

.mobile-nav-dropdown .brand-submenu {
    background-color: #1a0d5a;
    margin: 0;
}

.mobile-nav-dropdown .brand-submenu a {
    padding: 10px 30px;
    font-size: 12px;
    color: #cccccc;
}

.mobile-nav-dropdown .access-pro-mobile {
    background-color: #ff4d4d;
    color: white !important;
    margin: 10px 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
}

.mobile-nav-dropdown .access-pro-mobile:hover {
    background-color: #e63946 !important;
}

/* Style pour le lien inactif "Accès pro" */
.access-pro[style*="opacity: 0.6"],
.access-pro-mobile[style*="opacity: 0.6"] {
    pointer-events: none; /* Empêche les clics */
}

/* ===== HEADER SECTION STYLES ===== */

/* Header Section */
.header {
    margin-bottom: 60px;
}

.header-content {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.logo {
    width: 240px;
    height: 240px;
    flex-shrink: 0;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-text {
    flex: 1;
    text-align: center;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: 600;
}

.description {
    text-align: center;
    font-size: 0.95em;
    color: #c0c0c0;
    line-height: 1.8;
}

/* ===== HOME PAGE STYLES ===== */

/* Styles pour la page d'accueil avec slide central */
.home-container {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    color: #333;
}

/* Scroll fluide pour les ancres */
html {
    scroll-behavior: smooth;
}

/* Offset pour les sections avec ancres (pour compenser le header fixe) */
#about-section, #values-section {
    scroll-margin-top: 180px; /* Espace pour le header + 80px supplémentaires pour éviter que le titre soit caché */
}

/* Container principal avec bords blancs */
.main-container {
    width: calc(100% - 20px); /* Largeur avec marges de 10px de chaque côté */
    margin: 10px auto; /* Marges réduites à 10px */
    position: relative;
}

/* Slide central avec effet parallaxe */
.slideshow-container {
    position: fixed; /* Fixe pour l'effet parallaxe */
    top: 10px;
    left: 10px;
    width: calc(100% - 20px); /* Largeur avec marges de 10px de chaque côté */
    height: calc(100vh - 20px); /* Hauteur avec marges de 10px en haut et en bas */
    min-height: 500px;
    border-radius: 20px; /* Bords arrondis */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); /* Ombre pour l'effet de profondeur */
    z-index: 1; /* En arrière-plan */
    transition: opacity 0.1s ease-out; /* Transition fluide pour l'effet de transparence */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Transition de fondu de 1 seconde */
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide img:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.slide-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    text-align: center;
    color: white;
    background: rgba(11, 1, 60, 0.85);
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(15px);
}

.slide-content h2 {
    font-size: 2.5em;
    margin-bottom: 15px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-content p {
    font-size: 1.1em;
    margin-bottom: 0;
    line-height: 1.6;
    opacity: 0.95;
}

.logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.logo-overlay img {
    height: 80px;
    width: auto;
}

/* Logo centré sur le slide */
.slide-logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 0.9;
}

.slide-logo-center img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Styles spécifiques pour la section main ajoutée */
.main-content-container {
    width: 100%;
    margin: 100vh auto 10px; /* Marge top = hauteur de l'écran pour passer par-dessus le slide, marge bottom réduite */
    padding: 60px 130px;
    background-color: #0B013C;
    color: white;
    border-radius: 8px;
    position: relative;
    z-index: 10; /* Au-dessus du slide */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.3); /* Ombre vers le haut pour l'effet de profondeur */
}

/* Conteneur de la carte avec bouton */
.map-container-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

/* Image MAP - style selon le design */
.map-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    /* margin-bottom: 30px; */
    max-height: 600px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* Bouton Trouver un magasin */
.find-store-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(11, 1, 60, 0.9);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.find-store-btn:hover {
    background: rgba(11, 1, 60, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Popup pour Our Spot */
.store-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1002;
    animation: fadeIn 0.3s ease;
}

.store-popup.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    background: white;
    border-radius: 15px;
    width: 95%;
    max-width: 1200px;
    height: 90%;
    max-height: 800px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.popup-header {
    background: transparent;
    color: white;
    padding: 10px 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.popup-title {
    display: none;
}

.close-popup {
    background: rgba(11, 1, 60, 0.8);
    border: 2px solid white;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.close-popup:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #0B013C;
    transform: scale(1.1);
}

.popup-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 15px 15px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Grille de boutons de marques - style selon le design */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    /* padding: 20px; */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.brand-button {
    background-color: rgba(255, 255, 255, 0.5);
    color: #0B013C;
    border: none;
    border-radius: 15px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    min-height: 50px;
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);*/
}

.brand-button:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #0B013C;
    transform: translateY(-3px);
    /*box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);*/
}

.brand-button.active-brand {
    background-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.brand-button img {
    max-width: 90%;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Header Content Section */
.header-content-main {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    padding: 40px 0;
    text-align: left;
    transition: opacity 0.3s ease;
}

.header-text-main {
    flex: 1;
    text-align: center;
    color: white;
}

.brand-title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.logo-main {
    flex-shrink: 0;
}

.logo-main img {
    max-width: 150px;
    height: auto;
    border-radius: 10px;
}

/* Galerie d'images style pour home */
.image-gallery-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    padding: 0;
}

.gallery-item-main {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 300px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.gallery-item-main:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.gallery-item-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-image-main {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.gallery-image-main:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* Section À propos home */
.about-section-main {
    text-align: center;
    margin-bottom: 60px;
}

.about-section-main h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.about-text-main {
    max-width: 900px;
    margin: 0 auto;
    text-align: justify;
    font-size: 1em;
    color: #c0c0c0;
    line-height: 1.8;
    padding: 0 20px;
}

/* Logo Wi Company home */
.wi-logo-main {
    text-align: center;
    margin: 60px 0;
}

.wi-logo-main img {
    height: 100px;
    width: auto;
    transition: all 0.3s ease;
}

.wi-logo-main:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Section équipe home */
.team-section-main {
    margin-bottom: 80px;
}

.team-section-main h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.team-grid-main {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.team-card-main {
    position: relative;
    width: 200px;
    height: 280px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.team-card-main:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.team-card-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    position: absolute;
    top: 0%;
    left: 0%;
}

.team-info-main {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 0 0 15px 15px;
}

.team-info-main h3 {
    font-size: 1.3em;
    margin-bottom: 5px;
    font-weight: 600;
}

.team-info-main p {
    font-size: 0.9em;
    opacity: 0.9;
}

/* Section valeurs home */
.values-section-main {
    margin-bottom: 80px;
}

.values-section-main h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.values-grid-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.value-card-main {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.value-card-main:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.value-card-main h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: 600;
    color: #ffffff;
}

.value-card-main p {
    font-size: 0.95em;
    color: #e0e0e0;
    line-height: 1.7;
}

/* Image Gallery */
.gallery {
    display: flex;
    gap: 20px;
    margin-bottom: 80px;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-item {
    flex: 1;
    min-width: 280px;
    max-width: 380px;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-10px);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About Section */
.about-section {
    text-align: center;
    margin-bottom: 60px;
}

.about-section h2 {
    font-size: 2em;
    margin-bottom: 30px;
    font-weight: 600;
}

.about-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
    font-size: 0.95em;
    color: #c0c0c0;
    line-height: 1.8;
}

/* Logo Wi Company */
.wi-logo {
    text-align: center;
    margin: 60px 0;
}

.wi-logo img {
    height: 80px;
    width: auto;
}

/* Team Cards */
.team-section {
    display: flex;
    gap: 30px;
    margin-bottom: 80px;
    flex-wrap: wrap;
    justify-content: center;
}

.team-card {
    background-color: #f0f0f0;
    color: #333;
    width: 200px;
    height: 280px;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.team-card h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.team-card p {
    font-size: 0.9em;
    color: #666;
}

/* Values Section */
.values-section {
    margin-bottom: 80px;
}

.values-section h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 50px;
    font-weight: 600;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.value-card {
    background-color: #85809D;
    border-radius: 15px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.value-card h3 {
    font-size: 1.4em;
    margin-bottom: 15px;
    font-weight: 600;
}

.value-card p {
    font-size: 0.9em;
    color: #c0c0c0;
    line-height: 1.7;
}

/* Footer Section Styles */
.footer-section h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
    font-weight: 600;
    color: #333;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #333;
}

.newsletter-title {
    font-size: 1.5em;
    font-weight: 900;
    color: #0B013C;
    margin: 0 0 10px 0;
    text-align: left;
    width: 100%;
}

.newsletter-form {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 600px;
}

.newsletter-form input {
    background-color: #85809D;
    border: none;
    color: white;
    padding: 15px 25px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 300;
    width: 300px;
    flex-shrink: 1;
    min-width: 250px;
}

.newsletter-form input::placeholder {
    color: white;
}

.newsletter-form button {
    background-color: #0B013C;
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}

.newsletter-form button:hover {
    background-color: #1a1a4e;
    transform: translateY(-2px);
}

.social-links {
    margin-top: 20px;
}

.social-icons-container {
    background-color: #0B013C;
    padding: 5px 10px;
    margin-top: 60px;
    border-radius: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(11, 1, 60, 0.2);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.social-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Responsive mobile pour home sections */
@media (max-width: 768px) {
    /* Styles home responsive */
    .main-container {
        width: calc(100% - 20px); /* Même marges de 10px sur mobile */
        margin: 10px auto; /* Marges uniformes sur mobile */
    }
    
    .slideshow-container {
        position: fixed; /* Maintenir l'effet parallaxe sur mobile */
        top: 10px;
        left: 10px;
        width: calc(100% - 20px); /* Marges de 10px sur mobile aussi */
        height: calc(100vh - 20px); /* Hauteur avec marges de 10px */
        min-height: 400px;
        border-radius: 15px; /* Bords arrondis plus petits sur mobile */
        transition: opacity 0.1s ease-out; /* Même transition sur mobile */
    }
    
    .main-content-container {
        margin-top: 100vh; /* Maintenir l'effet parallaxe sur mobile */
        padding: 40px 20px;
        width: calc(100% - 20px); /* Marges cohérentes sur mobile */
        margin-left: auto;
        margin-right: auto;
    }
    
    .slide-content {
        bottom: 20px;
        left: 20px;
        right: 20px;
        padding: 20px;
    }
    
    .slide-content h2 {
        font-size: 1.8em;
    }
    
    .logo-overlay {
        padding: 20px;
    }
    
    .logo-overlay img {
        height: 60px;
    }
    
    /* Logo centré responsive sur mobile */
    .slide-logo-center img {
        width: 120px;
        height: 120px;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    /* Home sections responsive */
    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 15px;
        margin-bottom: 40px;
    }
    
    .brand-button {
        min-height: 45px;
    }
    
    .header-content-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .image-gallery-main {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .gallery-item-main {
        height: 200px;
    }
    
    .team-grid-main {
        gap: 20px;
    }
    
    .team-card-main {
        width: 160px;
        height: 220px;
    }
    
    .values-grid-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-section-main h2,
    .team-section-main h2,
    .values-section-main h2 {
        font-size: 1.8em;
        letter-spacing: 1px;
    }
    
    .about-text-main {
        font-size: 0.9em;
        padding: 0 10px;
    }
    
    .popup-title {
        font-size: 1.2em;
    }
    
    .header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .header-text h1, .header-text .description {
        text-align: center;
    }
    
    .logo {
        width: 180px;
        height: 180px;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .footer-newsletter {
        align-items: center !important;
        text-align: center !important;
    }
    
    .newsletter-title {
        text-align: center !important;
    }
    
    .newsletter-form {
        flex-direction: column !important;
        gap: 10px !important;
        max-width: 90% !important;
        justify-content: center !important;
    }
    
    .newsletter-form input {
        width: 100% !important;
        min-width: auto !important;
        max-width: 300px !important;
    }
    
    .newsletter-form button {
        width: 100% !important;
        max-width: 200px !important;
    }
    
    .social-icons-container {
        padding: 12px 15px !important;
        gap: 12px !important;
        justify-content: center !important;
    }
    
    .social-icon {
        width: 35px !important;
        height: 35px !important;
    }
    
    .social-icon img {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Container principal */
.container {
    width: 90%;
    margin: 40px auto 0;
    padding: 40px 20px;
    /* background-color: #0B013C; */
    color: white;
    border-radius: 8px;
}

/* ===== HEADER STYLES ===== */

/* Header commun */
.header {
    border-radius: 12px;
    margin: 40px auto;
    max-width: 1000px;
    padding: 0;
}

.header-content {
    padding: 40px;
    text-align: center;
}

.header-text h1 {
    color: #0B013C;
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: 700;
}

.header-text .description {
    color: #666;
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* ===== HOME PAGE STYLES ===== */

/* Styles du carrousel */
.carousel-container {
    position: relative;
    max-width: 100%;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.carousel-slide {
    display: none;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.carousel-slide.active {
    display: block;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(11, 1, 60, 0.7), rgba(97, 107, 162, 0.7));
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-content {
    text-align: center;
    color: white;
    padding: 40px;
    max-width: 800px;
}

.carousel-content h2 {
    font-size: 3.5em;
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-content p {
    font-size: 1.3em;
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Navigation du carrousel */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.carousel-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

/* Indicateurs du carrousel */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-indicator.active {
    background: white;
    transform: scale(1.2);
}

/* Section marques */
.brands-section-main {
    margin: 60px auto;
    text-align: center;
    max-width: 1200px;
    padding: 0 20px;
}

.brands-section-main h2 {
    font-size: 2.5em;
    margin-bottom: 50px;
    color: white;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.brands-grid-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.brand-card-main {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.brand-card-main:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.brand-card-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.brand-card-main:hover::before {
    left: 100%;
}

.brand-logo-main {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.brand-card-main:hover .brand-logo-main {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.brand-logo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-card-main h3 {
    color: white;
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: 600;
}

.brand-card-main p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    font-size: 0.9em;
}

/* Section à propos */
.about-section-main {
    margin-bottom: 40px;
    padding: 40px 0;
}

.about-section-main h2 {
    font-size: 2.2em;
    margin-bottom: 30px;
    text-align: center;
    color: white;
    font-weight: 700;
}

.about-text-main {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1em;
    line-height: 1.8;
    padding: 0 20px;
}

/* Logo Wi - définition supprimée car en doublon */

/* Section équipe */
.team-section-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 60px;
    padding: 40px 0;
}

.team-card-main {
    background-color: white;
    padding: 0;
    border-radius: 15px;
    text-align: center;
    width: 250px;
    height: 300px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.team-card-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    position: absolute;
    top: 0%;
    left: 0%;
}

.team-card-main:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Nouveau conteneur pour chaque membre de l'équipe */
.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Bloc de texte sous les photos */
.team-text {
    background: transparent;
    text-align: center;
    padding: 0;
}

.team-text h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
    color: #cccccc;
    font-weight: 600;
}

.team-text p {
    color: #cccccc;
    font-weight: 400;
    margin: 0;
    font-size: 0.9em;
}

/* Section valeurs */
.values-section-main {
    margin-bottom: 40px;
    padding: 40px 0;
}

.values-section-main h2 {
    font-size: 2.2em;
    margin-bottom: 40px;
    text-align: center;
    color: white;
    font-weight: 700;
}

.values-grid-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 20px 0;
    max-width: 1000px;
    margin: 0 auto;
}

.value-card-main {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.value-card-main:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.value-card-main h3 {
    font-size: 1.4em;
    margin-bottom: 15px;
    color: white;
    font-weight: 600;
}

.value-card-main p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* ===== CONTACT PAGE STYLES ===== */

.contact-content {
    margin: 60px auto;
    max-width: 800px;
    padding: 0 40px;
}

.contact-form-container {
    border-radius: 12px;
    padding: 40px;
}

.contact-form {
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-weight: 500;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f5f5f5;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #0B013C;
    background-color: #fff;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto !important;
    margin: 0;
    transform: scale(1.2);
}

.checkbox-group label {
    margin: 0;
    color: #666;
    font-size: 14px;
    cursor: pointer;
}

.submit-group {
    text-align: center;
    margin-top: 30px;
}

.submit-btn {
    background-color: #1a1a5c;
    color: white !important;
    padding: 15px 60px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.submit-btn:hover {
    background-color: #0B013C;
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: translateY(0);
}

/* Messages d'alerte */
.alert {
    padding: 15px 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    border: 1px solid;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Styles spécifiques pour la page contact */
.contact-page .container .contact-content *,
.contact-page .container .header * {
    color: #000000 !important;
}

/* Exception pour le bouton - règle plus spécifique */
.contact-page .container .contact-content .submit-btn {
    color: #ffffff !important;
}

/* ===== LEGAL PAGES STYLES ===== */

.page-content,
.legal-content {
    margin: 60px auto;
    max-width: 1000px;
    padding: 0 40px;
}

.page-section,
.legal-section {
    margin-bottom: 40px;
    /* background: rgba(255, 255, 255, 0.95); */
    border-radius: 12px;
    padding: 30px;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
}

.page-section h2,
.legal-section h2 {
    color: #0B013C;
    font-size: 1.8em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #616ba2;
    font-weight: 600;
}

.section-content,
.legal-text {
    color: #333;
    line-height: 1.6;
}

.section-content p,
.legal-text p {
    margin-bottom: 15px;
    color: #333;
}

.section-content ul,
.section-content ol {
    margin: 15px 0;
    padding-left: 25px;
}

.section-content li {
    margin-bottom: 8px;
    color: #333;
}

.section-content h4 {
    color: #0B013C;
    margin: 20px 0 10px 0;
    font-weight: 600;
}

.section-content strong,
.legal-text strong {
    color: #0B013C;
    font-weight: 600;
}

/* Styles spécifiques pour les pages légales */
.legal-page .container .page-content *,
.legal-page .container .legal-content *,
.legal-page .container .header * {
    color: #000000 !important;
}

/* ===== FOOTER STYLES ===== */

/* Footer par défaut - fond transparent, texte noir */
.footer-container {
    width: calc(100% - 20px);
    margin: 10px auto 0;
    padding: 40px 20px;
    background: transparent !important;
    color: #000000;
    border-radius: 15px 15px 0 0;
    position: relative;
}

.footer {
    background: transparent !important;
    padding: 0;
    margin: 0;
    color: #000000;
    position: relative;
}

/* Styles par défaut du footer - texte noir */
.footer-container h3,
.footer-container .footer h3 {
    color: #000000 !important;
}

.footer-container a,
.footer-container .footer a {
    color: #000000 !important;
}

.footer-container p,
.footer-container .footer p {
    color: #000000 !important;
}

.footer a {
    color: #000000 !important;
}

.footer h3 {
    color: #000000 !important;
}

.footer p {
    color: #000000 !important;
}



.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 600;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section li {
    margin-bottom: 10px;
}

.footer-section a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #cccccc !important;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
}

.newsletter-title {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* .newsletter-form input - doublon supprimé, version conservée en ligne 1625 */

/* .newsletter-form input::placeholder - doublon supprimé, version conservée en ligne 1638 */

/* .newsletter-form button - doublon supprimé, version conservée en ligne 1657 */

/* .newsletter-form button:hover - doublon supprimé, version conservée en ligne 1672 */

.footer-social {
    display: flex;
    align-items: center;
}

.social-icons-container {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Footer styles pour pages légales - ces règles sont appliquées spécifiquement sur les pages légales via leurs CSS individuels */

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
    /* Header responsive */
    .header-text h1 {
        font-size: 2em;
    }
    
    /* Carrousel responsive */
    .carousel-content h2 {
        font-size: 2.5em;
    }
    
    .carousel-content p {
        font-size: 1.1em;
    }
    
    .carousel-nav {
        font-size: 18px;
        padding: 10px 15px;
    }
    
    /* Grilles responsive */
    .brands-grid-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .values-grid-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .team-section-main {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    /* Contact responsive */
    .contact-content {
        padding: 0 20px;
        margin: 40px auto;
    }
    
    .contact-form-container {
        padding: 30px 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .submit-btn {
        padding: 12px 40px;
        font-size: 14px;
    }
    
    /* Pages légales responsive */
    .page-content,
    .legal-content {
        padding: 0 20px;
        margin: 40px auto;
    }
    
    .page-section,
    .legal-section {
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .page-section h2,
    .legal-section h2 {
        font-size: 1.5em;
    }
    
    /* Footer responsive */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .newsletter-form {
        flex-direction: column;
        width: 100%;
    }
    
    .newsletter-form input {
        width: 100%;
    }
    
    .social-icons-container {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .carousel-content h2 {
        font-size: 2em;
    }
    
    .carousel-content p {
        font-size: 1em;
    }
    
    .header-text h1 {
        font-size: 1.8em;
    }
    
    .brands-section-main h2,
    .values-section-main h2,
    .about-section-main h2 {
        font-size: 2em;
    }
}

/* ===== ADMIN PAGE STYLES ===== */

.admin-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.admin-header {
    text-align: center;
    margin-bottom: 40px;
    color: #0B013C;
}

.admin-form {
    max-width: 400px;
    margin: 0 auto;
}

.admin-form .form-group {
    margin-bottom: 20px;
}

.admin-form label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.admin-form input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.admin-form button {
    width: 100%;
    padding: 15px;
    background-color: #0B013C;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-form button:hover {
    background-color: #1a1a5c;
}

.admin-dashboard {
    margin-top: 40px;
}

.admin-section {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    border-left: 4px solid #0B013C;
}

.admin-section h3 {
    color: #0B013C;
    margin-bottom: 15px;
}

.admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-btn {
    padding: 10px 20px;
    background-color: #616ba2;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.admin-btn:hover {
    background-color: #0B013C;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #f5c6cb;
}

/* ===== OUR SPOT PAGE STYLES ===== */

.spots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.spot-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.spot-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.spot-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.spot-content {
    padding: 25px;
}

.spot-title {
    color: white;
    font-size: 1.4em;
    margin-bottom: 15px;
    font-weight: 600;
}

.spot-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 20px;
}

.spot-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.spot-location {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

.spot-btn {
    background-color: #0B013C;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.spot-btn:hover {
    background-color: #1a1a5c;
}

/* ===== FAQ PAGE STYLES ===== */

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}


.faq-question {
    background-color: #0B013C;
    color: white;
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #1a1a5c;
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    transition: transform 0.3s ease;
}

.faq-question.active::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-answer.active {
    padding: 20px;
    max-height: 500px;
}

.faq-answer p {
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* ===== STYLES HAMBURGER MENU AMÉLIORÉS ===== */

/* Amélioration de la surbrillance des éléments du menu */
.nav-item {
    display: block;
    padding: 12px 15px;
    color: white;
    text-decoration: none;
    margin-bottom: 2px;
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: white;
    transform: translateX(3px);
}

.nav-item:active {
    color: white;
    transform: translateX(2px);
}

/* Styles unifiés pour les éléments de devise et langues */
.hamburger-menu-content .lang-item, 
.hamburger-menu-content .currency-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    margin-bottom: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #cccccc;
    text-decoration: none;
    /* Fixes pour Windows/Edge/Chrome */
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hamburger-menu-content .lang-item:hover, 
.hamburger-menu-content .currency-item:hover {
    color: white;
    transform: translateX(3px);
}

.hamburger-menu-content .lang-item.active, 
.hamburger-menu-content .currency-item.active {
    color: white;
    transform: translateX(2px);
}

/* Supprimer les interlignes entre éléments similaires */
.language-section .lang-item,
.currency-section .currency-item,
.navigation-section .nav-item {
    margin-bottom: 0;
}

/* Garder les espaces entre les grandes catégories */
.menu-divider {
    margin: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Corrections spécifiques pour Windows/Edge/Chrome */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Styles spécifiques pour Edge Legacy */
    .hamburger-menu-content {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .hamburger-menu-content .lang-item,
    .hamburger-menu-content .currency-item {
        line-height: 1.4;
    }
}

@supports (-webkit-appearance:none) {
    /* Styles spécifiques pour Chrome/Safari */
    .hamburger-menu-content {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Media query pour détecter Windows */
@media (pointer: fine) and (hover: hover) {
    .hamburger-menu-content .lang-item:hover,
    .hamburger-menu-content .currency-item:hover {
        transition: all 0.2s ease;
        color: white;
        transform: translateX(3px);
    }
}

.return-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 0;
}

.return-home {
    display: block;
    padding: 15px;
    text-align: center;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.return-home:hover {
    color: #cccccc;
    transform: translateX(3px);
}

/* ===== STYLES POUR PAGES LÉGALES ET FAQ ===== */

/* Logo sections sur les pages */
.logo-section {
    text-align: center;
    margin: 40px 0 20px 0;
}

.page-logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 10px;
}

/* Styles spécifiques FAQ */
.faq-content {
    margin: 40px 0;
}

.faq-section {
    margin-bottom: 40px;
}

.faq-section h2 {
    color: #0B013C;
    font-size: 2em;
    margin-bottom: 30px;
    font-weight: 700;
    border-bottom: 2px solid #0B013C;
    padding-bottom: 10px;
}

.faq-item {
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq-item h3 {
    color: #0B013C;
    font-size: 1.3em;
    margin-bottom: 15px;
    font-weight: 600;
}

.faq-item p {
    color: #333;
    line-height: 1.7;
    margin-bottom: 15px;
}

.faq-item ul {
    margin: 15px 0;
    padding-left: 25px;
}

.faq-item li {
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Styles responsive pour FAQ */
@media (max-width: 768px) {
    .page-logo {
        width: 150px;
        height: 150px;
    }
    
    .faq-section h2 {
        font-size: 1.6em;
    }
    
    .faq-item h3 {
        font-size: 1.2em;
    }
    
    .faq-item {
        padding: 15px;
        margin-bottom: 20px;
    }
}