/* responsive.css */

/* Pour les écrans avec une largeur maximale de 740px */
@media only screen and (max-width: 740px) {
    #wrapper {
        background-color: transparent;
        text-align: center; /* Centrer le texte */
    }

}

/* Pour les écrans avec une largeur maximale de 570px */
@media only screen and (max-width: 570px) {
    #wrapper {
        background-color: transparent;
        text-align: center; /* Centrer le texte */
    }
    
}

/* Pour les écrans avec une largeur maximale de 480px */
@media only screen and (max-width: 480px) {
    #wrapper {
        background-color: transparent;
    }

    
    header {
        background-color: #f7f7f9;
        border: 1px solid #ccc;
       
        border-radius: 3px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        padding: 20px;
        text-align: left;
        position: relative;
    }
    
    
    
    #header img {
        width: 100%; /* Ajustez la largeur de l'image pour qu'elle occupe 100% de la largeur du conteneur */
        max-width: 250px; /* Ajoutez une largeur maximale pour l'image */
        margin-top: 150px; /* Ajoutez une marge en haut de l'image */
        position: static; /* Changez la position à statique pour la placer en dessous du texte */
        
    }
/* Pour afficher en une seule colonne */
#header, #profil, #FR, #COMP, #PA, #EXP, #LAN, #CI, #MC,#nav-bar {
    width: 100%;
    float: none;
    box-sizing: border-box;
    text-align: center; /* Centrer le texte */
}
}