/* Accueil */
@media screen and (max-width: 1200px) and (min-width: 993px) {
  .nav-item {
    font-size: 1.1rem;
    text-align: center;
  }
}

@media screen and (max-width: 992px) and (min-width: 769px) {
  .nav-item {
    font-size: 1.1rem;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 768px) and (min-width: 425px) {
  .nav-item {
    font-size: 1.1rem;
    justify-content: flex-start;
  }

  #searchbar {
    width: 10vh;
  }

  footer {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 425px) {
  .nav-item {
    font-size: 1.1rem;
    justify-content: flex-start;
  }

  #searchbar {
    width: 10vh;
    display: none;
    /* trouver le moyen de la faire apparaitre quand on clique sur la loupe sur petit écran */
  }
  footer {
    font-size: 0.6rem;
  }
}

/* Page Espèces */
@media  screen and (max-width:1200px) and (min-width:991px) {
}
/* #carte-sentier{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 3vh 0 3vh;
}

#map{
order: 1;
width: 100vh;
}

#div-carte{
order: 2;
} */

@media  screen and (max-width:991px) and (min-width:768px) {
  #titre-article::before,
  #titre-article::after, #titre-article-milieu::before, #titre-article-milieu::after {
    top: 40%;
    width: 30%;
    height: 0.3vh;
}

#titre-article-milieu{
margin-left: 2vh;
}

#chant-photo{
width: 100%;
height: 55%;
}

#evolution-menace, #illustration-perruche{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: start;
}

#evolution-menace-milieu, #carte-sentier{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}


#description-milieu{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding:1vh;
}

#description-milieu .col-6{
width: 100vh;
padding: 0;
}

#map{
order: 1;
margin: auto;
margin-left: 4vh;
}

#div-carte{
order: 2;
}

.carte{
height: 40vh;
margin-top: 5vh;
}

#evolution-menace .col-6{
width: 80vh;
margin-top: 4vh;
}

.illu{
width: 70%;
margin-left: 10vh;
}

.illu2{
width: 70%;
margin: 3vh 0 0 10vh;
}

.illu-perruche{
width: 70%;
height: 60%;
margin:3vh 7vh 0 7vh;
}

#reponses{
padding: 5vh;
margin-top: 3vh;
}
}

@media  screen and (max-width:768px) and (min-width:640px) {

  #titre-article::before,
  #titre-article::after, #titre-article-milieu::before, #titre-article-milieu::after {
    top: 40%;
    width: 15%;
    height: 0.3vh;
}

#titre-article-milieu{
margin-left: 2vh;
}

#identification, #identification2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#evolution-menace-milieu, #carte-sentier{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}


#description-milieu{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding:1vh;
}

#description-milieu .col-6{
width: 100vh;
padding: 0;
}

#map{
order: 1;
margin: auto;
}

#div-carte{
order: 2;
}

.carte{
height: 40vh;
margin-top: 5vh;
}

#identification .col-9, #identification2 .col-9{
width: 100%;
}

#identification .col-3, #identification2 .col-3{
width: 100%;
}

#chant-photo{
width: 50%;
height: 45%;
margin-top: 3vh;
}

#evolution-menace, #illustration-perruche{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align:start;
}

#evolution-menace .col-6{
width: 100%;
margin-top: 4vh;
}

.illu,.illu2{
width: 75%;
margin: 3vh 7vh 0 7vh;
}

.illu-perruche{
width: 90%;
height: 100%;
margin:3vh 5vh 0 5vh;
}

#reponses{
padding: 5vh;
margin-top: 3vh;
}

#table-protection{
width: 100%;
}

}

@media  screen and (max-width:640px) and (min-width:425px) {
#ban-article{
height: 50vh;
width: 100vh;
}
  #titre-article::before,
  #titre-article::after {
    top: 40%;
    width: 10%;
    height: 0.3vh;
}

#identification, #identification2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#identification .col-9, #identification2 .col-9{
width: 100%;
}

#identification .col-3, #identification2 .col-3{
width: 100%;
}

#evolution-menace-milieu, #carte-sentier{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}


#description-milieu{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding:1vh;
}

#description-milieu .col-6{
width: 100vh;
padding: 0;
}

#map{
order: 1;
margin: auto;
}

#div-carte{
order: 2;
}

.carte{
height: 40vh;
margin-top: 5vh;
}

#chant-photo{
width: 50%;
height: 45%;
margin-top: 3vh;
}

#evolution-menace, #illustration-perruche{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align:start;
}

#evolution-menace .col-6{
width: 100%;
margin-top: 4vh;
}

.illu,.illu2{
width: 75%;
margin: 3vh 7vh 0 7vh;
}

.illu-perruche{
width: 80%;
height: 100%;
margin:3vh 5vh 0 5vh;
}

#reponses{
padding: 5vh;
margin-top: 3vh;
}

#table-protection{
width: 100%;
}
}


@media  screen and (max-width:425px) {
#ban-article{
height: 45vh;
width: 100vh;
object-fit: fill;
}
  #titre-article::before,
  #titre-article::after, #titre-article-milieu::before, #titre-article-milieu::after {
    top: 40%;
    width: 10%;
    height: 0.3vh;
    display: none;
}

#titre-article-milieu{
margin-left: 2vh;
}

h1{
font-size: 1.6rem;
}

#description, #evolution-menace, #illustration-perruche, #reglementations {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#identification, #identification2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#identification .col-9, #identification2 .col-9{
width: 100%;
}

#identification .col-3, #identification2 .col-3{
width: 100%;
}

#evolution-menace-milieu, #carte-sentier{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#description-milieu{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding:2vh;
margin: 0 1.5vh;
border-radius: 2em;
}

#description-milieu .col-6{
width: 100vh;
padding: 0;
text-align: center;
}

h2{
font-size: 1.4rem;
}

p{
font-size: 0.9rem;
}

#map{
order: 1;
margin-left: 3vh;
}

#div-carte{
order: 2;
width: 100vh;
}

.carte{
display: none;
margin-top: 5vh;
}

#div-carte a {
display: block;
margin-right: 10vh;
}

#chant-photo{
width: 70%;
height: 60%;
}

#evolution-menace .col-6{
width: 100vh;
margin-top: 4vh;

}

.illu{
width: 80%;
margin: 3vh 5vh 0 5vh;
}

.illu2{
width: 80%;
margin: 3vh 5vh 0 5vh;
height: 80%;
}

.illu-perruche{
width: 90%;
height: 100%;
margin:auto;
margin-top: 3vh;
}

#reponses{
padding: 5vh;
margin-top: 3vh;
}

#table-protection{
width: 100%;
}

#table-protection td{
font-size: 0.8rem;
}
}