@media (max-width:1024px){
    .niveau1{
        top:8rem;
    }
}
@media (max-width:769px){
    nav{display:none;}

    .flexWrap{
        flex-direction: column;
    }

    .photoAdopt{
        width:100%;
        height:300px;
    }

    .niveau1{
        top:8rem;
    }
    .block{
        height:auto;
    }
    .coutourArticles{
        display:flex;
        flex-direction: column;
    }
    .contourArticle1{
        width: 100%;
    }
    .contourArticle2{
        width: 100%;
    }
    .contourArticle3{
        width: 100%;
    }
    .article1-back {
        width:50%;
        margin:0% 25%;
    }
    .article2-back {
        width:50%;
        margin:0% 25%;
    }
    .article3-back {
        width:50%;
        margin:0% 25%;
    }
    footer{
        flex-direction: column;
    }
    .fb{
        width:100%;
    }
    .adresseMails{
        width:100%;
    }
    .localisation{
        width:100%;
    }
    .text1 {
        font-size:1.2rem; 
    }
    .textA{
        font-size:1.2rem; 
    }
    .dispoContact {
        flex-direction:column;
    }
    span { 
        font-size:1.2rem; 
    }
    .textC{
        flex-direction:column;
        padding:2% 0% 2% 0%;
    }
    .contactTitre{
        width:100%;
        color:white;
    }
    .contact {
        margin-top:-5rem;
        width:100%;
    }
}

@media (max-width:680px){ 
    .fond {
        height:140vh;
    }
    header{
        flex-direction:column;
        justify-content: center;
        align-items: center;
    }
    .logo{
        height: 12vh!important;;
        margin-left:0%;
    }
    .titre{
        font-size:2rem;
        letter-spacing: 0.5rem;
    }
    .text1 {
        font-size:1.2rem; 
    }
    .textA{
        font-size:1.2rem; 
    }
    span { 
        font-size:1.2rem; 
    }
    .nav{
        display:none;
    }
    .fondAdop {
        background-position:35%;
    }
    .fondAide {
        background-position:25%;
    }
    .fond2 {
        background-position:30%;
    }
}

@media (max-width:576px){ 
    .article1-back {
        width:100%;
        margin:0%;
    }
    .article2-back {
        width:100%;
        margin:0%;
    }
    .article3-back {
        width:100%;
        margin:0%;
    }
    .text1 {
        font-size:1rem; 
    }
    .textA{
        font-size:1rem; 
    }
    span { 
        font-size:1rem; 
    }
    .textC{
        width:90%;
    }
}

@media (max-width:388px) {
    .text1 {
        font-size:0.9rem; 
    }
    .textA{
        font-size:0.9rem; 
    }
    span { 
        font-size:0.9rem; 
    }
}

@media (max-width:320px){ 
    span { 
        font-size:0.6rem;
    }
}
@media (max-width:290px){ 
    .titre{
        font-size:1.6rem;
    }
    .text1 {
        font-size:0.8rem; 
    }
    .textA{
        font-size:0.8rem; 
    }
    span { 
        font-size:0.8rem; 
    }
}