/* Media queries for responsiveness */

/* Pour les écrans de moins de 900px */
@media (max-width: 1200px) {
    body {
        margin: 10px; /* Marges réduites */
    }
    
    .couleur2{
        margin: -10px;
        padding: 10px;
    }
    .couleur2 p{
        margin: -10px;
        padding: 10px;
    }   
    header {
        font-size: 20px; /* Taille du texte réduite */
    }
    .hautgauche {
        font-size: 40px; /* Taille du logo réduite */
        z-index: 20;
    }
    .hautdroit {
        display: none; /* Masquer le menu classique */
    }
    .burger-menu {
        display: flex; /* Afficher le menu burger */
    }
    /* TEXTE */
    .journee{
        font-size: 70px;
    }
    .texte1{
        font-size: 17px;
        align-items: start;
    }
    .date{
        font-size: 40px;
        align-items: start;
        margin-bottom: 25px;
    }
    .grostexte{
        font-size: 25px;
    }
    .courant{
        font-size: 17px;
    }
    .petittexte{
        font-size: 8px;
    }
    .titre{
        font-size: 6vw;
    }
    .espacement{
        margin-bottom: 5vh;
    }
    .cercle{
        width: 200px;
        height: 200px;
        font-size: 26px;
        bottom: 0;
    }
    .motifhorizontale{
        margin: -10px;
        margin-top: 20px;
    }

    /* footer */
    footer{
        display: none;
    }
    .site{
        display: none;
    }
    .footerquery {
        display: block;
        background-color: #353EFF;
        color: #FBEEDC;
        margin: -10px;
        padding: 10px;
        font-family: Apfel;
        box-sizing: border-box;
    }
    .date2 {
        font-size: 7vw;
    }
    .titre {
        font-size: 7vw;
        font-family: Expo;
        margin-bottom: 10px;
        margin-top: 20px;
    }
    .footer-pages {
        padding-left: 70%;
    }
    .footer-pages li a {
        color: #FBEEDC; /* Lien blanc */
        font-size: 3vw;
    }
    .footer-right {
        width: 100%;
    }
    .petitfooter {
        margin-top: 20px;
        margin-bottom: 40px;
        font-size:2vw;
        color: #FBEEDC;
    }
    .social-buttons {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
    }
    .footer-right .cercle3 {
        width: 30vw; /* La largeur est définie en fonction de la largeur de la fenêtre */
        height: 30vw; /* La hauteur est égale à la largeur pour garder un cercle parfait */
        max-width: 350px; /* Limite la taille maximale des cercles */
        max-height: 350px; /* Limite la taille maximale des cercles */
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        text-align: center;
        cursor: pointer;
        color: #FBEEDC;
        border: 3px solid #FBEEDC;
        font-size: 4vw; 
        margin-top: 30px;
    }
    .cercle3 a {
        text-decoration: none;
        color: inherit;
    }
    .cercle3:hover {
        background-color: #FBEEDC;
        color: #353EFF;
        border: 1px solid #FBEEDC;
    }
    .anais{
        color: #FBEEDC;
        font-size: 10px;
    }
    .sitequery{
        margin-top: 50px;
        background-color: #353EFF;
        display: block;
        display: flex;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
        width: 100%;
    }
}





/* Pour les écrans entre 1000px et 1300px */
@media (max-width: 1000px) {
    body {
        margin: 10px; /* Marges intermédiaires */
    }
    header {
        font-size: 30px; /* Taille du texte intermédiaire */
    }
    .hautgauche {
        font-size: 50px; /* Taille du logo intermédiaire */
    }
    .hautdroit a {
        font-size: 30px; /* Taille des liens intermédiaire */
    }

    .journee{
        font-size: 13vw;
    }

    /* footer */
    footer{
        display: none;
    }

    .site{
        display: none;
    }

    .sitequery{
        display: block;
    }

    .footerquery {
        display: block;
        background-color: #353EFF;
        color: #FBEEDC;
        margin: -10px;
        padding: 10px;
        font-family: Apfel;
        box-sizing: border-box;
    }


    .date2 {
        font-size: 40px;
    }
    .titre {
        font-size: 40px;
        font-family: Expo;
        margin-bottom: 10px;
        margin-top: 20px;
    }
    .footer-pages {
        padding-left: 0%;
    }
    .footer-pages li a {
        color: #FBEEDC; /* Lien blanc */
        font-size: 20px;
    }
    .footer-right {
        width: 100%;
    }
    .petitfooter {
        margin-top: 20px;
        margin-bottom: 40px;
        font-size: 12px;
        color: #FBEEDC;
    }
    .cercle3 {
        width: 30vw; /* La largeur est définie en fonction de la largeur de la fenêtre */
        height: 30vw; /* La hauteur est égale à la largeur pour garder un cercle parfait */
        max-width: 250px; /* Limite la taille maximale des cercles */
        max-height: 250px;
        display: flex;
        justify-content: center; 
        align-items: center; 
        text-align: center;
        cursor: pointer;
        position: relative;
        color: #FBEEDC;
        border: 3px solid #FBEEDC;
        font-size: 30px;
        margin-top: 30px;
    }
    .cercle3:hover {
        background-color: #FBEEDC;
        color: #353EFF;
        border: 1px solid #FBEEDC;
    }


}