/* =========================================
   BRANDING & VARIABLES
   ========================================= */
        :root {
            /* Couleur orange du logo */
            --bs-primary: #F15A2B;
            /* Version légèrement plus foncée pour les hovers */
            --bs-primary-dark: #d14a20;

            /* Couleur secondaire (bleu nuit profond pour le contraste pro) */
            --bs-dark: #1a2533;
            --bs-body-color: #4a5568;

            /* Font stacks */
            --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --heading-font: 'Poppins', sans-serif;

            /* Ombres personnalisées plus douces */
            --shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 20px 40px -10px rgba(241, 90, 43, 0.2);
            /* Ombre orangée au survol */
        }

        /* Override global des polices */
        body {
            font-family: var(--bs-font-sans-serif);
            color: var(--bs-body-color);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .brand-text,
        .btn {
            font-family: var(--heading-font);
        }

        /* =========================================
   CUSTOM BURGER MENU (CSS PUR)
   ========================================= */

        /* Le conteneur des lignes */
        .hamburger-lines {
            width: 30px;
            height: 24px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* Style commun des 3 lignes */
        .hamburger-lines .line {
            display: block;
            height: 3px;
            width: 100%;
            border-radius: 10px;
            background: #ffffff;
            /* Couleur sombre par défaut */
            transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
        }

        /* =========================================
   FIX MENU MOBILE OUVERT
   ========================================= */

        /* Quand le menu est ouvert, on force le fond sombre */
        .navbar.mobile-open {
            background-color: var(--bs-dark) !important;
            /* Ou #000000 pour noir pur */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* On s'assure que le texte reste blanc quand le fond est noir */
        .navbar.mobile-open .nav-link,
        .navbar.mobile-open .brand-text {
            color: #ffffff !important;
        }

        /* On force aussi les lignes du burger en blanc */
        .navbar.mobile-open .hamburger-lines .line {
            background: #ffffff !important;
        }
        
        /* --- L'ANIMATION (Quand le menu est ouvert) --- */
        /* Note : Bootstrap retire la classe 'collapsed' quand le menu est ouvert */

        /* Ligne du haut : rotation 45deg */
        .navbar-toggler:not(.collapsed) .line1 {
            transform: translate(0, 10.5px) rotate(45deg);
        }

        /* Ligne du milieu : disparition */
        .navbar-toggler:not(.collapsed) .line2 {
            transform: scaleY(0);
            opacity: 0;
        }

        /* Ligne du bas : rotation -45deg */
        .navbar-toggler:not(.collapsed) .line3 {
            transform: translate(0, -10.5px) rotate(-45deg);
        }

        /* Petit ajustement pour centrer verticalement le bouton */
        .navbar-toggler {
            display: flex;
            align-items: center;
        }

        /* Override de la couleur primaire Bootstrap pour utiliser l'orange partout */
        .text-primary {
            color: var(--bs-primary) !important;
        }

        .bg-primary {
            background-color: var(--bs-primary) !important;
        }

        .border-primary {
            border-color: var(--bs-primary) !important;
        }

        .bg-primary-subtle {
            background-color: rgba(241, 90, 43, 0.1) !important;
            color: var(--bs-primary) !important;
        }

        /* Utilitaires d'espacement perso */
        .section-padding {
            padding-top: 100px;
            padding-bottom: 100px;
        }

        /* =========================================
   COMPOSANTS PERSONNALISÉS
   ========================================= */

        /* Bouton primaire avec léger dégradé et effet "glow" */
        .btn-primary {
            background: var(--bs-primary);
            background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-dark) 100%);
            border: none;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--bs-primary-dark) 0%, var(--bs-primary) 100%);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px -10px rgba(241, 90, 43, 0.5);
        }

        .btn-glow {
            box-shadow: 0 4px 15px rgba(241, 90, 43, 0.3);
        }

        /* Bouton outline blanc sur Hero */
        .btn-outline-light:hover {
            color: var(--bs-dark);
            background-color: #fff;
            border-color: #fff;
            transform: translateY(-3px);
        }

        /* Effet de survol pour les liens avec icônes */
        .btn-icon-hover i,
        .icon-link i {
            transition: transform 0.3s ease;
        }

        .btn-icon-hover:hover i,
        .icon-link:hover i {
            transform: translateX(5px);
        }

        /* Effet "lift" générique au survol */
        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover) !important;
        }

        /* =========================================
   NAVIGATION
   ========================================= */
        .navbar {
            transition: all 0.4s ease;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        /* Quand la navbar devient blanche au scroll (géré par JS) */
        .navbar.bg-white {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }

        .nav-link {
            font-weight: 500;
            font-size: 0.95rem;
            transition: color 0.3s ease;
            color: #ffffff !important;
        }

        /* Style des liens quand la navbar est transparente (sur fond sombre) */
        .navbar-dark .nav-link:hover,
        .navbar-dark .nav-link.active {
            color: var(--bs-primary) !important;
        }

        /* Style des liens quand la navbar est blanche */
        .navbar-light .nav-link:hover,
        .navbar-light .nav-link.active {
            color: var(--bs-primary) !important;
            opacity: 1;
        }

        /* =========================================
   HERO SECTION
   ========================================= */
        .hero-section {
            min-height: 136vh;
            padding-bottom: 170px;
        }

        /* Titre très gras */
        .fw-extrabold {
            font-weight: 800;
        }

        /* Animation d'entrée simple */
        .animate-up {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }

        .delay-1 {
            animation-delay: 0.2s;
        }

        .delay-2 {
            animation-delay: 0.4s;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Vague SVG */
        .wave-separator {
            line-height: 0;
            z-index: 1;
        }

        @media (min-width: 1400px) {
            .wave-separator {
                height: 280px;
            }
        }

        /* =========================================
   TRUST BAR
   ========================================= */
        .trust-item i {
            transition: transform 0.3s ease;
        }

        .trust-item:hover i {
            transform: scale(1.2) rotate(10deg);
        }

        /* Bordure entre les éléments sur desktop uniquement */
        @media (min-width: 768px) {
            .border-start-md {
                border-left: 1px solid rgba(0, 0, 0, 0.08);
            }
        }

        /* =========================================
   PRODUCT CARDS
   ========================================= */
        .product-card {
            box-shadow: var(--shadow-soft);
            transition: all 0.4s ease;
        }

        /* L'effet "Rise" : la carte monte et l'ombre devient colorée */
        .shadow-hover-rise:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover) !important;
        }

        /* Zoom de l'image au survol */
        .transition-scale {
            transition: transform 0.5s ease;
        }

        .product-card:hover .transition-scale {
            transform: scale(1.05);
        }

        /* Overlay sombre sur l'image */
        .card-overlay {
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }

        .product-card:hover .card-overlay {
            opacity: 1;
        }


        /* --- Accordéon Personnalisé --- */

        .custom-accordion .accordion-button {
            color: var(--bs-dark);
        }

        /* Enlever le fond bleu pâle par défaut de Bootstrap quand ouvert */
        .custom-accordion .accordion-button:not(.collapsed) {
            background-color: transparent;
            color: var(--bs-primary);
            box-shadow: none;
            /* Enlever l'ombre bleue */
        }

        /* Rotation de la petite flèche */
        .custom-accordion .accordion-button::after {
            transition: transform 0.3s ease;
            background-size: 1rem;
        }

        .custom-accordion .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F15A2B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

        /* Animation de hover sur les secteurs */
        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            background-color: white !important;
            /* Devient blanc au survol */
        }

        /* =========================================
   FOOTER
   ========================================= */
        .hover-white:hover {
            color: white !important;
        }

        .border-white-10 {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }



        /* --- Ajouts pour la section About --- */

        /* Badge flottant animé */
        .experience-badge {
            max-width: 300px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            /* Léger effet de flou si superposition */
        }

        /* Animation douce de flottement */
        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .animate-float {
            animation: float 4s ease-in-out infinite;
        }

        /* Letter spacing pour les petits titres */
        .ls-1 {
            letter-spacing: 1px;
        }

        /* Z-index négatif pour les motifs de fond */
        .z-n1 {
            z-index: -1;
        }