/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* Styles pour le champ de téléphone avec intl-tel-input */
select.form-control,
.intl-tel-input input[type="tel"] {
    height: 40px;               /* Même hauteur que les autres inputs */
    padding: 6px 12px;          /* Même padding que les autres champs */
    font-size: 14px;            /* Taille de police standard */
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Pour forcer l'affichage correct de l'élément intl-tel-input */
.intl-tel-input {
    width: 100% !important;
    display: block;
}

/* Corrige l'espace pour éviter le chevauchement du drapeau */
.intl-tel-input input[type="tel"]::placeholder {
    color: #aaa;
}

a.conditions-link {
    color: #007bff;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}
a.conditions-link:hover {
    color: #0056b3;
}


/*============================================================================================*/
/* Styles spécifiques pour l'affichage mobile en plein écran */
/*============================================================================================*/
@media (max-width: 767px) {
    /* Styles pour les écrans de 767px de largeur ou moins, c'est-à-dire pour les appareils mobiles */
    .fullscreen {
        height: 100vh; /* Assure que l'élément occupe toute la hauteur de l'écran */
		
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centre verticalement le contenu de `content-left` */
        align-items: center;
        overflow-y: hidden; /* Masque la barre de défilement par défaut */
    }
	
    /* Barre de progression fixe en haut */
    #top-wizard {
        position: fixed;
        top: 5px;
        left: 20px;
        width: 90%;
        z-index: 10;
        margin-bottom: 10px; /* Ajoute une marge pour espacer le contenu */
        background-color: #fff;
    }	
	
	
    /* Introduction en pleine hauteur sur mobile */
    .content-left-wrapper {
        height: 90vh; /* Définit la hauteur à 100% de la hauteur de la fenêtre pour occuper tout l'écran */
        display: flex; /* Utilise Flexbox pour centrer et organiser le contenu */
        flex-direction: column; /* Aligne les éléments enfants en colonne (de haut en bas) */
        justify-content: center; /* Centre le contenu verticalement dans la section */
        align-items: center; /* Centre le contenu horizontalement dans la section */
        text-align: center; /* Centre le texte dans le bloc */
        background-color: #333; /* Définit la couleur de fond pour l'introduction (gris foncé) */
        color: #fff; /* Définit la couleur du texte en blanc pour assurer un bon contraste avec le fond */
        padding: 20px; /* Ajoute un espacement interne de 20px autour du contenu */
        box-sizing: border-box; /* Inclut le padding dans la largeur et la hauteur totales de l'élément */
    }

    /* Assurez-vous que le bouton "Commencer maintenant" est visible et centré */
    .content-left-wrapper .btn_1 {
        margin-top: 20px; /* Ajoute un espace de 20px au-dessus du bouton pour le séparer des autres éléments */
        padding: 15px 24px; /* Ajoute un espacement interne de 12px en haut/bas et de 24px à gauche/droite */
        font-size: 1rem; /* Définit la taille de la police du bouton à 1rem (relative à la taille de base du texte) */
    }

    /* Pleine hauteur pour les étapes également */
    .step {
        display: none; /* Masque chaque étape par défaut */
        height: 75vh; /* Gère la hauteur des étapes une fois affichées */
        width: 100%; /* Étend l'étape à toute la largeur de l’écran */
        max-width: 100vw; /* Limite la largeur pour empêcher tout débordement horizontal */
        margin: 0; /* Supprime toute marge extérieure pour éviter les débordements */
		margin-top: 40px; /* Supprime toute marge extérieure pour éviter les débordements */
        padding: 0 20px; /* Ajuste le padding interne pour garder le contenu à l'intérieur */
        overflow-y: auto; /* Barre de défilement verticale uniquement si nécessaire */
        box-sizing: border-box;
	
    }
	
	
    /* Boutons fixes en bas */
    .navigation-buttons, #bottom-wizard {
        position: fixed; /* Positionne les boutons de manière fixe pour qu'ils restent visibles en bas de l'écran lors du défilement */
        bottom: 0; /* Place les boutons au bas de l'écran */
        left: 0; /* Aligne les boutons sur le côté gauche de l'écran */
        width: 100%; /* Étend la largeur des boutons pour qu'ils occupent toute la largeur de l'écran */
        display: flex; /* Utilise Flexbox pour aligner les boutons de navigation côte à côte */
        justify-content: space-around; /* Espace les boutons de manière égale avec de l'espace autour d'eux */
        background: #fff; /* Définit la couleur de fond des boutons en blanc */
        padding: 10px 0; /* Ajoute un espacement interne vertical de 10px en haut et en bas des boutons */
        border-top: 1px solid #ddd; /* Ajoute une bordure supérieure de couleur gris clair pour séparer visuellement les boutons du contenu */
        z-index: 10; /* Augmente la priorité d'affichage pour que les boutons soient visibles au-dessus du contenu défilant */
    }

    /* Style des boutons dans la zone de navigation */
    .navigation-buttons button, #bottom-wizard button {
        width: 45%; /* Définit la largeur de chaque bouton à 45% de la largeur de l'écran, permettant deux boutons côte à côte avec un espace entre eux */
        padding: 15px; /* Ajoute un espacement interne de 15px pour augmenter la zone cliquable */
        font-size: 1rem; /* Définit la taille de la police du bouton à 1rem */
    }
}