@charset "UTF-8";
html, body {
    
    background-image: url("images/backheight.webp");
    background-position: center 90%;
    background-size: cover;
    background-attachment: fixed; /* Fixe l'image de fond */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* Cache les débordements horizontaux */
    overflow-y: auto;
}

body::-webkit-scrollbar {
    width: 0px; /* Réduit la largeur de la scrollbar à zéro */
    background: transparent; /* Optionnel : rend l'arrière-plan transparent */
}

.offertpar{/*format de l'empied*/
    background-color: #3d3d3d;
    opacity: 0.7;
    color: #ffffff;
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center; /* centre verticalement */
    text-align: center; /* centre le texte à l'intérieur */
    padding: 5px;
    font-family: 'Roboto', sans-serif; 
    margin-top: 25px;
    
}

.head{
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    justify-content: center;
    width: 100%;
    

    transition: transform 0.75s ease-in-out;
    
}
.headanim {
    transform: translateX(-50%) translateX(20vh);
}










#step0 .b0 p {
    font-family: 'Roboto', sans-serif;
    color: rgb(255, 255, 255); /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    width: 100%; /* Le texte prend toute la largeur du conteneur */
    font-size: 2vw; /* La taille de la police s'ajuste en fonction de la largeur de la fenêtre */
    margin: 0; /* Supprimer les marges par défaut */
    white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
    overflow: hidden; /* Cache le texte qui dépasse (si nécessaire) */
    margin-bottom: 4vh;
}













.logo{/*format de l'entete*/
display: flex;
align-items: center;
margin: 2vh;
}

.logo1{/*ballon*/
    width: 35vw;
    

    transition: width 0.75s ease-in-out;
    margin:1vh; 
}
.logo1anim{/*ballon*/
    width: 30vh;
    margin:1vh; 
}

/*tout ce qui est police écriture*/
#step1 h1,#step2 h1,#step3 h1,#step4 h1 {
        font-size: 3em;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        color: #ffffff;
        margin-left: 10%;
        margin-right: 10%;   
}
.square-button span{/*texte des les boutons de l'étape 1*/
    margin: auto;
    width: 85%;
    white-space: pre-wrap;
    color: #ffffff;
    font-size: 2vw;
}


.p,p {/*texte des les boutons de l'étape 1*/
    font-family: 'Roboto', sans-serif;
    color: rgb(255, 255, 255); /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    width: 100%; /* Le texte prend toute la largeur du conteneur */
    font-size: 3vw; /* La taille de la police s'ajuste en fonction de la largeur de la fenêtre */
    margin: 0; /* Supprimer les marges par défaut */
    white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
    
}





h2 {/* text bouton suivant retour*/
        color: #ffffff;  /* Change la couleur du texte */
        font-size: 2vh; /* Taille de la police */
        font-weight: bold; /* Met le texte en gras */
        
}

#step0 .b0 h5 {
    font-family: 'Roboto', sans-serif;
    color: rgb(255, 255, 255); /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    width: 100%; /* Le texte prend toute la largeur du conteneur */
    font-size: 3vw; /* La taille de la police s'ajuste en fonction de la largeur de la fenêtre */
    margin: 0; /* Supprimer les marges par défaut */
    white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
    overflow: hidden; /* Cache le texte qui dépasse (si nécessaire) */
}



.b1 { /*container étape 1*/
    aspect-ratio: 3/2;
    margin-left:20%;
    margin-right: 20%;
    margin-bottom: auto;
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    align-items: center;
    gap:20px;
}
.b2, .b3 {  /*conntainer étape 2 et 3*/
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    width: 85%;
    max-width: 50vh;

}

.b0{
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    width: 80%;
    white-space: nowrap;
    
}




#champlogement2{
    width: 100%;    /* Largeur de l'input */
    height: 100%;
    height: 5vh;    /* Hauteur de l'input */
        /* Espace intérieur */
    font-size: 18px; /* Taille du texte */
    border: none;
    border-radius: 5px; /* Coins arrondis */
    
}

#adresse,#champlogement, #Ville, #prenom, #telephone, #courriel {/*format des champs des formulaires*/
    width: 98%;    /* Largeur de l'input */
    height: 5vh;    /* Hauteur de l'input */
        /* Espace intérieur */
    font-size: 18px; /* Taille du texte */
    border: 1px solid #ccc; /* Bordure */
    border-radius: 5px; /* Coins arrondis */
    margin: 10px;
    
}
.image-limitee {/*format images dans les boutons étape 1 */
    
    width: 80%;   /* Limite la largeur à 90% du conteneur */
    height: 80%;  /* Limite la hauteur à 90% du conteneur */
    opacity: .3;
}
.suivantretourcont{/*container boutons suivant et retour*/
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;  
    gap:20px;
}
.retour{
        height: 8vh;    /* Hauteur du bouton */
        width:15vh;
        padding: 10px;   /* Espace intérieur */
        font-size: 16px; /* Taille du texte */
        border-radius: 5px; /* Coins arrondis */
        cursor: pointer; /* Curseur en forme de main */
        border:0px;
        display: flex;
        justify-content: center;
        align-items: center;
        background:#024490;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); 
}
#n, #nextButtonStep3 {/*boutons suivant*/
        
        height: 8vh;    /* Hauteur du bouton */
        width:15vh;
        padding: 10px;   /* Espace intérieur */
        
        font-size: 16px; /* Taille du texte */
        border:0px;
        border-radius: 5px; /* Coins arrondis */
        cursor: pointer; /* Curseur en forme de main */
        display: flex;
        justify-content: center;
        align-items: center;
        background:#024490;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
#nextButtonStep3:disabled {/*bouton étepe 3 désactivé*/
    background:#0244906b;     
    cursor: not-allowed;    
    box-shadow: none;       
    
}
.square-button {/*format bouton carré étape 1*/
    
    aspect-ratio: 1;
    border-radius: 5px;
    height:100%;
    background: linear-gradient(to right, #04326c,#024490);
    border: 0;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    margin-bottom:0px;
    flex-direction: column;          /* Active Flexbox */
    align-items: center;     /* Centre verticalement le contenu */
    justify-content: center;
    justify-self: center;

    
}
.caché { 
    display: none;
}
.visible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}


/* Animation de disparition (glissement vers la gauche et disparition) */
@keyframes slideInLeft {
    0% {
        transform: translateX(-10%);
        opacity: 0;
        
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        
    }
}
@keyframes slideInRight {
    0% {
        transform: translateX(10%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideOutLeft {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(-10%);
        opacity: 0;
    }
}
@keyframes slideOutRight {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(10%);
        opacity: 0;
    }
}
.appearRight {
    animation: slideInRight 0.5s forwards;
}
.appearLeft {
    animation: slideInLeft 0.5s forwards;
}
.disappearRight {
    animation: slideOutRight 0.5s forwards;
}
.disappearLeft {
    animation: slideOutLeft 0.5s forwards;
}



.error {/*si hamp non remplis*/
    border: 2px solid red;
}


.checkbox{/*zone politique et checkbox*/
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    margin-left: auto;
    width:100%;
    font-family: Arial, sans-serif; /* Remplacez par la police que vous souhaitez */
    color: #ffffff; /* Remplacez par la couleur de votre choix */
    font-size: 1.7vh;

    
}

#policyText {
    width: 85%;
    max-width: 50vh;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
    border: 2px solid #f0f0f0;
    background-color: rgba(27, 27, 27, 0.493);
}

#policyText p {
    width: 100%; /* S'assure que <p> occupe toute la largeur de #policyText */
    white-space: normal; /* Utilisation normale des espaces, remplace pre */
    text-align: left;
    color: #ffffff;
    line-height: 1.5;
    margin: 0; /* Supprimer les marges pour maximiser l'espace */
    font-size: 1.2vw; /* Ajuster la taille de la police selon le besoin */
}










input[type="checkbox"] {
    width: 25px;   /* Largeur de la case à cocher */
    height: 25px;  /* Hauteur de la case à cocher */
    cursor: pointer;
    margin-right: 10px;
    margin-left:0px;
    
    appearance: none;      /* Supprime l'apparence par défaut */
    -webkit-appearance: none; 
    border-radius: 5px;
    background-color: #ffffff; /* Couleur de fond de la case */
    border: 2px solid #1f1f1f; 
}
input[type="checkbox"]:checked {
    background-color: #3a3a3a; /* Couleur de fond quand cochée */
}

@media (max-aspect-ratio: 1/1) {
    .square-button {
        
        height: 90%;  /* Ajustement de la largeur */
        aspect-ratio: 1; /* Maintien du ratio carré */  
    }
    .b1 {
        width: 80%;
        grid-template-columns: repeat(2, 3fr); 
        aspect-ratio: 2/3;
        margin-left:10%;
        margin-right: 10%;
        gap: 0;


    } 
    .retour{
            /* Largeur du bouton */
            height: 8vh;    /* Hauteur du bouton */
            width:20vh;
            padding: 10px;   /* Espace intérieur */
            font-size: 16px; /* Taille du texte */
            border: 0px;
            border-radius: 5px; /* Coins arrondis */
            cursor: pointer; /* Curseur en forme de main */
    }

    #n, #nextButtonStep3 { 
        
        height: 8vh;
        width:20vh;
        padding: 10px;   /* Espace intérieur */
        font-size: 16px; /* Taille du texte */
        border: 0px;
        border-radius: 5px; /* Coins arrondis */
        cursor: pointer; /* Curseur en forme de main */
    }
   

    .suivantretourcont{
        width:100%;
        display: flex;
        
        align-items: center;
        margin-top: 10px;  
        gap:20px;
    }
    input[type="checkbox"] {
        aspect-ratio: 1;
        width: 30px;   /* Largeur de la case à cocher */
        height: auto;  /* Hauteur de la case à cocher */
        cursor: pointer;
        
    }
    .entete{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 5vh;
        margin-right: 5vh;
        margin-top: 1vh;
        
        
    }


    #step0 .b0 h5 {
        font-family: 'Roboto', sans-serif;
        color: rgb(255, 255, 255); /* Couleur du texte */
        text-align: center; /* Centrer le texte */
        width: 100%; /* Le texte prend toute la largeur du conteneur */
        font-size: 5vw; /* La taille de la police s'ajuste en fonction de la largeur de la fenêtre */
        margin: 0; /* Supprimer les marges par défaut */
        white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
        overflow: hidden; /* Cache le texte qui dépasse (si nécessaire) */
    }

    .headanim{
        transform: translateX(0) translateX(0);
    }

    .logo1{/*ballon*/
        width: 80vw;
    
        transition: width 0.5s ease-in-out;
        margin:1vh; 
    }
    .logo1anim{/*ballon*/
        width: 50vw;
        margin:1vh; 
    }

    .square-button span{/*texte des les boutons de l'étape 1*/
        margin: auto;
        width: 85%;
        white-space: pre-wrap;
        color: #ffffff;
        font-size: 3vw;
    }

    #step0 .b0 p {
        font-family: 'Roboto', sans-serif;
        color: rgb(255, 255, 255); /* Couleur du texte */
        text-align: center; /* Centrer le texte */
        width: 100%; /* Le texte prend toute la largeur du conteneur */
        font-size: 3vw; /* La taille de la police s'ajuste en fonction de la largeur de la fenêtre */
        margin: 0; /* Supprimer les marges par défaut */
        white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
        overflow: hidden; /* Cache le texte qui dépasse (si nécessaire) */
        margin-bottom: 4vh;
    }
    #step1 h1,#step2 h1,#step3 h1,#step4 h1 {
        font-size: 2em;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        color: #ffffff;
        margin-left: 10%;
        margin-right: 10%;   
}
  


}

#step0 #n{
    height: auto;
    width: 20vw;
    min-width: 250px;
}
#step0 #n h2 {
    font-size: 3vh;
    margin-top: 1vw;
    margin-bottom: 1vw;

}