/* Appliquer une police moderne et un fond clair */

@font-face {
    font-family: 'Poppins-regular';  /* Nom de la police personnalisée */
    src: url('fonts/Poppins-Regular.ttf') format('truetype');  /* Chemin vers le fichier .ttf */
    font-weight: normal;  /* Poids normal de la police */
    font-style: normal;   /* Style normal de la police */
}

@font-face {
    font-family: 'Poppins-Bold';  /* Nom de la police personnalisée */
    src: url('fonts/Poppins-Bold.ttf') format('truetype');  /* Chemin vers le fichier .ttf */
    font-weight: normal;  /* Poids normal de la police */
    font-style: normal;   /* Style normal de la police */
}

@font-face {
    font-family: 'Poppins-Medium';  /* Nom de la police personnalisée */
    src: url('fonts/Poppins-Medium.ttf') format('truetype');  /* Chemin vers le fichier .ttf */
    font-weight: normal;  /* Poids normal de la police */
    font-style: normal;   /* Style normal de la police */
}

@font-face {
    font-family: 'Poppins-SemiBold';  /* Nom de la police personnalisée */
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');  /* Chemin vers le fichier .ttf */
    font-weight: normal;  /* Poids normal de la police */
    font-style: normal;   /* Style normal de la police */
}

body {
    font-family: 'Poppins-regular', sans-serif;  /* Utilisation de la police custom, avec fallback sur une police sans-serif */
    background-color: #f9f9f9; /* Couleur de fond douce */
    padding: 20px;
    margin: 0;
	background-image: url('images/fond1.webp');  /* Chemin vers votre image */
    background-size: cover;                      /* L'image prend toute la taille de la fenêtre */
    background-position: center;                 /* Centrer l'image */
    background-attachment: fixed;                /* L'image reste fixe lors du */
}



/* Conteneur du formulaire centré avec un fond blanc et une ombre douce */
.container {
    background-color: rgb(255 255 255 / 75%);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: auto;
	margin-top: 30px;
}

/* En-tête du formulaire avec un titre */
h1 {
    text-align: center;
    color: #333;
    font-size: 26px;
    margin-bottom: 20px;
}

/* Mise en forme des sections */
h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #444;
}

/* Espacement entre les champs et les étiquettes */
label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: #333;
}

/* Style des champs de texte (inputs et textarea) */
input[type="text"], textarea, select {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box; /* Pour inclure le padding dans la largeur totale */
}

/* Ajout d'un style aux champs textarea pour qu'ils soient plus grands et adaptés */
textarea {
    height: 100px;  /* Hauteur ajustée pour mieux afficher l'adresse */
}

/* Pour un bouton de soumission plus stylé */
button {
	font-family: 'Poppins-Bold';
    background-color: #ff7111;
    color: white;
    padding: 20px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 22px;
    width: 50%;
    margin-top: 50px;
	margin-bottom: 20px;
}

button:hover {
    background-color: #fb6400;
}

/* Style pour la liste des suggestions */
/* Style pour le conteneur des suggestions */
.suggestions-container {
    display: none; /* Masqué par défaut */
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /*width: calc(100% - 20px); /* S'assurer que la largeur est correcte */
    box-sizing: border-box;
}

/* Lorsque des suggestions existent, afficher la liste */
.suggestions-container.show {
    display: block !important; /* Afficher la liste des suggestions */
}

/* Style des éléments dans la liste des suggestions */
.suggestions-container div {
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
}

/* Effet de survol des suggestions */
.suggestions-container div:hover {
    background-color: #f1f1f1;
}

/* Pour s'assurer que la liste de suggestions reste bien dans le cadre sur mobile */
@media (max-width: 600px) {
    .suggestions-container {
        /*width: 100% !important; /* Utilisation de 100% de la largeur disponible */
        left: 0; /* Aligner à gauche */
        right: 0; /* Aligner à droite */
    }
}



/* Style du bouton "Saisir manuellement" */
input[type="checkbox"] {
    margin-right: 10px;
}

/* Espacement général entre les différentes sections du formulaire */
.section {
    margin-bottom: 20px;
}

/* Pour les petits écrans (téléphones mobiles), ajuster la largeur du formulaire */
@media (max-width: 600px) {
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        font-size: 18px;
    }

    input[type="text"], textarea, select {
        font-size: 14px;
    }

    button {
        font-size: 16px;
    }
}


/* Désactiver l'apparence par défaut des cases à cocher et boutons radio */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;  /* Désactiver l'apparence par défaut dans Chrome/Safari */
    -moz-appearance: none;     /* Désactiver l'apparence par défaut dans Firefox */
    appearance: none;          /* Désactiver l'apparence par défaut dans les autres navigateurs */
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border: 2px solid #ccc;    /* Ajouter une bordure grise */
    border-radius: 50%;        /* Bordures arrondies */
    background-color: #fff;    /* Fond blanc par défaut */
    cursor: pointer;          /* Curseur pointer pour signaler que c'est interactif */
    /*transition: background-color 0.3s, border-color 0.3s; /* Transition douce */
	/*margin-top: 10px;*/
	vertical-align:middle;
}

/* Lorsqu'une case est sélectionnée (cochée), la couleur devient orange */
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: #FF9800;  /* Fond orange */
    border-color: #FF9800;      /* Bordure orange */
}

/* Ajout de l'effet de survol (lorsque l'utilisateur survole la case ou le bouton radio) */
input[type="checkbox"]:hover, input[type="radio"]:hover {
    background-color: #FFB74D;  /* Couleur plus claire lorsqu'on survole */
}

/* Style du label lié aux cases et boutons radio */
label {
	font-family: 'Poppins-Bold';
    font-size: 18px; /* Augmenter la taille du texte */
    display: flex;
    align-items: center;
    margin-bottom: 0px;
	margin-top: 20px;
	
}

/* Couleur du texte pour les éléments sélectionnés */
input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {
    color: #FF9800;  /* Changer la couleur du texte en orange quand sélectionné */
    font-weight: bold; /* Mettre le texte en gras pour plus de visibilité */
}

/* Style pour le logo centré en haut de la page */
.logo-container {
    text-align: center;  /* Centrer le contenu à l'intérieur du div */
    margin: 20px;     /* Ajouter un espace au-dessus du logo */
}

.logo {
    width: 100%;               /* L'image prend toute la largeur du conteneur (max 300px) */
    max-width: 220px;          /* Limiter la largeur maximale du logo à 300px */
    height: auto;              /* Maintenir les proportions de l'image */
    display: block;            /* Enlever l'espace en bas de l'image */
    margin: 0 auto;            /* Centrer l'image horizontalement */
}

/* Conteneur du texte de la phrase */
.phrase-container {
    text-align: center;      /* Centrer tout le contenu de la phrase */
    margin-top: 20px;         /* Ajouter un espace entre le logo et la phrase */
}

/* Première ligne avec le mot MERCI */
.merci {
	font-family: 'Poppins-Bold';
    font-size: 150px;            /* Taille de la police pour "MERCI" */
    font-weight: bold;          /* Police très épaisse */
    width: 100%;                /* Prendre toute la largeur disponible */
    margin: 0 auto;             /* Centrer horizontalement */
    text-transform: uppercase; /* Mettre le texte en majuscules */
	color: white;
	line-height: 1;
}

/* Deuxième ligne avec le reste de la phrase */
.rest {
	font-family: 'Poppins-Bold';
    font-size: 24px;        /* Taille de la police plus petite */
    margin-top: 0px;        /* Un petit espace au-dessus */
    font-weight: normal;     /* Police moins épaisse */
	color: white;
}

/* Assurez-vous que tout est bien centré et espacé */
.container {
    text-align: center;
}

.instruction {
	font-family: 'Poppins-Bold';
    font-size: 18px; /* Augmenter la taille du texte */
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.red {
	color: red;
}

/* Conteneur de "Nom" et "Prénom" */
.name-container {
    display: flex; /* Utiliser Flexbox pour disposer les éléments côte à côte */
    gap: 20px;     /* Espacement entre les champs */
    margin-top: 10px; /* Espacement au-dessus */
}

/* Champs "Nom" et "Prénom" */
.name-field {
    flex: 1;               /* Chaque champ prend une largeur égale */
}

/* Éviter que les inputs prennent trop de place et s'étalent */
input[type="text"] {
    width: 100%;           /* Assurez-vous que les champs remplissent l'espace disponible */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.section-quizz {
	text-align: left;
	margin-top: 60px;
}

.obligatoire {
	color: red;
	text-align: right;
	
}

.conditions {
	text-align: center;
	font-family: 'Poppins-regular';
    font-size: 12px;
	margin-top: 40px;
}

/* Ajoutez cette partie pour améliorer l'apparence sur mobile */
@media (max-width: 600px) {
	
	body {
	background-image: url('images/fond1.webp');  /* Chemin vers votre image */
    background-size: cover;                      /* L'image prend toute la taille de la fenêtre */
    background-position-x: left;                 /* Centrer l'image */
	background-position-y: top;
    background-attachment: inherit;                /* L'image reste fixe lors du */
	background-attachment: fixed;  
	}

    /* Ajuster la largeur et les espacements de la section du formulaire */
    .container {
        padding: 15px;  /* Réduire le padding pour mieux utiliser l'espace */
        /*width: 100%;  /* Utiliser toute la largeur de l'écran */
    }

    h1 {
        font-size: 22px;  /* Réduire la taille du titre pour l'adapter à l'écran */
    }

    h2 {
        font-size: 18px;  /* Ajuster la taille des sous-titres */
    }

    /* Réduire la taille des champs de texte */
    input[type="text"], textarea, select {
        font-size: 14px;  /* Réduire la taille du texte dans les champs */
        padding: 10px;  /* Ajuster le padding pour un meilleur confort */
    }

    /* Ajuster la taille du bouton */
    button {
		width:75%;
        font-size: 16px;  /* Taille du texte dans le bouton */
        padding:30px;  /* Adapter le padding du bouton */
		border-radius: 30px;
    }

    /* Ajuster la taille de la phrase "MERCI" */
    .merci {
        font-size: 80px;  /* Réduire la taille sur mobile */
    }

    .rest {
        font-size: 18px;  /* Réduire la taille de la seconde partie de la phrase */
    }

    /* Réduire la taille de l'instruction */
    .instruction {
        font-size: 14px;
    }

    /* Ajuster l'espacement et la taille des éléments de la section Quizz */
    .section-quizz {
        font-size: 10px;  /* Réduire la taille du texte des questions */
        margin-top: 30px;  /* Réduire l'espace entre les sections */
    }

    .radio-container {
        font-size: 10px;  /* Réduire la taille du texte des boutons radio */
        margin-bottom: 5px;  /* Réduire l'espacement entre les réponses */
    }

    .name-container {
        flex-direction: column;  /* Empiler les champs "Nom" et "Prénom" sur mobile */
        gap: 10px;  /* Réduire l'espacement entre les champs */
    }

    /* Ajuster le texte obligatoire */
    .obligatoire {
        font-size: 12px;  /* Réduire la taille du texte "Champs obligatoires" */
        text-align: left;
    }

    /* Réduire la taille de la section des conditions */
    .conditions {
        font-size: 10px;  /* Plus petit texte */
        margin-top: 20px;
    }

    /* Adapter la liste des suggestions sur mobile */
    .suggestions-container {
        width: 100%;  /* Utiliser toute la largeur de l'écran pour la liste des suggestions */
    }
	
	.question2, .question3, .question4, .question5 {
        flex-direction: row;  /* Aligner les éléments sur une ligne (horizontalement) */
        flex-wrap: wrap;      /* Permettre aux textes de passer à la ligne si nécessaire */
    }

    /* Ajuster la largeur et l'espacement */
    .question2 input, .question3 input, .question4 input, .question5 input {
        margin-right: 5px;    /* Réduire l'espacement entre la checkbox et le texte */
    }

    /* Assurez-vous que le texte commence bien après la checkbox même si sur plusieurs lignes */
    .question2 label, .question3 label, .question4 label, .question5 label {
        display: inline-block;  /* Garder l'alignement du texte */
        width: calc(100% - 30px);  /* Ajuster la largeur pour s'assurer que le texte soit bien aligné */
        margin-left: 20px;      /* Créer un petit espacement avec la checkbox */
    }
}