/* inter-300 - latin */
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: local(''),
            url('./../fonts/inter-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('./../fonts/inter-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: local(''),
            url('./../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('./../fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: local(''),
            url('./../fonts/inter-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('./../fonts/inter-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

      /* CSS Perso */
    .overlay {
        /* background-color: rgba(255, 255, 255, 0.5);  */
    }

    @media (max-width: 991px) { /* Breakpoint Bootstrap pour lg */
        /* .col-lg-4 {
        z-index: 1;
        } */
    }

      /* Styles pour corriger le problème de retour à la ligne dans la navbar */
    .navbar-nav .nav-link {
        white-space: nowrap;  /* Empêche le retour à la ligne */
    }
      /* Styles pour le logo responsive */
    .logo-img {
        width: auto;
        height: 45px;
    }
  
      /* Sur les petits écrans */
    @media (max-width: 576px) {
        .logo-img {
            width: 60px;  /* Réduit de 60px à 45px */
        }
    
        /* Réduction de la hauteur de la navbar sur mobile */
        .navbar {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        }
        
        /* Réduction des marges du conteneur de la navbar */
        .navbar .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        }
        
        /* Réduction de la taille du bouton hamburger */
        .navbar-toggler {
        padding: 0.15rem 0.4rem;
        font-size: 1rem;
        }
        
        /* Suppression des marges autour du logo */
        .navbar-brand {
        padding: 0;
        margin-right: 0.5rem;
        }
    }

    /* Assurer que le bouton a assez d'espace pour l'animation */
    .submit-btn {
        position: relative;
        overflow: hidden; /* Cache ce qui déborde initialement */
        cursor: pointer;
        background: linear-gradient(45deg, rgb(53, 58, 54), rgb(160, 164, 163));
        transition: all 0.3s ease;
        color: white !important; /* Force la couleur blanche avec !important */
        padding-right: 30px; /* Espace pour l'icône */
        padding-left: 30px; /* Ajout d'un padding à gauche pour équilibrer */
        border: none; /* Supprime toute bordure */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        margin: 0;
        display: flex;
        justify-content: center; /* Centre le contenu horizontalement */
        align-items: center; /* Centre le contenu verticalement */
    }

    /* Pour le texte du bouton, on ajoute un span */
    /* Pour le texte du bouton, on ajoute un span avec position stable */
    .submit-btn span.button-text {
        display: inline-block;
        transition: transform 0.3s ease 0.05s; /* Délai de 0.05s pour créer l'effet de décalage */
        color: white !important;
        position: relative; /* Permet de contrôler précisément la position */
        transform: translateY(0); /* Forcer une position Y stable */
        will-change: transform; /* Optimise les animations */
    }

    /* Assurer que seule la translation X est modifiée au hover, pas Y */
    .submit-btn:hover span.button-text {
        transform: translateX(-20px) translateY(0); /* Déplace le texte vers la gauche au hover sans changement vertical */
        transition: transform 0.3s ease 0.05s; /* Même durée mais avec délai */
    }


    .submit-btn:hover {
        /* transform: translateY(-3px); */
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
    }

    .submit-btn:hover span.button-text {
        transform: translateX(-20px); /* Déplace le texte vers la gauche au hover */
        transition: transform 0.3s ease 0.05s; /* Même durée mais avec délai */
    }

    /* Position de l'icône à l'intérieur du bouton */
    .submit-btn .icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%) translateX(30px);
        opacity: 0;
        transition: all 0.2s ease; /* Animation plus rapide pour l'icône */
        pointer-events: none; /* S'assure que l'icône ne perturbe pas les clics */
        color: rgb(255, 255, 255) !important; /* Assure que l'icône est blanche */
    }

    .submit-btn:hover .icon {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
        transition: all 0.2s ease-out; /* L'icône apparaît rapidement */
    }

    /* Animation améliorée pour l'avion qui décolle */
    .submit-btn.sending .icon {
        animation: fly 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
        z-index: 1000;
    }

    @keyframes fly {
        0% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
        }
        20% {
        /* Légère descente en bas à gauche (recul) sans rotation */
        transform: translateY(-30%) translateX(-15px);
        opacity: 1;
        }
        70% {
        /* Mouvement plus vers le haut et moins vers la droite - continue linéaire */
        transform: translateY(-200%) translateX(60px) scale(1.2);
        opacity: 0.7;
        animation-timing-function: linear; /* Maintient la transition linéaire */
        }
        100% {
        /* Disparition complète beaucoup plus vers le haut et moins vers la droite */
        transform: translateY(-400%) translateX(120px) scale(0.8);
        opacity: 0;
        }
    }

    /* Style pour le toast de confirmation */
    .toast-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
    }

    .toast {
        background-color: #4CAF50;
        color: white;
        padding: 15px 25px;
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .toast.show {
        transform: translateX(0);
    }

    .toast .success-icon {
        margin-right: 12px;
        font-size: 20px;
    }