/* ======================= */
/* Responsive pour tous les écrans */
/* ======================= */

/* Smartphones portrait (≤ 480px) */
@media (max-width: 480px) {
.inscription-container {
flex-direction: column;
width: 95%;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 10px;
}

.banniere {
    padding: 20px;
    text-align: center;
}

.banniere-content h1 {
    font-size: 1.8rem;
}

.banniere-content p {
    font-size: 0.95rem;
    max-width: 90%;
    margin: 0 auto;
}

.formulaire {
    padding: 30px 20px;
    box-shadow: none;
}

.formulaire form {
    max-width: 100%;
}

.formulaire input,
.formulaire select,
.formulaire button,
.formulaire .login-btn,
.micho {
    font-size: 0.95rem;
    padding: 12px 14px;
}

}

/* Smartphones paysage et petites tablettes (≤ 768px) */
@media (max-width: 768px) {
.inscription-container {
flex-direction: column;
width: 90%;
margin-top: 30px;
margin-bottom: 30px;
}

.banniere {
    padding: 30px;
    text-align: center;
}

.banniere-content h1 {
    font-size: 2rem;
}

.banniere-content p {
    font-size: 1rem;
    max-width: 95%;
    margin: 0 auto;
}

.formulaire {
    padding: 40px 30px;
}

.formulaire form {
    max-width: 100%;
}


}

/* Tablettes moyenne (≤ 1024px) */
@media (max-width: 1024px) {
.inscription-container {
flex-direction: column;
width: 85%;
margin-top: 40px;
margin-bottom: 40px;
}


.banniere-content h1 {
    font-size: 2.2rem;
}

.banniere-content p {
    font-size: 1.05rem;
}

.formulaire {
    padding: 50px 30px;
}

}

/* Grands écrans (≥ 1440px) */
@media (min-width: 1440px) {
.inscription-container {
width: 60%;
}


.banniere-content h1 {
    font-size: 3rem;
}

.banniere-content p {
    font-size: 1.2rem;
}

.formulaire {
    padding: 60px 50px;
}


}