/* ====== CONTENEUR DE LA BARRE DE NAVIGATION VERTICALE ====== */
#navbarVerticalCollapse {
    border-right: 1px solid rgba(255,255,255,.06); /* Bord droit léger */
    box-shadow: 4px 0 20px rgba(0,0,0,.35); /* Ombre portée verticale */
    margin-top: 15px; /* Marge supérieure */
}

.navbar-vertical-toggle {
    margin-top: 11px !important; /* Décalage vers le bas pour le bouton toggle */
}

/* ---------------------------------------------------- */
/* Menu Horizontal */
/* ---------------------------------------------------- */
.menu_horizontal {
    list-style: none;
    margin: 0;
    padding: 0;
    /*background: #333;*/
    display: flex;
}

    .menu_horizontal > li {
        position: relative;
    }

        .menu_horizontal > li > a {
            display: flex;
            align-items: center;
            /*color: white;*/
            text-decoration: none;
            padding: 14px 20px;
            transition: all 0.3s ease;
            position: relative;
        }

            /* Ligne animée au hover du niveau 1 */
            .menu_horizontal > li > a::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 3px;
                background: var(--falcon-navbar-color); /* couleur de la ligne */
                transition: width 0.3s ease;
            }

            .menu_horizontal > li > a:hover::before {
                width: 100%;
            }

            /* Icônes du niveau 1 */
            .menu_horizontal > li > a .icon {
                margin-right: 7px;
            }

    /* Sous-menus */
    .menu_horizontal li ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #FFFFFF;
        list-style: none;
        margin: 0;
        padding: 0;
        min-width: 200px;
        z-index: 1000;
        border-radius: 8px;
    }

    .menu_horizontal li:hover > ul {
        display: block;
    }

    .menu_horizontal li ul li {
        position: relative;
    }

        .menu_horizontal li ul li a {
            display: block;
            color: var(--falcon-navbar-color);
            text-decoration: none;
            padding: 10px 15px;
            transition: background 0.3s;
        }

            .menu_horizontal li ul li a:hover {
                background: #CFDDF7;
                color: var(--falcon-navbar-color);
            }

        /* Flèches à droite pour les sous-niveaux */
        .menu_horizontal li ul li:has(ul) > a::after {
            /*content: "▶";*/
            float: right;
            margin-left: 8px;
            font-size: 12px;
        }

        /* Sous-menus des sous-menus (niveaux 3 et 4) */
        .menu_horizontal li ul li ul {
            top: 0;
            left: 100%;
        }
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/* ====== LOADER MODERNE AVEC EFFET NÉON ====== */
/* ---------------------------------------------------- */
/* - Loader centré avec animations de rotation et néon - */
/* ---------------------------------------------------- */

.loader-container {
    position: relative; /* Reste centré sur la page */
    top: 0;
    left: 0;
    margin-top: 8rem;
    margin-bottom: 8rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    pointer-events: none; /* Permet de cliquer sur les autres éléments après disparition */
    background: transparent; /* Pas de fond */
    z-index: 9999; /* Toujours au-dessus */
}

.myloader {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
    animation: rotateSpinner 1.5s linear infinite; /* Rotation principale */
    box-shadow: 0 0 15px #fff, 0 0 30px #ff0000, 0 0 45px #000; /* Effet néon blanc, rouge et noir */
}

    /* ==== Couches externes avec dégradé ==== */
    .myloader::before,
    .myloader::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #fff; /* Blanc */
        border-right-color: #ff0000; /* Rouge */
        border-bottom-color: #000; /* Noir */
        border-left-color: #fff; /* Blanc */
        animation: spinLayer 1.2s linear infinite; /* Rotation des couches */
    }

    .myloader::after {
        border-width: 3px; /* Bord intérieur plus fin */
        top: 12%;
        left: 12%;
        width: 76%;
        height: 76%;
        animation-duration: 0.9s; /* Vitesse différente pour effet dynamique */
        opacity: 0.8;
    }

/* ==== Animation de rotation principale ==== */
@keyframes rotateSpinner {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* ==== Animation des couches avec pulsation ==== */
@keyframes spinLayer {
    0% {
        transform: rotate(0deg) scale(0.9);
        box-shadow: 0 0 10px #fff, 0 0 20px #ff0000, 0 0 30px #000;
    }

    50% {
        transform: rotate(180deg) scale(1.2);
        box-shadow: 0 0 20px #fff, 0 0 40px #ff0000, 0 0 60px #000;
    }

    100% {
        transform: rotate(360deg) scale(0.9);
        box-shadow: 0 0 10px #fff, 0 0 20px #ff0000, 0 0 30px #000;
    }
}

/* ==== Logo central avec effet de rebond et néon ==== */
.logo-loader {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bounceLogo 1.5s ease-in-out infinite, neonGlow 1.5s ease-in-out infinite alternate;
    box-shadow: 0 0 5px #fff, 0 0 10px #ff0000, 0 0 15px #000; /* Ombre néon dynamique */
}

/* Rebond du logo */
@keyframes bounceLogo {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* Effet de glow néon */
@keyframes neonGlow {
    0% {
        box-shadow: 0 0 5px #fff, 0 0 10px #ff0000, 0 0 15px #000;
    }

    50% {
        box-shadow: 0 0 15px #fff, 0 0 30px #ff0000, 0 0 45px #000;
    }

    100% {
        box-shadow: 0 0 5px #fff, 0 0 10px #ff0000, 0 0 15px #000;
    }
}

/* LANDING PAGE */
:root {
    /* Palette Noir, Blanc et Bleu Pur */
    --bs-primary: #007bff ; /* Bleu Primaire (Vibrant) */
    --bs-primary-dark: #0056b3; /* Bleu pour les survols */
    --bs-secondary: #495057; /* Gris foncé (remplace le gris-bleu) */
    --bs-light: #f8f9fa; /* Blanc cassé très clair (pour les fonds de section) */
    --bs-dark: #212529; /* Noir/Texte principal très contrasté */
    --bs-success: var(--bs-primary); /* Le succès devient Bleu Primaire */
}

/* Effet d'ombre prononcé et moderne pour les cartes principales */
.card-modern {
    border: 1px solid rgba(0, 0, 0, 0.1); /* Bordure fine et contrastée */
    border-radius: 1rem; /* Bords arrondis */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
    /* Ombre subtile noire par défaut */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

    .card-modern:hover {
        transform: translateY(-8px); /* Élévation forte */
        /* Ombre profonde et lueur bleue au survol pour un effet high-tech */
        box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(0, 123, 255, 0.1);
    }

/* Amélioration de la lisibilité des listes de fonctionnalités */
.list-feature li {
    padding: 0.8rem 0;
    border-bottom: 1px dashed #e9ecef; /* Lignes pointillées pour la légèreté */
    font-size: 1rem;
    color: var(--bs-dark);
}

.list-feature .bi-check-lg {
    color: var(--bs-primary); /* Les icônes de succès deviennent bleues */
}

/* Style pour la Hero Section pour un look plus punchy */

/* Style du bouton CTA principal (Effet Lueur Bleue) */
.btn-cta-primary {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 800;
    /* Gradient subtil dans le spectre du bleu */
    background: linear-gradient(45deg, var(--bs-primary), #0099ff);
    border: none;
    border-radius: 0.5rem;
    /* Lueur bleue prononcée pour l'impact */
    box-shadow: 0 0.75rem 2rem rgba(0, 123, 255, 0.5);
}

    .btn-cta-primary:hover {
        background: linear-gradient(45deg, var(--bs-primary-dark), #007bff);
        /* Lueur accrue au survol */
        box-shadow: 0 1rem 3rem rgba(0, 123, 255, 0.7);
        transform: translateY(-3px);
    }

/* Titres de section stylisés (Look minimaliste) */
.section-title h5 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--bs-dark);
    position: relative;
    padding-bottom: 15px;
}

    .section-title h5::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 2px;
        background: var(--bs-primary); /* Le séparateur devient bleu */
        border-radius: 2px;
    }

/* Amélioration des cartes de pricing */
.pricing-card-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.pricing-featured {
    /* Bordure et ombre du plan en vedette en Bleu Primaire */
    border: 3px solid var(--bs-primary);
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.3), 0 0 0 5px rgba(0, 123, 255, 0.05) !important;
}

/* Footer (pour un look Black & White) */
.bg-dark {
    background-color: var(--bs-dark) !important; /* Assure un noir profond */
    color: white;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ... Votre code CSS précédent (Palette Noir, Blanc et Bleu Pur) ... */
/* ---------------------------------------------------------------------- */
/* AJUSTEMENT POUR FIXER L'EN-TÊTE EN HAUT ET COMPENSER SON ESPACE */
/* ---------------------------------------------------------------------- */

header.sticky-top {
    /* Écrase position: sticky par position: fixed */
    position: fixed !important;
    margin-top: 5rem;
    width: 100%;
    /* Ajout de la couleur de fond et de l'ombre au cas où la classe bg-white ne serait pas persistante */
    background-color: white !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* COMPENSATION: Augmente la marge supérieure de la section HERO pour que le contenu ne passe pas sous le HEADER fixe. */


/* ---------------------------------------------------------------------- */
/* RESTE DU STYLE (Palette Noir, Blanc et Bleu Pur) */
/* ---------------------------------------------------------------------- */
:root {
    --bs-primary: #007bff;
    --bs-primary-dark: #0056b3;
    --bs-secondary: #495057;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-warning: red;
    --bs-success: var(--bs-primary);
}
/* ... le reste de vos styles (.card-modern, .btn-cta-primary, etc.) ... */
#myMenuVerticalDisplay {
    background: linear-gradient(45deg, var(--bs-warning), #000000);
}

.gradient-text {
    background: linear-gradient(45deg, var(--bs-primary), #0099ff);
    -webkit-background-clip:initial;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* مهم في بعض الحالات */
}

/* ------------------------------------------------------------ */
/* Footer Mobile  */
/* ------------------------------------------------------------ */

/* Variables de base pour la cohérence des couleurs (si non déjà définies par le framework) */
:root {
    --bs-primary: #1e5dd9; /* Bleu principal (e.g., #1e5dd9) */
    --bs-primary-rgb: 30, 93, 217;
    --bs-secondary: #6c757d; /* Gris secondaire */
    --bs-light: #f8f9fa; /* Arrière-plan clair */
    --bs-dark: #212529; /* Texte ou arrière-plan foncé */
    --bs-primary-dark: #174aa8; /* Une version plus foncée de primary pour le CTA footer */
}

/* Styles Modernes */


.btn-cta-primary {
    /* Bouton CTA principal : plus grand, plus d'ombre, coins légèrement plus arrondis */
    border-radius: 0.75rem !important;
    transition: all 0.3s ease;
}

    .btn-cta-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(var(--bs-primary-rgb), 0.3) !important;
    }

.landing-title {
    padding: 4rem !important;
    background-color: var(--bs-primary-dark);
    border-radius: 1rem !important;
}

/* Amélioration des cartes modernes (pour Pricing et Support) */
.card-modern {
    border: none;
    border-radius: 1rem; /* Coins plus arrondis */
    transition: all 0.3s ease;
    overflow: hidden; /* Pour contenir les éléments enfants arrondis */
}

    .card-modern:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
    }

/* Style de la carte de tarification en vedette (Business) */
.pricing-featured {
    transform: scale(1.05); /* Mise en évidence */
    border: 4px solid var(--bs-success); /* Bordure colorée */
    z-index: 10;
}

    .pricing-featured .pricing-card-header {
        background-color: var(--bs-primary) !important; /* Fond primaire */
    }

/* Image de démonstration (pour un look moderne, utilisation de rounded-4) */
.product-mockup {
    max-width: 90%; /* Un peu plus grand */
    border-radius: 1rem !important;
    border: 1px solid rgba(0, 0, 0, 0.05); /* Bordure très subtile */
}

/* Section Boutiques - Navigation par onglets modernes */
.nav-pills .nav-link {
    color: var(--bs-dark);
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

    .nav-pills .nav-link.active,
    .nav-pills .nav-link:hover {
        background-color: var(--bs-primary) !important;
        color: white !important;
        box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.2);
    }

.tab-content {
    border-radius: 1rem !important;
    padding: 3rem !important;
}

/* Footer */
.footer-main a {
    color: rgba(255, 255, 255, 0.7) !important;
}

    .footer-main a:hover {
        color: var(--bs-primary) !important;
    }

.contact-list .bi-geo-alt-fill,
.contact-list .bi-telephone-fill,
.contact-list .bi-envelope-fill {
    color: var(--bs-primary);
    font-size: 1.1rem;
}



#Accueil {
    min-height: 640px;
    /* جرب هذا المسار أولاً */
    background-image: url(YouDo.eMall/assets/images/landing-page/main-home.jpg);
    background-size: cover; /* تأكد من ظهورها */
    background-position: center center;
}




/* 🎨 Minimalist Variables */
:root {
    --minimal-bg: #ffffff; /* White or very light background */
    --minimal-accent: #3b82f6; /* A clean, modern blue */
    --minimal-text-color: aquamarine; /* Neutral gray for inactive icons */
    --minimal-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    --minimal-transition: all 0.2s ease-in-out;
}

/* 📱 Main Navigation Bar Styling */
.falcon-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: linear-gradient(45deg, var(--bs-primary), #0099ff) !important;
    box-shadow: var(--minimal-shadow);
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* 🔗 Navigation Item Styling */
.falcon-nav-item {
    color: var(--minimal-text-color);
    transition: var(--minimal-transition);
    padding: 0.5rem 0.25rem;
    flex-grow: 1;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

    /* 🖱️ Hover/Focus State */
    .falcon-nav-item:hover,
    .falcon-nav-item:focus {
        color: var(--minimal-accent);
        background-color: rgba(59, 130, 246, 0.1);
    }

    /* 🌟 Active/Current Item Styling - Underline style */
    .falcon-nav-item.active {
        color: var(--minimal-accent) !important;
        position: relative;
    }

        /* Active indicator - Small bar below the active icon */
        .falcon-nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 3px;
            width: 80%;
            background-color: var(--minimal-accent);
            border-radius: 2px 2px 0 0;
            animation: slideIn 0.3s ease-out;
        }

    /* 📐 Icon Size and Alignment */
    .falcon-nav-item i {
        font-size: 1.6rem;
        transition: var(--minimal-transition);
    }

/* ➕ Central Button - Integrated */
.nav-center-btn {
    /* Remove floating styles */
    transform: none;
    box-shadow: none;
    background: none;
    margin-top: 0;
    border: none;
    padding: 0.5rem 0.25rem;
}

/* Animation for the active indicator */
@keyframes slideIn {
    from {
        width: 0;
    }

    to {
        width: 80%;
    }
}

/* ------------------------------------------------------------ */
/* Fin Footer Mobile  */
/* ------------------------------------------------------------ */